@extends('layouts.adminlte')

@section('title', 'PURCHASE ORDER PROJECT')
@section('page_title', 'PURCHASE ORDER PROJECT')

@push('styles')
    <link rel="stylesheet" href="{{ asset('vendor/datatables/css/dataTables.bootstrap5.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('vendor/datatables/css/responsive.bootstrap5.min.css') }}" />
@endpush

@section('content')
    <div class="card mb-3">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title m-0">Purchase Order (Realisasi RAB)</h3>
            <div class="d-flex gap-2">
                <a href="{{ route('purchase_order_jasa.page') }}" class="btn btn-outline-secondary btn-sm">
                    <i class="fas fa-file-invoice me-1"></i>PO Jasa
                </a>
                <a href="{{ route('master_project.rab.page') }}" class="btn btn-outline-secondary btn-sm">
                    <i class="fas fa-list-check me-1"></i>Halaman RAB
                </a>
                <a href="{{ route('master_project.material_requests.page') }}" class="btn btn-outline-dark btn-sm">
                    <i class="fas fa-clipboard-list me-1"></i>Permintaan Barang
                </a>
                <a href="{{ route('master_project.warehouse_receipts.page') }}" class="btn btn-outline-secondary btn-sm">
                    <i class="fas fa-truck-ramp-box me-1"></i>Penerimaan Gudang
                </a>
                <a href="{{ route('master_project.warehouse_stock.page') }}" class="btn btn-outline-secondary btn-sm">
                    <i class="fas fa-boxes-stacked me-1"></i>Stok Gudang
                </a>
                <button class="btn btn-primary btn-sm" id="btnAddPO">
                    <i class="fas fa-plus me-1"></i>Tambah PO
                </button>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="poTable" class="table table-striped table-hover align-middle w-100">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>PO Number</th>
                        <th>Project</th>
                        <th>Vendor</th>
                        <th>Tanggal</th>
                        <th>Status</th>
                        <th>Pembayaran</th>
                        <th>Delivery</th>
                        <th>Total</th>
                        <th>Actions</th>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h3 class="card-title m-0">Rincian Pengeluaran Project (dari PO terealisasi)</h3>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="expTable" class="table table-bordered align-middle w-100">
                    <thead>
                    <tr>
                        <th>ID Project</th>
                        <th>Project</th>
                        <th>Budget RAB</th>
                        <th>PO Draft</th>
                        <th>PO Realisasi (Approved/Closed)</th>
                        <th>Sisa Budget</th>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="poModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="poModalTitle">Tambah PO</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="poForm">
                    <div class="modal-body">
                        <input type="hidden" id="poId" />
                        <div class="row g-3">
                            <div class="col-md-3">
                                <label class="form-label">PO Number</label>
                                <input type="text" class="form-control" id="poNumber" maxlength="80" required />
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Project</label>
                                <select class="form-select" id="poProjectId" required></select>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Vendor</label>
                                <select class="form-select" id="poVendorId">
                                    <option value="">- Tanpa Vendor -</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Tanggal</label>
                                <input type="date" class="form-control" id="poDate" />
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Status</label>
                                <select class="form-select" id="poStatus">
                                    <option value="draft">Draft</option>
                                    <option value="approved">Approved</option>
                                    <option value="closed">Closed</option>
                                    <option value="cancelled">Cancelled</option>
                                </select>
                            </div>
                            <div class="col-md-9">
                                <label class="form-label">Notes</label>
                                <input type="text" class="form-control" id="poNotes" />
                            </div>
                        </div>

                        <hr />
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <h6 class="m-0">Item PO (ambil dari item RAB project)</h6>
                            <button type="button" class="btn btn-outline-primary btn-sm" id="btnAddPOItem">Tambah Item</button>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-sm table-bordered align-middle" id="poItemsTable">
                                <thead>
                                <tr>
                                    <th style="min-width:260px">RAB Item</th>
                                    <th style="min-width:120px">Qty</th>
                                    <th style="min-width:160px">Harga Satuan</th>
                                    <th style="min-width:180px">Subtotal</th>
                                    <th>Notes</th>
                                    <th style="width:80px">#</th>
                                </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="poPaymentModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Set Pembayaran PO</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="poPaymentForm">
                    <div class="modal-body">
                        <input type="hidden" id="payPoId" />
                        <div class="mb-2">
                            <label class="form-label">PO Number</label>
                            <input type="text" class="form-control" id="payPoNumber" readonly />
                        </div>
                        <div class="mb-2">
                            <label class="form-label">Total Amount</label>
                            <input type="text" class="form-control" id="payTotalAmount" readonly />
                        </div>
                        <div class="row g-2">
                            <div class="col-md-6">
                                <label class="form-label">Payment Status</label>
                                <select class="form-select" id="payStatus" required>
                                    <option value="unpaid">Unpaid</option>
                                    <option value="partial">Partial</option>
                                    <option value="paid">Paid</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Paid Amount</label>
                                <input type="number" min="0" step="0.01" class="form-control" id="payAmount" />
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Paid At</label>
                                <input type="datetime-local" class="form-control" id="payAt" />
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Payment Ref</label>
                                <input type="text" class="form-control" id="payRef" maxlength="120" placeholder="No transfer / voucher / memo" />
                            </div>
                        </div>
                        <div class="mt-2">
                            <label class="form-label">Notes</label>
                            <textarea class="form-control" id="payNotes" rows="3"></textarea>
                        </div>
                        <div class="small text-muted mt-2">
                            Catatan: ini tracking pembayaran sederhana. Jika status <code>paid</code> dan Paid Amount kosong, sistem isi otomatis = Total.
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-success">Simpan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('vendor/datatables/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/dataTables.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/responsive.bootstrap5.min.js') }}"></script>
    <script>
        $(function () {
            const prefillProjectId = Number(@json($prefillProjectId ?? 0));
            const prefillRabItemIds = (@json($prefillRabItemIds ?? []) || [])
                .map((id) => Number(id || 0))
                .filter((id) => id > 0);
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
            if (csrfToken) $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': csrfToken } });

            const modal = new bootstrap.Modal(document.getElementById('poModal'));
            const paymentModal = new bootstrap.Modal(document.getElementById('poPaymentModal'));
            const poTable = $('#poTable').DataTable({
                responsive: true,
                data: [],
                columns: [
                    { data: 'id' },
                    { data: 'po_number' },
                    { data: null, render: (r) => `${r.project_code || ''} - ${r.project_name || ''}` },
                    { data: null, render: (r) => r.vendor_code ? `${r.vendor_code} - ${r.vendor_name || ''}` : '-' },
                    { data: 'po_date', render: (v) => v || '-' },
                    { data: 'status', render: (v) => {
                        const map = {
                            draft: ['Draft', 'secondary'],
                            approved: ['Approved', 'success'],
                            closed: ['Closed', 'dark'],
                            cancelled: ['Cancelled', 'danger']
                        };
                        const row = map[v] || [v || '-', 'secondary'];
                        return `<span class="badge text-bg-${row[1]}">${row[0]}</span>`;
                    }},
                    { data: null, render: (r) => {
                        const s = (r.payment_status || 'unpaid').toString();
                        const badge = s === 'paid'
                            ? ['Paid', 'success']
                            : s === 'partial'
                                ? ['Partial', 'warning']
                                : ['Unpaid', 'secondary'];
                        const amt = Number(r.paid_amount || 0).toLocaleString('id-ID');
                        return `<span class="badge text-bg-${badge[1]}">${badge[0]}</span><div class="small text-muted mt-1">Paid: ${amt}</div>`;
                    }},
                    { data: null, render: (r) => {
                        const status = (r.delivery_status || 'pending').toString();
                        const badge = status === 'received'
                            ? ['Received', 'success']
                            : status === 'partial'
                                ? ['Partial', 'warning']
                                : ['Pending', 'secondary'];
                        return `<span class="badge text-bg-${badge[1]}">${badge[0]}</span><div class="small text-muted mt-1">${Number(r.delivery_progress_percent || 0).toLocaleString('id-ID')}%</div>`;
                    }},
                    { data: 'total_amount', render: (v) => Number(v || 0).toLocaleString('id-ID') },
                    {
                        data: null, orderable: false, render: (d, t, r) => {
                            const locked = (r.delivery_status || 'pending') !== 'pending';
                            return `
                                <button class="btn btn-sm btn-outline-dark btn-summary" data-id="${r.id}">Ringkasan</button>
                                <button class="btn btn-sm btn-outline-primary btn-edit" data-id="${r.id}" ${locked ? 'disabled' : ''}>Edit</button>
                                <button class="btn btn-sm btn-outline-success btn-payment" data-id="${r.id}">Payment</button>
                                <a href="{{ route('master_project.warehouse_receipts.page') }}" class="btn btn-sm btn-outline-success">Terima Gudang</a>
                                <button class="btn btn-sm btn-outline-danger btn-delete" data-id="${r.id}" ${locked ? 'disabled' : ''}>Delete</button>
                            `;
                        }
                    }
                ]
            });

            const expTable = $('#expTable').DataTable({
                paging: false,
                searching: false,
                info: false,
                data: [],
                columns: [
                    { data: 'project_id' },
                    { data: null, render: (r) => `${r.project_code || ''} - ${r.project_name || ''}` },
                    { data: 'rab_budget', render: (v) => Number(v || 0).toLocaleString('id-ID') },
                    { data: 'po_draft', render: (v) => Number(v || 0).toLocaleString('id-ID') },
                    { data: 'po_realized', render: (v) => Number(v || 0).toLocaleString('id-ID') },
                    { data: 'remaining_budget', render: (v) => Number(v || 0).toLocaleString('id-ID') },
                ]
            });

            let poRows = [];
            let projects = [];
            let vendors = [];
            let rabItems = [];

            const fillProjects = (selected = '') => {
                $('#poProjectId').html(projects.map((p) => `<option value="${p.id}">${p.code} - ${p.name}</option>`).join(''));
                $('#poProjectId').val(selected || projects[0]?.id || '');
            };
            const fillVendors = (selected = '') => {
                const options = ['<option value="">- Tanpa Vendor -</option>'];
                vendors.forEach((v) => options.push(`<option value="${v.id}">${v.code} - ${v.name}</option>`));
                $('#poVendorId').html(options.join(''));
                $('#poVendorId').val(selected || '');
            };

            const filterRabByProject = (projectId) =>
                rabItems.filter((r) => Number(r.project_id) === Number(projectId));

            const buildRabOptions = (projectId, selectedId = '') => {
                const rows = filterRabByProject(projectId);
                const options = ['<option value="">- Pilih RAB Item -</option>'];
                rows.forEach((r) => options.push(`<option value="${r.id}">${r.item_code} - ${r.item_name}</option>`));
                return options.map((x) => x).join('');
            };

            const recalcRow = ($tr) => {
                const qty = Number($tr.find('.po-item-qty').val() || 0);
                const price = Number($tr.find('.po-item-price').val() || 0);
                $tr.find('.po-item-subtotal').val((qty * price).toFixed(2));
            };

            const openPaymentModal = (row) => {
                if (!row) return;
                $('#payPoId').val(row.id);
                $('#payPoNumber').val(row.po_number || '');
                $('#payTotalAmount').val(Number(row.total_amount || 0).toLocaleString('id-ID'));
                $('#payStatus').val((row.payment_status || 'unpaid').toString());
                $('#payAmount').val(Number(row.paid_amount || 0));
                $('#payAt').val(row.paid_at ? String(row.paid_at).replace(' ', 'T').slice(0, 16) : '');
                $('#payRef').val(row.payment_ref || '');
                $('#payNotes').val(row.payment_notes || '');
                paymentModal.show();
            };

            const addItemRow = (item = null) => {
                const projectId = $('#poProjectId').val();
                const html = `
                    <tr>
                        <td><select class="form-select form-select-sm po-item-rab">${buildRabOptions(projectId, item?.rab_item_id || '')}</select></td>
                        <td><input type="number" class="form-control form-control-sm po-item-qty" min="0.001" step="0.001" value="${item?.qty ?? 1}" /></td>
                        <td><input type="number" class="form-control form-control-sm po-item-price" min="0" step="0.01" value="${item?.unit_price ?? 0}" /></td>
                        <td><input type="text" class="form-control form-control-sm po-item-subtotal" value="${item?.total_price ?? 0}" readonly /></td>
                        <td><input type="text" class="form-control form-control-sm po-item-notes" value="${item?.notes ?? ''}" /></td>
                        <td><button type="button" class="btn btn-sm btn-outline-danger btn-remove-item">Hapus</button></td>
                    </tr>
                `;
                $('#poItemsTable tbody').append(html);
                recalcRow($('#poItemsTable tbody tr').last());
            };

            const refreshRabSelects = () => {
                const projectId = $('#poProjectId').val();
                $('#poItemsTable .po-item-rab').each(function () {
                    const selected = $(this).val();
                    $(this).html(buildRabOptions(projectId, selected));
                    $(this).val(selected || '');
                });
            };

            const collectItems = () => {
                return $('#poItemsTable tbody tr').map(function () {
                    const rab_item_id = Number($(this).find('.po-item-rab').val() || 0);
                    const qty = Number($(this).find('.po-item-qty').val() || 0);
                    const unit_price = Number($(this).find('.po-item-price').val() || 0);
                    const notes = ($(this).find('.po-item-notes').val() || '').toString().trim();
                    return { rab_item_id, qty, unit_price, notes };
                }).get().filter((x) => x.rab_item_id > 0 && x.qty > 0);
            };

            const loadRefs = () => $.when(
                $.getJSON('{{ route('master_project.projects.data') }}'),
                $.getJSON('{{ route('master_vendor.data') }}'),
                $.getJSON('{{ route('master_project.rab.data') }}')
            ).done((p, v, r) => {
                projects = p[0]?.data || [];
                vendors = v[0]?.data || [];
                rabItems = r[0]?.data || [];
            });

            const loadPO = () => $.getJSON('{{ route('master_project.po.data') }}')
                .done((resp) => {
                    poRows = resp.data || [];
                    poTable.clear().rows.add(poRows).draw();
                });

            const escapeHtml = (v) => {
                return (v ?? '').toString().replace(/[&<>"']/g, (c) => ({
                    '&': '&amp;',
                    '<': '&lt;',
                    '>': '&gt;',
                    '"': '&quot;',
                    "'": '&#39;',
                }[c]));
            };

            const deliveryStatusLabel = (orderedBase, receivedBase) => {
                const o = Number(orderedBase || 0);
                const r = Number(receivedBase || 0);
                if (r <= 0.000001) return ['Belum diterima', 'secondary'];
                if (r + 0.000001 < o) return ['Parsial', 'warning'];
                return ['Selesai', 'success'];
            };

            const showPoSummary = (row) => {
                if (!row) return;
                const items = Array.isArray(row.items) ? row.items : [];
                const header = `
                    <div class="mb-2">
                        <div><strong>PO:</strong> ${escapeHtml(row.po_number || '-')}</div>
                        <div><strong>Project:</strong> ${escapeHtml(`${row.project_code || ''} - ${row.project_name || ''}`.trim() || '-')}</div>
                        <div><strong>Vendor:</strong> ${escapeHtml(row.vendor_name || '-')}</div>
                    </div>
                `;

                const rowsHtml = items.map((it) => {
                    const orderedBase = Number(it.ordered_qty_base || 0);
                    const receivedBase = Number(it.received_qty_base || 0);
                    const remainingBase = Math.max(0, orderedBase - receivedBase);
                    const badge = deliveryStatusLabel(orderedBase, receivedBase);
                    const qtyLabel = `${Number(it.qty || 0).toLocaleString('id-ID')} ${escapeHtml(it.satuan_name || '')}`.trim();
                    const baseUnit = (it.base_satuan_name || '').toString().trim();
                    const baseSuffix = baseUnit ? ` ${escapeHtml(baseUnit)}` : '';
                    return `
                        <tr>
                            <td>
                                <div><strong>${escapeHtml(it.rab_item_code || '')}</strong></div>
                                <div class="text-muted small">${escapeHtml(it.rab_item_name || '')}</div>
                            </td>
                            <td class="text-end">${escapeHtml(qtyLabel || '-')}</td>
                            <td class="text-end">${orderedBase.toLocaleString('id-ID')}${baseSuffix}</td>
                            <td class="text-end">${receivedBase.toLocaleString('id-ID')}${baseSuffix}</td>
                            <td class="text-end">${remainingBase.toLocaleString('id-ID')}${baseSuffix}</td>
                            <td class="text-center"><span class="badge text-bg-${badge[1]}">${badge[0]}</span></td>
                        </tr>
                    `;
                }).join('');

                const tableHtml = `
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered align-middle mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>Item</th>
                                    <th class="text-end">Qty PO</th>
                                    <th class="text-end">Ordered (base)</th>
                                    <th class="text-end">Received (base)</th>
                                    <th class="text-end">Remaining (base)</th>
                                    <th class="text-center">Status</th>
                                </tr>
                            </thead>
                            <tbody>${rowsHtml || '<tr><td colspan="6" class="text-center text-muted">Tidak ada item</td></tr>'}</tbody>
                        </table>
                    </div>
                `;

                Swal.fire({
                    title: 'Ringkasan Penerimaan PO',
                    html: header + tableHtml,
                    width: 900,
                    showConfirmButton: true,
                    confirmButtonText: 'Tutup',
                });
            };

            const loadExp = () => $.getJSON('{{ route('master_project.expenditures.data') }}')
                .done((resp) => {
                    expTable.clear().rows.add(resp.data || []).draw();
                });

            const generatePoNumber = (projectCode = 'PRJ') => {
                const now = new Date();
                const y = now.getFullYear();
                const m = String(now.getMonth() + 1).padStart(2, '0');
                const d = String(now.getDate()).padStart(2, '0');
                const hh = String(now.getHours()).padStart(2, '0');
                const mm = String(now.getMinutes()).padStart(2, '0');
                const ss = String(now.getSeconds()).padStart(2, '0');
                return `PO-${projectCode}-${y}${m}${d}${hh}${mm}${ss}`;
            };

            const openCreatePO = (projectId = '', selectedRabIds = []) => {
                $('#poModalTitle').text('Tambah PO');
                $('#poId').val('');
                fillProjects(projectId || '');
                const selectedProjectId = Number($('#poProjectId').val() || 0);
                const selectedProject = projects.find((p) => Number(p.id) === selectedProjectId);
                const projectCode = (selectedProject?.code || selectedProject?.code_project || 'PRJ').toString().replace(/\s+/g, '');
                $('#poNumber').val(generatePoNumber(projectCode));
                fillVendors('');
                $('#poDate').val('');
                $('#poStatus').val('draft');
                $('#poNotes').val('');
                $('#poItemsTable tbody').empty();

                const normalizedIds = Array.from(new Set((selectedRabIds || []).map((id) => Number(id || 0)).filter((id) => id > 0)));
                const selectedRows = filterRabByProject(selectedProjectId)
                    .filter((row) => normalizedIds.includes(Number(row.id)));

                if (selectedRows.length) {
                    selectedRows.forEach((row) => {
                        addItemRow({
                            rab_item_id: Number(row.id),
                            qty: Number(row.qty || 1),
                            unit_price: Number(row.unit_price || 0),
                            notes: (row.rincian || '').toString(),
                        });
                    });
                } else {
                    addItemRow();
                }

                modal.show();
            };

            $('#btnAddPO').on('click', function () {
                openCreatePO('', []);
            });

            $('#poTable').on('click', '.btn-summary', function () {
                const id = Number($(this).data('id') || 0);
                const row = poRows.find((r) => Number(r.id) === id);
                showPoSummary(row);
            });

            $('#poTable').on('click', '.btn-payment', function () {
                const id = Number($(this).data('id') || 0);
                const row = poRows.find((r) => Number(r.id) === id);
                openPaymentModal(row);
            });

            $('#btnAddPOItem').on('click', () => addItemRow());
            $('#poProjectId').on('change', refreshRabSelects);
            $('#poItemsTable').on('click', '.btn-remove-item', function () { $(this).closest('tr').remove(); });
            $('#poItemsTable').on('input', '.po-item-qty, .po-item-price', function () { recalcRow($(this).closest('tr')); });

            $('#poTable').on('click', '.btn-edit', function () {
                const id = Number($(this).data('id'));
                const row = poRows.find((x) => Number(x.id) === id);
                if (!row) return;

                $('#poModalTitle').text('Edit PO');
                $('#poId').val(row.id);
                $('#poNumber').val(row.po_number || '');
                fillProjects(row.project_id);
                fillVendors(row.vendor_id || '');
                $('#poDate').val(row.po_date || '');
                $('#poStatus').val(row.status || 'draft');
                $('#poNotes').val(row.notes || '');
                $('#poItemsTable tbody').empty();
                (row.items || []).forEach((it) => addItemRow(it));
                if (!(row.items || []).length) addItemRow();
                modal.show();
            });

            $('#poTable').on('click', '.btn-delete', function () {
                const id = Number($(this).data('id'));
                Swal.fire({ title: 'Delete PO?', icon: 'warning', showCancelButton: true, confirmButtonText: 'Yes' })
                    .then((r) => {
                        if (!r.isConfirmed) return;
                        $.ajax({ url: `{{ url('/master-project/purchase-orders') }}/${id}`, type: 'DELETE' })
                            .done((resp) => {
                                loadPO(); loadExp();
                                Swal.fire('Deleted', resp?.message || 'Deleted', 'success');
                            })
                            .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Delete failed', 'error'));
                    });
            });

            $('#poPaymentForm').on('submit', function (e) {
                e.preventDefault();
                const id = Number($('#payPoId').val() || 0);
                if (!id) return;

                $.ajax({
                    url: `{{ url('/purchase-order') }}/${id}/payment`,
                    type: 'POST',
                    data: {
                        payment_status: $('#payStatus').val(),
                        paid_amount: $('#payAmount').val(),
                        paid_at: $('#payAt').val() ? ($('#payAt').val().replace('T', ' ') + ':00') : '',
                        payment_ref: $('#payRef').val(),
                        payment_notes: $('#payNotes').val()
                    }
                }).done((resp) => {
                    paymentModal.hide();
                    Swal.fire('Success', resp?.message || 'Payment updated', 'success');
                    loadPO();
                }).fail((xhr) => {
                    Swal.fire('Error', xhr.responseJSON?.message || 'Failed update payment', 'error');
                });
            });

            $('#poForm').on('submit', function (e) {
                e.preventDefault();
                const id = $('#poId').val();
                const payload = {
                    project_id: $('#poProjectId').val(),
                    vendor_id: $('#poVendorId').val(),
                    po_number: ($('#poNumber').val() || '').toString().trim(),
                    po_date: $('#poDate').val(),
                    status: $('#poStatus').val(),
                    notes: ($('#poNotes').val() || '').toString().trim(),
                    items: collectItems(),
                    is_active: 1
                };
                if (!payload.project_id || !payload.po_number || !payload.items.length) {
                    Swal.fire('Warning', 'Project, PO Number, dan item wajib diisi', 'warning');
                    return;
                }
                $.ajax({
                    url: id ? `{{ url('/master-project/purchase-orders') }}/${id}` : '{{ route('master_project.po.store') }}',
                    type: id ? 'PUT' : 'POST',
                    contentType: 'application/json',
                    processData: false,
                    data: JSON.stringify(payload)
                }).done((resp) => {
                    modal.hide();
                    loadPO(); loadExp();
                    Swal.fire('Success', resp?.message || 'Saved', 'success');
                }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Save failed', 'error'));
            });

            $.when(loadRefs()).always(() => {
                loadPO();
                loadExp();
                if (prefillProjectId > 0) {
                    openCreatePO(prefillProjectId, prefillRabItemIds);
                    if (window.history && window.history.replaceState) {
                        window.history.replaceState({}, document.title, '{{ route('master_project.po.page') }}');
                    }
                }
            });
        });
    </script>
@endpush