{% extends 'base.html' %}
{% block title %}Paie & Primes Mensuelles · 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">Rémunération & Audit Direction</div>
    <h1 class="h2 mb-1 fw-bold">Gestion des Salaires & Primes — {{ month|month_fr }}</h1>
    <p class="text-secondary mb-0 small">
      Tableau de paie calqué sur le format officiel Planète : annulation stricte de la prime de présence en cas d'absence/sick, calcul automatique des majorations samedis/dimanches.
    </p>
    {% if rows|selectattr("rates_missing")|list %}<p class="alert alert-warning mt-3 mb-0">Barème absent pour une partie de cette période. Aucun forfait automatique non configuré n’est attribué ; vérifiez les montants importés ou ajustez la paie.</p>{% endif %}
  </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 de paie :</label>
    <select id="monthSelect" class="form-select form-select-sm num-mono" name="month" data-auto-submit>
      {% for m in available_months %}
        <option value="{{ m }}" {{ 'selected' if m == month }}>{{ m|month_fr }}</option>
      {% endfor %}
    </select>
  </form>
</div>

<!-- KPI Cards -->
<div class="row g-3 mb-4">
  <div class="col-12 col-sm-6 col-xl-3">
    <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); font-size: 0.72rem; letter-spacing: 0.08em;">Masse Salariale Base</span>
          <span class="badge bg-light text-muted">MUR / Rs</span>
        </div>
        <div class="display-6 num-mono text-dark mt-1 mb-1">
          {{ '{:,.0f}'.format(kpis.total_base).replace(',', ' ') }} <span class="fs-6 fw-normal text-muted">Rs</span>
        </div>
        <div class="small text-secondary">{{ kpis.count }} collaborateurs actifs</div>
      </div>
    </div>
  </div>

  <div class="col-12 col-sm-6 col-xl-3">
    <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); font-size: 0.72rem; letter-spacing: 0.08em;">Primes de Présence</span>
          <span class="badge bg-success-subtle text-success">Automatisé</span>
        </div>
        <div class="display-6 num-mono mt-1 mb-1" style="color: var(--ok);">
          {{ '{:,.0f}'.format(kpis.total_presence).replace(',', ' ') }} <span class="fs-6 fw-normal text-muted">Rs</span>
        </div>
        <div class="small text-secondary">0 Rs si ≥ 1 arrêt maladie ou absence non planifiée</div>
      </div>
    </div>
  </div>

  <div class="col-12 col-sm-6 col-xl-3">
    <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); font-size: 0.72rem; letter-spacing: 0.08em;">Overtime & Astreintes</span>
          <span class="badge bg-primary-subtle text-primary">Samedis / Dimanches</span>
        </div>
        <div class="display-6 num-mono mt-1 mb-1" style="color: var(--accent);">
          {{ '{:,.0f}'.format(kpis.total_overtime).replace(',', ' ') }} <span class="fs-6 fw-normal text-muted">Rs</span>
        </div>
        <div class="small text-secondary">Samedis (2 000 Rs) · Dimanches (4 000 Rs)</div>
      </div>
    </div>
  </div>

  <div class="col-12 col-sm-6 col-xl-3">
    <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); font-size: 0.72rem; letter-spacing: 0.08em;">Masse Globale Estimée</span>
          <span class="badge bg-dark text-white">Total Net</span>
        </div>
        <div class="display-6 num-mono text-dark mt-1 mb-1">
          {{ '{:,.0f}'.format(kpis.total_base + kpis.total_presence + kpis.total_overtime).replace(',', ' ') }} <span class="fs-6 fw-normal text-muted">Rs</span>
        </div>
        <div class="small text-secondary">Salaires base + primes + overtimes validés</div>
      </div>
    </div>
  </div>
</div>

<!-- Alert Banner Règles Métier -->
<div class="alert alert-secondary border shadow-sm d-flex flex-wrap align-items-center justify-content-between gap-3 mb-4">
  <div class="d-flex align-items-center gap-3">
    <span class="fs-5">⚖️</span>
    <div class="small">
      <strong>Règles de gestion salariale appliquées :</strong><br>
      • <strong>Prime de présence :</strong> Dès le 1<sup>er</sup> jour de <em>Sick</em> ou d'absence non planifiée, la prime passe automatiquement à <strong>0 Rs</strong>.<br>
      • <strong>Overtime Samedi & Dimanche :</strong> Calculé sur la base de 2 000 Rs par Samedi travaillé et 4 000 Rs par Dimanche travaillé (ou astreinte).
    </div>
  </div>
  <span class="badge bg-dark text-uppercase p-2">Confidentiel Direction</span>
</div>

<!-- Main Payroll Table (Salary Planete Format) -->
<div class="card border shadow-sm">
  <div class="card-header bg-white d-flex justify-content-between align-items-center py-3">
    <div>
      <h2 class="h5 mb-0 fw-bold">Tableau Mensuel des Salaires & Ajustements (MUR)</h2>
      <div class="text-secondary small">Vérification individuelle et ajustement des forfaits de présence et d'heures supplémentaires</div>
    </div>
    <span class="badge bg-light text-dark border">{{ rows|length }} salariés</span>
  </div>
  <div class="table-responsive">
    <table data-searchable class="table align-middle mb-0 table-hover">
      <thead class="table-light text-secondary" style="font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em;">
        <tr>
          <th>Salarié</th>
          <th>Département</th>
          <th class="text-end">Salaire Base</th>
          <th class="text-center">Arrêts & Absences</th>
          <th class="text-center">Prestations W-E</th>
          <th class="text-end">Prime Présence</th>
          <th class="text-end">Overtime Calculé</th>
          <th class="text-end">Net Estimé</th>
          <th class="text-center">Actions & Régularisation</th>
        </tr>
      </thead>
      <tbody>
        {% for r in rows %}
        <tr>
          <td>
            <div class="fw-bold text-dark">{{ r.person.full_name }}</div>
            <div class="small text-muted num-mono">@{{ r.person.username }}</div>
          </td>
          <td>
            <span class="badge bg-light text-dark border">{{ r.person.team or 'Général' }}</span>
          </td>
          <td class="text-end fw-semibold num-mono">
            {{ '{:,.0f}'.format(r.basic_salary).replace(',', ' ') }} <small class="text-muted">Rs</small>
          </td>
          <td class="text-center">
            {% if r.sick > 0 or r.unplanned > 0 %}
              <span class="badge bg-danger-subtle text-danger num-mono">
                {{ r.sick }} sick / {{ r.unplanned }} abs
              </span>
            {% else %}
              <span class="badge bg-success-subtle text-success num-mono">
                0 absence
              </span>
            {% endif %}
          </td>
          <td class="text-center">
            {% if r.saturdays > 0 or r.sundays > 0 or r.on_call > 0 %}
              <div class="num-mono small fw-bold text-primary">
                {% if r.saturdays > 0 %}{{ r.saturdays }} sam. {% endif %}
                {% if r.sundays > 0 %}{{ r.sundays }} dim. {% endif %}
                {% if r.on_call > 0 %}{{ r.on_call }} ast. {% endif %}
              </div>
              {% if r.hours > 0 %}
                <div class="text-muted" style="font-size: 0.7rem;">{{ r.hours|round(1) }}h d'intervention</div>
              {% endif %}
            {% else %}
              <span class="text-muted small">—</span>
            {% endif %}
          </td>
          <td class="text-end">
            <div class="fw-bold num-mono" style="color: {{ 'var(--ok)' if r.presence_bonus > 0 else 'var(--danger)' }}; font-size: 1.05rem;">
              {{ '{:,.0f}'.format(r.presence_bonus).replace(',', ' ') }} <small>Rs</small>
            </div>
            <div class="small" style="font-size: 0.75rem; font-weight: 600; color: {{ 'var(--ok)' if r.presence_eligible else 'var(--danger)' }};">
              {{ '✓ Éligible' if r.presence_eligible else '✗ Supprimée (Sick)' }}
            </div>
          </td>
          <td class="text-end fw-semibold num-mono" style="color: var(--accent); font-size: 1.05rem;">
            {{ '{:,.0f}'.format(r.overtime_adjustment).replace(',', ' ') }} <small class="text-muted">Rs</small>
            {% if r.suggested_ot > 0 and r.suggested_ot != r.overtime_adjustment %}
              <div class="text-muted" style="font-size: 0.7rem;">Suggéré : {{ '{:,.0f}'.format(r.suggested_ot) }} Rs</div>
            {% endif %}
          </td>
          <td class="text-end fw-bold num-mono text-dark" style="font-size: 1.05rem;">
            {{ '{:,.0f}'.format(r.net_estimate).replace(',', ' ') }} <small class="text-muted">Rs</small>
          </td>
          <td>
            <form method="post" action="{{ url_for('payroll_adjust', user_id=r.person.id) }}" class="d-flex flex-wrap gap-1 align-items-center justify-content-end">
              <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
              <input type="hidden" name="month" value="{{ month }}">
              
              <div class="input-group input-group-sm" style="max-width: 120px;" title="Prime présence ajustée">
                <span class="input-group-text py-0 text-muted px-1" style="font-size: 0.7rem;">Prés.</span>
                <input class="form-control num-mono px-1 text-end" name="presence_bonus" type="number" min="0" step="0.01"
                       value="{{ r.presence_bonus }}" {{ 'readonly' if not r.presence_eligible }}
                       style="font-size: 0.8rem;">
              </div>

              <div class="input-group input-group-sm" style="max-width: 120px;" title="Overtime ajusté">
                <span class="input-group-text py-0 text-muted px-1" style="font-size: 0.7rem;">OT</span>
                <input class="form-control num-mono px-1 text-end" name="overtime_adjustment" type="number" min="0" step="0.01"
                       value="{{ r.overtime_adjustment }}" style="font-size: 0.8rem;">
              </div>

              <input class="form-control form-control-sm px-2" name="note" value="{{ r.note }}" placeholder="Note" style="max-width: 120px; font-size: 0.8rem;">
              <button class="btn btn-sm btn-primary py-1 px-2" type="submit" title="Sauvegarder">OK</button>
            </form>
          </td>
        </tr>
        {% else %}
        <tr>
          <td colspan="9" class="text-center text-secondary py-5">Aucun salarié trouvé pour ce mois.</td>
        </tr>
        {% endfor %}
      </tbody>
      <tfoot class="table-light fw-bold num-mono" style="font-size: 0.9rem;">
        <tr>
          <td colspan="2">TOTAL GÉNÉRAL</td>
          <td class="text-end">{{ '{:,.0f}'.format(kpis.total_base).replace(',', ' ') }} Rs</td>
          <td colspan="2" class="text-center text-muted">—</td>
          <td class="text-end text-success">{{ '{:,.0f}'.format(kpis.total_presence).replace(',', ' ') }} Rs</td>
          <td class="text-end" style="color: var(--accent);">{{ '{:,.0f}'.format(kpis.total_overtime).replace(',', ' ') }} Rs</td>
          <td class="text-end text-dark">{{ '{:,.0f}'.format(kpis.total_base + kpis.total_presence + kpis.total_overtime).replace(',', ' ') }} Rs</td>
          <td></td>
        </tr>
      </tfoot>
    </table>
  </div>
</div>
{% endblock %}