{% extends 'base.html.twig' %}

{% block title %}Garde-manger — Pipou{% endblock %}
{% block theme_color %}#f5f5f4{% endblock %}
{% block status_bar_style %}default{% endblock %}
{% block stylesheets %}{{ parent() }}{% endblock %}
{% block body_class %}bg-stone-100 dark:bg-stone-950{% endblock %}

{% block body %}

{% embed 'ui/index_shell.html.twig' with {
    title: 'Garde-manger',
    eyebrow: 'Inventaire',
    accent_rgb: '16,185,129',
} %}
{% block header_actions %}
            <div class="relative flex items-center">
                <svg class="absolute left-2.5 top-1/2 -translate-y-1/2 size-3.5 text-stone-400 dark:text-stone-500 pointer-events-none"
                     fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/>
                </svg>
                <input type="text" id="pantry-search-header"
                       placeholder="Rechercher…"
                       autocomplete="off" spellcheck="false"
                       class="w-[120px] pl-8 pr-2.5 py-[7px] rounded-xl bg-stone-100 dark:bg-stone-800 text-[13px] text-stone-900 dark:text-stone-100 placeholder-stone-400 dark:placeholder-stone-500 focus:outline-none focus:ring-2 focus:ring-emerald-400 dark:focus:ring-emerald-600 focus:w-[155px] transition-[width] duration-200">
            </div>
            <button type="button" data-add-item-open
                    class="flex items-center justify-center size-8 rounded-full bg-emerald-500 hover:bg-emerald-600 active:bg-emerald-700 text-white shadow-sm shadow-emerald-200 dark:shadow-emerald-900/50 transition-colors">
                <svg class="size-4" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
                </svg>
            </button>
            <a href="{{ path('front.pantry.meal.index') }}"
               class="flex items-center gap-1.5 rounded-full bg-white dark:bg-stone-800 border border-stone-200 dark:border-stone-600 shadow-sm text-stone-600 dark:text-stone-200 text-xs font-semibold px-3.5 py-2 hover:bg-stone-50 dark:hover:bg-stone-700 transition-colors">
                <svg class="size-3.5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 8.25v-1.5m0 1.5c-1.355 0-2.697.056-4.024.166C6.845 8.51 6 9.473 6 10.608v2.513m6-4.871c1.355 0 2.697.056 4.024.166C17.155 8.51 18 9.473 18 10.608v2.513"/>
                </svg>
                Repas
            </a>
{% endblock %}
{% block index_card %}

            {{ component('PantryManager') }}

{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
(function () {
    function initSearch() {
        var input = document.getElementById('pantry-search-header');
        if (!input || input._pantrySearchInit) return;
        input._pantrySearchInit = true;

        function getModel() { return document.getElementById('pantry-search-model'); }
        function pushToModel(val) {
            var model = getModel();
            if (!model) return;
            model.value = val;
            model.dispatchEvent(new Event('input', { bubbles: true }));
        }
        var timer;
        input.addEventListener('input', function () {
            var val = this.value;
            clearTimeout(timer);
            timer = setTimeout(function () { pushToModel(val); }, 50);
        });
        if (!input._pantryAfterRender) {
            input._pantryAfterRender = function () {
                var model = getModel();
                if (model && model.value !== input.value) { input.value = model.value; }
            };
        }
        function bindSync(manager) {
            if (!manager) return;
            (function waitComp() {
                var comp = manager.__component;
                if (!comp) { requestAnimationFrame(waitComp); return; }
                comp.off('render:finished', input._pantryAfterRender);
                comp.on('render:finished', input._pantryAfterRender);
            })();
        }
        bindSync(document.querySelector('[data-pantry-manager]'));
    }

    if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initSearch); }
    else { initSearch(); }
    document.addEventListener('turbo:load', initSearch);
}());
</script>
{% endblock %}
{% endembed %}

{% endblock %}

{# ── Modal rendu hors de page-fade-in pour éviter le stacking context ── #}
{% block app_navigation %}
{{ parent() }}

<div id="add-item-modal" class="fixed inset-0 z-50 flex items-end justify-center pointer-events-none" aria-modal="true" role="dialog">
    <div id="add-item-backdrop"
         class="absolute inset-0 bg-black/0 backdrop-blur-[0px] transition-all duration-300 pointer-events-none"></div>
    <div id="add-item-sheet"
         class="relative w-full max-w-lg bg-white dark:bg-stone-900 rounded-t-2xl shadow-2xl translate-y-full transition-transform duration-300 ease-out overflow-y-auto"
         style="max-height: 92dvh; padding-bottom: max(1.5rem, var(--safe-bottom, 0px))">

        <div class="sticky top-0 z-10 flex items-center justify-between px-5 pt-5 pb-4 border-b border-stone-100 dark:border-stone-800 bg-white dark:bg-stone-900">
            <div class="flex items-center gap-3">
                <div class="size-8 rounded-xl bg-emerald-500 flex items-center justify-center shadow-sm shadow-emerald-200 dark:shadow-emerald-900/50">
                    <svg class="size-4 text-white" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
                    </svg>
                </div>
                <h2 class="text-base font-bold text-stone-900 dark:text-stone-50">Ajouter un article</h2>
            </div>
            <button type="button" id="add-item-close"
                    class="size-8 rounded-full bg-stone-100 dark:bg-stone-800 flex items-center justify-center text-stone-500 dark:text-stone-400 hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors">
                <svg class="size-4" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>

        <form action="{{ path('front.pantry.new') }}" method="post"
              data-controller="barcode"
              data-barcode-lookup-url-value="{{ path('front.pantry.barcode_lookup', {barcode: '__barcode__'}) }}"
              class="px-5 pb-4 pt-4 space-y-3">

            <input type="hidden" name="items_only" value="" data-barcode-target="itemsOnlyFlag">
            <div data-barcode-target="queueFields" class="hidden" aria-hidden="true"></div>

            <div>
                <label class="block text-xs font-semibold text-stone-400 dark:text-stone-500 mb-1.5">Code-barres</label>
                <p class="text-[11px] text-stone-400 dark:text-stone-500 mb-2 leading-relaxed">Scan en rafale — la caméra reste ouverte, chaque produit rejoint la file.</p>
                <div class="flex gap-2">
                    <input type="text" name="barcode" inputmode="numeric" placeholder="3017620422003…"
                           data-barcode-target="input"
                           data-barcode-batch-disable
                           data-action="change->barcode#lookupFromInput blur->barcode#lookupFromInput"
                           class="flex-1 rounded-xl border border-stone-200 dark:border-stone-600 bg-stone-50 dark:bg-stone-800 dark:text-stone-100 px-3.5 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-400 dark:focus:ring-emerald-600 transition">
                    <button type="button"
                            data-barcode-target="scanBtn"
                            data-action="barcode#toggleScan"
                            class="shrink-0 rounded-xl bg-emerald-50 dark:bg-emerald-950/50 border border-emerald-200 dark:border-emerald-800 hover:bg-emerald-100 dark:hover:bg-emerald-900/40 px-3 py-2.5 text-emerald-700 dark:text-emerald-300 text-sm font-semibold transition-colors flex items-center gap-1.5">
                        <svg class="size-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0 1 3.75 9.375v-4.5ZM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 0 1-1.125-1.125v-4.5ZM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0 1 13.5 9.375v-4.5Z"/>
                            <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 6.75h.75v.75h-.75v-.75ZM6.75 16.5h.75v.75h-.75v-.75ZM16.5 6.75h.75v.75h-.75v-.75ZM13.5 13.5h.75v.75h-.75v-.75ZM13.5 19.5h.75v.75h-.75v-.75ZM19.5 13.5h.75v.75h-.75v-.75ZM19.5 19.5h.75v.75h-.75v-.75ZM16.5 16.5h.75v.75h-.75v-.75Z"/>
                        </svg>
                        Scanner
                    </button>
                </div>

                <video data-barcode-target="preview"
                       class="hidden w-full rounded-xl mt-2 aspect-video object-cover bg-black"
                       playsinline muted></video>

                <div data-barcode-target="spinner" class="hidden mt-2 text-center">
                    <svg class="size-5 animate-spin text-emerald-400 mx-auto" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
                    </svg>
                </div>

                <div data-barcode-target="result" class="mt-2"></div>

                <div class="mt-3 space-y-2">
                    <div class="flex items-center justify-between gap-2">
                        <span class="text-xs font-semibold text-stone-400 dark:text-stone-500">File d'attente</span>
                        <button type="button" class="hidden text-xs text-stone-400 dark:text-stone-500 hover:text-red-500 dark:hover:text-red-400 font-medium"
                                data-barcode-target="clearQueueBtn"
                                data-action="barcode#clearQueue">Vider</button>
                    </div>
                    <ul data-barcode-target="queueList"
                        data-action="click->barcode#queueListClick"
                        class="space-y-1.5 list-none p-0 m-0"></ul>
                    <button type="button"
                            data-controller="bridge--haptic"
                            data-bridge-feedback="success"
                            data-barcode-target="batchBtn"
                            data-action="click->bridge--haptic#vibrate click->barcode#submitBatch"
                            disabled
                            class="w-full rounded-xl border border-emerald-300 dark:border-emerald-700 bg-emerald-50 dark:bg-emerald-950/40 hover:bg-emerald-100 dark:hover:bg-emerald-900/50 text-emerald-800 dark:text-emerald-200 font-semibold py-2.5 text-sm transition-colors disabled:opacity-40 disabled:cursor-not-allowed">
                        Ajouter la file
                    </button>
                </div>
            </div>

            <div data-barcode-target="scoreZone" class="hidden rounded-xl bg-stone-50 dark:bg-stone-800 border border-stone-100 dark:border-stone-700 py-3 px-4"></div>

            <img data-barcode-target="productImage"
                 class="hidden w-20 h-20 object-contain rounded-xl border border-stone-100 dark:border-stone-700 mx-auto"
                 src="" alt="">

            <div class="grid grid-cols-2 gap-2">
                <input type="text" name="name" required placeholder="Nom de l'article *"
                       data-barcode-target="nameInput"
                       data-barcode-batch-disable
                       class="col-span-2 rounded-xl border border-stone-200 dark:border-stone-600 bg-stone-50 dark:bg-stone-800 dark:text-stone-100 px-3.5 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-400 dark:focus:ring-emerald-600 transition">
                <input type="text" name="category" placeholder="Catégorie"
                       data-barcode-batch-disable
                       class="rounded-xl border border-stone-200 dark:border-stone-600 bg-stone-50 dark:bg-stone-800 dark:text-stone-100 px-3.5 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-400 dark:focus:ring-emerald-600 transition">
                <input type="text" name="brand" placeholder="Marque"
                       data-barcode-target="brandInput"
                       data-barcode-batch-disable
                       class="rounded-xl border border-stone-200 dark:border-stone-600 bg-stone-50 dark:bg-stone-800 dark:text-stone-100 px-3.5 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-400 dark:focus:ring-emerald-600 transition">
                <input type="number" name="stock_quantity" value="1" min="0" step="1" placeholder="Quantité"
                       data-barcode-batch-disable
                       class="rounded-xl border border-stone-200 dark:border-stone-600 bg-stone-50 dark:bg-stone-800 dark:text-stone-100 px-3.5 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-400 dark:focus:ring-emerald-600 transition">
                <input type="text" name="stock_unit" placeholder="Unité (g, pièce…)"
                       data-barcode-batch-disable
                       class="rounded-xl border border-stone-200 dark:border-stone-600 bg-stone-50 dark:bg-stone-800 dark:text-stone-100 px-3.5 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-400 dark:focus:ring-emerald-600 transition">
                <input type="number" name="reorder_threshold" min="0" step="1" placeholder="Seuil rachat"
                       data-barcode-batch-disable
                       class="col-span-2 rounded-xl border border-stone-200 dark:border-stone-600 bg-stone-50 dark:bg-stone-800 dark:text-stone-100 px-3.5 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-400 dark:focus:ring-emerald-600 transition">
            </div>

            <button type="submit"
                data-controller="bridge--haptic"
                data-bridge-feedback="success"
                data-action="click->bridge--haptic#vibrate"
                data-barcode-batch-disable
                class="w-full rounded-xl bg-emerald-500 hover:bg-emerald-600 active:bg-emerald-700 text-white font-semibold py-3 transition-colors shadow-sm shadow-emerald-200 dark:shadow-emerald-900/40">
                Ajouter au garde-manger
            </button>
        </form>
    </div>
</div>

<script>
(function () {
    var modal    = document.getElementById('add-item-modal');
    var backdrop = document.getElementById('add-item-backdrop');
    var sheet    = document.getElementById('add-item-sheet');

    function openModal() {
        modal.classList.remove('pointer-events-none');
        backdrop.classList.add('bg-black/40', 'backdrop-blur-sm', 'pointer-events-auto');
        backdrop.classList.remove('bg-black/0', 'backdrop-blur-[0px]');
        sheet.classList.remove('translate-y-full');
        document.body.style.overflow = 'hidden';
    }
    function closeModal() {
        backdrop.classList.remove('bg-black/40', 'backdrop-blur-sm', 'pointer-events-auto');
        backdrop.classList.add('bg-black/0', 'backdrop-blur-[0px]');
        sheet.classList.add('translate-y-full');
        document.body.style.overflow = '';
        setTimeout(function () { modal.classList.add('pointer-events-none'); }, 300);
    }

    document.querySelectorAll('[data-add-item-open]').forEach(function (btn) {
        btn.addEventListener('click', openModal);
    });
    document.getElementById('add-item-close').addEventListener('click', closeModal);
    backdrop.addEventListener('click', closeModal);
}());
</script>
{% endblock %}