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

{% block content %}
{% if balance.unvalidated %}<div class="alert alert-warning">Votre registre de congés {{ year }} n’est pas encore validé par RH. Les valeurs affichées à zéro ne constituent pas une décision sur vos droits. Contactez RH pour établir les droits et les reports.</div>{% endif %}
<div class="d-flex flex-wrap justify-content-between align-items-end gap-3 mb-4">
  <div>
    <div class="eyebrow">Espace Collaborateur</div>
    <h1 class="h2 mb-1">Bonjour, {{ current_user.full_name }}</h1>
    <div class="text-secondary small">Situation et soldes de congés arrêtés pour {{ year }}</div>
  </div>
  <a href="{{ url_for('new_request') }}" class="btn btn-primary d-inline-flex align-items-center gap-2">
    <span>＋</span> Nouvelle demande
  </a>
</div>

<!-- Stat Cards -->
{% if celebrations %}<section class="card mb-4 celebration-card" aria-labelledby="celebrationTitle"><div class="card-body"><div class="eyebrow">Les moments de l’équipe</div><h2 class="h5" id="celebrationTitle">Aujourd’hui, on célèbre…</h2><div class="d-flex flex-wrap gap-3">{% for event in celebrations %}<div class="celebration-item"><span aria-hidden="true">{{ '🎂' if event.kind=='birthday' else '✨' }}</span><strong>{{ event.name }}</strong><p class="mb-0 small">{% if event.kind=='birthday' %}Joyeux anniversaire !{% if event.years is not none %} {{ event.years }} ans{% endif %}{% else %}{{ event.years }} an{{ 's' if event.years>1 }} chez Planète{% if event.milestone %} · Une étape à fêter !{% endif %}{% endif %}</p></div>{% endfor %}</div></div></section>{% endif %}
<div class="row g-3 mb-4">
  <div class="col-12 col-md-4">
    <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); letter-spacing: 0.08em; font-size: 0.72rem;">Congés Disponibles (CP)</span>
          <span class="badge bg-primary-subtle text-primary">Annuel</span>
        </div>
        <div class="display-6 num-mono text-dark mt-2 mb-2">
          {{ '%.1f'|format(balance.annual_opening + balance.annual_entitlement - balance.annual_used) }}
          <span class="fs-6 fw-normal text-muted">jours</span>
        </div>
        <div class="small text-secondary">
          {{ balance.annual_used|round(1) }} j. pris · {{ (balance.annual_opening + balance.annual_entitlement)|round(1) }} j. droit total
        </div>
      </div>
    </div>
  </div>

  <div class="col-12 col-md-4">
    <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); letter-spacing: 0.08em; font-size: 0.72rem;">Solde Arrêt Maladie (Sick)</span>
          <span class="badge bg-warning-subtle text-warning">Maladie</span>
        </div>
        <div class="display-6 num-mono text-dark mt-2 mb-2">
          {{ '%.1f'|format(balance.sick_opening + balance.sick_entitlement - balance.sick_used) }}
          <span class="fs-6 fw-normal text-muted">jours</span>
        </div>
        <div class="small text-secondary">
          {{ balance.sick_used|round(1) }} j. utilisés cette année · report inclus
        </div>
      </div>
    </div>
  </div>

  <div class="col-12 col-md-4">
    <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); letter-spacing: 0.08em; font-size: 0.72rem;">Demandes en attente</span>
          <span class="badge bg-light text-dark">Circuit RH</span>
        </div>
        <div class="display-6 num-mono text-dark mt-2 mb-2">
          {{ pending }}
        </div>
        <div class="small text-secondary">
          Consultez ici la décision de votre responsable.
        </div>
      </div>
    </div>
  </div>
</div>

{% if wra_status and 'Droits pleins' not in wra_status %}
<div class="alert alert-secondary d-flex flex-wrap justify-content-between align-items-center mb-4 py-2 px-3 border shadow-sm">
  <div class="d-flex align-items-center gap-2">
    <span class="badge bg-dark">Régime WRA 2019 Maurice</span>
    <span class="small">Statut de vos droits proratisés : <strong>{{ wra_status }}</strong></span>
  </div>
  <span class="text-secondary small fst-italic">Les droits anticipés sont calculés à partir des six premiers mois et des absences enregistrées.</span>
</div>
{% endif %}

{% if admin_pending is not none and admin_pending > 0 %}
<div class="alert alert-primary d-flex justify-content-between align-items-center mb-4">
  <div class="d-flex align-items-center gap-2">
    <span>⚖️</span>
    <span><strong>{{ admin_pending }}</strong> demande(s) en attente de votre arbitrage de supervision.</span>
  </div>
  <a href="{{ url_for('requests_admin') }}" class="btn btn-sm btn-outline-primary">Ouvrir les validations →</a>
</div>
{% endif %}

<!-- Mon Planning Mensuel Personnel -->
<div class="card border shadow-sm mb-4">
  <div class="card-header bg-white d-flex flex-wrap justify-content-between align-items-center gap-2 py-3">
    <div>
      <div class="eyebrow">Mon Planning Personnel</div>
      <h2 class="h5 mb-0 fw-bold">Planning & Événements de {{ month|month_fr }}</h2>
    </div>
    <form method="GET" class="d-flex align-items-center gap-2 m-0">
      <label class="small text-secondary mb-0">Mois :</label>
      <select name="month" class="form-select form-select-sm" 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>
  <div class="card-body p-3">
    <div class="row g-3">
      <div class="col-12 col-lg-7">
        <h6 class="text-uppercase small fw-bold text-muted mb-2" style="font-size: 0.72rem; letter-spacing: 0.05em;">Congés & Absences déclarés pour {{ month|month_fr }}</h6>
        {% if my_leaves %}
        <div class="table-responsive">
          <table class="table table-sm align-middle mb-0">
            <thead>
              <tr class="text-secondary small">
                <th>Type</th>
                <th>Dates</th>
                <th>Statut</th>
              </tr>
            </thead>
            <tbody>
              {% for l in my_leaves %}
              <tr>
                <td>
                  <span class="badge bg-light text-dark border">
                    {{ {'annual':'CP (Congé payé)','sick':'Sick (Maladie)','unplanned':'Absence non planifiée','unpaid':'Congé sans solde','menstrual':'Congé menstruel','wfh':'WFH (Télétravail)'}[l.leave_type] or l.leave_type }}
                  </span>
                </td>
                <td class="num-mono small">{{ l.start_date|date_fr }} {% if l.end_date != l.start_date %}→ {{ l.end_date|date_fr }}{% endif %}</td>
                <td>
                  <span class="badge bg-{{ 'success-subtle text-success' if l.status=='approved' else 'warning-subtle text-warning' }}">
                    {{ {'approved':'Validé','pending':'En attente'}[l.status] }}
                  </span>
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
        {% else %}
        <p class="text-muted small py-3 mb-0">Aucun congé ni absence enregistré sur ce mois.</p>
        {% endif %}
      </div>
      <div class="col-12 col-lg-5 border-start">
        <h6 class="text-uppercase small fw-bold text-muted mb-2" style="font-size: 0.72rem; letter-spacing: 0.05em;">Week-ends & Astreintes ({{ month|month_fr }})</h6>
        {% if my_weekends %}
        <div class="table-responsive">
          <table class="table table-sm align-middle mb-0">
            <thead>
              <tr class="text-secondary small">
                <th>Date</th>
                <th>Service</th>
                <th>Heures</th>
              </tr>
            </thead>
            <tbody>
              {% for w in my_weekends %}
              <tr>
                <td class="num-mono small">{{ w.work_date|date_fr }}</td>
                <td><span class="badge bg-info-subtle text-info">{{ {'saturday':'Samedi','sunday':'Dimanche','on_call':'Astreinte'}.get(w.work_type, w.work_type) }}</span></td>
                <td class="num-mono small">{{ w.intervention_hours }} h</td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
        {% else %}
        <p class="text-muted small py-3 mb-0">Aucun week-end ni astreinte saisi pour ce mois.</p>
        {% endif %}
      </div>
    </div>
  </div>
</div>


<div class="row g-4">
  <div class="col-12 col-xl-8">
    <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">Mes demandes récentes</h2>
        <span class="badge bg-light text-muted">{{ requests|length }} déclarations</span>
      </div>
      <div class="table-responsive">
        <table class="table align-middle mb-0 table-hover">
          <thead>
            <tr>
              <th>Type d'absence</th>
              <th>Période</th>
              <th>Statut</th>
              <th>Justificatif</th>
            </tr>
          </thead>
          <tbody>
            {% for r in requests %}
            <tr>
              <td>
                <strong>{{ {'annual':'Congé annuel','sick':'Sick (maladie)','unplanned':'Absence non planifiée','unpaid':'Congé sans solde','menstrual':'Congé menstruel','wfh':'Télétravail (WFH)'}[r.leave_type] }}</strong>
              </td>
              <td class="num-mono small">
                {{ r.start_date|date_fr }}{% if r.end_date != r.start_date %} → {{ r.end_date|date_fr }}{% endif %}
              </td>
              <td>
                <span class="badge bg-{{ 'warning-subtle text-warning' if r.status=='pending' else ('success-subtle text-success' if r.status=='approved' else 'light text-muted') }}">
                  {{ {'pending':'En attente','approved':'Approuvée','rejected':'Refusée'}[r.status] }}
                </span>
              </td>
              <td>
                {% if r.attachment %}
                  <a class="btn btn-sm btn-outline-primary py-0 px-2" href="{{ url_for('attachment', filename=r.attachment) }}">Consulter</a>
                {% else %}
                  <span class="text-muted small">—</span>
                {% endif %}
              </td>
            </tr>
            {% else %}
            <tr>
              <td colspan="4" class="text-secondary text-center py-4">Aucune demande soumise pour l'instant.</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div class="col-12 col-xl-4">
    <div class="card border shadow-sm h-100">
      <div class="card-body p-4 d-flex flex-column justify-content-between">
        <div>
          <div class="eyebrow">Service & Astreinte</div>
          <h2 class="h5 mt-2 mb-2">Déclarer un week-end travaillé</h2>
          <p class="text-secondary small leading-relaxed">
            Saisissez vos samedis, dimanches ou disponibilités d’astreinte pour validation par votre responsable.
          </p>
        </div>
        <div class="pt-3">
          <a href="{{ url_for('weekend_work_new') }}" class="btn btn-outline-primary w-100">
            Enregistrer un week-end →
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}