{% extends 'base.html' %}
{% block title %}Ma Rémunération & Primes · 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">Espace Salarié</div>
    <h1 class="h2 mb-1 fw-bold">Ma Rémunération & Primes</h1>
    <p class="text-secondary mb-0 small">Historique mensuel de vos salaires de base, primes de présence, indemnités et déductions.</p>
  </div>
</div>

<div class="card border shadow-sm mb-4">
  <div class="card-header d-flex justify-content-between align-items-center">
    <div>
      <h2 class="h5 mb-0 fw-bold">Historique de vos relevés mensuels</h2>
      <div class="text-secondary small">Relevés arrêtés et régularisations validées</div>
    </div>
    <span class="badge bg-light text-dark border">{{ records|length }} mois enregistrés</span>
  </div>
  <div class="table-responsive">
    <table class="table align-middle mb-0 table-hover">
      <thead>
        <tr>
          <th>Mois</th>
          <th class="text-end">Salaire de base</th>
          <th class="text-end">Prime de présence</th>
          <th class="text-end">Overtime / Astreinte</th>
          <th class="text-end">Commission</th>
          <th class="text-end">Transport / Divers</th>
          <th class="text-end">Déductions</th>
          <th class="text-end">Total estimé</th>
          <th>Commentaire</th>
        </tr>
      </thead>
      <tbody>
        {% for rec in records %}
        <tr>
          <td>
            <strong class="num-mono" style="color: var(--accent);">{{ rec.month|month_fr }}</strong>
          </td>
          <td class="text-end fw-semibold num-mono">
            {{ '{:,.0f}'.format(rec.basic_salary).replace(',', ' ') }} <small class="text-muted">Rs</small>
          </td>
          <td class="text-end">
            {% if rec.presence_bonus > 0 %}
              <span class="badge bg-success-subtle text-success num-mono">
                +{{ '{:,.0f}'.format(rec.presence_bonus).replace(',', ' ') }} Rs
              </span>
            {% else %}
              <span class="text-muted small num-mono">0 Rs</span>
            {% endif %}
          </td>
          <td class="text-end">
            {% if rec.overtime > 0 %}
              <span class="badge bg-primary-subtle text-primary num-mono">
                +{{ '{:,.0f}'.format(rec.overtime).replace(',', ' ') }} Rs
              </span>
            {% else %}
              <span class="text-muted small">—</span>
            {% endif %}
          </td>
          <td class="text-end">
            {% if rec.commission > 0 %}
              <span class="num-mono fw-semibold" style="color: var(--ok);">+{{ '{:,.0f}'.format(rec.commission).replace(',', ' ') }} Rs</span>
            {% else %}
              <span class="text-muted small">—</span>
            {% endif %}
          </td>
          <td class="text-end">
            {% if rec.transport > 0 or rec.special_bonus > 0 %}
              <span class="small num-mono">+{{ '{:,.0f}'.format(rec.transport + rec.special_bonus).replace(',', ' ') }} Rs</span>
            {% else %}
              <span class="text-muted small">—</span>
            {% endif %}
          </td>
          <td class="text-end">
            {% if rec.loan_refund > 0 or rec.medical_deduction > 0 %}
              <span class="small num-mono" style="color: var(--danger);">-{{ '{:,.0f}'.format(rec.loan_refund + rec.medical_deduction).replace(',', ' ') }} Rs</span>
            {% else %}
              <span class="text-muted small">—</span>
            {% endif %}
          </td>
          <td class="text-end fw-bold num-mono text-dark">
            {{ '{:,.0f}'.format(rec.net_estimate).replace(',', ' ') }} <small class="text-muted">Rs</small>
          </td>
          <td>
            <small class="text-secondary">{{ rec.notes or '—' }}</small>
          </td>
        </tr>
        {% else %}
        <tr>
          <td colspan="9" class="text-center text-secondary py-5">Aucun relevé de paie disponible pour le moment.</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}