@extends('template.layouts.template-base')
@section('title', 'Vehicle Type')

@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 product-main service-list">
        <div class="container-fluid p-0">
            <div class="row align-items-center">
                <div class="col">
                    <div class="page-title">
                        <a href="{{ route('backend.master.index-vehicle-type') }}">Master / <span
                                class="breadcrumb-link">Vehicle Type</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>
                    <a class="btn-add-category" href="{{ route('backend.master.add-vehicle-type') }}">Create Vehicle Type</a>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid product-table-sec vehicle-type">
        <div class="content-wrapper">
            <div class="filter-section">
            <span class="invoice-count">Total Drivers - {{ str_pad($vehicleTypeCount, 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="vehicleTypeTable" 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>Vehicle Type</th>
                                <th>Default Capacity</th>
                                <th>Notes</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-vehicle-type') }}";
            let vehicleTypeBulkActions = null;

            const table = $('#vehicleTypeTable').DataTable({
                processing: true,
                serverSide: true,
                ordering: false,
                searching: false,
                responsive: true,
                pageLength: 10,
                ajax: {
                    url: "{{ route('backend.master.index-vehicle-type') }}",
                    data: function(d) {
                        d.status = $('#statusFilter').val();
                        d.search_text = $('#searchInput').val();
                    }
                },
                columns: [{
                        data: 'checkbox',
                        name: 'checkbox',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'name_text',
                        name: 'name'
                    },
                    {
                        data: 'capacity_text',
                        name: 'default_capacity_kg'
                    },
                    {
                        data: 'description_text',
                        name: 'description'
                    },
                    {
                        data: 'status_badge',
                        name: 'status',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ],
                drawCallback: function() {
                    $('#selectAll').prop('checked', false);
                    if (vehicleTypeBulkActions && typeof vehicleTypeBulkActions.updateState === 'function') {
                        vehicleTypeBulkActions.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') {
                vehicleTypeBulkActions = window.AppTableActions.bindBulkActions({
                    bulkDeleteBtn: '#bulkDeleteBtn',
                    exportBtn: '#vehicleTypeNoopExportBtn',
                    rowCheckbox: '.row-checkbox',
                    selectAll: '#selectAll',
                    tableSelector: '#vehicleTypeTable',
                    bulkDeleteUrl: bulkDeleteUrl,
                    deleteModalTitle: 'Delete Vehicle Types?',
                    deleteModalText: 'Are you sure you want to delete selected vehicle types? This action cannot be undone.',
                    emptySelectionMessage: 'Please select at least one vehicle type.',
                    bulkDeleteSuccessMessage: 'Selected vehicle types deleted successfully.',
                    bulkDeleteFailMessage: 'Bulk delete failed.',
                    tableReload: function() {
                        table.ajax.reload(null, false);
                    }
                });
            }
        });
    </script>
@endsection