{% extends 'base.html' %}
{% block title %}Week-ends à Valider · 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 & Astreintes</div>
    <h1 class="h2 mb-1 fw-bold">Week-ends et Astreintes à Valider</h1>
    <p class="text-secondary mb-0 small">Les validations alimentent les statistiques et la prise en compte sur la paie mensuelle (MUR).</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="statusFilter">Statut :</label>
    <select id="statusFilter" class="form-select form-select-sm" name="status" data-auto-submit>
      <option value="pending" {{ 'selected' if status == 'pending' }}>En attente</option>
      <option value="approved" {{ 'selected' if status == 'approved' }}>Approuvées</option>
      <option value="rejected" {{ 'selected' if status == 'rejected' }}>Refusées</option>
    </select>
  </form>
</div>

<div class="card border shadow-sm">
  <div class="table-responsive">
    <table data-searchable class="table align-middle mb-0 table-hover">
      <thead>
        <tr>
          <th>Collaborateur</th>
          <th>Date de prestation</th>
          <th>Type</th>
          <th>Intervention</th>
          <th>Commentaire / Références</th>
          <th class="text-end">Décision</th>
        </tr>
      </thead>
      <tbody>
        {% for r in rows %}
        <tr>
          <td>
            <strong>{{ r.full_name }}</strong>
            <div class="small text-muted">{{ r.team or 'Équipe générale' }}</div>
          </td>
          <td>
            <strong class="num-mono text-dark">{{ r.work_date|date_fr }}</strong>
          </td>
          <td>
            <span class="badge bg-light text-dark border">
              {{ {'saturday':'Samedi travaillé','sunday':'Dimanche travaillé','on_call':'Astreinte'}.get(r.work_type, r.work_type) }}
            </span>
          </td>
          <td>
            {% if r.intervention_hours > 0 %}
              <span class="badge bg-primary-subtle text-primary num-mono">{{ r.intervention_hours }} h</span>
            {% else %}
              <span class="text-muted small">0 h (dispo)</span>
            {% endif %}
          </td>
          <td>
            <small class="text-secondary">{{ r.notes or '—' }}</small>
          </td>
          <td class="text-end">
            {% if r.status == 'pending' %}
              <form method="post" action="{{ url_for('decide_weekend', work_id=r.id) }}" class="d-flex gap-2 justify-content-end">
                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                <button name="decision" value="approved" class="btn btn-sm btn-success fw-bold" title="Valider">✓ Valider</button>
                <button name="decision" value="rejected" class="btn btn-sm btn-outline-danger" title="Refuser">✕ Refuser</button>
              </form>
            {% else %}
              <span class="badge bg-{{ 'success-subtle text-success' if r.status == 'approved' else 'light text-muted' }}">
                {{ {'approved':'Approuvée','rejected':'Refusée'}.get(r.status, r.status) }}
              </span>
            {% endif %}
          </td>
        </tr>
        {% else %}
        <tr>
          <td colspan="6" class="text-center text-secondary py-5">Aucune déclaration dans cette vue.</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}