@extends('layouts.app')
@section('title', 'Pharmacy | Receive Products')

@section('content')
<div class="flex items-center gap-3 mb-4">
    <a href="{{ route('pharmacy.receipts.index') }}" class="text-gray-400 hover:text-gray-600">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
    </a>
    <div>
        <h1 class="text-lg font-bold text-gray-900">Receive Products</h1>
        <p class="text-xs text-gray-500 mt-0.5">Record new stock received from supplier</p>
    </div>
</div>

{{-- Auto-save indicator --}}
<div class="flex items-center justify-between mb-3 px-1">
    <div id="autosaveStatus" class="text-xs text-gray-500 flex items-center gap-1.5">
        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
        <span>All changes auto-saved in this browser</span>
    </div>
    <button type="button" onclick="clearAutosave(true)" class="text-xs text-red-500 hover:text-red-700 underline">Clear saved draft</button>
</div>

@if($errors->any())
<div class="bg-red-50 border border-red-200 rounded-xl px-4 py-3 mb-4 text-sm text-red-700">
    <strong>Please fix the following:</strong>
    <ul class="mt-1 list-disc list-inside space-y-0.5">
        @foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach
    </ul>
    <p class="mt-2 text-xs italic">Your entries have been preserved. Scroll down to see highlighted fields.</p>
</div>
@endif

{{-- Drug lookup data for restoring names after validation errors --}}
<script>
    window.DRUG_LOOKUP = @json($drugLookup ?? []);
</script>

<form method="POST" action="{{ route('pharmacy.receipts.store') }}" id="grnForm">
@csrf

{{-- Order Information --}}
<div class="bg-white rounded-xl border shadow-sm p-5 mb-4">
    <h3 class="text-sm font-bold text-gray-800 mb-4">Order Information</h3>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div>
            <label class="form-label">Supplier *</label>
            <select name="supplier_id" required class="form-input" id="supplierSelect">
                <option value="">Select supplier...</option>
                @foreach($suppliers as $s)
                <option value="{{ $s->id }}" {{ old('supplier_id') == $s->id ? 'selected' : '' }}>{{ $s->name }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="form-label">Date Received *</label>
            <input type="date" name="date_received" value="{{ old('date_received', date('Y-m-d')) }}" required class="form-input" id="dateReceivedInput">
        </div>
        <div>
            <label class="form-label">Notes</label>
            <input type="text" name="notes" value="{{ old('notes') }}" placeholder="Optional notes..." class="form-input" id="notesInput">
        </div>
    </div>
</div>

{{-- Products --}}
<div class="bg-white rounded-xl border shadow-sm p-5 mb-4">
    <div class="flex items-center justify-between mb-4">
        <h3 class="text-sm font-bold text-gray-800">Products</h3>
        <button type="button" onclick="addRow()" class="btn-primary text-xs">+ Add Product</button>
    </div>

    <div class="overflow-x-auto">
        <table class="w-full text-sm" id="itemsTable">
            <thead>
                <tr class="bg-gray-50 border-b">
                    <th class="table-header w-64">Drug Name</th>
                    <th class="table-header w-24 text-center">Qty Received</th>
                    <th class="table-header w-28 text-right">Unit Buying (KES)</th>
                    <th class="table-header w-28 text-right">Selling Price (KES)</th>
                    <th class="table-header w-32 text-right">Line Total (KES)</th>
                    <th class="table-header w-32">Expiry Date</th>
                    <th class="table-header w-8"></th>
                </tr>
            </thead>
            <tbody id="itemsBody">
                @php $oldItems = old('items', [[]]); @endphp
                @foreach($oldItems as $idx => $oldItem)
                @php
                    $drugId = $oldItem['drug_item_id'] ?? '';
                    $drugInfo = $drugId && isset($drugLookup[$drugId]) ? $drugLookup[$drugId] : null;
                    $drugDisplay = $drugInfo
                        ? $drugInfo['name'] . ($drugInfo['generic_name'] ? ' – ' . $drugInfo['generic_name'] : '')
                        : '';
                @endphp
                <tr class="item-row border-b last:border-0">
                    <td class="table-cell">
                        <div class="relative">
                            <input type="text" class="form-input text-xs drug-search" placeholder="Search drug..." autocomplete="off" data-index="{{ $idx }}" value="{{ $drugDisplay }}">
                            <input type="hidden" name="items[{{ $idx }}][drug_item_id]" class="drug-id-input" value="{{ $drugId }}">
                            <div class="drug-dropdown absolute z-20 left-0 right-0 bg-white border rounded-lg shadow-lg mt-1 max-h-48 overflow-y-auto hidden"></div>
                        </div>
                    </td>
                    <td class="table-cell">
                        <input type="number" name="items[{{ $idx }}][quantity]" value="{{ $oldItem['quantity'] ?? '' }}" min="1" class="form-input text-xs text-center qty-input" placeholder="0" oninput="calcRow(this)">
                    </td>
                    <td class="table-cell">
                        <input type="number" step="0.01" name="items[{{ $idx }}][unit_cost]" value="{{ $oldItem['unit_cost'] ?? '' }}" min="0" class="form-input text-xs text-right cost-input" placeholder="0.00" oninput="calcRow(this)">
                    </td>
                    <td class="table-cell">
                        <input type="number" step="0.01" name="items[{{ $idx }}][selling_price]" value="{{ $oldItem['selling_price'] ?? '' }}" min="0" class="form-input text-xs text-right selling-input" placeholder="0.00">
                    </td>
                    <td class="table-cell text-right font-semibold text-sm line-total">KES 0</td>
                    <td class="table-cell">
                        <input type="date" name="items[{{ $idx }}][expiry_date]" value="{{ $oldItem['expiry_date'] ?? '' }}" class="form-input text-xs expiry-input">
                    </td>
                    <td class="table-cell">
                        <button type="button" onclick="removeRow(this)" class="text-red-400 hover:text-red-600 p-1">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                        </button>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <div class="flex justify-end mt-3 pt-3 border-t">
        <span class="text-sm text-gray-500 mr-3">Grand Total:</span>
        <span class="text-lg font-bold text-green-600" id="grandTotal">KES 0.00</span>
    </div>
</div>

{{-- Payment --}}
<div class="bg-white rounded-xl border shadow-sm p-5 mb-5">
    <h3 class="text-sm font-bold text-gray-800 mb-4">Payment Details</h3>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div>
            <label class="form-label">Payment Method *</label>
            <select name="payment_method" required class="form-input" id="paymentMethodSelect">
                <option value="">Select method...</option>
                <option value="cash"   {{ old('payment_method') === 'cash'   ? 'selected' : '' }}>Cash</option>
                <option value="cheque" {{ old('payment_method') === 'cheque' ? 'selected' : '' }}>Cheque</option>
                <option value="mpesa"  {{ old('payment_method') === 'mpesa'  ? 'selected' : '' }}>M-Pesa</option>
                <option value="credit" {{ old('payment_method') === 'credit' ? 'selected' : '' }}>Credit / Invoice</option>
                <option value="bank_transfer" {{ old('payment_method') === 'bank_transfer' ? 'selected' : '' }}>Bank Transfer</option>
            </select>
        </div>
        <div>
            <label class="form-label">Reference / Receipt #</label>
            <input type="text" name="payment_reference" value="{{ old('payment_reference') }}" placeholder="e.g. cheque no., M-Pesa code..." class="form-input" id="paymentRefInput">
        </div>
        <div>
            <label class="form-label">Grand Total</label>
            <div class="form-input bg-gray-50 text-lg font-bold text-green-600" id="grandTotalDisplay">KES 0.00</div>
        </div>
    </div>
</div>

{{-- Actions --}}
<div class="flex items-center justify-between">
    <a href="{{ route('pharmacy.receipts.index') }}" class="btn-secondary">Cancel</a>
    <div class="flex gap-3">
        <button type="submit" name="action" value="draft" class="btn-secondary" id="saveDraftBtn">
            Save as Draft
        </button>
        <button type="submit" name="action" value="complete" class="btn-primary" id="completeBtn">
            Complete &amp; Add to Stock
        </button>
    </div>
</div>

</form>

<script>
const AUTOSAVE_KEY = 'crh_grn_draft_v1';
const AUTOSAVE_INTERVAL_MS = 2000;

/* ─────────────────────────────────────────────────────────────────────────
   AUTOSAVE: Periodically snapshot the entire form state to localStorage so
   the user never loses work due to session timeout, browser crash, or
   validation error. Cleared only on successful submit or manual clear.
   ────────────────────────────────────────────────────────────────────── */

function snapshotForm() {
    const rows = [];
    document.querySelectorAll('.item-row').forEach(row => {
        rows.push({
            drug_id:       row.querySelector('.drug-id-input')?.value || '',
            drug_display:  row.querySelector('.drug-search')?.value   || '',
            quantity:      row.querySelector('.qty-input')?.value     || '',
            unit_cost:     row.querySelector('.cost-input')?.value    || '',
            selling_price: row.querySelector('.selling-input')?.value || '',
            expiry_date:   row.querySelector('.expiry-input')?.value  || '',
        });
    });
    return {
        saved_at:          new Date().toISOString(),
        supplier_id:       document.getElementById('supplierSelect')?.value      || '',
        date_received:     document.getElementById('dateReceivedInput')?.value   || '',
        notes:             document.getElementById('notesInput')?.value          || '',
        payment_method:    document.getElementById('paymentMethodSelect')?.value || '',
        payment_reference: document.getElementById('paymentRefInput')?.value     || '',
        items:             rows,
    };
}

function saveSnapshot() {
    try {
        const snap = snapshotForm();
        // Only save if there's actually something entered
        const hasData = snap.supplier_id || snap.payment_method ||
            snap.items.some(r => r.drug_id || r.drug_display || r.quantity || r.unit_cost);
        if (!hasData) return;
        localStorage.setItem(AUTOSAVE_KEY, JSON.stringify(snap));
        updateAutosaveStatus('Saved ' + new Date().toLocaleTimeString(), 'ok');
    } catch (e) {
        console.warn('Autosave failed:', e);
        updateAutosaveStatus('Autosave unavailable', 'warn');
    }
}

function updateAutosaveStatus(msg, kind) {
    const el = document.getElementById('autosaveStatus');
    if (!el) return;
    const color = kind === 'warn' ? 'text-amber-600' : 'text-green-600';
    el.className = 'text-xs flex items-center gap-1.5 ' + color;
    el.innerHTML = '<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg><span>' + msg + '</span>';
}

function restoreSnapshot() {
    // Only restore if there's no server-side old() data already populating the form.
    // If validation just bounced the user, old() has already refilled the fields —
    // don't double-apply by also restoring from localStorage.
    @if(!$errors->any() && !old('supplier_id'))
        try {
            const raw = localStorage.getItem(AUTOSAVE_KEY);
            if (!raw) return;
            const snap = JSON.parse(raw);
            const age = (Date.now() - new Date(snap.saved_at).getTime()) / 1000 / 60;
            // Offer restore only if draft is recent (< 24h) and has content
            if (age > 1440) { localStorage.removeItem(AUTOSAVE_KEY); return; }

            const hasData = snap.supplier_id || snap.items?.some(r => r.drug_id);
            if (!hasData) return;

            const when = new Date(snap.saved_at).toLocaleString();
            if (!confirm('An unsaved draft from ' + when + ' was found in this browser.\n\nRestore it?')) {
                localStorage.removeItem(AUTOSAVE_KEY);
                return;
            }

            // Apply snapshot
            if (snap.supplier_id)        document.getElementById('supplierSelect').value      = snap.supplier_id;
            if (snap.date_received)      document.getElementById('dateReceivedInput').value   = snap.date_received;
            if (snap.notes)              document.getElementById('notesInput').value          = snap.notes;
            if (snap.payment_method)     document.getElementById('paymentMethodSelect').value = snap.payment_method;
            if (snap.payment_reference)  document.getElementById('paymentRefInput').value     = snap.payment_reference;

            // Replace items rows
            const tbody = document.getElementById('itemsBody');
            tbody.innerHTML = '';
            (snap.items || []).forEach((item, i) => {
                addRow(item);
            });
            if (!tbody.children.length) addRow();
            calcGrandTotal();
        } catch (e) {
            console.warn('Restore failed:', e);
        }
    @endif
}

function clearAutosave(confirmFirst) {
    if (confirmFirst && !confirm('Discard the autosaved draft?')) return;
    try { localStorage.removeItem(AUTOSAVE_KEY); } catch (e) {}
    if (confirmFirst) {
        updateAutosaveStatus('Draft cleared', 'warn');
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   CLIENT-SIDE VALIDATION: Catch problems BEFORE submit so the user doesn't
   even round-trip to the server on common mistakes.
   ────────────────────────────────────────────────────────────────────── */

function validateBeforeComplete(e, action) {
    if (action !== 'complete') return true; // Drafts skip validation

    const errors = [];
    const rows = document.querySelectorAll('.item-row');
    const today = new Date().toISOString().split('T')[0];

    // Clear previous highlights
    document.querySelectorAll('.validation-error').forEach(el => {
        el.classList.remove('validation-error', 'ring-2', 'ring-red-400', 'border-red-400');
    });

    let firstErrorEl = null;
    rows.forEach((row, idx) => {
        const rowNum = idx + 1;
        const drugId = row.querySelector('.drug-id-input')?.value;
        const drugSearch = row.querySelector('.drug-search');
        const qty    = row.querySelector('.qty-input');
        const cost   = row.querySelector('.cost-input');
        const sell   = row.querySelector('.selling-input');
        const expiry = row.querySelector('.expiry-input');

        const markError = (el) => {
            if (!el) return;
            el.classList.add('validation-error', 'ring-2', 'ring-red-400', 'border-red-400');
            if (!firstErrorEl) firstErrorEl = el;
        };

        if (!drugId) { errors.push('Row ' + rowNum + ': select a drug.'); markError(drugSearch); }
        if (!qty.value || parseInt(qty.value) < 1) { errors.push('Row ' + rowNum + ': quantity must be at least 1.'); markError(qty); }
        if (cost.value === '' || parseFloat(cost.value) < 0) { errors.push('Row ' + rowNum + ': buying price is required.'); markError(cost); }
        if (sell.value === '' || parseFloat(sell.value) < 0) { errors.push('Row ' + rowNum + ': selling price is required.'); markError(sell); }
        if (!expiry.value) { errors.push('Row ' + rowNum + ': expiry date is required.'); markError(expiry); }
        else if (expiry.value < today) { errors.push('Row ' + rowNum + ': expiry must be today or a future date.'); markError(expiry); }
    });

    if (!document.getElementById('supplierSelect').value) {
        errors.push('Supplier is required.');
    }
    if (!document.getElementById('paymentMethodSelect').value) {
        errors.push('Payment method is required.');
    }

    if (errors.length > 0) {
        e.preventDefault();
        const msg = 'Please fix these issues before completing:\n\n• ' + errors.slice(0, 10).join('\n• ') +
                    (errors.length > 10 ? '\n\n...and ' + (errors.length - 10) + ' more.' : '') +
                    '\n\nTip: Use "Save as Draft" to keep your work and finish the missing fields later.';
        alert(msg);
        if (firstErrorEl) {
            firstErrorEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
            setTimeout(() => firstErrorEl.focus(), 400);
        }
        return false;
    }
    return true;
}

// Wire up the two submit buttons separately so we know which action is happening
document.getElementById('completeBtn')?.addEventListener('click', function(e) {
    validateBeforeComplete(e, 'complete');
});
document.getElementById('saveDraftBtn')?.addEventListener('click', function(e) {
    // Drafts: just ensure supplier exists (minimum for DB to accept it)
    if (!document.getElementById('supplierSelect').value) {
        e.preventDefault();
        alert('Please select a supplier before saving.');
        document.getElementById('supplierSelect').focus();
    }
});

// On successful form submit, clear the autosave
document.getElementById('grnForm')?.addEventListener('submit', function() {
    // Small delay so submit goes through first
    setTimeout(() => clearAutosave(false), 100);
});

/* ─────────────────────────────────────────────────────────────────────────
   ROW MANAGEMENT
   ────────────────────────────────────────────────────────────────────── */

function addRow(prefill) {
    const tbody = document.getElementById('itemsBody');
    const i = tbody.children.length;
    const tr = document.createElement('tr');
    tr.className = 'item-row border-b last:border-0';
    const p = prefill || {};
    tr.innerHTML = `
        <td class="table-cell">
            <div class="relative">
                <input type="text" class="form-input text-xs drug-search" placeholder="Search drug..." autocomplete="off" data-index="${i}" value="${(p.drug_display || '').replace(/"/g,'&quot;')}">
                <input type="hidden" name="items[${i}][drug_item_id]" class="drug-id-input" value="${p.drug_id || ''}">
                <div class="drug-dropdown absolute z-20 left-0 right-0 bg-white border rounded-lg shadow-lg mt-1 max-h-48 overflow-y-auto hidden"></div>
            </div>
        </td>
        <td class="table-cell">
            <input type="number" name="items[${i}][quantity]" value="${p.quantity || ''}" min="1" class="form-input text-xs text-center qty-input" placeholder="0" oninput="calcRow(this)">
        </td>
        <td class="table-cell">
            <input type="number" step="0.01" name="items[${i}][unit_cost]" value="${p.unit_cost || ''}" min="0" class="form-input text-xs text-right cost-input" placeholder="0.00" oninput="calcRow(this)">
        </td>
        <td class="table-cell">
            <input type="number" step="0.01" name="items[${i}][selling_price]" value="${p.selling_price || ''}" min="0" class="form-input text-xs text-right selling-input" placeholder="0.00">
        </td>
        <td class="table-cell text-right font-semibold text-sm line-total">KES 0</td>
        <td class="table-cell">
            <input type="date" name="items[${i}][expiry_date]" value="${p.expiry_date || ''}" class="form-input text-xs expiry-input">
        </td>
        <td class="table-cell">
            <button type="button" onclick="removeRow(this)" class="text-red-400 hover:text-red-600 p-1">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
            </button>
        </td>`;
    tbody.appendChild(tr);
    initDrugSearch(tr.querySelector('.drug-search'));
    if (p.quantity || p.unit_cost) calcRow(tr.querySelector('.qty-input'));
}

function removeRow(btn) {
    const rows = document.querySelectorAll('.item-row');
    if (rows.length <= 1) { alert('At least one product is required.'); return; }
    btn.closest('tr').remove();
    calcGrandTotal();
}

function calcRow(input) {
    const row = input.closest('tr');
    const qty  = parseFloat(row.querySelector('.qty-input')?.value)  || 0;
    const cost = parseFloat(row.querySelector('.cost-input')?.value) || 0;
    const total = qty * cost;
    row.querySelector('.line-total').textContent = 'KES ' + total.toLocaleString('en-KE', {minimumFractionDigits:2});
    calcGrandTotal();
}

function calcGrandTotal() {
    let total = 0;
    document.querySelectorAll('.item-row').forEach(row => {
        const qty  = parseFloat(row.querySelector('.qty-input')?.value)  || 0;
        const cost = parseFloat(row.querySelector('.cost-input')?.value) || 0;
        total += qty * cost;
    });
    const fmt = 'KES ' + total.toLocaleString('en-KE', {minimumFractionDigits:2});
    document.getElementById('grandTotal').textContent = fmt;
    document.getElementById('grandTotalDisplay').textContent = fmt;
}

function initDrugSearch(input) {
    if (!input) return;
    const dropdown = input.nextElementSibling.nextElementSibling;
    const hiddenId  = input.nextElementSibling;
    let debounce;

    dropdown.style.position = 'fixed';
    dropdown.style.zIndex   = '9999';

    function positionDropdown() {
        if (dropdown.classList.contains('hidden')) return;
        const r = input.getBoundingClientRect();
        dropdown.style.left  = r.left + 'px';
        dropdown.style.top   = (r.bottom + 2) + 'px';
        dropdown.style.width = r.width + 'px';
    }
    window.addEventListener('scroll', positionDropdown, { passive: true, capture: true });
    window.addEventListener('resize', positionDropdown);

    function openDropdown() {
        dropdown.classList.remove('hidden');
        positionDropdown();
    }

    input.addEventListener('input', function() {
        clearTimeout(debounce);
        const q = this.value.trim();
        // Clear the hidden ID if the user modifies the text — they're searching again
        hiddenId.value = '';

        if (q.length < 2) { dropdown.classList.add('hidden'); return; }

        dropdown.innerHTML = '<div class="px-3 py-2 text-xs text-gray-400 italic">Searching…</div>';
        openDropdown();

        debounce = setTimeout(() => {
            fetch(`/pharmacy/drugs-search?q=${encodeURIComponent(q)}`, {
                headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
                credentials: 'same-origin'
            })
                .then(r => {
                    if (!r.ok) throw new Error('HTTP ' + r.status + ' ' + r.statusText);
                    const ct = r.headers.get('content-type') || '';
                    if (!ct.includes('application/json')) {
                        throw new Error('Server did not return JSON (got ' + ct + '). You may need to log in again.');
                    }
                    return r.json();
                })
                .then(drugs => {
                    dropdown.innerHTML = '';
                    if (!drugs.length) {
                        dropdown.innerHTML = '<div class="px-3 py-2 text-xs text-gray-400">No drugs match \u201C' + q.replace(/</g,'&lt;') + '\u201D</div>';
                    } else {
                        drugs.forEach(d => {
                            const div = document.createElement('div');
                            div.className = 'px-3 py-2 text-xs cursor-pointer hover:bg-blue-50 border-b last:border-0';
                            div.innerHTML = `<span class="font-medium">${d.name}</span> <span class="text-gray-400">${d.generic_name ?? ''}</span><br><span class="text-gray-400 font-mono">${d.code}</span>`;
                            div.addEventListener('mousedown', (e) => {
                                e.preventDefault();
                                input.value = d.name + (d.generic_name ? ' – ' + d.generic_name : '');
                                hiddenId.value = d.id;
                                const row = input.closest('tr');
                                const spInput = row.querySelector('.selling-input');
                                if (spInput && !spInput.value) spInput.value = d.selling_price ?? '';
                                dropdown.classList.add('hidden');
                                // Remove error state
                                input.classList.remove('validation-error', 'ring-2', 'ring-red-400', 'border-red-400');
                            });
                            dropdown.appendChild(div);
                        });
                    }
                    openDropdown();
                })
                .catch(err => {
                    console.error('Drug search failed:', err);
                    dropdown.innerHTML = '<div class="px-3 py-2 text-xs text-red-600">Search error: ' + (err.message || 'unknown') + '. Try refreshing the page.</div>';
                    openDropdown();
                });
        }, 250);
    });

    input.addEventListener('blur', () => setTimeout(() => dropdown.classList.add('hidden'), 200));
}

// Init existing rows
document.querySelectorAll('.drug-search').forEach(initDrugSearch);

// Compute line totals for any prefilled rows (e.g. after validation error)
document.querySelectorAll('.qty-input').forEach(el => { if (el.value) calcRow(el); });

// Attempt to restore from localStorage if this is a fresh page load
restoreSnapshot();

// Periodic autosave
setInterval(saveSnapshot, AUTOSAVE_INTERVAL_MS);

// Save on any input change too (immediate feedback)
document.getElementById('grnForm')?.addEventListener('input', () => {
    clearTimeout(window._autoSaveDebounce);
    window._autoSaveDebounce = setTimeout(saveSnapshot, 500);
});
</script>

<style>
.validation-error { background-color: #fef2f2; }
</style>
@endsection