{% extends "admin_base.html" %}
{% import "macros/workspace_ui.html" as ui %}

{% block page_title %}Purchases{% endblock %}

{% block admin_content %}
<main class="blocks-workspace mx-auto w-full max-w-7xl px-4 py-6 md:px-6" data-plugin="purchasing">
    {{ ui::notice() }}
    <header class="mb-5 flex flex-wrap items-end justify-between gap-3">
        <div><h1 class="m-0 text-2xl font-bold text-foreground">Purchases</h1><p class="mb-0 mt-1 text-muted">Save an invoice first. Stock changes only when you confirm the goods have arrived.</p></div>
        <div class="flex flex-wrap gap-2"><button type="button" id="newInvoiceReview" class="blocks-button blocks-button-secondary">Review invoice</button><button type="button" id="newReorder" class="blocks-button blocks-button-secondary"><i class="fas fa-boxes-stacked" aria-hidden="true"></i> Reorder low-stock items</button><button type="button" id="newPurchase" class="blocks-button blocks-button-primary"><i class="fas fa-plus" aria-hidden="true"></i> New purchase</button></div>
    </header>
    <section class="mb-5 rounded-xl border border-divider bg-surface p-4" aria-labelledby="invoiceIntakesTitle">
        <h2 id="invoiceIntakesTitle" class="m-0 text-lg font-semibold">Invoices to review</h2>
        <p class="mb-0 mt-1 text-sm text-muted">Attach a supplier invoice, then check the supplier, date, number and total yourself. Saving a review never changes stock.</p>
        <div id="invoiceIntakeRows" class="mt-3 space-y-2"><p class="text-muted">Loading invoice reviews…</p></div>
    </section>
    <div class="blocks-workspace-table" tabindex="0" role="region" aria-label="Purchases; scroll horizontally if needed">
        <table class="w-full"><thead><tr><th>Date</th><th>Supplier</th><th>Invoice</th><th>Items</th><th>Total</th><th>Payment</th><th>Stock</th><th>Action</th></tr></thead>
            <tbody id="purchaseRows"><tr><td colspan="8" class="crud-empty-state text-center">Loading purchases…</td></tr></tbody>
        </table>
    </div>
</main>

<div id="purchaseModal" class="crud-modal" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="purchaseTitle">
    <section class="modal-content modal-xl max-h-[92dvh] overflow-y-auto">
        <header class="modal-header flex items-center justify-between gap-4"><div><h2 id="purchaseTitle" class="m-0 text-xl font-semibold">New purchase</h2><p class="mb-0 mt-1 text-sm text-muted">Use the same unit you count this item in. Stock is not changed until you receive it.</p></div><button type="button" class="blocks-icon-button" data-close-purchase aria-label="Close">×</button></header>
        <div class="modal-body grid gap-4 sm:grid-cols-2">
            <div class="sm:col-span-2">{{ ui::notice() }}</div>
            <div class="blocks-workspace-field"><label for="supplierName">Supplier name</label><input id="supplierName" class="blocks-control" maxlength="240" list="knownSuppliers" autocomplete="organization" required><datalist id="knownSuppliers"></datalist></div>
            <div class="blocks-workspace-field"><label for="invoiceNumber">Invoice number <span class="font-normal text-muted">(optional)</span></label><input id="invoiceNumber" class="blocks-control" maxlength="120"></div>
            <div class="blocks-workspace-field"><label for="purchaseDate">Purchase date</label><input id="purchaseDate" type="date" class="blocks-control" required></div>
            <div class="blocks-workspace-field"><label for="paymentMethod">Paid by</label><select id="paymentMethod" class="blocks-control blocks-control--select"><option value="cash">Cash</option><option value="upi">UPI / Phone payment</option><option value="bank_transfer">Bank transfer</option><option value="credit">Credit from supplier</option><option value="other">Other</option></select><p id="paymentMethodHelp" class="m-0 text-sm text-muted">Choose how much you paid now. You can record the rest later.</p></div>
            <div class="blocks-workspace-field"><label for="amountPaid">Paid now</label><input id="amountPaid" class="blocks-control" type="number" min="0" step="0.01" inputmode="decimal" value="0"><p class="m-0 text-sm text-muted">Leave at zero if you will pay later.</p></div>
            <div class="blocks-workspace-field sm:col-span-2"><label for="purchaseNotes">Note <span class="font-normal text-muted">(optional)</span></label><input id="purchaseNotes" class="blocks-control" maxlength="1000"></div>
            <div class="sm:col-span-2"><div class="mb-2 flex items-center justify-between"><h3 class="m-0 text-base font-semibold">Items on this invoice</h3><button type="button" id="addPurchaseLine" class="blocks-button blocks-button-secondary blocks-button-sm">Add item</button></div>
                <div id="purchaseLines" class="space-y-3"></div>
            </div>
            <p class="m-0 text-sm text-muted sm:col-span-2">Enter the invoice quantity and cost in the unit you bought. If you bought cases but count bottles, first save the case size in Inventory, then choose it under Bought as.</p>
        </div>
        <footer class="modal-footer flex flex-wrap justify-end gap-3"><button type="button" class="blocks-button blocks-button-secondary" data-close-purchase>Cancel</button><button type="button" id="confirmPurchasePackChange" class="blocks-button blocks-button-secondary" hidden>Use new pack size</button><button type="button" id="savePurchase" class="blocks-button blocks-button-primary">Save purchase</button></footer>
    </section>
</div>

<div id="paymentModal" class="crud-modal" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="paymentTitle">
    <section class="modal-content modal-lg max-h-[90dvh] overflow-y-auto">
        <header class="modal-header flex items-center justify-between gap-4"><div><h2 id="paymentTitle" class="m-0 text-xl font-semibold">Record payment</h2><p id="paymentBalance" class="mb-0 mt-1 text-sm text-muted"></p></div><button type="button" class="blocks-icon-button" data-close-payment aria-label="Close">×</button></header>
        <div class="modal-body space-y-4">
            {{ ui::notice() }}
            <div class="blocks-workspace-table" tabindex="0" role="region" aria-label="Payments already recorded; scroll horizontally if needed"><table class="w-full"><thead><tr><th>Date</th><th>Amount</th><th>Paid by</th><th>Note</th></tr></thead><tbody id="paymentHistory"></tbody></table></div>
            <div class="grid gap-4 sm:grid-cols-2"><div class="blocks-workspace-field"><label for="newPaymentAmount">Amount paid now</label><input id="newPaymentAmount" class="blocks-control" type="number" min="0.01" step="0.01" inputmode="decimal"></div>
            <div class="blocks-workspace-field"><label for="newPaymentMethod">Paid by</label><select id="newPaymentMethod" class="blocks-control blocks-control--select"><option value="cash">Cash</option><option value="upi">UPI / Phone payment</option><option value="bank_transfer">Bank transfer</option><option value="credit">Credit from supplier</option><option value="other">Other</option></select></div>
            <div class="blocks-workspace-field sm:col-span-2"><label for="newPaymentNote">Note <span class="font-normal text-muted">(optional)</span></label><input id="newPaymentNote" class="blocks-control" maxlength="500" placeholder="For example, payment reference"></div></div>
        </div>
        <footer class="modal-footer flex justify-end gap-3"><button type="button" class="blocks-button blocks-button-secondary" data-close-payment>Cancel</button><button type="button" id="savePayment" class="blocks-button blocks-button-primary">Save payment</button></footer>
    </section>
</div>

<div id="receiptModal" class="crud-modal" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="receiptTitle">
    <section class="modal-content modal-lg max-h-[90dvh] overflow-y-auto">
        <header class="modal-header flex items-center justify-between gap-4"><div><h2 id="receiptTitle" class="m-0 text-xl font-semibold">Receive stock</h2><p class="mb-0 mt-1 text-sm text-muted">Enter how many arrived today. You can receive the rest later.</p></div><button type="button" class="blocks-icon-button" data-close-receipt aria-label="Close">×</button></header>
        <div class="modal-body">{{ ui::notice() }}<input type="hidden" id="receiptDocumentId"><div class="blocks-workspace-table" tabindex="0" role="region" aria-label="Items remaining to receive; scroll horizontally if needed"><table class="w-full"><thead><tr><th>Item</th><th>Remaining</th><th>Arrived now</th></tr></thead><tbody id="receiptLines"></tbody></table></div></div>
        <footer class="modal-footer flex justify-end gap-3"><button type="button" class="blocks-button blocks-button-secondary" data-close-receipt>Cancel</button><button type="button" id="saveReceipt" class="blocks-button blocks-button-primary">Save received stock</button></footer>
    </section>
</div>

<div id="invoiceUploadModal" class="crud-modal" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="invoiceUploadTitle">
    <section class="modal-content modal-md">
        <header class="modal-header flex items-center justify-between gap-4"><div><h2 id="invoiceUploadTitle" class="m-0 text-xl font-semibold">Add supplier invoice</h2><p class="mb-0 mt-1 text-sm text-muted">PDF or clear photo, up to 5 MB. The file stays private to this location.</p></div><button type="button" class="blocks-icon-button" data-close-invoice-upload aria-label="Close">×</button></header>
        <div class="modal-body space-y-4">{{ ui::notice() }}<div class="blocks-workspace-field"><label for="invoiceFile">Invoice file</label><input id="invoiceFile" class="blocks-control" type="file" accept="application/pdf,image/jpeg,image/png,image/webp,.pdf,.jpg,.jpeg,.png,.webp"><p class="m-0 text-sm text-muted">Blocks does not read the invoice automatically. You will check the details yourself.</p></div></div>
        <footer class="modal-footer flex justify-end gap-3"><button type="button" class="blocks-button blocks-button-secondary" data-close-invoice-upload>Cancel</button><button type="button" id="uploadInvoice" class="blocks-button blocks-button-primary">Save invoice file</button></footer>
    </section>
</div>

<div id="invoiceReviewModal" class="crud-modal" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="invoiceReviewTitle">
    <section class="modal-content modal-xl max-h-[92dvh] overflow-y-auto">
        <header class="modal-header flex items-center justify-between gap-4"><div><h2 id="invoiceReviewTitle" class="m-0 text-xl font-semibold">Check invoice details</h2><p class="mb-0 mt-1 text-sm text-muted">Read the attachment and enter the figures exactly as shown.</p></div><button type="button" class="blocks-icon-button" data-close-invoice-review aria-label="Close">×</button></header>
        <div class="modal-body grid gap-5 lg:grid-cols-2">{{ ui::notice() }}
            <div id="invoicePreview" class="min-h-72 overflow-auto rounded-lg border border-divider bg-surface p-2" aria-label="Private invoice preview"></div>
            <div class="space-y-4"><input type="hidden" id="reviewInvoiceId">
                <div class="blocks-workspace-field"><label for="reviewSupplier">Supplier name</label><input id="reviewSupplier" class="blocks-control" maxlength="240" required></div>
                <div class="blocks-workspace-field"><label for="reviewInvoiceNumber">Invoice number <span class="font-normal text-muted">(optional)</span></label><input id="reviewInvoiceNumber" class="blocks-control" maxlength="120"></div>
                <div class="blocks-workspace-field"><label for="reviewInvoiceDate">Invoice date</label><input id="reviewInvoiceDate" class="blocks-control" type="date" required></div>
                <div class="blocks-workspace-field"><label for="reviewInvoiceTotal">Invoice total</label><input id="reviewInvoiceTotal" class="blocks-control" type="number" min="0" step="0.01" inputmode="decimal" required></div>
                <div class="blocks-workspace-field"><label for="reviewInvoiceNote">Note <span class="font-normal text-muted">(optional)</span></label><input id="reviewInvoiceNote" class="blocks-control" maxlength="1000" placeholder="For example, discount or delivery charge shown"></div>
            </div>
        </div>
        <footer class="modal-footer flex flex-wrap justify-end gap-3"><button type="button" class="blocks-button blocks-button-secondary" data-close-invoice-review>Close</button><button type="button" id="saveInvoiceReview" class="blocks-button blocks-button-secondary">Save checked details</button><button type="button" id="useInvoiceForPurchase" class="blocks-button blocks-button-primary" disabled>Prepare purchase draft</button></footer>
    </section>
</div>
{% endblock %}

{% block scripts %}<script src="/plugins/purchasing/assets/js/purchasing.js"></script>{% endblock %}