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

{% block title %}Soldes de congés{% endblock %}

{% block page_header %}{% endblock %}

{% block content %}
{% set selected_period = null %}
{% for period in periods %}
    {% if filters.period|default('') == period.id %}
        {% set selected_period = period %}
    {% endif %}
{% endfor %}

<div class="data-page leave-balance-page" data-controller="leave-balance">
    <div class="data-page__header">
        <div>
            <nav class="data-breadcrumb" aria-label="Fil d'Ariane">
                <span>Congés</span>
                <i class="ti ti-chevron-right" aria-hidden="true"></i>
                <strong>Soldes</strong>
            </nav>
            <h1>Soldes de congés</h1>
        </div>
        <div class="data-page__actions">
            <a class="data-button data-button--secondary" href="{{ path('app_leave_export_index', {kind: 'balances'}) }}">
                <i class="ti ti-download" aria-hidden="true"></i>
                Exporter CSV
            </a>
            <a class="data-button data-button--primary" href="{{ path('app_leave_adjustment_index') }}">
                <i class="ti ti-adjustments-horizontal" aria-hidden="true"></i>
                Ajustement groupé
            </a>
        </div>
    </div>

    <form class="data-filter-card" method="get">
        <label class="data-filter-field data-filter-field--wide">
            <span>Rechercher un salarié</span>
            <span class="data-search data-search--fluid">
                <i class="ti ti-search" aria-hidden="true"></i>
                <input name="q" value="{{ filters.q|default('') }}" placeholder="Nom, matricule..." autocomplete="off">
            </span>
        </label>

        <label class="data-filter-field">
            <span>Établissement</span>
            <select name="etablissement" data-action="change->leave-balance#submitFilters">
                <option value="">Tous</option>
                {% for establishment in establishments %}
                    <option value="{{ establishment.id }}" {{ filters.etablissement|default('') == establishment.id ? 'selected' : '' }}>{{ establishment.nom }}</option>
                {% endfor %}
            </select>
        </label>

        <label class="data-filter-field">
            <span>Service</span>
            <select name="service" data-action="change->leave-balance#submitFilters">
                <option value="">Tous</option>
                {% for service in services %}
                    <option value="{{ service.id }}" {{ filters.service|default('') == service.id ? 'selected' : '' }}>{{ service.nom }}</option>
                {% endfor %}
            </select>
        </label>

        <label class="data-filter-field">
            <span>Période de congés</span>
            <select name="period" data-action="change->leave-balance#submitFilters">
                <option value="">Toutes</option>
                {% for period in periods %}
                    <option value="{{ period.id }}" {{ filters.period|default('') == period.id ? 'selected' : '' }}>{{ period.nom }}</option>
                {% endfor %}
            </select>
        </label>

        <label class="data-filter-field">
            <span>Type de congé</span>
            <select name="type" data-action="change->leave-balance#submitFilters">
                <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>
        </label>

        <div class="data-filter-actions">
            <button class="data-button data-button--secondary" type="button" data-action="leave-balance#reset">
                <i class="ti ti-rotate-clockwise" aria-hidden="true"></i>
                Réinitialiser
            </button>
            <button class="data-button data-button--primary" type="submit">
                <i class="ti ti-filter" aria-hidden="true"></i>
                Filtrer
            </button>
        </div>
    </form>

    <div class="metric-grid">
        <article class="metric-card">
            <span class="metric-card__icon metric-card__icon--blue"><i class="ti ti-calendar-check" aria-hidden="true"></i></span>
            <span class="metric-card__label">Total acquis</span>
            <strong class="metric-card__value">{{ stats.total_acquired|number_format(0, ',', ' ') }}<small> j</small></strong>
            <span class="metric-card__caption">{{ stats.employee_count }} salarié{{ stats.employee_count > 1 ? 's' : '' }}</span>
        </article>
        <article class="metric-card">
            <span class="metric-card__icon metric-card__icon--green"><i class="ti ti-plane-departure" aria-hidden="true"></i></span>
            <span class="metric-card__label">Total pris</span>
            <strong class="metric-card__value">{{ stats.total_taken|number_format(0, ',', ' ') }}<small> j</small></strong>
            <span class="metric-card__trend">{{ stats.taken_rate|number_format(1, ',', ' ') }}% consommés</span>
        </article>
        <article class="metric-card">
            <span class="metric-card__icon metric-card__icon--amber"><i class="ti ti-hourglass" aria-hidden="true"></i></span>
            <span class="metric-card__label">En attente</span>
            <strong class="metric-card__value metric-card__value--warning">{{ stats.total_pending|number_format(0, ',', ' ') }}<small> j</small></strong>
            <span class="metric-card__caption">{{ stats.pending_rows }} demande{{ stats.pending_rows > 1 ? 's' : '' }}</span>
        </article>
        <article class="metric-card">
            <span class="metric-card__icon metric-card__icon--red"><i class="ti ti-alert-circle" aria-hidden="true"></i></span>
            <span class="metric-card__label">Soldes négatifs</span>
            <strong class="metric-card__value metric-card__value--danger">{{ stats.negative_salaries }}</strong>
            <span class="metric-card__trend metric-card__trend--danger">À régulariser</span>
        </article>
        <article class="metric-card">
            <span class="metric-card__icon metric-card__icon--purple"><i class="ti ti-arrows-exchange" aria-hidden="true"></i></span>
            <span class="metric-card__label">Soldes à reporter</span>
            <strong class="metric-card__value metric-card__value--purple">{{ stats.carry_salaries }}</strong>
            <span class="metric-card__caption">Avant 31/10/{{ 'now'|date('Y') }}</span>
        </article>
    </div>

    <section class="data-card">
        <div class="data-toolbar">
            <div class="data-toolbar__title">
                <i class="ti ti-scale" aria-hidden="true"></i>
                <h2>Soldes par salarié</h2>
                <span class="data-pill">{{ balances|length }} salarié{{ balances|length > 1 ? 's' : '' }}</span>
            </div>
            <div class="data-toolbar__controls">
                <span class="data-table-legend data-table-legend--danger"><i></i>Solde négatif</span>
                <span class="data-table-legend">Solde faible</span>
                <select name="period_display" aria-label="Période affichée" disabled>
                    <option>Période : {{ selected_period ? selected_period.nom : 'Toutes' }}</option>
                </select>
            </div>
        </div>

        <div class="data-table-wrap">
            <table class="data-table data-table--balances">
                <thead>
                    <tr>
                        <th>Salarié</th>
                        <th>Établissement</th>
                        <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">Att.</th>
                        <th class="data-table__numeric">Ajusté</th>
                        <th class="data-table__numeric">Reporté</th>
                        <th class="data-table__numeric">Expiré</th>
                        <th class="data-table__numeric">Disponible</th>
                        <th class="data-table__actions">Actions</th>
                    </tr>
                </thead>
                <tbody>
                {% for balance in balances %}
                    {% set salarie = balance.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 type_code = balance.leaveType.code|default(balance.leaveType.nom|default(''))|lower %}
                    {% set type_tone = 'blue' %}
                    {% if 'rtt' in type_code %}
                        {% set type_tone = 'green' %}
                    {% elseif 'recup' in type_code or 'récup' in type_code %}
                        {% set type_tone = 'purple' %}
                    {% endif %}
                    <tr class="data-row {{ balance.available < 0 ? 'is-danger-soft' : '' }}">
                        <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_balance_employee', {salarieId: salarie.id}) }}">{{ salarie }}</a>
                                    <span class="data-entity__meta">{{ salarie.matricule|default('Matricule non renseigné') }}</span>
                                </span>
                            </span>
                        </td>
                        <td><span class="data-main-text">{{ salarie.etablissement|default('—') }}</span></td>
                        <td>
                            <span class="data-type">
                                <i class="data-type__dot data-type__dot--{{ type_tone }}" aria-hidden="true"></i>
                                {{ balance.leaveType.nom }}
                            </span>
                        </td>
                        <td><span class="data-main-text">{{ balance.period.nom }}</span></td>
                        <td class="data-table__numeric"><strong class="data-main-text">{{ balance.acquired|number_format(1, ',', ' ') }} j</strong></td>
                        <td class="data-table__numeric"><span class="data-main-text">{{ balance.taken|number_format(1, ',', ' ') }} j</span></td>
                        <td class="data-table__numeric"><span class="data-value data-value--warning">{{ balance.pending|number_format(1, ',', ' ') }} j</span></td>
                        <td class="data-table__numeric"><span class="data-main-text">{{ balance.adjusted > 0 ? '+' : '' }}{{ balance.adjusted|number_format(1, ',', ' ') }} j</span></td>
                        <td class="data-table__numeric"><span class="data-value data-value--purple">{{ balance.carriedOver|number_format(1, ',', ' ') }} j</span></td>
                        <td class="data-table__numeric"><span class="data-main-text">{{ balance.expired|number_format(1, ',', ' ') }} j</span></td>
                        <td class="data-table__numeric">
                            <span class="data-balance-value {{ balance.available < 0 ? 'data-balance-value--danger' : '' }}">
                                {{ balance.available|number_format(1, ',', ' ') }} j
                            </span>
                            {% if balance.available < 0 %}
                                <span class="data-badge data-badge--danger"><i aria-hidden="true"></i>Négatif</span>
                            {% endif %}
                        </td>
                        <td class="data-table__actions">
                            <div class="data-row-actions data-row-actions--visible">
                                <a class="data-icon-button" href="{{ path('app_leave_balance_employee', {salarieId: salarie.id}) }}" title="Voir"><i class="ti ti-eye" aria-hidden="true"></i></a>
                                <a class="data-icon-button" href="{{ path('app_leave_balance_employee', {salarieId: salarie.id}) }}#adjust" title="Ajuster"><i class="ti ti-edit" aria-hidden="true"></i></a>
                                <a class="data-icon-button" href="{{ path('app_leave_balance_employee', {salarieId: salarie.id}) }}" title="Recalculer"><i class="ti ti-refresh" aria-hidden="true"></i></a>
                            </div>
                        </td>
                    </tr>
                {% else %}
                    <tr>
                        <td colspan="12">
                            <div class="data-empty">
                                <i class="ti ti-scale-off" aria-hidden="true"></i>
                                <strong>Aucun solde disponible.</strong>
                            </div>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </section>
</div>
{% endblock %}