@model IEnumerable<foundation_system.Models.Colaborador>

@{
    ViewData["Title"] = "Asistencia de Colaboradores";
    var selectedDate = (DateOnly)ViewBag.SelectedDate;
    var asistencias = (Dictionary<long, foundation_system.Models.AsistenciaColaborador>)ViewBag.Asistencias;
}

<div class="container-fluid">
    <div class="card shadow mb-4">
        <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center py-3">
            <h5 class="mb-0"><i class="bi bi-calendar-check me-2"></i>@ViewData["Title"]</h5>
            <div class="d-flex align-items-center gap-2">
                <a asp-action="ReporteAsistencia" class="btn btn-light btn-sm">
                    <i class="bi bi-file-earmark-bar-graph me-1"></i> Reporte por Colaborador
                </a>
                <a asp-action="ImprimirAsistencia" asp-route-fecha="@selectedDate.ToString("yyyy-MM-dd")" class="btn btn-light btn-sm">
                    <i class="bi bi-printer me-1"></i> Imprimir Hoy
                </a>
                <div class="d-flex align-items-center ms-2">
                    <label class="me-2 mb-0">Fecha:</label>
                    <input type="date" id="fechaAsistencia" class="form-control form-control-sm" 
                           value="@selectedDate.ToString("yyyy-MM-dd")" onchange="changeDate(this.value)" />
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover align-middle">
                    <thead class="table-light">
                        <tr>
                            <th>Colaborador</th>
                            <th>Cargo</th>
                            <th class="text-center" style="width: 400px;">Estado de Asistencia</th>
                            <th>Observaciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var item in Model)
                        {
                            var asistencia = asistencias.ContainsKey(item.Id) ? asistencias[item.Id] : null;
                            var estadoActual = asistencia?.Estado ?? "";
                            
                            <tr>
                                <td>
                                    <div class="fw-bold">@item.Persona.Nombres @item.Persona.Apellidos</div>
                                    <small class="text-muted">@item.HorarioEntrada?.ToString(@"hh\:mm") - @item.HorarioSalida?.ToString(@"hh\:mm")</small>
                                </td>
                                 <td><span class="badge bg-info text-dark">@(item.Cargo?.Nombre ?? "Sin Cargo")</span></td>
                                <td>
                                    <div class="btn-group w-100" role="group">
                                        <input type="radio" class="btn-check" name="estado_@item.Id" id="pres_@item.Id" value="PRESENTE" 
                                               @(estadoActual == "PRESENTE" ? "checked" : "") onchange="saveAsistencia(@item.Id, 'PRESENTE')">
                                        <label class="btn btn-outline-success btn-sm" for="pres_@item.Id">Presente</label>

                                        <input type="radio" class="btn-check" name="estado_@item.Id" id="aus_@item.Id" value="AUSENTE" 
                                               @(estadoActual == "AUSENTE" ? "checked" : "") onchange="saveAsistencia(@item.Id, 'AUSENTE')">
                                        <label class="btn btn-outline-danger btn-sm" for="aus_@item.Id">Ausente</label>

                                        <input type="radio" class="btn-check" name="estado_@item.Id" id="just_@item.Id" value="JUSTIFICADO" 
                                               @(estadoActual == "JUSTIFICADO" ? "checked" : "") onchange="saveAsistencia(@item.Id, 'JUSTIFICADO')">
                                        <label class="btn btn-outline-warning btn-sm" for="just_@item.Id">Justif.</label>

                                        <input type="radio" class="btn-check" name="estado_@item.Id" id="enf_@item.Id" value="ENFERMO" 
                                               @(estadoActual == "ENFERMO" ? "checked" : "") onchange="saveAsistencia(@item.Id, 'ENFERMO')">
                                        <label class="btn btn-outline-info btn-sm" for="enf_@item.Id">Enfermo</label>
                                    </div>
                                </td>
                                <td>
                                    <input type="text" class="form-control form-control-sm" id="obs_@item.Id" 
                                           value="@asistencia?.Observaciones" placeholder="Nota..."
                                           onblur="saveAsistencia(@item.Id, null)" />
                                </td>
                            </tr>
                        }
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script>
        $(document).ready(function() {
            // Configuración global de toastr
            toastr.options = {
                "closeButton": true,
                "progressBar": true,
                "positionClass": "toast-top-right",
                "timeOut": "3000"
            };

            @if (TempData["InfoMessage"] != null)
            {
                <text>toastr.info('@TempData["InfoMessage"]');</text>
            }
            @if (TempData["SuccessMessage"] != null)
            {
                <text>toastr.success('@TempData["SuccessMessage"]');</text>
            }
            @if (TempData["ErrorMessage"] != null)
            {
                <text>toastr.error('@TempData["ErrorMessage"]');</text>
            }
        });

        function changeDate(fecha) {
            window.location.href = '@Url.Action("Index")?fecha=' + fecha;
        }

        function saveAsistencia(colaboradorId, estado) {
            const fecha = document.getElementById('fechaAsistencia').value;
            const observaciones = document.getElementById('obs_' + colaboradorId).value;
            
            // Si el estado es null, tomamos el que esté seleccionado
            if (!estado) {
                const checkedRadio = document.querySelector(`input[name="estado_${colaboradorId}"]:checked`);
                if (!checkedRadio) return;
                estado = checkedRadio.value;
            }

            const formData = new FormData();
            formData.append('colaboradorId', colaboradorId);
            formData.append('fecha', fecha);
            formData.append('estado', estado);
            formData.append('observaciones', observaciones);

            fetch('@Url.Action("Save")', {
                method: 'POST',
                body: formData,
                headers: {
                    'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    toastr.success('Asistencia guardada correctamente');
                } else {
                    toastr.error('Error al guardar la asistencia');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                toastr.error('Ocurrió un error al procesar la solicitud');
            });
        }
    </script>
}

@Html.AntiForgeryToken()
