@extends('layouts.app')
@section('content')
    <div class="container-fluid">
        <x-dashboard.breadcumb :title="$title" />
        <div class="card">
            <div class="card-header align-items-center d-flex">
                <h5 class="card-title flex-grow-1 mb-0">{{ $title }}</h5>
            </div>
            <div class="card-body">
                @php
                    // IMPORTANT: 'data' must match the key returned by DataTables JSON.
                    // Your controller uses ->addColumn('checkbox', ...), so use 'checkbox' here.
                    $columns = [
                        [
                            'title' => '<input type="checkbox" id="select-all">',
                            'data' => 'checkbox',   // <-- was 'select'
                            'name' => 'checkbox',
                            'orderable' => false,
                            'searchable' => false,
                            'className' => 'align-middle',
                            'width' => '1%',
                        ],
                        ['title' => 'Name', 'data' => 'name', 'name' => 'name'],
                        ['title' => 'Email', 'data' => 'email', 'name' => 'email'],
                        ['title' => 'Mobile', 'data' => 'mobile', 'name' => 'mobile'],
                        ['title' => 'Class', 'data' => 'class', 'name' => 'class'],
                        ['title' => 'Subject', 'data' => 'subject', 'name' => 'subject'],
                        ['title' => 'Message', 'data' => 'message', 'name' => 'message'],
                        [
                            'title' => 'Action',
                            'data' => 'action',
                            'orderable' => false,
                            'searchable' => false,
                        ],
                    ];
                @endphp

                <x-data-table-script :route="route('enquiry.index')" :reorder="null" :columns="$columns" />
            </div>
        </div>
    </div>
@endsection

@push('js')
<script>
$(function () {
    // Initialize DataTable ONCE on the correct selector
    const enquiryTable = $('.ajax-datatable').DataTable({
        columnDefs: [
            { targets: 0, orderable: false, searchable: false } // disable checkbox col
        ]
    });

    // Keep master checkbox cleared on redraws (pagination/filtering)
    enquiryTable.on('draw', function () {
        $('#select-all').prop('checked', false);
    });

    // Select/Deselect all (current page rows)
    $(document).on('change', '#select-all', function () {
        const checked = this.checked;
        const rows = enquiryTable.rows({ page: 'current' }).nodes();
        $('.enquiry-select', rows).prop('checked', checked);
    });

    // When any row checkbox changes, sync master checkbox state for current page
    $(document).on('change', '.enquiry-select', function () {
        const rows = enquiryTable.rows({ page: 'current' }).nodes();
        const total = $('.enquiry-select', rows).length;
        const checked = $('.enquiry-select:checked', rows).length;
        $('#select-all').prop('checked', total > 0 && checked === total);
    });

    // Bulk action (optional)
    $('.bulk-select').on('change', function () {
        const action = $(this).val();
        const ids = $('.enquiry-select:checked').map(function () { return this.value; }).get();

        if (!ids.length) {
            alert('Please select at least one enquiry.');
            $(this).val('');
            return;
        }

        if (action == 2 || action == 3) {
            $.ajax({
                url: "{{ route('enquiry.bulkAction') }}",
                method: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    action: action,
                    ids: ids
                },
                success: function (res) {
                    alert(res.message);
                    enquiryTable.ajax.reload(null, false); // keep page
                    $('.bulk-select').val('');
                    $('#select-all').prop('checked', false);
                }
            });
        }
    });
});
</script>
@endpush