@extends('garage.layouts.app')

@section('title', 'New bill')

@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-receipt',
    'title' => 'New purchase bill',
    'subtitle' => 'Add parts from the catalog. Set status to Received to update stock when you 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-invoices.store') }}" id="gbillForm"
          data-po-lookup-url="{{ route('garage.purchase-invoices.lookup-purchase-order') }}">
        @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="gbillInvCount">0</span>
                </div>
                <div class="gpo-panel-bd">
                    <div class="gpo-inv-toolbar">
                        <input type="search" class="gpo-search" id="gbillInvSearch" placeholder="Search SKU, name…" autocomplete="off">
                        <div class="gpo-inv-filter-line"><span id="gbillInvFilterLabel">Loading…</span></div>
                    </div>
                    <div class="gpo-inv-scroll" id="gbillInvList"></div>
                </div>
            </div>

            <div class="gpo-panel gs-ro-detail-panel">
                @include('garage.partials.split-form-detail-header', [
                    'icon' => 'bi-receipt',
                    'title' => 'Bill detail',
                    'numberLabel' => 'Bill no.',
                    'numberName' => 'bill_number',
                    'numberValue' => old('bill_number', $billNumber),
                    'isCreate' => true,
                    'dateName' => 'bill_date',
                    'dateValue' => old('bill_date', date('Y-m-d')),
                    'historyUrl' => route('garage.purchase-invoices.index'),
                    'closeUrl' => route('garage.purchase-invoices.index'),
                    'saveLabel' => 'Save bill',
                ])
                <div class="gpo-panel-bd gs-ro-detail-bd">
                    <div class="gs-ro-detail-fields">
                    @if($errors->any())
                    <div class="alert alert-danger py-2 small mb-2">
                        <ul class="mb-0 ps-3">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
                    </div>
                    @endif

                    @include('garage.purchase-invoices.partials.detail-panel-fields', [
                        'vendors' => $vendors,
                        'purchaseOrders' => $purchaseOrders,
                    ])

                    </div>{{-- gs-ro-detail-fields --}}

                    @include('garage.purchase-invoices.partials.lines-panel')

                    <div class="gs-ro-detail-footer">
                        <div class="gpo-sum gs-ro-sum-h" id="gbillSumBox">
                            <div class="gpo-sum-row"><span>Subtotal</span><span id="gbillSumSub">0.00</span></div>
                            <div class="gpo-sum-row"><span>Tax</span><span id="gbillSumTax">0.00</span></div>
                            <div class="gpo-sum-row"><span>Discount</span><span id="gbillSumDisc">0.00</span></div>
                            <div class="gpo-sum-row"><span>Shipping</span><span id="gbillSumShip">0.00</span></div>
                            <div class="gpo-sum-row total"><span>Total</span><span id="gbillSumTot">0.00</span></div>
                        </div>
                    </div>

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

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

    function money(n) {
        const x = Number(n) || 0;
        return x.toLocaleString('en-PK', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
    }
    function moneyCompact(n) {
        const x = Number(n) || 0;
        return x.toLocaleString('en-PK', { 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 { net, tax, total: net + tax };
    }
    function escapeHtml(s) {
        if (!s) return '';
        return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
    }
    function renderInventory() {
        const q = (document.getElementById('gbillInvSearch').value || '').toLowerCase().trim();
        const el = document.getElementById('gbillInvList');
        document.getElementById('gbillInvCount').textContent = String(PARTS.length);
        const fl = document.getElementById('gbillInvFilterLabel');
        const filtered = PARTS.filter(p => {
            if (!q) return true;
            const blob = [p.name, p.inventory_code, p.code].filter(Boolean).join(' ').toLowerCase();
            return blob.includes(q);
        });
        lastInvFiltered = filtered;
        if (fl) fl.innerHTML = q ? 'Showing <strong>' + filtered.length + '</strong> of ' + PARTS.length : '<strong>' + PARTS.length + '</strong> parts';
        if (!PARTS.length) {
            el.innerHTML = '<div class="gpo-inv-empty">No parts in catalog.</div>';
            return;
        }
        if (!filtered.length) {
            el.innerHTML = '<div class="gpo-inv-empty">No match.</div>';
            return;
        }
        el.innerHTML = filtered.map(p => {
            const code = p.inventory_code || p.code || '—';
            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">' + escapeHtml(String(code)) + '</span>' +
                '<span class="gpo-inv-name">' + escapeHtml(p.name) + '</span></div>' +
                '<div class="gpo-inv-inline-meta small text-muted">Stock ' + (p.stock_quantity || 0) + ' · Cost ' + moneyCompact(p.cost_price) + '</div></div>' +
                '<div class="gpo-inv-row-actions">' +
                '<input type="number" min="1" value="1" class="gpo-inv-qty" data-pid="' + p.id + '">' +
                '<button type="button" class="gpo-inv-add-btn" data-pid="' + p.id + '"><i class="bi bi-plus-lg"></i> Add</button></div></div>';
        }).join('');
    }
    function addPart(partId) {
        const p = PARTS.find(x => Number(x.id) === parseInt(partId, 10));
        if (!p) return;
        const qtyEl = document.querySelector('#gbillInvList .gpo-inv-qty[data-pid="' + p.id + '"]');
        const qty = Math.max(1, parseInt(qtyEl && qtyEl.value, 10) || 1);
        lines.push({
            item_type: 'part',
            part_id: p.id,
            description: p.name,
            quantity: qty,
            unit_price: Number(p.cost_price) || 0,
            discount_amount: 0,
            discount_type: 'percentage',
            tax_rate: Number(p.tax_rate) || 0,
            inventory_code_snapshot: p.inventory_code || p.code || null,
        });
        renderLines();
    }
    var BILL_SCROLL_MIN_ROWS = 3;
    function linesColspan() {
        const tb = document.getElementById('gbillLinesBody');
        return parseInt(tb && tb.getAttribute('data-colspan'), 10) || 8;
    }
    function syncBillTableScroll() {
        const wrap = document.getElementById('gbillLinesScroll');
        const body = document.getElementById('gbillLinesBody');
        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 >= BILL_SCROLL_MIN_ROWS);
        if (typeof window.syncRoQuickAddHeight === 'function') {
            requestAnimationFrame(window.syncRoQuickAddHeight);
        }
    }

    function renderLines() {
        const tb = document.getElementById('gbillLinesBody');
        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>';
            syncBillTableScroll();
            refreshTotals();
            return;
        }
        tb.innerHTML = lines.map((L, i) => {
            const c = lineCalc(L);
            const code = L.inventory_code_snapshot || '—';
            return '<tr data-idx="' + i + '">' +
                '<td><span class="gpo-code">' + escapeHtml(String(code)) + '</span></td>' +
                '<td class="small fw-semibold">' + escapeHtml(L.description || '') + '</td>' +
                '<td><input type="number" min="1" class="cell-inp gbill-cell" data-f="quantity" value="' + L.quantity + '"></td>' +
                '<td><input type="number" step="0.01" min="0" class="cell-inp gbill-cell" data-f="unit_price" value="' + L.unit_price + '"></td>' +
                '<td><input type="number" step="0.01" min="0" max="100" class="cell-inp gbill-cell" data-f="discount_amount" value="' + L.discount_amount + '"></td>' +
                '<td><input type="number" step="0.01" min="0" max="100" class="cell-inp gbill-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 gbill-rm" data-i="' + i + '"><i class="bi bi-x-lg"></i></button></td></tr>';
        }).join('');
        syncBillTableScroll();
        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('gbillHdrDiscVal').value) || 0;
        if (dtype === 'percentage') hdrDisc = sub * (hdrDisc / 100);
        const ship = parseFloat(document.getElementById('gbillFreight').value) || 0;
        const grand = Math.max(0, sub - hdrDisc) + tax + ship;
        document.getElementById('gbillSumSub').textContent = money(sub);
        document.getElementById('gbillSumTax').textContent = money(tax);
        document.getElementById('gbillSumDisc').textContent = money(hdrDisc);
        document.getElementById('gbillSumShip').textContent = money(ship);
        document.getElementById('gbillSumTot').textContent = money(grand);
        if (typeof window.syncRoQuickAddHeight === 'function') {
            requestAnimationFrame(window.syncRoQuickAddHeight);
        }
    }

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

    document.getElementById('gbillInvList').addEventListener('click', e => {
        const btn = e.target.closest('.gpo-inv-add-btn');
        if (btn) addPart(btn.getAttribute('data-pid'));
    });
    document.getElementById('gbillInvSearch').addEventListener('input', renderInventory);
    document.getElementById('gbillLinesBody').addEventListener('input', e => {
        const inp = e.target.closest('.gbill-cell');
        if (!inp) return;
        const tr = inp.closest('tr');
        const idx = parseInt(tr.getAttribute('data-idx'), 10);
        const f = inp.getAttribute('data-f');
        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);
        tr.querySelector('td:nth-child(7)').textContent = money(lineCalc(lines[idx]).total);
        refreshTotals();
    });
    document.getElementById('gbillLinesBody').addEventListener('click', e => {
        const btn = e.target.closest('.gbill-rm');
        if (btn) { lines.splice(parseInt(btn.getAttribute('data-i'), 10), 1); renderLines(); }
    });
    document.querySelectorAll('input[name="discount_type"]').forEach(r => r.addEventListener('change', refreshTotals));
    document.getElementById('gbillHdrDiscVal').addEventListener('input', refreshTotals);
    document.getElementById('gbillFreight').addEventListener('input', refreshTotals);

    document.getElementById('gbillForm').addEventListener('submit', function (e) {
        if (!lines.length) {
            e.preventDefault();
            alert('Add at least one part line.');
            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,
        }));
        let hid = document.getElementById('gbillItemsPayload');
        if (!hid) {
            hid = document.createElement('input');
            hid.type = 'hidden';
            hid.name = 'items';
            hid.id = 'gbillItemsPayload';
            this.appendChild(hid);
        }
        hid.value = JSON.stringify(payload);
    });

    renderInventory();
    renderLines();

    const poLookupUrl = document.getElementById('gbillForm').dataset.poLookupUrl;
    const poHint = document.getElementById('gbillPoHint');
    const poPicker = document.getElementById('gbillPoPicker');

    async function applyPoData(data) {
        const o = data.order;
        if (!o) return;
        const vendorSel = document.querySelector('[name="vendor_ledger_id"]');
        if (vendorSel && o.vendor_ledger_id) {
            vendorSel.value = String(o.vendor_ledger_id);
            if (window.jQuery && jQuery(vendorSel).trigger) jQuery(vendorSel).trigger('chosen:updated');
        }
        const poSel = document.getElementById('gbillPoId');
        if (poSel) {
            poSel.value = String(o.id);
            if (window.jQuery && jQuery(poSel).trigger) jQuery(poSel).trigger('chosen:updated');
        }
        const ref = document.querySelector('[name="reference_number"]');
        if (ref && o.reference_number) ref.value = o.reference_number;
        const notes = document.querySelector('[name="internal_notes"]');
        if (notes && o.internal_notes) notes.value = o.internal_notes;
        const ship = document.getElementById('gbillFreight');
        if (ship) ship.value = o.shipping_charges || 0;
        if (o.discount_type === 'fixed' || o.discount_type === 'percentage') {
            const dt = document.querySelector('input[name="discount_type"][value="fixed"]');
            if (dt) dt.checked = true;
            const dv = document.getElementById('gbillHdrDiscVal');
            if (dv) dv.value = o.discount_amount || 0;
        }
        const wh = document.querySelector('[name="garage_warehouse_id"]');
        if (wh && o.garage_warehouse_id) {
            wh.value = String(o.garage_warehouse_id);
            wh.dispatchEvent(new Event('change'));
            setTimeout(() => {
                const sec = document.querySelector('[name="garage_warehouse_section_id"]');
                if (sec && o.garage_warehouse_section_id) sec.value = String(o.garage_warehouse_section_id);
            }, 100);
        }
        lines = (data.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 || 0,
            discount_type: L.discount_type || 'percentage',
            tax_rate: L.tax_rate || 0,
            inventory_code_snapshot: L.inventory_code_snapshot || null,
        }));
        renderLines();
        poHint.innerHTML = '<span class="text-success">Loaded <strong>' + escapeHtml(o.purchase_order_number) + '</strong> — ' + lines.length + ' line(s). Review and save as Received to post stock &amp; journal.</span>';
        poPicker.classList.add('d-none');
    }

    async function loadPo(poNumber, poId) {
        poHint.textContent = 'Loading…';
        const params = new URLSearchParams();
        if (poId) params.set('purchase_order_id', poId);
        else params.set('purchase_order_number', poNumber);
        const res = await fetch(poLookupUrl + '?' + params.toString(), { headers: { Accept: 'application/json' } });
        const data = await res.json();
        if (!res.ok) {
            poHint.innerHTML = '<span class="text-danger">' + escapeHtml(data.error || 'Not found') + '</span>';
            return;
        }
        if (data.orders && data.orders.length > 1) {
            poPicker.innerHTML = data.orders.map(o =>
                '<option value="' + o.id + '">' + escapeHtml(o.purchase_order_number) + ' · ' + o.purchase_order_date + '</option>'
            ).join('');
            poPicker.classList.remove('d-none');
            poHint.textContent = 'Multiple POs matched — pick one:';
            return;
        }
        await applyPoData(data);
    }

    document.getElementById('gbillPoLoadBtn').addEventListener('click', () => {
        const q = document.getElementById('gbillPoSearch').value.trim();
        if (!q) { alert('Enter a PO number.'); return; }
        loadPo(q, 0);
    });
    poPicker.addEventListener('change', () => loadPo('', parseInt(poPicker.value, 10)));
    document.getElementById('gbillPoSearch').addEventListener('keydown', e => {
        if (e.key === 'Enter') { e.preventDefault(); document.getElementById('gbillPoLoadBtn').click(); }
    });
})();
</script>
@include('garage.repair-orders.partials.quick-add-height-sync')
@endpush
@endsection