{% extends 'base.html' %}
{% block title %}Statistiques RH · RH Planète{% endblock %}

{% block content %}
<div class="d-flex flex-wrap justify-content-between align-items-end gap-3 mb-4">
  <div>
    <div class="eyebrow">Analyse & Pilotage</div>
    <h1 class="h2 mb-1 fw-bold">Statistiques & Volumes Annuels</h1>
    <p class="text-secondary mb-0 small">Synthèse consolidée des congés approuvés, de l'absentéisme et des astreintes pour l'exercice {{ year }}.</p>
  </div>

  <form class="d-flex align-items-center gap-2 bg-white p-2 rounded-3 border shadow-sm">
    <label class="small text-secondary fw-bold px-1 mb-0" for="yearInput">Année :</label>
    <input id="yearInput" class="form-control form-control-sm num-mono" style="width: 90px;" name="year" type="number" min="2020" max="2100" value="{{ year }}" data-auto-submit>
    <button class="btn btn-sm btn-outline-primary">Filtrer</button>
  </form>
</div>

<div class="row g-3 mb-4">
  <div class="col-12 col-sm-6 col-xl-3">
    <div class="card stat-card h-100">
      <div class="card-body p-4">
        <div class="d-flex justify-content-between align-items-start mb-2">
          <span class="text-uppercase small fw-bold" style="color: var(--ink-3); font-size: 0.72rem; letter-spacing: 0.08em;">Arrêts & Imprévus</span>
          <span class="badge bg-danger-subtle text-danger">Sick / Unpl.</span>
        </div>
        <div class="display-6 num-mono mt-1 mb-1" style="color: var(--danger);">
          {{ totals.absences or 0 }}
        </div>
        <div class="small text-secondary">Jours d'absence impactant la prime de présence</div>
      </div>
    </div>
  </div>

  <div class="col-12 col-sm-6 col-xl-3">
    <div class="card stat-card h-100">
      <div class="card-body p-4">
        <div class="d-flex justify-content-between align-items-start mb-2">
          <span class="text-uppercase small fw-bold" style="color: var(--ink-3); font-size: 0.72rem; letter-spacing: 0.08em;">Congés Annuels (CP)</span>
          <span class="badge bg-primary-subtle text-primary">Validés</span>
        </div>
        <div class="display-6 num-mono mt-1 mb-1" style="color: var(--accent);">
          {{ totals.annual or 0 }}
        </div>
        <div class="small text-secondary">Jours de congés payés approuvés</div>
      </div>
    </div>
  </div>

  <div class="col-12 col-sm-6 col-xl-3">
    <div class="card stat-card h-100">
      <div class="card-body p-4">
        <div class="d-flex justify-content-between align-items-start mb-2">
          <span class="text-uppercase small fw-bold" style="color: var(--ink-3); font-size: 0.72rem; letter-spacing: 0.08em;">Télétravail (WFH)</span>
          <span class="badge bg-success-subtle text-success">Home Office</span>
        </div>
        <div class="display-6 num-mono mt-1 mb-1" style="color: var(--ok);">
          {{ totals.wfh or 0 }}
        </div>
        <div class="small text-secondary">Journées effectuées à distance</div>
      </div>
    </div>
  </div>

  <div class="col-12 col-sm-6 col-xl-3">
    <div class="card stat-card h-100">
      <div class="card-body p-4">
        <div class="d-flex justify-content-between align-items-start mb-2">
          <span class="text-uppercase small fw-bold" style="color: var(--ink-3); font-size: 0.72rem; letter-spacing: 0.08em;">Week-ends & Gardes</span>
          <span class="badge bg-light text-dark">Prestations</span>
        </div>
        <div class="display-6 num-mono mt-1 mb-1 text-dark">
          {{ work.n or 0 }}
        </div>
        <div class="small text-secondary">{{ work.hours or 0 }} h d’intervention cumulées</div>
      </div>
    </div>
  </div>
</div>

<div class="card border shadow-sm">
  <div class="card-header d-flex justify-content-between align-items-center">
    <h2 class="h5 mb-0 fw-bold">Répartition opérationnelle des week-ends</h2>
    <span class="badge bg-light text-muted">Exercice {{ year }}</span>
  </div>
  <div class="card-body p-4">
    <div class="row g-4 text-center">
      <div class="col-sm-4 border-end" style="border-color: var(--line) !important;">
        <div class="text-uppercase fw-bold small" style="color: var(--ink-3); font-size: 0.72rem; letter-spacing: 0.08em;">Samedis Travaillés</div>
        <div class="display-6 num-mono mt-2 mb-0 text-dark">{{ work.saturdays or 0 }}</div>
      </div>
      <div class="col-sm-4 border-end" style="border-color: var(--line) !important;">
        <div class="text-uppercase fw-bold small" style="color: var(--ink-3); font-size: 0.72rem; letter-spacing: 0.08em;">Dimanches Travaillés</div>
        <div class="display-6 num-mono mt-2 mb-0 text-dark">{{ work.sundays or 0 }}</div>
      </div>
      <div class="col-sm-4">
        <div class="text-uppercase fw-bold small" style="color: var(--ink-3); font-size: 0.72rem; letter-spacing: 0.08em;">Astreintes Déclarées</div>
        <div class="display-6 num-mono mt-2 mb-0" style="color: var(--gold);">{{ work.on_call or 0 }}</div>
      </div>
    </div>
  </div>
</div>
{% endblock %}