{% extends 'gestion/_base.html.twig' %}
{% set active = 'parametres' %}

{% block title %}Paramètres{% endblock %}

{% block content %}
    <div class="adm-page-head">
        <div>
            <span class="adm-eyebrow">Configuration</span>
            <h1 class="adm-page-title">Informations du site</h1>
            <p class="adm-page-sub">Coordonnées, horaires et liens affichés sur la boutique — modifiés ici, visibles partout.</p>
        </div>
    </div>

    <div class="adm-grid adm-grid--2">
        {# ===== Contact ===== #}
        <form method="post" action="{{ path('gestion_parametres_save', {section: 'contact'}) }}" class="adm-card">
            <input type="hidden" name="_csrf_token" value="{{ csrf_token('gestion_parametres') }}">
            <h2 class="adm-card-title">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
                Contact
            </h2>
            <div class="adm-form">
                <div class="adm-field">
                    <input type="text" id="p-phone" name="phone" value="{{ values['contact.phone'] }}" placeholder=" ">
                    <label for="p-phone">Téléphone affiché partout</label>
                </div>
                <div class="adm-field">
                    <input type="email" id="p-email" name="email" value="{{ values['contact.email'] }}" placeholder=" ">
                    <label for="p-email">Email public</label>
                </div>
                <div class="adm-field">
                    <input type="text" id="p-address" name="address" value="{{ values['shop.address'] }}" placeholder=" ">
                    <label for="p-address">Adresse de la boutique</label>
                </div>
                <div style="text-align:right;"><button class="adm-btn adm-btn--sm" type="submit">Enregistrer</button></div>
            </div>
        </form>

        {# ===== Liens ===== #}
        <form method="post" action="{{ path('gestion_parametres_save', {section: 'links'}) }}" class="adm-card">
            <input type="hidden" name="_csrf_token" value="{{ csrf_token('gestion_parametres') }}">
            <h2 class="adm-card-title">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
                Liens & Google Business
            </h2>
            <div class="adm-form">
                <div class="adm-field">
                    <input type="url" id="p-review" name="google_review" value="{{ values['links.google_review'] }}" placeholder=" ">
                    <label for="p-review">Lien avis Google (emails d'avis)</label>
                </div>
                <p class="adm-field-help">Fiche Google → « Demander des avis » → copier le lien court (g.page/r/…).</p>
                <div class="adm-field">
                    <input type="url" id="p-gbp" name="gbp_dashboard" value="{{ values['links.gbp_dashboard'] }}" placeholder=" ">
                    <label for="p-gbp">Tableau de bord fiche Google</label>
                </div>
                <div style="display:flex;gap:10px;">
                    {% if values['links.gbp_dashboard'] %}
                        <a class="adm-btn adm-btn--ghost adm-btn--sm" href="{{ values['links.gbp_dashboard'] }}" target="_blank" rel="noopener">Ouvrir la fiche Google ↗</a>
                    {% endif %}
                </div>
                <div class="adm-form-row">
                    <div class="adm-field">
                        <input type="url" id="p-insta" name="instagram" value="{{ values['links.instagram'] }}" placeholder=" ">
                        <label for="p-insta">Instagram</label>
                    </div>
                    <div class="adm-field">
                        <input type="url" id="p-fb" name="facebook" value="{{ values['links.facebook'] }}" placeholder=" ">
                        <label for="p-fb">Facebook</label>
                    </div>
                </div>
                <div style="text-align:right;"><button class="adm-btn adm-btn--sm" type="submit">Enregistrer</button></div>
            </div>
        </form>

        {# ===== Horaires ===== #}
        <form method="post" action="{{ path('gestion_parametres_save', {section: 'hours'}) }}" class="adm-card">
            <input type="hidden" name="_csrf_token" value="{{ csrf_token('gestion_parametres') }}">
            <div style="display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:16px;">
                <h2 class="adm-card-title" style="margin:0;">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/></svg>
                    Horaires d'ouverture
                </h2>
                <a class="adm-btn adm-btn--ghost adm-btn--sm" href="https://www.google.com/maps/search/?api=1&query=Vulcan%27Aff%C3%BBtage%2C%2026%20Rue%20Saint-Dominique%2C%2063000%20Clermont-Ferrand" target="_blank" rel="noopener">Voir sur Google Maps ↗</a>
            </div>
            <div class="adm-form">
                {# Trois colonnes fixes (86px auto 1fr) débordaient sous 400 px :
                   .adm-hours-row bascule en jour + « fermé » sur la première
                   ligne, les quatre horaires en dessous (cf. §18 du DS). #}
                {% for key, label in days %}
                    {% set day = hoursWeek[key]|default({closed: true}) %}
                    {% set closed = day.closed is defined and day.closed %}
                    <div class="adm-hours-row">
                        <strong style="font-size:0.88rem;">{{ label }}</strong>
                        <label class="adm-check" style="font-size:0.8rem;">
                            <input type="checkbox" name="{{ key }}_closed" value="1" {{ closed ? 'checked' }} data-day-closed="{{ key }}">
                            Fermé
                        </label>
                        <div class="adm-hours-times{{ closed ? ' is-closed' }}" data-day-hours="{{ key }}">
                            <input type="time" name="{{ key }}_am_from" value="{{ day.am[0]|default('') }}" aria-label="{{ label }} — ouverture du matin">
                            <input type="time" name="{{ key }}_am_to" value="{{ day.am[1]|default('') }}" aria-label="{{ label }} — fermeture du matin">
                            <span class="adm-hours-sep" aria-hidden="true">/</span>
                            <input type="time" name="{{ key }}_pm_from" value="{{ day.pm[0]|default('') }}" aria-label="{{ label }} — ouverture de l'après-midi">
                            <input type="time" name="{{ key }}_pm_to" value="{{ day.pm[1]|default('') }}" aria-label="{{ label }} — fermeture de l'après-midi">
                        </div>
                    </div>
                {% endfor %}
                <div style="text-align:right;"><button class="adm-btn adm-btn--sm" type="submit">Enregistrer les horaires</button></div>
            </div>
        </form>

        {# ===== Livraisons ===== #}
        <div class="adm-card">
            <h2 class="adm-card-title">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="3" width="15" height="13" rx="1.5"/><path d="M16 8h4l3 3v5h-7V8z"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg>
                Modes de livraison
            </h2>

            <div class="adm-livr-static">
                <div class="adm-livr-static-head">
                    <strong>{{ clickAndCollect.libelle }}</strong>
                    <span class="adm-badge adm-badge--green">Gratuit</span>
                </div>
                <p class="adm-field-help" style="margin:2px 0 0;">Toujours disponible, non modifiable — c'est le seul mode de retrait proposé.</p>
            </div>

            <h3 style="font-size:0.85rem;margin:16px 0 8px;color:var(--v2-ink-soft);">Modes d'envoi</h3>
            {# Quatre colonnes fixes ne tiennent pas sous 500 px : .adm-livr-row
               repasse en flex (libellé pleine largeur, puis prix, puis
               visible et le bouton) sous 768 px — cf. §18 du DS. #}
            <form method="post" action="{{ path('gestion_parametres_livraison_save') }}">
                <input type="hidden" name="_csrf_token" value="{{ csrf_token('gestion_parametres') }}">
                <div id="livr-list" class="adm-form" style="gap:8px;">
                    {% for livraison in livraisons %}
                        <div class="adm-livr-row" data-livr-row>
                            <input type="hidden" name="livr_id[]" value="{{ livraison.id }}">
                            <input type="text" name="livr_libelle[]" value="{{ livraison.libelle }}" aria-label="Libellé du mode d'envoi">
                            <input type="text" name="livr_prix[]" value="{{ livraison.prix }}" inputmode="decimal" aria-label="Prix">
                            <input type="text" name="livr_delai[]" value="{{ livraison.delai }}" maxlength="100" placeholder="Délai (ex : 2 à 4 jours ouvrés)" aria-label="Délai d'acheminement annoncé">
                            <label class="adm-check" style="font-size:0.8rem;">
                                <input type="checkbox" data-livr-visible-toggle {{ livraison.visbilite.value == 'visible' ? 'checked' }}>
                                Visible
                            </label>
                            <input type="hidden" name="livr_visible[]" value="{{ livraison.visbilite.value == 'visible' ? '1' : '0' }}" data-livr-visible-hidden>
                        </div>
                    {% else %}
                        <div class="adm-callout adm-callout--warn" style="margin-bottom:0;">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
                            <span>Aucun mode d'envoi configuré — seul le Click & Collect sera proposé côté client.</span>
                        </div>
                    {% endfor %}
                </div>
                <div style="display:flex;justify-content:space-between;margin-top:12px;">
                    <button type="button" class="adm-btn adm-btn--ghost adm-btn--sm" id="livr-add">+ Ajouter un mode d'envoi</button>
                    <button class="adm-btn adm-btn--sm" type="submit">Enregistrer</button>
                </div>
            </form>
        </div>

        {# ===== Fermetures exceptionnelles ===== #}
        <form method="post" action="{{ path('gestion_parametres_save', {section: 'exceptional'}) }}" class="adm-card">
            <input type="hidden" name="_csrf_token" value="{{ csrf_token('gestion_parametres') }}">
            <div style="display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:16px;">
                <h2 class="adm-card-title" style="margin:0;">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/><path d="m14 15-4 4m0-4 4 4"/></svg>
                    Fermetures exceptionnelles
                </h2>
                <a class="adm-btn adm-btn--ghost adm-btn--sm" href="https://www.google.com/maps/search/?api=1&query=Vulcan%27Aff%C3%BBtage%2C%2026%20Rue%20Saint-Dominique%2C%2063000%20Clermont-Ferrand" target="_blank" rel="noopener">Voir sur Google Maps ↗</a>
            </div>
            <p class="adm-field-help" style="margin-top:0;">Affichées sur le site les jours concernés. Pensez à reporter aussi sur la fiche Google (bouton ci-dessus).</p>
            <div id="exc-list" class="adm-form" style="gap:8px;">
                {% for exc in exceptional %}
                    <div class="adm-exc-row" data-exc-row>
                        <input type="date" name="exc_date[]" value="{{ exc.date }}" aria-label="Date de fermeture">
                        <input type="text" name="exc_label[]" value="{{ exc.label }}" placeholder="Motif" aria-label="Motif de la fermeture">
                        <button type="button" class="adm-btn adm-btn--danger adm-btn--sm" data-exc-remove aria-label="Retirer cette date">✕</button>
                    </div>
                {% endfor %}
            </div>
            <div style="display:flex;justify-content:space-between;margin-top:12px;">
                <button type="button" class="adm-btn adm-btn--ghost adm-btn--sm" id="exc-add">+ Ajouter une date</button>
                <button class="adm-btn adm-btn--sm" type="submit">Enregistrer</button>
            </div>
        </form>

        {# ===== Gestion des emails ===== #}
        <form method="post" action="{{ path('gestion_parametres_save', {section: 'notify'}) }}" class="adm-card">
            <input type="hidden" name="_csrf_token" value="{{ csrf_token('gestion_parametres') }}">
            <h2 class="adm-card-title">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>
                Gestion des emails
            </h2>
            <label class="adm-check">
                <input type="checkbox" name="satisfaction_email" value="1" {{ values['notify.satisfaction_email'] == '1' ? 'checked' }}>
                Envoyer un mail de satisfaction automatique 2 jours après commande et/ou réception.
            </label>
            <p class="adm-field-help">Un email automatique sera envoyé au client 2 jours après la réception d'une commande de matériel (couteau, cravate western, affûtage) ou 2 jours après une commande d'élément numérique (carte cadeau).</p>
            <div style="text-align:right;"><button class="adm-btn adm-btn--sm" type="submit">Enregistrer</button></div>
        </form>
    </div>
{% endblock %}

{% block scripts %}
<script>
(function () {
    'use strict';
    document.addEventListener('change', function (e) {
        var closed = e.target.closest('[data-day-closed]');
        if (closed) {
            var zone = document.querySelector('[data-day-hours="' + closed.getAttribute('data-day-closed') + '"]');
            // L'état grisé passe par une classe : les styles restent dans le DS,
            // y compris la variante mobile de la ligne d'horaires.
            if (zone) { zone.classList.toggle('is-closed', closed.checked); }
        }
    });
    document.getElementById('exc-add').addEventListener('click', function () {
        var row = document.createElement('div');
        row.setAttribute('data-exc-row', '');
        row.className = 'adm-exc-row';
        row.innerHTML = '<input type="date" name="exc_date[]" aria-label="Date de fermeture">'
            + '<input type="text" name="exc_label[]" placeholder="Motif" aria-label="Motif de la fermeture">'
            + '<button type="button" class="adm-btn adm-btn--danger adm-btn--sm" data-exc-remove aria-label="Retirer cette date">✕</button>';
        document.getElementById('exc-list').appendChild(row);
    });
    document.getElementById('livr-add').addEventListener('click', function () {
        var row = document.createElement('div');
        row.setAttribute('data-livr-row', '');
        row.className = 'adm-livr-row';
        row.innerHTML = '<input type="hidden" name="livr_id[]" value="">'
            + '<input type="text" name="livr_libelle[]" placeholder="Ex : Colissimo domicile" aria-label="Libellé du mode d\'envoi">'
            + '<input type="text" name="livr_prix[]" placeholder="6,90" inputmode="decimal" aria-label="Prix">'
            + '<input type="text" name="livr_delai[]" maxlength="100" placeholder="Délai (ex : 2 à 4 jours ouvrés)" aria-label="Délai d\'acheminement annoncé">'
            + '<label class="adm-check" style="font-size:0.8rem;"><input type="checkbox" data-livr-visible-toggle checked> Visible</label>'
            + '<input type="hidden" name="livr_visible[]" value="1" data-livr-visible-hidden>'
            + '<button type="button" class="adm-btn adm-btn--danger adm-btn--sm" data-livr-remove aria-label="Retirer ce mode">✕</button>';
        document.getElementById('livr-list').appendChild(row);
    });
    document.addEventListener('change', function (e) {
        var toggle = e.target.closest('[data-livr-visible-toggle]');
        if (toggle) {
            toggle.closest('[data-livr-row]').querySelector('[data-livr-visible-hidden]').value = toggle.checked ? '1' : '0';
        }
    });
    document.addEventListener('click', function (e) {
        var rm = e.target.closest('[data-exc-remove]');
        if (rm) rm.closest('[data-exc-row]').remove();
        var livrRm = e.target.closest('[data-livr-remove]');
        if (livrRm) livrRm.closest('[data-livr-row]').remove();
    });
})();
</script>
{% endblock %}