@extends('admin.layouts.master')
@section('title', 'All Users')

@section('content')

    <section class="content">
        <div class="container-fluid">

            <div class="row">
                <div class="col-md-12">
                    <div class="card card-primary card-outline mt-3">
                        <div class="card-header">
                            <h3 class="card-title mt-1"><b>{{ __('Customer List') }}</b></h3>
                            <div class="card-tools d-flex">
                                <a href="{{ route('admin.customer.add') }}" class="btn btn-primary btn-sm">
                                    <i class="fas fa-plus"></i> {{ __('Add New Customer ') }}
                                </a>
                            </div>
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body">
                            <table class="table table-striped table-bordered tableContent">
                                <thead>
                                    <tr>
                                        <th scope="col" style="width: 5%;">#</th>
                                        <th scope="col" style="width: 10%;">Image</th>
                                        <th scope="col" style="width: 20%;">Name</th>
                                        <th scope="col" style="width: 25%;">Email/Phone</th>
                                        <th scope="col" style="width: 15%;">Status</th>
                                        <th scope="col" style="width: 10%;">Actions</th>

                                    </tr>
                                </thead>
                                <tbody id="tbody">
                                    @forelse ($users as $id => $user)
                                        <tr>
                                            <td class="text-center">
                                                {{ ++$id }}
                                            </td>
                                            <td class="text-center">
                                                @if ($user->image)
                                                    <img class="w-[50px] h-[50px] rounded-full"
                                                        src="{{ asset($user->image) }}" alt="">
                                                @else
                                                    <div
                                                        class="w-[50px] h-[50px] bg-danger text-white rounded-full flex items-center justify-center text-lg font-bold">
                                                        {{ strtoupper(substr($user->first_name ?? 'U', 0, 1)) }}
                                                    </div>
                                                @endif
                                            </td>



                                            <td>
                                                @foreach ($user->platforms as $platform)
                                                    <a href="{{ $platform->pivot->url }}" target="_blank">{{ $platform->name }}</a>@if (!$loop->last), @endif
                                                @endforeach
                                            </td>
                                            
                                            <td>
                                                {{ $user->first_name }} {{ $user->last_name }}
                                                <p>
                                                    <span class="badge badge-info">
                                                        <i class="fa fa-building mr-2"></i> {{ $user->company }}
                                                    </span>
                                                </p>

                                            </td>
                                            <td>
                                                {{ $user->email }}
                                                <p> <span class="badge badge-warning"> <i
                                                            class="fa fa-phone mr-2"></i>{{ $user->phone }}</span></p>
                                            </td>
                                            <td class="text-center">
                                                @if ($user->status == 'active')
                                                    <span class="badge badge-success">Active</span>
                                                @elseif ($user->status == 'pending')
                                                    <span class="badge badge-info">Pending</span>
                                                @elseif ($user->status == 'blocked')
                                                    <span class="badge badge-danger">Blocked</span>
                                                @endif
                                            </td>
                                            <td>
                                                <div class="btn-group d-flex justify-content-center">
                                                    <div class="btn-group mx-1">
                                                        <button type="button"
                                                            class="btn btn-success btn-sm rounded-start">Action</button>
                                                        <button type="button"
                                                            class="btn btn-success btn-sm dropdown-toggle dropdown-hover dropdown-icon rounded-end"
                                                            data-toggle="dropdown" aria-expanded="false">
                                                            <span class="sr-only">Toggle Dropdown</span>
                                                        </button>
                                                        <div class="dropdown-menu" role="menu">
                                                            <a class="dropdown-item" href="#" id="approveUser"
                                                                data-user_id="{{ $user->id }}">Active User</a>
                                                            <a class="dropdown-item" href="#" id="pendingUser"
                                                                data-user_id="{{ $user->id }}">Pending User</a>
                                                            <a class="dropdown-item" href="#" id="blockUser"
                                                                data-user_id="{{ $user->id }}">Block
                                                                User</a>
                                                            <a class="dropdown-item"
                                                                href="{{ route('admin.customer.edit', $user->id) }}">Edit
                                                                User</a>
                                                            <div class="dropdown-divider"></div>
                                                            <a class="dropdown-item"
                                                                href="{{ route('admin.customer.password.edit', $user->id) }}">Change
                                                                Password</a>
                                                        </div>
                                                    </div>

                                                    @if ($user->status == 'blocked')
                                                        <form id="deleteform" class="deleteform d-inline-block"
                                                            action="{{ route('admin.customer.delete', $user->id) }}"
                                                            method="post">
                                                            @csrf
                                                            <button type="submit" class="btn btn-danger btn-sm deletebtn"
                                                                id="delete">
                                                                <span class="btn-label">
                                                                    <i class="fas fa-trash"></i>
                                                                </span>
                                                                Delete
                                                            </button>
                                                        </form>
                                                    @endif
                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="7" class="text-center text-muted">No users available.</td>
                                        </tr>
                                    @endforelse

                                </tbody>
                            </table>
                        </div>
                        <div class="loader text-center" id="loader" style="display: none">
                            <div class="spinner-border" role="status">
                                <span class="visually-hidden"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.row -->
    </section>
@endsection
@section('js')
    <script>
        $(document).on('click', '#pendingUser', function(e) {
            e.preventDefault();
            $('#loader').show();
            $('.tableContent').hide();

            var userID = $(this).data("user_id");

            $.ajax({
                url: `/make-user-pending/${userID}`,
                method: "POST",
                data: {},
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    $('#loader').hide();
                    $('.tableContent').show();

                    $(`a[data-user_id="${userID}"]`).closest('tr').find('td:eq(4)').html(
                        '<span class="badge badge-info">Pending</span>'
                    );

                    MyToast.fire({
                        icon: 'success',
                        title: 'Status Updated Successfully!'
                    });
                },
                error: function(xhr) {
                    $('#loader').hide();
                    $('.tableContent').show();

                    let errorMessage = "Something went wrong. Please try again.";

                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMessage = xhr.responseJSON.message;
                    }

                    Swal.fire({
                        title: "Error",
                        text: errorMessage,
                        icon: "error",
                        confirmButtonColor: "#d33"
                    });
                }
            });
        });

        $(document).on('click', '#approveUser', function(e) {
            e.preventDefault();
            $('#loader').show();
            $('.tableContent').hide();

            var userID = $(this).data("user_id");

            $.ajax({
                url: `/make-user-approved/${userID}`,
                method: "POST",
                data: {},
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    $('#loader').hide();
                    $('.tableContent').show();

                    $(`a[data-user_id="${userID}"]`).closest('tr').find('td:eq(4)').html(
                        '<span class="badge badge-success">Active</span>');
                    MyToast.fire({
                        icon: 'success',
                        title: 'Status Updated Successfully!'
                    });
                },
                error: function(xhr) {
                    $('#loader').hide();
                    $('.tableContent').show();

                    let errorMessage = "Something went wrong. Please try again.";

                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMessage = xhr.responseJSON.message;
                    }

                    Swal.fire({
                        title: "Error",
                        text: errorMessage,
                        icon: "error",
                        confirmButtonColor: "#d33"
                    });
                }
            });
        });
        $(document).on('click', '#blockUser', function(e) {
            e.preventDefault();
            $('#loader').show();
            $('.tableContent').hide();

            var userID = $(this).data("user_id");

            $.ajax({
                url: `/make-user-blocked/${userID}`,
                method: "POST",
                data: {},
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    $('#loader').hide();
                    $('.tableContent').show();

                    $(`a[data-user_id="${userID}"]`).closest('tr').find('td:eq(4)').html(
                        '<span class="badge badge-danger">Blocked</span>');
                    MyToast.fire({
                        icon: 'success',
                        title: 'Status Updated Successfully!'
                    });
                },
                error: function(xhr) {
                    $('#loader').hide();
                    $('.tableContent').show();

                    let errorMessage = "Something went wrong. Please try again.";

                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMessage = xhr.responseJSON.message;
                    }

                    Swal.fire({
                        title: "Error",
                        text: errorMessage,
                        icon: "error",
                        confirmButtonColor: "#d33"
                    });
                }
            });
        });


        $(document).ready(function() {
            const tbody = $('#tbody');
            const userName = $('#user_id');
            const email = $('#email');
            const status = $('#status');
            const searchBtn = $('#searchBtn');
            const loader = $('#loader');
            const tableContent = $('.tableContent');
            const refreshBtn = $('#refreshBtn');

            searchBtn.on("click", function(e) {
                e.preventDefault();

                const userNameVal = userName.val().trim();
                const emailVal = email.val().trim();
                const statusVal = status.val().trim();

                loader.show();
                tableContent.hide();
                searchBtn.attr("disabled", true);

                $.ajax({
                    url: "{{ route('admin.customer.search') }}",
                    type: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        user_id: userNameVal,
                        email: emailVal,
                        status: statusVal
                    },
                    success: function(response) {
                        if (response.success) {
                            tbody.html(response.html);
                        } else {
                            tbody.html(
                                '<tr><td colspan="3" class="text-center">No customers found</td></tr>'
                                );
                        }
                        loader.hide();
                        tableContent.show();
                        searchBtn.attr("disabled", false);
                    },
                    error: function(err) {
                        console.error(err);
                        alert("Something went wrong! Please check the console.");
                        loader.hide();
                        tableContent.show();
                        searchBtn.attr("disabled", false);
                    }
                });
            });

            // Reset and Refresh Table
            refreshBtn.on('click', function() {
                userName.val('');
                email.val('');
                status.val('');

                loader.show();
                tableContent.hide();
                searchBtn.attr('disabled', true);

                $.ajax({
                    url: "{{ route('admin.customer.search') }}",
                    type: 'POST',
                    data: {
                        _token: "{{ csrf_token() }}",
                        user_id: '',
                        email: '',
                        status: ''
                    },
                    success: function(response) {
                        tbody.html(response.html);
                        loader.hide();
                        tableContent.show();
                        searchBtn.attr('disabled', false);
                    },
                    error: function(err) {
                        loader.hide();
                        tableContent.show();
                        searchBtn.attr('disabled', false);
                    }
                });
            });
        });
    </script>





@endsection