{% extends 'base.html' %}
{% block title %}Validations Congés · 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 & Workflow</div>
    <h1 class="h2 mb-1 fw-bold">Demandes d'Absence à Arbitrer</h1>
    <p class="text-secondary mb-0 small">Contrôlez les demandes de congés annuels, arrêts maladie et justificatifs médicaux.</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>Type & Période</th>
          <th>Commentaire</th>
          <th>Justificatif</th>
          <th class="text-end">Décision</th>
        </tr>
      </thead>
      <tbody>
        {% for r in requests %}
        <tr>
          <td>
            <strong>{{ r.full_name }}</strong>
            <div class="small text-muted">{{ r.team or 'Équipe générale' }}</div>
          </td>
          <td>
            <span class="badge bg-light text-dark border">
              {{ {'annual':'Congé annuel','sick':'Sick','unplanned':'Non planifiée','unpaid':'Congé sans solde','menstrual':'Congé menstruel','wfh':'Télétravail'}[r.leave_type] }}
            </span>
            <div class="small text-secondary mt-1 num-mono">
              {{ r.start_date|date_fr }}{% if r.end_date != r.start_date %} → {{ r.end_date|date_fr }}{% endif %}
              ({{ 'demi-journée' if r.day_fraction == 0.5 else 'journée(s) complète(s)' }})
            </div>
          </td>
          <td>
            <small class="text-secondary">{{ r.reason or '—' }}</small>
          </td>
          <td>
            {% if r.attachment %}
              <a class="btn btn-sm btn-outline-primary py-1 px-2" href="{{ url_for('attachment', filename=r.attachment) }}">
                📄 Télécharger
              </a>
            {% else %}
              <span class="text-muted small">—</span>
            {% endif %}
          </td>
          <td class="text-end">
            {% if r.status == 'pending' %}
              <form method="post" action="{{ url_for('decide_request', request_id=r.id) }}" class="d-flex gap-2 justify-content-end align-items-center">
                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                <input type="text" name="note" class="form-control form-control-sm" placeholder="Note RH..." style="max-width: 140px;">
                <button name="decision" value="approved" class="btn btn-sm btn-success fw-bold" title="Approuver">✓ 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="5" class="text-secondary text-center py-5">Aucune demande dans cette vue.</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}