{% extends "macros/base.html" %}

{% block title %}Reporte: Horarios - {{ modulo_name }}{% endblock %}

{% block styles %}
<style>
    .table-container {
        max-height: 75vh;
        overflow-y: auto;
        overflow-x: auto;
    }
    
    .sticky-col {
        position: sticky;
        left: 0;
        z-index: 2;
        background-color: var(--bs-body-bg);
        border-right: 2px solid var(--bs-border-color) !important;
    }
    
    thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        background-color: var(--bs-body-bg);
        box-shadow: inset 0 -1px 0 var(--bs-border-color);
    }

    thead th.sticky-col {
        z-index: 3;
    }
</style>
{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <a href="{{ url_for('admin_reportes_index') }}" class="btn btn-outline-secondary btn-sm mb-2">
            <i class="bi bi-arrow-left"></i> Volver al Menú
        </a>
        <h2>Control de Horarios</h2>
    </div>
    <div class="text-end">
        <div><strong class="text-primary fs-5">{{ modulo_name }}</strong></div>
        <div class="text-muted"><small>Período: {{ mes_nombre }}</small></div>
    </div>
</div>

{% if workers_data %}
<div class="card shadow-sm border-0">
    <div class="card-body p-0">
        <div class="table-responsive table-container custom-scrollbar">
            <table class="table table-bordered table-hover table-sm mb-0 text-center text-nowrap align-middle">
                <thead>
                    <tr>
                        <th rowspan="2" class="sticky-col bg-dark text-white align-middle" style="min-width: 70px;">Día</th>
                        {% for w_id, data in workers_data.items() %}
                            <th colspan="3" class="bg-secondary text-white">{{ data.name }}</th>
                        {% endfor %}
                    </tr>
                    <tr>
                        {% for w_id, data in workers_data.items() %}
                            <th class="bg-body-tertiary">Ent</th>
                            <th class="bg-body-tertiary">Sal</th>
                            <th class="bg-success-subtle text-success">Hrs</th>
                        {% endfor %}
                    </tr>
                </thead>
                <tbody>
                    {% for dia in dias_en_periodo %}
                        <tr>
                            <td class="fw-bold sticky-col p-0 align-middle">
                                <div class="d-flex justify-content-between align-items-center px-2 py-1 h-100">
                                    <span class="text-muted" style="font-weight: 500;">{{ dia.name }}</span>
                                    <span>{{ dia.num }}</span>
                                </div>
                            </td>
                            {% for w_id, data in workers_data.items() %}
                                {% set turno = data.dias.get(dia.num) %}
                                <td>{{ turno.in if turno else '-' }}</td>
                                <td>{{ turno.out if turno else '-' }}</td>
                                <td class="bg-success-subtle fw-bold text-success">{{ turno.hrs if turno else '0:00' }}</td>
                            {% endfor %}
                        </tr>
                    {% endfor %}
                </tbody>
                <tfoot class="table-dark">
                    <tr>
                        <th class="sticky-col bg-dark text-white">TOTAL</th>
                        {% for w_id, data in workers_data.items() %}
                            <td colspan="2" class="text-end pe-2">Horas Totales:</td>
                            <td class="fs-6 text-success fw-bold">{{ data.total_hrs_str }}</td>
                        {% endfor %}
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>
{% else %}
<div class="alert alert-info text-center shadow-sm mt-4">
    No hay trabajadores asignados ni registros de horarios para este módulo.
</div>
{% endif %}
{% endblock %}