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

@section('content')

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div class="content-header">
                        <div class="container-fluid">
                            <div class="row">

                            </div><!-- /.row -->
                        </div><!-- /.container-fluid -->
                    </div>
                    <div class="card card-primary card-outline">
                        <div class="card-header">
                            <h3 class="card-title">{{ __('Search Customers') }}</h3>
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body">
                            <div class="col-lg-12">
                                <form action="" method="POST">
                                    @csrf
                                    <div class="row">

                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label for="user_id" class="form-label">Name</label>
                                                <select class="form-control select2" name="user_id" id="user_id">
                                                    <option value="">Select Name</option>
                                                    @foreach ($users as $user)
                                                        <option value="{{ $user->id }}"
                                                            {{ old('first_name') == $user->first_name ? 'selected' : '' }}>
                                                            {{ $user->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label for="status" class="form-label">Status</label>
                                                <select class="form-control select2" name="status" id="status">
                                                    <option value="">Select Status</option>
                                                    <option value="active" {{ old('status') == 'active' ? 'selected' : '' }}>Active</option>
                                                    <option value="blocked" {{ old('status') == 'blocked' ? 'selected' : '' }}>Blocked</option>
                                                    <option value="pending" {{ old('status') == 'pending' ? 'selected' : '' }}>Pending</option>
                                                </select>
                                                @if ($errors->has('status'))
                                                    <p class="text-danger">{{ $errors->first('status') }}</p>
                                                @endif
                                            </div>
                                        </div>
                                
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label for="email" class="form-label">Email</label>
                                                <select class="form-control select2" name="email" id="email">
                                                    <option value="">Select Email</option>
                                                    @foreach ($users as $user)
                                                        <option value="{{ $user->email }}"
                                                            {{ old('email') == $user->email ? 'selected' : '' }}>
                                                            {{ $user->email }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                
                                        <!-- Button Group -->
                                        <div class="col-md-12">
                                            <div class="d-flex justify-content-end mt-3">
                                                <div class="btn-group">
                                                    <button type="reset" class="btn btn-primary btn-sm" id="refreshBtn">
                                                        <i class="bi bi-arrow-clockwise"></i> Refresh
                                                    </button>
                                                    <button type="submit" class="btn btn-success btn-sm" id="searchBtn">
                                                        <i class="bi bi-search"></i> Search
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                                
                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <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 datatable tableContent">
                                <thead>
                                    <tr>
                                        <th scope="col">#</th>
                                        <th scope="col">Image</th>
                                        <th scope="col">Name</th>
                                        <th scope="col">Email/Phone</th>
                                        <th scope="col">Status</th>
                                        <th scope="col">Actions</th>
                                    </tr>
                                </thead>
                                <tbody id="tbody">
                                    @include('admin.customer.partial.user-list', ['users' => $users])
                                </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