pta/app/Views/partials/planning_editor.php

    <section id="editor-view" class="app-view page-content">
        <?php if (($accessProfile['role'] ?? '') === 'RESPONSABLE_STRUCTURE'): ?>
            <div class="message message-info role-page-notice">
                Vous pouvez saisir et corriger les horaires et motifs de votre lieu. Les modifications sont enregistrées en <strong>brouillon</strong> ; seul le Service Enfance peut les valider.
            </div>
        <?php endif; ?>
        <section class="card selection-card">
            <h2>1. Sélection du planning</h2>
            <div class="selection-grid">
                <label class="field">
                    <span>Lieu d’affectation <strong>*</strong></span>
                    <select id="structure" required>
                        <option value="">Choisir un lieu d’affectation</option>
                        <?php foreach ($structures as $structure): ?>
                            <option value="<?= (int) $structure['id_structure'] ?>">
                                <?= htmlspecialchars($structure['nom']) ?> — <?= ($structure['type_affectation'] ?? 'PERISCOLAIRE') === 'EXTRASCOLAIRE' ? 'Extrascolaire' : 'Périscolaire' ?>
                            </option>
                        <?php endforeach; ?>
                    </select>
                </label>

                <label class="field">
                    <span>Agent <strong>*</strong></span>
                    <select id="agent" required disabled>
                        <option value="">Choisir d’abord un lieu d’affectation</option>
                    </select>
                </label>

                <label class="field">
                    <span>Semaine <strong>*</strong></span>
                    <input id="week" type="week" value="<?= htmlspecialchars($currentWeek) ?>" required disabled>
                </label>
            </div>
        </section>

        <section class="quota-strip" id="editor-quota" hidden>
            <article class="quota-card">
                <span>Quotité</span>
                <strong id="quota-rate">100 %</strong>
            </article>
            <article class="quota-card">
                <span>Quota de la période</span>
                <strong id="quota-target">1 607 h 00</strong>
                <small id="quota-period">Année civile</small>
            </article>
            <article class="quota-card">
                <span>Déjà affecté</span>
                <strong id="quota-used">0 h 00</strong>
                <small id="quota-used-detail">Validé + brouillon</small>
            </article>
            <article class="quota-card quota-card-emphasis">
                <span>Reste à affecter</span>
                <strong id="quota-remaining">1 607 h 00</strong>
            </article>
        </section>

        <section class="card" id="entry-card" aria-disabled="true">
            <div class="section-heading">
                <div>
                    <h2>2. Saisir ou modifier les affectations</h2>
                    <p class="section-subtitle">Chaque plage horaire possède son propre motif et sa propre règle de décompte du quota annuel.</p>
                </div>
            </div>
            <div class="weekly-entry-toolbar">
                <p class="weekly-entry-help">Les horaires déjà enregistrés sont rechargés automatiquement. Modifiez-les directement, puis appliquez les horaires avant d’enregistrer.</p>
            </div>

            <div class="weekly-entry-scroll">
                <table class="weekly-entry-table" aria-label="Affectations du lundi au vendredi">
                    <thead>
                        <tr>
                            <th>Jour</th>
                            <th>Affectations et plages horaires</th>
                        </tr>
                    </thead>
                    <tbody id="weekly-entry-body">
                        <tr>
                            <td colspan="2" class="weekly-entry-placeholder">Sélectionnez d’abord un lieu d’affectation, un agent et une semaine.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="weekly-entry-actions">
                <button id="add-entry" class="button button-primary button-add" type="button" disabled>
                    Appliquer les horaires renseignés
                </button>
            </div>
            <p class="hint">Chaque plage peut avoir un motif différent : par exemple Travail le matin puis Formation l’après-midi. Les heures sont saisies par pas de 15 minutes. Les créneaux déjà affectés à l’agent dans un autre lieu apparaissent dans le planning global et bloquent toute nouvelle saisie qui les chevaucherait.</p>
        </section>

        <section class="card">
            <div class="section-heading">
                <div>
                    <h2>3. Planning global de l’agent</h2>
                    <p id="week-label" class="section-subtitle">Toutes les affectations de l’agent sur la semaine, quel que soit le lieu d’affectation. Cliquez sur un créneau pour le déplacer ou le dupliquer, ou glissez-le directement vers un autre jour.</p>
                </div>
                <div class="planning-summary-actions">
                    <div class="totals">
                        <span>Total semaine décompté</span>
                        <strong id="work-total">0 h 00</strong>
                    </div>
                    <?php if (!empty($permissions['can_use_templates'])): ?>
                        <button id="save-week-template" class="button button-secondary" type="button" disabled>
                            Enregistrer comme semaine type
                        </button>
                        <button id="apply-week-template" class="button button-secondary" type="button" disabled>
                            Importer une semaine type
                        </button>
                        <button id="apply-week-template-period" class="button button-secondary" type="button" disabled>
                            Appliquer sur une période
                        </button>
                    <?php endif; ?>
                    <button id="open-agent-pdf" class="button button-secondary button-pdf" type="button" disabled>
                        Voir le PDF de l’agent (7 semaines)
                    </button>
                </div>
            </div>

            <div id="empty-state" class="empty-state">Aucune affectation pour le moment.</div>
            <div id="planning-board" class="planning-board" hidden></div>
        </section>

        <section class="actions-bar">
            <div id="message" class="message" role="status" aria-live="polite"></div>
            <div class="action-buttons">
                <?php if (!empty($permissions['can_edit_draft'])): ?>
                    <button id="modify-planning" class="button button-warning" type="button" hidden>Modifier le planning</button>
                    <button id="save-draft" class="button button-secondary" type="button" disabled>Enregistrer le brouillon</button>
                <?php endif; ?>
                <?php if (!empty($permissions['can_validate'])): ?>
                    <button id="validate-planning" class="button button-success" type="button" disabled>Valider le planning</button>
                <?php endif; ?>
            </div>
        </section>
    </section>


<div id="planning-entry-action-modal" class="modal-backdrop" hidden>
    <section class="modal-card planning-entry-action-card" role="dialog" aria-modal="true" aria-labelledby="planning-entry-action-title">
        <div class="section-heading modal-heading">
            <div>
                <h2 id="planning-entry-action-title">Déplacer ou dupliquer un créneau</h2>
                <p id="planning-entry-action-summary" class="section-subtitle"></p>
            </div>
            <button id="close-planning-entry-action-modal" type="button" class="button button-ghost modal-close" aria-label="Fermer">×</button>
        </div>

        <form id="planning-entry-action-form" class="admin-form">
            <fieldset class="entry-action-mode">
                <legend>Action à effectuer</legend>
                <label class="entry-action-option">
                    <input type="radio" name="planning-entry-action" value="move" checked>
                    <span><strong>Déplacer</strong><small>Le créneau change de jour.</small></span>
                </label>
                <label class="entry-action-option">
                    <input type="radio" name="planning-entry-action" value="duplicate">
                    <span><strong>Dupliquer</strong><small>Le créneau d’origine est conservé.</small></span>
                </label>
            </fieldset>

            <label class="field">
                <span>Jour cible</span>
                <select id="planning-entry-target-date" required></select>
            </label>

            <p class="hint">Astuce : vous pouvez aussi glisser-déposer directement un créneau vers un autre jour. Maintenez <strong>Ctrl</strong> (ou <strong>⌘</strong> sur Mac) pendant le dépôt pour le dupliquer.</p>
            <div id="planning-entry-action-message" class="message" role="status" aria-live="polite"></div>
            <div class="admin-form-actions modal-actions">
                <button id="cancel-planning-entry-action" type="button" class="button button-secondary">Annuler</button>
                <button id="confirm-planning-entry-action" type="submit" class="button button-primary">Appliquer</button>
            </div>
        </form>
    </section>
</div>


<div id="save-week-template-modal" class="modal-backdrop" hidden>
    <section class="modal-card week-template-modal-card" role="dialog" aria-modal="true" aria-labelledby="save-week-template-title">
        <div class="section-heading modal-heading">
            <div>
                <h2 id="save-week-template-title">Enregistrer une semaine type</h2>
                <p class="section-subtitle">Le modèle mémorisera toutes les affectations de l’agent sur la semaine, tous lieux confondus.</p>
            </div>
            <button id="close-save-week-template-modal" type="button" class="button button-ghost modal-close" aria-label="Fermer">×</button>
        </div>

        <form id="save-week-template-form" class="admin-form">
            <label class="field">
                <span>Nom de la semaine type <strong>*</strong></span>
                <input id="week-template-name" type="text" maxlength="120" placeholder="Ex. Semaine scolaire classique" required>
            </label>
            <div class="week-template-context" id="save-week-template-context"></div>
            <div id="save-week-template-message" class="message" role="status" aria-live="polite"></div>
            <div class="admin-form-actions modal-actions">
                <button id="cancel-save-week-template" type="button" class="button button-secondary">Annuler</button>
                <button type="submit" class="button button-primary">Enregistrer le modèle</button>
            </div>
        </form>
    </section>
</div>

<div id="apply-week-template-modal" class="modal-backdrop" hidden>
    <section class="modal-card week-template-modal-card" role="dialog" aria-modal="true" aria-labelledby="apply-week-template-title">
        <div class="section-heading modal-heading">
            <div>
                <h2 id="apply-week-template-title">Importer une semaine type</h2>
                <p class="section-subtitle">Le modèle sera appliqué à la semaine actuellement sélectionnée pour cet agent.</p>
            </div>
            <button id="close-apply-week-template-modal" type="button" class="button button-ghost modal-close" aria-label="Fermer">×</button>
        </div>

        <form id="apply-week-template-form" class="admin-form">
            <label class="field">
                <span>Semaine type <strong>*</strong></span>
                <select id="week-template-select" required>
                    <option value="">Chargement...</option>
                </select>
            </label>

            <div id="week-template-details" class="week-template-details"></div>

            <fieldset class="entry-action-mode week-template-mode">
                <legend>Mode d’import</legend>
                <label class="entry-action-option">
                    <input type="radio" name="week-template-mode" value="merge" checked>
                    <span><strong>Compléter la semaine</strong><small>Conserve les affectations existantes. L’import est refusé en cas de chevauchement.</small></span>
                </label>
                <label class="entry-action-option">
                    <input type="radio" name="week-template-mode" value="replace">
                    <span><strong>Remplacer la semaine</strong><small>Supprime les affectations existantes de l’agent sur cette semaine avant d’appliquer le modèle.</small></span>
                </label>
            </fieldset>

            <div class="week-template-danger" id="week-template-replace-warning" hidden>
                Le mode « Remplacer » efface les affectations actuelles de l’agent sur la semaine sélectionnée, tous lieux confondus.
            </div>

            <div id="apply-week-template-message" class="message" role="status" aria-live="polite"></div>
            <div class="admin-form-actions modal-actions week-template-modal-actions">
                <button id="delete-week-template" type="button" class="button button-danger" disabled>Supprimer ce modèle</button>
                <span class="modal-action-spacer"></span>
                <button id="cancel-apply-week-template" type="button" class="button button-secondary">Annuler</button>
                <button type="submit" class="button button-primary">Importer le modèle</button>
            </div>
        </form>
    </section>
</div>

<div id="apply-week-template-period-modal" class="modal-backdrop" hidden>
    <section class="modal-card week-template-period-modal-card" role="dialog" aria-modal="true" aria-labelledby="apply-week-template-period-title">
        <div class="section-heading modal-heading">
            <div>
                <h2 id="apply-week-template-period-title">Appliquer une semaine type sur une période</h2>
                <p class="section-subtitle">Les périodes de vacances déjà validées dans PTA sont prises en compte avant toute création de planning.</p>
            </div>
            <button id="close-apply-week-template-period-modal" type="button" class="button button-ghost modal-close" aria-label="Fermer">×</button>
        </div>

        <form id="apply-week-template-period-form" class="admin-form">
            <div class="week-template-period-grid">
                <label class="field">
                    <span>Semaine type <strong>*</strong></span>
                    <select id="week-template-period-select" required>
                        <option value="">Chargement...</option>
                    </select>
                </label>
                <label class="field">
                    <span>Date de début <strong>*</strong></span>
                    <input id="week-template-period-start" type="date" required>
                </label>
                <label class="field">
                    <span>Date de fin <strong>*</strong></span>
                    <input id="week-template-period-end" type="date" required>
                </label>
            </div>

            <fieldset class="entry-action-mode week-template-mode">
                <legend>Périodes à appliquer</legend>
                <label class="entry-action-option">
                    <input type="radio" name="week-template-period-filter" value="all" checked>
                    <span><strong>Toutes les semaines</strong><small>Répète la semaine type sur toutes les dates de la période, qu’elles soient scolaires ou pendant les vacances.</small></span>
                </label>
                <label class="entry-action-option">
                    <input type="radio" name="week-template-period-filter" value="school">
                    <span><strong>Uniquement les périodes scolaires</strong><small>Applique le modèle uniquement aux jours situés hors des vacances enregistrées dans PTA.</small></span>
                </label>
                <label class="entry-action-option">
                    <input type="radio" name="week-template-period-filter" value="extra">
                    <span><strong>Uniquement les périodes extrascolaires</strong><small>Applique le modèle uniquement aux jours compris dans les vacances scolaires enregistrées dans PTA.</small></span>
                </label>
            </fieldset>

            <div class="week-template-period-rule-note">
                <strong>Calendrier :</strong>
                le caractère scolaire ou extrascolaire d’une date est déterminé à partir des périodes de vacances validées dans PTA.
                Le choix ci-dessus pilote l’application du modèle ; il n’est pas déduit du lieu d’affectation.
            </div>

            <fieldset class="entry-action-mode week-template-mode">
                <legend>Mode d’application</legend>
                <label class="entry-action-option">
                    <input type="radio" name="week-template-period-mode" value="merge" checked>
                    <span><strong>Compléter les plannings</strong><small>Conserve les affectations déjà existantes. L’application est bloquée si un chevauchement est détecté.</small></span>
                </label>
                <label class="entry-action-option">
                    <input type="radio" name="week-template-period-mode" value="replace">
                    <span><strong>Remplacer les jours concernés</strong><small>Supprime les affectations existantes uniquement sur les dates où le modèle doit réellement s’appliquer, puis recrée le planning.</small></span>
                </label>
            </fieldset>

            <div class="week-template-danger" id="week-template-period-replace-warning" hidden>
                Les journées exclues par le filtre de calendrier ne seront pas effacées. Seules les dates sur lesquelles le modèle crée au moins un créneau seront remplacées.
            </div>

            <div class="week-template-period-preview-actions">
                <button id="preview-week-template-period" type="button" class="button button-secondary">Prévisualiser l’application</button>
            </div>

            <div id="week-template-period-preview" class="week-template-period-preview" hidden></div>
            <div id="apply-week-template-period-message" class="message" role="status" aria-live="polite"></div>

            <div class="admin-form-actions modal-actions">
                <button id="cancel-apply-week-template-period" type="button" class="button button-secondary">Annuler</button>
                <button id="confirm-apply-week-template-period" type="submit" class="button button-primary" disabled>Appliquer sur la période</button>
            </div>
        </form>
    </section>
</div>