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

{% block title %}Demandes de changement{% endblock %}
{% block page_header %}{% endblock %}

{% block content %}
{% set self_service = is_self_service|default(false) %}
{% set metrics = metrics|default({pending: 0, approved7: 0, refused7: 0, swapRate: 0, total: 0}) %}
{% set filters = filters|default({}) %}
{% set type_labels = {swap: 'Échange de shift', time_change: 'Modif. horaires', unavailable: 'Indisponibilité', other: 'Autre'} %}
{% set type_tones = {swap: 'unavailable', time_change: 'swap', unavailable: 'time', other: 'other'} %}
{% set status_labels = {submitted: 'En attente', pending: 'En attente', in_review: 'En cours', approved: 'Approuvée', refused: 'Rejetée', cancelled: 'Annulée'} %}
{% set status_tones = {submitted: 'pending', pending: 'pending', in_review: 'pending', approved: 'approved', refused: 'refused', cancelled: 'cancelled'} %}
{% set month_names = ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil', 'Aoû', 'Sep', 'Oct', 'Nov', 'Déc'] %}
{% set day_names = ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'] %}

<div class="data-page planning-employee-page planning-change-admin-page">
    <div class="planning-employee-topbar">
        <nav class="data-breadcrumb" aria-label="Fil d'Ariane">
            <span>Plannings</span>
            <i class="ti ti-chevron-right" aria-hidden="true"></i>
            <span class="fw-bold text-primary">Demandes de changement</span>
        </nav>
    </div>

    <div class="planning-employee-hero">
        <div>
            <h1>Demandes de changement</h1>
            <p>Gérez les requêtes d'échange de shifts et les modifications d'horaires soumises par vos collaborateurs.</p>
        </div>
        <div class="planning-employee-hero__actions">
            <button class="data-button data-button--secondary" type="button"><i class="ti ti-download" aria-hidden="true"></i>Exporter</button>
            <button class="data-button data-button--primary" type="button" disabled title="Les demandes sont créées depuis l'espace salarié"><i class="ti ti-plus" aria-hidden="true"></i>Nouvelle demande</button>
        </div>
    </div>

    <section class="planning-employee-metrics planning-change-admin-metrics">
        <article>
            <span>En attente</span>
            <strong>{{ metrics.pending }}</strong>
            <i class="ti ti-hourglass-empty" aria-hidden="true"></i>
        </article>
        <article>
            <span>Approuvées (7j)</span>
            <strong>{{ metrics.approved7 }}</strong>
            <i class="ti ti-check" aria-hidden="true"></i>
        </article>
        <article>
            <span>Rejetées (7j)</span>
            <strong>{{ metrics.refused7 }}</strong>
            <i class="ti ti-x" aria-hidden="true"></i>
        </article>
        <article>
            <span>Taux d'échange</span>
            <strong>{{ metrics.swapRate }}%</strong>
            <i class="ti ti-arrows-shuffle" aria-hidden="true"></i>
        </article>
    </section>

    <form class="planning-change-admin-filters" method="get" action="{{ path('planning_change_request_index') }}">
        <label>
            <i class="ti ti-search" aria-hidden="true"></i>
            <input type="search" name="q" value="{{ filters.q|default('') }}" placeholder="Rechercher un salarié...">
        </label>
        <select name="status" onchange="this.form.submit()">
            <option value="all">Tous les statuts</option>
            <option value="submitted" {{ filters.status|default('') == 'submitted' ? 'selected' : '' }}>En attente</option>
            <option value="approved" {{ filters.status|default('') == 'approved' ? 'selected' : '' }}>Approuvées</option>
            <option value="refused" {{ filters.status|default('') == 'refused' ? 'selected' : '' }}>Rejetées</option>
        </select>
        <select name="service" onchange="this.form.submit()">
            <option value="">Tous les services</option>
            {% for service in services|default([]) %}
                <option value="{{ service.id }}" {{ filters.service|default('') == service.id ? 'selected' : '' }}>{{ service.nom }}</option>
            {% endfor %}
        </select>
        <div>
            <span>Afficher :</span>
            <a class="{{ filters.status|default('') ? '' : 'is-active' }}" href="{{ path('planning_change_request_index') }}">Toutes</a>
            <a href="{{ path('planning_change_request_index', {status: 'submitted'}) }}">Mes validations</a>
        </div>
    </form>

    <section class="planning-employee-board planning-change-admin-board">
        <div class="planning-employee-request-table-wrap">
            <table class="planning-employee-request-table planning-change-admin-table">
                <thead>
                    <tr>
                        <th>Salarié</th>
                        <th>Type de demande</th>
                        <th>Shift concerné</th>
                        <th>Remplaçant / Nouveau</th>
                        <th>Date demande</th>
                        <th>Statut</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for request in requests %}
                        {% set assignment = request.assignment %}
                        {% set shift = assignment ? assignment.shift : null %}
                        {% set employee = request.salarie %}
                        {% set photo = employee and employee.photo ? employee.photo|trim : null %}
                        {% set avatar = photo ? (photo starts with 'http://' or photo starts with 'https://' ? photo : asset(photo starts with '/' ? photo|slice(1) : photo)) : null %}
                        {% set type_tone = type_tones[request.type]|default('other') %}
                        {% set status_tone = status_tones[request.status]|default('pending') %}
                        <tr>
                            <td>
                                <div class="planning-change-admin-employee">
                                    <span class="data-avatar {{ avatar ? '' : 'data-avatar--initials' }}">
                                        {% if avatar %}<img src="{{ avatar }}" alt="{{ employee }}">{% else %}{{ employee ? (employee.prenom|first ~ employee.nom|first)|upper : '?' }}{% endif %}
                                    </span>
                                    <div>
                                        <strong>{{ employee ?: 'Salarié inconnu' }}</strong>
                                        <span>{{ employee and employee.employeeService ? employee.employeeService.nom : 'Service non renseigné' }}{% if employee and employee.etablissement %} - {{ employee.etablissement.nom }}{% endif %}</span>
                                    </div>
                                </div>
                            </td>
                            <td><span class="planning-employee-request-type" data-tone="{{ type_tone }}">{{ type_labels[request.type]|default(request.type|capitalize) }}</span></td>
                            <td>
                                {% if assignment %}
                                    <strong>{{ day_names[assignment.plannedStartAt|date('N') - 1] }}. {{ assignment.plannedStartAt|date('d') }} {{ month_names[assignment.plannedStartAt|date('n') - 1] }}</strong>
                                    <span>{{ assignment.plannedStartAt|date('H:i') }} - {{ assignment.plannedEndAt|date('H:i') }}{% if shift %} ({{ shift.title }}){% endif %}</span>
                                {% else %}
                                    <strong>Shift non renseigné</strong>
                                {% endif %}
                            </td>
                            <td>
                                {% if request.type == 'time_change' and request.requestedStartAt and request.requestedEndAt %}
                                    <strong class="planning-change-admin-new-time">{{ request.requestedStartAt|date('H:i') }} - {{ request.requestedEndAt|date('H:i') }}</strong>
                                    <span>{{ request.reason|default('Nouvel horaire')|length > 28 ? request.reason|slice(0, 28) ~ '...' : request.reason|default('Nouvel horaire') }}</span>
                                {% elseif request.replacementSalarie %}
                                    <strong>{{ request.replacementSalarie }}</strong>
                                {% else %}
                                    <em>Non spécifié</em>
                                {% endif %}
                            </td>
                            <td>{{ request.createdAt|date('d/m/Y, H:i') }}</td>
                            <td><span class="planning-employee-request-status" data-tone="{{ status_tone }}">{{ status_labels[request.status]|default(request.status|capitalize) }}</span></td>
                            <td>
                                {% if request.status in ['submitted', 'pending', 'in_review'] %}
                                    <form method="post" action="{{ path('planning_change_request_refuse', {id: request.id}) }}">
                                        <input type="hidden" name="_token" value="{{ csrf_token('planning_change_request_refuse_' ~ request.id) }}">
                                        <button class="planning-change-admin-action" data-tone="refuse" type="submit" title="Refuser"><i class="ti ti-x" aria-hidden="true"></i></button>
                                    </form>
                                    <form method="post" action="{{ path('planning_change_request_approve', {id: request.id}) }}">
                                        <input type="hidden" name="_token" value="{{ csrf_token('planning_change_request_approve_' ~ request.id) }}">
                                        <button class="planning-change-admin-action" data-tone="approve" type="submit" title="Approuver"><i class="ti ti-check" aria-hidden="true"></i></button>
                                    </form>
                                {% else %}
                                    <a class="planning-change-admin-details" href="{{ path('planning_change_request_show', {id: request.id}) }}">Détails</a>
                                {% endif %}
                            </td>
                        </tr>
                    {% else %}
                        <tr><td colspan="7" class="planning-employee-empty">Aucune demande de changement.</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        <footer class="planning-employee-request-footer">
            <span>Affichage de 1-{{ requests|length }} sur {{ metrics.total }} demandes</span>
            <div>
                <button class="data-button data-button--secondary" type="button" disabled>Précédent</button>
                <button class="data-button data-button--secondary" type="button">Suivant</button>
            </div>
        </footer>
    </section>

    <div class="planning-change-admin-info-grid">
        <section class="planning-change-admin-note">
            <h2><i class="ti ti-info-circle" aria-hidden="true"></i>Politique d'échange</h2>
            <p>Le délai de prévenance actuel est fixé à <strong>48 heures</strong>. Toute demande soumise moins de 48h avant le début du shift nécessite une validation exceptionnelle.</p>
            <a href="{{ path('planning_settings_configure', {section: 'change-requests'}) }}">Modifier les règles de validation →</a>
        </section>
        <section class="planning-change-admin-note planning-change-admin-note--purple">
            <h2><i class="ti ti-robot" aria-hidden="true"></i>Suggestion automatique</h2>
            <p>Planify vérifie les règles de repos et les chevauchements avant chaque approbation. Les conflits bloquants empêchent la validation.</p>
            <a href="{{ path('planning_conflict_index') }}">Voir les conflits →</a>
        </section>
    </div>
</div>
{% endblock %}