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

{% block page_title %}Inventory{% endblock %}

{% block admin_content %}
<main id="inv-container" class="blocks-workspace mx-auto w-full max-w-7xl px-4 py-6 md:px-6" data-plugin="inventory" aria-label="Inventory management">
    {{ ui::notice() }}
    <section class="mb-6 grid gap-4 sm:grid-cols-2 xl:grid-cols-4" aria-label="Inventory summary">
        <article class="flex min-w-0 items-center gap-4 rounded-xl border border-divider bg-surface p-5">
            <span class="grid size-12 shrink-0 place-items-center rounded-xl bg-brand/10 text-xl text-brand" aria-hidden="true"><i class="fas fa-cube"></i></span>
            <div><p class="m-0 text-sm text-muted">Stock items</p><p class="m-0 mt-1 text-2xl font-bold text-foreground" id="statTotal">0</p></div>
        </article>
        <article class="flex min-w-0 items-center gap-4 rounded-xl border border-divider bg-surface p-5">
            <span class="grid size-12 shrink-0 place-items-center rounded-xl bg-success/10 text-xl text-success" aria-hidden="true"><i class="fas fa-check-circle"></i></span>
            <div><p class="m-0 text-sm text-muted">Tracked items</p><p class="m-0 mt-1 text-2xl font-bold text-foreground" id="statTracked">0</p></div>
        </article>
        <article class="flex min-w-0 items-center gap-4 rounded-xl border border-divider bg-surface p-5">
            <span class="grid size-12 shrink-0 place-items-center rounded-xl bg-warning/10 text-xl text-warning" aria-hidden="true"><i class="fas fa-exclamation-triangle"></i></span>
            <div><p class="m-0 text-sm text-muted">Low stock</p><p class="m-0 mt-1 text-2xl font-bold text-foreground" id="statLow">0</p></div>
        </article>
        <article class="flex min-w-0 items-center gap-4 rounded-xl border border-divider bg-surface p-5">
            <span class="grid size-12 shrink-0 place-items-center rounded-xl bg-danger/10 text-xl text-danger" aria-hidden="true"><i class="fas fa-times-circle"></i></span>
            <div><p class="m-0 text-sm text-muted">Out of stock</p><p class="m-0 mt-1 text-2xl font-bold text-foreground" id="statOut">0</p></div>
        </article>
    </section>

    {{ crud::shell_open(config_url="/plugins/inventory/assets/admin/inventory_list.json", mount_id="inventory-list", custom_mount=true) }}

    <div class="mb-4 flex flex-col gap-3 rounded-xl border border-divider bg-surface p-4 sm:flex-row sm:items-center sm:justify-between" data-crud-toolbar-extra data-crud-toolbar-placement="below">
        <div class="min-w-0 flex-1">
            <label class="sr-only" for="invSearch">Search products or locations</label>
            <input type="search" id="invSearch" class="blocks-control blocks-control--search w-full" placeholder="Search products or locations">
        </div>
        <nav class="blocks-filter-tabs max-w-full overflow-x-auto" aria-label="Filter inventory">
            <button type="button" class="blocks-filter-tab active" data-filter="all" aria-pressed="true">All</button>
            <button type="button" class="blocks-filter-tab" data-filter="low" aria-pressed="false">Low stock</button>
            <button type="button" class="blocks-filter-tab" data-filter="out" aria-pressed="false">Out of stock</button>
            <button type="button" class="blocks-filter-tab" data-filter="untracked" aria-pressed="false">Not counted</button>
        </nav>
    </div>

    <div class="blocks-workspace-table" tabindex="0" role="region" aria-label="Inventory records; scroll horizontally if needed">
        <table class="w-full">
            <thead></thead>
            <tbody id="invTableBody">
                <tr><td colspan="9" class="crud-empty-state text-center">Loading stock…</td></tr>
            </tbody>
        </table>
    </div>

    {{ crud::shell_close() }}
</main>

<div id="invModal" class="crud-modal" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
    <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="modalTitle" class="m-0 text-xl font-semibold text-foreground">Add an item to stock</h2><p class="mb-0 mt-1 text-sm text-muted">Enter how much you have now. Later, use stock history to see what came in or went out.</p></div>
            <button type="button" class="blocks-icon-button close-btn" aria-label="Close inventory editor">×</button>
        </header>
        <div class="modal-body grid gap-4 sm:grid-cols-2">
            <div class="sm:col-span-2">{{ ui::notice() }}</div>
            <input type="hidden" id="invRecordId">
            <div class="blocks-workspace-field sm:col-span-2">
                <label for="invProductId">What item are you tracking?</label>
                <select id="invProductId" class="blocks-control blocks-control--select" required>
                    <option value="">Choose an item</option>
                </select>
            </div>
            <div class="blocks-workspace-field sm:col-span-2" id="invVariantWrap" hidden>
                <label for="invVariantId">Which size or option?</label>
                <select id="invVariantId" class="blocks-control blocks-control--select">
                    <option value="0">The item as a whole</option>
                </select>
            </div>
            <div class="blocks-workspace-field">
                <label for="invUnitLabel">What unit do you count it in?</label>
                <input type="text" id="invUnitLabel" class="blocks-control" maxlength="32" placeholder="For example, pieces, kg, or bottles" required>
                <p class="m-0 text-sm text-muted">Use the same unit for every stock change to this item.</p>
            </div>
            <div class="blocks-workspace-field">
                <label for="invQtyTotal">How much do you have in total?</label>
                <input type="number" id="invQtyTotal" class="blocks-control" value="0" min="0" step="0.001">
                <p id="invQtyHelp" class="m-0 text-sm text-muted">Count everything physically in the store or kitchen. This becomes the starting quantity.</p>
            </div>
            <div class="blocks-workspace-field">
                <label for="invQtyAvailable">How much can you sell or use?</label>
                <input type="number" id="invQtyAvailable" class="blocks-control" value="0" min="0" step="0.001">
                <p id="invAvailableHelp" class="m-0 text-sm text-muted">This may be lower when some stock is set aside for an order.</p>
            </div>
            <div class="blocks-workspace-field">
                <label for="invThreshold">Show a low-stock warning below</label>
                <input type="number" id="invThreshold" class="blocks-control" value="5" min="0" step="0.001">
            </div>
            <div class="blocks-workspace-field">
                <label for="invLocation">Where do you keep it? <span class="font-normal text-muted">(optional)</span></label>
                <input type="text" id="invLocation" class="blocks-control" maxlength="160" placeholder="For example, kitchen shelf or back room">
            </div>
            <label class="flex min-h-11 items-center gap-3 rounded-lg border border-divider p-3 sm:col-span-2">
                <input type="checkbox" id="invIsTracked" checked>
                <span><span class="block font-semibold text-foreground">Track stock for this item</span><span class="block text-sm text-muted">Turn off when stock should not limit sales.</span></span>
            </label>
            <section id="invPackSetup" class="sm:col-span-2 rounded-xl border border-divider p-4" hidden aria-label="Purchase pack sizes">
                <h3 class="m-0 text-base font-semibold">Buying this item in packs?</h3>
                <p class="mt-1 text-sm text-muted">Tell Blocks how many counted units are in one pack. For example, 1 case = 12 bottles.</p>
                <p id="invKnownPacks" class="text-sm text-muted"></p>
                <div class="grid gap-3 sm:grid-cols-2">
                    <div class="blocks-workspace-field"><label for="invPackLabel">Pack name</label><input id="invPackLabel" class="blocks-control" maxlength="32" placeholder="For example, case"></div>
                    <div class="blocks-workspace-field"><label for="invPackFactor">Counted units in one pack</label><input id="invPackFactor" class="blocks-control" type="number" min="0.001" max="1000000" step="0.001" inputmode="decimal" placeholder="For example, 12"></div>
                </div>
                <button type="button" id="invSavePack" class="blocks-button blocks-button-secondary mt-3">Save pack size</button>
            </section>
        </div>
        <footer class="modal-footer flex flex-wrap justify-end gap-3">
            <button type="button" class="blocks-button blocks-button-secondary close-modal-btn">Cancel</button>
            <button type="button" class="blocks-button blocks-button-primary" id="invSaveBtn">Save</button>
        </footer>
    </section>
</div>

<div id="invHistoryModal" class="crud-modal" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="invHistoryTitle">
    <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="invHistoryTitle" class="m-0 text-xl font-semibold text-foreground">Stock history</h2>
                <p id="invHistorySubtitle" class="mb-0 mt-1 text-sm text-muted">Every receipt, sale and stock correction for this item.</p>
            </div>
            <button type="button" class="blocks-icon-button close-history-btn" aria-label="Close stock history">×</button>
        </header>
        <div class="modal-body">
            <div class="blocks-workspace-table" tabindex="0" role="region" aria-label="Stock history; scroll horizontally if needed">
                <table class="w-full">
                    <thead><tr><th scope="col">When</th><th scope="col">What happened</th><th scope="col">Change</th><th scope="col">Note</th></tr></thead>
                    <tbody id="invHistoryBody"><tr><td colspan="4" class="crud-empty-state text-center">Loading stock history…</td></tr></tbody>
                </table>
            </div>
            <div class="mt-3 flex justify-center"><button type="button" id="invHistoryMore" class="blocks-button blocks-button-secondary" hidden>Load older changes</button></div>
        </div>
        <footer class="modal-footer flex justify-end">
            <button type="button" class="blocks-button blocks-button-primary" id="recordStockChange"><i class="fas fa-plus-minus" aria-hidden="true"></i> Record a stock change</button>
            <button type="button" class="blocks-button blocks-button-secondary close-history-btn">Done</button>
        </footer>
    </section>
</div>

<div id="invMovementModal" class="crud-modal" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="invMovementTitle">
    <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="invMovementTitle" class="m-0 text-xl font-semibold text-foreground">Record a stock change</h2><p id="invMovementItem" class="mb-0 mt-1 text-sm text-muted"></p></div>
            <button type="button" class="blocks-icon-button" data-close-movement aria-label="Close stock change">×</button>
        </header>
        <div class="modal-body grid gap-4">
            <div class="blocks-workspace-field"><label for="invMovementType">What happened?</label><select id="invMovementType" class="blocks-control blocks-control--select"><option value="return">Customer returned an item (adds stock)</option><option value="waste">Food or stock was wasted (removes stock)</option><option value="breakage">Item was broken or damaged (removes stock)</option><option value="stock_count">Stock count correction</option><option value="manual_adjustment">Other stock correction</option></select></div>
            <div class="blocks-workspace-field" id="invMovementDirectionWrap" hidden><label for="invMovementDirection">Stock change</label><select id="invMovementDirection" class="blocks-control blocks-control--select"><option value="remove">Remove from stock</option><option value="add">Add to stock</option></select></div>
            <div class="blocks-workspace-field"><label for="invMovementQuantity"><span id="invMovementQuantityLabel">How many</span> <span id="invMovementUnit">items</span>?</label><input id="invMovementQuantity" class="blocks-control" type="number" min="0" step="0.001" inputmode="decimal" placeholder="0"><p id="invMovementQuantityHelp" class="m-0 text-sm text-muted"></p></div>
            <div class="blocks-workspace-field"><label for="invMovementReason">Short note</label><input id="invMovementReason" class="blocks-control" maxlength="500" required placeholder="For example, damaged during delivery"><p class="m-0 text-sm text-muted">This note appears in stock history.</p></div>
        </div>
        <footer class="modal-footer flex justify-end gap-3"><button type="button" class="blocks-button blocks-button-secondary" data-close-movement>Cancel</button><button type="button" class="blocks-button blocks-button-primary" id="saveStockChange">Save stock change</button></footer>
    </section>
</div>
{% endblock %}

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