@extends('garage.layouts.app')

@section('title', 'New 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-bag-plus',
    'title' => 'New purchase order',
    'subtitle' => 'Pick parts from inventory on the left. Adjust quantities and prices on the right, then save.',
])
@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.store') }}" id="gpoForm">
        @csrf

        <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>

            {{-- Order --}}
            <div class="gpo-panel gs-ro-detail-panel">
                @include('garage.partials.split-form-detail-header', [
                    'icon' => 'bi-receipt',
                    'title' => 'Order detail',
                    'numberLabel' => 'PO no.',
                    'numberName' => 'purchase_order_number',
                    'numberValue' => old('purchase_order_number', $purchaseOrderNumber),
                    'isCreate' => true,
                    'dateName' => 'purchase_order_date',
                    'dateValue' => old('purchase_order_date', date('Y-m-d')),
                    'historyUrl' => route('garage.purchase-orders.index'),
                    'closeUrl' => route('garage.purchase-orders.index'),
                    'saveLabel' => 'Save 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 ?? [],
                    ])
                    </div>

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

                    <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);
    let lines = [];
    let lastInvFiltered = [];
    let pendingFocus = 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 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(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 create 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(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(x => 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,
            description: p.name,
            quantity: qty,
            unit_price: cost,
            discount_amount: 0,
            discount_type: 'percentage',
            tax_rate: Number(p.tax_rate) || 0,
            inventory_code_snapshot: p.inventory_code || p.code || null,
            base_cost_unit_price: cost,
            market_unit_price: mkt,
            sale_unit_price: sell,
        });
        pendingFocus = { idx: lines.length - 1, field: 'quantity' };
        renderLines();
    }

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

    var PO_SCROLL_MIN_ROWS = 3;
    function linesColspan() {
        const tb = document.getElementById('gpoLinesBody');
        return parseInt(tb && tb.getAttribute('data-colspan'), 10) || 10;
    }
    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((L, i) => {
            const c = lineCalc(L);
            const code = L.inventory_code_snapshot || '—';
            const mkt = L.market_unit_price != null ? money(L.market_unit_price) : '—';
            return '<tr data-idx="' + i + '">' +
                '<td><span class="gpo-code">' + escapeHtml(String(code)) + '</span></td>' +
                '<td style="min-width:140px;"><div class="fw-semibold small">' + escapeHtml(L.description || '') + '</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>';
        }).join('');
        syncPoTableScroll();
        refreshTotals();

        if (pendingFocus && Number.isInteger(pendingFocus.idx)) {
            const row = tb.querySelector('tr[data-idx="' + pendingFocus.idx + '"]');
            if (row) {
                const target = row.querySelector('.gpo-cell[data-f="' + pendingFocus.field + '"]');
                if (target) {
                    requestAnimationFrame(function () {
                        target.focus();
                        target.select();
                    });
                }
            }
            pendingFocus = null;
        }
    }

    function updateLineFromInput(inp) {
        const tr = inp.closest('tr');
        if (!tr) return;
        const idx = parseInt(tr.getAttribute('data-idx'), 10);
        if (Number.isNaN(idx) || !lines[idx]) return;
        const f = inp.getAttribute('data-f');
        if (!f) return;
        const v = inp.value;
        if (f === 'quantity') lines[idx][f] = Math.max(1, parseInt(v, 10) || 1);
        else lines[idx][f] = Math.max(0, parseFloat(v) || 0);

        const totalCell = tr.querySelector('td:nth-child(9)');
        if (totalCell) {
            totalCell.textContent = money(lineCalc(lines[idx]).total);
        }
        refreshTotals();
    }

    function refreshTotals() {
        let sub = 0, tax = 0;
        lines.forEach(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);
        }
    }

    const gpoInvList = document.getElementById('gpoInvList');
    const gpoLinesBody = document.getElementById('gpoLinesBody');

    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 });
    }

    if (gpoLinesBody) {
        gpoLinesBody.addEventListener('input', function (e) {
            const inp = e.target.closest('.gpo-cell');
            if (!inp || !gpoLinesBody.contains(inp)) return;
            updateLineFromInput(inp);
        });
        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) {
        const 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;
        const 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(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 part to the order.');
            return;
        }
        const payload = lines.map(L => ({
            item_type: 'part',
            part_id: L.part_id,
            description: L.description,
            quantity: L.quantity,
            unit_price: L.unit_price,
            discount_amount: L.discount_amount,
            discount_type: L.discount_type,
            tax_rate: L.tax_rate,
            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,
        }));
        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(payload);
    });

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