{% extends 'base.html' %}
{% load humanize %}

{% block content %}
<section class="page-view active">
  <div class="view-header">
    <div class="view-title">
      <h2><i data-lucide="file-check" style="color:var(--efintel-blue);"></i> Liquidaciones de Sueldo Mensuales</h2>
      <p>Procesamiento mensual de haberes, descuentos, emisión en PDF y libro de remuneraciones (LRE).</p>
    </div>
    <div style="display:flex; gap:0.5rem;">
      <a href="{% url 'payroll:slip_generate' %}" class="btn-primary" style="text-decoration:none;">
        <i data-lucide="cpu" style="width:16px;"></i> Generar Cálculo Mensual
      </a>
      <a href="{% url 'payroll:export_previred' %}" class="btn-primary" style="background:#107c41; text-decoration:none;">
        <i data-lucide="download" style="width:16px;"></i> Archivo Previred
      </a>
    </div>
  </div>

  <div class="data-card" x-data="{ search: '' }">
    <div style="padding:1rem; border-bottom:1px solid var(--border-color); display:flex; gap:1rem; align-items:flex-end;">
      <form method="get" style="display:flex; gap:1rem; align-items:flex-end;">
        <div>
          <label style="font-size:0.8rem; font-weight:600; color:var(--text-secondary);">Mes</label>
          <select name="month" class="form-control" style="min-width:120px;">
            <option value="">Todos</option>
            <option value="1" {% if selected_month == '1' %}selected{% endif %}>Enero</option>
            <option value="2" {% if selected_month == '2' %}selected{% endif %}>Febrero</option>
            <option value="3" {% if selected_month == '3' %}selected{% endif %}>Marzo</option>
            <option value="4" {% if selected_month == '4' %}selected{% endif %}>Abril</option>
            <option value="5" {% if selected_month == '5' %}selected{% endif %}>Mayo</option>
            <option value="6" {% if selected_month == '6' %}selected{% endif %}>Junio</option>
            <option value="7" {% if selected_month == '7' %}selected{% endif %}>Julio</option>
            <option value="8" {% if selected_month == '8' %}selected{% endif %}>Agosto</option>
            <option value="9" {% if selected_month == '9' %}selected{% endif %}>Septiembre</option>
            <option value="10" {% if selected_month == '10' %}selected{% endif %}>Octubre</option>
            <option value="11" {% if selected_month == '11' %}selected{% endif %}>Noviembre</option>
            <option value="12" {% if selected_month == '12' %}selected{% endif %}>Diciembre</option>
          </select>
        </div>
        <div>
          <label style="font-size:0.8rem; font-weight:600; color:var(--text-secondary);">Año</label>
          <input type="number" name="year" value="{{ selected_year }}" class="form-control" min="2000" max="2100" style="width:100px;">
        </div>
        <div>
          <button type="submit" class="btn-primary" style="padding:0.5rem 1rem;">Filtrar</button>
        </div>
      </form>
      <div style="flex:1;"></div>
      <div>
        <label style="font-size:0.8rem; font-weight:600; color:var(--text-secondary);">Buscar Colaborador</label>
        <input type="text" x-model="search" placeholder="Nombre o RUT..." class="form-control" style="min-width:250px;">
      </div>
    </div>
    <table class="data-table">
      <thead>
        <tr>
          <th>Mes/Año</th>
          <th>Colaborador</th>
          <th>Haberes Imponibles</th>
          <th>Descuentos</th>
          <th>Sueldo Líquido (CLP)</th>
          <th>Firma Electrónica</th>
        </tr>
      </thead>
      <tbody>
        {% for slip in slips %}
        <tr x-show="search === '' || '{{ slip.employee.full_name|lower }} {{ slip.employee.rut|lower }}'.includes(search.toLowerCase())">
          <td><strong>{{ slip.month }}/{{ slip.year }}</strong></td>
          <td>{{ slip.employee.full_name }}</td>
          <td>${{ slip.taxable_earnings_clp|floatformat:"0"|intcomma }} CLP</td>
          <td>${{ slip.total_deductions_clp|floatformat:"0"|intcomma }} CLP</td>
          <td><strong>${{ slip.net_salary_clp|floatformat:"0"|intcomma }} CLP</strong></td>
          <td>
            {% if slip.is_signed %}
              <span class="badge badge-emerald">Firmada</span>
            {% else %}
              <span class="badge badge-turquoise">Pendiente Firma</span>
            {% endif %}
          </td>
        </tr>
        {% empty %}
        <tr>
          <td colspan="6" style="text-align:center; padding:2rem; color:var(--text-secondary);">
            No hay liquidaciones emitidas para el periodo actual.
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</section>
{% endblock %}