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

{% block title %}Solde de congés — {{ salarie }}{% endblock %}

{% block page_header %}{% endblock %}

{% block content %}
{% set avatar_src = salarie.photo ? asset('uploads/salaries/' ~ salarie.photo) : null %}
{% set initials = (salarie.prenom|default('?')|first ~ salarie.nom|default('')|first)|upper %}
{% set service_name = salarie.employeeService ? salarie.employeeService.nom : salarie.service|default('') %}
{% set job_name = salarie.employeeJob ? salarie.employeeJob.nom : salarie.poste|default('') %}
{% set status = salarie.statut|default('actif') %}
{% set colors = ['blue', 'green', 'purple', 'orange', 'muted'] %}
{% set selected_period = filters.period|default('') %}
{% set status_labels = {
    draft: 'Brouillon',
    submitted: 'Soumise',
    pending_manager: 'Att. manager',
    pending_hr: 'Att. RH',
    approved: 'Approuvée',
    refused: 'Refusée',
    cancelled: 'Annulée'
} %}

<div class="data-page" data-controller="leave-balance">
    <div class="data-page__header">
        <div>
            <nav class="data-breadcrumb">
                <a href="{{ path('app_leave_index') }}">Congés</a>
                <i class="ti ti-chevron-right" aria-hidden="true"></i>
                <a href="{{ path('app_leave_balance_index') }}">Soldes</a>
                <i class="ti ti-chevron-right" aria-hidden="true"></i>
                <span class="text-muted">{{ salarie }}</span>
            </nav>
            <h1>Solde de congés — {{ salarie }}</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
            </a>
            <button class="data-button data-button--primary" type="button" data-action="leave-balance#openAdjust">
                <i class="ti ti-adjustments-horizontal" aria-hidden="true"></i>
                Ajuster un solde
            </button>
        </div>
    </div>

    <section class="data-profile-card">
        <span class="data-profile-card__avatar {{ avatar_src ? '' : 'data-profile-card__avatar--initials' }}">
            {% if avatar_src %}
                <img src="{{ avatar_src }}" alt="{{ salarie }}">
            {% else %}
                {{ initials }}
            {% endif %}
        </span>
        <div class="data-profile-card__body">
            <div class="data-profile-card__heading">
                <h2>{{ salarie }}</h2>
                <span class="data-badge {{ status == 'actif' ? 'data-badge--success' : 'data-badge--muted' }}"><i></i>{{ status|capitalize }}</span>
            </div>
            <p>{{ job_name|default('Poste non renseigné') }} — {{ salarie.matricule|default('Matricule non renseigné') }}</p>
            <div class="data-profile-card__meta">
                <span><i class="ti ti-building-community" aria-hidden="true"></i>{{ service_name|default('Service non renseigné') }}</span>
                <span><i class="ti ti-map-pin" aria-hidden="true"></i>{{ salarie.etablissement ?: 'Établissement non renseigné' }}</span>
                <span><i class="ti ti-user-star" aria-hidden="true"></i>{{ salarie.manager ?: 'Manager non renseigné' }}</span>
                <span><i class="ti ti-calendar" aria-hidden="true"></i>Entrée: {{ salarie.dateEntree ? salarie.dateEntree|date('d/m/Y') : 'Non renseignée' }}</span>
            </div>
        </div>
        <a class="data-profile-card__link" href="{{ path('employee_show', {id: salarie.id}) }}">
            <i class="ti ti-external-link" aria-hidden="true"></i>
            Voir le profil
        </a>
    </section>

    <div class="balance-summary-grid">
        {% for balance in balances|slice(0, 4) %}
            {% set color = colors[loop.index0 % 5] %}
            {% set base = balance.acquired + balance.adjusted + balance.carriedOver %}
            {% set raw_percent = base > 0 ? (balance.available / base * 100) : 0 %}
            {% set percent = raw_percent < 0 ? 0 : (raw_percent > 100 ? 100 : raw_percent) %}
            <article class="balance-summary-card balance-summary-card--{{ color }}">
                <span class="balance-summary-card__type"><i></i>{{ balance.leaveType.nom }}</span>
                <strong class="balance-summary-card__value">
                    {% if balance.leaveType.balanceManaged %}
                        {{ balance.available|number_format(balance.available == balance.available|round ? 0 : 1, ',', ' ') }} j
                    {% else %}
                        —
                    {% endif %}
                </strong>
                <span class="balance-summary-card__caption">{{ balance.leaveType.balanceManaged ? 'disponibles' : 'non décompté' }}</span>
                <span class="balance-summary-card__bar"><i style="width: {{ percent|round(0, 'floor') }}%"></i></span>
                <span class="balance-summary-card__details">
                    <span>Acquis: <strong>{{ balance.acquired|number_format(1, ',', ' ') }} j</strong></span>
                    <span>Pris: <strong>{{ balance.taken|number_format(1, ',', ' ') }} j</strong></span>
                    <span>Attente: <strong class="{{ balance.pending > 0 ? 'text-warning' : '' }}">{{ balance.pending|number_format(1, ',', ' ') }} j</strong></span>
                    <span>Ajusté: <strong>{{ balance.adjusted|number_format(1, ',', ' ') }} j</strong></span>
                </span>
            </article>
        {% else %}
            <section class="data-empty-panel balance-summary-grid__empty">
                <i class="ti ti-calendar-stats" aria-hidden="true"></i>
                <strong>Aucun solde disponible</strong>
                <span>Initialisez les compteurs de ce salarié pour afficher le détail.</span>
            </section>
        {% endfor %}
    </div>

    <section class="data-card data-tab-card" data-controller="tabs" data-tabs-active-value="balances">
        <div class="data-tab-card__header">
            <div class="record-tabs record-tabs--line" role="tablist" aria-label="Détail des soldes">
                <button type="button" class="record-tabs__item is-active" data-tabs-target="tab" data-tabs-id="balances" data-action="tabs#select" role="tab" aria-selected="true">Soldes</button>
                <button type="button" class="record-tabs__item" data-tabs-target="tab" data-tabs-id="movements" data-action="tabs#select" role="tab" aria-selected="false">Mouvements</button>
                <button type="button" class="record-tabs__item" data-tabs-target="tab" data-tabs-id="adjustments" data-action="tabs#select" role="tab" aria-selected="false">Ajustements</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>
            <form class="data-tab-card__period" method="get">
                <select class="form-select" name="period" data-action="leave-balance#submitFilters">
                    <option value="">Toutes les périodes</option>
                    {% for period in periods %}
                        <option value="{{ period.id }}" {{ selected_period == period.id ? 'selected' : '' }}>Période : {{ period.nom }}</option>
                    {% endfor %}
                </select>
            </form>
        </div>

        <section class="record-tab-panel is-active" data-tabs-target="panel" data-tabs-id="balances">
            <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">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 color = colors[loop.index0 % 5] %}
                        <tr class="data-row {{ balance.available < 0 ? 'is-danger-soft' : '' }}">
                            <td>
                                <span class="data-type">
                                    <i class="data-type__dot data-type__dot--{{ color }}"></i>
                                    {{ balance.leaveType.nom }}
                                </span>
                            </td>
                            <td class="data-main-text">{{ balance.period.nom }}</td>
                            <td class="data-table__numeric">{{ balance.acquired|number_format(1, ',', ' ') }} j</td>
                            <td class="data-table__numeric {{ balance.taken > 0 ? 'text-danger' : '' }}">{{ balance.taken > 0 ? '-' : '' }}{{ balance.taken|abs|number_format(1, ',', ' ') }} j</td>
                            <td class="data-table__numeric {{ balance.pending > 0 ? 'text-warning' : '' }}">{{ balance.pending|number_format(1, ',', ' ') }} j</td>
                            <td class="data-table__numeric">{{ balance.adjusted > 0 ? '+' : '' }}{{ balance.adjusted|number_format(1, ',', ' ') }} j</td>
                            <td class="data-table__numeric">{{ balance.carriedOver|number_format(1, ',', ' ') }} j</td>
                            <td class="data-table__numeric">{{ balance.expired|number_format(1, ',', ' ') }} j</td>
                            <td class="data-table__numeric">
                                <strong class="data-badge {{ balance.available < 0 ? 'data-badge--danger' : (balance.available == 0 ? 'data-badge--muted' : 'data-badge--info') }}">
                                    <i></i>{{ balance.available|number_format(1, ',', ' ') }} j
                                </strong>
                            </td>
                            <td class="data-table__actions">
                                <div class="data-row-actions data-row-actions--visible">
                                    <button class="data-action-button" type="button" title="Ajuster" data-action="leave-balance#openAdjust" data-leave-balance-type="{{ balance.leaveType.id }}" data-leave-balance-period="{{ balance.period.id }}">
                                        <i class="ti ti-edit" aria-hidden="true"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    {% else %}
                        <tr><td colspan="10" class="text-center text-muted py-5">Aucun compteur pour ce salarié.</td></tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </section>

        <section class="record-tab-panel" data-tabs-target="panel" data-tabs-id="movements" hidden>
            <div class="data-table-wrap">
                <table class="data-table">
                    <thead><tr><th>Référence</th><th>Type</th><th>Période</th><th class="data-table__numeric">Durée</th><th>Statut</th><th>Créée le</th></tr></thead>
                    <tbody>
                    {% for request in requests %}
                        <tr class="data-row">
                            <td><a class="data-entity__title" href="{{ path('app_leave_show', {id: request.id}) }}">{{ request.reference }}</a></td>
                            <td><span class="data-type"><i class="data-type__dot data-type__dot--blue"></i>{{ request.leaveType.nom }}</span></td>
                            <td class="data-main-text">{{ request.startDate|date('d/m/Y') }}{% if request.endDate and request.endDate != request.startDate %} — {{ request.endDate|date('d/m/Y') }}{% endif %}</td>
                            <td class="data-table__numeric">{{ request.durationDays|number_format(1, ',', ' ') }} j</td>
                            <td><span class="data-badge {{ request.status in ['approved'] ? 'data-badge--success' : (request.status in ['refused', 'cancelled'] ? 'data-badge--danger' : 'data-badge--warning') }}"><i></i>{{ status_labels[request.status]|default(request.status) }}</span></td>
                            <td class="data-sub-text">{{ request.createdAt|date('d/m/Y H:i') }}</td>
                        </tr>
                    {% else %}
                        <tr><td colspan="6" class="text-center text-muted py-5">Aucun mouvement sur la période.</td></tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </section>

        <section class="record-tab-panel" data-tabs-target="panel" data-tabs-id="adjustments" hidden>
            <div class="data-split-panel" id="adjust">
                <form class="data-inline-form" method="post" action="{{ path('app_leave_balance_adjust', {salarieId: salarie.id}) }}">
                    <input type="hidden" name="_token" value="{{ csrf_token('leave_balance_adjust_' ~ salarie.id) }}">
                    <label>
                        <span>Type</span>
                        <select class="form-select" name="leaveType" required data-leave-balance-target="adjustType">
                            {% for type in types %}
                                <option value="{{ type.id }}">{{ type.nom }}</option>
                            {% endfor %}
                        </select>
                    </label>
                    <label>
                        <span>Période</span>
                        <select class="form-select" name="period" required data-leave-balance-target="adjustPeriod">
                            {% for period in periods %}
                                <option value="{{ period.id }}" {{ selected_period == period.id ? 'selected' : '' }}>{{ period.nom }}</option>
                            {% endfor %}
                        </select>
                    </label>
                    <label>
                        <span>Ajustement</span>
                        <input class="form-control" type="number" step="0.25" name="amount" required data-leave-balance-target="adjustAmount">
                    </label>
                    <label class="data-inline-form__wide">
                        <span>Motif</span>
                        <textarea class="form-control" name="reason" rows="2" required></textarea>
                    </label>
                    <button class="data-button data-button--primary" type="submit">Enregistrer</button>
                </form>

                <div class="data-table-wrap">
                    <table class="data-table">
                        <thead><tr><th>Date</th><th>Type</th><th>Période</th><th class="data-table__numeric">Montant</th><th>Motif</th><th>Utilisateur</th></tr></thead>
                        <tbody>
                        {% for adjustment in adjustments %}
                            <tr class="data-row">
                                <td class="data-main-text">{{ adjustment.createdAt|date('d/m/Y H:i') }}</td>
                                <td>{{ adjustment.leaveType.nom }}</td>
                                <td>{{ adjustment.period.nom }}</td>
                                <td class="data-table__numeric {{ adjustment.amount < 0 ? 'text-danger' : 'data-balance-value' }}">{{ adjustment.amount > 0 ? '+' : '' }}{{ adjustment.amount|number_format(1, ',', ' ') }} j</td>
                                <td class="data-sub-text">{{ adjustment.reason }}</td>
                                <td class="data-sub-text">{{ adjustment.createdBy }}</td>
                            </tr>
                        {% else %}
                            <tr><td colspan="6" class="text-center text-muted py-5">Aucun ajustement enregistré.</td></tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </section>

        <section class="record-tab-panel" data-tabs-target="panel" data-tabs-id="history" hidden>
            <div class="data-activity-list">
                {% for adjustment in adjustments|slice(0, 4) %}
                    <article class="data-activity-item">
                        <span class="data-activity-item__icon data-activity-item__icon--purple"><i class="ti ti-adjustments" aria-hidden="true"></i></span>
                        <div>
                            <strong>Ajustement {{ adjustment.amount > 0 ? 'positif' : 'négatif' }} de {{ adjustment.leaveType.nom }}</strong>
                            <span>{{ adjustment.reason }} · {{ adjustment.createdAt|date('d/m/Y H:i') }}</span>
                        </div>
                    </article>
                {% endfor %}
                {% for request in requests|slice(0, 4) %}
                    <article class="data-activity-item">
                        <span class="data-activity-item__icon data-activity-item__icon--blue"><i class="ti ti-calendar-event" aria-hidden="true"></i></span>
                        <div>
                            <strong>{{ request.leaveType.nom }} {{ status_labels[request.status]|default(request.status)|lower }}</strong>
                            <span>{{ request.reference }} · {{ request.durationDays|number_format(1, ',', ' ') }} j · {{ request.createdAt|date('d/m/Y H:i') }}</span>
                        </div>
                    </article>
                {% endfor %}
                {% if adjustments is empty and requests is empty %}
                    <div class="data-empty-panel">
                        <i class="ti ti-history" aria-hidden="true"></i>
                        <strong>Aucun historique</strong>
                        <span>Les mouvements apparaîtront ici après les premières demandes ou corrections.</span>
                    </div>
                {% endif %}
            </div>
        </section>
    </section>

    <section class="data-card data-compact-card">
        <div class="data-toolbar">
            <div class="data-toolbar__title">
                <i class="ti ti-history" aria-hidden="true"></i>
                <h2>Derniers mouvements</h2>
            </div>
            <a class="data-link" href="#history" data-action="leave-balance#showHistory">Voir tout l'historique</a>
        </div>
    </section>
</div>
{% endblock %}