@extends('Admin.layout')

@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">

        <div class="d-flex justify-content-between align-items-center flex-wrap gap-3 mb-4">

            <div>
                <h4 class="fw-bold mb-1">
                    Customers
                </h4>

            </div>

            <a href="{{ route('customer_create') }}" class="btn btn-primary">

                <i class="ti tabler-plus me-1"></i>
                Add Customer

            </a>

        </div>


        <div class="card">


            <div class="card-body">

                <div class="table-responsive">

                    <table id="customersTable" class="table table-bordered table-hover align-middle w-100">

                        <thead>
                            <tr>
                                <th>S.No</th>
                                <th>Date</th>
                                <th>Name</th>
                                <th>Phone No</th>
                                <th>Address</th>
                                <th>Remark</th>

                                <th class="text-center">Action</th>
                            </tr>
                        </thead>

                    </table>

                </div>

            </div>

        </div>

    </div>


    {{-- Delete Modal --}}

    {{-- DELETE CUSTOMER MODAL --}}

    <div class="modal fade" id="deleteModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">

        <div class="modal-dialog modal-sm modal-dialog-centered">

            <div class="modal-content rounded-4 text-center p-4 py-5">

                <h5 class="fw-bold mb-2">
                    Delete Customer
                </h5>

                <p class="text-muted">
                    Are you sure you want to delete this customer?
                </p>

                <form action="{{ route('customer_delete') }}" method="POST" id="deleteCustomerForm">

                    @csrf

                    {{-- Hidden Customer ID --}}

                    <input type="hidden" name="customer_id" id="delete_customer_id">

                    <div class="d-flex justify-content-center align-items-center gap-3 mt-4">

                        <button type="button" class="btn btn-outline-primary p-3 fw-semibold" data-bs-dismiss="modal">

                            Cancel

                        </button>

                        <button type="submit" class="btn btn-danger p-3 fw-semibold" id="deleteSubmitBtn">

                            <span class="deleteBtnText">
                                Yes, Delete
                            </span>

                            <span class="deleteBtnLoader d-none">

                                <span class="spinner-border spinner-border-sm me-1"></span>

                                Deleting...

                            </span>

                        </button>

                    </div>

                </form>

            </div>

        </div>

    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {

            $('#customersTable').DataTable({

                processing: true,

                serverSide: true,

                pageLength: 10,

                columnDefs: [

                    {
                        targets: '_all',
                        className: 'text-nowrap'
                    }

                ],

                lengthMenu: [
                    [10, 25, 50, 100],
                    [10, 25, 50, 100]
                ],

                ajax: {
                    url: "{{ route('customer_data') }}",
                    type: "GET",

                    error: function(xhr) {

                        console.log('Customer Data Error:', xhr.responseText);

                    }

                },
                order: [
                    [1, 'desc']
                ],

              
                columns: [

                    {
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },

                    {
                        data: 'created_at',
                        name: 'created_at'
                    },

                    {
                        data: 'name',
                        name: 'name'
                    },

                    {
                        data: 'phone_no',
                        name: 'phone_no'
                    },

                    {
                        data: 'address',
                        name: 'address'
                    },

                    {
                        data: 'remark',
                        name: 'remark'
                    },

                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false,
                        className: 'text-center'
                    }

                ],

                language: {

                    lengthMenu: "_MENU_",

                    search: "",

                    searchPlaceholder: "Search..."

                }

            });


            // DELETE MODAL

            window.openDeleteModal = function(customerId) {

                document.getElementById('delete_customer_id').value = customerId;

                let deleteModal = new bootstrap.Modal(
                    document.getElementById('deleteModal')
                );

                deleteModal.show();

            };


            // DELETE BUTTON LOADER

            document.getElementById('deleteCustomerForm')
                .addEventListener('submit', function() {

                    let btn = document.getElementById('deleteSubmitBtn');

                    btn.disabled = true;

                    document.querySelector('.deleteBtnText')
                        .classList.add('d-none');

                    document.querySelector('.deleteBtnLoader')
                        .classList.remove('d-none');

                });

        });
    </script>
@endsection