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

{% block title %}Gestion des congés{% endblock %}

{% block page_header %}{% endblock %}

{% block content %}
<div class="ops-dashboard" data-controller="leave-management">
    <div class="ops-dashboard__header">
        <div class="ops-dashboard__title">
            <nav class="mb-2" aria-label="Fil d'Ariane">
                <span class="text-black">Congés</span>
                <i class="ti ti-chevron-right" aria-hidden="true"></i>
                <span class="text-muted">Tableau de bord</span>
            </nav>
            <h1>Tableau de bord congés</h1>
        </div>
        <a class="data-page data-button data-button--primary" href="{{ path('app_leave_new') }}">
            <i class="ti ti-plus" aria-hidden="true"></i>
            Nouvelle demande
        </a>
    </div>

    <div class="metric-grid">
        <article class="metric-card">
            <span class="metric-card__icon metric-card__icon--amber"><i class="ti ti-clock" aria-hidden="true"></i></span>
            <span class="metric-card__label">À valider</span>
            <strong class="metric-card__value">{{ pendingCount }}</strong>
            <span class="metric-card__caption">demandes en attente</span>
            <span class="metric-card__trend metric-card__trend--warning">+ {{ pending|length }} à traiter</span>
        </article>
        <article class="metric-card">
            <span class="metric-card__icon metric-card__icon--blue"><i class="ti ti-users" aria-hidden="true"></i></span>
            <span class="metric-card__label">Absents aujourd'hui</span>
            <strong class="metric-card__value">{{ absentToday|length }}</strong>
            <span class="metric-card__caption">salariés absents</span>
            <span class="metric-card__trend">Stable vs hier</span>
        </article>
        <article class="metric-card">
            <span class="metric-card__icon metric-card__icon--green"><i class="ti ti-calendar-check" aria-hidden="true"></i></span>
            <span class="metric-card__label">Cette semaine</span>
            <strong class="metric-card__value">{{ thisWeekCount }}</strong>
            <span class="metric-card__caption">congés à venir</span>
            <span class="metric-card__trend">Suivi hebdomadaire</span>
        </article>
        <article class="metric-card">
            <span class="metric-card__icon metric-card__icon--red"><i class="ti ti-alert-triangle" aria-hidden="true"></i></span>
            <span class="metric-card__label">Soldes critiques</span>
            <strong class="metric-card__value">{{ criticalCount }}</strong>
            <span class="metric-card__caption">soldes insuffisants</span>
            <span class="metric-card__trend metric-card__trend--danger">À surveiller</span>
        </article>
        <article class="metric-card">
            <span class="metric-card__icon metric-card__icon--muted"><i class="ti ti-x" aria-hidden="true"></i></span>
            <span class="metric-card__label">Refusées ce mois</span>
            <strong class="metric-card__value">{{ refusedThisMonthCount }}</strong>
            <span class="metric-card__caption">demandes refusées</span>
            <span class="metric-card__trend">Mois en cours</span>
        </article>
    </div>

    <div class="ops-layout">
        <section class="ops-panel">
            <div class="ops-panel__header">
                <h2>Demandes à traiter <span class="ops-count">{{ pendingCount }}</span></h2>
                <a class="ops-link" href="{{ path('app_leave_approvals') }}">Voir toutes <i class="ti ti-arrow-right" aria-hidden="true"></i></a>
            </div>
            <div class="ops-search">
                <input type="search" placeholder="Rechercher une demande..." data-leave-management-target="search" data-action="input->leave-management#filter">
            </div>
            <div class="data-page data-table-wrap">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>Salarié</th>
                            <th>Type</th>
                            <th>Période</th>
                            <th>Durée</th>
                            <th>Statut</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                    {% for request in pending %}
                        {% 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' %}
                        <tr class="data-row" data-leave-management-target="row">
                            <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>
                                        <strong class="data-entity__title">{{ salarie }}</strong>
                                        <span class="data-entity__meta">{{ salarie.matricule|default('') ?: 'Salarié' }}</span>
                                    </span>
                                </span>
                            </td>
                            <td><span class="data-main-text">{{ request.leaveType.nom }}</span></td>
                            <td><span class="data-sub-text">{{ request.startDate|date('d M Y') }} - {{ request.endDate|date('d M Y') }}</span></td>
                            <td><strong class="data-main-text">{{ request.durationDays|number_format(request.durationDays == request.durationDays|round ? 0 : 1, ',', ' ') }} j</strong></td>
                            <td>
                                <span class="data-badge data-badge--warning">
                                    <i aria-hidden="true"></i>{{ request.status == 'pending_rh' ? 'En attente RH' : 'En attente manager' }}
                                </span>
                            </td>
                            <td>
                                <div class="data-row-actions">
                                    {% if is_granted('LEAVE_APPROVE', request) %}
                                        <a class="data-action-button" href="{{ path('app_leave_approval_show', {id: request.id}) }}" title="Voir">
                                            <i class="ti ti-eye" aria-hidden="true"></i><span>Voir</span>
                                        </a>
                                        <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" type="submit" title="Valider">
                                                <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--danger" type="submit" title="Refuser">
                                                <i class="ti ti-x" aria-hidden="true"></i><span>Refuser</span>
                                            </button>
                                        </form>
                                    {% endif %}
                                </div>
                            </td>
                        </tr>
                    {% else %}
                        <tr><td colspan="6"><div class="data-empty"><i class="ti ti-inbox" aria-hidden="true"></i><strong>Aucune demande à traiter.</strong></div></td></tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </section>

        <aside class="ops-panel">
            <div class="ops-panel__header">
                <h2>Absents aujourd'hui</h2>
                <span class="ops-count">{{ absentToday|length }}</span>
            </div>
            <div class="ops-absent-list">
                {% for request in absentToday|slice(0, 6) %}
                    {% 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' %}
                    <div class="ops-absent">
                        <span class="data-avatar {{ avatar_src ? '' : 'data-avatar--initials' }}">
                            {% if avatar_src %}
                                <img src="{{ avatar_src }}" alt="{{ salarie }}">
                            {% else %}
                                {{ initials }}
                            {% endif %}
                        </span>
                        <span class="ops-absent__meta">
                            <span class="ops-absent__name">{{ salarie }}</span>
                            <span class="ops-absent__detail">{{ salarie.service|default('RH') }} · {{ request.leaveType.nom }}</span>
                        </span>
                        <span class="ops-pill {{ 'rtt' in request.leaveType.code|lower ? 'ops-pill--green' : 'ops-pill--blue' }}">{{ request.leaveType.code }}</span>
                    </div>
                {% else %}
                    <div class="text-muted">Aucun absent aujourd'hui.</div>
                {% endfor %}
            </div>
        </aside>
    </div>
</div>
{% endblock %}