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

{% block title %}Demandes à valider{% endblock %}

{% block page_header %}{% endblock %}

{% block content %}
{% set status_labels = {
    submitted: 'Att. manager',
    pending_manager: 'Att. manager',
    pending_rh: 'Att. RH'
} %}

<div class="data-page approvals-page" data-controller="leave-management">
    <div class="data-page__header">
        <div>
            <nav class="data-breadcrumb" aria-label="Fil d'Ariane">
                <a class="text-black" href="{{ path('app_leave_management') }}">Congés</a>
                <i class="ti ti-chevron-right" aria-hidden="true"></i>
                <span class="text-muted">Demandes à valider</span>
            </nav>
            <h1>Demandes à valider</h1>
        </div>
        <div class="data-page__actions">
            <a class="data-button data-button--secondary" href="{{ path('app_leave_calendar_team') }}">
                <i class="ti ti-calendar-week" aria-hidden="true"></i>
                Calendrier équipe
            </a>
        </div>
    </div>

    <div class="metric-grid metric-grid--3">
        <article class="metric-card">
            <span class="metric-card__label">À valider</span>
            <strong class="metric-card__value metric-card__value--warning">{{ all_pending_count|default(requests|length) }}</strong>
            <span class="metric-card__icon metric-card__icon--amber"><i class="ti ti-alert-triangle" aria-hidden="true"></i></span>
        </article>
        <article class="metric-card">
            <span class="metric-card__label">Absences équipe cette semaine</span>
            <span class="metric-card__icon metric-card__icon--blue"><i class="ti ti-users" aria-hidden="true"></i></span>
            <strong class="metric-card__value">{{ weekly_absence_count|default(0) }}</strong>
        </article>
        <article class="metric-card">
            <span class="metric-card__label">Conflits potentiels</span>
            <span class="metric-card__icon metric-card__icon--red"><i class="ti ti-alert-triangle" aria-hidden="true"></i></span>
            <strong class="metric-card__value metric-card__value--danger">{{ conflict_count|default(0) }}</strong>
        </article>
    </div>

    {% if conflict_count|default(0) > 0 %}
        <div class="data-alert data-alert--warning">
            <i class="ti ti-alert-triangle" aria-hidden="true"></i>
            <strong>{{ conflict_count }} conflit{{ conflict_count > 1 ? 's' : '' }} détecté{{ conflict_count > 1 ? 's' : '' }} :</strong>
            <span>des demandes se chevauchent avec d'autres absences dans votre équipe. Vérifiez les indicateurs avant de valider.</span>
            <a href="{{ path('app_leave_calendar_team') }}">Voir les conflits</a>
        </div>
    {% endif %}

    <section class="data-card approvals-table-card">
        <div class="data-toolbar">
            <div class="data-toolbar__title">
                <i class="ti ti-list-check" aria-hidden="true"></i>
                <h2>Demandes en attente de validation</h2>
                <span class="data-count-badge">{{ requests|length }}</span>
            </div>
            <div class="data-toolbar__controls">
                <form method="get">
                    <select name="type" 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 }}" {{ selected_type|default('') == type.id ? 'selected' : '' }}>{{ type.nom }}</option>
                        {% endfor %}
                    </select>
                </form>
            </div>
        </div>

        <div class="data-table-wrap">
            <table class="data-table approvals-table">
                <thead>
                    <tr>
                        <th>Salarié</th>
                        <th>Service</th>
                        <th>Type</th>
                        <th>Dates</th>
                        <th>Durée</th>
                        <th>Solde dispo.</th>
                        <th>Conflit</th>
                        <th>Statut</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                {% for request in requests %}
                    {% set salarie = request.salarie %}
                    {% set photo_path = salarie.photo ? salarie.photo|trim : null %}
                    {% set avatar_src = photo_path ? (photo_path starts with 'http://' or photo_path starts with 'https://' ? photo_path : asset(photo_path starts with '/' ? photo_path|slice(1) : photo_path)) : null %}
                    {% set initials = ((salarie.prenom|default('')|first) ~ (salarie.nom|default('')|first))|upper ?: 'S' %}
                    {% set conflict_total = conflicts[request.id]|default(0) %}
                    {% set balance = balances[request.id]|default(null) %}
                    {% set type_code = request.leaveType.code|default(request.leaveType.nom)|lower %}
                    <tr class="data-row" data-leave-management-target="row" data-leave-type-id="{{ request.leaveType.id }}">
                        <td>
                            <span class="data-entity">
                                <span class="data-avatar {{ avatar_src ? '' : 'data-avatar--initials' }}">
                                    {% if avatar_src %}
                                        <img src="{{ avatar_src }}" alt="{{ salarie }}">
                                    {% else %}
                                        {{ initials }}
                                    {% endif %}
                                </span>
                                <span>
                                    <a class="data-entity__title" href="{{ path('app_leave_approval_show', {id: request.id}) }}">{{ salarie }}</a>
                                    <span class="data-entity__meta">{{ salarie.matricule ?: 'Sans matricule' }}</span>
                                </span>
                            </span>
                        </td>
                        <td><span class="data-main-text">{{ salarie.employeeService|default(salarie.service|default('—')) }}</span></td>
                        <td>
                            <span class="data-type">
                                <i class="data-type__dot data-type__dot--{{ 'rtt' in type_code ? 'green' : ('recuper' in type_code ? 'purple' : 'blue') }}" aria-hidden="true"></i>
                                {{ request.leaveType.nom }}
                            </span>
                        </td>
                        <td>
                            <span class="data-main-text">{{ request.startDate|date('d/m') }}{% if request.endDate|date('Y-m-d') != request.startDate|date('Y-m-d') %} - {{ request.endDate|date('d/m/Y') }}{% else %}/{{ request.startDate|date('Y') }}{% endif %}</span>
                        </td>
                        <td><strong class="data-main-text">{{ request.durationDays|number_format(request.durationDays == request.durationDays|round ? 0 : 1, ',', ' ') }} j</strong></td>
                        <td>
                            {% if balance is not null %}
                                <strong class="data-balance-value {{ balance < request.durationDays ? 'data-balance-value--danger' : '' }}">{{ balance|number_format(balance == balance|round ? 0 : 1, ',', ' ') }} j</strong>
                            {% else %}
                                <span class="data-sub-text">—</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if conflict_total > 0 %}
                                <span class="data-conflict data-conflict--warning">
                                    <i class="ti ti-alert-triangle" aria-hidden="true"></i>
                                    {{ conflict_total }} absent{{ conflict_total > 1 ? 's' : '' }}<br>même période
                                </span>
                            {% else %}
                                <span class="data-conflict data-conflict--success">
                                    <i class="ti ti-circle-check" aria-hidden="true"></i>
                                    Aucun conflit
                                </span>
                            {% endif %}
                        </td>
                        <td>
                            <span class="data-badge data-badge--warning">
                                <i aria-hidden="true"></i>{{ status_labels[request.status]|default('Att. manager') }}
                            </span>
                        </td>
                        <td>
                            <div class="data-row-actions data-row-actions--visible">
                                <a class="data-action-button" href="{{ path('app_leave_approval_show', {id: request.id}) }}" aria-label="Voir" title="Voir">
                                    <i class="ti ti-eye" aria-hidden="true"></i><span>Voir</span>
                                </a>
                                {% if is_granted('LEAVE_APPROVE', request) %}
                                    <form method="post" action="{{ path('app_leave_approve', {id: request.id}) }}">
                                        <input type="hidden" name="_token" value="{{ csrf_token('leave_request_approve_' ~ request.id) }}">
                                        <button class="data-action-button data-action-button--label data-action-button--success" type="submit">
                                            <i class="ti ti-check" aria-hidden="true"></i><span>Valider</span>
                                        </button>
                                    </form>
                                {% endif %}
                                {% if is_granted('LEAVE_REFUSE', request) %}
                                    <form method="post" action="{{ path('app_leave_refuse', {id: request.id}) }}">
                                        <input type="hidden" name="_token" value="{{ csrf_token('leave_request_refuse_' ~ request.id) }}">
                                        <button class="data-action-button data-action-button--label data-action-button--danger" type="submit">
                                            <i class="ti ti-x" aria-hidden="true"></i><span>Refuser</span>
                                        </button>
                                    </form>
                                {% endif %}
                            </div>
                        </td>
                    </tr>
                {% else %}
                    <tr>
                        <td colspan="9">
                            <div class="data-empty">
                                <i class="ti ti-inbox" aria-hidden="true"></i>
                                <strong>Aucune demande à valider.</strong>
                            </div>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </section>
</div>
{% endblock %}