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

{% block title %}Mes congés{% endblock %}
{% block page_header %}{% endblock %}

{% set status_tones = {
    draft: 'muted',
    submitted: 'warning',
    pending_manager: 'warning',
    pending_rh: 'warning',
    approved: 'success',
    refused: 'danger',
    cancelled: 'muted',
    cancel_requested: 'warning',
    expired: 'muted'
} %}
{% set balance_colors = ['blue', 'green', 'purple', 'muted', 'orange'] %}
{% set month_labels = ['JAN', 'FÉV', 'MAR', 'AVR', 'MAI', 'JUN', 'JUL', 'AOÛ', 'SEP', 'OCT', 'NOV', 'DÉC'] %}
{% set day_labels = ['Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi', 'Dimanche'] %}

{% block content %}
<div class="data-page my-leaves-page" data-controller="leave-management tabs" data-tabs-active-value="requests">
    <div class="data-page__header">
        <div>
            <nav class="data-breadcrumb" aria-label="Fil d'Ariane">
                <span>Mon espace</span>
                <i class="ti ti-chevron-right" aria-hidden="true"></i>
                <strong class="text-primary">Mes congés</strong>
            </nav>
            <h1>Mes congés</h1>
        </div>
        <div class="data-page__actions">
            <a class="data-button data-button--primary" href="{{ path('app_leave_new') }}">
                <i class="ti ti-plus" aria-hidden="true"></i>
                Nouvelle demande
            </a>
        </div>
    </div>

    <div class="balance-summary-grid">
        {% for balance in balances|slice(0, 4) %}
            {% set color = balance_colors[loop.index0]|default('blue') %}
            {% set managed = balance.leaveType.balanceManaged %}
            {% set total = balance.acquired + balance.adjusted + balance.carriedOver %}
            {% set percent = managed and total > 0 ? ((balance.available / total) * 100)|round(0, 'floor') : 0 %}
            <article class="balance-summary-card balance-summary-card--{{ color }}">
                <span class="balance-summary-card__type">
                    <i style="background: {{ balance.leaveType.couleur|default('') ?: 'currentColor' }}"></i>
                    {{ balance.leaveType.nom }}
                </span>
                <strong class="balance-summary-card__value">
                    {% if managed %}
                        {{ balance.available|number_format(1, ',', ' ') }} <small>j dispo</small>
                    {% else %}
                        Non décompté
                    {% endif %}
                </strong>
                <span class="balance-summary-card__bar"><i style="width: {{ percent < 0 ? 0 : (percent > 100 ? 100 : percent) }}%"></i></span>
                <span class="balance-summary-card__details">
                    <span><strong>{{ balance.acquired|number_format(balance.acquired == balance.acquired|round ? 0 : 1, ',', ' ') }}</strong>Acquis</span>
                    <span><strong>{{ balance.taken|number_format(balance.taken == balance.taken|round ? 0 : 1, ',', ' ') }}</strong>Pris</span>
                    <span><strong class="text-warning">{{ balance.pending|number_format(balance.pending == balance.pending|round ? 0 : 1, ',', ' ') }}</strong>En attente</span>
                </span>
            </article>
        {% else %}
            <section class="data-empty-panel balance-summary-grid__empty">
                <i class="ti ti-beach" aria-hidden="true"></i>
                <strong>Aucun solde disponible</strong>
                <span>Vos droits seront visibles dès qu'une période de congés sera ouverte.</span>
            </section>
        {% endfor %}
    </div>

    <div class="my-leaves-layout">
        <section class="data-card data-tab-card">
            <div class="data-tab-card__header">
                <div class="record-tabs record-tabs--line" role="tablist" aria-label="Mes congés">
                    <button type="button" class="record-tabs__item is-active" data-tabs-target="tab" data-tabs-id="requests" data-action="tabs#select" role="tab" aria-selected="true">Mes demandes</button>
                    <button type="button" class="record-tabs__item" data-tabs-target="tab" data-tabs-id="calendar" data-action="tabs#select" role="tab" aria-selected="false">Calendrier</button>
                    <button type="button" class="record-tabs__item" data-tabs-target="tab" data-tabs-id="balances" data-action="tabs#select" role="tab" aria-selected="false">Soldes</button>
                    <button type="button" class="record-tabs__item" data-tabs-target="tab" data-tabs-id="history" data-action="tabs#select" role="tab" aria-selected="false">Historique</button>
                </div>
            </div>

            <section class="record-tab-panel is-active" data-tabs-target="panel" data-tabs-id="requests">
                <div class="my-leaves-toolbar">
                    <label class="data-search">
                        <i class="ti ti-search" aria-hidden="true"></i>
                        <input type="search" placeholder="Rechercher..." data-leave-management-target="search" data-action="input->leave-management#filter">
                    </label>
                    <select class="form-select" data-leave-management-target="typeFilter" data-action="change->leave-management#filter">
                        <option value="">Tous les types</option>
                        {% for type in types %}
                            <option value="{{ type.id }}">{{ type.nom }}</option>
                        {% endfor %}
                    </select>
                    <select class="form-select" data-leave-management-target="statusFilter" data-action="change->leave-management#filter">
                        <option value="">Tous les statuts</option>
                        {% for value, label in status_labels %}
                            <option value="{{ value }}">{{ label }}</option>
                        {% endfor %}
                    </select>
                    <span class="my-leaves-count">{{ requests|length }} demande{{ requests|length > 1 ? 's' : '' }}</span>
                </div>

                <div class="data-table-wrap">
                    <table class="data-table data-table--my-leaves">
                        <thead>
                            <tr>
                                <th>Type</th>
                                <th>Dates</th>
                                <th>Durée</th>
                                <th>Statut</th>
                                <th>Mise à jour</th>
                                <th class="data-table__actions">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                        {% for request in requests %}
                            {% set tone = status_tones[request.status]|default('muted') %}
                            {% set can_cancel = request.status in ['draft', 'submitted', 'pending_manager', 'pending_rh', 'refused'] %}
                            <tr data-leave-management-target="row" data-leave-type-id="{{ request.leaveType.id|default('') }}" data-leave-status="{{ request.status }}">
                                <td>
                                    <span class="data-type-label">
                                        <i style="background: {{ request.leaveType.couleur|default('#3b82f6') }}"></i>
                                        <strong>{{ request.leaveType.nom }}</strong>
                                    </span>
                                </td>
                                <td>
                                    <strong class="data-main-text">
                                        {{ request.startDate|date('d/m/Y') }}
                                        {% if request.endDate|date('Y-m-d') != request.startDate|date('Y-m-d') %}
                                            – {{ request.endDate|date('d/m/Y') }}
                                        {% endif %}
                                    </strong>
                                </td>
                                <td><strong>{{ request.durationDays|number_format(request.durationDays == request.durationDays|round ? 0 : 1, ',', ' ') }} jour{{ request.durationDays > 1 ? 's' : '' }}</strong></td>
                                <td>
                                    <span class="data-badge data-badge--{{ tone }}">
                                        <i aria-hidden="true"></i>{{ status_labels[request.status]|default(request.status) }}
                                    </span>
                                </td>
                                <td class="data-sub-text">{{ request.updatedAt|date('d/m/Y H:i') }}</td>
                                <td class="data-table__actions">
                                    <div class="data-row-actions">
                                        <a class="data-link" href="{{ path('app_leave_show', {id: request.id}) }}">Voir</a>
                                        {% if request.editable %}
                                            <a class="data-link data-link--muted" href="{{ path('app_leave_edit', {id: request.id}) }}">Modifier</a>
                                        {% endif %}
                                        {% if can_cancel %}
                                            <form method="post" action="{{ path('app_leave_cancel', {id: request.id}) }}" onsubmit="return confirm('Annuler cette demande ?');">
                                                <input type="hidden" name="_token" value="{{ csrf_token('leave_request_cancel_' ~ request.id) }}">
                                                <button class="data-link data-link--danger" type="submit">Annuler</button>
                                            </form>
                                        {% endif %}
                                    </div>
                                </td>
                            </tr>
                        {% else %}
                            <tr>
                                <td colspan="6">
                                    <section class="data-empty-panel">
                                        <i class="ti ti-beach" aria-hidden="true"></i>
                                        <strong>Aucune demande</strong>
                                        <span>Créez votre première demande de congé.</span>
                                    </section>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </section>

            <section class="record-tab-panel" data-tabs-target="panel" data-tabs-id="calendar" hidden>
                <div class="my-leaves-placeholder">
                    <i class="ti ti-calendar-month" aria-hidden="true"></i>
                    <strong>Calendrier personnel</strong>
                    <span>Retrouvez vos absences dans le calendrier global des congés.</span>
                    <a class="data-button data-button--secondary" href="{{ path('app_leave_calendar_index') }}">Ouvrir le calendrier</a>
                </div>
            </section>

            <section class="record-tab-panel" data-tabs-target="panel" data-tabs-id="balances" hidden>
                <div class="data-table-wrap">
                    <table class="data-table data-table--balances">
                        <thead><tr><th>Type</th><th>Période</th><th class="data-table__numeric">Acquis</th><th class="data-table__numeric">Pris</th><th class="data-table__numeric">En attente</th><th class="data-table__numeric">Disponible</th></tr></thead>
                        <tbody>
                        {% for balance in balances %}
                            <tr>
                                <td><span class="data-type-label"><i style="background: {{ balance.leaveType.couleur|default('#3b82f6') }}"></i><strong>{{ balance.leaveType.nom }}</strong></span></td>
                                <td>{{ balance.period.nom|default('—') }}</td>
                                <td class="data-table__numeric">{{ balance.acquired|number_format(1, ',', ' ') }} j</td>
                                <td class="data-table__numeric">{{ balance.taken|number_format(1, ',', ' ') }} j</td>
                                <td class="data-table__numeric text-warning">{{ balance.pending|number_format(1, ',', ' ') }} j</td>
                                <td class="data-table__numeric"><strong class="{{ balance.available < 0 ? 'text-danger' : 'text-primary' }}">{{ balance.available|number_format(1, ',', ' ') }} j</strong></td>
                            </tr>
                        {% else %}
                            <tr><td colspan="6" class="text-center text-muted py-4">Aucun solde disponible.</td></tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </section>

            <section class="record-tab-panel" data-tabs-target="panel" data-tabs-id="history" hidden>
                <div class="my-leaves-timeline">
                    {% for request in requests %}
                        <article>
                            <span class="data-badge data-badge--{{ status_tones[request.status]|default('muted') }}"><i></i>{{ status_labels[request.status]|default(request.status) }}</span>
                            <strong>{{ request.leaveType.nom }} · {{ request.durationDays|number_format(1, ',', ' ') }} j</strong>
                            <small>{{ request.updatedAt|date('d/m/Y H:i') }}</small>
                        </article>
                    {% else %}
                        <section class="data-empty-panel">Aucun historique.</section>
                    {% endfor %}
                </div>
            </section>
        </section>

        <aside class="my-leaves-side">
            <section class="settings-panel">
                <div class="settings-panel__header">
                    <div class="settings-panel__title">
                        <span class="settings-panel__icon settings-panel__icon--blue"><i class="ti ti-calendar-check" aria-hidden="true"></i></span>
                        <h2>Prochains congés</h2>
                    </div>
                    <span class="data-badge data-badge--info">{{ upcoming_count }}</span>
                </div>
                <div class="my-leaves-upcoming">
                    {% for request in upcoming_requests|default([]) %}
                        {% set month_label = month_labels[(request.startDate|date('n')) - 1]|default(request.startDate|date('m')) %}
                        {% set day_label = day_labels[(request.startDate|date('N')) - 1]|default('') %}
                        <a class="my-leaves-upcoming__item" href="{{ path('app_leave_show', {id: request.id}) }}">
                            <span class="my-leaves-upcoming__date">
                                <strong>{{ month_label }}</strong>
                                <b>{{ request.startDate|date('d') }}</b>
                            </span>
                            <span class="my-leaves-upcoming__content">
                                <strong>{{ request.leaveType.nom }}</strong>
                                <small>{{ day_label }} {{ request.startDate|date('d/m/Y') }}</small>
                                <small>{{ request.durationDays|number_format(request.durationDays == request.durationDays|round ? 0 : 1, ',', ' ') }} jour{{ request.durationDays > 1 ? 's' : '' }}</small>
                            </span>
                        </a>
                    {% else %}
                        <div class="my-leaves-upcoming__empty">Aucun congé planifié.</div>
                    {% endfor %}
                </div>
            </section>
        </aside>
    </div>
</div>
{% endblock %}