{% extends 'admin/layout.html.twig' %}
{% block title %}Dates de concert — WTL{% endblock %}

{% block admin_body %}
{% include 'admin/ui/_page_header.html.twig' with {
    page_eyebrow: 'Planning',
    page_title: 'Dates de concert',
    page_subtitle: 'Programmer les représentations et suivre leur préparation, leur publication et leur synchronisation.',
    page_actions: can_permission('CONCERT_DATE', 2) ? [{label: 'Nouvelle date', href: path('admin_concert_date_new'), icon: 'bi-calendar-plus', primary: true}] : []
} %}

<ul class="nav nav-tabs mb-3" role="tablist" aria-label="Catégories de dates">
    <li class="nav-item" role="presentation"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#upcomingDates" type="button" role="tab"><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" role="presentation"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#archiveDates" type="button" role="tab"><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" role="tabpanel">{% include 'admin/concert_date/_table.html.twig' with {items: upcoming, tableId: 'concertUpcoming', archiveMode: false} %}</div>
    <div class="tab-pane fade" id="archiveDates" role="tabpanel">
        <div class="alert alert-light border"><i class="bi bi-info-circle me-2"></i>Une date passée reste disponible sur le 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) %}{% for item in upcoming|merge(archives) %}{% include 'admin/concert_date/_edit_modal.html.twig' with {item:item} %}{% endfor %}{% endif %}
{% if can_permission('CONCERT_FEEDBACK') %}<div class="modal fade" id="concertFeedbackPreview" tabindex="-1" aria-hidden="true"><div class="modal-dialog modal-xl modal-dialog-scrollable"><div class="modal-content" data-feedback-preview-content><div class="modal-body py-5 text-center text-secondary"><div class="spinner-border spinner-border-sm me-2" aria-hidden="true"></div>Chargement du bilan…</div></div></div></div>{% endif %}
{% endblock %}

{% block stylesheets %}{{ parent() }}
<style>
.poster-thumb{width:64px;height:82px;object-fit:cover;border-radius:.4rem;border:1px solid #ddd}
.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}
@media(max-width:767.98px){.concert-management-modal{height:calc(100vh - 16px);max-width:calc(100vw - 16px);margin:8px auto}}
</style>
{% endblock %}

{% block javascripts %}{{ parent() }}
<script>
document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.edit-publication-mode').forEach(select => select.addEventListener('change', () => {
        document.getElementById(select.dataset.target)?.classList.toggle('d-none', select.value !== 'scheduled');
    }));

    const feedbackModal = document.getElementById('concertFeedbackPreview');
    if (feedbackModal) {
        const content = feedbackModal.querySelector('[data-feedback-preview-content]');
        let feedbackRequest = null;
        feedbackModal.addEventListener('show.bs.modal', async event => {
            feedbackRequest?.abort();
            feedbackRequest = new AbortController();
            const trigger = event.relatedTarget;
            const url = trigger instanceof HTMLElement ? trigger.dataset.feedbackPreviewUrl : '';
            content.innerHTML = '<div class="modal-body py-5 text-center text-secondary"><div class="spinner-border spinner-border-sm me-2" aria-hidden="true"></div>Chargement du bilan…</div>';
            if (!url) return;
            try {
                const response = await fetch(url, {headers: {'X-Requested-With': 'XMLHttpRequest'}, signal: feedbackRequest.signal});
                if (!response.ok) throw new Error('feedback-load-failed');
                content.innerHTML = await response.text();
            } catch (error) {
                if (error.name === 'AbortError') return;
                content.innerHTML = '<div class="modal-header"><h2 class="modal-title h5">Bilan indisponible</h2><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button></div><div class="modal-body"><div class="alert alert-danger mb-0">Le bilan ne peut pas être chargé pour le moment. Fermez cette fenêtre puis réessayez.</div></div>';
            }
        });
        feedbackModal.addEventListener('hidden.bs.modal', () => feedbackRequest?.abort());
    }
});
</script>
{% endblock %}