{% extends "base.html" %}
{% set active = "rh" %}
{% block title %}RH · ArcaBeauty Club{% endblock %}

{% block content %}
<div class="topbar">
    <div>
        <div class="eyebrow">Personal</div>
        <h1>Recursos Humanos</h1>
    </div>
</div>

<div class="grid cols-4" style="margin-bottom:22px;">
    <div class="card kpi">
        <span class="label">Empleados activos</span>
        <span class="value">{{ empleados|selectattr("activo")|list|length }}</span>
    </div>
    <div class="card kpi">
        <span class="label">Ventas atendidas (periodo)</span>
        <span class="value">{{ totales_nomina.ventas }}</span>
    </div>
    <div class="card kpi">
        <span class="label">Comisiones (periodo)</span>
        <span class="value">${{ "%.0f"|format(totales_nomina.comision) }}</span>
    </div>
    <div class="card kpi">
        <span class="label">Nómina total (periodo)</span>
        <span class="value">${{ "%.0f"|format(totales_nomina.total) }}</span>
    </div>
</div>

<div class="card" style="margin-bottom:22px;">
    <div style="display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px;">
        <h2 style="font-size:18px;">Equipo</h2>
        <button class="btn ghost sm" onclick="document.getElementById('modalNuevoEmpleado').classList.add('open')">+ Nuevo empleado</button>
    </div>
    {% if empleados %}
    <table>
        <thead><tr><th>Nombre</th><th>Puesto</th><th>Tipo de pago</th><th>Sueldo base</th><th>Comisión</th><th>Horario</th><th></th></tr></thead>
        <tbody>
        {% for e in empleados %}
            <tr style="{{ 'opacity:0.5;' if not e.activo }}">
                <td><a href="{{ url_for('empleado_detalle', empleado_id=e.id) }}"><strong>{{ e.nombre }}</strong></a></td>
                <td>{{ e.puesto or "—" }}</td>
                <td>{{ tipos_pago.get(e.tipo_pago, e.tipo_pago) }}</td>
                <td class="mono">${{ "%.0f"|format(e.salario_base) }}</td>
                <td class="mono">{{ e.porcentaje_comision|int }}%</td>
                <td class="mono" style="font-size:12px;">{{ e.hora_entrada }}&ndash;{{ e.hora_salida }}</td>
                <td><a href="{{ url_for('empleado_detalle', empleado_id=e.id) }}" class="btn ghost sm">Ver</a></td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    {% else %}
    <div class="empty-state"><div class="display">Sin empleados registrados</div></div>
    {% endif %}
</div>

<div class="card">
    <h2 style="font-size:18px; margin-bottom:6px;">Reporte de nómina</h2>
    <p style="font-size:12px; color:var(--tinta-suave); margin-bottom:14px;">Sueldo base (si aplica) + comisión sobre las ventas atendidas en el periodo seleccionado.</p>
    <form method="get" style="display:flex; gap:10px; align-items:flex-end; margin-bottom:18px; flex-wrap:wrap;">
        <div class="field" style="margin-bottom:0;"><label>Desde</label><input type="date" name="fecha_inicio" value="{{ fecha_inicio }}"></div>
        <div class="field" style="margin-bottom:0;"><label>Hasta</label><input type="date" name="fecha_fin" value="{{ fecha_fin }}"></div>
        <button type="submit" class="btn secondary sm">Actualizar</button>
    </form>

    {% if filas_nomina %}
    <table>
        <thead><tr><th>Empleado</th><th>Ventas atendidas</th><th>Total vendido</th><th>Sueldo base</th><th>Comisión</th><th>Total a pagar</th></tr></thead>
        <tbody>
        {% for f in filas_nomina %}
            <tr>
                <td><a href="{{ url_for('empleado_detalle', empleado_id=f.id) }}">{{ f.nombre }}</a></td>
                <td class="mono">{{ f.ventas_atendidas }}</td>
                <td class="mono">${{ "%.0f"|format(f.total_vendido) }}</td>
                <td class="mono">${{ "%.0f"|format(f.salario) }}</td>
                <td class="mono">${{ "%.0f"|format(f.comision) }}</td>
                <td class="mono" style="font-weight:700; color:var(--ciruela);">${{ "%.0f"|format(f.total_pagar) }}</td>
            </tr>
        {% endfor %}
        </tbody>
        <tfoot>
            <tr style="font-weight:700;">
                <td>Total</td>
                <td class="mono">{{ totales_nomina.ventas }}</td>
                <td></td>
                <td class="mono">${{ "%.0f"|format(totales_nomina.salario) }}</td>
                <td class="mono">${{ "%.0f"|format(totales_nomina.comision) }}</td>
                <td class="mono">${{ "%.0f"|format(totales_nomina.total) }}</td>
            </tr>
        </tfoot>
    </table>
    {% else %}
    <div class="empty-state"><div class="display">Sin empleados activos para calcular nómina</div></div>
    {% endif %}
</div>

<div class="modal-backdrop" id="modalNuevoEmpleado">
    <div class="modal">
        <button class="modal-close" onclick="document.getElementById('modalNuevoEmpleado').classList.remove('open')">&times;</button>
        <h2>Nuevo empleado</h2>
        <form method="post" action="{{ url_for('empleado_crear') }}">
            <div class="field"><label>Nombre completo</label><input type="text" name="nombre" required></div>
            <div class="field"><label>Puesto</label><input type="text" name="puesto" placeholder="Ej. Esteticista senior"></div>
            <div class="grid cols-2">
                <div class="field"><label>Teléfono</label><input type="text" name="telefono"></div>
                <div class="field"><label>Correo</label><input type="email" name="email"></div>
            </div>
            <div class="grid cols-2">
                <div class="field"><label>Fecha de contratación</label><input type="date" name="fecha_contratacion"></div>
                <div class="field"><label>Color en agenda</label><input type="color" name="color" value="#8B5E83"></div>
            </div>
            <div class="field">
                <label>Tipo de pago</label>
                <select name="tipo_pago">
                    {% for k, v in tipos_pago.items() %}<option value="{{ k }}">{{ v }}</option>{% endfor %}
                </select>
            </div>
            <div class="grid cols-2">
                <div class="field"><label>Sueldo base (si aplica)</label><input type="number" name="salario_base" step="0.01" value="0"></div>
                <div class="field"><label>% de comisión (si aplica)</label><input type="number" name="porcentaje_comision" step="0.1" value="0"></div>
            </div>
            <button type="submit" class="btn accent" style="width:100%;">Guardar empleado</button>
        </form>
    </div>
</div>
{% endblock %}