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

{% block title %}{{ isNew ? 'Nouvelle campagne' : 'Campagne #' ~ banner.id }}{% endblock %}

{% block content %}
    <div class="adm-page-head">
        <div>
            <span class="adm-eyebrow">Communication</span>
            <h1 class="adm-page-title">{{ isNew ? 'Nouvelle campagne' : 'Modifier la campagne' }}</h1>
            {% if not isNew %}<p class="adm-page-sub adm-mono">#{{ banner.id }} · créée le {{ banner.createdAt|date('d/m/Y') }}</p>{% endif %}
        </div>
        <div class="adm-page-head-actions">
            <a class="adm-btn adm-btn--ghost" href="{{ path('gestion_bandeaux') }}">← Retour</a>
        </div>
    </div>

    <form method="post" class="adm-card" style="max-width:720px;">
        <input type="hidden" name="_csrf_token" value="{{ csrf_token('gestion_bandeau') }}">
        <div class="adm-form">
            <div class="adm-field">
                <textarea id="b-message" name="message" placeholder=" " required maxlength="500" style="min-height:90px;">{{ banner.message }}</textarea>
                <label for="b-message">Message affiché (500 caractères max)</label>
            </div>

            <div class="adm-form-row">
                <div class="adm-field">
                    <select id="b-type" name="type" required>
                        {% for type in types %}
                            <option value="{{ type.value }}" {{ banner.type.value == type.value ? 'selected' }}>{{ type.label }}</option>
                        {% endfor %}
                    </select>
                    <label for="b-type">Type de campagne</label>
                </div>
                <div class="adm-field">
                    <select id="b-mode" name="mode" required>
                        {% for mode in modes %}
                            <option value="{{ mode.value }}" {{ banner.mode.value == mode.value ? 'selected' }}>{{ mode.label }}</option>
                        {% endfor %}
                    </select>
                    <label for="b-mode">Mode d'affichage</label>
                </div>
            </div>

            {# Début : immédiat ou programmé #}
            {% set startIsNow = isNew %}
            <div class="adm-seg-group">
                <span class="adm-seg-group-label">Début d'affichage</span>
                <div class="adm-seg">
                    <label class="adm-seg-opt">
                        <input type="radio" name="start_mode" value="now" {{ startIsNow ? 'checked' }}>
                        <span>Immédiatement</span>
                    </label>
                    <label class="adm-seg-opt">
                        <input type="radio" name="start_mode" value="date" {{ not startIsNow ? 'checked' }}>
                        <span>À une date programmée</span>
                    </label>
                </div>
                <div class="adm-field" id="start-date-field" {{ startIsNow ? 'hidden' }}>
                    <input type="datetime-local" id="b-start" name="start_at" value="{{ banner.startAt ? banner.startAt|date('Y-m-d\\TH:i') }}" {{ not startIsNow ? 'required' }}>
                    <label for="b-start">Date et heure de début</label>
                </div>
            </div>

            {# Fin : jusqu'à désactivation manuelle ou date programmée #}
            {% set endIsOpen = isNew or banner.endAt is null %}
            <div class="adm-seg-group">
                <span class="adm-seg-group-label">Fin d'affichage</span>
                <div class="adm-seg">
                    <label class="adm-seg-opt">
                        <input type="radio" name="end_mode" value="desactivation" {{ endIsOpen ? 'checked' }}>
                        <span>Jusqu'à désactivation</span>
                    </label>
                    <label class="adm-seg-opt">
                        <input type="radio" name="end_mode" value="date" {{ not endIsOpen ? 'checked' }}>
                        <span>Jusqu'à une date et heure</span>
                    </label>
                </div>
                <div class="adm-field" id="end-date-field" {{ endIsOpen ? 'hidden' }}>
                    <input type="datetime-local" id="b-end" name="end_at" value="{{ banner.endAt ? banner.endAt|date('Y-m-d\\TH:i') }}" {{ not endIsOpen ? 'required' }}>
                    <label for="b-end">Date et heure de fin</label>
                </div>
            </div>

            {% set prioNiveau = banner.priorite < 0 ? 'faible' : (banner.priorite > 0 ? 'important' : 'standard') %}
            <div class="adm-seg-group">
                <span class="adm-seg-group-label">Priorité</span>
                <div class="adm-seg">
                    <label class="adm-seg-opt">
                        <input type="radio" name="priorite" value="-10" {{ prioNiveau == 'faible' ? 'checked' }}>
                        <span>Faible</span>
                    </label>
                    <label class="adm-seg-opt">
                        <input type="radio" name="priorite" value="0" {{ prioNiveau == 'standard' ? 'checked' }}>
                        <span>Standard</span>
                    </label>
                    <label class="adm-seg-opt">
                        <input type="radio" name="priorite" value="10" {{ prioNiveau == 'important' ? 'checked' }}>
                        <span>Important</span>
                    </label>
                </div>
            </div>

            <label class="adm-check">
                <input type="checkbox" name="actif" value="1" {{ isNew or banner.actif ? 'checked' }}>
                Campagne active
            </label>
            <p class="adm-field-help">Un seul bandeau s'affiche à la fois : celui dont la priorité est la plus élevée parmi les campagnes actives dans leur fenêtre de dates.</p>

            <div style="text-align:right;">
                <button type="submit" class="adm-btn">{{ isNew ? 'Créer la campagne' : 'Enregistrer' }}</button>
            </div>
        </div>
    </form>

    {# Aperçu live : rendu exact du bandeau tel qu'il apparaîtra sur la boutique. #}
    <link rel="stylesheet" href="{{ asset('styles/ds-v2-banner.css') }}">
    <div class="adm-card" style="max-width:720px;margin-top:16px;">
        <h2 class="adm-card-title">Aperçu du bandeau</h2>
        <div id="banner-preview" class="va-banner va-banner--preview">
            <div class="va-banner-inner"></div>
        </div>
        <p class="adm-field-help">Mis à jour en direct depuis le formulaire — le mode défilant est animé comme sur le site.</p>
    </div>
{% endblock %}

{% block scripts %}
<script src="{{ asset('scripts/ds-v2-banner.js') }}"></script>
<script>
(function () {
    'use strict';
    function renderPreview() {
        var msg = document.getElementById('b-message').value.trim() || 'Votre message d\'annonce…';
        var type = document.getElementById('b-type').value;
        var mode = document.getElementById('b-mode').value;
        var el = document.getElementById('banner-preview');
        el.className = 'va-banner va-banner--preview va-banner--' + type + ('defilant' === mode ? ' va-banner--defilant' : '');
        var inner = el.querySelector('.va-banner-inner');
        if ('defilant' === mode) {
            inner.innerHTML = '<div class="va-banner-track">'
                + '<span class="va-banner-msg"></span><span class="va-banner-msg" aria-hidden="true"></span></div>';
        } else {
            inner.innerHTML = '<p class="va-banner-msg"></p>';
        }
        Array.prototype.forEach.call(inner.querySelectorAll('.va-banner-msg'), function (span) {
            span.textContent = msg;
        });
        if ('defilant' === mode && window.vaBannerMarquee) { window.vaBannerMarquee(el); }
    }
    ['b-message', 'b-type', 'b-mode'].forEach(function (id) {
        var field = document.getElementById(id);
        field.addEventListener('input', renderPreview);
        field.addEventListener('change', renderPreview);
    });
    renderPreview();

    // Champs date conditionnels : visibles (et requis) seulement en mode programmé.
    function bindSeg(radioName, fieldId, dateValue) {
        var field = document.getElementById(fieldId);
        var input = field.querySelector('input');
        Array.prototype.forEach.call(document.querySelectorAll('input[name="' + radioName + '"]'), function (radio) {
            radio.addEventListener('change', function () {
                var isDate = 'date' === this.value;
                field.hidden = !isDate;
                input.required = isDate;
                if (isDate && !input.value && dateValue) { input.value = dateValue; }
            });
        });
    }
    bindSeg('start_mode', 'start-date-field', '{{ "now"|date("Y-m-d\\TH:i") }}');
    bindSeg('end_mode', 'end-date-field', '{{ "+7 days"|date("Y-m-d\\TH:i") }}');
})();
</script>
{% endblock %}