{% extends 'admin/layout.html.twig' %}
{% block title %}Dates de concert — WTL{% endblock %}
{% block admin_body %}
<div class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-center gap-3 mb-4">
    <div>
        <h1 class="h2 mb-1">Dates de concert</h1>
        <p class="text-secondary mb-0">Planning interne aujourd’hui, source des événements et archives du futur site public demain.</p>
    </div>
    {% if can_permission('CONCERT_DATE', 2) %}<button class="btn btn-dark btn-lg" data-bs-toggle="modal" data-bs-target="#newConcertModal"><i class="bi bi-calendar-plus me-2"></i>Nouvelle date</button>{% endif %}
</div>

<ul class="nav nav-tabs mb-3" role="tablist">
    <li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#upcomingDates"><i class="bi bi-calendar-event me-1"></i>À venir <span class="badge text-bg-dark ms-1">{{ upcoming|length }}</span></button></li>
    <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#archiveDates"><i class="bi bi-archive me-1"></i>Archives <span class="badge text-bg-secondary ms-1">{{ archives|length }}</span></button></li>
</ul>

<div class="tab-content">
<div class="tab-pane fade show active" id="upcomingDates">
    {% include 'admin/concert_date/_table.html.twig' with {items: upcoming, tableId: 'concertUpcoming', archiveMode: false} %}
</div>
<div class="tab-pane fade" id="archiveDates">
    <div class="alert alert-light border"><i class="bi bi-info-circle me-2"></i>Une date passée reste disponible pour la future timeline du site si <strong>Visible dans les archives</strong> est activé.</div>
    {% include 'admin/concert_date/_table.html.twig' with {items: archives, tableId: 'concertArchives', archiveMode: true} %}
</div>
</div>

{% if can_permission('CONCERT_DATE', 2) %}
<div class="modal fade" id="newConcertModal" tabindex="-1">
<div class="modal-dialog modal-xl concert-management-modal">
<div class="modal-content">
<form method="post" action="{{ path('admin_concert_date_new') }}" enctype="multipart/form-data" id="newConcertForm">
<input type="hidden" name="_token" value="{{ csrf_token('concert-date-new') }}">
<div class="modal-header"><div><h5 class="modal-title">Nouvelle date de concert</h5><div class="small text-secondary">La validation créera automatiquement une prospection déjà confirmée puis ouvrira son dossier.</div></div><button class="btn-close" type="button" data-bs-dismiss="modal"></button></div>
<div class="modal-body">
<div class="concert-wizard-steps mb-4">
    <div class="step active" data-step-dot="1"><span>1</span><small>Lieu</small></div><div class="line"></div>
    <div class="step" data-step-dot="2"><span>2</span><small>Date & horaires</small></div><div class="line"></div>
    <div class="step" data-step-dot="3"><span>3</span><small>Site public</small></div><div class="line"></div>
    <div class="step" data-step-dot="4"><span>4</span><small>Affiche & liens</small></div><div class="line"></div>
    <div class="step" data-step-dot="5"><span>5</span><small>Publication</small></div><div class="line"></div>
    <div class="step" data-step-dot="6"><span>6</span><small>Vérification</small></div>
</div>

<section class="concert-step" data-step="1">
    <h6 class="fw-bold mb-3">Dans quel lieu aura lieu le concert ?</h6>
    <label class="form-label required">Lieu existant</label>
    <select class="form-select concert-venue-select" name="venue_id" required>
        <option value="">Rechercher un lieu…</option>
        {% for venue in venues %}<option value="{{ venue.id }}">{{ venue.name }} — {{ venue.city }}</option>{% endfor %}
    </select>
    <div class="d-flex align-items-center gap-3 mt-3"><span class="text-secondary">Le lieu n’existe pas encore ?</span><button class="btn btn-outline-dark" type="button" data-bs-toggle="modal" data-bs-target="#quickVenueModal"><i class="bi bi-building-add me-1"></i>Créer le lieu sans quitter le wizard</button></div>
    <div class="alert alert-light border mt-4 mb-0"><i class="bi bi-lightbulb me-2"></i>Créer les lieux dès maintenant enrichit ta base pour les futures prospections et simplifie énormément les reprogrammations.</div>
</section>

<section class="concert-step d-none" data-step="2">
    <div class="row g-3">
        <div class="col-md-5"><label class="form-label required">Date du concert</label><input class="form-control" type="date" name="event_date" required></div>
        <div class="col-md-3"><label class="form-label">Ouverture des portes</label><input class="form-control" type="time" name="doors_time"></div>
        <div class="col-md-2"><label class="form-label">Début</label><input class="form-control" type="time" name="start_time"></div>
        <div class="col-md-2"><label class="form-label">Fin estimée</label><input class="form-control" type="time" name="end_time"></div>
    </div>
</section>

<section class="concert-step d-none" data-step="3">
    <div class="row g-3">
        <div class="col-12"><label class="form-label">Titre public</label><input class="form-control" name="public_title" placeholder="{{ currentProject ? (currentProject.publicName ?: currentProject.name) : 'Projet artistique' }} — Nom du lieu"><div class="form-text">Si vide, un titre sera proposé automatiquement avec le nom du lieu.</div></div>
        <div class="col-md-6"><label class="form-label">Description publique</label><textarea class="form-control" name="public_description" rows="5" placeholder="Quelques mots sur la soirée, le cadre, le concert…"></textarea></div>
        <div class="col-md-6"><label class="form-label">Informations pratiques</label><textarea class="form-control" name="practical_information" rows="5" placeholder="Tarif, accès, réservation conseillée, restauration…"></textarea></div>
        <div class="col-12"><div class="border rounded p-3 bg-light"><div class="fw-semibold mb-2">Informations de lieu visibles publiquement</div><div class="row g-3"><div class="col-md-6"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" name="show_public_venue" value="1" checked id="newShowPublicVenue"><label class="form-check-label" for="newShowPublicVenue">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" checked id="newShowPublicCity"><label class="form-check-label" for="newShowPublicCity">Afficher la ville</label></div></div></div><div class="form-text mt-2">Pour un événement privé, tu peux masquer le lieu et/ou la ville tout en publiant la date. Utilise le « Titre public » pour afficher par exemple « Événement privé » ou « Soirée privée ».</div></div></div>
        <div class="col-md-6"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" name="featured" value="1" id="newFeatured"><label class="form-check-label" for="newFeatured">Mettre cette date en avant sur le site</label></div></div>
        <div class="col-md-6"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" name="archive_visible" value="1" checked id="newArchiveVisible"><label class="form-check-label" for="newArchiveVisible">Conserver cette date dans les archives publiques après le concert</label></div></div>
    </div>
</section>

<section class="concert-step d-none" data-step="4">
    <div class="row g-4">
        <div class="col-lg-5"><label class="form-label">Affiche de l’événement</label><input class="form-control" type="file" name="poster" accept="image/jpeg,image/png,image/webp,application/pdf"><div class="form-text">JPEG, PNG, WebP ou PDF. L’affiche pourra enrichir la timeline et la fiche de l’événement sur le site.</div></div>
        <div class="col-lg-7"><div class="row g-3"><div class="col-12"><label class="form-label">Lien billetterie</label><input class="form-control" type="url" name="ticket_url" placeholder="https://..."></div><div class="col-12"><label class="form-label">Lien réservation</label><input class="form-control" type="url" name="booking_url" placeholder="https://..."></div><div class="col-12"><label class="form-label">Lien externe / page de l’événement</label><input class="form-control" type="url" name="external_url" placeholder="https://..."></div></div></div>
        <div class="col-12"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" name="sold_out" value="1" id="newSoldOut"><label class="form-check-label fw-semibold" for="newSoldOut">Concert complet</label></div></div>
    </div>
</section>

<section class="concert-step d-none" data-step="5">
    <h6 class="fw-bold">Quand cette date doit-elle apparaître sur le site ?</h6>
    <p class="text-secondary">Pas de vocabulaire technique : choisis simplement ce que tu veux faire.</p>
    <div class="row g-3 publication-choice">
        <div class="col-md-4"><label class="choice-card"><input type="radio" name="publication_mode" value="hidden" checked><span class="icon"><i class="bi bi-eye-slash"></i></span><strong>Ne pas publier</strong><small>La date reste uniquement visible dans le management.</small></label></div>
        <div class="col-md-4"><label class="choice-card"><input type="radio" name="publication_mode" value="public"><span class="icon"><i class="bi bi-megaphone"></i></span><strong>Publier maintenant</strong><small>La date pourra être affichée immédiatement sur le site.</small></label></div>
        <div class="col-md-4"><label class="choice-card"><input type="radio" name="publication_mode" value="scheduled"><span class="icon"><i class="bi bi-clock-history"></i></span><strong>Publier plus tard</strong><small>Choisis le moment où la date deviendra visible.</small></label></div>
    </div>
    <div id="newPublicationDateWrap" class="mt-4 d-none"><label class="form-label required">Date et heure de publication</label><input class="form-control" type="datetime-local" name="publication_date"></div>
</section>

<section class="concert-step d-none" data-step="6">
    <div class="alert alert-success-subtle border-success"><i class="bi bi-check-circle me-2"></i><strong>Prêt à créer la date.</strong> Une prospection au statut « Date confirmée » sera automatiquement créée et tu seras redirigé vers elle pour préparer devis, convention et fiche technique.</div>
    <div id="concertReview" class="border rounded p-4 bg-light"></div>
</section>
</div>
<div class="modal-footer justify-content-between"><button class="btn btn-outline-secondary d-none" type="button" id="concertPrev"><i class="bi bi-arrow-left me-1"></i>Précédent</button><div class="ms-auto d-flex gap-2"><button class="btn btn-dark" type="button" id="concertNext">Suivant <i class="bi bi-arrow-right ms-1"></i></button><button class="btn btn-success d-none" type="submit" id="concertSubmit"><i class="bi bi-check2-circle me-1"></i>Créer la date et préparer le dossier</button></div></div>
</form></div></div></div>

<div class="modal fade" id="quickVenueModal" tabindex="-1">
<div class="modal-dialog modal-xl concert-management-modal concert-quick-venue-modal"><div class="modal-content"><form id="quickVenueForm">
<input type="hidden" name="_token" value="{{ csrf_token('concert-date-venue-new') }}">
<div class="modal-header"><div><h5 class="modal-title">Créer un nouveau lieu</h5><div class="small text-secondary">Le lieu sera ajouté à la base puis sélectionné automatiquement dans le wizard de la date.</div></div><button class="btn-close" type="button" data-bs-dismiss="modal"></button></div>
<div class="modal-body"><div class="row g-3">
<div class="col-md-6"><label class="form-label required">Nom du lieu</label><input class="form-control" name="name" required></div><div class="col-md-6"><label class="form-label">Type de lieu</label><select class="form-select" name="venue_type_id"><option value="">—</option>{% for t in venueTypes %}<option value="{{ t.id }}">{{ t.name }}</option>{% endfor %}</select></div>
<div class="col-md-6"><label class="form-label">Raison sociale</label><input class="form-control" name="legal_name"></div><div class="col-md-6"><label class="form-label">Site / réseau social</label><input class="form-control" type="url" name="website"></div>
<div class="col-md-8"><label class="form-label">Adresse</label><input class="form-control" name="address"></div><div class="col-md-4"><label class="form-label">Code postal</label><input class="form-control" name="postal_code"></div>
<div class="col-md-5"><label class="form-label required">Ville</label><input class="form-control" name="city" required></div><div class="col-md-4"><label class="form-label">Département</label><input class="form-control" name="department"></div><div class="col-md-3"><label class="form-label">Pays</label><input class="form-control" name="country" value="France"></div>
<div class="col-md-4"><label class="form-label">Budget approximatif</label><div class="input-group"><input class="form-control" type="number" step="0.01" min="0" name="approximate_budget"><span class="input-group-text">€</span></div></div><div class="col-md-4"><label class="form-label">SIRET</label><input class="form-control" name="siret"></div><div class="col-md-4"><label class="form-label">N° TVA</label><input class="form-control" name="vat_number"></div><div class="col-md-6"><label class="form-label">E-mail facturation</label><input class="form-control" type="email" name="billing_email"></div>
<div class="col-12"><hr><h6>Premier contact <span class="text-secondary fw-normal">— facultatif</span></h6></div><div class="col-md-4"><label class="form-label">Nom</label><input class="form-control" name="contact_name"></div><div class="col-md-4"><label class="form-label">Type</label><select class="form-select" name="contact_type_id"><option value="">—</option>{% for t in contactTypes %}<option value="{{ t.id }}">{{ t.name }}</option>{% endfor %}</select></div><div class="col-md-4"><label class="form-label">Téléphone</label><input class="form-control" name="contact_phone"></div><div class="col-md-6"><label class="form-label">E-mail</label><input class="form-control" type="email" name="contact_email"></div>
</div><div class="alert alert-danger mt-3 d-none" id="quickVenueError"></div></div>
<div class="modal-footer"><button class="btn btn-outline-secondary" type="button" data-bs-dismiss="modal">Annuler</button><button class="btn btn-dark" type="submit"><i class="bi bi-check2 me-1"></i>Créer et sélectionner le lieu</button></div>
</form></div></div></div>

{% for item in upcoming|merge(archives) %}
{% include 'admin/concert_date/_edit_modal.html.twig' with {item:item} %}
{% endfor %}
{% endif %}
{% endblock %}

{% block stylesheets %}{{ parent() }}
<style>
.concert-wizard-steps{display:flex;align-items:flex-start}.concert-wizard-steps .step{min-width:72px;text-align:center;color:var(--bs-secondary)}.concert-wizard-steps .step span{width:34px;height:34px;border-radius:50%;border:2px solid #ced4da;display:flex;align-items:center;justify-content:center;margin:auto;background:#fff;font-weight:700}.concert-wizard-steps .step small{display:block;margin-top:.35rem;font-size:.72rem}.concert-wizard-steps .step.active,.concert-wizard-steps .step.done{color:#212529}.concert-wizard-steps .step.active span{background:#212529;color:white;border-color:#212529}.concert-wizard-steps .step.done span{background:#b9964a;border-color:#b9964a;color:#fff}.concert-wizard-steps .line{height:2px;background:#dee2e6;flex:1;margin-top:16px}
.choice-card{display:flex;height:100%;min-height:170px;flex-direction:column;align-items:center;text-align:center;justify-content:center;border:1px solid #dee2e6;border-radius:1rem;padding:1.25rem;cursor:pointer;transition:.15s}.choice-card input{position:absolute;opacity:0}.choice-card .icon{font-size:2rem;margin-bottom:.5rem}.choice-card small{color:#6c757d;margin-top:.5rem}.choice-card:has(input:checked){border-color:#b9964a;box-shadow:0 0 0 3px rgba(185,150,74,.16);background:#fffdf8}
.required::after{content:' *';color:#dc3545}.poster-thumb{width:64px;height:82px;object-fit:cover;border-radius:.4rem;border:1px solid #ddd}.status-dot{width:.6rem;height:.6rem;border-radius:50%;display:inline-block}

/* V13.1 — modales dates : en-tête/footer fixes et corps scrollable */
.concert-management-modal{
    height:calc(100vh - 32px);
    max-width:min(1400px,calc(100vw - 32px));
    margin:16px auto;
}
.concert-management-modal .modal-content{
    height:100%;
    max-height:none;
    overflow:hidden;
}
.concert-management-modal .modal-content>form{
    height:100%;
    min-height:0;
    display:flex;
    flex-direction:column;
}
.concert-management-modal .modal-header,
.concert-management-modal .modal-footer{flex:0 0 auto}
.concert-management-modal .modal-body{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
}
#quickVenueModal{z-index:1070}
#quickVenueModal + .modal-backdrop{z-index:1065}
@media(max-width:767.98px){
    .concert-management-modal{height:calc(100vh - 16px);max-width:calc(100vw - 16px);margin:8px auto}
}
@media(max-width:767px){.concert-wizard-steps .step small{display:none}.concert-wizard-steps .step{min-width:36px}}
</style>
{% endblock %}

{% block javascripts %}{{ parent() }}
<script>
document.addEventListener('DOMContentLoaded',()=>{
 let step=1; const max=6, form=document.getElementById('newConcertForm'), modal=document.getElementById('newConcertModal'); if(!form || !modal) return;
 const render=()=>{document.querySelectorAll('.concert-step').forEach(x=>x.classList.toggle('d-none',+x.dataset.step!==step));document.querySelectorAll('[data-step-dot]').forEach(x=>{const n=+x.dataset.stepDot;x.classList.toggle('active',n===step);x.classList.toggle('done',n<step)});document.getElementById('concertPrev').classList.toggle('d-none',step===1);document.getElementById('concertNext').classList.toggle('d-none',step===max);document.getElementById('concertSubmit').classList.toggle('d-none',step!==max);if(step===max)review();};
 const valid=()=>{const sec=document.querySelector(`.concert-step[data-step="${step}"]`);for(const el of sec.querySelectorAll('[required]')){if(!el.value){el.reportValidity();return false}} if(step===5&&form.publication_mode.value==='scheduled'&&!form.publication_date.value){form.publication_date.reportValidity();return false}return true};
 document.getElementById('concertNext').addEventListener('click',()=>{if(valid()){step++;render()}});document.getElementById('concertPrev').addEventListener('click',()=>{step--;render()});
 document.querySelectorAll('input[name="publication_mode"]').forEach(r=>r.addEventListener('change',()=>document.getElementById('newPublicationDateWrap').classList.toggle('d-none',r.value!=='scheduled'||!r.checked)));
 function review(){const venue=form.querySelector('[name="venue_id"] option:checked')?.textContent||'—',date=form.event_date.value?new Date(form.event_date.value+'T12:00:00').toLocaleDateString('fr-FR'):'—';const pub={hidden:'Ne pas publier',public:'Publier maintenant',scheduled:'Publication programmée'}[form.publication_mode.value];document.getElementById('concertReview').innerHTML=`<div class="row g-3"><div class="col-md-6"><small class="text-secondary">Lieu</small><div class="fw-semibold">${venue}</div></div><div class="col-md-3"><small class="text-secondary">Date</small><div class="fw-semibold">${date}</div></div><div class="col-md-3"><small class="text-secondary">Publication</small><div class="fw-semibold">${pub}</div></div><div class="col-12"><small class="text-secondary">Titre public</small><div>${form.public_title.value||'Généré automatiquement'}</div></div></div>`}
 if(window.jQuery){$('.concert-venue-select').select2({theme:'bootstrap-5',width:'100%',dropdownParent:$('#newConcertModal'),placeholder:'Rechercher un lieu'});}
 const quickForm=document.getElementById('quickVenueForm');quickForm.addEventListener('submit',async e=>{e.preventDefault();const err=document.getElementById('quickVenueError');err.classList.add('d-none');try{const res=await fetch('{{ path('admin_concert_date_venue_create') }}',{method:'POST',body:new FormData(quickForm),headers:{'X-Requested-With':'XMLHttpRequest'}});const data=await res.json();if(!res.ok||!data.ok)throw new Error(data.message||'Erreur');const select=form.querySelector('[name="venue_id"]');const option=new Option(data.venue.text,data.venue.id,true,true);select.add(option);if(window.jQuery)$(select).trigger('change');bootstrap.Modal.getInstance(document.getElementById('quickVenueModal')).hide();quickForm.reset();quickForm.querySelector('[name="country"]').value='France';}catch(ex){err.textContent=ex.message;err.classList.remove('d-none')}});
 // Bootstrap ne gère pas officiellement les modales imbriquées : on conserve le verrouillage du body quand la sous-modale lieu se ferme.
 const quickVenueModalEl=document.getElementById('quickVenueModal');
 quickVenueModalEl.addEventListener('hidden.bs.modal',()=>{if(document.getElementById('newConcertModal').classList.contains('show'))document.body.classList.add('modal-open')});
 document.querySelectorAll('.edit-publication-mode').forEach(sel=>sel.addEventListener('change',()=>{document.getElementById(sel.dataset.target).classList.toggle('d-none',sel.value!=='scheduled')}));
 render();
});
</script>
{% endblock %}