{% extends "base.html" %}
{% block title %}Empleados{% endblock %}
{% block page_title %}👥 Empleados{% endblock %}

{% block content %}
<div class="flex-between mb-20">
  <div>
    <p class="text-muted">{{ empleados|length }} empleados activos</p>
  </div>
  <a href="{{ url_for('nuevo_empleado') }}" class="btn btn-primary">➕ Nuevo Empleado</a>
</div>

<!-- Filtrar por local -->
<div style="display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap;" id="filtrosLocales">
  <button class="btn btn-sm btn-primary" onclick="filtrarLocal('todos')">Todos</button>
  {% for key, cfg in locales.items() %}
  <button class="btn btn-sm btn-secondary" onclick="filtrarLocal('{{ key }}')">{{ cfg.icono }} {{ cfg.nombre }}</button>
  {% endfor %}
</div>

<div class="card">
  {% if empleados %}
  <table class="table" id="tablaEmpleados">
    <thead>
      <tr>
        <th>Nombre</th>
        <th>RUT</th>
        <th>Cargo</th>
        <th>Local</th>
        <th>Teléfono</th>
        <th>Email</th>
        <th>Salario Base</th>
        <th>Acciones</th>
      </tr>
    </thead>
    <tbody>
      {% for emp in empleados %}
      <tr data-local="{{ emp.local }}">
        <td><b>{{ emp.nombre }}</b></td>
        <td style="font-family:monospace;">{{ emp.rut }}</td>
        <td>{{ emp.cargo }}</td>
        <td>
          <span class="badge badge-info">{{ locales[emp.local].icono if emp.local in locales else '🏪' }} {{ locales[emp.local].nombre if emp.local in locales else emp.local }}</span>
        </td>
        <td>{{ emp.telefono or '—' }}</td>
        <td>{{ emp.email or '—' }}</td>
        <td class="moneda">${{ '{:,.0f}'.format(emp.salario_base or 0) }}</td>
        <td>
          <div class="table-actions">
            <a href="{{ url_for('editar_empleado', empleado_id=emp.id) }}" class="btn btn-secondary btn-sm">✏️ Editar</a>
            <form method="POST" action="{{ url_for('eliminar_empleado', empleado_id=emp.id) }}"
                  onsubmit="return confirm('¿Desactivar a {{ emp.nombre }}?');" style="display:inline;">
              <button type="submit" class="btn btn-danger btn-sm">✕</button>
            </form>
          </div>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <div class="text-center text-muted" style="padding:40px;">
    <p style="font-size:32px; margin-bottom:12px;">👤</p>
    <p>No hay empleados registrados</p>
    <a href="{{ url_for('nuevo_empleado') }}" class="btn btn-primary btn-sm" style="margin-top:12px;">➕ Agregar primer empleado</a>
  </div>
  {% endif %}
</div>

{% block extra_js %}
<script>
function filtrarLocal(local) {
  document.querySelectorAll('#tablaEmpleados tbody tr').forEach(tr => {
    tr.style.display = (local === 'todos' || tr.dataset.local === local) ? '' : 'none';
  });
  document.querySelectorAll('#filtrosLocales .btn').forEach(btn => btn.className = 'btn btn-sm btn-secondary');
  event.target.className = 'btn btn-sm btn-primary';
}
</script>
{% endblock %}
{% endblock %}