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

{% block extra_head %}
<link rel="stylesheet" href="/plugins/product-onboarding/assets/css/onboarding.css">
{% endblock %}

{% block page_title %}Product Onboarding{% endblock %}

{% block admin_content %}
<main class="mx-auto w-full max-w-5xl space-y-6" data-plugin="product-onboarding">
    {{ crud::shell_open(config_url="/plugins/product-onboarding/assets/admin/onboarding_page.json", mount_id="product-onboarding-header", custom_mount=true) }}
    {{ crud::shell_close() }}

    <section id="scanner-wrapper" hidden role="dialog" aria-modal="true" aria-labelledby="scanner-title"
        class="fixed inset-0 z-[10000] flex flex-col items-center justify-center bg-black/90 p-4 opacity-0 transition-opacity duration-300 sm:p-8">
        <div class="relative w-full max-w-2xl rounded-2xl border border-white/20 bg-black p-1.5 shadow-2xl">
            <div id="scanner-viewport" class="aspect-[4/3] w-full overflow-hidden rounded-xl bg-black"></div>
            <div aria-hidden="true" class="pointer-events-none absolute left-1/2 top-1/2 h-36 w-56 -translate-x-1/2 -translate-y-1/2 rounded-xl border-2 border-brand shadow-[0_0_24px_var(--primary)] sm:h-44 sm:w-72">
                <span class="absolute left-[10%] top-1/2 h-0.5 w-4/5 [animation:scanMotion_2.5s_ease-in-out_infinite] bg-gradient-to-r from-transparent via-brand to-transparent shadow-[0_0_16px_var(--primary)]"></span>
            </div>
        </div>
        <p id="scanner-title" class="mt-4 text-center text-sm text-white" role="status">Align the barcode inside the frame.</p>
        <button type="button" class="blocks-button blocks-button-secondary mt-5 min-h-11 border-white/30 text-white hover:bg-white/10" id="stop-scanner-btn">
            <i class="fas fa-times" aria-hidden="true"></i> Close scanner
        </button>
    </section>

    <section class="grid gap-5 rounded-2xl border border-divider bg-surface p-5 shadow-sm sm:grid-cols-[auto_1fr] sm:items-center sm:p-7">
        <div class="mx-auto flex size-14 items-center justify-center rounded-2xl bg-brand/10 text-2xl text-brand sm:mx-0" aria-hidden="true">
            <i class="fas fa-barcode"></i>
        </div>
        <div class="text-center sm:text-left">
            <h2 class="m-0 text-xl font-semibold text-foreground sm:text-2xl">Add products with less typing</h2>
            <p class="mb-0 mt-2 text-sm leading-6 text-muted">Scan an EAN or UPC barcode, review the product details, then add it to your catalog. You can also enter a barcode manually.</p>
        </div>
    </section>

    <section class="rounded-2xl border border-divider bg-surface p-5 shadow-sm sm:p-6">
        <div class="mb-4">
            <h2 class="m-0 text-lg font-semibold text-foreground">Look up a barcode</h2>
            <p class="mb-0 mt-1 text-sm text-muted">Use your camera or type the barcode from the package.</p>
        </div>
        <form id="manual-lookup-form" class="flex flex-col gap-3 sm:flex-row sm:items-end">
            <div class="w-full sm:max-w-md">
                <label class="mb-1.5 block text-sm font-medium text-foreground" for="barcode-input">Barcode number</label>
                <input type="text" inputmode="numeric" autocomplete="off" maxlength="32" pattern="[0-9]+" id="barcode-input" class="blocks-input w-full" placeholder="e.g. 8901234567890" required>
            </div>
            <button type="submit" id="lookup-submit" class="blocks-button blocks-button-secondary min-h-11 w-full sm:w-auto">
                <i class="fas fa-search" aria-hidden="true"></i> Look up product
            </button>
            <p id="lookup-status" class="m-0 text-sm text-muted sm:ml-auto" role="status" aria-live="polite"></p>
        </form>
    </section>
</main>

<div id="onboarding-modal" class="crud-modal" aria-hidden="true" data-modal-close="#close-modal,#cancel-modal">
    <section class="modal-content w-[calc(100%-2rem)] max-w-2xl overflow-y-auto rounded-2xl border border-divider bg-surface p-0 shadow-xl" role="dialog" aria-modal="true" aria-labelledby="modal-title">
        <header class="flex items-center justify-between gap-4 border-b border-divider px-5 py-4 sm:px-6">
            <div>
                <h2 id="modal-title" class="m-0 text-lg font-semibold text-foreground">Product found</h2>
                <p id="lookup-source-badge" class="mb-0 mt-1 text-sm text-muted"></p>
            </div>
            <button type="button" class="blocks-icon-button" id="close-modal" aria-label="Close product details">
                <i class="fas fa-times" aria-hidden="true"></i>
            </button>
        </header>
        <form id="onboarding-form" class="flex min-h-0 flex-1 flex-col">
            <div class="grid gap-5 overflow-y-auto p-5 sm:p-6">
                <div class="mx-auto flex size-36 items-center justify-center overflow-hidden rounded-2xl border border-divider bg-canvas sm:size-44">
                    <img id="found-product-image" src="" alt="Product preview" class="hidden size-full object-contain">
                    <span id="image-placeholder" class="text-4xl text-muted" aria-hidden="true"><i class="fas fa-camera"></i></span>
                </div>
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div class="sm:col-span-2">
                        <label class="mb-1.5 block text-sm font-medium text-foreground" for="found-product-title">Product name</label>
                        <input type="text" id="found-product-title" name="title" class="blocks-input w-full" required>
                    </div>
                    <div>
                        <label class="mb-1.5 block text-sm font-medium text-foreground" for="found-product-barcode">Barcode</label>
                        <input type="text" id="found-product-barcode" name="barcode" class="blocks-input w-full" readonly>
                    </div>
                    <div>
                        <label class="mb-1.5 block text-sm font-medium text-foreground" for="found-product-mrp">Price ({{ settings.currency_symbol | default(value='₹') }})</label>
                        <input type="number" step="0.01" min="0" id="found-product-mrp" name="mrp" class="blocks-input w-full" required>
                    </div>
                    <div class="sm:col-span-2">
                        <label class="mb-1.5 block text-sm font-medium text-foreground" for="found-product-description">Description</label>
                        <textarea id="found-product-description" name="description" rows="3" class="blocks-input w-full"></textarea>
                    </div>
                    <div>
                        <label class="mb-1.5 block text-sm font-medium text-foreground" for="found-product-brand">Brand</label>
                        <input type="text" id="found-product-brand" name="brand" class="blocks-input w-full">
                    </div>
                    <div>
                        <label class="mb-1.5 block text-sm font-medium text-foreground" for="found-product-categories">Categories</label>
                        <input type="text" id="found-product-categories" name="categories" class="blocks-input w-full" placeholder="Beverages, Snacks">
                    </div>
                    <input type="hidden" id="found-product-image-url" name="image_url">
                </div>
            </div>
            <footer class="flex flex-col-reverse gap-2 border-t border-divider bg-surface p-4 sm:flex-row sm:justify-end sm:px-6">
                <button type="button" class="blocks-button blocks-button-secondary min-h-11 w-full sm:w-auto" id="cancel-modal">Cancel</button>
                <button type="button" class="blocks-button blocks-button-secondary min-h-11 w-full sm:w-auto" id="add-and-scan-btn">Add and scan another</button>
                <button type="submit" class="blocks-button blocks-button-primary min-h-11 w-full sm:w-auto">Add to my catalog</button>
            </footer>
        </form>
    </section>
</div>
{% endblock %}

{% block scripts %}
<div id="onboarding-config" hidden data-currency-symbol="{{ settings.currency_symbol | default(value='₹') }}"></div>
<script src="/static/js/html5-qrcode.min.js"></script>
<script src="/plugins/product-onboarding/assets/js/onboarding_list.js"></script>
<script src="/plugins/product-onboarding/assets/js/onboarding.js"></script>
{% endblock %}