@extends('modules.drivers.layouts.base')
@section('title', __('drivers.title'))

@section('content_body')
    <div class="flex flex-wrap items-center lg:items-end justify-between gap-5 pb-7.5">
        <div class="flex flex-col justify-center gap-2">
            <h1 class="text-xl font-medium leading-none text-mono">
                {{ __('drivers.title') }}
            </h1>
        </div>
        <div class="flex items-center gap-2.5">
            <!-- Space for top buttons if needed -->
        </div>
    </div>

    <div class="grid gap-5 lg:gap-7.5">
        @include('modules.drivers.partials.table')
    </div>

    <!-- Number of Vehicles Modal -->
    <div class="kt-modal" data-kt-modal="true" id="vehicles-list-modal">
        <div class="kt-modal-content max-w-[600px] top-[10%]">
            <div class="kt-modal-header border-b border-gray-200">
                <h3 class="kt-modal-title">{{ __('drivers.number_of_vehicles') }}</h3>
                <button type="button" class="kt-modal-close" aria-label="Close modal"
                    data-kt-modal-dismiss="#vehicles-list-modal">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="lucide lucide-x">
                        <path d="M18 6 6 18"></path>
                        <path d="m6 6 12 12"></path>
                    </svg>
                </button>
            </div>
            <div class="kt-modal-body p-0" style="max-height: 50vh; overflow-y: auto;">
                <table class="kt-table table-striped table-row-bordered gy-5 gs-7 mb-0">
                    <thead class="text-xs uppercase text-muted mb-2">
                        <tr>
                            <th class="text-left py-2 px-5">{{ __('drivers.vehicle') }}</th>
                            <th class="text-left py-2 px-5">{{ __('drivers.type') }}</th>
                            <th class="text-left py-2 px-5">{{ __('drivers.allowed_at') }}</th>
                        </tr>
                    </thead>
                    <tbody id="allowed-vehicles-tbody" class="text-sm">
                        <!-- Vehicles injected here -->
                    </tbody>
                </table>
            </div>
            <div class="kt-modal-footer">
                <div class="flex bg-white gap-4 ms-auto">
                    <button class="kt-btn kt-btn-outline"
                        data-kt-modal-dismiss="#vehicles-list-modal">{{ __('drivers.cancel') }}</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Action Logs Modal -->
    <div class="kt-modal" data-kt-modal="true" id="action-logs-modal">
        <div class="kt-modal-content max-w-[800px] top-[10%]">
            <div class="kt-modal-header border-b border-gray-200">
                <h3 class="kt-modal-title">{{ __('drivers.action_logs') }}</h3>
                <button type="button" class="kt-modal-close" aria-label="Close modal"
                    data-kt-modal-dismiss="#action-logs-modal">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="lucide lucide-x">
                        <path d="M18 6 6 18"></path>
                        <path d="m6 6 12 12"></path>
                    </svg>
                </button>
            </div>
            <div class="kt-modal-body p-0" style="max-height: 50vh; overflow-y: auto;">
                <table class="kt-table table-striped table-row-bordered gy-5 gs-7 mb-0">
                    <thead class="text-xs uppercase text-muted mb-2">
                        <tr>
                            <th class="text-left py-2 px-5">{{ __('drivers.vehicle') }}</th>
                            <th class="text-left py-2 px-5">{{ __('drivers.action') }}</th>
                            <th class="text-left py-2 px-5">{{ __('drivers.date') }}</th>
                            <th class="text-left py-2 px-5">{{ __('drivers.user') }}</th>
                        </tr>
                    </thead>
                    <tbody id="action-logs-tbody" class="text-sm">
                        <!-- Logs injected here -->
                    </tbody>
                </table>
            </div>
            <div class="kt-modal-footer">
                <div class="flex gap-4 ms-auto bg-white">
                    <button class="kt-btn kt-btn-outline"
                        data-kt-modal-dismiss="#action-logs-modal">{{ __('drivers.cancel') }}</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Allow/Disallow Modal -->
    <div class="kt-modal" data-kt-modal="true" id="action-modal">
        <div class="kt-modal-content max-w-[500px] top-[10%]">
            <div class="kt-modal-header border-b border-gray-200">
                <h3 class="kt-modal-title" id="action-modal-title">{{ __('drivers.action') }}</h3>
                <button type="button" class="kt-modal-close" aria-label="Close modal" data-kt-modal-dismiss="#action-modal">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="lucide lucide-x">
                        <path d="M18 6 6 18"></path>
                        <path d="m6 6 12 12"></path>
                    </svg>
                </button>
            </div>
            <div class="kt-modal-body p-8 flex flex-col items-center justify-center text-center">
                <input type="hidden" id="selected-driver-id">
                <input type="hidden" id="current-desc">
                <input type="hidden" id="current-rfid">
                <input type="hidden" id="selected-vehicle-id">
                <input type="hidden" id="current-action">
                <input type="hidden" id="device-phone">

                <div id="qrcode-container"
                    class="hidden mb-4 p-4 bg-white border border-gray-200 rounded flex flex-col items-center justify-center min-h-[200px] min-w-[200px]">
                </div>
            </div>
            <div class="kt-modal-footer">
                <div class="flex gap-4 ms-auto">
                    <button class="kt-btn kt-btn-outline"
                        data-kt-modal-dismiss="#action-modal">{{ __('drivers.cancel') }}</button>
                    <button id="confirm-btn" class="kt-btn kt-btn-primary hidden" onclick="DriversApp.confirmAction()">
                        {{ __('drivers.confirm') }}
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Add Driver Modal -->
    <div class="kt-modal" data-kt-modal="true" id="add-driver-modal">
        <div class="kt-modal-content max-w-[600px] top-[10%]">
            <div class="kt-modal-header border-b border-gray-200">
                <h3 class="kt-modal-title">@lang('drivers.add_new_driver')</h3>
                <button type="button" class="kt-modal-close" aria-label="Close modal"
                    data-kt-modal-dismiss="#add-driver-modal">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="lucide lucide-x">
                        <path d="M18 6 6 18"></path>
                        <path d="m6 6 12 12"></path>
                    </svg>
                </button>
            </div>
            <form id="add-driver-form">
                @csrf
                <div class="kt-modal-body p-6">
                    <div class="grid gap-5">
                        <div>
                            <label class="form-label font-medium text-gray-700"
                                for="driver-fleet">@lang('drivers.fleet')</label>
                            <select id="driver-fleet" name="email" class="kt-select w-100" data-kt-select="true"
                                data-kt-select-enable-search="true" data-kt-select-search-placeholder="Search..."
                                data-kt-select-config='{
                                        "optionsClass": "kt-scrollable overflow-auto max-h-[250px]"
                                    }' data-kt-select-placeholder="{{ __('drivers.select_vehicle') }}">
                                <option value="">{{ __('drivers.select_fleet') ?? 'Select Fleet' }}</option>
                                @foreach($fleets as $fleet)
                                    @php $fleetName = $fleet->title ?? $fleet->name ?? $fleet->id; @endphp
                                    <option value="{{ $fleetName }}">{{ $fleetName }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="form-label font-medium text-gray-700" for="driver-description">ID</label>
                            <input type="text" class="kt-input max-w-full form-control" id="driver-description"
                                name="description" value="{{ $nextDescription }}" readonly required>
                        </div>
                        <div>
                            <label class="form-label font-medium text-gray-700"
                                for="driver-name">@lang('drivers.name')</label>
                            <input type="text" class="kt-input max-w-full form-control" id="driver-name" name="name"
                                required>
                        </div>
                        <div>
                            <label class="form-label font-medium text-gray-700"
                                for="driver-phone">@lang('drivers.phone')</label>
                            <input type="text" class="kt-input max-w-full form-control" id="driver-phone" name="phone">
                        </div>
                        <div>
                            <label class="form-label font-medium text-gray-700"
                                for="driver-rfid">@lang('drivers.rfid')</label>
                            <input type="text" class="kt-input max-w-full form-control" id="driver-rfid" name="rfid"
                                pattern="^[A-Fa-f0-9]{16}$" maxlength="16" minlength="16"
                                title="16-character hexadecimal string" required>
                        </div>
                    </div>
                </div>
                <div class="kt-modal-footer">
                    <div class="flex gap-4 ms-auto bg-white">
                        <button type="button" class="kt-btn kt-btn-outline"
                            data-kt-modal-dismiss="#add-driver-modal">{{ __('drivers.cancel') }}</button>
                        <button type="submit" class="kt-btn kt-btn-primary">{{ __('drivers.save') ?? 'Save' }}</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Edit Driver Modal -->
    <div class="kt-modal" data-kt-modal="true" id="edit-driver-modal">
        <div class="kt-modal-content max-w-[600px] top-[10%]">
            <div class="kt-modal-header border-b border-gray-200">
                <h3 class="kt-modal-title">{{ __('drivers.edit') ?? 'Edit Driver' }}</h3>
                <button type="button" class="kt-modal-close" aria-label="Close modal"
                    data-kt-modal-dismiss="#edit-driver-modal">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="lucide lucide-x">
                        <path d="M18 6 6 18"></path>
                        <path d="m6 6 12 12"></path>
                    </svg>
                </button>
            </div>
            <form id="edit-driver-form">
                @csrf
                <input type="hidden" id="edit-driver-id" name="id">
                <div class="kt-modal-body p-6 scrollable-y-auto" style="max-height: 65vh; overflow-y: auto;">
                    <div class="grid gap-5">
                        <div>
                            <label class="form-label font-medium text-gray-700"
                                for="edit-driver-fleet">@lang('drivers.fleet')</label>
                            <select id="edit-driver-fleet" name="email" class="kt-select w-100" data-kt-select="true"
                                data-kt-select-enable-search="true" data-kt-select-search-placeholder="Search..."
                                data-kt-select-config='{
                                        "optionsClass": "kt-scrollable overflow-auto max-h-[250px]"
                                    }' data-kt-select-placeholder="{{ __('drivers.select_vehicle') }}">
                                <option value="">{{ __('drivers.select_fleet') ?? 'Select Fleet' }}</option>
                                @foreach($fleets as $fleet)
                                    @php $fleetName = $fleet->title ?? $fleet->name ?? $fleet->id; @endphp
                                    <option value="{{ $fleetName }}">{{ $fleetName }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="form-label font-medium text-gray-700" for="edit-driver-description">ID</label>
                            <input type="text" class="kt-input max-w-full form-control" id="edit-driver-description"
                                name="description" readonly required>
                        </div>
                        <div>
                            <label class="form-label font-medium text-gray-700"
                                for="edit-driver-name">@lang('drivers.name')</label>
                            <input type="text" class="kt-input max-w-full form-control" id="edit-driver-name" name="name"
                                required>
                        </div>
                        <div>
                            <label class="form-label font-medium text-gray-700"
                                for="edit-driver-phone">@lang('drivers.phone')</label>
                            <input type="text" class="kt-input max-w-full form-control" id="edit-driver-phone" name="phone">
                        </div>
                        <div>
                            <label class="form-label font-medium text-gray-700"
                                for="edit-driver-rfid">@lang('drivers.rfid')</label>
                            <input type="text" class="kt-input max-w-full form-control" id="edit-driver-rfid" name="rfid"
                                pattern="^[A-Fa-f0-9]{16}$" maxlength="16" minlength="16"
                                title="16-character hexadecimal string" required>
                        </div>
                    </div>
                </div>
                <div class="kt-modal-footer">
                    <div class="flex gap-4 ms-auto bg-white">
                        <button type="button" class="kt-btn kt-btn-outline"
                            data-kt-modal-dismiss="#edit-driver-modal">{{ __('drivers.cancel') }}</button>
                        <button type="submit" class="kt-btn kt-btn-warning">{{ __('drivers.save') ?? 'Save' }}</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

@endsection

@section('config')
    <script>     window.DriversConfig = {}; window.DriversConfig.indexUrl = "{{ route('drivers.index') }}"; window.DriversConfig.actionUrl = "{{ route('drivers.action') }}"; window.DriversConfig.storeUrl = "{{ route('drivers.store') }}"; window.DriversConfig.updateUrl = "{{ route('drivers.update', ':id') }}"; window.DriversConfig.vehicleSystemCommandUrl = "{{ route('drivers.send-vehicle-system-command') }}"; window.DriversConfig.csrfToken = "{{ csrf_token() }}"; window.DriversConfig.lang = {
            allow_vehicle: @json(__('drivers.allow_vehicle')), disallow_vehicle: @json(__('drivers.disallow_vehicle')), selected: @json(__('drivers.selected')), no_results: @json(__('drivers.no_results')), no_allowed_vehicles_found: @json(__('drivers.no_allowed_vehicles_found')), please_scan_qr: @json(__('drivers.please_scan_qr')),
            ensure_phone_authorized: @json(__('drivers.ensure_phone_authorized')),
            please_select: @json(__('drivers.please_select_vehicle_first')),
            enable_system: @json(__('drivers.enable_system')),
            disable_system: @json(__('drivers.disable_system')),
            confirm_system_command: @json(__('drivers.confirm_system_command')),
            system_command_sent_success: @json(__('drivers.system_command_sent_success')),
            system_command_send_error: @json(__('drivers.system_command_send_error')),
            vehicle_no_phone: @json(__('drivers.vehicle_no_phone')),
            driver_no_description: @json(__('drivers.driver_no_description')),
            driver_no_rfid: @json(__('drivers.driver_no_rfid')),
            please_select_driver: @json(__('drivers.please_select_driver')),
            max_drivers_selected: @json(__('drivers.max_drivers_selected')),
            confirm_gprs: @json(__('drivers.confirm_gprs')),
            gprs_sent_success: @json(__('drivers.gprs_sent_success')),
            gprs_send_error: @json(__('drivers.gprs_send_error')),
            allow_by_gprs: @json(__('drivers.allow_by_gprs')),
            disallow_by_gprs: @json(__('drivers.disallow_by_gprs')),
            error_saving: @json(__('drivers.error_saving_action')), allow: @json(__('drivers.allow')), disallow: @json(__('drivers.disallow')), export: @json(__('drivers.export')), unknown_vehicle: @json(__('drivers.unknown_device')), logs: @json(__('drivers.logs')), no_logs_found: @json(__('drivers.no_logs_found')),
            driver_added_success: @json(__('drivers.driver_added_success')),
            driver_add_error: @json(__('drivers.driver_add_error')),
            driver_updated_success: @json(__('drivers.driver_updated_success')),
            driver_update_error: @json(__('drivers.driver_update_error')),
            edit: @json(__('drivers.edit'))
        }; console.log("DriversConfig loaded");
    </script>
@endsection

@section('extra_scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
    <script src="{{ asset('assets/js/apps/drivers/index.js') }}?v={{ time() }}"></script>
    <script>     // Make DriversApp logic available to inline onclick handlers     // that are injected dynamically by DataTables or inline HTML
    </script>
@endsection