{% extends '@App/app.html.twig' %}

{% block title %}{{ section_config.title }}{% endblock %}
{% block page_header %}{% endblock %}

{% block content %}
{% set week_days = {1: 'Lundi', 2: 'Mardi', 3: 'Mercredi', 4: 'Jeudi', 5: 'Vendredi', 6: 'Samedi', 7: 'Dimanche'} %}

<div class="data-page planning-config-page" data-controller="planning-settings">
    <nav class="data-breadcrumb" aria-label="Fil d'Ariane">
        <a href="{{ path('planning_index') }}">Plannings</a>
        <i class="ti ti-chevron-right" aria-hidden="true"></i>
        <a href="{{ path('planning_settings_index') }}">Paramètres</a>
        <i class="ti ti-chevron-right" aria-hidden="true"></i>
        <strong>{{ section_config.title }}</strong>
    </nav>

    <form method="post" class="planning-config-form">
        <input type="hidden" name="_token" value="{{ csrf_token('planning_settings_' ~ section) }}">

        <header class="planning-config-header">
            <a class="planning-config-back" href="{{ path('planning_settings_index') }}" aria-label="Retour aux paramètres">
                <i class="ti ti-arrow-left" aria-hidden="true"></i>
            </a>
            <div class="planning-config-title">
                <span class="planning-settings-icon planning-settings-icon--{{ section_config.tone }}"><i class="{{ section_config.icon }}" aria-hidden="true"></i></span>
                <div>
                    <h1>{{ section_config.title }}</h1>
                    <p>{{ section_config.subtitle }}</p>
                </div>
            </div>
            <div class="planning-config-actions">
                <a class="data-button data-button--secondary" href="{{ path('planning_settings_index') }}">Annuler</a>
                <button class="data-button data-button--primary" type="submit">
                    <i class="ti ti-device-floppy" aria-hidden="true"></i>
                    Enregistrer les modifications
                </button>
            </div>
        </header>

        {% if section == 'general' %}
            <div class="planning-config-layout">
                <main class="planning-config-main">
                    <section class="planning-config-card">
                        <h2><i class="ti ti-calendar" aria-hidden="true"></i>Affichage du calendrier</h2>
                        <div class="planning-config-grid planning-config-grid--2">
                            <label class="planning-config-field">
                                <span>Vue par défaut</span>
                                <select name="defaultView">
                                    {% for value, label in {week: 'Vue Semaine (Employés)', month: 'Vue Mois', day: 'Vue Jour', team: 'Vue Équipe'} %}
                                        <option value="{{ value }}" {{ settings.defaultView == value ? 'selected' : '' }}>{{ label }}</option>
                                    {% endfor %}
                                </select>
                            </label>
                            <label class="planning-config-field">
                                <span>Premier jour de la semaine</span>
                                <select name="weekStartsOn">
                                    {% for value, label in week_days %}
                                        <option value="{{ value }}" {{ settings.weekStartsOn == value ? 'selected' : '' }}>{{ label }}</option>
                                    {% endfor %}
                                </select>
                            </label>
                        </div>
                        <div class="planning-config-field">
                            <span>Granularité des créneaux (minutes)</span>
                            <div class="planning-segmented planning-segmented--3">
                                {% for minutes in [15, 30, 60] %}
                                    <label>
                                        <input type="radio" name="slotDurationMinutes" value="{{ minutes }}" {{ settings.slotDurationMinutes == minutes ? 'checked' : '' }}>
                                        <span>{{ minutes }} min</span>
                                    </label>
                                {% endfor %}
                            </div>
                        </div>
                    </section>

                    <section class="planning-config-card">
                        <h2><i class="ti ti-clock" aria-hidden="true"></i>Horaires & Amplitude</h2>
                        <div class="planning-config-grid planning-config-grid--2">
                            <label class="planning-config-field">
                                <span>Début de journée type</span>
                                <input type="time" name="dayStartTime" value="{{ settings.dayStartTime ? settings.dayStartTime|date('H:i') : '08:00' }}">
                            </label>
                            <label class="planning-config-field">
                                <span>Fin de journée type</span>
                                <input type="time" name="dayEndTime" value="{{ settings.dayEndTime ? settings.dayEndTime|date('H:i') : '18:00' }}">
                            </label>
                        </div>
                        <label class="planning-toggle-row">
                            <span><strong>Afficher les heures de nuit sur la grille</strong><small>Si activé, le calendrier affichera les 24h au lieu de l'amplitude standard.</small></span>
                            <input type="checkbox" name="showNightHours" value="1" {{ settings.getOption('showNightHours', true) ? 'checked' : '' }}>
                        </label>
                    </section>

                    <section class="planning-config-card">
                        <h2><i class="ti ti-palette" aria-hidden="true"></i>Couleurs & Badges</h2>
                        <div class="planning-config-field">
                            <span>Colorer les shifts par :</span>
                            <div class="planning-segmented planning-segmented--3">
                                {% for value, label in {service: 'Service', shift_type: "Type d'horaire", qualification: 'Qualification'} %}
                                    <label>
                                        <input type="radio" name="colorBy" value="{{ value }}" {{ settings.getOption('colorBy', 'service') == value ? 'checked' : '' }}>
                                        <span>{{ label }}</span>
                                    </label>
                                {% endfor %}
                            </div>
                        </div>
                        <div class="planning-config-grid planning-config-grid--2">
                            <label class="planning-toggle-row planning-toggle-row--compact"><span>Afficher les avatars</span><input type="checkbox" name="showAvatars" value="1" {{ settings.getOption('showAvatars', true) ? 'checked' : '' }}></label>
                            <label class="planning-toggle-row planning-toggle-row--compact"><span>Indicateur de pauses</span><input type="checkbox" name="showBreaks" value="1" {{ settings.getOption('showBreaks', true) ? 'checked' : '' }}></label>
                        </div>
                    </section>
                </main>
                <aside class="planning-config-aside">
                    <section class="planning-config-card planning-config-card--soft">
                        <h2>Aperçu rapide</h2>
                        <dl class="planning-config-summary">
                            <div><dt>Unité min.</dt><dd>{{ settings.slotDurationMinutes }} minutes</dd></div>
                            <div><dt>Amplitude</dt><dd>{{ settings.dayStartTime ? settings.dayStartTime|date('H:i') : '08:00' }} - {{ settings.dayEndTime ? settings.dayEndTime|date('H:i') : '18:00' }}</dd></div>
                            <div><dt>Coloration</dt><dd>{{ settings.getOption('colorBy', 'service')|replace({'_': ' '})|title }}</dd></div>
                        </dl>
                    </section>
                    <section class="planning-config-note planning-config-note--warning">Ces changements s'appliqueront à tous les managers de l'organisation.</section>
                </aside>
            </div>
        {% elseif section == 'publication' %}
            <div class="planning-config-layout">
                <main class="planning-config-main">
                    <section class="planning-config-card">
                        <h2>Processus de validation</h2>
                        <p>Choisissez les étapes nécessaires avant que le planning ne soit visible par les employés.</p>
                        <div class="planning-config-options">
                            {% for value, label in {draft_then_publish: 'Direct (Brouillon → Publié)', manager_publish: 'Revue manager (Brouillon → En revue → Publié)', double_validation: 'Double validation (Admin RH obligatoire)'} %}
                                <label class="planning-option">
                                    <input type="radio" name="publicationWorkflow" value="{{ value }}" {{ settings.publicationWorkflow == value ? 'checked' : '' }}>
                                    <span><strong>{{ label }}</strong><small>{{ value == 'draft_then_publish' ? 'Le créateur du planning peut publier immédiatement.' : 'Une validation intermédiaire est requise.' }}</small></span>
                                </label>
                            {% endfor %}
                        </div>
                    </section>
                    <section class="planning-config-card">
                        <h2>Canaux de notification</h2>
                        {% for name, label in {notifyPush: 'Notification Push Mobile', notifyEmail: 'E-mail récapitulatif', notifySms: 'SMS (Optionnel)'} %}
                            <label class="planning-toggle-row">
                                <span><strong>{{ label }}</strong><small>Informer les salariés lors de la publication.</small></span>
                                <input type="checkbox" name="{{ name }}" value="1" {{ settings.getOption(name, name != 'notifySms') ? 'checked' : '' }}>
                            </label>
                        {% endfor %}
                    </section>
                </main>
                <aside class="planning-config-aside">
                    <section class="planning-config-card">
                        <h2><i class="ti ti-hourglass" aria-hidden="true"></i>Délai de prévenance</h2>
                        <label class="planning-config-field"><span>Délai minimal avant début de période</span><input type="number" name="defaultNoticeDays" min="0" value="{{ settings.defaultNoticeDays|default(7) }}"></label>
                        <div class="planning-config-note planning-config-note--warning">Un délai de 7 jours est recommandé pour éviter les litiges.</div>
                    </section>
                    <section class="planning-config-card">
                        <h2><i class="ti ti-hand-click" aria-hidden="true"></i>Accusé de réception</h2>
                        <label class="planning-check"><input type="checkbox" name="employeeAcknowledgementRequired" value="1" {{ settings.getOption('employeeAcknowledgementRequired', true) ? 'checked' : '' }}>Obliger le salarié à confirmer la lecture de ses horaires.</label>
                    </section>
                </aside>
            </div>
            <section class="planning-config-note planning-config-note--info">Activez la revue manager si vous avez plusieurs chefs d'équipe. Cela garantit une cohérence globale avant publication.</section>
        {% elseif section == 'availability' %}
            <div class="planning-config-layout">
                <main class="planning-config-main">
                    <section class="planning-config-card planning-config-card--split-header">
                        <div>
                            <h2>Activer le module</h2>
                            <p>Permettre aux salariés de soumettre leurs disponibilités.</p>
                        </div>
                        <label class="planning-switch"><input type="checkbox" name="allowEmployeeAvailability" value="1" {{ settings.allowEmployeeAvailability ? 'checked' : '' }}><span></span></label>
                    </section>
                    <section class="planning-config-card">
                        <h2>Modèle de déclaration</h2>
                        <div class="planning-config-options planning-config-options--2">
                            {% for value, label in {weekly_recurring: 'Hebdomadaire récurrent', specific_calendar: 'Calendrier spécifique'} %}
                                <label class="planning-option"><input type="radio" name="availabilityModel" value="{{ value }}" {{ settings.getOption('availabilityModel', 'weekly_recurring') == value ? 'checked' : '' }}><span><strong>{{ label }}</strong><small>{{ value == 'weekly_recurring' ? 'Une semaine type se répète par défaut.' : 'Les créneaux sont déclarés semaine par semaine.' }}</small></span></label>
                            {% endfor %}
                        </div>
                        <div class="planning-config-grid planning-config-grid--2">
                            <label class="planning-config-field"><span>Délai limite de soumission</span><input type="number" min="0" name="availabilityDeadlineDays" value="{{ settings.getOption('availabilityDeadlineDays', 14) }}"></label>
                            <label class="planning-config-field"><span>Fréquence de rappel</span><select name="availabilityReminderFrequency"><option value="weekly_monday" {{ settings.getOption('availabilityReminderFrequency', 'weekly_monday') == 'weekly_monday' ? 'selected' : '' }}>Hebdomadaire (Lundi)</option><option value="weekly_friday" {{ settings.getOption('availabilityReminderFrequency') == 'weekly_friday' ? 'selected' : '' }}>Hebdomadaire (Vendredi)</option></select></label>
                        </div>
                    </section>
                    <section class="planning-config-card">
                        <h2>Règles et granularité</h2>
                        <div class="planning-config-grid planning-config-grid--3">
                            <label class="planning-config-field"><span>Granularité</span><input type="number" min="15" step="15" name="availabilityGranularity" value="{{ settings.getOption('availabilityGranularity', 30) }}"></label>
                            <label class="planning-config-field"><span>Max. indisponibilités / mois</span><input type="number" min="0" name="maxUnavailabilitiesPerMonth" value="{{ settings.getOption('maxUnavailabilitiesPerMonth', 4) }}"></label>
                            <label class="planning-toggle-row planning-toggle-row--compact"><span>Validation automatique</span><input type="checkbox" name="availabilityAutoValidation" value="1" {{ settings.getOption('availabilityAutoValidation', false) ? 'checked' : '' }}></label>
                        </div>
                    </section>
                </main>
                <aside class="planning-config-aside">
                    <section class="planning-config-card">
                        <h2><i class="ti ti-bell" aria-hidden="true"></i>Notifications</h2>
                        {% for name, label in {availabilityNotifyLate: 'Alerte retard de soumission', availabilityNotifyManager: 'Notification Manager', availabilityMonthlySummary: 'Récapitulatif mensuel'} %}
                            <label class="planning-check"><input type="checkbox" name="{{ name }}" value="1" {{ settings.getOption(name, name != 'availabilityMonthlySummary') ? 'checked' : '' }}>{{ label }}</label>
                        {% endfor %}
                    </section>
                    <section class="planning-config-card planning-config-card--blue"><h2>Conseil RH</h2><p>Un délai de 14 jours est recommandé pour permettre aux managers d'ajuster les plannings avant publication officielle.</p></section>
                </aside>
            </div>
        {% elseif section == 'change-requests' %}
            <section class="planning-config-card planning-config-card--split-header">
                <div>
                    <h2>Activer le module de changement</h2>
                    <p>Autoriser les salariés à initier des demandes depuis leur interface self-service.</p>
                </div>
                <label class="planning-switch"><input type="checkbox" name="allowEmployeeChangeRequests" value="1" {{ settings.allowEmployeeChangeRequests ? 'checked' : '' }}><span></span></label>
            </section>
            <div class="planning-config-layout">
                <main class="planning-config-main">
                    <section class="planning-config-card">
                        <h2>Types de demandes autorisés</h2>
                        {% for name, label in {allowShiftSwap: 'Échange de shifts', allowTimeChange: "Modification d'horaires", allowShiftGive: 'Don de shift'} %}
                            <label class="planning-check planning-check--boxed"><input type="checkbox" name="{{ name }}" value="1" {{ settings.getOption(name, name != 'allowShiftGive') ? 'checked' : '' }}><span>{{ label }}</span></label>
                        {% endfor %}
                    </section>
                    <section class="planning-config-card">
                        <h2>Contraintes et délais</h2>
                        <div class="planning-config-grid planning-config-grid--2">
                            <label class="planning-config-field"><span>Délai de prévenance minimum</span><input type="number" min="0" name="changeMinimumNoticeHours" value="{{ settings.getOption('changeMinimumNoticeHours', 48) }}"></label>
                            <label class="planning-config-field"><span>Limite par période</span><input type="number" min="0" name="changeMonthlyLimit" value="{{ settings.getOption('changeMonthlyLimit', 3) }}"></label>
                        </div>
                        <label class="planning-toggle-row"><span><strong>Comparer avec la pointeuse</strong><small>Afficher les écarts de temps si le module pointeuse est actif.</small></span><input type="checkbox" name="showTimeClockComparison" value="1" {{ settings.showTimeClockComparison ? 'checked' : '' }}></label>
                    </section>
                </main>
                <aside class="planning-config-aside">
                    <section class="planning-config-card">
                        <h2>Workflow de validation</h2>
                        <label class="planning-config-field"><span>Niveau requis</span><select name="changeValidationLevel"><option value="manager" {{ settings.getOption('changeValidationLevel', 'manager') == 'manager' ? 'selected' : '' }}>Manager direct (N+1)</option><option value="hr" {{ settings.getOption('changeValidationLevel') == 'hr' ? 'selected' : '' }}>RH</option></select></label>
                        <label class="planning-toggle-row planning-toggle-row--compact"><span>Notifier le manager</span><input type="checkbox" name="changeNotifyManager" value="1" {{ settings.getOption('changeNotifyManager', true) ? 'checked' : '' }}></label>
                        <label class="planning-toggle-row planning-toggle-row--compact"><span>Bloquer les conflits légaux</span><input type="checkbox" name="blockLegalConflicts" value="1" {{ settings.getOption('blockLegalConflicts', true) ? 'checked' : '' }}></label>
                    </section>
                    <section class="planning-config-card planning-config-card--dashed"><h2>Bourse d'échange de shifts</h2><label class="planning-check"><input type="checkbox" name="exchangeBoardEnabled" value="1" {{ settings.getOption('exchangeBoardEnabled', false) ? 'checked' : '' }}>Activer la bourse d'échange</label></section>
                </aside>
            </div>
            <section class="planning-config-note planning-config-note--warning">Toute demande approuvée après clôture du planning peut impacter les données de paie.</section>
        {% elseif section == 'locking' %}
            <section class="planning-config-card planning-config-card--split-header">
                <div>
                    <h2>Automatisation du verrouillage</h2>
                    <p>Paramètres de sécurité appliqués aux plannings passés.</p>
                </div>
                <label class="planning-switch"><input type="checkbox" name="lockPastPlanning" value="1" {{ settings.lockPastPlanning ? 'checked' : '' }}><span></span></label>
            </section>
            <div class="planning-config-layout">
                <main class="planning-config-main">
                    <section class="planning-config-card">
                        <label class="planning-config-field"><span>Délai avant verrouillage automatique</span><input type="number" min="0" name="lockDelayDays" value="{{ settings.lockDelayDays|default(7) }}"></label>
                        <div class="planning-config-field">
                            <span>Fréquence de verrouillage</span>
                            <div class="planning-segmented planning-segmented--2">
                                {% for value, label in {weekly: 'Hebdomadaire', monthly: 'Mensuel'} %}
                                    <label><input type="radio" name="lockingFrequency" value="{{ value }}" {{ settings.getOption('lockingFrequency', 'weekly') == value ? 'checked' : '' }}><span>{{ label }}</span></label>
                                {% endfor %}
                            </div>
                        </div>
                    </section>
                    <section class="planning-config-card">
                        <h2>Droits de déverrouillage</h2>
                        {% for name, label in {allowHrUnlock: 'Administrateurs RH', allowServiceManagerUnlock: 'Responsables de service', allowTeamManagerUnlock: "Managers d'équipe"} %}
                            <label class="planning-toggle-row planning-toggle-row--compact"><span>{{ label }}</span><input type="checkbox" name="{{ name }}" value="1" {{ settings.getOption(name, name == 'allowHrUnlock') ? 'checked' : '' }}></label>
                        {% endfor %}
                    </section>
                </main>
                <aside class="planning-config-aside">
                    <section class="planning-config-card planning-config-card--soft"><h2>Impact sur les managers</h2><p>Les managers ne pourront plus modifier les shifts, pauses ou affectations une fois le verrouillage effectif.</p></section>
                    <section class="planning-config-card"><h2>Verrouillage manuel ponctuel</h2><button class="data-button data-button--dark" type="button" disabled><i class="ti ti-lock" aria-hidden="true"></i>Verrouiller une période</button><button class="data-button data-button--secondary" type="button" disabled><i class="ti ti-lock-open" aria-hidden="true"></i>Déverrouiller une période</button></section>
                </aside>
            </div>
        {% endif %}
    </form>
</div>
{% endblock %}