@extends('garage.layouts.app')

@section('title', 'Edit purchase order')

@push('styles')
@include('shared.garage-purchase-order-ui-styles')
@include('shared.garage-split-form-ui-styles')
@endpush

@section('navbar_lead')
@include('garage.partials.split-form-navbar-lead', [
    'icon' => 'bi-pencil-square',
    'title' => 'Edit purchase order',
    'subtitle' => 'Draft orders only. Parts catalog on the left; adjust lines and totals on the right.',
])
@endsection

@section('content')
<div class="gpo-page gs-split-form-page gs-vf-page gs-po-page gs-ro-page container-fluid px-2 px-lg-3 py-2">

    <form method="POST" action="{{ route('garage.purchase-orders.update', $purchaseOrder->id) }}" id="gpoForm">
        @csrf
        @method('PUT')

        <div class="gpo-split">
            <div class="gpo-panel gpo-panel-inv gs-ro-quick-panel">
                <div class="gpo-panel-hd teal gpo-inv-panel-hd">
                    <span class="gpo-inv-hd-title"><i class="bi bi-box-seam"></i> Parts catalog</span>
                    <span class="badge rounded-pill" id="gpoInvCount">0</span>
                </div>
                <div class="gpo-panel-bd">
                    <div class="gpo-inv-toolbar">
                        <input type="search" class="gpo-search" id="gpoInvSearch" placeholder="Search SKU, name, supplier…" autocomplete="off">
                        <div class="gpo-inv-filter-line">
                            <span id="gpoInvFilterLabel">Loading…</span>
                        </div>
                    </div>
                    <div class="gpo-inv-scroll" id="gpoInvList"></div>
                </div>
            </div>

            <div class="gpo-panel gs-ro-detail-panel">
                @include('garage.partials.split-form-detail-header', [
                    'icon' => 'bi-receipt',
                    'title' => 'Order detail',
                    'numberLabel' => 'PO no.',
                    'numberValue' => $purchaseOrder->purchase_order_number,
                    'dateName' => 'purchase_order_date',
                    'dateValue' => old('purchase_order_date', \Carbon\Carbon::parse($purchaseOrder->purchase_order_date)->format('Y-m-d')),
                    'closeUrl' => route('garage.purchase-orders.show', $purchaseOrder->id),
                    'saveLabel' => 'Update order',
                ])
                <div class="gpo-panel-bd gs-ro-detail-bd">
                    <div class="gs-ro-detail-fields">
                    @include('garage.purchase-orders.partials.detail-panel-fields', [
                        'vendors' => $vendors,
                        'warehouseCtx' => $warehouseCtx ?? [],
                        'purchaseOrder' => $purchaseOrder,
                    ])
                    </div>

                    @include('garage.purchase-orders.partials.lines-panel', ['showTypeCol' => true])

                    <div class="gs-ro-detail-footer">
                        <div class="gpo-sum gs-ro-sum-h" id="gpoSumBox">
                            <div class="gpo-sum-row"><span>Subtotal</span><span id="gpoSumSub">PKR 0.00</span></div>
                            <div class="gpo-sum-row"><span>Tax</span><span id="gpoSumTax">PKR 0.00</span></div>
                            <div class="gpo-sum-row"><span>Order discount</span><span id="gpoSumDisc">PKR 0.00</span></div>
                            <div class="gpo-sum-row"><span>Freight</span><span id="gpoSumShip">PKR 0.00</span></div>
                            <div class="gpo-sum-row total"><span>Total</span><span id="gpoSumTot">PKR 0.00</span></div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </form>
</div>

@push('scripts')
<script>
(function () {
    const PARTS = @json($partsForJs);
    const INITIAL = @json($initialItemsJson);
    let lines = normalizeInitial(INITIAL);
    let lastInvFiltered = [];

    function normalizeInitial(rows) {
        if (!rows || !rows.length) return [];
        return rows.map(function (r) {
            return {
                item_type: r.item_type,
                part_id: r.part_id != null ? parseInt(r.part_id, 10) : null,
                labor_id: r.labor_id != null ? parseInt(r.labor_id, 10) : null,
                service_group_id: r.service_group_id != null ? parseInt(r.service_group_id, 10) : null,
                description: r.description || '',
                quantity: parseInt(r.quantity, 10) || 1,
                unit_price: parseFloat(r.unit_price) || 0,
                discount_amount: parseFloat(r.discount_amount) || 0,
                discount_type: r.discount_type || 'fixed',
                tax_rate: parseFloat(r.tax_rate) || 0,
                notes: r.notes || null,
                line_label: r.line_label || '',
                inventory_code_snapshot: r.inventory_code_snapshot || null,
                base_cost_unit_price: r.base_cost_unit_price != null ? parseFloat(r.base_cost_unit_price) : null,
                market_unit_price: r.market_unit_price != null ? parseFloat(r.market_unit_price) : null,
                sale_unit_price: r.sale_unit_price != null ? parseFloat(r.sale_unit_price) : null,
            };
        });
    }

    function money(n) {
        const x = Number(n) || 0;
        return 'PKR ' + x.toLocaleString('en-PK', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
    }
    function moneyCompact(n) {
        const x = Number(n) || 0;
        const hasCents = Math.round(x * 100) % 100 !== 0;
        return x.toLocaleString('en-PK', hasCents
            ? { minimumFractionDigits: 2, maximumFractionDigits: 2 }
            : { maximumFractionDigits: 0 });
    }

    function lineCalc(L) {
        const qty = Math.max(1, parseInt(L.quantity, 10) || 1);
        const unit = Math.max(0, parseFloat(L.unit_price) || 0);
        const gross = qty * unit;
        let disc = Math.max(0, parseFloat(L.discount_amount) || 0);
        if (L.discount_type === 'percentage') {
            disc = gross * (disc / 100);
        }
        const net = Math.max(0, gross - disc);
        const tr = Math.max(0, parseFloat(L.tax_rate) || 0);
        const tax = net * (tr / 100);
        return { gross, disc, net, tax, total: net + tax };
    }

    function typeBadge(t) {
        if (t === 'part') return '<span class="badge-gpo" style="background:#ccfbf1;color:#0f766e;">Part</span>';
        if (t === 'labor') return '<span class="badge-gpo" style="background:#e0e7ff;color:#3730a3;">Labor</span>';
        return '<span class="badge-gpo" style="background:#fef3c7;color:#92400e;">Bundle</span>';
    }

    function stockBadge(p) {
        const q = p.stock_quantity;
        const minL = p.min_stock_level != null ? p.min_stock_level : 0;
        if (q <= 0) return { cls: 'gpo-inv-stk-none', txt: 'Out of stock' };
        if (minL > 0 && q <= minL) return { cls: 'gpo-inv-stk-low', txt: 'Low · ' + q + ' left' };
        if (q < 5) return { cls: 'gpo-inv-stk-low', txt: 'Low · ' + q + ' left' };
        return { cls: 'gpo-inv-stk-ok', txt: q + ' in stock' };
    }

    function renderInventory() {
        const q = (document.getElementById('gpoInvSearch').value || '').toLowerCase().trim();
        const el = document.getElementById('gpoInvList');
        const total = PARTS.length;
        document.getElementById('gpoInvCount').textContent = String(total);
        const fl = document.getElementById('gpoInvFilterLabel');
        const filtered = PARTS.filter(function (p) {
            if (!q) return true;
            const blob = [p.name, p.inventory_code, p.code, p.additional_barcodes, p.supplier_name].filter(Boolean).join(' ').toLowerCase();
            return blob.includes(q);
        });
        lastInvFiltered = filtered;
        if (fl) {
            fl.innerHTML = q
                ? 'Showing <strong>' + filtered.length + '</strong> of ' + total
                : '<strong>' + total + '</strong> parts · click <em>Add</em> to copy a line to the order';
        }
        if (total === 0) {
            if (fl) fl.innerHTML = '<span class="text-warning">No active parts in inventory.</span> Add parts first, then edit a PO.';
            el.innerHTML = '<div class="gpo-inv-empty gpo-inv-empty-catalog"><i class="bi bi-inboxes d-block fs-1 mb-2 opacity-40"></i><strong>Catalog is empty</strong><span class="d-block small mt-1">Seed or create parts for this garage — they will show here.</span></div>';
            return;
        }
        if (!filtered.length) {
            el.innerHTML = '<div class="gpo-inv-empty"><i class="bi bi-search d-block fs-3 mb-2 opacity-50"></i>No parts match your search.</div>';
            return;
        }
        el.innerHTML = filtered.map(function (p) {
            const code = p.inventory_code || p.code || '—';
            const sup = p.supplier_name || '—';
            const nm = escapeHtml(p.name);
            const sb = stockBadge(p);
            const mkt = p.market_price != null ? ' · M ' + moneyCompact(p.market_price) : '';
            const meta = escapeHtml(sup) +
                ' · <span class="gpo-inv-stk-inline ' + sb.cls + '">' + escapeHtml(sb.txt) + '</span>' +
                ' · C ' + moneyCompact(p.cost_price) + mkt + ' · S ' + moneyCompact(p.selling_price);
            return '<div class="gpo-inv-row" data-pid="' + p.id + '">' +
                '<div class="gpo-inv-row-detail">' +
                '<div class="gpo-inv-row-top">' +
                '<span class="gpo-inv-sku" title="' + escapeHtml(String(code)) + '">' + escapeHtml(String(code)) + '</span>' +
                '<span class="gpo-inv-name" title="' + nm + '">' + nm + '</span></div>' +
                '<div class="gpo-inv-inline-meta">' + meta + '</div></div>' +
                '<div class="gpo-inv-row-actions">' +
                '<input type="number" min="1" max="999999" value="1" class="gpo-inv-qty gpo-line-qty" data-pid="' + p.id + '" aria-label="Quantity">' +
                '<button type="button" class="gpo-inv-add-btn" data-pid="' + p.id + '" title="Add to order"><span class="gpo-inv-add-lbl"><i class="bi bi-plus-lg"></i> Add</span></button>' +
                '</div></div>';
        }).join('');
    }

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

    function addPart(partId) {
        const pid = parseInt(partId, 10);
        if (Number.isNaN(pid)) return;
        const p = PARTS.find(function (x) { return Number(x.id) === pid; });
        if (!p) return;
        const qtyEl = document.querySelector('#gpoInvList .gpo-inv-qty[data-pid="' + pid + '"]');
        const qty = Math.max(1, parseInt(qtyEl && qtyEl.value, 10) || 1);
        const cost = Number(p.cost_price) || 0;
        const mkt = p.market_price != null ? Number(p.market_price) : null;
        const sell = Number(p.selling_price) || 0;
        lines.push({
            item_type: 'part',
            part_id: pid,
            labor_id: null,
            service_group_id: null,
            description: p.name,
            quantity: qty,
            unit_price: cost,
            discount_amount: 0,
            discount_type: 'percentage',
            tax_rate: Number(p.tax_rate) || 0,
            notes: null,
            line_label: p.name,
            inventory_code_snapshot: p.inventory_code || p.code || null,
            base_cost_unit_price: cost,
            market_unit_price: mkt,
            sale_unit_price: sell,
        });
        renderLines();
    }

    function removeLine(i) {
        lines.splice(i, 1);
        renderLines();
    }

    function rowPart(L, i, c) {
        const code = L.inventory_code_snapshot || '—';
        const mkt = L.market_unit_price != null ? money(L.market_unit_price) : '—';
        return '<tr data-idx="' + i + '">' +
            '<td>' + typeBadge('part') + '</td>' +
            '<td><span class="gpo-code">' + escapeHtml(String(code)) + '</span></td>' +
            '<td style="min-width:140px;"><div class="fw-semibold small">' + escapeHtml(L.description || L.line_label || '') + '</div></td>' +
            '<td><input type="number" min="1" class="cell-inp gpo-cell" data-f="quantity" value="' + L.quantity + '"></td>' +
            '<td><span class="small text-muted">' + money(L.base_cost_unit_price != null ? L.base_cost_unit_price : L.unit_price) + '</span></td>' +
            '<td><span class="small">' + mkt + '</span></td>' +
            '<td><input type="number" step="0.01" min="0" class="cell-inp w-wide gpo-cell" data-f="unit_price" value="' + L.unit_price + '"></td>' +
            '<td><input type="number" step="0.01" min="0" max="100" class="cell-inp gpo-cell" data-f="discount_amount" value="' + L.discount_amount + '"></td>' +
            '<td><input type="number" step="0.01" min="0" max="100" class="cell-inp gpo-cell" data-f="tax_rate" value="' + L.tax_rate + '"></td>' +
            '<td class="fw-bold small">' + money(c.total) + '</td>' +
            '<td><button type="button" class="btn btn-sm btn-outline-danger py-0 px-1 gpo-rm" data-i="' + i + '"><i class="bi bi-x-lg"></i></button></td></tr>';
    }

    function rowOther(L, i, c) {
        const title = L.line_label || L.description || 'Line';
        const inv = L.inventory_code_snapshot ? escapeHtml(String(L.inventory_code_snapshot)) : '—';
        const base = L.base_cost_unit_price != null ? money(L.base_cost_unit_price) : '—';
        const mkt = L.market_unit_price != null ? money(L.market_unit_price) : '—';
        return '<tr data-idx="' + i + '">' +
            '<td>' + typeBadge(L.item_type) + '</td>' +
            '<td><span class="small text-muted">' + inv + '</span></td>' +
            '<td style="min-width:140px;"><div class="fw-semibold small">' + escapeHtml(title) + '</div></td>' +
            '<td><input type="number" min="1" class="cell-inp gpo-cell" data-f="quantity" value="' + L.quantity + '"></td>' +
            '<td><span class="small text-muted">' + base + '</span></td>' +
            '<td><span class="small">' + mkt + '</span></td>' +
            '<td><input type="number" step="0.01" min="0" class="cell-inp w-wide gpo-cell" data-f="unit_price" value="' + L.unit_price + '"></td>' +
            '<td><input type="number" step="0.01" min="0" max="100" class="cell-inp gpo-cell" data-f="discount_amount" value="' + L.discount_amount + '"></td>' +
            '<td><input type="number" step="0.01" min="0" max="100" class="cell-inp gpo-cell" data-f="tax_rate" value="' + L.tax_rate + '"></td>' +
            '<td class="fw-bold small">' + money(c.total) + '</td>' +
            '<td><button type="button" class="btn btn-sm btn-outline-danger py-0 px-1 gpo-rm" data-i="' + i + '"><i class="bi bi-x-lg"></i></button></td></tr>';
    }

    var PO_SCROLL_MIN_ROWS = 3;
    function linesColspan() {
        const tb = document.getElementById('gpoLinesBody');
        return parseInt(tb && tb.getAttribute('data-colspan'), 10) || 11;
    }
    function syncPoTableScroll() {
        const wrap = document.getElementById('gpoLinesScroll');
        const body = document.getElementById('gpoLinesBody');
        if (!wrap || !body) return;
        const empty = body.querySelector('.gs-ro-empty-cell');
        const rows = body.querySelectorAll('tr').length;
        wrap.classList.toggle('is-scrollable', !empty && rows >= PO_SCROLL_MIN_ROWS);
        if (typeof window.syncRoQuickAddHeight === 'function') {
            requestAnimationFrame(window.syncRoQuickAddHeight);
        }
    }

    function renderLines() {
        const tb = document.getElementById('gpoLinesBody');
        if (!tb) return;
        const cs = linesColspan();
        if (!lines.length) {
            tb.innerHTML = '<tr><td colspan="' + cs + '" class="text-center text-muted gs-ro-empty-cell">Add parts from the catalog on the left.</td></tr>';
            syncPoTableScroll();
            refreshTotals();
            return;
        }
        tb.innerHTML = lines.map(function (L, i) {
            const c = lineCalc(L);
            return L.item_type === 'part' ? rowPart(L, i, c) : rowOther(L, i, c);
        }).join('');

        syncPoTableScroll();
        refreshTotals();
    }

    function refreshTotals() {
        let sub = 0, tax = 0;
        lines.forEach(function (L) {
            const c = lineCalc(L);
            sub += c.net;
            tax += c.tax;
        });
        const dt = document.querySelector('input[name="discount_type"]:checked');
        const dtype = dt ? dt.value : 'fixed';
        let hdrDisc = parseFloat(document.getElementById('gpoHdrDiscVal').value) || 0;
        if (dtype === 'percentage') {
            hdrDisc = sub * (hdrDisc / 100);
        }
        const ship = parseFloat(document.getElementById('gpoFreight').value) || 0;
        const afterDisc = Math.max(0, sub - hdrDisc);
        const grand = afterDisc + tax + ship;

        document.getElementById('gpoSumSub').textContent = money(sub);
        document.getElementById('gpoSumTax').textContent = money(tax);
        document.getElementById('gpoSumDisc').textContent = money(hdrDisc);
        document.getElementById('gpoSumShip').textContent = money(ship);
        document.getElementById('gpoSumTot').textContent = money(grand);
        if (typeof window.syncRoQuickAddHeight === 'function') {
            requestAnimationFrame(window.syncRoQuickAddHeight);
        }
    }

    function buildPayload() {
        return lines.map(function (L) {
            const o = {
                item_type: L.item_type,
                description: L.description || L.line_label || null,
                quantity: L.quantity,
                unit_price: L.unit_price,
                discount_amount: L.discount_amount,
                discount_type: L.discount_type,
                tax_rate: L.tax_rate,
                notes: L.notes,
                inventory_code_snapshot: L.inventory_code_snapshot,
                base_cost_unit_price: L.base_cost_unit_price,
                market_unit_price: L.market_unit_price,
                sale_unit_price: L.sale_unit_price,
            };
            if (L.item_type === 'part') o.part_id = L.part_id;
            else if (L.item_type === 'labor') o.labor_id = L.labor_id;
            else o.service_group_id = L.service_group_id;
            return o;
        });
    }

    if (window.jQuery && window.jQuery.fn && typeof window.jQuery.fn.chosen === 'function') {
        window.jQuery('.js-chosen-compact').chosen({ width: '100%', search_contains: true, allow_single_deselect: true });
    }

    var gpoInvList = document.getElementById('gpoInvList');
    var gpoLinesBody = document.getElementById('gpoLinesBody');
    if (gpoLinesBody) {
        gpoLinesBody.addEventListener('input', function (e) {
            const inp = e.target.closest('.gpo-cell');
            if (!inp || !gpoLinesBody.contains(inp)) return;
            const tr = inp.closest('tr');
            const idx = parseInt(tr.getAttribute('data-idx'), 10);
            const f = inp.getAttribute('data-f');
            if (Number.isNaN(idx) || !lines[idx] || !f) return;
            if (f === 'quantity') lines[idx][f] = Math.max(1, parseInt(inp.value, 10) || 1);
            else lines[idx][f] = Math.max(0, parseFloat(inp.value) || 0);
            const totalCell = tr.querySelector('td.fw-bold.small');
            if (totalCell) totalCell.textContent = money(lineCalc(lines[idx]).total);
            refreshTotals();
        });
        gpoLinesBody.addEventListener('click', function (e) {
            const btn = e.target.closest('.gpo-rm');
            if (!btn || !gpoLinesBody.contains(btn)) return;
            removeLine(parseInt(btn.getAttribute('data-i'), 10));
        });
    }

    gpoInvList.addEventListener('click', function (e) {
        var btn = e.target.closest('.gpo-inv-add-btn');
        if (!btn || !gpoInvList.contains(btn)) return;
        e.preventDefault();
        addPart(btn.getAttribute('data-pid'));
    });
    gpoInvList.addEventListener('keydown', function (e) {
        if (e.key !== 'Enter') return;
        var inp = e.target.classList && e.target.classList.contains('gpo-inv-qty') ? e.target : null;
        if (!inp || !gpoInvList.contains(inp)) return;
        e.preventDefault();
        e.stopPropagation();
        addPart(inp.getAttribute('data-pid'));
    });

    document.getElementById('gpoInvSearch').addEventListener('input', renderInventory);
    document.getElementById('gpoInvSearch').addEventListener('keydown', function (e) {
        if (e.key !== 'Enter') return;
        const q = (e.target.value || '').trim();
        if (!q) return;
        if (!lastInvFiltered.length) return;
        e.preventDefault();
        addPart(lastInvFiltered[0].id);
        e.target.select();
        renderInventory();
    });
    document.querySelectorAll('input[name="discount_type"]').forEach(function (r) {
        r.addEventListener('change', refreshTotals);
    });
    document.getElementById('gpoHdrDiscVal').addEventListener('input', refreshTotals);
    document.getElementById('gpoFreight').addEventListener('input', refreshTotals);

    document.getElementById('gpoForm').addEventListener('submit', function (e) {
        if (!lines.length) {
            e.preventDefault();
            alert('Add at least one line to the order.');
            return;
        }
        let hid = document.getElementById('gpoItemsPayload');
        if (!hid) {
            hid = document.createElement('input');
            hid.type = 'hidden';
            hid.name = 'items';
            hid.id = 'gpoItemsPayload';
            this.appendChild(hid);
        }
        hid.value = JSON.stringify(buildPayload());
    });

    renderInventory();
    renderLines();
})();
</script>
@include('garage.repair-orders.partials.quick-add-height-sync')
@endpush
@endsection