{% extends "admin_base.html" %}
{% import "macros/modal.html" as modal %}
{% import "macros/empty_state.html" as empty %}

{% block page_title %}Cart Scan{% endblock %}

{% block admin_content %}
<main class="mx-auto w-full max-w-7xl space-y-6 p-4 sm:p-6" data-plugin="cart-scan">
    <header class="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
        <div>
            <p class="text-sm font-semibold text-brand">Sales tools</p>
            <h1 class="text-2xl font-bold text-foreground sm:text-3xl">Cart Scan</h1>
            <p class="mt-1 text-sm text-muted">Scan products, confirm payment, and create a completed staff sale.</p>
        </div>
        <p id="checkout-status" class="text-sm text-muted" role="status" aria-live="polite">Ready for checkout.</p>
    </header>

    <div class="grid gap-6 lg:grid-cols-[minmax(0,1fr)_21rem]">
        <section class="min-w-0 space-y-5">
            <section class="rounded-xl border border-divider bg-surface p-4 shadow-sm sm:p-5" aria-labelledby="scanner-heading">
                <div class="mb-3 flex flex-wrap items-center justify-between gap-3">
                    <div><h2 id="scanner-heading" class="text-lg font-semibold text-foreground">Scan products</h2><p class="text-sm text-muted">Use your camera or enter a barcode below.</p></div>
                    <button class="blocks-button blocks-button-secondary" type="button" id="toggle-scanner" aria-pressed="false">Start camera</button>
                </div>
                <div id="scanner-viewport" class="mx-auto min-h-40 w-full max-w-xl overflow-hidden rounded-lg bg-neutral-950" aria-label="Camera barcode scanner"></div>
                <p class="mt-3 text-sm text-muted" id="scan-status" role="status" aria-live="polite">Camera is off.</p>
                <form id="manual-scan-form" class="mt-4 flex flex-col gap-2 sm:flex-row">
                    <label class="sr-only" for="manual-barcode">Barcode</label>
                    <input class="blocks-input min-w-0 flex-1" type="text" id="manual-barcode" placeholder="Enter barcode" autocomplete="off" inputmode="text">
                    <button type="submit" class="blocks-button blocks-button-primary">Add product</button>
                </form>
            </section>

            <section class="rounded-xl border border-divider bg-surface p-4 shadow-sm sm:p-5" aria-labelledby="customer-heading">
                <div class="mb-4"><h2 id="customer-heading" class="text-lg font-semibold text-foreground">Customer</h2><p class="text-sm text-muted">Attach a member account or leave this as a walk-in sale.</p></div>
                <div class="flex gap-2" role="group" aria-label="Customer type">
                    <button type="button" class="blocks-button blocks-button-secondary toggle-btn" data-type="walk-in" aria-pressed="true">Walk-in</button>
                    <button type="button" class="blocks-button blocks-button-secondary toggle-btn" data-type="member" aria-pressed="false">Member</button>
                </div>
                <div id="member-lookup" class="mt-4 hidden space-y-3">
                    <div class="flex flex-col gap-2 sm:flex-row">
                        <label class="sr-only" for="customer-phone">Member phone number</label>
                        <input class="blocks-input min-w-0 flex-1" type="tel" id="customer-phone" placeholder="Member phone number" autocomplete="tel">
                        <button class="blocks-button blocks-button-secondary" type="button" id="lookup-customer-btn">Find member</button>
                    </div>
                    <p id="customer-info" class="hidden rounded-lg border border-divider bg-canvas p-3 text-sm text-foreground" role="status" aria-live="polite"><span class="customer-name"></span></p>
                </div>
                <div class="mt-4">
                    <label class="mb-1 block text-sm font-medium text-foreground" for="receipt-email">Receipt email <span class="text-muted">(optional)</span></label>
                    <input class="blocks-input w-full" type="email" id="receipt-email" placeholder="name@example.com" autocomplete="email">
                    <p class="mt-1 text-xs text-muted">A receipt is sent when an email address is provided.</p>
                </div>
            </section>

            <section class="rounded-xl border border-divider bg-surface p-4 shadow-sm sm:p-5" aria-labelledby="cart-heading">
                <div class="mb-4 flex items-center justify-between gap-3">
                    <div><h2 id="cart-heading" class="text-lg font-semibold text-foreground">Current cart</h2><p class="text-sm text-muted">Prices are confirmed from the active catalog during checkout.</p></div>
                    <span class="rounded-full bg-canvas px-3 py-1 text-xs font-semibold text-foreground" id="total-products">0 products</span>
                </div>
                <div id="cart-empty-state">{{ empty::empty_state(icon="fas fa-shopping-basket", title="Cart is empty", description="Scan a product or enter its barcode to get started.") }}</div>
                <div id="cart-list" class="divide-y divide-subtle" aria-live="polite"></div>
            </section>
        </section>

        <aside class="h-fit rounded-xl border border-divider bg-surface p-4 shadow-sm sm:p-5 lg:sticky lg:top-24" aria-labelledby="summary-heading">
            <h2 id="summary-heading" class="text-lg font-semibold text-foreground">Order summary</h2>
            <div class="mt-4 flex items-center justify-between border-b border-divider pb-4 text-sm text-muted"><span>Items</span><strong id="total-items" class="text-foreground">0</strong></div>
            <div class="flex items-center justify-between py-4"><span class="font-semibold text-foreground">Total</span><strong class="text-2xl font-bold text-brand"><span>{{ settings.currency_symbol }}</span><span id="cart-total">0.00</span></strong></div>
            <fieldset class="mt-2">
                <legend class="mb-2 text-sm font-medium text-foreground">Payment collected</legend>
                <div class="grid grid-cols-2 gap-2">
                    <label class="flex cursor-pointer items-center gap-2 rounded-lg border border-divider p-3 text-sm text-foreground has-[:checked]:border-brand has-[:checked]:bg-canvas"><input type="radio" name="payment_method" value="UPI" checked> UPI</label>
                    <label class="flex cursor-pointer items-center gap-2 rounded-lg border border-divider p-3 text-sm text-foreground has-[:checked]:border-brand has-[:checked]:bg-canvas"><input type="radio" name="payment_method" value="Card"> Card</label>
                </div>
            </fieldset>
            <button class="blocks-button blocks-button-primary mt-5 w-full" id="checkout-btn" type="button" disabled>Complete checkout</button>
            <p class="mt-3 text-xs leading-5 text-muted">Completing checkout records this sale as paid and fulfilled. Confirm payment with the customer first.</p>
        </aside>
    </div>
</main>

{{ modal::modal(id="success-modal", title="Order completed", body_html='<p class="text-sm text-muted">Order <strong id="success-order-id" class="text-foreground"></strong> was created.</p><p id="receipt-status" class="mt-2 text-sm text-muted" role="status"></p>', footer_html='<button class="blocks-button blocks-button-primary" id="new-scan-btn" type="button">Start next sale</button>') }}
{% endblock %}

{% block scripts %}
<div id="plugin-config" hidden data-currency="{{ settings.currency_symbol }}" data-continuous="{{ plugin_settings.continuous_scanning }}" data-require-email="{{ plugin_settings.require_email_receipt }}"></div>
<script src="/static/js/html5-qrcode.min.js"></script>
<script src="/plugins/cart-scan/assets/js/cart-scan.js"></script>
{% endblock %}