@model MieSystem.Models.ViewModels.AsistenciaViewModel
@{
    ViewData["Title"] = "Control 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();
}

<div class="container-fluid">
    <div class="card mb-4">
        <div class="card-header bg-primary text-white">
            <h5 class="mb-0"><i class="fas fa-filter"></i> Filtros</h5>
        </div>
        <div class="card-body">
            <form method="get" id="filtroForm" class="row g-3">
                <div class="col-md-3">
                    <label class="form-label">Año</label>
                    <select name="año" class="form-select" id="selectAnio">
                        @foreach (var año in ViewBag.Años)
                        {
                            <option value="@año.Value" selected="@año.Selected">
                                @año.Text
                            </option>
                        }
                    </select>
                </div>
                
                <div class="col-md-3">
                    <label class="form-label">Mes</label>
                    <select name="mes" class="form-select" id="selectMes">
                        @foreach (var mes in ViewBag.Meses)
                        {
                            <option value="@mes.Value" selected="@(mes.Value == Model.Mes.ToString())">
                                @mes.Text
                            </option>
                        }
                    </select>
                </div>
                
                <div class="col-md-4">
                    <label class="form-label">Días de la semana</label>
                    <div class="dias-semana-checkboxes">
                        @foreach (var dia in ViewBag.DiasSemana)
                        {
                            var isChecked = diasSeleccionadosList.Contains(dia.Value);
                            <div class="form-check form-check-inline">
                                <input class="form-check-input dia-checkbox" 
                                       type="checkbox" 
                                       value="@dia.Value" 
                                       id="dia@(dia.Value)"
                                       @(isChecked ? "checked" : "")>
                                <label class="form-check-label" for="dia@(dia.Value)">
                                    @dia.Text
                                </label>
                            </div>
                        }
                        <input type="hidden" name="diasSemana" id="diasSemanaInput" 
                               value="@Model.DiasSemanaSeleccionados">
                    </div>
                </div>
                
                <div class="col-md-2 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="fas fa-search"></i> Filtrar
                    </button>
                </div>
            </form>
        </div>
    </div>

    <div class="row mb-4" id="estadisticasContainer">
    </div>

    <div class="card">
        <div class="card-header bg-success text-white d-flex justify-content-between align-items-center">
            <h5 class="mb-0">
                <i class="fas fa-calendar-check"></i> 
                Asistencia - @Model.NombreMes @Model.Año
                <span class="badge bg-light text-dark ms-2">@Model.Expedientes.Count niños</span>
            </h5>
            <div>
                <button class="btn btn-light btn-sm" id="btnGuardarTodo">
                    <i class="fas fa-save"></i> Guardar todo
                </button>
                <button class="btn btn-light btn-sm" id="btnExportar">
                    <i class="fas fa-file-excel"></i> Exportar
                </button>
            </div>
        </div>
        
        <div class="card-body p-0">
            <div class="table-responsive" style="max-height: 70vh; overflow-y: auto;">
                <table class="table table-bordered table-striped mb-0" id="tablaAsistencia">
                    <thead class="table-dark sticky-top" style="top: 0;">
                        <tr>
                            <th style="min-width: 200px; position: sticky; left: 0; background: #343a40; z-index: 10;">
                                Niño
                            </th>
                            
                            @foreach (var dia in diasAMostrar)
                            {
                                var esFinSemana = dia.DayOfWeek == DayOfWeek.Saturday || dia.DayOfWeek == DayOfWeek.Sunday;
                                
                                <th class="text-center @(esFinSemana ? "" : "")" 
                                    style="min-width: 60px;">
                                    <div class="small">@dia.ToString("ddd")</div>
                                    <div class="fw-bold">@dia.Day</div>
                                </th>
                            }
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var expediente in Model.Expedientes)
                        {
                            <tr data-expediente-id="@expediente.Id">
                                <td style="position: sticky; left: 0; background: white; z-index: 5;">
                                    <div class="fw-bold">@expediente.NombreCompleto</div>
                                    <div class="small text-muted">Edad: @expediente.Edad años</div>
                                </td>
                                
                                @foreach (var dia in diasAMostrar)
                                {
                                    var key = $"{expediente.Id}_{dia:yyyy-MM-dd}";
                                    var estadoActual = Model.Asistencias.ContainsKey(key) 
                                        ? Model.Asistencias[key] 
                                        : "";
                                    
                                    <td class="text-center p-0 celda-asistencia" 
                                        data-expediente="@expediente.Id" 
                                        data-fecha="@dia.ToString("yyyy-MM-dd")">
                                        <select class="form-select form-select-sm estado-select border-0 rounded-0 h-100 w-100"
                                                data-initial="@estadoActual">
                                            <option value=""></option>

                                            @if (estadoActual == "P")
                                            {
                                                <option value="P" selected class="bg-success text-white">P</option>
                                            }
                                            else
                                            {
                                                <option value="P" class="bg-success text-white">P</option>
                                            }

                                            @if (estadoActual == "T")
                                            {
                                                <option value="T" selected class="bg-warning">T</option>
                                            }
                                            else
                                            {
                                                <option value="T" class="bg-warning">T</option>
                                            }

                                            @if (estadoActual == "F")
                                            {
                                                <option value="F" selected class="bg-danger text-white">F</option>
                                            }
                                            else
                                            {
                                                <option value="F" class="bg-danger text-white">F</option>
                                            }
                                        </select>

                                    </td>
                                }
                            </tr>
                        }
                    </tbody>
                </table>
            </div>
        </div>
        
        <div class="card-footer">
            <div class="row">
                <div class="col-md-6">
                    <div class="leyenda">
                        <span class="badge bg-success me-2">P = Presente</span>
                        <span class="badge bg-warning me-2">T = Tarde</span>
                        <span class="badge bg-danger me-2">F = Falto</span>
                        <span class="text-muted ms-3">(Vacío = No registrado)</span>
                    </div>
                </div>
                <div class="col-md-6 text-end">
                    <small class="text-muted">
                        Total: @Model.Expedientes.Count niños × @diasAMostrar.Count días = 
                        @(Model.Expedientes.Count * diasAMostrar.Count) registros posibles
                    </small>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalCarga" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-body text-center">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Cargando...</span>
                </div>
                <p class="mt-2">Guardando cambios...</p>
            </div>
        </div>
    </div>
</div>

@section Styles {
    <style>
        .table th, .table td {
            vertical-align: middle;
        }
        
        .estado-select {
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .estado-select:hover {
            transform: scale(1.05);
            box-shadow: 0 0 5px rgba(0,0,0,0.2);
        }
        
        .estado-select option[value="P"] {
            background-color: #198754 !important;
            color: white !important;
        }
        
        .estado-select option[value="T"] {
            background-color: #ffc107 !important;
            color: black !important;
        }
        
        .estado-select option[value="F"] {
            background-color: #dc3545 !important;
            color: white !important;
        }
        
        .celda-asistencia.changed {
            outline: 2px solid #0d6efd;
            outline-offset: -2px;
        }
        
        .sticky-left {
            position: sticky;
            left: 0;
            background: white;
            z-index: 5;
        }
        
        .dias-semana-checkboxes {
            background: #f8f9fa;
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #dee2e6;
        }
        
        .bg-lunes { background-color: #e3f2fd !important; }
        .bg-martes { background-color: #f3e5f5 !important; }
        .bg-miercoles { background-color: #e8f5e8 !important; }
        .bg-jueves { background-color: #fff3e0 !important; }
        .bg-viernes { background-color: #fce4ec !important; }
        .bg-sabado { background-color: #f1f8e9 !important; }
        .bg-domingo { background-color: #fff8e1 !important; }
    </style>
}

@section Scripts {
    <script>
        $(document).ready(function() {
            $('.dia-checkbox').change(function() {
                var diasSeleccionados = $('.dia-checkbox:checked').map(function() {
                    return $(this).val();
                }).get().join(',');
                $('#diasSemanaInput').val(diasSeleccionados);
            });
            
            $('.estado-select').change(function() {
                var initial = $(this).data('initial');
                var current = $(this).val();
                
                if (initial !== current) {
                    $(this).closest('.celda-asistencia').addClass('changed');
                } else {
                    $(this).closest('.celda-asistencia').removeClass('changed');
                }
            });
            
            $('.estado-select').change(function() {
                var celda = $(this).closest('.celda-asistencia');
                var expedienteId = celda.data('expediente');
                var fecha = celda.data('fecha');
                var estado = $(this).val();
                
                guardarAsistencia(expedienteId, fecha, estado, celda);
            });
            
            $('#btnGuardarTodo').click(function() {
                var cambios = [];
                var celdasCambiadas = $('.celda-asistencia.changed');
                
                if (celdasCambiadas.length === 0) {
                    toastr.info('No hay cambios para guardar');
                    return;
                }
                
                if (!confirm(`¿Guardar ${celdasCambiadas.length} cambios?`)) {
                    return;
                }
                
                $('#modalCarga').modal('show');
                
                celdasCambiadas.each(function() {
                    var celda = $(this);
                    var select = celda.find('.estado-select');
                    var expedienteId = celda.data('expediente');
                    var fecha = celda.data('fecha');
                    var estado = select.val();
                    
                    cambios.push({
                        expedienteId: expedienteId,
                        fecha: fecha,
                        estado: estado
                    });
                });
                
                $.ajax({
                    url: '@Url.Action("GuardarAsistenciasMasivas", "Asistencia")',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(cambios),
                    success: function(response) {
                        $('#modalCarga').modal('hide');
                        if (response.success) {
                            $('.celda-asistencia').removeClass('changed');
                            $('.estado-select').each(function() {
                                $(this).data('initial', $(this).val());
                            });
                            toastr.success(response.message);
                            cargarEstadisticas();
                        } else {
                            toastr.error(response.message);
                        }
                    },
                    error: function() {
                        $('#modalCarga').modal('hide');
                        toastr.error('Error al guardar los cambios');
                    }
                });
            });
            
            $('#btnExportar').click(function() {
                var año = $('#selectAnio').val();
                var mes = $('#selectMes').val();
                var diasSemana = $('#diasSemanaInput').val();
                
                var url = '@Url.Action("ExportarExcel", "Asistencia")' + 
                         '?año=' + año + 
                         '&mes=' + mes + 
                         '&diasSemana=' + diasSemana;
                
                window.open(url, '_blank');
            });
            
            $('#selectAnio, #selectMes').change(function() {
                $('#filtroForm').submit();
            });
            
            aplicarColoresDias();
        });
        
        function guardarAsistencia(expedienteId, fecha, estado, celda) {
            $.ajax({
                url: '@Url.Action("GuardarAsistencia", "Asistencia")',
                type: 'POST',
                data: {
                    expedienteId: expedienteId,
                    fecha: fecha,
                    estado: estado
                },
                success: function(response) {
                    if (response.success) {
                        celda.removeClass('changed');
                        celda.find('.estado-select').data('initial', estado);
                        toastr.success('Guardado');
                        cargarEstadisticas();
                    } else {
                        toastr.error(response.message);
                    }
                },
                error: function() {
                    toastr.error('Error al guardar');
                }
            });
        }
        
        function cargarEstadisticas() {
            var año = $('#selectAnio').val();
            var mes = $('#selectMes').val();
            
            $.ajax({
                url: '@Url.Action("ObtenerEstadisticas", "Asistencia")',
                type: 'GET',
                data: { año: año, mes: mes },
                success: function(data) {
                    if (data.error) {
                        console.error(data.error);
                        return;
                    }
                    
                    var total = data.total || 0;
                    var presentes = data.presentes || 0;
                    var tardes = data.tardes || 0;
                    var faltas = data.faltas || 0;
                    
                    var porcentajePresentes = total > 0 ? ((presentes / total) * 100).toFixed(1) : 0;
                    var porcentajeTardes = total > 0 ? ((tardes / total) * 100).toFixed(1) : 0;
                    var porcentajeFaltas = total > 0 ? ((faltas / total) * 100).toFixed(1) : 0;
                    
                    $('#estadisticasContainer').html(`
                        <div class="col-md-3">
                            <div class="card bg-success text-white">
                                <div class="card-body text-center">
                                    <h6 class="card-title">Presentes</h6>
                                    <h2>${presentes}</h2>
                                    <small>${porcentajePresentes}%</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-warning">
                                <div class="card-body text-center">
                                    <h6 class="card-title">Tardes</h6>
                                    <h2>${tardes}</h2>
                                    <small>${porcentajeTardes}%</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-danger text-white">
                                <div class="card-body text-center">
                                    <h6 class="card-title">Faltas</h6>
                                    <h2>${faltas}</h2>
                                    <small>${porcentajeFaltas}%</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-info text-white">
                                <div class="card-body text-center">
                                    <h6 class="card-title">Total Registros</h6>
                                    <h2>${total}</h2>
                                    <small>Asistencia: ${porcentajePresentes}%</small>
                                </div>
                            </div>
                        </div>
                    `);
                },
                error: function() {
                    console.error('Error cargando estadísticas');
                }
            });
        }
        
        function aplicarColoresDias() {
            $('th.text-center').each(function() {
                var textoDia = $(this).find('.small').text().trim();
                var claseColor = '';
                
                switch(textoDia) {
                    case 'Lun': claseColor = 'bg-lunes'; break;
                    case 'Mar': claseColor = 'bg-martes'; break;
                    case 'Mié': claseColor = 'bg-miercoles'; break;
                    case 'Jue': claseColor = 'bg-jueves'; break
                    case 'Vie': claseColor = 'bg-viernes'; break;
                    case 'Sáb': claseColor = 'bg-sabado'; break;
                    case 'Dom': claseColor = 'bg-domingo'; break;
                }

                if (claseColor) {
                    $(this).addClass(claseColor);
                }
            });
        }
    </script>
}