{# templates/app/menus/form.html.twig #}
{% extends 'app/base.html.twig' %}

{% block title %}
    {{ editMode ? 'Modifier' : 'Nouveau' }} menu — GestRestoSco
{% endblock %}

{% block stylesheets %}
    <style>
        .service-dejeuner      > .card-header { background: #0d6efd; color: #fff; }
        .service-diner         > .card-header { background: #212529; color: #fff; }
        .service-petitdejeuner > .card-header { background: #ffc107; color: #212529; }
        .service-gouter        > .card-header { background: #198754; color: #fff; }
        .composante-card .card-header { background: #f8f9fa; }
        .nav-tabs .nav-link { text-transform: capitalize; font-size: 0.9rem; }
        .optimization-result-table td,
        .optimization-result-table th { vertical-align: middle; }
        .optimization-allergen-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.5rem 1rem; }
        .composante-autocomplete-list {
            position: absolute;
            z-index: 1050;
            width: 100%;
            max-height: 200px;
            overflow-y: auto;
            background: #fff;
            border: 1px solid #dee2e6;
            border-radius: 0.375rem;
            font-size: 0.85rem;
        }
        .composante-card .card-body { position: relative; }
    </style>
{% endblock %}

{% block body %}
    <div class="d-flex justify-content-between align-items-center gap-3 mb-4 flex-wrap">
        <div class="d-flex align-items-center gap-2">
            <a href="{{ path('tenant_menus_index') }}" class="btn btn-sm btn-outline-secondary">
                <i class="fas fa-arrow-left"></i>
            </a>
            <h4 class="mb-0">
                <i class="fas fa-book-open text-primary me-2"></i>
                {{ editMode ? 'Modifier la semaine S' ~ semaine.numero_semaine : 'Nouvelle semaine de menu' }}
            </h4>
        </div>
        <button type="button" class="btn btn-success" id="btn-optimisation-auto">
            <i class="fas fa-wand-magic-sparkles me-1"></i>
            Optimisation auto
        </button>
    </div>

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

        {# ── En-tête semaine ─────────────────────────────────────────────── #}
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white border-bottom fw-semibold">
                <i class="fas fa-calendar-week me-2 text-primary"></i>
                Informations de la semaine
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-sm-3">
                        <label class="form-label fw-semibold small">N° de semaine <span class="text-danger">*</span></label>
                        <input type="number" name="numero_semaine" class="form-control" value="{{ semaine.numero_semaine }}" min="1" max="53" required>
                    </div>
                    <div class="col-sm-3">
                        <label class="form-label fw-semibold small">Année <span class="text-danger">*</span></label>
                        <input type="number" name="annee" class="form-control" value="{{ semaine.annee }}" min="2020" max="2099" required>
                    </div>
                    <div class="col-sm-3">
                        <label class="form-label fw-semibold small">Du <span class="text-danger">*</span></label>
                        <input type="date" name="date_debut" class="form-control" value="{{ semaine.date_debut }}" required>
                    </div>
                    <div class="col-sm-3">
                        <label class="form-label fw-semibold small">Au <span class="text-danger">*</span></label>
                        <input type="date" name="date_fin" class="form-control" value="{{ semaine.date_fin }}" required>
                    </div>
                </div>
            </div>
        </div>

        {# ── Aide EGAlim ─────────────────────────────────────────────────── #}
        {% if resumeAllergenes is defined and resumeAllergenes|length > 0 %}
        <div class="card mb-4 border-warning">
            <div class="card-header bg-warning text-dark d-flex align-items-center gap-2">
                <i class="fas fa-exclamation-triangle"></i>
                <strong>Allergènes / Intolérances — Convives actifs</strong>
            </div>
            <div class="card-body py-2">
                {% for cat in resumeAllergenes %}
                <div class="mb-2">
                    <span class="fw-semibold small">{{ cat.categorie_nom }}</span>
                    <span class="ms-2">
                        {% for label, nb in cat.allergenes %}
                            <span class="badge bg-warning text-dark me-1">{{ nb }}× {{ label }}</span>
                        {% endfor %}
                        {% for item in cat.autres %}
                            <span class="badge bg-info text-dark me-1">1× {{ item }}</span>
                        {% endfor %}
                    </span>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}

        <div class="card mb-4 border-info">
            <div class="card-header bg-info text-white">
                <h5 class="mb-0">💡 Aide — Icônes EGAlim</h5>
            </div>
            <div class="card-body">
                <div class="row g-3 text-center">
                    <div class="col-md-3">
                        <div><span class="fs-5">🥬</span></div>
                        <strong>Végétarien</strong>
                        <div><small class="text-muted">Menu sans viande ni poisson</small></div>
                    </div>
                    <div class="col-md-3">
                        <div><span class="fs-5">🌱</span></div>
                        <strong>Bio</strong>
                        <div><small class="text-muted">Agriculture biologique certifiée</small></div>
                    </div>
                    <div class="col-md-3">
                        <div><span class="fs-5">🌟</span></div>
                        <strong>Local</strong>
                        <div><small class="text-muted">Produits locaux / régionaux</small></div>
                    </div>
                    <div class="col-md-3">
                        <div><span class="fs-5">🌍</span></div>
                        <strong>Durable</strong>
                        <div><small class="text-muted">Labels durables (MSC, ASC, Label Rouge…)</small></div>
                    </div>
                </div>
                <hr class="my-3">
                <p class="mb-0 text-center">
                    <small class="text-muted">
                        <strong>Cochez les options correspondantes</strong> pour chaque composante du menu.
                        Le ⚠️ révèle la liste des allergènes réglementaires.
                    </small>
                </p>
            </div>
        </div>

        {# ── Définitions ─────────────────────────────────────────────────── #}
        {% set serviceIcons = {
            'dejeuner':      'sun',
            'diner':         'moon',
            'petitdejeuner': 'cloud-sun',
            'gouter':        'cookie-bite'
        } %}
        {% set composantesParService = {
            'dejeuner':      ['entree', 'plat', 'accompagnement', 'laitage', 'dessert'],
            'diner':         ['entree', 'plat', 'accompagnement', 'laitage', 'dessert'],
            'petitdejeuner': ['plat', 'laitage', 'dessert'],
            'gouter':        ['plat', 'laitage']
        } %}
        {% set labelsDefaut = {
            'entree':         'Entrée',
            'plat':           'Plat principal',
            'accompagnement': 'Accompagnement',
            'laitage':        'Laitage',
            'dessert':        'Dessert'
        } %}
        {% set labelsSpecifiques = {
            'petitdejeuner': {'plat': 'Pain / Viennoiserie', 'laitage': 'Produit laitier', 'dessert': 'Fruit / Jus'},
            'gouter':        {'plat': 'Collation', 'laitage': 'Boisson'}
        } %}
        {% set allergenOptions = {
            'lait':         'Lait',
            'oeufs':        'Œufs',
            'gluten':       'Gluten',
            'arachides':    'Arachides',
            'fruits_coque': 'Fruits à coque',
            'crustaces':    'Crustacés',
            'poisson':      'Poisson',
            'soja':         'Soja',
            'celeri':       'Céleri',
            'moutarde':     'Moutarde',
            'sesame':       'Sésame',
            'sulfites':     'Sulfites',
            'lupin':        'Lupin',
            'mollusques':   'Mollusques'
        } %}

        {# ── Onglets par jour ────────────────────────────────────────────── #}
        <ul class="nav nav-tabs mb-0" id="menuDayTabs" role="tablist">
            {% for jour in ajours %}
                <li class="nav-item" role="presentation">
                    <button class="nav-link {{ loop.first ? 'active' : '' }}"
                            id="tab-{{ jour }}-btn"
                            data-bs-toggle="tab"
                            data-bs-target="#tab-{{ jour }}"
                            type="button" role="tab">
                        {{ jour|capitalize }}
                    </button>
                </li>
            {% endfor %}
        </ul>

        <div class="tab-content border border-top-0 rounded-bottom p-3 bg-white mb-4">
            {% for jour in ajours %}
                <div class="tab-pane fade {{ loop.first ? 'show active' : '' }}"
                     id="tab-{{ jour }}" role="tabpanel">

                    {% for sKey, sLabel in services %}
                        {% set composantes = composantesParService[sKey] ?? ['entree','plat','accompagnement','laitage','dessert'] %}

                        <div class="card mb-4 service-{{ sKey }}">
                            <div class="card-header fw-semibold d-flex align-items-center gap-2">
                                <i class="fas fa-{{ serviceIcons[sKey] ?? 'utensils' }}"></i>
                                {{ sLabel }}
                            </div>
                            <div class="card-body">

                                {# Effectif prévisionnel #}
                                <div class="alert alert-info mb-3">
                                    <div class="row align-items-center">
                                        <div class="col-md-6">
                                            <label class="form-label mb-0">
                                                <i class="fas fa-users me-1"></i> Effectif prévisionnel pour ce jour
                                            </label>
                                        </div>
                                        <div class="col-md-6">
                                            <input type="number" class="form-control"
                                                   name="menus[{{ sKey }}][{{ jour }}][effectif_prevu]"
                                                   value="{{ joursParService[sKey][jour].effectif_prevu ?? effectifDefaut }}"
                                                   min="1" max="500" placeholder="Nombre de repas">
                                        </div>
                                    </div>
                                </div>

                                {# Card par composante #}
                                {% for composante in composantes %}
                                    {% set label     = (labelsSpecifiques[sKey] is defined and labelsSpecifiques[sKey][composante] is defined)
                                                        ? labelsSpecifiques[sKey][composante]
                                                        : labelsDefaut[composante] %}
                                    {% set uid       = sKey ~ '_' ~ jour ~ '_' ~ composante %}
                                    {% set optsComp  = joursParService[sKey][jour].opts[composante] ?? {} %}
                                    {% set egalimVal = optsComp.egalim     ?? [] %}
                                    {% set allergVal = optsComp.allergenes ?? [] %}

                                    <div class="card mb-3 composante-card">
                                        <div class="card-header">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <h6 class="mb-0">
                                                    {{ label }}
                                                    {% if composante == 'plat' %}<span class="text-danger">*</span>{% endif %}
                                                </h6>
                                                <div>
                                                    <div class="form-check form-check-inline mb-0">
                                                        <input class="form-check-input" type="checkbox"
                                                               name="menus[{{ sKey }}][{{ jour }}][options][{{ composante }}][]"
                                                               value="vegetarien"
                                                               id="{{ uid }}-vegetarien"
                                                               {{ 'vegetarien' in egalimVal ? 'checked' : '' }}>
                                                        <label class="form-check-label" for="{{ uid }}-vegetarien">🥬</label>
                                                    </div>
                                                    <div class="form-check form-check-inline mb-0">
                                                        <input class="form-check-input" type="checkbox"
                                                               id="{{ uid }}-allergenes-toggle"
                                                               value="allergenes"
                                                               {{ allergVal is not empty ? 'checked' : '' }}
                                                               onchange="toggleAllergenes('{{ uid }}-allergs', this)">
                                                        <label class="form-check-label" for="{{ uid }}-allergenes-toggle">⚠️</label>
                                                    </div>
                                                    <div class="form-check form-check-inline mb-0">
                                                        <input class="form-check-input" type="checkbox"
                                                               name="menus[{{ sKey }}][{{ jour }}][options][{{ composante }}][]"
                                                               value="local"
                                                               id="{{ uid }}-local"
                                                               {{ 'local' in egalimVal ? 'checked' : '' }}>
                                                        <label class="form-check-label" for="{{ uid }}-local">🌟</label>
                                                    </div>
                                                    <div class="form-check form-check-inline mb-0">
                                                        <input class="form-check-input" type="checkbox"
                                                               name="menus[{{ sKey }}][{{ jour }}][options][{{ composante }}][]"
                                                               value="bio"
                                                               id="{{ uid }}-bio"
                                                               {{ 'bio' in egalimVal ? 'checked' : '' }}>
                                                        <label class="form-check-label" for="{{ uid }}-bio">🌱</label>
                                                    </div>
                                                    <div class="form-check form-check-inline mb-0">
                                                        <input class="form-check-input" type="checkbox"
                                                               name="menus[{{ sKey }}][{{ jour }}][options][{{ composante }}][]"
                                                               value="durable"
                                                               id="{{ uid }}-durable"
                                                               {{ 'durable' in egalimVal ? 'checked' : '' }}>
                                                        <label class="form-check-label" for="{{ uid }}-durable">🌍</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <input type="text" class="form-control composante-txt"
                                                   name="menus[{{ sKey }}][{{ jour }}][{{ composante }}]"
                                                   data-label="{{ label }}"
                                                   data-composante="{{ composante }}"
                                                   value="{{ joursParService[sKey][jour][composante] ?? '' }}"
                                                   placeholder="{{ label }}..."
                                                   autocomplete="off">
                                            <div class="composante-autocomplete-list list-group shadow-sm d-none"></div>
                                            <div class="recette-cout-badge small text-info mt-1 d-none"></div>

                                            <div id="{{ uid }}-allergs" class="mt-2"
                                                 style="display: {{ allergVal is not empty ? 'block' : 'none' }}">
                                                <div class="dropdown allergen-picker">
                                                    <button class="btn btn-sm btn-outline-warning dropdown-toggle d-flex align-items-center flex-wrap gap-1"
                                                            type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                                                        ⚠️ <span class="allergen-picker-label ms-1">Allergènes</span>
                                                    </button>
                                                    <ul class="dropdown-menu p-2" style="min-width: 220px; max-height: 300px; overflow-y: auto;">
                                                        {% for aKey, aLabel in allergenOptions %}
                                                        <li>
                                                            <div class="form-check">
                                                                <input class="form-check-input allergen-cb" type="checkbox"
                                                                       name="menus[{{ sKey }}][{{ jour }}][allergenes][{{ composante }}][]"
                                                                       value="{{ aKey }}"
                                                                       id="{{ uid }}-alg-{{ aKey }}"
                                                                       {{ aKey in allergVal ? 'checked' : '' }}>
                                                                <label class="form-check-label small" for="{{ uid }}-alg-{{ aKey }}">{{ aLabel }}</label>
                                                            </div>
                                                        </li>
                                                        {% endfor %}
                                                        <li><hr class="dropdown-divider my-1"></li>
                                                        <li><button type="button" class="btn btn-sm btn-secondary w-100 allergen-close-btn">Fermer</button></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}

                                <p class="text-muted small mb-0">
                                    <i class="fas fa-info-circle me-1"></i>
                                    Seuls les jours avec
                                    {% if sKey == 'petitdejeuner' %}un <strong>Pain / Viennoiserie</strong>
                                    {% elseif sKey == 'gouter' %}une <strong>Collation</strong>
                                    {% else %}un <strong>Plat principal</strong>{% endif %}
                                    renseigné seront enregistrés.
                                </p>
                            </div>
                        </div>
                    {% endfor %}

                </div>
            {% endfor %}
        </div>

        {# ── Boutons ──────────────────────────────────────────────────────── #}
        <div class="d-flex gap-2 mb-4">
            <button type="submit" class="btn btn-primary">
                <i class="fas fa-save me-1"></i>
                {{ editMode ? 'Enregistrer les modifications' : 'Créer le menu' }}
            </button>
            <button type="button" class="btn btn-success" id="btn-optimisation-auto-bottom">
                <i class="fas fa-wand-magic-sparkles me-1"></i>
                Optimisation auto
            </button>
            <a href="{{ path('tenant_menus_index') }}" class="btn btn-outline-secondary">Annuler</a>
        </div>
    </form>

    <div class="modal fade" id="menuOptimizationModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header bg-success text-white">
                    <h5 class="modal-title">
                        <i class="fas fa-wand-magic-sparkles me-2"></i>
                        Optimisation automatique des menus
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Fermer"></button>
                </div>
                <div class="modal-body">
                    <div id="optimization-params-section">
                        <div class="row g-3 mb-4">
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">Effectif moyen</label>
                                <input type="number" id="optimization-effectif" class="form-control" min="1" value="{{ effectifDefaut }}">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">Budget max (€/convive)</label>
                                <input type="number" id="optimization-budget" class="form-control" min="0" step="0.10" value="{{ budgetDefaut }}">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">Nombre de suggestions</label>
                                <input type="number" id="optimization-count" class="form-control" min="1" max="5" value="3">
                            </div>
                        </div>

                        <div class="card border-0 bg-light mb-4">
                            <div class="card-body py-3 px-4">
                                <h6 class="fw-semibold mb-3"><i class="fas fa-sliders me-2 text-success"></i>Pondérations du score</h6>
                                <div class="row g-3">
                                    <div class="col-md-4">
                                        <label class="form-label small fw-semibold">
                                            <span class="badge bg-danger me-1">&nbsp;</span>
                                            Coût : <span id="pond-cout-val">{{ ponderationsDefaut.cout ?? 55 }}</span>%
                                        </label>
                                        <input type="range" class="form-range optimization-pond" id="pond-cout"
                                               min="0" max="100" step="5" value="{{ ponderationsDefaut.cout ?? 55 }}"
                                               data-pond="cout" data-val="pond-cout-val">
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label small fw-semibold">
                                            <span class="badge bg-warning me-1">&nbsp;</span>
                                            Variété : <span id="pond-variete-val">{{ ponderationsDefaut.variete ?? 30 }}</span>%
                                        </label>
                                        <input type="range" class="form-range optimization-pond" id="pond-variete"
                                               min="0" max="100" step="5" value="{{ ponderationsDefaut.variete ?? 30 }}"
                                               data-pond="variete" data-val="pond-variete-val">
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label small fw-semibold">
                                            <span class="badge bg-info me-1">&nbsp;</span>
                                            Couverture : <span id="pond-couverture-val">{{ ponderationsDefaut.couverture ?? 15 }}</span>%
                                        </label>
                                        <input type="range" class="form-range optimization-pond" id="pond-couverture"
                                               min="0" max="100" step="5" value="{{ ponderationsDefaut.couverture ?? 15 }}"
                                               data-pond="couverture" data-val="pond-couverture-val">
                                    </div>
                                </div>
                                <div class="mt-2">
                                    <div class="progress" style="height: 6px;">
                                        <div class="progress-bar bg-danger" id="pond-bar-cout" style="width: {{ ponderationsDefaut.cout ?? 55 }}%"></div>
                                        <div class="progress-bar bg-warning" id="pond-bar-variete" style="width: {{ ponderationsDefaut.variete ?? 30 }}%"></div>
                                        <div class="progress-bar bg-info" id="pond-bar-couverture" style="width: {{ ponderationsDefaut.couverture ?? 15 }}%"></div>
                                    </div>
                                    <div id="pond-sum-warning" class="small text-warning mt-1 d-none">
                                        <i class="fas fa-triangle-exclamation me-1"></i>Somme = <span id="pond-sum-val">100</span>% — normalisée automatiquement lors du calcul.
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="alert alert-light border mb-4">
                            <div class="d-flex flex-wrap gap-3 small">
                                <div><strong>Jours actifs :</strong> {{ ajours|map(j => j|capitalize)|join(', ') }}</div>
                                <div><strong>Services actifs :</strong> {{ services|keys|map(s => services[s])|join(', ') }}</div>
                            </div>
                        </div>

                        <div class="card border-0 bg-light">
                            <div class="card-body">
                                <h6 class="fw-semibold mb-3">
                                    <i class="fas fa-triangle-exclamation text-warning me-2"></i>
                                    Filtres allergènes à exclure
                                </h6>
                                <div class="accordion" id="optimization-allergens-accordion">
                                    {% for jour in ajours %}
                                        <div class="accordion-item">
                                            <h2 class="accordion-header" id="heading-{{ jour }}">
                                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-{{ jour }}" aria-expanded="false" aria-controls="collapse-{{ jour }}">
                                                    {{ jour|capitalize }}
                                                </button>
                                            </h2>
                                            <div id="collapse-{{ jour }}" class="accordion-collapse collapse" aria-labelledby="heading-{{ jour }}" data-bs-parent="#optimization-allergens-accordion">
                                                <div class="accordion-body">
                                                    <div class="optimization-allergen-grid">
                                                        {% for aKey, aLabel in allergenOptions %}
                                                            <div class="form-check">
                                                                <input class="form-check-input optimization-allergen-cb" type="checkbox" value="{{ aKey }}" id="opt-{{ jour }}-{{ aKey }}" data-day="{{ jour }}">
                                                                <label class="form-check-label small" for="opt-{{ jour }}-{{ aKey }}">{{ aLabel }}</label>
                                                            </div>
                                                        {% endfor %}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="optimization-loading-section" class="text-center py-5 d-none">
                        <div class="spinner-border text-success" role="status"></div>
                        <p class="text-muted mt-3 mb-0">Génération des suggestions en cours…</p>
                    </div>

                    <div id="optimization-results-section" class="d-none">
                        <div id="optimization-results-container"></div>
                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-outline-secondary" id="optimization-back-btn" disabled>Retour aux paramètres</button>
                    <div class="d-flex gap-2">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Fermer</button>
                        <button type="button" class="btn btn-success" id="optimization-generate-btn">
                            <i class="fas fa-stars me-1"></i>
                            Générer les suggestions
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    <script>
        function toggleAllergenes(id, cb) {
            document.getElementById(id).style.display = cb.checked ? 'block' : 'none';
        }

        // ── Allergen picker : fermeture auto + badges ──
        document.addEventListener('DOMContentLoaded', function () {
            document.querySelectorAll('.allergen-picker').forEach(function (picker) {
                var toggleBtn = picker.querySelector('.dropdown-toggle');
                var bsDropdown = bootstrap.Dropdown.getOrCreateInstance(toggleBtn);

                function updateBadges() {
                    // Supprimer les badges existants (hors label)
                    picker.querySelectorAll('.allergen-badge').forEach(function (b) { b.remove(); });
                    // Ajouter un badge par allergène coché
                    var checked = picker.querySelectorAll('.allergen-cb:checked');
                    checked.forEach(function (cb) {
                        var lbl = picker.querySelector('label[for="' + cb.id + '"]');
                        var text = lbl ? lbl.textContent.trim() : cb.value;
                        var badge = document.createElement('span');
                        badge.className = 'badge bg-warning text-dark allergen-badge ms-1';
                        badge.textContent = text;
                        toggleBtn.appendChild(badge);
                    });
                }

                // Initialiser les badges au chargement
                updateBadges();

                // Fermer après chaque sélection + mettre à jour les badges
                picker.querySelectorAll('.allergen-cb').forEach(function (cb) {
                    cb.addEventListener('change', function () {
                        updateBadges();
                        bsDropdown.hide();
                    });
                });

                // Bouton Fermer
                var closeBtn = picker.querySelector('.allergen-close-btn');
                if (closeBtn) {
                    closeBtn.addEventListener('click', function () {
                        bsDropdown.hide();
                    });
                }
            });
        });

        /* ────────────────────────────────────────────────────────
           Autocomplete composantes (historique menus + recettes)
           ──────────────────────────────────────────────────────── */
        function checkRecetteCout(input) {
            const badge = input.nextElementSibling && input.nextElementSibling.classList.contains('composante-autocomplete-list')
                ? input.nextElementSibling.nextElementSibling
                : input.nextElementSibling;
            if (!badge || !badge.classList.contains('recette-cout-badge')) return;
            const nom = input.value.trim();
            if (!nom) { badge.classList.add('d-none'); return; }

            fetch('/app/recettes/by-name?nom=' + encodeURIComponent(nom))
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    if (data.found && data.cout_portion_ttc !== null) {
                        badge.innerHTML =
                            '<i class="fas fa-receipt me-1"></i>Recette trouvée — ' +
                            '<strong>' + parseFloat(data.cout_portion_ttc).toFixed(2) + ' €/pers.</strong>' +
                            ' <span class="text-muted">(base ' + data.portions + ' pers.)</span>';
                        badge.classList.remove('d-none');
                    } else {
                        badge.classList.add('d-none');
                    }
                })
                .catch(function() {});
        }

        function attachComposanteField(input) {
            const dropdown = input.nextElementSibling;
            if (!dropdown || !dropdown.classList.contains('composante-autocomplete-list')) return;

            const composante = input.dataset.composante || '';
            if (!composante) return;

            let timer = null;

            input.addEventListener('input', function() {
                clearTimeout(timer);
                const term = this.value.trim();
                if (term.length < 2) {
                    dropdown.classList.add('d-none');
                    dropdown.innerHTML = '';
                    checkRecetteCout(input);
                    return;
                }
                timer = setTimeout(function() {
                    fetch('/app/menus/autocomplete?type=' + encodeURIComponent(composante) + '&term=' + encodeURIComponent(term))
                        .then(function(r) { return r.json(); })
                        .then(function(items) {
                            dropdown.innerHTML = '';
                            if (!items.length) {
                                dropdown.classList.add('d-none');
                                return;
                            }
                            items.forEach(function(item) {
                                const btn = document.createElement('button');
                                btn.type = 'button';
                                btn.className = 'list-group-item list-group-item-action d-flex justify-content-between align-items-center py-1 px-2 small';
                                btn.innerHTML = '<span>' + item.value.replace(/</g, '&lt;') + '</span>'
                                    + '<span class="badge bg-primary rounded-pill ms-2" style="font-size:0.7em">'
                                    + item.count + ' fois</span>';
                                btn.addEventListener('mousedown', function(e) {
                                    e.preventDefault();
                                    input.value = item.value;
                                    dropdown.classList.add('d-none');
                                    dropdown.innerHTML = '';
                                    checkRecetteCout(input);
                                });
                                dropdown.appendChild(btn);
                            });
                            dropdown.classList.remove('d-none');
                        })
                        .catch(function() {});
                    checkRecetteCout(input);
                }, 300);
            });

            input.addEventListener('blur', function() {
                setTimeout(function() {
                    dropdown.classList.add('d-none');
                    dropdown.innerHTML = '';
                }, 200);
            });

            input.addEventListener('keydown', function(e) {
                if (e.key === 'Escape') {
                    dropdown.classList.add('d-none');
                    dropdown.innerHTML = '';
                }
            });
        }

        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('.composante-txt').forEach(function(input) {
                attachComposanteField(input);
                // Charger le coût des champs déjà remplis (mode édition)
                if (input.value.trim()) {
                    checkRecetteCout(input);
                }
            });
        });

        const optimizationConfig = {
            jours: {{ ajours|json_encode|raw }},
            services: {{ services|json_encode|raw }},
            serviceComponents: {
                dejeuner: ['entree', 'plat', 'accompagnement', 'laitage', 'dessert'],
                diner: ['entree', 'plat', 'accompagnement', 'laitage', 'dessert'],
                petitdejeuner: ['plat', 'laitage', 'dessert'],
                gouter: ['plat', 'laitage']
            },
            optimizeUrl: '{{ path('tenant_menus_optimize') }}'
        };

        let optimizationModal = null;
        let optimizationSuggestions = [];

        function escapeHtml(value) {
            return String(value ?? '')
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#039;');
        }

        function setOptimizationState(state) {
            const paramsSection = document.getElementById('optimization-params-section');
            const loadingSection = document.getElementById('optimization-loading-section');
            const resultsSection = document.getElementById('optimization-results-section');
            const generateBtn = document.getElementById('optimization-generate-btn');
            const backBtn = document.getElementById('optimization-back-btn');

            paramsSection.classList.toggle('d-none', state !== 'params');
            loadingSection.classList.toggle('d-none', state !== 'loading');
            resultsSection.classList.toggle('d-none', state !== 'results');
            generateBtn.disabled = state === 'loading';
            backBtn.disabled = state !== 'results';
        }

        function collectOptimizationFilters() {
            const allergenAliases = {
                lait: 'lactose'
            };
            const grouped = {};
            document.querySelectorAll('.optimization-allergen-cb:checked').forEach(function (checkbox) {
                const day = checkbox.dataset.day;
                if (!grouped[day]) {
                    grouped[day] = [];
                }
                grouped[day].push(allergenAliases[checkbox.value] || checkbox.value);
            });
            return grouped;
        }

        function collectOptimizationPonderations() {
            return {
                cout:       parseInt(document.getElementById('pond-cout').value       || '55', 10),
                variete:    parseInt(document.getElementById('pond-variete').value    || '30', 10),
                couverture: parseInt(document.getElementById('pond-couverture').value || '15', 10),
            };
        }

        function updatePonderationsDisplay() {
            const cout       = parseInt(document.getElementById('pond-cout').value, 10);
            const variete    = parseInt(document.getElementById('pond-variete').value, 10);
            const couverture = parseInt(document.getElementById('pond-couverture').value, 10);
            const sum = cout + variete + couverture;

            document.getElementById('pond-cout-val').textContent       = cout;
            document.getElementById('pond-variete-val').textContent    = variete;
            document.getElementById('pond-couverture-val').textContent = couverture;
            document.getElementById('pond-sum-val').textContent        = sum;

            const warning = document.getElementById('pond-sum-warning');
            warning.classList.toggle('d-none', sum === 100);

            if (sum > 0) {
                document.getElementById('pond-bar-cout').style.width       = ((cout / sum) * 100) + '%';
                document.getElementById('pond-bar-variete').style.width    = ((variete / sum) * 100) + '%';
                document.getElementById('pond-bar-couverture').style.width = ((couverture / sum) * 100) + '%';
            }
        }

        function renderOptimizationSuggestions(suggestions) {
            const container = document.getElementById('optimization-results-container');

            if (!suggestions.length) {
                container.innerHTML = '<div class="alert alert-warning mb-0">Aucune suggestion disponible.</div>';
                return;
            }

            container.innerHTML = suggestions.map(function (suggestion, index) {
                const pond = suggestion.score.ponderations || { cout: 55, variete: 30, couverture: 15 };

                const rows = suggestion.menus.map(function (menu) {
                    return '' +
                        '<tr>' +
                        '<td><strong>' + escapeHtml(menu.jour.charAt(0).toUpperCase() + menu.jour.slice(1)) + '</strong></td>' +
                        '<td>' + escapeHtml(optimizationConfig.services[menu.service] || menu.service) + '</td>' +
                        '<td>' + escapeHtml(menu.entree || '—') + '</td>' +
                        '<td>' + escapeHtml(menu.plat || '—') + '</td>' +
                        '<td>' + escapeHtml(menu.accompagnement || '—') + '</td>' +
                        '<td>' + escapeHtml(menu.laitage || '—') + '</td>' +
                        '<td>' + escapeHtml(menu.dessert || '—') + '</td>' +
                        '<td class="text-end fw-semibold">' + Number(menu.estimated_cost_per_person || 0).toFixed(2) + ' €</td>' +
                        '</tr>';
                }).join('');

                return '' +
                    '<div class="card shadow-sm border-0 mb-3">' +
                    '<div class="card-header bg-light d-flex justify-content-between align-items-center flex-wrap gap-2">' +
                    '<div><strong>Option ' + (index + 1) + '</strong> <span class="badge bg-success ms-2">Score ' + suggestion.score.total + '/100</span></div>' +
                    '<div class="small text-muted">Coût: ' + suggestion.score.cout + '/100 (×' + pond.cout + ')' +
                    ' · Variété: ' + suggestion.score.variete + '/100 (×' + pond.variete + ')' +
                    ' · Couverture: ' + suggestion.score.couverture + '/100 (×' + pond.couverture + ')</div>' +
                    '</div>' +
                    '<div class="card-body">' +
                    '<div class="row g-3 mb-3">' +
                    '<div class="col-md-3"><div class="border rounded p-2 h-100"><div class="small text-muted">Coût moyen</div><div class="fw-semibold">' + Number(suggestion.statistiques.cout_moyen_unitaire || 0).toFixed(2) + ' €/convive</div></div></div>' +
                    '<div class="col-md-3"><div class="border rounded p-2 h-100"><div class="small text-muted">Budget utilisé</div><div class="fw-semibold">' + (suggestion.statistiques.pourcentage_budget !== null ? Number(suggestion.statistiques.pourcentage_budget).toFixed(1) + ' %' : '—') + '</div></div></div>' +
                    '<div class="col-md-3"><div class="border rounded p-2 h-100"><div class="small text-muted">Coût total semaine</div><div class="fw-semibold">' + Number(suggestion.statistiques.cout_total_semaine || 0).toFixed(2) + ' €</div></div></div>' +
                    '<div class="col-md-3"><div class="border rounded p-2 h-100"><div class="small text-muted">Recettes uniques</div><div class="fw-semibold">' + suggestion.statistiques.recettes_uniques + '</div></div></div>' +
                    '</div>' +
                    '<div class="table-responsive">' +
                    '<table class="table table-sm table-bordered optimization-result-table align-middle">' +
                    '<thead class="table-light"><tr><th>Jour</th><th>Service</th><th>Entrée</th><th>Plat</th><th>Accompagnement</th><th>Laitage</th><th>Dessert</th><th class="text-end">Coût</th></tr></thead>' +
                    '<tbody>' + rows + '</tbody>' +
                    '</table>' +
                    '</div>' +
                    '<div class="mt-3 text-end">' +
                    '<button type="button" class="btn btn-success" data-optimization-apply="' + index + '">' +
                    '<i class="fas fa-check me-1"></i>Appliquer cette suggestion' +
                    '</button>' +
                    '</div>' +
                    '</div>' +
                    '</div>';
            }).join('');
        }

        function activateFirstSuggestedTab(menus) {
            const first = menus[0];
            if (!first) {
                return;
            }

            const target = document.getElementById('tab-' + first.jour + '-btn');
            if (target) {
                bootstrap.Tab.getOrCreateInstance(target).show();
            }
        }

        function applyOptimizationSuggestion(index) {
            const suggestion = optimizationSuggestions[index];
            if (!suggestion) {
                return;
            }

            const effectif = document.getElementById('optimization-effectif').value;

            suggestion.menus.forEach(function (menu) {
                const components = optimizationConfig.serviceComponents[menu.service] || optimizationConfig.serviceComponents.dejeuner;

                components.forEach(function (component) {
                    const selector = '[name="menus[' + menu.service + '][' + menu.jour + '][' + component + ']"]';
                    const input = document.querySelector(selector);
                    if (!input) {
                        return;
                    }

                    input.value = menu[component] || '';
                    input.dispatchEvent(new Event('input', { bubbles: true }));
                });

                const effectifInput = document.querySelector('[name="menus[' + menu.service + '][' + menu.jour + '][effectif_prevu]"]');
                if (effectifInput) {
                    effectifInput.value = effectif;
                    effectifInput.dispatchEvent(new Event('input', { bubbles: true }));
                }
            });

            activateFirstSuggestedTab(suggestion.menus);
            optimizationModal.hide();
        }

        async function generateOptimizationSuggestions() {
            setOptimizationState('loading');

            try {
                const response = await fetch(optimizationConfig.optimizeUrl, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        effectif: parseInt(document.getElementById('optimization-effectif').value || '0', 10),
                        budget_max: parseFloat(document.getElementById('optimization-budget').value || '0'),
                        nb_suggestions: parseInt(document.getElementById('optimization-count').value || '3', 10),
                        jours: optimizationConfig.jours,
                        services: Object.keys(optimizationConfig.services),
                        filtres_allergenes: collectOptimizationFilters(),
                        ponderations: collectOptimizationPonderations()
                    })
                });

                const data = await response.json();
                if (!response.ok || !data.success) {
                    throw new Error(data.message || 'Impossible de générer des suggestions.');
                }

                optimizationSuggestions = data.suggestions || [];
                renderOptimizationSuggestions(optimizationSuggestions);
                setOptimizationState('results');
            } catch (error) {
                setOptimizationState('params');
                alert(error.message || 'Erreur lors de la génération automatique.');
            }
        }

        document.addEventListener('DOMContentLoaded', function() {
            optimizationModal = new bootstrap.Modal(document.getElementById('menuOptimizationModal'));

            ['btn-optimisation-auto', 'btn-optimisation-auto-bottom'].forEach(function (id) {
                const button = document.getElementById(id);
                if (button) {
                    button.addEventListener('click', function () {
                        setOptimizationState('params');
                        optimizationSuggestions = [];
                        document.getElementById('optimization-results-container').innerHTML = '';
                        optimizationModal.show();
                    });
                }
            });

            document.getElementById('optimization-generate-btn').addEventListener('click', generateOptimizationSuggestions);
            document.getElementById('optimization-back-btn').addEventListener('click', function () {
                setOptimizationState('params');
            });

            document.getElementById('optimization-results-container').addEventListener('click', function (event) {
                const trigger = event.target.closest('[data-optimization-apply]');
                if (!trigger) {
                    return;
                }

                applyOptimizationSuggestion(parseInt(trigger.getAttribute('data-optimization-apply'), 10));
            });

            // Câblage des sliders de pondération
            document.querySelectorAll('.optimization-pond').forEach(function (slider) {
                slider.addEventListener('input', function () {
                    const valSpan = document.getElementById(this.getAttribute('data-val'));
                    if (valSpan) {
                        valSpan.textContent = this.value;
                    }
                    updatePonderationsDisplay();
                });
            });
        });

        // Auto-calcul numéro de semaine + dates à partir de la date de début
        document.querySelector('[name="date_debut"]')?.addEventListener('change', function () {
            const d = new Date(this.value);
            if (isNaN(d)) return;

            const janFour = new Date(d.getFullYear(), 0, 4);
            const startOfWeek1 = new Date(janFour);
            startOfWeek1.setDate(janFour.getDate() - ((janFour.getDay() + 6) % 7));
            const diffDays = Math.round((d - startOfWeek1) / 86400000);
            const weekNum = Math.floor(diffDays / 7) + 1;

            document.querySelector('[name="numero_semaine"]').value = weekNum;
            document.querySelector('[name="annee"]').value = d.getFullYear();

            const fin = new Date(d);
            fin.setDate(d.getDate() + 6);
            document.querySelector('[name="date_fin"]').value = fin.toISOString().split('T')[0];
        });
    </script>
{% endblock %}