@php
    $statusOptions = collect(\App\Enums\TripStatus::cases())->map(fn ($status) => [
        'value' => $status->value,
        'label' => $status->label(),
    ])->values();
    $vehicleOptions = $vehicles->map(fn ($v) => ['ulid' => $v->ulid, 'plate' => $v->plate])->values();
    $driverOptions = $drivers->map(fn ($d) => ['ulid' => $d->ulid, 'name' => $d->name])->values();
    $customerOptions = $customers->map(fn ($c) => ['ulid' => $c->ulid, 'name' => $c->name])->values();
@endphp
<x-app-layout>
    <x-slot name="header">
        {{ __('Trips — Spreadsheet View') }}
    </x-slot>

    <script>
        function tripGrid(initialRows, vehicleOptions, driverOptions, customerOptions, customerFieldsByCustomer, statusOptions, initialHidden, initialOrder) {
            const vehiclesByUlid = Object.fromEntries(vehicleOptions.map(v => [v.ulid, v]));
            const driversByUlid = Object.fromEntries(driverOptions.map(d => [d.ulid, d]));
            const customersByUlid = Object.fromEntries(customerOptions.map(c => [c.ulid, c]));

            // The stored order (if any) followed by any real column not in
            // it — covers a first-ever visit (empty order → natural
            // default order) and a column that didn't exist when the
            // preference was last saved (always still appears, at the end,
            // rather than silently vanishing).
            const defaultColumnOrder = ['date', 'departure_time', 'vehicle', 'driver', 'customer', 'pickup_location', 'dropoff_location', 'status', 'notes'];
            const startingColumns = [
                ...(initialOrder || []).filter(f => defaultColumnOrder.includes(f)),
                ...defaultColumnOrder.filter(f => !(initialOrder || []).includes(f)),
            ];

            return {
                // Vehicle/driver/customer cells are type-to-search comboboxes
                // (same interaction as Stock In/Out's part search): row.vehicle /
                // row.driver / row.customer hold the committed ULID (customer
                // may be null), row.vehicleQuery / row.driverQuery /
                // row.customerQuery are the cell's own display/typing text —
                // never sent to the server, only used to filter the local
                // (already tenant-scoped) vehicles/drivers/customers list
                // client-side.
                rows: initialRows.map(row => ({
                    ...row,
                    vehicleQuery: vehiclesByUlid[row.vehicle]?.plate ?? '',
                    driverQuery: driversByUlid[row.driver]?.name ?? '',
                    customerQuery: customersByUlid[row.customer]?.name ?? '',
                })),
                vehicles: vehicleOptions,
                drivers: driverOptions,
                customers: customerOptions,
                customerFields: customerFieldsByCustomer,
                statuses: statusOptions,
                customerTab: 'all',
                columns: startingColumns,
                columnLabels: {
                    date: 'Date', departure_time: 'Time', vehicle: 'Vehicle', driver: 'Driver', customer: 'Customer',
                    pickup_location: 'Pickup', dropoff_location: 'Dropoff', status: 'Status', notes: 'Notes',
                },
                dragColumn: null,

                dragging: false,
                rangeStart: null,
                rangeEnd: null,
                savingCell: {},
                cellError: {},
                pasting: false,
                addingRow: false,
                toast: null,

                hiddenColumns: initialHidden,
                columnsMenuOpen: false,

                openAutocomplete: null, // { row, col } of the cell whose dropdown is open, or null

                selectedRows: [],
                bulkField: 'status',
                bulkValue: '',
                bulkVehicle: '',
                bulkBusy: false,

                init() {
                    window.addEventListener('mouseup', () => { this.dragging = false; });
                },

                headers() {
                    return {
                        'Content-Type': 'application/json',
                        Accept: 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    };
                },

                // ---- column visibility + order (display-only, persisted
                // per-user together — every save sends both so the server
                // never has to guess which one changed) ----
                isVisible(field) {
                    return !this.hiddenColumns.includes(field);
                },
                async toggleColumn(field) {
                    const i = this.hiddenColumns.indexOf(field);
                    if (i === -1) this.hiddenColumns.push(field); else this.hiddenColumns.splice(i, 1);
                    await this.persistColumnPrefs();
                },
                // Drag-and-drop reorder in the Columns panel — vanilla HTML5
                // DnD (dragstart/dragover/drop), no library. dragColumn
                // tracks which field is currently being dragged; dropping
                // it onto another field's row moves it to that position.
                reorderColumn(fromField, toField) {
                    if (!fromField || fromField === toField) return;
                    const from = this.columns.indexOf(fromField);
                    const to = this.columns.indexOf(toField);
                    if (from === -1 || to === -1) return;

                    const next = [...this.columns];
                    next.splice(from, 1);
                    next.splice(to, 0, fromField);
                    this.columns = next;
                    this.persistColumnPrefs();
                },
                async persistColumnPrefs() {
                    try {
                        await fetch('{{ route('trips.grid.columns') }}', {
                            method: 'PATCH', headers: this.headers(),
                            body: JSON.stringify({ hidden: this.hiddenColumns, order: this.columns }),
                        });
                    } catch (e) { /* local state already applied; best-effort persistence */ }
                },

                // ---- add row ----
                async addRow() {
                    if (this.addingRow) return;
                    this.addingRow = true;
                    try {
                        const res = await fetch('{{ route('trips.grid.store') }}', {
                            method: 'POST', headers: this.headers(),
                            body: JSON.stringify({ customer: this.customerTab !== 'all' ? this.customerTab : null }),
                        });
                        const json = await res.json();
                        if (!json.success) {
                            this.toast = { type: 'error', message: (json.errors || []).join(' ') || 'Could not add a row.' };

                            return;
                        }
                        const row = json.row;
                        row.vehicleQuery = this.vehicles.find(v => v.ulid === row.vehicle)?.plate ?? '';
                        row.driverQuery = this.drivers.find(d => d.ulid === row.driver)?.name ?? '';
                        row.customerQuery = this.customers.find(c => c.ulid === row.customer)?.name ?? '';
                        this.rows.push(row);
                        this.$nextTick(() => this.focusCell(this.rows.length - 1, 0));
                    } catch (e) {
                        this.toast = { type: 'error', message: 'Network error.' };
                    } finally {
                        this.addingRow = false;
                    }
                },

                // ---- vehicle/driver/customer type-to-search (client-side
                // filter over the already tenant-scoped vehicles/drivers/
                // customers list — same interaction pattern as Stock In/
                // Out's part search) ----
                isAutocompleteOpen(r, col) {
                    return this.openAutocomplete?.row === r && this.openAutocomplete?.col === col;
                },
                openVehicleAutocomplete(r, c) {
                    this.openAutocomplete = { row: r, col: c };
                },
                openDriverAutocomplete(r, c) {
                    this.openAutocomplete = { row: r, col: c };
                },
                openCustomerAutocomplete(r, c) {
                    this.openAutocomplete = { row: r, col: c };
                },
                closeAutocomplete() {
                    this.openAutocomplete = null;
                },
                // Only cap results once the user has actually typed something
                // to narrow them down — capping the UNFILTERED list at 15 (as
                // this used to) silently hid any vehicle/driver past the 15th
                // alphabetically until the user typed, with no indication
                // more existed. The dropdown already scrolls (max-h-48
                // overflow-y-auto), so showing everything before a query is
                // typed is safe.
                filteredVehicles(query) {
                    const q = (query || '').trim().toLowerCase();
                    if (q === '') return this.vehicles;

                    return this.vehicles.filter(v => v.plate.toLowerCase().includes(q)).slice(0, 15);
                },
                filteredDrivers(query) {
                    const q = (query || '').trim().toLowerCase();
                    if (q === '') return this.drivers;

                    return this.drivers.filter(d => d.name.toLowerCase().includes(q)).slice(0, 15);
                },
                filteredCustomers(query) {
                    const q = (query || '').trim().toLowerCase();
                    if (q === '') return this.customers;

                    return this.customers.filter(c => c.name.toLowerCase().includes(q)).slice(0, 15);
                },
                pickVehicle(r, c, vehicle) {
                    this.rows[r].vehicle = vehicle.ulid;
                    this.rows[r].vehicleQuery = vehicle.plate;
                    this.closeAutocomplete();
                    this.commitCell(r, c);
                },
                pickDriver(r, c, driver) {
                    this.rows[r].driver = driver.ulid;
                    this.rows[r].driverQuery = driver.name;
                    this.closeAutocomplete();
                    this.commitCell(r, c);
                },
                // customer is nullable — passing null (the "— No customer —"
                // option) explicitly clears the cell, unlike vehicle/driver
                // which always have a real selection.
                pickCustomer(r, c, customer) {
                    this.rows[r].customer = customer ? customer.ulid : null;
                    this.rows[r].customerQuery = customer ? customer.name : '';
                    this.closeAutocomplete();
                    this.commitCell(r, c);
                },
                revertQuery(r, field) {
                    if (field === 'vehicle') {
                        this.rows[r].vehicleQuery = this.vehicles.find(v => v.ulid === this.rows[r].vehicle)?.plate ?? '';
                    } else if (field === 'driver') {
                        this.rows[r].driverQuery = this.drivers.find(d => d.ulid === this.rows[r].driver)?.name ?? '';
                    } else {
                        this.rows[r].customerQuery = this.customers.find(c => c.ulid === this.rows[r].customer)?.name ?? '';
                    }
                },
                onAutocompleteBlur(r, col, field) {
                    // A dropdown-item click uses @mousedown.prevent, which
                    // stops the browser from blurring the input at all —
                    // so this handler only ever runs when nothing was
                    // picked (Tab away, click elsewhere, Escape already
                    // closed it). Reverting is always safe to do for THIS
                    // cell; closing is guarded so a stale timeout can't
                    // clobber a different cell's dropdown that opened in
                    // the meantime (e.g. Tab moved focus to the next cell).
                    //
                    // customer is the one nullable field here — clearing the
                    // text and blurring without picking anything commits an
                    // explicit "no customer" rather than reverting, matching
                    // spreadsheet muscle-memory (clear the cell = clear the
                    // value). Vehicle/driver are required, so they always
                    // revert to the last committed value instead.
                    setTimeout(() => {
                        if (field === 'customer' && this.rows[r].customerQuery.trim() === '') {
                            this.pickCustomer(r, col, null);
                        } else {
                            this.revertQuery(r, field);
                        }
                        if (this.openAutocomplete?.row === r && this.openAutocomplete?.col === col) {
                            this.closeAutocomplete();
                        }
                    }, 150);
                },
                onAutocompleteEnter(r, col, field) {
                    if (field === 'customer' && this.rows[r].customerQuery.trim() === '') {
                        this.pickCustomer(r, col, null);
                        if (r + 1 < this.rows.length) this.focusCell(r + 1, col);

                        return;
                    }

                    const query = field === 'vehicle' ? this.rows[r].vehicleQuery
                        : field === 'driver' ? this.rows[r].driverQuery
                        : this.rows[r].customerQuery;
                    const list = field === 'vehicle' ? this.filteredVehicles(query)
                        : field === 'driver' ? this.filteredDrivers(query)
                        : this.filteredCustomers(query);
                    if (list.length > 0) {
                        if (field === 'vehicle') this.pickVehicle(r, col, list[0]);
                        else if (field === 'driver') this.pickDriver(r, col, list[0]);
                        else this.pickCustomer(r, col, list[0]);
                        if (r + 1 < this.rows.length) this.focusCell(r + 1, col);
                    } else {
                        this.revertQuery(r, field);
                        this.closeAutocomplete();
                    }
                },

                // ---- range selection (mouse drag + shift-click + focus) ----
                inRange(r, c) {
                    if (!this.rangeStart || !this.rangeEnd) return false;
                    const r0 = Math.min(this.rangeStart[0], this.rangeEnd[0]);
                    const r1 = Math.max(this.rangeStart[0], this.rangeEnd[0]);
                    const c0 = Math.min(this.rangeStart[1], this.rangeEnd[1]);
                    const c1 = Math.max(this.rangeStart[1], this.rangeEnd[1]);
                    return r >= r0 && r <= r1 && c >= c0 && c <= c1;
                },
                startRange(r, c) {
                    this.dragging = true;
                    this.rangeStart = [r, c];
                    this.rangeEnd = [r, c];
                },
                extendRange(r, c) {
                    if (this.dragging) this.rangeEnd = [r, c];
                },
                shiftExtend(r, c, event) {
                    if (event.shiftKey && this.rangeStart) this.rangeEnd = [r, c];
                },
                setActive(r, c) {
                    if (!this.dragging) {
                        this.rangeStart = [r, c];
                        this.rangeEnd = [r, c];
                    }
                },
                topLeft() {
                    if (!this.rangeStart || !this.rangeEnd) return null;
                    return [Math.min(this.rangeStart[0], this.rangeEnd[0]), Math.min(this.rangeStart[1], this.rangeEnd[1])];
                },

                // ---- keyboard: Enter moves down a row (Tab/Shift+Tab are native) ----
                focusCell(r, c) {
                    this.$nextTick(() => {
                        const el = this.$refs.gridBody.querySelector(`[data-cell="${r}:${c}"] input, [data-cell="${r}:${c}"] select`);
                        if (el) { el.focus(); el.select?.(); }
                    });
                },
                onEnter(r, c) {
                    this.commitCell(r, c);
                    if (r + 1 < this.rows.length) this.focusCell(r + 1, c);
                },

                // Tab/Enter in whichever text field (Pickup/Dropoff/Notes)
                // is CURRENTLY the last column — columns can be reordered,
                // so this checks position, not a specific field — on the
                // LAST row adds a new row automatically (same as clicking
                // "+ Add Row") instead of doing nothing (Enter) or tabbing
                // out to the "Add Row" button (Tab) — matches the spreadsheet
                // convention of the grid growing as you keep entering data.
                // On any other row, Tab is left to its native behavior
                // (moves to the next row's checkbox) and Enter still just
                // commits and moves down within that column. If a
                // non-text column (e.g. Status) ends up last after a
                // reorder, this simply doesn't fire from it — Tab/Enter
                // there keep their normal per-cell behavior.
                onLastCellKeydown(r, c, event) {
                    if (c !== this.columns.length - 1) return;
                    if (event.key !== 'Tab' && event.key !== 'Enter') return;
                    if (event.shiftKey) return;

                    if (r === this.rows.length - 1) {
                        event.preventDefault();
                        this.commitCell(r, c);
                        this.addRow();

                        return;
                    }

                    if (event.key === 'Enter') {
                        event.preventDefault();
                        this.onEnter(r, c);
                    }
                },

                // ---- single-cell commit ----
                async commitCell(r, c) {
                    const field = this.columns[c];
                    const row = this.rows[r];
                    const key = `${r}:${c}`;
                    this.savingCell[key] = true;
                    delete this.cellError[key];
                    try {
                        const res = await fetch(`/trips/grid/${row.ulid}/cell`, {
                            method: 'PATCH',
                            headers: this.headers(),
                            body: JSON.stringify({ field, value: row[field] }),
                        });
                        if (!res.ok) {
                            if (res.status === 401 || res.status === 419) {
                                this.cellError[key] = 'Your session expired — refresh the page and try again.';
                                this.toast = { type: 'error', message: 'Your session expired. Refresh the page to keep editing.' };

                                return;
                            }
                            // Never leave this genuinely unexplained: if the
                            // body isn't parseable JSON (a 500 with an HTML
                            // error page, a proxy/timeout response, etc.),
                            // still surface the HTTP status so the failure
                            // is diagnosable instead of a bare "couldn't save".
                            const json = await res.json().catch(() => null);
                            this.cellError[key] = json?.errors?.value?.[0]
                                || json?.message
                                || `Could not save (HTTP ${res.status}).`;
                        }
                    } catch (e) {
                        this.cellError[key] = 'Network error.';
                    } finally {
                        this.savingCell[key] = false;
                    }
                },

                // ---- copy ----
                displayValue(r, c) {
                    const field = this.columns[c];
                    const row = this.rows[r];
                    if (field === 'vehicle') return this.vehicles.find(v => v.ulid === row.vehicle)?.plate ?? '';
                    if (field === 'driver') return this.drivers.find(d => d.ulid === row.driver)?.name ?? '';
                    if (field === 'customer') return this.customers.find(c => c.ulid === row.customer)?.name ?? '';
                    if (field === 'status') return this.statuses.find(s => s.value === row.status)?.label ?? row.status;
                    return row[field] ?? '';
                },
                copySelection() {
                    if (!this.rangeStart || !this.rangeEnd) return;
                    const r0 = Math.min(this.rangeStart[0], this.rangeEnd[0]);
                    const r1 = Math.max(this.rangeStart[0], this.rangeEnd[0]);
                    const c0 = Math.min(this.rangeStart[1], this.rangeEnd[1]);
                    const c1 = Math.max(this.rangeStart[1], this.rangeEnd[1]);
                    const lines = [];
                    for (let r = r0; r <= r1; r++) {
                        const cells = [];
                        for (let c = c0; c <= c1; c++) cells.push(this.displayValue(r, c));
                        lines.push(cells.join('\t'));
                    }
                    navigator.clipboard?.writeText(lines.join('\n')).catch(() => {});
                },

                // ---- paste (Excel/Sheets: tab-delimited columns, newline-delimited rows) ----
                resolveValue(field, raw) {
                    const value = raw.trim();
                    if (field === 'vehicle') return this.vehicles.find(v => v.plate.toLowerCase() === value.toLowerCase())?.ulid ?? '';
                    if (field === 'driver') return this.drivers.find(d => d.name.toLowerCase() === value.toLowerCase())?.ulid ?? '';
                    if (field === 'customer') {
                        if (value === '') return null;

                        return this.customers.find(c => c.name.toLowerCase() === value.toLowerCase())?.ulid ?? '';
                    }
                    if (field === 'status') {
                        const key = value.toLowerCase().replace(/\s+/g, '_');
                        return this.statuses.find(s => s.value === key || s.label.toLowerCase() === value.toLowerCase())?.value ?? key;
                    }
                    return value;
                },
                async onPaste(event) {
                    const anchor = this.topLeft();
                    if (!anchor) return;
                    const text = (event.clipboardData || window.clipboardData)?.getData('text/plain');
                    if (!text) return;
                    event.preventDefault();

                    const lines = text.replace(/\r/g, '').split('\n');
                    while (lines.length && lines[lines.length - 1] === '') lines.pop();

                    const updates = [];
                    lines.forEach((line, ri) => {
                        line.split('\t').forEach((raw, ci) => {
                            const r = anchor[0] + ri;
                            const c = anchor[1] + ci;
                            if (r >= this.rows.length || c >= this.columns.length) return;
                            const field = this.columns[c];
                            const value = this.resolveValue(field, raw);
                            this.rows[r][field] = value;
                            if (field === 'vehicle') this.rows[r].vehicleQuery = this.vehicles.find(v => v.ulid === value)?.plate ?? raw.trim();
                            if (field === 'driver') this.rows[r].driverQuery = this.drivers.find(d => d.ulid === value)?.name ?? raw.trim();
                            if (field === 'customer') this.rows[r].customerQuery = this.customers.find(c => c.ulid === value)?.name ?? (value === null ? '' : raw.trim());
                            updates.push({ trip: this.rows[r].ulid, field, value });
                        });
                    });

                    if (!updates.length) return;
                    this.pasting = true;
                    try {
                        const res = await fetch('{{ route('trips.grid.bulk-cells') }}', {
                            method: 'POST', headers: this.headers(), body: JSON.stringify({ updates }),
                        });
                        const json = await res.json();
                        if (!json.success) {
                            this.toast = { type: 'error', message: (json.errors || []).join(' ') || 'Paste failed — nothing was saved.' };
                            window.location.reload();
                        } else {
                            this.toast = { type: 'success', message: `Pasted ${json.updated} cell(s).` };
                        }
                    } catch (e) {
                        this.toast = { type: 'error', message: 'Network error during paste — reloading to stay in sync.' };
                        window.location.reload();
                    } finally {
                        this.pasting = false;
                    }
                },

                // ---- customer tabs (Excel-sheet-style) — client-side row
                // filter, same mechanism as column visibility (isVisible)
                // applied per-row instead of per-column. One tab per
                // customer in the company (already tenant-scoped, loaded
                // once with the page — same list the Customer cell's
                // dropdown searches). Deriving tabs from the full roster
                // rather than only customers present in the currently
                // loaded rows means the tab bar doesn't depend on what
                // date range happens to be filtered in — a customer with
                // no trips this month still gets a tab, just an empty one.
                customerTabs() {
                    return this.customers;
                },
                rowMatchesTab(row) {
                    return this.customerTab === 'all' || row.customer === this.customerTab;
                },
                visibleRowUlids() {
                    return this.rows.filter(r => this.rowMatchesTab(r)).map(r => r.ulid);
                },

                // ---- per-customer custom field columns — only shown while
                // a single customer tab is active (never on "All"). Custom
                // fields are NOT part of the fixed columns[] index system:
                // different customers can have entirely different extra
                // fields, which the range-select/paste/keyboard-nav math
                // assumes never happens for a real column. These are plain
                // cells with their own commit path instead — not
                // range-selectable, copyable, or pasteable. Tabbing into a
                // customer that always needs a Gatepass Number just makes
                // the column appear; switching to "All" hides it again so
                // rows from other customers don't show empty/irrelevant cells.
                activeCustomerFields() {
                    if (this.customerTab === 'all') return [];

                    return this.customerFields[this.customerTab] ?? [];
                },
                async commitFieldValue(r, field) {
                    const row = this.rows[r];
                    const key = `field:${row.ulid}:${field.ulid}`;
                    this.savingCell[key] = true;
                    delete this.cellError[key];
                    try {
                        const res = await fetch(`/trips/grid/${row.ulid}/fields/${field.ulid}`, {
                            method: 'PATCH',
                            headers: this.headers(),
                            body: JSON.stringify({ value: row.fieldValues[field.ulid] ?? '' }),
                        });
                        if (!res.ok) {
                            const json = await res.json().catch(() => null);
                            this.cellError[key] = json?.errors?.[0] || json?.message || `Could not save (HTTP ${res.status}).`;
                        }
                    } catch (e) {
                        this.cellError[key] = 'Network error.';
                    } finally {
                        this.savingCell[key] = false;
                    }
                },

                // ---- row selection for bulk actions ----
                toggleRow(ulid) {
                    const i = this.selectedRows.indexOf(ulid);
                    if (i === -1) this.selectedRows.push(ulid); else this.selectedRows.splice(i, 1);
                },
                // Scoped to the currently visible (tab-filtered) rows, so
                // "select all" can't silently grab rows hidden by another
                // customer tab — selections on other tabs are left alone.
                toggleAll(event) {
                    const visible = this.visibleRowUlids();
                    if (event.target.checked) {
                        this.selectedRows = Array.from(new Set([...this.selectedRows, ...visible]));
                    } else {
                        this.selectedRows = this.selectedRows.filter(ulid => !visible.includes(ulid));
                    }
                },
                allSelected() {
                    const visible = this.visibleRowUlids();
                    return visible.length > 0 && visible.every(ulid => this.selectedRows.includes(ulid));
                },

                // ---- bulk actions ----
                async postBulk(url, body) {
                    this.bulkBusy = true;
                    try {
                        const res = await fetch(url, { method: 'POST', headers: this.headers(), body: JSON.stringify(body) });
                        const json = await res.json();
                        if (json.success) {
                            window.location.reload();
                        } else {
                            this.toast = { type: 'error', message: (json.errors || []).join(' ') || 'That action failed.' };
                        }
                    } catch (e) {
                        this.toast = { type: 'error', message: 'Network error.' };
                    } finally {
                        this.bulkBusy = false;
                    }
                },
                bulkEditApply() {
                    if (!this.selectedRows.length) return;
                    this.postBulk('{{ route('trips.grid.bulk-update') }}', { trips: this.selectedRows, field: this.bulkField, value: this.bulkValue });
                },
                bulkAssignVehicleApply() {
                    if (!this.selectedRows.length || !this.bulkVehicle) return;
                    this.postBulk('{{ route('trips.grid.bulk-update') }}', { trips: this.selectedRows, field: 'vehicle', value: this.bulkVehicle });
                },
                bulkDeleteApply() {
                    if (!this.selectedRows.length) return;
                    if (!confirm(`Delete ${this.selectedRows.length} trip(s)? They can be restored later by support.`)) return;
                    this.postBulk('{{ route('trips.grid.bulk-delete') }}', { trips: this.selectedRows });
                },
            };
        }
    </script>

    <div
        x-data="tripGrid(@js($rows), @js($vehicleOptions), @js($driverOptions), @js($customerOptions), @js($customerFields ?? []), @js($statusOptions), @js($hiddenColumns ?? []), @js($columnOrder ?? []))"
        class="space-y-6"
    >
        <div class="flex flex-wrap items-start justify-between gap-3">
            <div>
                <h1 class="text-2xl font-semibold tracking-tight text-gray-900">{{ __('Trips — Spreadsheet View') }}</h1>
                <p class="mt-1 text-sm text-gray-500">{{ __('Click a cell to edit. Tab / Shift+Tab moves between cells, Enter moves down. Type in Vehicle, Driver, or Customer to search. Drag or shift-click to select a range to copy; paste tab-delimited data from Excel or Sheets.') }}</p>
            </div>
            <div class="flex flex-wrap items-center gap-2">
                <a href="{{ route('trips.index', $filters ?? []) }}" class="inline-flex items-center gap-2 rounded-card border border-gray-200 px-4 py-2.5 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-50 hover:text-gray-900">
                    <x-icon name="map" class="h-4 w-4" /> {{ __('Form View') }}
                </a>

                {{-- Columns visibility dropdown --}}
                <div class="relative" @click.outside="columnsMenuOpen = false">
                    <button
                        type="button" @click="columnsMenuOpen = !columnsMenuOpen"
                        class="inline-flex items-center gap-2 rounded-card border border-gray-200 px-4 py-2.5 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-50 hover:text-gray-900"
                    >
                        {{ __('Columns') }}
                    </button>
                    <div
                        x-show="columnsMenuOpen" x-cloak
                        x-transition:enter="transition ease-out duration-100"
                        x-transition:enter-start="opacity-0 scale-95"
                        x-transition:enter-end="opacity-100 scale-100"
                        class="absolute right-0 z-20 mt-2 w-52 rounded-card border border-gray-100 bg-white p-2 shadow-lg"
                    >
                        <p class="px-2 pb-1 text-[11px] text-gray-400">{{ __('Drag to reorder') }}</p>
                        {{-- Vanilla HTML5 drag-and-drop — no library. Dropping
                             a dragged field onto another field's row moves it
                             to that position and persists the new order the
                             same way visibility is already persisted. --}}
                        <template x-for="field in columns" :key="field">
                            <div
                                draggable="true"
                                @dragstart="dragColumn = field"
                                @dragover.prevent
                                @drop.prevent="reorderColumn(dragColumn, field); dragColumn = null"
                                @dragend="dragColumn = null"
                                class="flex cursor-move items-center gap-2 rounded px-2 py-1.5 text-sm text-gray-700 hover:bg-gray-50"
                                :class="dragColumn === field ? 'opacity-40' : ''"
                            >
                                <span class="select-none text-gray-300">⠿</span>
                                <label class="flex flex-1 items-center gap-2">
                                    <input type="checkbox" :checked="isVisible(field)" @change="toggleColumn(field)" class="rounded border-gray-300 text-teal-600 focus:ring-teal-600">
                                    <span x-text="columnLabels[field]"></span>
                                </label>
                            </div>
                        </template>
                    </div>
                </div>

                <a href="{{ route('fleet.import.form', 'trips') }}" class="inline-flex items-center gap-2 rounded-card border border-gray-200 px-4 py-2.5 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-50 hover:text-gray-900">
                    {{ __('Import CSV') }}
                </a>
                <a href="{{ route('trips.export', $filters ?? []) }}" class="inline-flex items-center gap-2 rounded-card bg-teal-700 px-4 py-2.5 text-sm font-medium text-white shadow-sm transition-colors hover:bg-teal-600">
                    {{ __('Export Excel') }}
                </a>
            </div>
        </div>

        {{-- Grid-specific filters — Customer/Pickup/Dropoff are additional
             to what the Form View offers, since the grid is where a user
             works through many trips at once and needs to narrow them down
             more ways. --}}
        <form method="GET" action="{{ route('trips.grid') }}" class="flex flex-wrap items-end gap-3 rounded-card border border-gray-100 bg-white p-4 shadow-sm">
            <div>
                <label for="filter_vehicle" class="block text-xs font-medium text-gray-500">{{ __('Vehicle') }}</label>
                <select name="vehicle" id="filter_vehicle" class="mt-1 rounded-card border-gray-300 text-sm focus:border-teal-600 focus:ring-teal-600">
                    <option value="">{{ __('All vehicles') }}</option>
                    @foreach ($vehicles as $vehicleOption)
                        <option value="{{ $vehicleOption->ulid }}" @selected(($filters['vehicle'] ?? null) === $vehicleOption->ulid)>
                            {{ $vehicleOption->plate }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div>
                <label for="filter_customer" class="block text-xs font-medium text-gray-500">{{ __('Customer') }}</label>
                <select name="customer" id="filter_customer" class="mt-1 rounded-card border-gray-300 text-sm focus:border-teal-600 focus:ring-teal-600">
                    <option value="">{{ __('All customers') }}</option>
                    @foreach ($customers as $customerOption)
                        <option value="{{ $customerOption->ulid }}" @selected(($filters['customer'] ?? null) === $customerOption->ulid)>
                            {{ $customerOption->name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div>
                <label for="filter_pickup" class="block text-xs font-medium text-gray-500">{{ __('Pickup') }}</label>
                <input type="text" name="pickup" id="filter_pickup" value="{{ $filters['pickup'] ?? '' }}" placeholder="{{ __('Search pickup…') }}" class="mt-1 rounded-card border-gray-300 text-sm focus:border-teal-600 focus:ring-teal-600">
            </div>
            <div>
                <label for="filter_dropoff" class="block text-xs font-medium text-gray-500">{{ __('Dropoff') }}</label>
                <input type="text" name="dropoff" id="filter_dropoff" value="{{ $filters['dropoff'] ?? '' }}" placeholder="{{ __('Search dropoff…') }}" class="mt-1 rounded-card border-gray-300 text-sm focus:border-teal-600 focus:ring-teal-600">
            </div>
            <div>
                <label for="filter_from" class="block text-xs font-medium text-gray-500">{{ __('From') }}</label>
                <input type="date" name="from" id="filter_from" value="{{ $filters['from'] ?? '' }}" class="mt-1 rounded-card border-gray-300 text-sm focus:border-teal-600 focus:ring-teal-600">
            </div>
            <div>
                <label for="filter_to" class="block text-xs font-medium text-gray-500">{{ __('To') }}</label>
                <input type="date" name="to" id="filter_to" value="{{ $filters['to'] ?? '' }}" class="mt-1 rounded-card border-gray-300 text-sm focus:border-teal-600 focus:ring-teal-600">
            </div>
            <button type="submit" class="rounded-card bg-teal-700 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-teal-600">
                {{ __('Filter') }}
            </button>
            @if (array_filter($filters ?? []))
                <a href="{{ route('trips.grid') }}" class="px-2 py-2 text-sm font-medium text-gray-500 hover:text-gray-700">{{ __('Clear') }}</a>
            @endif
        </form>

        {{-- Excel-sheet-style customer tabs — one tab per company customer
             plus "All", filtering the rows already loaded above client-side.
             Adding a row while a customer tab is active pre-assigns that
             customer to the new row. --}}
        <nav x-show="customerTabs().length > 0" x-cloak class="flex flex-wrap gap-1 rounded-card border border-gray-100 bg-white p-1 shadow-sm">
            <button
                type="button" @click="customerTab = 'all'"
                :class="customerTab === 'all' ? 'bg-teal-50 text-teal-700' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'"
                class="shrink-0 rounded-card px-4 py-2 text-sm font-medium transition-colors"
            >
                {{ __('All') }}
            </button>
            <template x-for="c in customerTabs()" :key="c.ulid">
                <button
                    type="button" @click="customerTab = c.ulid"
                    :class="customerTab === c.ulid ? 'bg-teal-50 text-teal-700' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'"
                    class="shrink-0 rounded-card px-4 py-2 text-sm font-medium transition-colors"
                    x-text="c.name"
                ></button>
            </template>
        </nav>

        @if ($truncated ?? false)
            <div class="rounded-card bg-amber-50 px-4 py-3 text-sm text-amber-700">
                {{ __('Showing the first :max rows for this filter. Narrow the date range to see the rest.', ['max' => 300]) }}
            </div>
        @endif

        <div x-show="toast" x-cloak x-transition class="rounded-card px-4 py-3 text-sm" :class="toast?.type === 'error' ? 'bg-red-50 text-red-700' : 'bg-teal-50 text-teal-700'" x-text="toast?.message"></div>

        {{-- Bulk action bar — appears once at least one row is selected --}}
        <div x-show="selectedRows.length > 0" x-cloak class="flex flex-wrap items-end gap-3 rounded-card border border-teal-100 bg-teal-50 p-4">
            <span class="text-sm font-medium text-teal-800" x-text="`${selectedRows.length} selected`"></span>

            <div class="flex items-end gap-2">
                <div>
                    <label class="block text-xs font-medium text-teal-700">{{ __('Bulk Edit') }}</label>
                    <select x-model="bulkField" class="mt-1 rounded-card border-gray-300 text-sm focus:border-teal-600 focus:ring-teal-600">
                        <option value="status">{{ __('Status') }}</option>
                        <option value="pickup_location">{{ __('Pickup Location') }}</option>
                        <option value="dropoff_location">{{ __('Dropoff Location') }}</option>
                    </select>
                </div>
                <template x-if="bulkField === 'status'">
                    <select x-model="bulkValue" class="rounded-card border-gray-300 text-sm focus:border-teal-600 focus:ring-teal-600">
                        <template x-for="status in statuses" :key="status.value">
                            <option :value="status.value" x-text="status.label"></option>
                        </template>
                    </select>
                </template>
                <template x-if="bulkField !== 'status'">
                    <input type="text" x-model="bulkValue" placeholder="{{ __('New value…') }}" class="rounded-card border-gray-300 text-sm focus:border-teal-600 focus:ring-teal-600">
                </template>
                <button type="button" @click="bulkEditApply()" :disabled="bulkBusy" class="rounded-card bg-teal-700 px-3 py-2 text-xs font-medium text-white hover:bg-teal-600 disabled:opacity-50">
                    {{ __('Apply') }}
                </button>
            </div>

            <div class="flex items-end gap-2">
                <div>
                    <label class="block text-xs font-medium text-teal-700">{{ __('Bulk Assign Vehicle') }}</label>
                    <select x-model="bulkVehicle" class="mt-1 rounded-card border-gray-300 text-sm focus:border-teal-600 focus:ring-teal-600">
                        <option value="">{{ __('Select a vehicle…') }}</option>
                        <template x-for="v in vehicles" :key="v.ulid">
                            <option :value="v.ulid" x-text="v.plate"></option>
                        </template>
                    </select>
                </div>
                <button type="button" @click="bulkAssignVehicleApply()" :disabled="bulkBusy" class="rounded-card border border-teal-700 px-3 py-2 text-xs font-medium text-teal-700 hover:bg-teal-100 disabled:opacity-50">
                    {{ __('Apply') }}
                </button>
            </div>

            <button type="button" @click="bulkDeleteApply()" :disabled="bulkBusy" class="ml-auto rounded-card border border-red-200 px-3 py-2 text-xs font-medium text-red-600 hover:bg-red-50 disabled:opacity-50">
                {{ __('Bulk Delete') }}
            </button>
        </div>

        {{-- The grid itself — styled to read as a spreadsheet: flat cells,
             thin gridlines, a teal ring on the active cell only. The outer
             card chrome stays on-brand; everything inside the border is
             spreadsheet-flat, not a stack of form fields. --}}
        <div class="overflow-hidden rounded-card border border-gray-200 bg-white shadow-sm">
            @if ($rows->isEmpty())
                <div class="flex flex-col items-center gap-3 px-6 py-16 text-center">
                    <x-icon name="map" class="h-10 w-10 text-gray-300" />
                    <p class="text-sm font-medium text-gray-500">{{ __('No trips found.') }}</p>
                </div>
            @else
                <div class="overflow-x-auto" @paste="onPaste($event)">
                    <table class="w-full select-none border-collapse text-sm">
                        <thead>
                            <tr class="bg-gray-50">
                                <th class="w-9 border border-gray-200 px-2 py-1.5">
                                    <input type="checkbox" :checked="allSelected()" @change="toggleAll($event)" class="rounded border-gray-300 text-teal-600 focus:ring-teal-600">
                                </th>
                                <template x-for="field in columns" :key="field">
                                    <th x-show="isVisible(field)" class="border border-gray-200 px-2 py-1.5 text-left text-xs font-semibold uppercase tracking-wide text-gray-500" x-text="columnLabels[field]"></th>
                                </template>
                                <template x-for="f in activeCustomerFields()" :key="f.ulid">
                                    <th class="border border-gray-200 bg-teal-50/50 px-2 py-1.5 text-left text-xs font-semibold uppercase tracking-wide text-teal-700" x-text="f.field_name"></th>
                                </template>
                            </tr>
                        </thead>
                        <tbody x-ref="gridBody" @keydown.ctrl.c.prevent="copySelection()" @keydown.meta.c.prevent="copySelection()">
                            <template x-for="(row, r) in rows" :key="row.ulid">
                                <tr x-show="rowMatchesTab(row)">
                                    <td class="w-9 border border-gray-200 px-2 py-0.5">
                                        <input type="checkbox" :checked="selectedRows.includes(row.ulid)" @change="toggleRow(row.ulid)" class="rounded border-gray-300 text-teal-600 focus:ring-teal-600">
                                    </td>

                                    <template x-for="(field, c) in columns" :key="field">
                                        <td x-show="isVisible(field)" :data-cell="`${r}:${c}`" class="relative border border-gray-200 p-0" :class="inRange(r, c) ? 'bg-teal-50' : ''" @mousedown="startRange(r, c)" @mouseover="extendRange(r, c)" @click="shiftExtend(r, c, $event)">
                                            <template x-if="field === 'date'">
                                                <input type="date" x-model="row.date" @focus="setActive(r, c)" @change="commitCell(r, c)" @keydown.enter.prevent="onEnter(r, c)" @keydown="onLastCellKeydown(r, c, $event)" class="w-36 border-0 bg-transparent px-2 py-0.5 text-sm leading-tight focus:bg-teal-50 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teal-600">
                                            </template>
                                            <template x-if="field === 'departure_time'">
                                                <input type="time" x-model="row.departure_time" @focus="setActive(r, c)" @change="commitCell(r, c)" @keydown.enter.prevent="onEnter(r, c)" @keydown="onLastCellKeydown(r, c, $event)" class="w-24 border-0 bg-transparent px-2 py-0.5 text-sm leading-tight focus:bg-teal-50 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teal-600">
                                            </template>
                                            <template x-if="field === 'vehicle'">
                                                <div>
                                                    <input
                                                        type="text" x-model="row.vehicleQuery" autocomplete="off" placeholder="{{ __('Search plate…') }}"
                                                        @focus="setActive(r, c); openVehicleAutocomplete(r, c)"
                                                        @input="openVehicleAutocomplete(r, c)"
                                                        @blur="onAutocompleteBlur(r, c, 'vehicle')"
                                                        @keydown.enter.prevent="onAutocompleteEnter(r, c, 'vehicle')"
                                                        @keydown.escape="revertQuery(r, 'vehicle'); closeAutocomplete()"
                                                        class="w-32 border-0 bg-transparent px-2 py-0.5 text-sm leading-tight focus:bg-teal-50 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teal-600"
                                                    >
                                                    <div
                                                        x-show="isAutocompleteOpen(r, c)" x-cloak
                                                        class="absolute left-0 z-20 max-h-48 w-48 overflow-y-auto rounded-card border border-gray-100 bg-white shadow-lg"
                                                        :class="(rows.length - r) <= 3 ? 'bottom-full mb-1' : 'top-full mt-1'"
                                                    >
                                                        <template x-for="v in filteredVehicles(row.vehicleQuery)" :key="v.ulid">
                                                            <button type="button" @mousedown.prevent="pickVehicle(r, c, v)" class="block w-full px-3 py-1.5 text-left text-sm hover:bg-teal-50" x-text="v.plate"></button>
                                                        </template>
                                                        <div x-show="filteredVehicles(row.vehicleQuery).length === 0" class="px-3 py-1.5 text-sm text-gray-400">{{ __('No matches') }}</div>
                                                    </div>
                                                </div>
                                            </template>
                                            <template x-if="field === 'driver'">
                                                <div>
                                                    <input
                                                        type="text" x-model="row.driverQuery" autocomplete="off" placeholder="{{ __('Search name…') }}"
                                                        @focus="setActive(r, c); openDriverAutocomplete(r, c)"
                                                        @input="openDriverAutocomplete(r, c)"
                                                        @blur="onAutocompleteBlur(r, c, 'driver')"
                                                        @keydown.enter.prevent="onAutocompleteEnter(r, c, 'driver')"
                                                        @keydown.escape="revertQuery(r, 'driver'); closeAutocomplete()"
                                                        class="w-32 border-0 bg-transparent px-2 py-0.5 text-sm leading-tight focus:bg-teal-50 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teal-600"
                                                    >
                                                    <div
                                                        x-show="isAutocompleteOpen(r, c)" x-cloak
                                                        class="absolute left-0 z-20 max-h-48 w-48 overflow-y-auto rounded-card border border-gray-100 bg-white shadow-lg"
                                                        :class="(rows.length - r) <= 3 ? 'bottom-full mb-1' : 'top-full mt-1'"
                                                    >
                                                        <template x-for="d in filteredDrivers(row.driverQuery)" :key="d.ulid">
                                                            <button type="button" @mousedown.prevent="pickDriver(r, c, d)" class="block w-full px-3 py-1.5 text-left text-sm hover:bg-teal-50" x-text="d.name"></button>
                                                        </template>
                                                        <div x-show="filteredDrivers(row.driverQuery).length === 0" class="px-3 py-1.5 text-sm text-gray-400">{{ __('No matches') }}</div>
                                                    </div>
                                                </div>
                                            </template>
                                            <template x-if="field === 'customer'">
                                                <div>
                                                    <input
                                                        type="text" x-model="row.customerQuery" autocomplete="off" placeholder="{{ __('Search customer…') }}"
                                                        @focus="setActive(r, c); openCustomerAutocomplete(r, c)"
                                                        @input="openCustomerAutocomplete(r, c)"
                                                        @blur="onAutocompleteBlur(r, c, 'customer')"
                                                        @keydown.enter.prevent="onAutocompleteEnter(r, c, 'customer')"
                                                        @keydown.escape="revertQuery(r, 'customer'); closeAutocomplete()"
                                                        class="w-32 border-0 bg-transparent px-2 py-0.5 text-sm leading-tight focus:bg-teal-50 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teal-600"
                                                    >
                                                    <div
                                                        x-show="isAutocompleteOpen(r, c)" x-cloak
                                                        class="absolute left-0 z-20 max-h-48 w-48 overflow-y-auto rounded-card border border-gray-100 bg-white shadow-lg"
                                                        :class="(rows.length - r) <= 3 ? 'bottom-full mb-1' : 'top-full mt-1'"
                                                    >
                                                        <button type="button" @mousedown.prevent="pickCustomer(r, c, null)" class="block w-full px-3 py-1.5 text-left text-sm italic text-gray-400 hover:bg-teal-50">{{ __('— No customer —') }}</button>
                                                        <template x-for="cu in filteredCustomers(row.customerQuery)" :key="cu.ulid">
                                                            <button type="button" @mousedown.prevent="pickCustomer(r, c, cu)" class="block w-full px-3 py-1.5 text-left text-sm hover:bg-teal-50" x-text="cu.name"></button>
                                                        </template>
                                                        <div x-show="filteredCustomers(row.customerQuery).length === 0" class="px-3 py-1.5 text-sm text-gray-400">{{ __('No matches') }}</div>
                                                    </div>
                                                </div>
                                            </template>
                                            <template x-if="field === 'pickup_location'">
                                                <input type="text" x-model="row.pickup_location" @focus="setActive(r, c)" @change="commitCell(r, c)" @keydown.enter.prevent="onEnter(r, c)" @keydown="onLastCellKeydown(r, c, $event)" class="w-32 border-0 bg-transparent px-2 py-0.5 text-sm leading-tight focus:bg-teal-50 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teal-600">
                                            </template>
                                            <template x-if="field === 'dropoff_location'">
                                                <input type="text" x-model="row.dropoff_location" @focus="setActive(r, c)" @change="commitCell(r, c)" @keydown.enter.prevent="onEnter(r, c)" @keydown="onLastCellKeydown(r, c, $event)" class="w-32 border-0 bg-transparent px-2 py-0.5 text-sm leading-tight focus:bg-teal-50 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teal-600">
                                            </template>
                                            <template x-if="field === 'status'">
                                                <select x-model="row.status" @focus="setActive(r, c)" @change="commitCell(r, c)" @keydown.enter.prevent="onEnter(r, c)" @keydown="onLastCellKeydown(r, c, $event)" class="w-28 border-0 bg-transparent px-2 py-0.5 text-sm leading-tight focus:bg-teal-50 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teal-600">
                                                    <template x-for="status in statuses" :key="status.value">
                                                        <option :value="status.value" x-text="status.label"></option>
                                                    </template>
                                                </select>
                                            </template>
                                            <template x-if="field === 'notes'">
                                                <input type="text" x-model="row.notes" @focus="setActive(r, c)" @change="commitCell(r, c)" @keydown="onLastCellKeydown(r, c, $event)" class="w-40 border-0 bg-transparent px-2 py-0.5 text-sm leading-tight focus:bg-teal-50 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teal-600">
                                            </template>
                                            <p x-show="cellError[`${r}:${c}`]" x-text="cellError[`${r}:${c}`]" class="px-2 text-xs text-red-600"></p>
                                        </td>
                                    </template>

                                    {{-- Per-customer custom fields — only rendered while a single
                                         customer tab is active; not part of the columns[] index
                                         system, so not range-selectable/copyable/pasteable. --}}
                                    <template x-for="f in activeCustomerFields()" :key="f.ulid">
                                        <td class="border border-gray-200 bg-teal-50/20 p-0">
                                            <input
                                                type="text"
                                                :value="row.fieldValues[f.ulid] ?? ''"
                                                @change="row.fieldValues[f.ulid] = $event.target.value; commitFieldValue(r, f)"
                                                class="w-32 border-0 bg-transparent px-2 py-0.5 text-sm leading-tight focus:bg-teal-50 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teal-600"
                                            >
                                            <p x-show="cellError[`field:${row.ulid}:${f.ulid}`]" x-text="cellError[`field:${row.ulid}:${f.ulid}`]" class="px-2 text-xs text-red-600"></p>
                                        </td>
                                    </template>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>
            @endif

            {{-- Add Row --}}
            <div class="border-t border-gray-200 px-2 py-2">
                <button
                    type="button" @click="addRow()" :disabled="addingRow"
                    class="inline-flex items-center gap-1.5 rounded px-2 py-1 text-sm font-medium text-teal-700 transition-colors hover:bg-teal-50 disabled:opacity-50"
                >
                    <span class="text-base leading-none">+</span> {{ __('Add Row') }}
                </button>
            </div>
        </div>
    </div>
</x-app-layout>