{% extends '@App/app.html.twig' %}
{% block title %}Périodes de congés{% endblock %}
{% block content %}
<div class="data-page">
    <div class="data-page__header">
        <div>
            <nav class="data-breadcrumb"><span>Congés</span><i class="ti ti-chevron-right" aria-hidden="true"></i><span>Paramètres</span><i class="ti ti-chevron-right" aria-hidden="true"></i><strong>Périodes</strong></nav>
            <h1>Périodes de congés</h1>
        </div>
        <div class="data-page__actions"><a class="data-button data-button--primary" href="#period-create"><i class="ti ti-plus" aria-hidden="true"></i>Créer une période</a></div>
    </div>
    {% include '@Leave/leave/settings/_settings_nav.html.twig' with {active: 'periods'} %}
    <section class="settings-note settings-note--blue"><i class="ti ti-info-circle" aria-hidden="true"></i><span><strong>Gestion des périodes de congés</strong><br>Les périodes définissent les cycles d'acquisition et de prise des congés. Une seule période peut être ouverte à la fois.</span></section>
    <section class="settings-note settings-note--warning"><i class="ti ti-alert-triangle" aria-hidden="true"></i><span><strong>Clôture d'une période</strong><br>Clôturer une période calcule les reports de soldes et bloque les modifications standard. Cette opération est irréversible.</span></section>

    <div class="settings-layout">
        <section class="data-card">
            <div class="data-toolbar">
                <div class="data-toolbar__title"><h2>{{ periods|length }} périodes configurées</h2><span class="data-sub-text">· {{ open_count }} ouverte · {{ closed_count }} fermée</span></div>
                <select class="form-select"><option>Tous les statuts</option></select>
            </div>
            <div class="data-table-wrap">
                <table class="data-table">
                    <thead><tr><th>Nom</th><th>Date début</th><th>Date fin</th><th>Statut</th><th>Clôturée le</th><th>Clôturée par</th><th class="data-table__actions">Actions</th></tr></thead>
                    <tbody>
                    {% for period in periods %}
                        <tr class="data-row">
                            <td><strong>{{ period.nom }}</strong><div class="data-sub-text">{{ period.status == 'open' ? 'Période en cours' : 'Période précédente' }}</div></td>
                            <td>{{ period.startDate|date('d/m/Y') }}</td>
                            <td>{{ period.endDate|date('d/m/Y') }}</td>
                            <td><span class="data-badge {{ period.status == 'open' ? 'data-badge--success' : 'data-badge--muted' }}"><i></i>{{ period.status == 'open' ? 'Ouverte' : 'Fermée' }}</span></td>
                            <td>{{ period.closedAt ? period.closedAt|date('d/m/Y') : '—' }}</td>
                            <td>{{ period.closedBy ?: '—' }}</td>
                            <td class="data-table__actions">
                                {% if period.status == 'open' %}
                                    <form method="post" action="{{ path('app_leave_settings_period_close', {id: period.id}) }}">
                                        <input type="hidden" name="_token" value="{{ csrf_token('leave_period_close_' ~ period.id) }}">
                                        <button class="data-action-button data-action-button--label" type="submit"><i class="ti ti-lock" aria-hidden="true"></i>Clôturer</button>
                                    </form>
                                {% else %}
                                    <span class="data-sub-text">Archivée</span>
                                {% endif %}
                            </td>
                        </tr>
                    {% else %}
                        <tr><td colspan="7" class="text-center text-muted py-5">Aucune période.</td></tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </section>

        <aside class="settings-side-card" id="period-create">
            <div class="settings-panel__header"><div class="settings-panel__title"><span class="settings-panel__icon settings-panel__icon--blue"><i class="ti ti-plus" aria-hidden="true"></i></span><h2>Créer une période</h2></div></div>
            <form class="settings-form" method="post" action="{{ path('app_leave_settings_period_create') }}">
                <input type="hidden" name="_token" value="{{ csrf_token('leave_period_create') }}">
                <label class="settings-field"><span>Nom de la période *</span><input class="form-control" name="nom" placeholder="Ex : 2026 – 2027" required></label>
                <label class="settings-field"><span>Date de début *</span><input class="form-control" type="date" name="startDate" required></label>
                <label class="settings-field"><span>Date de fin *</span><input class="form-control" type="date" name="endDate" required></label>
                <span class="settings-note settings-note--blue"><i class="ti ti-info-circle" aria-hidden="true"></i><span><strong>Récapitulatif</strong><br>Statut initial : Ouverte</span></span>
                <button class="data-button data-button--primary w-100" type="submit"><i class="ti ti-plus" aria-hidden="true"></i>Créer la période</button>
            </form>
        </aside>
    </div>
</div>
{% endblock %}