{% extends 'base.html.twig' %}
{#
  ══════════════════════════════════════════════════════════════════
  Template — Feuille de présence mensuelle (saisie)
  ══════════════════════════════════════════════════════════════════
  Utilisé à la fois par l'employé connecté (PointageController)
  et par l'administrateur (AdminController) via les variables :
    saveRoute / saveParams : route + paramètres de sauvegarde
    pdfRoute  / pdfParams  : route + paramètres d'export PDF
    isAdmin                : booléen — affiche les tarifs unitaires
                             et autorise la modification des observations

  Variables attendues :
    targetUser   : User        — employé affiché
    feuille      : Pointage[]  — lignes du mois (une par jour)
    year, month  : int         — période affichée
    totaux       : array       — cumuls mensuels (hj, hn, repas…)
    weeklyTotals : array       — sous-totaux par semaine ISO
    statuts      : StatutPointage[] — toutes les valeurs de l'enum
    tarifs       : array|null  — tarifs d'indemnités (si définis)
    totalAPayer  : float       — montant total calculé
    feuilleM     : FeuilleMensuelle|null — km + observations

  Fonctionnalités interactives (JavaScript en bas de page) :
    - Calcul HJ/HN en temps réel dès que les heures changent
    - Calcul du kilométrage mensuel (fin - début)
    - Bouton "Sauvegarder" flottant (position: fixed) toujours visible

  Accessibilité mobile :
    - Toutes les colonnes sont forcées visibles (.pointage-scroll)
    - Scroll horizontal dans le conteneur du tableau
    - Sticky sur thead (en-tête) et tfoot (totaux)
  ══════════════════════════════════════════════════════════════════
#}

{% block title %}Feuille de présence — {{ targetUser.nomComplet }}{% endblock %}
{% block page_title %}Feuille de présence — {{ targetUser.nomComplet }}{% endblock %}

{% set moisNoms = {1:'Janvier',2:'Fevrier',3:'Mars',4:'Avril',5:'Mai',6:'Juin',
                   7:'Juillet',8:'Aout',9:'Septembre',10:'Octobre',11:'Novembre',12:'Decembre'} %}

{% set jourNomsFr = {'1':'lundi','2':'mardi','3':'mercredi','4':'jeudi','5':'vendredi','6':'samedi','7':'dimanche'} %}

{% block body %}

{# --- Navigation mois --- #}
<div class="d-flex flex-wrap align-items-center gap-2 mb-3 sheet-nav">
    {% set prevMonth = month - 1 %}
    {% set prevYear  = year %}
    {% if prevMonth < 1 %}{% set prevMonth = 12 %}{% set prevYear = year - 1 %}{% endif %}
    {% set nextMonth = month + 1 %}
    {% set nextYear  = year %}
    {% if nextMonth > 12 %}{% set nextMonth = 1 %}{% set nextYear = year + 1 %}{% endif %}

    {% if is_granted('ROLE_ADMIN') and saveParams.userId is defined %}
    <a href="{{ path('app_admin_pointage_sheet', {userId: saveParams.userId, year: prevYear, month: prevMonth}) }}"
       class="btn btn-sm btn-outline-secondary"><i class="bi bi-chevron-left"></i></a>
    <a href="{{ path('app_admin_pointage_sheet', {userId: saveParams.userId, year: nextYear, month: nextMonth}) }}"
       class="btn btn-sm btn-outline-secondary"><i class="bi bi-chevron-right"></i></a>
    {% else %}
    <a href="{{ path('app_pointage_sheet', {year: prevYear, month: prevMonth}) }}"
       class="btn btn-sm btn-outline-secondary"><i class="bi bi-chevron-left"></i></a>
    <a href="{{ path('app_pointage_sheet', {year: nextYear, month: nextMonth}) }}"
       class="btn btn-sm btn-outline-secondary"><i class="bi bi-chevron-right"></i></a>
    {% endif %}

    <h5 class="mb-0 fw-bold ms-1"><i class="bi bi-table me-2 text-primary d-none d-sm-inline"></i>{{ moisNoms[month] }} {{ year }}</h5>

    <div class="ms-auto">
        <a href="{{ path(pdfRoute, pdfParams|merge({year: year, month: month})) }}"
           class="btn btn-sm btn-danger btn-export-pdf d-flex align-items-center gap-1">
            <i class="bi bi-file-earmark-pdf"></i><span class="d-none d-sm-inline">Exporter PDF</span>
        </a>
    </div>
</div>

{# --- Formulaire de saisie --- #}
<div class="card mb-3">
    <div class="card-header flex-header py-2">
        <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
            <span class="fw-bold">
                <i class="bi bi-person-badge me-1"></i>
                {% if targetUser.matricule %}[{{ targetUser.matricule }}]{% endif %}
                {{ targetUser.nomComplet }}
                {% if targetUser.poste %}<span class="text-muted small ms-2 d-none d-sm-inline">— {{ targetUser.poste }}</span>{% endif %}
            </span>
            <div class="d-flex gap-2 flex-wrap align-items-center">
                <span class="badge bg-primary">HJ : {{ '%.2f'|format(totaux.hj) }}</span>
                <span class="badge bg-info text-dark">HN : {{ '%.2f'|format(totaux.hn) }}</span>
                {% if totaux.standBye > 0 %}<span class="badge bg-warning text-dark">S.By : {{ '%.2f'|format(totaux.standBye) }}</span>{% endif %}
            </div>
        </div>
        <div class="text-muted small mt-1">
            <i class="bi bi-calendar3 me-1"></i>{{ moisNoms[month] }} {{ year }}
            &nbsp;|&nbsp;<span class="text-primary fw-semibold">FEUILLE DE PRÉSENCE</span>
        </div>
    </div>
    <div class="card-body p-0">
        <form id="form-pointage" method="post" action="{{ path(saveRoute, saveParams|merge({year: year, month: month})) }}">
            <input type="hidden" name="_token" value="{{ csrf_token('pointage_save_' ~ year ~ '_' ~ month) }}">

            <div class="table-responsive pointage-scroll">
            <table class="table table-sm table-bordered table-hover table-pointage mb-0">
                <thead>
                    <tr>
                        <th style="width:72px">JOUR</th>
                        <th style="width:30px" class="text-center">DATE</th>
                        <th style="width:88px" class="d-none d-sm-table-cell">Statut</th>
                        <th style="width:120px" class="d-none d-lg-table-cell">Chantier, client, lieu</th>
                        <th style="width:110px" class="d-none d-lg-table-cell">Observation</th>
                        <th style="width:128px">HORAIRES<br><small class="fw-normal text-muted">Début — Fin</small></th>
                        <th style="width:52px" class="text-center d-none d-sm-table-cell" title="Pause repas en minutes">Pause<br><small class="fw-normal text-muted">( min )</small></th>
                        <th style="width:52px" class="text-center d-none d-sm-table-cell" title="Nombre de repas">Repas</th>
                        <th style="width:62px" class="text-center">HJ<br><small class="fw-normal text-muted">6h-22h</small></th>
                        <th style="width:62px" class="text-center d-none d-sm-table-cell">HN<br><small class="fw-normal text-muted">22h-6h</small></th>
                        <th style="width:64px" class="text-center d-none d-lg-table-cell">Stand-by<br><small class="fw-normal text-muted">( en h )</small></th>
                        <th style="width:62px" class="text-center d-none d-lg-table-cell">Trajet<br>KM</th>
                        <th style="width:62px" class="text-center d-none d-lg-table-cell">Trajet<br>Heure</th>
                        <th style="width:58px" class="text-center d-none d-lg-table-cell">Dépl.<br>NT</th>
                        <th style="width:58px" class="text-center d-none d-lg-table-cell">Km VP</th>
                    </tr>
                </thead>
                <tbody>
                {% for pointage in feuille %}
                {% set dateStr = pointage.date|date('Y-m-d') %}
                {% set statutVal = pointage.statut.value %}
                {% set isOff = pointage.statut.jourOff %}
                {% set dowN = pointage.date|date('N') %}
                <tr class="statut-{{ statutVal }}" data-date="{{ dateStr }}">
                    {# JOUR #}
                    <td class="fw-semibold">{{ jourNomsFr[dowN] }}</td>
                    {# DATE #}
                    <td class="text-center text-muted fw-semibold">{{ pointage.date|date('d') }}</td>
                    {# STATUT (sm+) #}
                    <td class="d-none d-sm-table-cell">
                        <select name="pointage[{{ dateStr }}][statut]"
                                class="form-select form-select-sm"
                                onchange="updateRow(this)">
                            {% for s in statuts %}
                            <option value="{{ s.value }}" {{ s.value == statutVal ? 'selected' : '' }}>{{ s.label }}</option>
                            {% endfor %}
                        </select>
                    </td>
                    {# CHANTIER (lg+) #}
                    <td class="d-none d-lg-table-cell">
                        {% if not isOff %}
                        <input type="text" name="pointage[{{ dateStr }}][chantier]"
                               class="form-control form-control-sm"
                               value="{{ pointage.chantier ?? '' }}"
                               placeholder="Chantier / Client / Lieu" maxlength="100">
                        {% else %}<span class="text-muted">—</span>{% endif %}
                    </td>
                    {# OBSERVATION / NOTES (lg+) #}
                    <td class="d-none d-lg-table-cell align-top">
                        {% if not isOff %}
                        <textarea name="pointage[{{ dateStr }}][notes]"
                                  class="form-control form-control-sm textarea-notes"
                                  placeholder="Observation…"
                                  maxlength="255">{{ pointage.notes ?? '' }}</textarea>
                        {% else %}<span class="text-muted">—</span>{% endif %}
                    </td>
                    {# HORAIRES DÉBUT-FIN #}
                    <td class="horaires-cell">
                        {% if not isOff %}
                        <input type="time" name="pointage[{{ dateStr }}][heureArrivee]"
                               class="form-control form-control-sm mb-1 heure-arrivee"
                               value="{{ pointage.heureArrivee ? pointage.heureArrivee|date('H:i') : '' }}">
                        <input type="time" name="pointage[{{ dateStr }}][heureDepart]"
                               class="form-control form-control-sm heure-depart"
                               value="{{ pointage.heureDepart ? pointage.heureDepart|date('H:i') : '' }}">
                        {% else %}
                        <input type="hidden" name="pointage[{{ dateStr }}][heureArrivee]" value="">
                        <input type="hidden" name="pointage[{{ dateStr }}][heureDepart]" value="">
                        <span class="text-muted">—</span>
                        {% endif %}
                    </td>
                    {# PAUSE (sm+) — durée de la pause repas en minutes, 30 min par défaut #}
                    <td class="text-center d-none d-sm-table-cell">
                        {% if not isOff %}
                        <input type="number" name="pointage[{{ dateStr }}][pauseMinutes]"
                               class="form-control form-control-sm text-center pause-input" min="0" max="120" step="5"
                               value="{{ pointage.pauseMinutes is not null ? pointage.pauseMinutes : 30 }}"
                               placeholder="30">
                        {% else %}
                        <input type="hidden" name="pointage[{{ dateStr }}][pauseMinutes]" value="">
                        <span class="text-muted">—</span>
                        {% endif %}
                    </td>
                    {# REPAS (sm+) #}
                    <td class="text-center d-none d-sm-table-cell">
                        {% if not isOff %}
                        <input type="number" name="pointage[{{ dateStr }}][repas]"
                               class="form-control form-control-sm text-center" min="0" max="3"
                               value="{{ pointage.repas ?? '' }}" placeholder="0">
                        {% else %}
                        <input type="hidden" name="pointage[{{ dateStr }}][repas]" value="">
                        <span class="text-muted">—</span>
                        {% endif %}
                    </td>
                    {# HJ — calculé côté client #}
                    <td class="text-center hj-cell">
                        <span class="hj-val fw-semibold">{{ isOff ? '—' : (pointage.heuresJour > 0 ? '%.2f'|format(pointage.heuresJour) : '') }}</span>
                    </td>
                    {# HN (sm+) — calculé côté client #}
                    <td class="text-center d-none d-sm-table-cell hn-cell">
                        <span class="hn-val fw-semibold">{{ isOff ? '—' : (pointage.heuresNuit > 0 ? '%.2f'|format(pointage.heuresNuit) : '') }}</span>
                    </td>
                    {# STAND BYE (lg+) #}
                    <td class="text-center d-none d-lg-table-cell">
                        {% if not isOff %}
                        <input type="number" name="pointage[{{ dateStr }}][standByeHeures]"
                               class="form-control form-control-sm text-center" min="0" max="24" step="0.25"
                               value="{{ pointage.standByeHeures is not null ? '%.2f'|format(pointage.standByeHeures) : '' }}"
                               placeholder="0">
                        {% else %}
                        <input type="hidden" name="pointage[{{ dateStr }}][standByeHeures]" value="">
                        <span class="text-muted">—</span>
                        {% endif %}
                    </td>
                    {# TRAJET KM (lg+) #}
                    <td class="text-center d-none d-lg-table-cell">
                        {% if not isOff %}
                        <input type="number" name="pointage[{{ dateStr }}][trajetKm]"
                               class="form-control form-control-sm text-center" min="0"
                               value="{{ pointage.trajetKm ?? '' }}" placeholder="0">
                        {% else %}
                        <input type="hidden" name="pointage[{{ dateStr }}][trajetKm]" value="">
                        <span class="text-muted">—</span>
                        {% endif %}
                    </td>
                    {# TRAJET HEURE (lg+) #}
                    <td class="text-center d-none d-lg-table-cell">
                        {% if not isOff %}
                        <input type="number" name="pointage[{{ dateStr }}][trajetHeures]"
                               class="form-control form-control-sm text-center" min="0" max="24" step="0.25"
                               value="{{ pointage.trajetHeures is not null ? '%.2f'|format(pointage.trajetHeures) : '' }}"
                               placeholder="0">
                        {% else %}
                        <input type="hidden" name="pointage[{{ dateStr }}][trajetHeures]" value="">
                        <span class="text-muted">—</span>
                        {% endif %}
                    </td>
                    {# DÉPLACEMENT NT (lg+) #}
                    <td class="text-center d-none d-lg-table-cell">
                        {% if not isOff %}
                        <input type="number" name="pointage[{{ dateStr }}][deplacementNt]"
                               class="form-control form-control-sm text-center" min="0"
                               value="{{ pointage.deplacementNt ?? '' }}" placeholder="0">
                        {% else %}
                        <input type="hidden" name="pointage[{{ dateStr }}][deplacementNt]" value="">
                        <span class="text-muted">—</span>
                        {% endif %}
                    </td>
                    {# KM VP (lg+) #}
                    <td class="text-center d-none d-lg-table-cell">
                        {% if not isOff %}
                        <input type="number" name="pointage[{{ dateStr }}][kmVp]"
                               class="form-control form-control-sm text-center" min="0"
                               value="{{ pointage.kmVp ?? '' }}" placeholder="0">
                        {% else %}
                        <input type="hidden" name="pointage[{{ dateStr }}][kmVp]" value="">
                        <span class="text-muted">—</span>
                        {% endif %}
                    </td>
                </tr>
                {# ── Ligne sous-total semaine ── #}
                {% if dowN == '7' or loop.last %}
                    {% set weekKey = pointage.date|date('o') ~ '-' ~ pointage.date|date('W') %}
                    {% set wk = weeklyTotals[weekKey] ?? {'hj': 0, 'hn': 0} %}
                    <tr class="row-week-total">
                        <td colspan="2" class="text-secondary small fw-semibold ps-2">
                            <i class="bi bi-calendar-week me-1"></i>Sem.&nbsp;{{ pointage.date|date('W') }}
                        </td>
                        <td class="d-none d-sm-table-cell"></td>
                        <td class="d-none d-lg-table-cell"></td>
                        <td class="d-none d-lg-table-cell"></td>
                        <td class="text-end text-secondary small fw-semibold pe-2">Total :</td>
                        <td class="d-none d-sm-table-cell"></td>
                        <td class="d-none d-sm-table-cell"></td>
                        <td class="text-center fw-bold small {{ wk['hj'] > 0 ? 'text-primary' : 'text-muted' }}">
                            {{ '%.2f'|format(wk['hj']) }}
                        </td>
                        <td class="text-center small {{ wk['hn'] > 0 ? 'text-info' : 'text-muted' }} d-none d-sm-table-cell">
                            {{ '%.2f'|format(wk['hn']) }}
                        </td>
                        <td class="d-none d-lg-table-cell"></td>
                        <td class="d-none d-lg-table-cell"></td>
                        <td class="d-none d-lg-table-cell"></td>
                        <td class="d-none d-lg-table-cell"></td>
                        <td class="d-none d-lg-table-cell"></td>
                    </tr>
                {% endif %}
                {% endfor %}
                </tbody>
                <tfoot>
                    <tr class="table-dark fw-bold">
                        <td colspan="2">TOTAL</td>
                        <td class="d-none d-sm-table-cell"></td>
                        <td class="d-none d-lg-table-cell"></td>
                        <td class="d-none d-lg-table-cell"></td>
                        <td></td>
                        <td class="d-none d-sm-table-cell"></td>
                        <td class="text-center d-none d-sm-table-cell">{{ totaux.repas }}</td>
                        <td class="text-center text-warning">{{ '%.2f'|format(totaux.hj) }}</td>
                        <td class="text-center text-info d-none d-sm-table-cell">{{ '%.2f'|format(totaux.hn) }}</td>
                        <td class="text-center d-none d-lg-table-cell">{{ '%.2f'|format(totaux.standBye) }}</td>
                        <td class="text-center d-none d-lg-table-cell">{{ totaux.trajetKm }}</td>
                        <td class="text-center d-none d-lg-table-cell">{{ '%.2f'|format(totaux.trajetHeures) }}</td>
                        <td class="text-center d-none d-lg-table-cell">{{ totaux.deplacementNt }}</td>
                        <td class="text-center d-none d-lg-table-cell">{{ totaux.kmVp }}</td>
                    </tr>
                </tfoot>
            </table>
            </div>

            {# bouton bas masqué — remplacer d-none par d-flex pour réactiver #}
            <div class="p-3 bg-light border-top d-none justify-content-end">
                <button type="submit" class="btn btn-success px-4">
                    <i class="bi bi-floppy me-2"></i>Sauvegarder
                </button>
            </div>
        </form>
    </div>
</div>

{# ── Récapitulatif du mois ── #}
<div class="row g-3 mb-3">
    <div class="col-6 col-md-4 col-lg-2">
        <div class="card text-center p-2">
            <div class="fw-bold text-primary fs-5">{{ '%.2f'|format(totaux.hj) }}</div>
            <div class="text-muted small">Heures Jour</div>
        </div>
    </div>
    <div class="col-6 col-md-4 col-lg-2">
        <div class="card text-center p-2">
            <div class="fw-bold text-info fs-5">{{ '%.2f'|format(totaux.hn) }}</div>
            <div class="text-muted small">Heures Nuit</div>
        </div>
    </div>
    <div class="col-6 col-md-4 col-lg-2">
        <div class="card text-center p-2">
            <div class="fw-bold text-warning fs-5">{{ '%.2f'|format(totaux.standBye) }}</div>
            <div class="text-muted small">Stand-by</div>
        </div>
    </div>
    <div class="col-6 col-md-4 col-lg-2">
        <div class="card text-center p-2">
            <div class="fw-bold text-success fs-5">{{ totaux.trajetKm }}</div>
            <div class="text-muted small">Trajet KM</div>
        </div>
    </div>
    <div class="col-6 col-md-4 col-lg-2">
        <div class="card text-center p-2">
            <div class="fw-bold text-secondary fs-5">{{ '%.2f'|format(totaux.trajetHeures) }}</div>
            <div class="text-muted small">Trajet Heures</div>
        </div>
    </div>
    <div class="col-6 col-md-4 col-lg-2">
        <div class="card text-center p-2">
            <div class="fw-bold fs-5">{{ totaux.kmVp }}</div>
            <div class="text-muted small">Km VP</div>
        </div>
    </div>
</div>

{# ── Section indemnités + total à payer + km véhicule (visible par tous) ── #}
{% if tarifs is defined %}
<div class="card mt-4 shadow-sm border-primary">
    <div class="card-header bg-primary text-white fw-semibold d-flex align-items-center gap-2">
        <i class="bi bi-calculator fs-5"></i> Indemnités &amp; Total à payer
    </div>
    <div class="card-body">

        <div class="row g-4">

            {# -- Tableau calcul indemnités -- #}
            <div class="col-12 col-lg-7">
                <table class="table table-bordered table-sm mb-0">
                    <thead class="table-dark text-center">
                        <tr>
                            <th>Indemnité</th>
                            <th>Quantité</th>
                            {% if isAdmin is defined and isAdmin %}<th>Tarif unitaire</th>{% endif %}
                            <th>Montant</th>
                        </tr>
                    </thead>
                    <tbody class="text-center">
                        {% set tarifRepas     = tarifs.repas ?? 0 %}
                        {% set tarifDepl      = tarifs.deplacement ?? 0 %}
                        {% set tarifKm        = tarifs.kilometre ?? 0 %}
                        {% set montantRepas   = totaux.repas * tarifRepas %}
                        {% set montantDepl    = totaux.deplacementNt * tarifDepl %}
                        {% set montantKm      = totaux.kmVp * tarifKm %}
                        <tr>
                            <td class="text-start">Repas</td>
                            <td>{{ totaux.repas }}</td>
                            {% if isAdmin is defined and isAdmin %}<td>{{ tarifRepas|number_format(2, ',', ' ') }} €</td>{% endif %}
                            <td class="fw-semibold">{{ montantRepas|number_format(2, ',', ' ') }} €</td>
                        </tr>
                        <tr>
                            <td class="text-start">Déplacement NT</td>
                            <td>{{ totaux.deplacementNt }}</td>
                            {% if isAdmin is defined and isAdmin %}<td>{{ tarifDepl|number_format(2, ',', ' ') }} €</td>{% endif %}
                            <td class="fw-semibold">{{ montantDepl|number_format(2, ',', ' ') }} €</td>
                        </tr>
                        <tr>
                            <td class="text-start">Kilomètres VP</td>
                            <td>{{ totaux.kmVp }}</td>
                            {% if isAdmin is defined and isAdmin %}<td>{{ tarifKm|number_format(4, ',', ' ') }} €</td>{% endif %}
                            <td class="fw-semibold">{{ montantKm|number_format(2, ',', ' ') }} €</td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr class="table-primary fw-bold fs-5">
                            <td colspan="{{ (isAdmin is defined and isAdmin) ? 3 : 2 }}" class="text-end pe-3">TOTAL À PAYER :</td>
                            <td class="text-success text-center">{{ totalAPayer|number_format(2, ',', ' ') }} €</td>
                        </tr>
                    </tfoot>
                </table>

                {# Récapitulatif heures #}
                <div class="mt-3">
                    <div class="fw-semibold text-muted small mb-2 text-uppercase">Récapitulatif heures (effectives)</div>
                    <table class="table table-bordered table-sm text-center mb-0">
                        <thead class="table-primary">
                            <tr>
                                <th>Jour (HJ)</th>
                                <th>Nuit (HN)</th>
                                <th>Routes</th>
                                <th>Stand-by</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="fw-bold">{{ '%.2f'|format(totaux.hj) }}</td>
                                <td class="fw-bold">{{ '%.2f'|format(totaux.hn) }}</td>
                                <td class="fw-bold">{{ '%.2f'|format(totaux.trajetHeures) }}</td>
                                <td class="fw-bold">{{ '%.2f'|format(totaux.standBye) }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            {# -- Kilométrage véhicule + Observations -- #}
            <div class="col-12 col-lg-5">
                <div class="fw-semibold text-muted small mb-2 text-uppercase">Kilométrage véhicule</div>
                <table class="table table-bordered table-sm mb-0">
                    <tbody>
                        <tr>
                            <td class="fw-semibold" style="width:140px">Immatriculation</td>
                            <td>
                                <input type="text" form="form-pointage"
                                       name="feuille_mensuelle[immatriculation]"
                                       class="form-control form-control-sm"
                                       maxlength="20"
                                       placeholder="XX-123-XX"
                                       value="{{ feuilleM and feuilleM.immatriculation ? feuilleM.immatriculation : '' }}">
                            </td>
                        </tr>
                        <tr>
                            <td class="fw-semibold">Début de mois</td>
                            <td>
                                <input type="number" form="form-pointage"
                                       name="feuille_mensuelle[kmDebut]"
                                       class="form-control form-control-sm"
                                       min="0" placeholder="km"
                                       value="{{ feuilleM and feuilleM.kmDebut is not null ? feuilleM.kmDebut : '' }}">
                            </td>
                        </tr>
                        <tr>
                            <td class="fw-semibold">Fin de mois</td>
                            <td>
                                <input type="number" form="form-pointage"
                                       name="feuille_mensuelle[kmFin]"
                                       class="form-control form-control-sm"
                                       min="0" placeholder="km"
                                       value="{{ feuilleM and feuilleM.kmFin is not null ? feuilleM.kmFin : '' }}">
                            </td>
                        </tr>
                        <tr class="table-light">
                            <td class="fw-semibold">Total</td>
                            <td class="fw-bold" id="km-total-display">
                                {% if feuilleM and feuilleM.kmTotal is not null %}
                                    {{ feuilleM.kmTotal }} km
                                {% else %}—{% endif %}
                            </td>
                        </tr>
                    </tbody>
                </table>

                <div class="mt-3">
                    <label class="form-label fw-semibold small text-muted text-uppercase">Observations</label>
                    {% if isAdmin is defined and isAdmin %}
                    <textarea form="form-pointage"
                              name="feuille_mensuelle[observations]"
                              class="form-control form-control-sm"
                              rows="3"
                              placeholder="Observations…">{{ feuilleM and feuilleM.observations ? feuilleM.observations : '' }}</textarea>
                    {% else %}
                    <div class="form-control form-control-sm bg-light" style="min-height:60px; white-space:pre-wrap;">{{ feuilleM and feuilleM.observations ? feuilleM.observations : '' }}</div>
                    {% endif %}
                </div>

                {% if isAdmin is defined and isAdmin %}
                <div class="mt-2 text-end">
                    <a href="{{ path('app_admin_tarifs') }}" class="btn btn-sm btn-outline-secondary">
                        <i class="bi bi-gear me-1"></i>Modifier les tarifs
                    </a>
                </div>
                {% endif %}
            </div>

        </div>{# /row #}
    </div>
</div>
{% endif %}

<button type="submit" form="form-pointage" class="btn btn-success btn-save-float">
    <i class="bi bi-floppy me-2"></i>Sauvegarder
</button>

{% endblock %}

{% block javascripts %}
<script>
const OFF_STATUTS = ['weekend', 'ferie'];

function updateRow(sel) {
    const tr = sel.closest('tr');
    const isOff = OFF_STATUTS.includes(sel.value);
    tr.className = 'statut-' + sel.value;
    tr.querySelectorAll('.heure-arrivee, .heure-depart, input[type="number"], input[type="text"]').forEach(inp => {
        inp.style.display = isOff ? 'none' : '';
    });
}

// Calcul dynamique HJ / HN en temps réel
function computeHJHN(arrVal, depVal, pauseMin = 30) {
    if (!arrVal || !depVal) return { hj: '', hn: '' };
    const [ah, am] = arrVal.split(':').map(Number);
    const [dh, dm] = depVal.split(':').map(Number);
    const arr = ah * 60 + am;
    const dep = dh * 60 + dm;
    if (dep <= arr) return { hj: '', hn: '' };
    const DEBUT = 360, FIN = 1320;
    const arrJ = Math.max(arr, DEBUT);
    const depJ = Math.min(dep, FIN);
    const hjMin = Math.max(0, depJ - arrJ - pauseMin);
    const nuitM = Math.max(0, Math.min(dep, DEBUT) - arr);
    const nuitS = Math.max(0, dep - Math.max(arr, FIN));
    const hnMin = nuitM + nuitS;
    const fmt = m => m > 0 ? (m / 60).toFixed(2) : '';
    return { hj: fmt(hjMin), hn: fmt(hnMin) };
}

document.querySelectorAll('.table-pointage tbody tr[data-date]').forEach(tr => {
    const arrInput   = tr.querySelector('.heure-arrivee');
    const depInput   = tr.querySelector('.heure-depart');
    const pauseInput = tr.querySelector('.pause-input');
    const hjSpan     = tr.querySelector('.hj-val');
    const hnSpan     = tr.querySelector('.hn-val');
    const update = () => {
        const pause = pauseInput ? (parseInt(pauseInput.value, 10) || 0) : 30;
        const { hj, hn } = computeHJHN(arrInput?.value, depInput?.value, pause);
        if (hjSpan) hjSpan.textContent = hj;
        if (hnSpan) hnSpan.textContent = hn;
    };
    arrInput?.addEventListener('change', update);
    depInput?.addEventListener('change', update);
    pauseInput?.addEventListener('input', update);
});

// Calcul km total véhicule en temps réel
const kmDebInput = document.querySelector('input[name="feuille_mensuelle[kmDebut]"]');
const kmFinInput = document.querySelector('input[name="feuille_mensuelle[kmFin]"]');
const kmTotalEl  = document.getElementById('km-total-display');
if (kmDebInput && kmFinInput && kmTotalEl) {
    const updateKm = () => {
        const d = parseInt(kmDebInput.value, 10);
        const f = parseInt(kmFinInput.value, 10);
        kmTotalEl.textContent = (!isNaN(d) && !isNaN(f) && f >= d) ? (f - d) + ' km' : '—';
    };
    kmDebInput.addEventListener('input', updateKm);
    kmFinInput.addEventListener('input', updateKm);
}

// Auto-resize des textareas d'observation : hauteur ajustée au contenu
function autoResizeTextarea(ta) {
    ta.style.height = 'auto';           // libère la contrainte de hauteur
    ta.style.height = ta.scrollHeight + 'px';
}
document.querySelectorAll('.textarea-notes').forEach(ta => {
    autoResizeTextarea(ta);
    ta.addEventListener('input', () => autoResizeTextarea(ta));
});
</script>
{% endblock %}