{% extends 'base.html' %}
{% block title %}Planning Équipe · 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">Supervision & Calendrier RH</div>
    <h1 class="h2 mb-1 fw-bold">Planning Consolidé de l'Équipe</h1>
    <p class="text-secondary mb-0 small">
      Suivi mensuel consolidé : congés pris, arrêts maladie, absentéisme, télétravail, prestations de week-end et soldes disponibles.
    </p>
  </div>
  
  <form method="GET" 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="monthSelect">Mois :</label>
    <select id="monthSelect" name="month" class="form-select form-select-sm num-mono" style="width: auto;" data-auto-submit>
      {% for m in available_months %}
        <option value="{{ m }}" {% if m == month %}selected{% endif %}>{{ m|month_fr }}</option>
      {% endfor %}
    </select>
  </form>
</div>

<!-- KPI Summary Cards -->
<div class="row g-3 mb-4">
  <div class="col-6 col-lg-3">
    <div class="card stat-card h-100">
      <div class="card-body p-3">
        <div class="text-uppercase small fw-bold" style="color: var(--ink-3); font-size: 0.68rem; letter-spacing: 0.08em;">Taux d'Absentéisme</div>
        <div class="display-6 num-mono text-dark my-1" style="font-size: 1.8rem;">
          {{ summary.global_abs_rate }}%
        </div>
        <div class="small text-secondary">
          {{ summary.tot_sick|round(1) }} j. sick + {{ summary.tot_unplanned|round(1) }} j. injustifiés
        </div>
      </div>
    </div>
  </div>

  <div class="col-6 col-lg-3">
    <div class="card stat-card h-100">
      <div class="card-body p-3">
        <div class="text-uppercase small fw-bold" style="color: var(--ink-3); font-size: 0.68rem; letter-spacing: 0.08em;">Congés Payés (CP)</div>
        <div class="display-6 num-mono text-primary my-1" style="font-size: 1.8rem;">
          {{ summary.tot_cp|round(1) }} <span class="fs-6 text-muted">jours</span>
        </div>
        <div class="small text-secondary">
          Sur {{ summary.working_days }} jours ouvrés (Maurice)
        </div>
      </div>
    </div>
  </div>

  <div class="col-6 col-lg-3">
    <div class="card stat-card h-100">
      <div class="card-body p-3">
        <div class="text-uppercase small fw-bold" style="color: var(--ink-3); font-size: 0.68rem; letter-spacing: 0.08em;">Services Week-End</div>
        <div class="display-6 num-mono text-success my-1" style="font-size: 1.8rem;">
          {{ summary.tot_sat + summary.tot_sun }} <span class="fs-6 text-muted">j. trav.</span>
        </div>
        <div class="small text-secondary">
          {{ summary.tot_sat }} sam. · {{ summary.tot_sun }} dim. · {{ summary.tot_oncall }} astreintes ({{ summary.tot_hours|round(1) }}h)
        </div>
      </div>
    </div>
  </div>

  <div class="col-6 col-lg-3">
    <div class="card stat-card h-100">
      <div class="card-body p-3">
        <div class="text-uppercase small fw-bold" style="color: var(--ink-3); font-size: 0.68rem; letter-spacing: 0.08em;">Télétravail (WFH)</div>
        <div class="display-6 num-mono text-dark my-1" style="font-size: 1.8rem;">
          {{ summary.tot_wfh|round(1) }} <span class="fs-6 text-muted">jours</span>
        </div>
        <div class="small text-secondary">
          {{ summary.count }} collaborateurs suivis
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Tableau Consolidé Synthèse Équipe (style Planning.xlsx) -->
<div class="card border shadow-sm mb-4">
  <div class="card-header bg-white d-flex justify-content-between align-items-center py-3">
    <div>
      <h2 class="h5 mb-0 fw-bold">Synthèse Mensuelle par Collaborateur — {{ month|month_fr }}</h2>
      <div class="text-muted small">Données synchronisées avec les demandes et les déclarations d'astreintes validées</div>
    </div>
    <span class="badge bg-light text-dark border">{{ calendar|length }} membres d'équipe</span>
  </div>
  <div class="table-responsive">
    <table data-searchable class="table table-hover align-middle mb-0 text-nowrap">
      <thead class="table-light text-secondary" style="font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em;">
        <tr>
          <th>Collaborateur</th>
          <th>Département</th>
          <th class="text-center">CP pris</th>
          <th class="text-center">Sick pris</th>
          <th class="text-center">Non planifié</th>
          <th class="text-center">WFH</th>
          <th class="text-center">Samedis</th>
          <th class="text-center">Dimanches</th>
          <th class="text-center">Astreinte / H.</th>
          <th class="text-center">Absentéisme</th>
          <th class="text-center">Solde CP rest.</th>
          <th class="text-center">Solde Sick rest.</th>
        </tr>
      </thead>
      <tbody>
        {% for row in calendar %}
        <tr>
          <td>
            <div class="fw-bold text-dark">{{ row.person.full_name }}</div>
            {% if row.person.start_date %}
              <div class="num-mono text-muted" style="font-size: 0.7rem;">Emb. {{ row.person.start_date|date_fr }}</div>
            {% endif %}
          </td>
          <td>
            <span class="badge bg-light text-dark border">{{ row.person.team or 'Général' }}</span>
          </td>
          <td class="text-center num-mono {% if row.cp > 0 %}fw-bold text-primary{% else %}text-muted{% endif %}">
            {{ row.cp|round(1) }}
          </td>
          <td class="text-center num-mono {% if row.sick > 0 %}fw-bold text-danger{% else %}text-muted{% endif %}">
            {{ row.sick|round(1) }}
          </td>
          <td class="text-center num-mono {% if row.unplanned > 0 %}fw-bold text-danger{% else %}text-muted{% endif %}">
            {{ row.unplanned|round(1) }}
          </td>
          <td class="text-center num-mono {% if row.wfh > 0 %}fw-bold text-dark{% else %}text-muted{% endif %}">
            {{ row.wfh|round(1) }}
          </td>
          <td class="text-center num-mono {% if row.saturdays > 0 %}fw-bold text-success{% else %}text-muted{% endif %}">
            {{ row.saturdays }}
          </td>
          <td class="text-center num-mono {% if row.sundays > 0 %}fw-bold text-success{% else %}text-muted{% endif %}">
            {{ row.sundays }}
          </td>
          <td class="text-center num-mono">
            {% if row.on_call > 0 or row.hours > 0 %}
              <span class="badge bg-info-subtle text-info">{{ row.on_call }} ast. ({{ row.hours|round(1) }}h)</span>
            {% else %}
              <span class="text-muted">—</span>
            {% endif %}
          </td>
          <td class="text-center num-mono">
            <span class="badge bg-{{ 'danger-subtle text-danger' if row.abs_rate > 5 else ('warning-subtle text-warning' if row.abs_rate > 0 else 'light text-muted') }}">
              {{ row.abs_rate }}%
            </span>
          </td>
          <td class="text-center num-mono fw-bold text-dark">
            {{ '%.1f'|format(row.cp_rem) }} j
          </td>
          <td class="text-center num-mono fw-bold text-dark">
            {{ '%.1f'|format(row.sick_rem) }} j
          </td>
        </tr>
        {% else %}
        <tr>
          <td colspan="12" class="text-center py-4 text-secondary">Aucun collaborateur rattaché pour ce mois.</td>
        </tr>
        {% endfor %}
      </tbody>
      <tfoot class="table-light fw-bold num-mono" style="font-size: 0.85rem;">
        <tr>
          <td colspan="2">TOTAL ÉQUIPE ({{ summary.count }} pers.)</td>
          <td class="text-center text-primary">{{ summary.tot_cp|round(1) }}</td>
          <td class="text-center text-danger">{{ summary.tot_sick|round(1) }}</td>
          <td class="text-center text-danger">{{ summary.tot_unplanned|round(1) }}</td>
          <td class="text-center text-dark">{{ summary.tot_wfh|round(1) }}</td>
          <td class="text-center text-success">{{ summary.tot_sat }}</td>
          <td class="text-center text-success">{{ summary.tot_sun }}</td>
          <td class="text-center text-info">{{ summary.tot_oncall }} ({{ summary.tot_hours|round(1) }}h)</td>
          <td class="text-center text-dark">{{ summary.global_abs_rate }}%</td>
          <td colspan="2" class="text-center text-muted">—</td>
        </tr>
      </tfoot>
    </table>
  </div>
</div>

<!-- Détail des Demandes et Événements par Salarié -->
<div class="card border shadow-sm">
  <div class="card-header bg-white py-3">
    <h2 class="h5 mb-0 fw-bold">Détail des Absences et Week-ends Traités</h2>
    <div class="text-muted small">Liste exhaustive des périodes posées et missions de week-end enregistrées pour {{ month|month_fr }}</div>
  </div>
  <div class="card-body p-3">
    <div class="row g-3">
      {% for item in calendar %}
      <div class="col-12 col-xl-6">
        <div class="p-3 border rounded-3 bg-light h-100">
          <div class="d-flex justify-content-between align-items-center mb-2">
            <h6 class="fw-bold mb-0 text-dark">{{ item.person.full_name }}</h6>
            <span class="badge bg-white text-dark border">{{ item.person.team or 'Équipe générale' }}</span>
          </div>

          <div class="mb-2">
            <span class="small text-muted fw-bold text-uppercase" style="font-size: 0.68rem;">Absences / WFH :</span>
            {% for l in item.leaves %}
              <span class="badge rounded-pill bg-{{ 'warning-subtle text-warning' if l.status == 'pending' else 'white text-dark' }} border me-1 mb-1 num-mono">
                {{ {'annual':'CP','sick':'Sick','unplanned':'Injustifié','unpaid':'Sans solde','menstrual':'Menstruel','wfh':'WFH'}.get(l.leave_type, l.leave_type) }}
                {{ l.start_date|date_fr }}{% if l.end_date != l.start_date %}→{{ l.end_date|date_fr }}{% endif %}
              </span>
            {% else %}
              <span class="small text-muted fst-italic">Néant</span>
            {% endfor %}
          </div>

          <div>
            <span class="small text-muted fw-bold text-uppercase" style="font-size: 0.68rem;">Services week-end :</span>
            {% for w in item.weekends %}
              <span class="badge rounded-pill bg-{{ 'success-subtle text-success' if w.status == 'approved' else 'warning-subtle text-warning' }} me-1 mb-1 num-mono">
                {{ w.work_date|date_fr }} · {{ {'saturday':'Samedi','sunday':'Dimanche','on_call':'Astreinte'}.get(w.work_type, w.work_type) }}
                {% if w.work_type == 'on_call' and w.intervention_hours > 0 %}({{ w.intervention_hours }}h){% endif %}
              </span>
            {% else %}
              <span class="small text-muted fst-italic">Néant</span>
            {% endfor %}
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</div>
{% endblock %}