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

{% block content %}
<div class="topbar">
    <div>
        <div class="eyebrow"><a href="{{ url_for('rh_panel') }}">&larr; RH</a></div>
        <h1>{{ empleado.nombre }}</h1>
    </div>
    <form method="post" action="{{ url_for('empleado_desactivar', empleado_id=empleado.id) }}">
        <button type="submit" class="btn ghost">{{ "Desactivar" if empleado.activo else "Reactivar" }}</button>
    </form>
</div>

<div class="grid cols-4" style="margin-bottom:22px;">
    <div class="card kpi">
        <span class="label">Puesto</span>
        <span class="value" style="font-size:18px;">{{ empleado.puesto or "—" }}</span>
    </div>
    <div class="card kpi">
        <span class="label">Tipo de pago</span>
        <span class="value" style="font-size:18px;">{{ tipos_pago.get(empleado.tipo_pago, empleado.tipo_pago) }}</span>
    </div>
    <div class="card kpi">
        <span class="label">Sueldo base</span>
        <span class="value">${{ "%.0f"|format(empleado.salario_base) }}</span>
    </div>
    <div class="card kpi">
        <span class="label">% Comisión</span>
        <span class="value">{{ empleado.porcentaje_comision|int }}%</span>
    </div>
</div>

<div class="grid cols-2" style="margin-bottom:22px;">
    <div class="card">
        <h2 style="font-size:18px; margin-bottom:14px;">Datos del empleado</h2>
        <form method="post" action="{{ url_for('empleado_editar', empleado_id=empleado.id) }}">
            <div class="field"><label>Nombre completo</label><input type="text" name="nombre" value="{{ empleado.nombre }}" required></div>
            <div class="field"><label>Puesto</label><input type="text" name="puesto" value="{{ empleado.puesto or '' }}"></div>
            <div class="grid cols-2">
                <div class="field"><label>Teléfono</label><input type="text" name="telefono" value="{{ empleado.telefono or '' }}"></div>
                <div class="field"><label>Correo</label><input type="email" name="email" value="{{ empleado.email or '' }}"></div>
            </div>
            <div class="grid cols-2">
                <div class="field"><label>Fecha de contratación</label><input type="date" name="fecha_contratacion" value="{{ empleado.fecha_contratacion or '' }}"></div>
                <div class="field"><label>Color en agenda</label><input type="color" name="color" value="{{ empleado.color }}"></div>
            </div>
            <div class="field">
                <label>Tipo de pago</label>
                <select name="tipo_pago">
                    {% for k, v in tipos_pago.items() %}
                    <option value="{{ k }}" {{ "selected" if empleado.tipo_pago==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="{{ empleado.salario_base }}"></div>
                <div class="field"><label>% de comisión (si aplica)</label><input type="number" name="porcentaje_comision" step="0.1" value="{{ empleado.porcentaje_comision }}"></div>
            </div>
            <button type="submit" class="btn accent" style="width:100%;">Guardar cambios</button>
        </form>
    </div>

    <div class="card">
        <h2 style="font-size:18px; margin-bottom:6px;">Horario laboral</h2>
        <p style="font-size:12px; color:var(--tinta-suave); margin-bottom:14px;">Este horario se respeta automáticamente en la Agenda y en las Reservas en línea: solo se ofrecerán citas dentro de estos días y horas.</p>
        <form method="post" action="{{ url_for('empleado_horario', empleado_id=empleado.id) }}">
            <div class="grid cols-2">
                <div class="field"><label>Hora de entrada</label><input type="time" name="hora_entrada" value="{{ empleado.hora_entrada }}"></div>
                <div class="field"><label>Hora de salida</label><input type="time" name="hora_salida" value="{{ empleado.hora_salida }}"></div>
            </div>
            <label style="margin-bottom:8px;">Días laborales</label>
            <div style="display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px;">
                {% set dias_activos = empleado.dias_laborales.split(",") %}
                {% for dia in dias_semana %}
                <label style="display:flex; align-items:center; gap:5px; font-size:13px; font-weight:400; text-transform:none;">
                    <input type="checkbox" name="dias_laborales" value="{{ loop.index }}" style="width:auto;" {{ "checked" if loop.index|string in dias_activos }}>
                    {{ dia }}
                </label>
                {% endfor %}
            </div>
            <button type="submit" class="btn accent" style="width:100%;">Guardar horario</button>
        </form>
    </div>
</div>

<div class="grid cols-2">
    <div class="card">
        <h2 style="font-size:18px; margin-bottom:14px;">Ventas atendidas recientes</h2>
        {% if ventas_recientes %}
        <table>
            <thead><tr><th>Fecha</th><th>Total</th></tr></thead>
            <tbody>
            {% for v in ventas_recientes %}
                <tr><td class="mono">{{ v.fecha[:16] }}</td><td class="mono">${{ "%.0f"|format(v.total) }}</td></tr>
            {% endfor %}
            </tbody>
        </table>
        {% else %}
        <div class="empty-state"><div class="display">Sin ventas registradas</div></div>
        {% endif %}
    </div>

    <div class="card">
        <h2 style="font-size:18px; margin-bottom:14px;">Citas recientes</h2>
        {% if citas_recientes %}
        <table>
            <thead><tr><th>Fecha</th><th>Cliente</th><th>Servicio</th><th>Estado</th></tr></thead>
            <tbody>
            {% for c in citas_recientes %}
                <tr>
                    <td class="mono">{{ c.fecha }} {{ c.hora_inicio }}</td>
                    <td>{{ c.cliente_nombre }}</td>
                    <td>{{ c.servicio_nombre }}</td>
                    <td><span class="badge {{ c.estado }}">{{ c.estado }}</span></td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
        {% else %}
        <div class="empty-state"><div class="display">Sin citas registradas</div></div>
        {% endif %}
    </div>
</div>
{% endblock %}