{% extends 'admin/base.html.twig' %}

{% block title %}Fermetures — Rendez-vous{% endblock %}
{% block breadcrumb %}Rendez-vous{% endblock %}

{% block body %}
{% include 'admin/booking/_nav.html.twig' %}

<div class="bk-head">
    <div>
        <h1>Fermetures et ouvertures exceptionnelles</h1>
        <p class="bk-muted" style="margin:0">Congés, jours fériés, formation… ou un samedi ouvert à titre exceptionnel.</p>
    </div>
</div>

<div class="bk-grid-2" style="align-items:start">
    <form method="post" class="bk-card bk-form" novalidate id="cl-form">
        <input type="hidden" name="_token" value="{{ csrf_token('booking-admin') }}">
        <h2>Ajouter</h2>
        <div class="bk-field">
            <span class="bk-label">Type</span>
            <div style="display:flex; gap:1.2rem; flex-wrap:wrap">
                <label class="bk-check"><input type="radio" name="kind" value="closed" checked> Fermeture</label>
                <label class="bk-check"><input type="radio" name="kind" value="open"> Ouverture exceptionnelle</label>
            </div>
        </div>
        <div class="bk-grid-2">
            <div class="bk-field"><label for="cl-start">Du</label><input type="date" id="cl-start" name="start_date" min="{{ today }}" required></div>
            <div class="bk-field"><label for="cl-end">Au <span class="bk-muted">(inclus)</span></label><input type="date" id="cl-end" name="end_date" min="{{ today }}"></div>
        </div>
        <label class="bk-check" id="cl-allday-wrap"><input type="checkbox" name="all_day" value="1" id="cl-allday" checked> Journées entières</label>
        <div class="bk-grid-2" id="cl-times" hidden>
            <div class="bk-field"><label for="cl-ts">De</label><input type="time" id="cl-ts" name="start_time" step="300"></div>
            <div class="bk-field"><label for="cl-te">À</label><input type="time" id="cl-te" name="end_time" step="300"></div>
        </div>
        {% if resources|length > 1 %}
        <div class="bk-field">
            <label for="cl-res">Pour</label>
            <select id="cl-res" name="resource">
                <option value="">Tout le monde</option>
                {% for r in resources %}<option value="{{ r.id }}">{{ r.name }}</option>{% endfor %}
            </select>
        </div>
        {% endif %}
        <div class="bk-field"><label for="cl-label">Motif <span class="bk-muted">(facultatif, pour vous)</span></label><input type="text" id="cl-label" name="label" maxlength="120" placeholder="Ex. : Congés d'été, Toussaint"></div>
        <div class="bk-actions"><button type="submit" class="btn-gradient"><i class="fas fa-plus me-1" aria-hidden="true"></i> Ajouter</button></div>
    </form>

    <div class="bk-card">
        <h2>À venir</h2>
        {% if closures is empty %}
            <p class="bk-muted">Rien de prévu. Les horaires de la semaine s'appliquent.</p>
        {% else %}
            <ul style="list-style:none; padding:0; margin:.5rem 0 0">
                {% for c in closures %}
                    <li style="display:flex; justify-content:space-between; gap:.75rem; align-items:center; padding:.6rem 0; border-bottom:1px solid var(--line)">
                        <span>
                            <span class="bk-chip {{ c.opening ? 'is-confirmed' : 'is-cancelled' }}">{{ c.opening ? 'Ouvert' : 'Fermé' }}</span>
                            <strong>{{ c.startDate|date('d/m/Y', false) }}{% if c.endDate != c.startDate %} → {{ c.endDate|date('d/m/Y', false) }}{% endif %}</strong>
                            {% if not c.allDay %}, {{ c.startTime }}–{{ c.endTime }}{% endif %}
                            <span class="bk-muted" style="display:block">{{ c.resource ? c.resource.name : 'Tout le monde' }}{% if c.label %} · {{ c.label }}{% endif %}</span>
                        </span>
                        <form class="bk-inline" method="post" action="{{ path('admin_booking_closure_delete', {siteId: site.id, id: c.id}) }}">
                            <input type="hidden" name="_token" value="{{ csrf_token('booking-admin') }}">
                            <button class="bk-btn is-sm is-danger" type="submit" aria-label="Supprimer"><i class="fas fa-trash" aria-hidden="true"></i></button>
                        </form>
                    </li>
                {% endfor %}
            </ul>
        {% endif %}
    </div>
</div>

<script>
    (function () {
        var form = document.getElementById('cl-form');
        var allDay = document.getElementById('cl-allday');
        function sync() {
            var opening = form.querySelector('input[name=kind]:checked').value === 'open';
            document.getElementById('cl-allday-wrap').hidden = opening;
            document.getElementById('cl-times').hidden = !opening && allDay.checked;
        }
        form.addEventListener('change', sync);
        document.getElementById('cl-start').addEventListener('change', function () {
            var end = document.getElementById('cl-end');
            if (!end.value || end.value < this.value) end.value = this.value;
        });
        sync();
    })();
</script>
{% endblock %}