@extends('template.layouts.template-base')
@section('title', 'Driver Master')

@section('styles')
<style>
    .page-content {
        background-color: #F0F4F8 !important;
        padding: 80px 10px;
    }
    .cate-top-btns .btn-delete-category:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
</style>
@endsection

@section('content')
<div class="page-header">
    <div class="container-fluid">
        <div class="row align-items-center">
            <div class="col">
                <div class="page-title">
                    <a href="javascript:void(0);">Masters / <span class="breadcrumb-link">Driver Masters</span></a>
                </div>
            </div>
            <div class="col-auto cate-top-btns">
                <button type="button" id="bulkDeleteBtn" class="btn-delete-category" disabled>
                    Delete <i class="bx bxs-trash fs-5"></i>
                </button>
                <button type="button" id="driverNoopExportBtn" class="btn-export-category" data-export-loader="true">
                    Export
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M12 16V3"></path>
                        <polyline points="7 8 12 3 17 8"></polyline>
                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                    </svg>
                </button>
                <a class="btn-add-category" href="{{ route('backend.master.add-driver') }}">Create Driver</a>
            </div>
        </div>
    </div>
</div>

<div class="container-fluid product-table-sec invoice-page">
    <div class="content-wrapper">
        <div class="filter-section">
            <span class="invoice-count">Total Drivers - {{ str_pad($driverCount, 2, '0', STR_PAD_LEFT) }}</span>

            <div class="d-flex gap-2 align-items-center">
                <select id="statusFilter" class="dropdown-btn">
                    <option value="">Status</option>
                    <option value="1">Active</option>
                    <option value="0">Inactive</option>
                </select>

                <div class="search-box-category">
                    <input type="text" placeholder="Search" id="searchInput">
                    <i class="bx bx-search"></i>
                </div>
            </div>
        </div>

        <div class="card-body">
            <div class="table-responsive table-card">
                <table id="driverTable" class="table align-middle mb-0 orders-table-container w-100">
                    <thead class="custom-table-header">
                    <tr>
                        <th><input type="checkbox" id="selectAll"></th>
                        <th>Driver ID</th>
                        <th>Name</th>
                        <th>Contact</th>
                        <th>Vehicle No</th>
                        <th>Rating</th>
                        <th>Note</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
    <script>
        $(function () {
            const bulkDeleteUrl = "{{ route('backend.master.bulk-destroy-driver') }}";
            let driverBulkActions = null;

            const table = $('#driverTable').DataTable({
            processing: true,
            serverSide: true,
            ordering: false,
            searching: false,
            responsive: true,
            pageLength: 10,
            ajax: {
                url: "{{ route('backend.master.index-driver') }}",
                data: function (d) {
                    d.status = $('#statusFilter').val();
                    d.search_text = $('#searchInput').val();
                }
            },
            columns: [
                {data: 'checkbox', name: 'checkbox', orderable: false, searchable: false},
                {data: 'driver_code', name: 'driver_code'},
                {data: 'name_text', name: 'name'},
                {data: 'phone_text', name: 'phone'},
                {data: 'vehicle_text', name: 'vehicle_text', orderable: false, searchable: false},
                {data: 'rating_text', name: 'rating', orderable: false, searchable: false},
                {data: 'notes_text', name: 'notes'},
                {data: 'status_badge', name: 'status', orderable: false, searchable: false},
                {data: 'action', name: 'action', orderable: false, searchable: false},
                ],
                drawCallback: function () {
                    $('#selectAll').prop('checked', false);
                    if (driverBulkActions && typeof driverBulkActions.updateState === 'function') {
                        driverBulkActions.updateState();
                    }
                }
            });

        $('#statusFilter').on('change', function () {
            table.ajax.reload();
        });

        let searchTimer;
        $('#searchInput').on('input', function () {
            clearTimeout(searchTimer);
            searchTimer = setTimeout(function () {
                table.ajax.reload();
            }, 350);
        });

            if (window.AppTableActions && typeof window.AppTableActions.bindBulkActions === 'function') {
                driverBulkActions = window.AppTableActions.bindBulkActions({
                    bulkDeleteBtn: '#bulkDeleteBtn',
                    exportBtn: '#driverNoopExportBtn',
                    exportUrl: "{{ route('backend.master.export-driver') }}",
                    filterFields: {
                        status: '#statusFilter',
                        search_text: '#searchInput'
                    },
                    rowCheckbox: '.row-checkbox',
                    selectAll: '#selectAll',
                    tableSelector: '#driverTable',
                    bulkDeleteUrl: bulkDeleteUrl,
                    deleteModalTitle: 'Delete Drivers?',
                    deleteModalText: 'Are you sure you want to delete selected drivers? This action cannot be undone.',
                    emptySelectionMessage: 'Please select at least one driver.',
                    bulkDeleteSuccessMessage: 'Selected drivers deleted successfully.',
                    bulkDeleteFailMessage: 'Bulk delete failed.',
                    tableReload: function () {
                        table.ajax.reload(null, false);
                    }
                });
            }
        });
</script>
@endsection