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

{% block title %}Toutes les demandes de congés{% endblock %}

{% block page_header %}{% endblock %}

{% block content %}
{% set status_classes = {
    draft: 'muted',
    submitted: 'warning',
    pending_manager: 'warning',
    pending_rh: 'warning',
    approved: 'success',
    refused: 'muted',
    cancelled: 'muted',
    cancel_requested: 'warning',
    expired: 'muted'
} %}

<div class="ops-dashboard data-page" data-controller="leave-management">
    <div class="ops-dashboard__header">
        <div class="ops-dashboard__title">
            <nav class="mb-2" 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">Toutes les demandes</span>
            </nav>
            <h1>Toutes les demandes de congés</h1>
        </div>
        <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 class="metric-grid metric-grid--4">
        <article class="metric-card">
            <span class="metric-card__icon metric-card__icon--blue"><i class="ti ti-layers-subtract" aria-hidden="true"></i></span>
            <span class="metric-card__label">Demandes</span>
            <strong class="metric-card__value">{{ request_stats.month }}</strong>
        </article>
        <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">En attente</span>
            <strong class="metric-card__value metric-card__value--warning">{{ request_stats.pending }}</strong>
        </article>
        <article class="metric-card">
            <span class="metric-card__icon metric-card__icon--green"><i class="ti ti-circle-check" aria-hidden="true"></i></span>
            <span class="metric-card__label">Approuvées</span>
            <strong class="metric-card__value metric-card__value--success">{{ request_stats.approved }}</strong>
        </article>
        <article class="metric-card">
            <span class="metric-card__icon metric-card__icon--red"><i class="ti ti-circle-x" aria-hidden="true"></i></span>
            <span class="metric-card__label">Refusées</span>
            <strong class="metric-card__value metric-card__value--danger">{{ request_stats.refused }}</strong>
        </article>
    </div>


    <form class="ops-panel ops-filter-panel" method="get">
        <div class="ops-filter-panel__header">
            <h2><i class="ti ti-adjustments-horizontal" aria-hidden="true"></i> Filtres</h2>
        </div>
        <div class="ops-filter-grid">
            <div class="ops-filter-field ops-filter-field--wide">
                <i class="ti ti-search" aria-hidden="true"></i>
                <input name="q" value="{{ filters.q|default('') }}" placeholder="Salarié, matricule, référence...">
            </div>
            <select class="ops-filter-field" name="status">
                <option value="">Tous les statuts</option>
                {% for value, label in status_labels %}
                    <option value="{{ value }}" {{ filters.status|default('') == value ? 'selected' : '' }}>{{ label }}</option>
                {% endfor %}
            </select>
            <select class="ops-filter-field" name="type">
                <option value="">Tous les types</option>
                {% for type in types %}
                    <option value="{{ type.id }}" {{ filters.type|default('') == type.id ? 'selected' : '' }}>{{ type.nom }}</option>
                {% endfor %}
            </select>
            <select class="ops-filter-field" name="salarie">
                <option value="">Tous les salariés</option>
                {% for salarie in salaries %}
                    <option value="{{ salarie.id }}" {{ filters.salarie|default('') == salarie.id ? 'selected' : '' }}>{{ salarie }}</option>
                {% endfor %}
            </select>
            <select class="ops-filter-field" name="manager">
                <option value="">Tous les managers</option>
                {% for manager in managers %}
                    <option value="{{ manager.id }}" {{ filters.manager|default('') == manager.id ? 'selected' : '' }}>{{ manager }}</option>
                {% endfor %}
            </select>
            <select class="ops-filter-field" name="etablissement">
                <option value="">Tous les établissements</option>
                {% for etablissement in etablissements %}
                    <option value="{{ etablissement.id }}" {{ filters.etablissement|default('') == etablissement.id ? 'selected' : '' }}>{{ etablissement.nom }}</option>
                {% endfor %}
            </select>
            <div class="ops-filter-field ops-filter-field--date">
                <i class="ti ti-calendar" aria-hidden="true"></i>
                <input type="date" name="date_start" value="{{ filters.date_start|default('') }}" aria-label="Du">
            </div>
            <div class="ops-filter-field ops-filter-field--date">
                <i class="ti ti-calendar" aria-hidden="true"></i>
                <input type="date" name="date_end" value="{{ filters.date_end|default('') }}" aria-label="Au">
            </div>
        </div>
        <div class="ops-filter-actions">
            <a class="ops-reset" href="{{ path('app_leave_index') }}"><i class="ti ti-rotate-clockwise" aria-hidden="true"></i> Réinitialiser les filtres</a>
            <button class="ops-button" type="submit"><i class="ti ti-filter" aria-hidden="true"></i> Filtrer</button>
        </div>
    </form>

    <section class="ops-panel">
        <div class="ops-table-toolbar">
            <label class="ops-checkline">
                <input type="checkbox" data-leave-management-target="selectAll" data-action="leave-management#toggleAll">
                <strong>{{ requests|length }}</strong> demandes trouvées
            </label>
            <div class="ops-table-actions">
                <a class="ops-action ops-action--muted" href="{{ path('app_leave_export_index') }}"><i class="ti ti-file-spreadsheet" aria-hidden="true"></i> Export CSV</a>
                <a class="ops-action ops-action--muted" href="{{ path('app_leave_export_index', {kind: 'payroll'}) }}"><i class="ti ti-file-export" aria-hidden="true"></i> Export paie</a>
                <button class="ops-action ops-action--muted" type="button"><i class="ti ti-checks" aria-hidden="true"></i> Marquer traité</button>
            </div>
        </div>
        <div class="data-table-wrap">
            <table class="data-table">
                <thead>
                    <tr>
                        <th class="data-table__select"><input type="checkbox" aria-label="Tout sélectionner" data-leave-management-target="selectAll" data-action="leave-management#toggleAll"></th>
                        <th>Référence</th>
                        <th>Salarié</th>
                        <th>Type</th>
                        <th>Période</th>
                        <th>Durée</th>
                        <th>Manager</th>
                        <th>Statut</th>
                        <th>Créée le</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                {% for item in requests %}
                    {% set salarie = item.salarie %}
                    {% set status_class = status_classes[item.status]|default('muted') %}
                    {% 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><input type="checkbox" aria-label="Sélectionner {{ item.reference }}" data-leave-management-target="checkbox"></td>
                        <td><a class="data-badge data-badge--info" href="{{ path('app_leave_show', {id: item.id}) }}">{{ item.reference }}</a></td>
                        <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 ?: 'Sans matricule' }}</span>
                                </span>
                            </span>
                        </td>
                        <td><span class="data-main-text">{{ item.leaveType.nom }}</span></td>
                        <td><span class="data-sub-text">{{ item.startDate|date('d/m/Y') }}{% if item.endDate|date('Y-m-d') != item.startDate|date('Y-m-d') %} - {{ item.endDate|date('d/m/Y') }}{% endif %}</span></td>
                        <td><strong class="data-main-text">{{ item.durationDays|number_format(item.durationDays == item.durationDays|round ? 0 : 1, ',', ' ') }} j</strong></td>
                        <td><span class="data-sub-text">{{ item.manager ?: '-' }}</span></td>
                        <td>
                            <span class="data-badge data-badge--{{ status_class }}">
                                <i aria-hidden="true"></i>{{ status_labels[item.status]|default(item.status) }}
                            </span>
                        </td>
                        <td><span class="data-sub-text">{{ item.createdAt|date('d/m/Y') }}</span></td>
                        <td>
                            <div class="data-row-actions">
                                <a class="data-action-button" href="{{ path('app_leave_show', {id: item.id}) }}" aria-label="Voir" title="Voir">
                                    <i class="ti ti-eye" aria-hidden="true"></i><span>Voir</span>
                                </a>
                            </div>
                        </td>
                    </tr>
                {% else %}
                    <tr><td colspan="10"><div class="data-empty"><i class="ti ti-inbox" aria-hidden="true"></i><strong>Aucune demande ne correspond aux filtres.</strong></div></td></tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </section>
</div>
{% endblock %}