@extends('Admin.layout')
@section('content')
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h4 class="mb-0">Customers</h4>
    </div>
    <div class="card p-4">
        <!-- Table -->
        <div class="table-responsive">
            <table id="Customer" class="table table-bordered align-middle">
                <thead>
                    <tr>
                        <th>SNO</th>
                        <th>NAME</th>
                        <th>EMAIL</th>
                        <th>PHONE</th>
                        <th>STATE</th>
                        <th>DISTRICT</th>
                        <th>PIN CODE</th>
                        <th>ADDRESS</th>
                        <th>ACTION</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content text-center p-8">
            <h4>Are you sure?</h4>
            <p class="text-muted text-nowrap">Do you really want to delete this customer?</p>
            <input type="hidden" id="deleteCustomerrId">
            <div class="d-flex justify-content-center gap-3 mt-3">
                <button class="btn btn-outline-primary w-100" data-bs-dismiss="modal">Cancel</button>
                <button id="confirmDelete" class="btn btn-danger  w-100">Yes, Delete</button>
            </div>
        </div>
    </div>
</div>
<!-- Toast container for JS -->
<div class="position-fixed top-0 end-0 p-3" style="z-index: 9999">
    <div id="customToast" class="toast text-white border-0" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="d-flex">
            <div class="toast-body" id="customToastBody"></div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
        </div>
    </div>
</div>
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
<script>
    $(function() {
        // Initialize DataTable
        var table = $('#Customer').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('customer_data') }}",
            columns: [{
                    data: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                 {
                    data: 'name'
                },
                 {
                    data: 'email'
                },
                {
                    data: 'phone_number'
                },
                {
                    data: 'state',
                    searchable: false
                },
                {
                    data: 'district',
                    searchable: false
                },
                {
                    data: 'pincode',
                    searchable: false
                },
                {
                    data: 'address',
                    searchable: false
                },
                {
                    data: 'action',
                    orderable: false,
                    searchable: false
                }
            ],
            pageLength: 10,
            language: {
                search: "_INPUT_",
                searchPlaceholder: "Search Customer"
            }
        });
        // Capture delete button click
        $('#Customer').on('click', '.deleteCustomerBtn', function() {
            var id = $(this).data('id');
            $('#deleteCustomerrId').val(id);
            $('#deleteModal').modal('show');
        });
        // Confirm delete
        $('#confirmDelete').on('click', function() {
            var id = $('#deleteCustomerrId').val();
            $.ajax({
                url: "{{ route('delete_customer') }}",
                type: 'POST',
                data: {
                    _token: "{{ csrf_token() }}",
                    delete_id: id
                },
                beforeSend: function() {
                    $('#confirmDelete').prop('disabled', true).text('Deleting...');
                },
                success: function(res) {
                    $('#deleteModal').modal('hide');
                    showToast(res.success || res.error, res.success ? 'bg-success' : 'bg-danger');
                    table.ajax.reload(null, false);
                },
                error: function(xhr) {
                    $('#deleteModal').modal('hide');
                    showToast('Something went wrong!', 'bg-danger');
                },
                complete: function() {
                    $('#confirmDelete').prop('disabled', false).text('Yes, Delete');
                }
            });
        });
        // Toast function
        function showToast(message, bgClass) {
            var toastEl = $('#customToast');
            $('#customToastBody').text(message);
            toastEl.removeClass('bg-success bg-danger').addClass(bgClass);
            var toast = new bootstrap.Toast(toastEl[0], {
                delay: 3000
            });
            toast.show();
        }
    });
</script>
@endsection