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

{% set is_edit = recette and recette.id is defined %}

{% block title %}{{ is_edit ? 'Modifier la recette' : 'Nouvelle recette' }} — GestRestoSco{% endblock %}

{% block body %}
<div class="d-flex align-items-center justify-content-between mb-4">
    <h1 class="h4 fw-bold mb-0 page-title">
        <i class="fas fa-book me-2"></i>
        {{ is_edit ? 'Modifier « ' ~ recette.nom ~ ' »' : 'Nouvelle recette' }}
    </h1>
    <a href="{{ path('tenant_recettes_index') }}" class="btn btn-outline-secondary">
        <i class="fas fa-arrow-left me-1"></i>Retour
    </a>
</div>

<form method="post" action="{{ action }}" novalidate>
    <input type="hidden" name="_token" value="{{ csrf_token(token) }}">

    <div class="row g-4">

        {# ── Colonne gauche : infos générales ─────────────────────────────── #}
        <div class="col-lg-7">
            <div class="card border-0 shadow-sm rounded-3 mb-4">
                <div class="card-header bg-transparent fw-semibold py-3">
                    <i class="fas fa-info-circle me-2 text-primary"></i>Informations générales
                </div>
                <div class="card-body p-4">
                    <div class="row g-3">
                        <div class="col-12">
                            <label for="nom" class="form-label fw-semibold">Nom de la recette <span class="text-danger">*</span></label>
                            <input type="text" id="nom" name="nom" class="form-control"
                                   value="{{ recette.nom ?? '' }}" required autofocus>
                        </div>
                        <div class="col-sm-6">
                            <label for="categorie" class="form-label fw-semibold">Catégorie</label>
                            <select id="categorie" name="categorie" class="form-select">
                                <option value="">— Choisir —</option>
                                {% for val, label in {'entree': 'Entrée', 'plat': 'Plat', 'accompagnement': 'Accompagnement', 'laitage': 'Laitage', 'dessert': 'Dessert'} %}
                                    <option value="{{ val }}" {{ (recette.categorie ?? '') == val ? 'selected' }}>{{ label }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-sm-6">
                            <label for="portions_base" class="form-label fw-semibold">Portions de base</label>
                            <input type="number" id="portions_base" name="portions_base" class="form-control"
                                   value="{{ recette.portions_base ?? 1 }}" min="1">
                        </div>
                        <div class="col-12">
                            <label for="instructions" class="form-label fw-semibold">Instructions / Préparation</label>
                            <textarea id="instructions" name="instructions" class="form-control" rows="5"
                                      placeholder="Étapes de préparation, températures, temps de cuisson…">{{ recette.instructions ?? '' }}</textarea>
                        </div>
                    </div>
                </div>
            </div>

            {# ── Ingrédients ─────────────────────────────────────────────── #}
            <div class="card border-0 shadow-sm rounded-3">
                <div class="card-header bg-transparent fw-semibold py-3 d-flex justify-content-between align-items-center">
                    <span><i class="fas fa-list me-2 text-success"></i>Ingrédients</span>
                    <button type="button" class="btn btn-sm btn-outline-success" id="btn-add-ingredient">
                        <i class="fas fa-plus me-1"></i>Ajouter
                    </button>
                </div>
                <div class="card-body p-3">
                    <div id="ingredients-container">
                        {% for ing in ingredients %}
                        <div class="ingredient-row d-flex gap-2 mb-2 align-items-center">
                            <input type="text" name="ingredients[{{ loop.index0 }}][ingredient]"
                                   class="form-control flex-grow-1" placeholder="Ingrédient" value="{{ ing.ingredient }}">
                            <input type="number" name="ingredients[{{ loop.index0 }}][quantite]"
                                   class="form-control" style="width:90px" placeholder="Qté" step="0.001" value="{{ ing.quantite }}">
                            <select name="ingredients[{{ loop.index0 }}][unite]" class="form-select" style="width:90px">
                                {% for u in ['g', 'kg', 'mL', 'cL', 'L', 'pièce', 'cuillère', 'pincée'] %}
                                    <option value="{{ u }}" {{ ing.unite == u ? 'selected' }}>{{ u }}</option>
                                {% endfor %}
                            </select>
                            <button type="button" class="btn btn-outline-danger btn-sm remove-ingredient">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                        {% else %}
                            {# Ligne vide si aucun ingrédient #}
                        {% endfor %}
                    </div>
                    <div id="empty-ingredients" class="{{ ingredients is not empty ? 'd-none' : '' }} text-muted small py-2">
                        Aucun ingrédient — cliquez sur Ajouter.
                    </div>
                </div>
            </div>
        </div>

        {# ── Colonne droite : allergènes ──────────────────────────────────── #}
        <div class="col-lg-5">
            <div class="card border-0 shadow-sm rounded-3">
                <div class="card-header bg-transparent fw-semibold py-3">
                    <i class="fas fa-allergies me-2 text-warning"></i>Allergènes (14 allergènes majeurs)
                </div>
                <div class="card-body p-3">
                    {% set allergenesList = [
                        ['contient_gluten',       'Gluten',             'fas fa-wheat-awn'],
                        ['contient_crustaces',     'Crustacés',          'fas fa-shrimp'],
                        ['contient_oeufs',         'Œufs',               'fas fa-egg'],
                        ['contient_poisson',       'Poisson',            'fas fa-fish'],
                        ['contient_arachides',     'Arachides',          'fas fa-seedling'],
                        ['contient_soja',          'Soja',               'fas fa-leaf'],
                        ['contient_lactose',       'Lait / Lactose',     'fas fa-cheese'],
                        ['contient_fruits_coque',  'Fruits à coque',     'fas fa-circle'],
                        ['contient_celeri',        'Céleri',             'fas fa-leaf'],
                        ['contient_moutarde',      'Moutarde',           'fas fa-pepper-hot'],
                        ['contient_sesame',        'Graines de sésame',  'fas fa-circle'],
                        ['contient_sulfites',      'Sulfites / SO2',     'fas fa-wine-bottle'],
                        ['contient_lupin',         'Lupin',              'fas fa-seedling'],
                        ['contient_mollusques',    'Mollusques',         'fas fa-circle'],
                    ] %}
                    <div class="row g-2">
                        {% for item in allergenesList %}
                        <div class="col-6">
                            {% set checked = recette is not empty and attribute(recette, item[0]) %}
                            <div class="form-check border rounded p-2 h-100 {{ checked ? 'bg-warning bg-opacity-10 border-warning' : '' }}">
                                <input class="form-check-input" type="checkbox"
                                       name="{{ item[0] }}" id="{{ item[0] }}" value="1"
                                       {{ checked ? 'checked' }}>
                                <label class="form-check-label small fw-semibold" for="{{ item[0] }}">
                                    {{ item[1] }}
                                </label>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>

    </div>{# /row #}

    <hr class="my-4">
    <div class="d-flex gap-2 justify-content-end">
        <a href="{{ path('tenant_recettes_index') }}" class="btn btn-outline-secondary">Annuler</a>
        <button type="submit" class="btn btn-primary">
            <i class="fas fa-save me-1"></i>{{ is_edit ? 'Enregistrer les modifications' : 'Créer la recette' }}
        </button>
    </div>

</form>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
let ingredientCount = {{ ingredients|length }};

/* ────────────────────────────────────────────────────
   Autocomplete mercuriale sur les champs "ingrédient"
   ──────────────────────────────────────────────────── */
function escHtml(s) {
    return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
}

function attachIngredientAutocomplete(input) {
    let dropdown = null;
    let abortCtrl = null;

    function closeDropdown() {
        if (dropdown) { dropdown.remove(); dropdown = null; }
    }

    function showDropdown(items) {
        closeDropdown();
        if (!items.length) return;

        const rect        = input.getBoundingClientRect();
        const dropH       = Math.min(items.length * 38, 220); // hauteur estimée
        const spaceBelow  = window.innerHeight - rect.bottom;
        const spaceAbove  = rect.top;
        const showAbove   = spaceBelow < dropH && spaceAbove > spaceBelow;
        const maxH        = showAbove
                                ? Math.min(220, spaceAbove - 8)
                                : Math.min(220, spaceBelow - 8);

        dropdown = document.createElement('div');
        dropdown.className = 'list-group shadow';
        dropdown.style.cssText =
            'position:fixed;z-index:99999;width:' + Math.max(rect.width, 240) + 'px;' +
            (showAbove
                ? 'bottom:' + (window.innerHeight - rect.top) + 'px;'
                : 'top:' + rect.bottom + 'px;') +
            'left:' + rect.left + 'px;' +
            'max-height:' + maxH + 'px;overflow-y:auto;';

        items.forEach(function(item) {
            const el = document.createElement('button');
            el.type = 'button';
            el.className = 'list-group-item list-group-item-action d-flex justify-content-between align-items-center py-1 px-2';
            el.innerHTML =
                '<span class="small">' + escHtml(item.nom_produit) + '</span>' +
                (item.prix
                    ? '<small class="text-muted ms-2">' + parseFloat(item.prix).toFixed(2) + ' €/' + escHtml(item.unite) + '</small>'
                    : '');
            el.addEventListener('mousedown', function(e) {
                e.preventDefault();
                input.value = item.nom_produit;
                // Synchroniser l'unité dans le <select> de la même ligne
                const row = input.closest('.ingredient-row');
                if (row && item.unite) {
                    const sel = row.querySelector('select');
                    if (sel) {
                        const opt = Array.from(sel.options).find(function(o) {
                            return o.value.toLowerCase() === item.unite.toLowerCase();
                        });
                        if (opt) sel.value = opt.value;
                    }
                }
                closeDropdown();
            });
            dropdown.appendChild(el);
        });

        document.body.appendChild(dropdown);
    }

    input.addEventListener('input', function() {
        const q = this.value.trim();
        if (q.length < 2) { closeDropdown(); return; }

        if (abortCtrl) abortCtrl.abort();
        abortCtrl = new AbortController();

        fetch('/app/recettes/mercuriale-search?q=' + encodeURIComponent(q), { signal: abortCtrl.signal })
            .then(function(r) { return r.json(); })
            .then(function(data) { showDropdown(data); })
            .catch(function() {});
    });

    input.addEventListener('blur', function() { setTimeout(closeDropdown, 200); });
    input.addEventListener('keydown', function(e) { if (e.key === 'Escape') closeDropdown(); });
}

// Attacher l'autocomplete sur toutes les lignes existantes
document.querySelectorAll('.ingredient-row input[type="text"]').forEach(attachIngredientAutocomplete);

/* ────────────────────────────────────────────────────
   Ajout / suppression de lignes ingrédients
   ──────────────────────────────────────────────────── */
document.getElementById('btn-add-ingredient').addEventListener('click', function () {
    const container = document.getElementById('ingredients-container');
    const empty     = document.getElementById('empty-ingredients');
    const i         = ingredientCount++;
    const row       = document.createElement('div');
    row.className   = 'ingredient-row d-flex gap-2 mb-2 align-items-center';
    row.innerHTML   = `
        <input type="text" name="ingredients[${i}][ingredient]" class="form-control flex-grow-1" placeholder="Ingrédient">
        <input type="number" name="ingredients[${i}][quantite]" class="form-control" style="width:90px" placeholder="Qté" step="0.001">
        <select name="ingredients[${i}][unite]" class="form-select" style="width:90px">
            ${['g','kg','mL','cL','L','pièce','cuillère','pincée'].map(u => `<option value="${u}">${u}</option>`).join('')}
        </select>
        <button type="button" class="btn btn-outline-danger btn-sm remove-ingredient"><i class="fas fa-times"></i></button>
    `;
    container.appendChild(row);
    empty.classList.add('d-none');
    const newInput = row.querySelector('input[type="text"]');
    attachIngredientAutocomplete(newInput);
    newInput.focus();
});

document.getElementById('ingredients-container').addEventListener('click', function (e) {
    if (e.target.closest('.remove-ingredient')) {
        e.target.closest('.ingredient-row').remove();
        if (!document.querySelectorAll('.ingredient-row').length) {
            document.getElementById('empty-ingredients').classList.remove('d-none');
        }
    }
});
</script>
{% endblock %}