{% extends 'admin/layout.html.twig' %}
{% block title %}Nouvelle date — WTL{% endblock %}

{% block admin_body %}
{% include 'admin/ui/_page_header.html.twig' with {
    page_eyebrow: 'Dates de concert',
    page_title: 'Nouvelle date',
    page_subtitle: 'Les informations indispensables d’abord. Le contenu public et les options restent modifiables plus tard.',
    page_actions: [{label: 'Retour aux dates', href: path('admin_concert_date_index'), icon: 'bi-arrow-left'}]
} %}

{% if formError %}<div class="alert alert-danger" role="alert"><i class="bi bi-exclamation-triangle me-2"></i>{{ formError }}</div>{% endif %}

<form method="post" action="{{ path('admin_concert_date_new') }}" enctype="multipart/form-data" class="admin-form-stack">
    <input type="hidden" name="_token" value="{{ csrf_token('concert-date-new') }}">

    <section class="card admin-section-card">
        <div class="card-body">
            <div class="d-flex align-items-start gap-3 mb-4"><span class="step-marker">1</span><div><h2 class="h5 mb-1">Où et quand ?</h2><p class="text-secondary mb-0">Ces deux informations suffisent pour programmer la date.</p></div></div>
            <div class="row g-3">
                <div class="col-lg-7">
                    <label class="form-label required" for="concertVenue">Lieu</label>
                    <select class="form-select" id="concertVenue" name="venue_id" required>
                        <option value="">Rechercher un lieu…</option>
                        {% for venue in venues %}<option value="{{ venue.id }}" {{ (values.venue_id|default('') ~ '') == (venue.id ~ '') ? 'selected' : '' }}>{{ venue.name }} — {{ venue.city }}</option>{% endfor %}
                    </select>
                    <div class="form-text">Le lieu n’existe pas ? <a href="{{ path('admin_venue_new') }}">Créer un lieu</a>, puis revenir ici.</div>
                </div>
                <div class="col-sm-7 col-lg-3"><label class="form-label required" for="eventDate">Date</label><input class="form-control" id="eventDate" type="date" name="event_date" value="{{ values.event_date|default('') }}" required></div>
                <div class="col-sm-5 col-lg-2"><label class="form-label" for="startTime">Début</label><input class="form-control" id="startTime" type="time" name="start_time" value="{{ values.start_time|default('') }}"></div>
            </div>
            <div class="alert alert-light border mt-4 mb-0"><i class="bi bi-info-circle me-2"></i>La validation crée la date et son dossier de prospection au stade <strong>Date programmée</strong>. Une prospection active déjà présente pour ce lieu sera ouverte à la place.</div>
        </div>
    </section>

    <section class="card admin-section-card">
        <div class="card-body">
            <div class="d-flex align-items-start gap-3 mb-3"><span class="step-marker">2</span><div><h2 class="h5 mb-1">Publication</h2><p class="text-secondary mb-0">La date reste masquée tant que vous ne choisissez pas de la publier.</p></div></div>
            {% set mode = values.publication_mode|default('hidden') %}
            <div class="publication-options">
                <label class="choice-row"><input type="radio" name="publication_mode" value="hidden" {{ mode == 'hidden' ? 'checked' : '' }}><span><strong>Ne pas publier</strong><small>Visible uniquement dans le back-office.</small></span></label>
                <label class="choice-row"><input type="radio" name="publication_mode" value="public" {{ mode == 'public' ? 'checked' : '' }}><span><strong>Publier maintenant</strong><small>Visible dès la création si les autres conditions sont réunies.</small></span></label>
                <label class="choice-row"><input type="radio" name="publication_mode" value="scheduled" {{ mode == 'scheduled' ? 'checked' : '' }}><span><strong>Publier plus tard</strong><small>Choisir une date et une heure de publication.</small></span></label>
            </div>
            <div id="publicationDateWrap" class="mt-3 {{ mode == 'scheduled' ? '' : 'd-none' }}"><label class="form-label required" for="publicationDate">Date et heure de publication</label><input class="form-control" id="publicationDate" type="datetime-local" name="publication_date" value="{{ values.publication_date|default('') }}"></div>
        </div>
    </section>

    <details class="card admin-section-card advanced-options" {{ values.public_title|default('') or values.public_description|default('') or values.ticket_url|default('') ? 'open' : '' }}>
        <summary class="card-header bg-white"><span><i class="bi bi-sliders me-2"></i><strong>Options avancées</strong><small>Horaires détaillés, contenu public, confidentialité, affiche et liens</small></span></summary>
        <div class="card-body">
            <div class="row g-3">
                <div class="col-sm-6"><label class="form-label">Ouverture des portes</label><input class="form-control" type="time" name="doors_time" value="{{ values.doors_time|default('') }}"></div>
                <div class="col-sm-6"><label class="form-label">Fin estimée</label><input class="form-control" type="time" name="end_time" value="{{ values.end_time|default('') }}"></div>
                <div class="col-12"><label class="form-label">Titre public</label><input class="form-control" name="public_title" value="{{ values.public_title|default('') }}"><div class="form-text">Laissez vide pour utiliser le titre automatique compatible avec les réglages de confidentialité.</div></div>
                <div class="col-md-6"><label class="form-label">Description publique</label><textarea class="form-control" name="public_description" rows="4">{{ values.public_description|default('') }}</textarea></div>
                <div class="col-md-6"><label class="form-label">Informations pratiques</label><textarea class="form-control" name="practical_information" rows="4">{{ values.practical_information|default('') }}</textarea></div>
                <div class="col-12"><div class="border rounded p-3 bg-light"><strong class="d-block mb-2">Informations de lieu visibles publiquement</strong><div class="row g-2"><div class="col-md-6"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" name="show_public_venue" value="1" id="showVenue" {{ values is empty or values.show_public_venue|default(false) ? 'checked' : '' }}><label class="form-check-label" for="showVenue">Afficher le nom du lieu</label></div></div><div class="col-md-6"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" name="show_public_city" value="1" id="showCity" {{ values is empty or values.show_public_city|default(false) ? 'checked' : '' }}><label class="form-check-label" for="showCity">Afficher la ville</label></div></div></div><div class="form-text">Si le lieu est masqué, évitez de le citer dans les textes libres.</div></div></div>
                <div class="col-md-4"><label class="form-label">Lien billetterie</label><input class="form-control" type="url" name="ticket_url" value="{{ values.ticket_url|default('') }}" inputmode="url"></div>
                <div class="col-md-4"><label class="form-label">Lien réservation</label><input class="form-control" type="url" name="booking_url" value="{{ values.booking_url|default('') }}" inputmode="url"></div>
                <div class="col-md-4"><label class="form-label">Lien externe</label><input class="form-control" type="url" name="external_url" value="{{ values.external_url|default('') }}" inputmode="url"></div>
                <div class="col-12"><label class="form-label">Affiche</label><input class="form-control" type="file" name="poster" accept="image/jpeg,image/png,image/webp,application/pdf"></div>
                <div class="col-sm-4"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" name="featured" value="1" id="featured" {{ values.featured|default(false) ? 'checked' : '' }}><label class="form-check-label" for="featured">Mettre en avant</label></div></div>
                <div class="col-sm-4"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" name="archive_visible" value="1" id="archiveVisible" {{ values is empty or values.archive_visible|default(false) ? 'checked' : '' }}><label class="form-check-label" for="archiveVisible">Archives publiques</label></div></div>
                <div class="col-sm-4"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" name="sold_out" value="1" id="soldOut" {{ values.sold_out|default(false) ? 'checked' : '' }}><label class="form-check-label" for="soldOut">Concert complet</label></div></div>
            </div>
        </div>
    </details>

    <div class="sticky-form-actions"><a class="btn btn-outline-secondary" href="{{ path('admin_concert_date_index') }}">Annuler</a><button class="btn btn-dark" type="submit"><i class="bi bi-check2-circle me-1"></i>Créer la date</button></div>
</form>
{% endblock %}

{% block javascripts %}{{ parent() }}
<script>
document.addEventListener('DOMContentLoaded', () => {
    const dateInput = document.getElementById('publicationDate');
    const wrap = document.getElementById('publicationDateWrap');
    const refresh = () => { const scheduled = document.querySelector('input[name="publication_mode"]:checked')?.value === 'scheduled'; wrap.classList.toggle('d-none', !scheduled); dateInput.required = scheduled; };
    document.querySelectorAll('input[name="publication_mode"]').forEach(input => input.addEventListener('change', refresh));
    refresh();
    if (window.jQuery?.fn?.select2) $('#concertVenue').select2({theme:'bootstrap-5', width:'100%', placeholder:'Rechercher un lieu'});
});
</script>
{% endblock %}