@php
    $grgGarageWebPath = rtrim(request()->getBaseUrl(), '/') . '/garage';
    $grgVehicleHistoryApiPath = $grgGarageWebPath . '/api/vehicles/__VEHICLE_ID__/document-history';
@endphp
<style>
.grg-vh-modal .modal-content {
    border-radius: 10px;
    border: 1px solid #dee2e6;
    overflow: hidden;
}
.grg-vh-modal .grg-vh-context-bar {
    color: #495057;
    padding: 0.35rem 0.5rem;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}
.grg-vh-modal .grg-vh-table-wrap {
    max-height: min(58vh, 420px);
    overflow: auto;
    border: 1px solid #dee2e6;
    border-radius: 8px;
}
.grg-vh-modal .grg-vh-table {
    font-size: 0.78rem;
    margin-bottom: 0;
    --bs-table-bg: transparent;
}
.grg-vh-modal .grg-vh-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f1f3f5;
    color: #495057;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.3rem 0.4rem;
    border-bottom: 2px solid #dee2e6;
    white-space: nowrap;
}
.grg-vh-modal .grg-vh-table tbody td {
    padding: 0.28rem 0.4rem;
    vertical-align: middle;
    border-color: #eef1f4;
}
.grg-vh-modal .grg-vh-table tbody tr:hover td {
    background: #f8f9fb;
}
.grg-vh-modal .grg-vh-table .grg-vh-cell-doc {
    font-family: ui-monospace, Menlo, monospace;
    font-weight: 600;
    color: #212529;
    white-space: nowrap;
}
.grg-vh-modal .grg-vh-table .grg-vh-cell-date {
    white-space: nowrap;
    color: #6c757d;
}
.grg-vh-modal .grg-vh-table .grg-vh-cell-meter {
    white-space: nowrap;
    font-weight: 600;
    color: #0d6efd;
}
.grg-vh-modal .grg-vh-table .grg-vh-cell-meter.is-empty {
    color: #adb5bd;
    font-weight: 500;
}
.grg-vh-modal .grg-vh-table .grg-vh-cell-amt {
    white-space: nowrap;
    font-weight: 600;
    text-align: right;
}
.grg-vh-modal .grg-vh-table .grg-vh-cell-lines {
    max-width: 150px;
    color: #495057;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.grg-vh-modal .grg-vh-table .grg-vh-cell-action {
    text-align: center;
    white-space: nowrap;
    width: 1%;
}
.grg-vh-modal .grg-vh-tag {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.12rem 0.35rem;
    border-radius: 3px;
    line-height: 1.2;
}
.grg-vh-modal .grg-vh-tag--estimate { background: #cff4fc; color: #055160; }
.grg-vh-modal .grg-vh-tag--repair_order { background: #fff3cd; color: #664d03; }
.grg-vh-modal .grg-vh-tag--sale { background: #d1e7dd; color: #0f5132; }
.grg-vh-modal .grg-vh-use {
    font-size: 0.68rem;
    padding: 0.15rem 0.4rem;
    line-height: 1.2;
}
</style>
<script>
window.GrgVehicleHistoryApiPathTemplate = @json($grgVehicleHistoryApiPath);

(function () {
    function escapeHtml(s) {
        if (!s) return '';
        return String(s).replace(/[&<>"']/g, function (c) {
            return ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c];
        });
    }

    function formatDate(d) {
        if (!d) return '—';
        try {
            return new Date(d + 'T00:00:00').toLocaleDateString(undefined, { day: 'numeric', month: 'short', year: 'numeric' });
        } catch (e) {
            return d;
        }
    }

    function formatMoney(n) {
        return 'PKR ' + (Number(n) || 0).toLocaleString('en-PK', { maximumFractionDigits: 0 });
    }

    function formatMeter(val) {
        if (val === null || val === undefined || val === '') return { text: '—', empty: true };
        var n = Number(val);
        if (!isFinite(n)) return { text: '—', empty: true };
        return { text: n.toLocaleString(undefined, { maximumFractionDigits: 2 }) + ' km', empty: false };
    }

    function historyEndpoint(vehicleId) {
        var tpl = window.GrgVehicleHistoryApiPathTemplate || '';
        if (tpl.indexOf('__VEHICLE_ID__') !== -1) {
            return tpl.replace('__VEHICLE_ID__', encodeURIComponent(String(vehicleId)));
        }
        var base = (window.GrgGarageWebPath || '/garage').replace(/\/$/, '');
        return base + '/api/vehicles/' + encodeURIComponent(String(vehicleId)) + '/document-history';
    }

    function sourceTagClass(type) {
        if (type === 'estimate') return 'grg-vh-tag--estimate';
        if (type === 'repair_order') return 'grg-vh-tag--repair_order';
        if (type === 'sale') return 'grg-vh-tag--sale';
        return '';
    }

    function hasHistory(data) {
        return data && data.ok && (data.has_history === true || (data.documents && data.documents.length > 0));
    }

    var api = {
        _modal: null,
        _modalEl: null,
        _activeOpts: null,
        _pendingDoc: null,
        _fetchTimer: null,
        _inflight: false,
        _bound: false,
        _lastVehicleId: null,
        _shownForVehicleId: null,
        _suppressUntil: 0,

        install: function () {
            this._modalEl = document.getElementById('grgVehicleHistoryModal');
            if (!this._modalEl || !window.bootstrap || !window.bootstrap.Modal) return false;
            if (!this._modal) {
                this._modal = window.bootstrap.Modal.getOrCreateInstance(this._modalEl);
            }
            var self = this;
            if (!this._modalEl._grgVhApplyBound) {
                this._modalEl._grgVhApplyBound = true;
                this._modalEl.addEventListener('click', function (e) {
                    var btn = e.target.closest('[data-grg-vh-apply]');
                    if (!btn || !self._activeOpts) return;
                    var idx = parseInt(btn.getAttribute('data-grg-vh-apply'), 10);
                    if (isNaN(idx) || !self._pendingDoc || !self._pendingDoc[idx]) return;
                    if (typeof self._activeOpts.onApply === 'function') {
                        self._activeOpts.onApply(self._pendingDoc[idx]);
                    }
                    self._suppressUntil = Date.now() + 8000;
                    self._shownForVehicleId = self._lastVehicleId;
                    self._modal.hide();
                });
            }
            return true;
        },

        watch: function (opts) {
            opts = opts || {};
            this._activeOpts = opts;
            if (!this.install()) {
                console.warn('[GrgVehicleHistory] Bootstrap modal not available.');
                return null;
            }
            var vehSelId = opts.vehicleSelectId || 'gsVehicle';
            var self = this;

            function readVehicleId() {
                var el = document.getElementById(vehSelId);
                return el ? String(el.value || '').trim() : '';
            }

            function onVehicleSelected() {
                var vid = readVehicleId();
                if (!vid) {
                    self._lastVehicleId = null;
                    return;
                }
                if (String(vid) === String(self._lastVehicleId)) return;
                self._lastVehicleId = String(vid);
                self._shownForVehicleId = null;
                if (typeof opts.onVehicleChange === 'function') opts.onVehicleChange();
                self.load(vid, false);
            }

            if (!this._bound) {
                this._bound = true;
                document.addEventListener('garage-vehicle-changed', function (e) {
                    if (!e.target || e.target.id !== vehSelId) return;
                    setTimeout(onVehicleSelected, 120);
                }, true);
            }

            if (!opts.skipInitialPopup) {
                setTimeout(onVehicleSelected, 600);
            }

            return {
                refresh: function () {
                    var vid = readVehicleId();
                    if (vid) self.load(vid, true);
                },
            };
        },

        load: function (vehicleId, force) {
            var self = this;
            if (!vehicleId || !this.install()) return;
            if (Date.now() < self._suppressUntil) return;

            clearTimeout(this._fetchTimer);
            this._fetchTimer = setTimeout(function () {
                if (self._inflight) return;
                var vidKey = String(vehicleId);
                if (!force && self._shownForVehicleId === vidKey) return;
                self._inflight = true;

                fetch(historyEndpoint(vehicleId), {
                    headers: { Accept: 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
                    credentials: 'same-origin',
                })
                    .then(function (r) {
                        return r.text().then(function (text) {
                            var data = null;
                            try { data = text ? JSON.parse(text) : null; } catch (e) { /* ignore */ }
                            if (!r.ok) throw new Error((data && data.message) || ('HTTP ' + r.status));
                            return data;
                        });
                    })
                    .then(function (data) {
                        self._inflight = false;
                        if (!hasHistory(data)) return;
                        if (Date.now() < self._suppressUntil) return;
                        if (self._shownForVehicleId === vidKey) return;
                        self._renderModal(data);
                        self._shownForVehicleId = vidKey;
                        self._modal.show();
                    })
                    .catch(function (err) {
                        self._inflight = false;
                        console.warn('[GrgVehicleHistory]', err && err.message ? err.message : err);
                    });
            }, force ? 0 : 200);
        },

        check: function (vehicleId, force) {
            this.load(vehicleId, force);
        },

        _renderModal: function (data) {
            this._pendingDoc = data.documents || [];
            var cust = data.customer || {};
            var veh = data.vehicle || {};
            var count = this._pendingDoc.length;

            var sub = document.getElementById('grgVhModalSubtitle');
            if (sub) sub.textContent = count + (count === 1 ? ' visit found' : ' visits found') + ' — choose one to copy onto this form';

            var ctx = document.getElementById('grgVhModalContext');
            if (ctx) {
                var bits = [];
                if (cust.label || cust.name) bits.push(escapeHtml(cust.label || cust.name));
                if (veh.label || veh.registration_number) bits.push(escapeHtml(veh.label || veh.registration_number));
                ctx.innerHTML = bits.join(' · ');
            }

            var listEl = document.getElementById('grgVhDocumentsList');
            if (!listEl) return;

            var rows = this._pendingDoc.map(function (doc, i) {
                var type = doc.source_type || '';
                var meter = formatMeter(doc.meter_reading);
                var parts = escapeHtml(doc.parts_summary || '—');
                var services = escapeHtml(doc.services_summary || '—');
                return '<tr>' +
                    '<td><span class="grg-vh-tag ' + sourceTagClass(type) + '">' + escapeHtml(doc.source_label || type) + '</span></td>' +
                    '<td class="grg-vh-cell-doc">' + escapeHtml(doc.document_number) + '</td>' +
                    '<td class="grg-vh-cell-date">' + formatDate(doc.document_date) + '</td>' +
                    '<td class="grg-vh-cell-meter' + (meter.empty ? ' is-empty' : '') + '">' + meter.text + '</td>' +
                    '<td class="grg-vh-cell-amt">' + formatMoney(doc.grand_total) + '</td>' +
                    '<td class="grg-vh-cell-lines" title="' + parts + '">' + parts + '</td>' +
                    '<td class="grg-vh-cell-lines" title="' + services + '">' + services + '</td>' +
                    '<td class="grg-vh-cell-action">' +
                        '<button type="button" class="btn btn-primary grg-vh-use" data-grg-vh-apply="' + i + '" title="Copy this visit to the form">' +
                            '<i class="bi bi-arrow-down-circle"></i> Use' +
                        '</button>' +
                    '</td>' +
                '</tr>';
            }).join('');

            listEl.innerHTML =
                '<table class="table table-sm table-hover grg-vh-table">' +
                    '<thead><tr>' +
                        '<th>Type</th>' +
                        '<th>Document</th>' +
                        '<th>Date</th>' +
                        '<th>Meter</th>' +
                        '<th class="text-end">Total</th>' +
                        '<th>Parts</th>' +
                        '<th>Services</th>' +
                        '<th>Action</th>' +
                    '</tr></thead>' +
                    '<tbody>' + rows + '</tbody>' +
                '</table>';
        },
    };

    window.GrgVehicleHistoryModal = api;
    window.GrgVehicleHistory = api;
    api.init = function (opts) { return api.watch(opts); };
})();
</script>