@model foundation_system.Models.ViewModels.AsistenciaGridViewModel
@{
    Layout = null;
    ViewData["Title"] = "Reporte Mensual de Asistencia";

    var diasSeleccionadosList = new List<string>();
    if (!string.IsNullOrEmpty(Model.DiasSemanaSeleccionados))
    {
        diasSeleccionadosList = Model.DiasSemanaSeleccionados
            .Split(',', StringSplitOptions.RemoveEmptyEntries)
            .Select(d => d.Trim())
            .ToList();
    }

    var diasAMostrar = Model.DiasDelMes
        .Where(d => diasSeleccionadosList.Count == 0 ||
                    diasSeleccionadosList.Contains(((int)d.DayOfWeek).ToString()))
        .ToList();
}

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"]</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" />
    <style>
        @@media print {
            .no-print { display: none !important; }
            body { padding: 0; margin: 0; }
            .container-fluid { width: 100%; padding: 0; }
            .table { font-size: 8pt; }
            .table th, .table td { padding: 2px !important; }
            @@page { size: landscape; margin: 1cm; }
        }
        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: white; }
        .report-header { border-bottom: 2px solid #2c3e50; margin-bottom: 20px; padding-bottom: 10px; }
        .foundation-name { font-size: 24px; font-weight: bold; color: #2c3e50; }
        .report-title { font-size: 18px; color: #7f8c8d; }
        .table-report { border: 1px solid #dee2e6; }
        .table-report th { background-color: #f8f9fa; text-align: center; vertical-align: middle; border: 1px solid #dee2e6; }
        .table-report td { text-align: center; vertical-align: middle; border: 1px solid #dee2e6; }
        .name-column { text-align: left !important; padding-left: 10px !important; min-width: 180px; }
        .total-column { font-weight: bold; background-color: #f8f9fa; }
        .signature-section { margin-top: 50px; }
        .signature-line { border-top: 1px solid #000; width: 200px; margin: 0 auto; margin-top: 40px; }
        .state-P { color: #198754; font-weight: bold; }
        .state-F { color: #dc3545; font-weight: bold; }
        .state-T { color: #ffc107; font-weight: bold; }
        .state-J { color: #0dcaf0; font-weight: bold; }
        .state-E { color: #6c757d; font-weight: bold; }
    </style>
</head>
<body>
    <div class="container-fluid p-4">
        <div class="no-print mb-4 text-end">
            <button onclick="window.print()" class="btn btn-primary">
                <i class="bi bi-printer"></i> Imprimir Reporte
            </button>
            <button onclick="window.close()" class="btn btn-secondary">
                <i class="bi bi-x-lg"></i> Cerrar
            </button>
        </div>

        <div class="report-header d-flex justify-content-between align-items-center">
            <div>
                <div class="foundation-name">FUNDACIÓN MIES</div>
                <div class="report-title">Reporte Mensual de Asistencia</div>
            </div>
            <div class="text-end">
                <div class="fw-bold">MES: @Model.NombreMes @Model.Año</div>
                <div class="small text-muted">Generado el: @DateTime.Now.ToString("dd/MM/yyyy HH:mm")</div>
            </div>
        </div>

        <div class="table-responsive">
            <table class="table table-bordered table-sm table-report">
                <thead>
                    <tr>
                        <th rowspan="2" class="name-column">Nombre del Niño/a</th>
                        <th colspan="@diasAMostrar.Count">Días del Mes</th>
                        <th colspan="5">Totales</th>
                    </tr>
                    <tr>
                        @foreach (var dia in diasAMostrar)
                        {
                            <th>@dia.Day</th>
                        }
                        <th title="Presente">P</th>
                        <th title="Tarde">T</th>
                        <th title="Falta">F</th>
                        <th title="Justificado">J</th>
                        <th title="Enfermo">E</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var nino in Model.Expedientes)
                    {
                        var totalP = 0;
                        var totalT = 0;
                        var totalF = 0;
                        var totalJ = 0;
                        var totalE = 0;

                        <tr>
                            <td class="name-column">@nino.Persona.Nombres @nino.Persona.Apellidos</td>
                            @foreach (var dia in diasAMostrar)
                            {
                                var key = $"{nino.Id}_{dia:yyyy-MM-dd}";
                                var estado = Model.Asistencias.ContainsKey(key) ? Model.Asistencias[key] : "";
                                
                                switch(estado) {
                                    case "P": totalP++; break;
                                    case "T": totalT++; break;
                                    case "F": totalF++; break;
                                    case "J": totalJ++; break;
                                    case "E": totalE++; break;
                                }

                                <td class="state-@estado">@estado</td>
                            }
                            <td class="total-column">@totalP</td>
                            <td class="total-column">@totalT</td>
                            <td class="total-column">@totalF</td>
                            <td class="total-column">@totalJ</td>
                            <td class="total-column">@totalE</td>
                        </tr>
                    }
                </tbody>
                <tfoot>
                    <tr class="fw-bold">
                        <td class="name-column">TOTALES POR DÍA</td>
                        @foreach (var dia in diasAMostrar)
                        {
                            var totalDia = 0;
                            foreach (var nino in Model.Expedientes)
                            {
                                var key = $"{nino.Id}_{dia:yyyy-MM-dd}";
                                if (Model.Asistencias.ContainsKey(key) && !string.IsNullOrEmpty(Model.Asistencias[key]))
                                {
                                    totalDia++;
                                }
                            }
                            <td>@totalDia</td>
                        }
                        <td colspan="5" class="bg-light"></td>
                    </tr>
                </tfoot>
            </table>
        </div>

        <div class="row signature-section text-center">
            <div class="col-4">
                <div class="signature-line"></div>
                <div class="mt-2">Elaborado por</div>
            </div>
            <div class="col-4">
                <div class="signature-line"></div>
                <div class="mt-2">Revisado por</div>
            </div>
            <div class="col-4">
                <div class="signature-line"></div>
                <div class="mt-2">Sello de la Institución</div>
            </div>
        </div>

        <div class="mt-4 small text-muted no-print">
            <p><strong>Leyenda:</strong> P: Presente, T: Tarde, F: Falta, J: Justificado, E: Enfermo</p>
        </div>
    </div>
</body>
</html>
