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

{% block title %}Configuration Restaurant{% endblock %}

{% block body %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="h3 mb-0"><i class="fas fa-sliders-h me-2"></i>Configuration</h1>
</div>

{# ── Onglets navigation configuration ───────────────────────────────────── #}
<ul class="nav nav-tabs mb-4">
    <li class="nav-item">
        <a class="nav-link" href="{{ path('tenant_configuration_index') }}">
            <i class="fas fa-cog me-1"></i>Général
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link active" href="{{ path('tenant_configuration_restaurant') }}">
            <i class="fas fa-utensils me-1"></i>Restaurant
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="{{ path('tenant_configuration_email') }}">
            <i class="fas fa-envelope me-1"></i>Email
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="{{ path('tenant_configuration_notifications') }}">
            <i class="fas fa-bell me-1"></i>Notifications
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="{{ path('tenant_configuration_personnalisation') }}">
            <i class="fas fa-palette me-1"></i>Personnalisation
        </a>
    </li>
</ul>

{% for msg in app.flashes('success') %}
    <div class="alert alert-success alert-dismissible fade show">{{ msg }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
{% endfor %}
{% for msg in app.flashes('error') %}
    <div class="alert alert-danger alert-dismissible fade show">{{ msg }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
{% endfor %}

<form method="post" action="{{ path('tenant_configuration_restaurant') }}">
    <input type="hidden" name="_token" value="{{ csrf_token('config_restaurant') }}">

    <div class="row g-4">

        {# ── Colonne gauche ───────────────────────────────────────────────── #}
        <div class="col-lg-6">

            {# Informations générales #}
            <div class="card border-0 shadow-sm rounded-3 mb-4">
                <div class="card-header bg-white border-bottom fw-semibold py-3">
                    <i class="fas fa-school me-2 text-primary"></i>Informations générales
                </div>
                <div class="card-body p-4">
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Nom de l'établissement</label>
                        <input type="text" name="nom_etablissement" class="form-control"
                               value="{{ config.nom_etablissement }}"
                               placeholder="Ex : Restaurant Scolaire de Leignes-sur-Fontaine">
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Type d'établissement</label>
                        <select name="type_etablissement" class="form-select">
                            <option value="ecole"      {{ config.type_etablissement == 'ecole'      ? 'selected' }}>École</option>
                            <option value="ehpad"      {{ config.type_etablissement == 'ehpad'      ? 'selected' }}>EHPAD</option>
                            <option value="restaurant" {{ config.type_etablissement == 'restaurant' ? 'selected' }}>Restaurant</option>
                            <option value="autre"      {{ config.type_etablissement == 'autre'      ? 'selected' }}>Autre</option>
                        </select>
                    </div>
                    <div class="row g-3">
                        <div class="col-6">
                            <label class="form-label fw-semibold">Effectif par défaut</label>
                            <input type="number" name="effectif_par_defaut" class="form-control"
                                   value="{{ config.effectif_par_defaut }}" min="0">
                        </div>
                        <div class="col-6">
                            <label class="form-label fw-semibold">Budget par défaut (€)</label>
                            <input type="number" name="budget_par_defaut" class="form-control"
                                   value="{{ config.budget_par_defaut }}" min="0" step="0.01">
                        </div>
                    </div>
                </div>
            </div>

            {# Services proposés #}
            <div class="card border-0 shadow-sm rounded-3 mb-4">
                <div class="card-header bg-white border-bottom fw-semibold py-3">
                    <i class="fas fa-concierge-bell me-2 text-primary"></i>Services proposés
                </div>
                <div class="card-body p-4">
                    {% set services_labels = {
                        'petit_dejeuner': 'Petit-déjeuner',
                        'dejeuner':       'Déjeuner',
                        'gouter':         'Goûter',
                        'diner':          'Dîner'
                    } %}
                    <div class="row g-2">
                    {% for key, label in services_labels %}
                        <div class="col-6">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox"
                                       name="service_{{ key }}" id="svc_{{ key }}"
                                       {{ key in config.services ? 'checked' }}>
                                <label class="form-check-label" for="svc_{{ key }}">{{ label }}</label>
                            </div>
                        </div>
                    {% endfor %}
                    </div>
                </div>
            </div>

            {# Objectifs KPI #}
            <div class="card border-0 shadow-sm rounded-3">
                <div class="card-header bg-white border-bottom fw-semibold py-3">
                    <i class="fas fa-chart-line me-2 text-primary"></i>Objectifs KPI
                </div>
                <div class="card-body p-4">
                    <div class="row g-3">
                        <div class="col-6">
                            <label class="form-label fw-semibold small">Food cost max (%)</label>
                            <input type="number" name="kpi_food_cost_max" class="form-control"
                                   value="{{ config.objectifs_kpi.food_cost_max ?? 30 }}"
                                   min="0" max="100" step="0.1">
                        </div>
                        <div class="col-6">
                            <label class="form-label fw-semibold small">Marge repas min (€)</label>
                            <input type="number" name="kpi_marge_repas_min" class="form-control"
                                   value="{{ config.objectifs_kpi.marge_repas_min ?? 3 }}"
                                   min="0" step="0.01">
                        </div>
                        <div class="col-6">
                            <label class="form-label fw-semibold small">Coût repas max (€)</label>
                            <input type="number" name="kpi_cout_repas_max" class="form-control"
                                   value="{{ config.objectifs_kpi.cout_repas_max ?? 4.5 }}"
                                   min="0" step="0.01">
                        </div>
                        <div class="col-6">
                            <label class="form-label fw-semibold small">Taux service min (%)</label>
                            <input type="number" name="kpi_taux_service_min" class="form-control"
                                   value="{{ config.objectifs_kpi.taux_service_min ?? 80 }}"
                                   min="0" max="100" step="1">
                        </div>
                    </div>
                </div>
            </div>

        </div>

        {# ── Colonne droite ───────────────────────────────────────────────── #}
        <div class="col-lg-6">

            {# Jours d'ouverture #}
            <div class="card border-0 shadow-sm rounded-3 mb-4">
                <div class="card-header bg-white border-bottom fw-semibold py-3">
                    <i class="fas fa-calendar-week me-2 text-primary"></i>Jours d'ouverture
                </div>
                <div class="card-body p-4">
                    <div class="d-flex flex-wrap gap-2">
                    {% for en, fr in jours_disponibles %}
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox"
                                   name="jour_{{ en }}" id="jour_{{ en }}"
                                   {{ en in config.jours_ouverture ? 'checked' }}>
                            <label class="form-check-label" for="jour_{{ en }}">{{ fr }}</label>
                        </div>
                    {% endfor %}
                    </div>
                </div>
            </div>

            {# Périodes de fermeture #}
            <div class="card border-0 shadow-sm rounded-3">
                <div class="card-header bg-white border-bottom fw-semibold py-3 d-flex justify-content-between align-items-center">
                    <span><i class="fas fa-door-closed me-2 text-primary"></i>Périodes de fermeture</span>                    <button type="button" class="btn btn-sm btn-outline-primary" id="btn-add-periode">
                        <i class="fas fa-plus me-1"></i>Ajouter
                    </button>
                </div>
                <div class="card-body p-4">
                    <div id="periodes-container">
                    {% if config.periodes_fermeture is empty %}
                        <p class="text-muted small mb-2" id="no-periodes">Aucune période de fermeture configurée.</p>
                    {% endif %}
                    {% for periode in config.periodes_fermeture %}
                        <div class="periode-row border rounded-2 p-3 mb-2 bg-light">
                            <div class="row g-2 align-items-end">
                                <div class="col-4">
                                    <label class="form-label small fw-semibold mb-1">Début</label>
                                    <input type="date" name="periode_debut[]" class="form-control form-control-sm"
                                           value="{{ periode.debut }}">
                                </div>
                                <div class="col-4">
                                    <label class="form-label small fw-semibold mb-1">Fin</label>
                                    <input type="date" name="periode_fin[]" class="form-control form-control-sm"
                                           value="{{ periode.fin }}">
                                </div>
                                <div class="col-3">
                                    <label class="form-label small fw-semibold mb-1">Libellé</label>
                                    <input type="text" name="periode_libelle[]" class="form-control form-control-sm"
                                           value="{{ periode.libelle }}" placeholder="Ex : Été">
                                </div>
                                <div class="col-1 text-end">
                                    <button type="button" class="btn btn-sm btn-outline-danger btn-remove-periode">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                    </div>
                </div>
            </div>

        </div>
    </div>

    {# ── Pondérations optimisation des menus (pleine largeur) ────────────── #}
    <div class="card border-0 shadow-sm rounded-3 mt-4">
        <div class="card-header bg-white border-bottom fw-semibold py-3">
            <i class="fas fa-sliders me-2 text-primary"></i>Pondérations — Optimisation automatique des menus
        </div>
        <div class="card-body p-4">
            <p class="text-muted small mb-3">
                Ces poids définissent l'importance relative de chaque critère dans le score de l'optimisation automatique des menus.
                Leur somme est normalisée automatiquement lors du calcul.
            </p>
            <div class="row g-4">
                <div class="col-md-4">
                    <label class="form-label fw-semibold">
                        <span class="badge bg-danger me-1">&nbsp;</span>
                        Coût : <span id="cfg-pond-cout-val">{{ (config.ponderations_scores.cout ?? 55)|number_format(0) }}</span>%
                    </label>
                    <input type="range" class="form-range cfg-pond-slider" id="cfg-pond-cout" name="pond_cout"
                           min="0" max="100" step="5" value="{{ config.ponderations_scores.cout ?? 55 }}"
                           data-val-id="cfg-pond-cout-val">
                    <div class="small text-muted">Favorise les menus moins coûteux</div>
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-semibold">
                        <span class="badge bg-warning me-1">&nbsp;</span>
                        Variété : <span id="cfg-pond-variete-val">{{ (config.ponderations_scores.variete ?? 30)|number_format(0) }}</span>%
                    </label>
                    <input type="range" class="form-range cfg-pond-slider" id="cfg-pond-variete" name="pond_variete"
                           min="0" max="100" step="5" value="{{ config.ponderations_scores.variete ?? 30 }}"
                           data-val-id="cfg-pond-variete-val">
                    <div class="small text-muted">Favorise la diversité des recettes</div>
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-semibold">
                        <span class="badge bg-info me-1">&nbsp;</span>
                        Couverture : <span id="cfg-pond-couverture-val">{{ (config.ponderations_scores.couverture ?? 15)|number_format(0) }}</span>%
                    </label>
                    <input type="range" class="form-range cfg-pond-slider" id="cfg-pond-couverture" name="pond_couverture"
                           min="0" max="100" step="5" value="{{ config.ponderations_scores.couverture ?? 15 }}"
                           data-val-id="cfg-pond-couverture-val">
                    <div class="small text-muted">Favorise les semaines complètes</div>
                </div>
            </div>
            <div class="mt-3">
                <div class="progress" style="height: 8px;">
                    <div class="progress-bar bg-danger" id="cfg-pond-bar-cout"
                         style="width: {{ config.ponderations_scores.cout ?? 55 }}%"></div>
                    <div class="progress-bar bg-warning" id="cfg-pond-bar-variete"
                         style="width: {{ config.ponderations_scores.variete ?? 30 }}%"></div>
                    <div class="progress-bar bg-info" id="cfg-pond-bar-couverture"
                         style="width: {{ config.ponderations_scores.couverture ?? 15 }}%"></div>
                </div>
                <p class="small text-muted mt-1 mb-0" id="cfg-pond-sum-info">
                    Somme : <strong id="cfg-pond-sum-val">{{ (config.ponderations_scores.cout ?? 55) + (config.ponderations_scores.variete ?? 30) + (config.ponderations_scores.couverture ?? 15) }}</strong>%
                    (normalisée automatiquement)
                </p>
            </div>
        </div>
    </div>

    <div class="mt-4">
        <button type="submit" class="btn btn-primary">
            <i class="fas fa-save me-1"></i>Enregistrer la configuration restaurant
        </button>
    </div>

</form>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
document.addEventListener('DOMContentLoaded', function () {
    const container = document.getElementById('periodes-container');
    const noPeriodes = document.getElementById('no-periodes');

    document.getElementById('btn-add-periode').addEventListener('click', function () {
        if (noPeriodes) noPeriodes.style.display = 'none';
        const row = document.createElement('div');
        row.className = 'periode-row border rounded-2 p-3 mb-2 bg-light';
        row.innerHTML = `
            <div class="row g-2 align-items-end">
                <div class="col-4">
                    <label class="form-label small fw-semibold mb-1">Début</label>
                    <input type="date" name="periode_debut[]" class="form-control form-control-sm">
                </div>
                <div class="col-4">
                    <label class="form-label small fw-semibold mb-1">Fin</label>
                    <input type="date" name="periode_fin[]" class="form-control form-control-sm">
                </div>
                <div class="col-3">
                    <label class="form-label small fw-semibold mb-1">Libellé</label>
                    <input type="text" name="periode_libelle[]" class="form-control form-control-sm" placeholder="Ex : Été">
                </div>
                <div class="col-1 text-end">
                    <button type="button" class="btn btn-sm btn-outline-danger btn-remove-periode">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>`;
        container.appendChild(row);
    });

    container.addEventListener('click', function (e) {
        const btn = e.target.closest('.btn-remove-periode');
        if (btn) {
            btn.closest('.periode-row').remove();
        }
    });

    // Pondérations sliders
    function updateCfgPondBar() {
        const cout      = parseInt(document.getElementById('cfg-pond-cout').value, 10);
        const variete   = parseInt(document.getElementById('cfg-pond-variete').value, 10);
        const couverture = parseInt(document.getElementById('cfg-pond-couverture').value, 10);
        const sum = cout + variete + couverture;

        document.getElementById('cfg-pond-sum-val').textContent = sum;

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

    document.querySelectorAll('.cfg-pond-slider').forEach(function (slider) {
        slider.addEventListener('input', function () {
            const valSpan = document.getElementById(this.getAttribute('data-val-id'));
            if (valSpan) {
                valSpan.textContent = this.value;
            }
            updateCfgPondBar();
        });
    });
});
</script>
{% endblock %}