pta/app/Views/partials/vacation_calendar.php

<?php
$currentYear = (int) date('Y');
$currentMonth = (int) date('n');
$schoolYearStart = $currentMonth >= 8 ? $currentYear : $currentYear - 1;
$defaultSchoolYear = $schoolYearStart . '-' . ($schoolYearStart + 1);
$defaultCalendarYear = $currentYear;
?>
<section id="vacation-view" class="app-view page-content">
    <section class="card vacation-import-card">
        <div class="section-heading">
            <div>
                <h2>Vacances scolaires</h2>
                <p class="section-subtitle">Consultez toutes les vacances d'une année civile complète, de janvier à décembre. PTA agrège les deux années scolaires concernées, accepte les périodes publiées pour les élèves ou pour tous les publics, puis vous laisse contrôler et enregistrer vous-même les dates souhaitées.</p>
            </div>
        </div>

        <div class="vacation-api-note">
            <strong>Principe :</strong> une journée comprise dans une période de vacances enregistrée est considérée comme <strong>extrascolaire</strong>. En dehors de ces périodes, elle est considérée comme <strong>périscolaire</strong>.
        </div>

        <div class="selection-grid vacation-filters">
            <label class="field">
                <span>Académie</span>
                <input id="vacation-academy" type="text" maxlength="100" value="Dijon" placeholder="Ex. Dijon" list="vacation-academies" autocomplete="off">
                <datalist id="vacation-academies">
                    <option value="Aix-Marseille"><option value="Amiens"><option value="Besançon"><option value="Bordeaux">
                    <option value="Clermont-Ferrand"><option value="Créteil"><option value="Dijon"><option value="Grenoble">
                    <option value="Lille"><option value="Limoges"><option value="Lyon"><option value="Montpellier">
                    <option value="Nancy-Metz"><option value="Nantes"><option value="Nice"><option value="Normandie">
                    <option value="Orléans-Tours"><option value="Paris"><option value="Poitiers"><option value="Reims">
                    <option value="Rennes"><option value="Strasbourg"><option value="Toulouse"><option value="Versailles">
                </datalist>
            </label>
            <label class="field">
                <span>Année civile</span>
                <input id="vacation-calendar-year" type="number" min="2000" max="2100" value="<?= (int) $defaultCalendarYear ?>" placeholder="2026">
            </label>
            <div class="overview-filter-actions">
                <button id="preview-vacations" type="button" class="button button-secondary filter-button">Consulter les dates proposées</button>
            </div>
        </div>

        <div id="vacation-preview-message" class="message" role="status" aria-live="polite"></div>

        <div id="vacation-preview-panel" class="vacation-preview-panel" hidden>
            <div class="section-heading compact-heading">
                <div>
                    <h3>Dates proposées par l'API</h3>
                    <p class="section-subtitle">Toutes les périodes de l'année civile sont proposées, y compris celles rattachées à deux années scolaires différentes. Cochez uniquement celles que vous souhaitez conserver ; les dates restent modifiables avant l’enregistrement.</p>
                </div>
                <label class="vacation-select-all">
                    <input id="vacation-select-all" type="checkbox">
                    Tout sélectionner
                </label>
            </div>
            <div class="table-scroll">
                <table class="planning-table vacation-table">
                    <thead>
                        <tr>
                            <th>Importer</th>
                            <th>Période</th>
                            <th>Début</th>
                            <th>Fin</th>
                            <th>Zone / académie</th>
                        </tr>
                    </thead>
                    <tbody id="vacation-preview-body"></tbody>
                </table>
            </div>
            <div class="admin-form-actions">
                <button id="save-selected-vacations" type="button" class="button button-primary">Enregistrer les périodes sélectionnées</button>
            </div>
        </div>
    </section>

    <section class="card vacation-manual-card">
        <div class="section-heading">
            <div>
                <h2>Ajouter une période manuellement</h2>
                <p class="section-subtitle">Utilisez ce formulaire pour corriger le calendrier ou ajouter une période qui n’apparaît pas dans l’API.</p>
            </div>
        </div>
        <form id="manual-vacation-form" class="admin-form">
            <div class="admin-form-grid">
                <label class="field">
                    <span>Libellé <strong>*</strong></span>
                    <input id="manual-vacation-label" type="text" maxlength="150" placeholder="Ex. Vacances de la Toussaint" required>
                </label>
                <label class="field">
                    <span>Année scolaire <strong>*</strong></span>
                    <input id="manual-vacation-school-year" type="text" maxlength="9" value="<?= htmlspecialchars($defaultSchoolYear) ?>" pattern="\d{4}-\d{4}" required>
                </label>
                <label class="field">
                    <span>Date de début <strong>*</strong></span>
                    <input id="manual-vacation-start" type="date" required>
                </label>
                <label class="field">
                    <span>Dernier jour de vacances <strong>*</strong></span>
                    <input id="manual-vacation-end" type="date" required>
                </label>
                <label class="field">
                    <span>Académie</span>
                    <input id="manual-vacation-academy" type="text" maxlength="100" value="Orléans-Tours">
                </label>
                <label class="field">
                    <span>Zone</span>
                    <input id="manual-vacation-zone" type="text" maxlength="50" placeholder="Ex. Zone B">
                </label>
            </div>
            <div class="admin-form-actions">
                <div id="manual-vacation-message" class="message" role="status" aria-live="polite"></div>
                <button type="submit" class="button button-primary">Ajouter la période</button>
            </div>
        </form>
    </section>

    <section class="card">
        <div class="section-heading">
            <div>
                <h2>Périodes enregistrées</h2>
                <p class="section-subtitle">Ces périodes sont celles réellement utilisées par PTA pour distinguer périscolaire et extrascolaire.</p>
            </div>
            <button id="refresh-vacations" type="button" class="button button-secondary">Actualiser</button>
        </div>
        <div id="vacation-saved-message" class="message" role="status" aria-live="polite"></div>
        <div class="table-scroll">
            <table class="planning-table vacation-table">
                <thead>
                    <tr>
                        <th>Période</th>
                        <th>Dates</th>
                        <th>Année scolaire</th>
                        <th>Académie / zone</th>
                        <th>Source</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody id="vacation-saved-body">
                    <tr><td colspan="6"><div class="empty-state">Chargement des périodes enregistrées…</div></td></tr>
                </tbody>
            </table>
        </div>
    </section>
</section>