@extends('admin.layouts.app')

@push('style')
<!-- third party css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">

<link href="{{asset('admin/assets/libs/datatables.net-bs5/css/dataTables.bootstrap5.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('admin/assets/libs/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('admin/assets/libs/datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('admin/assets/libs/datatables.net-select-bs5/css//select.bootstrap5.min.css')}}" rel="stylesheet" type="text/css" />
<!-- third party css end -->
@endpush

@section('content')
<section class="content home">
    <div class="block-header">

        <!-- Start Content-->
        <div class="container-fluid">

            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box">
                        <div class="page-title-right">
                            <ol class="breadcrumb mb-4">
                                <li class="breadcrumb-item"><a href="{{route('admin-dashboard')}}">Animal Consultation</a></li>
                                <li class="breadcrumb-item active">Manage Customers</li>
                            </ol>
                        </div>
                        <!-- <h4 class="page-title">PRODUCT LISTING</h4> -->
                    </div>
                </div>
            </div>


            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">

                            <div class="form-outline">
                                <input type="text" id="search-input" class="form-control" placeholder="Search here"/>
                            </div>

                            <table id="customer-datatable" class="table dt-responsive nowrap w-100 mb-5 mt-4" style="width:100%;">
                                <thead class="text">
                                    <tr>
                                        <th>#</th>
                                        <th>Name</th>
                                        <th>Email</th>
                                        <th>Phone Number</th>
                                        <th>Registered Date</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>

                                <tbody class="text">

                                </tbody>
                            </table>

                        </div> <!-- end card body-->
                    </div> <!-- end card -->
                </div><!-- end col-->
            </div>
        </div> <!-- container -->
    </div> <!-- content -->
</section>
@endsection


@push('script')
<script>
    var table;

    $(document).ready(function() {

        table = $('#customer-datatable').DataTable({
            searching: false,
            processing: true,
            serverSide: true,
            aaSorting: [
                [0, 'asc']
            ],
            "ajax": {
                type: 'GET',
                url: '{{route("admin-get_customer_listing")}}',
                data: function(d) {
                    d.keyword = $('#search-input').val(); // Add keyword parameter for searching
                }
            },
            columns: [{
                    data: 'id',
                    orderable: false,
                    visible: false,
                },
                {
                    data: 'name',
                    orderable: false,
                },
                {
                    data: 'email',
                    orderable: false,
                },
                {
                    data: 'phone_number',
                    orderable: false,
                },
                {
                    data: 'registered_date',
                    orderable: false,
                },
                {
                    data: 'action',
                    orderable: false,
                },
            ],
        });
        $('#search-input').on('keyup', function() {
            table.search($(this).val()).draw();
        });



        $(document).on('click', '.btnBlockUser', function() {
            var userId = $(this).data('id');

            // Display a confirmation dialog using SweetAlert
            Swal.fire({
                title: 'Confirmation',
                text: 'Are you sure you want to block this user?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, block user'
            }).then((result) => {
                if (result.isConfirmed) {
                    // User confirmed the blocking action, proceed with AJAX request
                    $.ajax({
                        url: '{{ route("admin-block_customer") }}',
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            _token: '{{ csrf_token() }}',
                            user_id: userId
                        },
                        success: function(response) {
                            // Update the button and display a success message
                            $('.btnBlockUser[data-id="' + userId + '"]').replaceWith('<a href="javascript:void(0)" class="btn btn-xs btn-warning mx-2 btnUnblockUser" data-id="' + userId + '" title="Unblock"><i class="fa fa-lock-open"></i> Unblock</a>');
                            Swal.fire('Success', response.success, 'success');
                        },
                        error: function(xhr, status, error) {
                            // Handle error response
                            console.log(xhr.responseText);
                        }
                    });
                }
            });
        });

        // Unblock Customer
        $(document).on('click', '.btnUnblockUser', function() {
            var userId = $(this).data('id');

            // Display a confirmation dialog using SweetAlert
            Swal.fire({
                title: 'Confirmation',
                text: 'Are you sure you want to unblock this user?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, unblock user'
            }).then((result) => {
                if (result.isConfirmed) {
                    // User confirmed the unblocking action, proceed with AJAX request
                    $.ajax({
                        url: '{{ route("admin-unblock_customer") }}',
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            _token: '{{ csrf_token() }}',
                            user_id: userId
                        },
                        success: function(response) {
                            // Update the button and display a success message
                            $('.btnUnblockUser[data-id="' + userId + '"]').replaceWith('<a href="javascript:void(0)" class="btn btn-xs btn-danger mx-2 btnBlockUser" data-id="' + userId + '"  title="Block"><i class="fa fa-lock"></i> Block</a>');
                            Swal.fire('Success', response.success, 'success');
                        },
                        error: function(xhr, status, error) {
                            // Handle error response
                            console.log(xhr.responseText);
                        }
                    });
                }
            });
        });

    });
</script>
@endpush