@extends("profesor.layout.layout")
@section("styles")
    @php
        $titulo = "Asistencia";
        $modulo = "Estudiante";
        $vista="Asistencia por estudiante";
    @endphp
    <title>{{getenv("APP_NAME")}} | {{$titulo}}</title>

    <style>
        .modal-backdrop.custom-backdrop {
            background-color: black;
            opacity: 0.8;
        }
    </style>

@endsection

@section("contenido")
    <div id="kt_app_content_container" class="app-container container-fluid">
        @include("estudiante.perfil.components.header")
        @include("profesor.estudiante.components.links")
        <div class="d-flex flex-column-fluid">
            <div class="container-fluid">
                <div class="card card-custom">
                    <div class="card-header flex-wrap border-0 pt-6 pb-0">
                        <div class="card-title">
                            <h3 class="card-label">{{$vista}}
                                <span class="d-block text-muted pt-2 font-size-sm"></span>
                            </h3>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row mb-5">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="fechas" class="required">Rango fechas</label>
                                    <input type="text" id="fechas" name="fechas" class="form-control form-control-sm rangoFechas">
                                </div>
                            </div>
                            <div class="col-md-1">
                                <button class="btn btn-info btn-sm mt-6" id="btnBuscar"> <i class="fas fa-search"></i></button>
                            </div>
                        </div>
                        <table id="tablaResumen" class="table table-condensed table-striped  table-sm "></table>
                    </div>
                </div>
            </div>
        </div>

        @include("admin.estudiante.modal.asistenciaDetalle")
        @endsection
        @section("scripts")
            <script> window.dataTable = "{{ route('profesor::asistencia.estudiante.detalle',["estudiante"=>":estudiante","fecha"=>":fecha"]) }}";</script>
            <script> window.titulo="Detalle asistencia {{$estudiante->nombre_completo}}";</script>

            <script src="assets/plugins/custom/datatables/datatables.bundle.js"></script>
            @vite(['resources/js/rangoFechasMes.js'])
            @vite(['resources/js/estudiante/asistenciaDetalle.js'])

            <script>
                let es_profesor= false;
            </script>

            <script>
                $(document).ready(function() {
                    $('#btnBuscar').on('click', function () {
                        let fechaI =window.fechaI;
                        let fechaF= window.fechaF;

                        if( fechaI!="" && fechaF!=""){
                            $.ajax({
                                url: "{{ route('profesor::reporte.asistencia.getEstudianteFechas', $estudiante->id) }}",
                                type: 'GET',
                                dataType: 'json',
                                data: { fechaI: fechaI, fechaF: fechaF},
                                success: function (response) {
                                    construirTabla(response)
                                },
                                error: function (error) {
                                    console.log(error);
                                }
                            });
                        }
                    });

                    function construirTabla(response) {
                        // Limpiar la tabla antes de agregar nuevos datos
                        $("#tablaResumen").empty();

                        // Crear encabezado de la tabla
                        let encabezadoHTML = "<thead><tr><th>Fecha</th><th>Presentes</th><th>Ausentes</th><th>Tardías</th><th>Justificadas</th><th>Escapadas</th><th>Detalles</th></tr></thead>";
                        $("#tablaResumen").append(encabezadoHTML);

                        // Crear cuerpo de la tabla
                        let cuerpoHTML = "<tbody>";

                        // Variables para totales
                        let totalPresentes = 0, totalAusentes = 0, totalTardias = 0, totalJustificadas = 0, totalEscapadas = 0;

                        // Recorrer la respuesta y agregar filas
                        response.forEach(detalleAsistencia => {
                            cuerpoHTML += "<tr>";
                            cuerpoHTML += `<td>${detalleAsistencia.fecha}</td>`;
                            cuerpoHTML += `<td>${detalleAsistencia.presente}</td>`;
                            cuerpoHTML += `<td>${detalleAsistencia.ausente}</td>`;
                            cuerpoHTML += `<td>${detalleAsistencia.tardia}</td>`;
                            cuerpoHTML += `<td>${detalleAsistencia.justificada}</td>`;
                            cuerpoHTML += `<td>${detalleAsistencia.escapado}</td>`;
                            cuerpoHTML += `<td><a href="javascript:;" data-estudiante="${detalleAsistencia.estudiante_id}" data-fecha="${detalleAsistencia.fecha}" class="text-info detalleAsistencia">Ver detalle</a></td>`;
                            cuerpoHTML += "</tr>";

                            // Actualizar totales
                            totalPresentes += parseInt(detalleAsistencia.presente);
                            totalAusentes += parseInt(detalleAsistencia.ausente);
                            totalTardias += parseInt(detalleAsistencia.tardia);
                            totalJustificadas += parseInt(detalleAsistencia.justificada);
                            totalEscapadas += parseInt(detalleAsistencia.escapado);
                        });

                        // Agregar la fila de totales
                        cuerpoHTML += "<tr>";
                        cuerpoHTML += "<td><b>Total</b></td>";
                        cuerpoHTML += `<td><b>${totalPresentes}</b></td>`;
                        cuerpoHTML += `<td><b>${totalAusentes}</b></td>`;
                        cuerpoHTML += `<td><b>${totalTardias}</b></td>`;
                        cuerpoHTML += `<td><b>${totalJustificadas}</b></td>`;
                        cuerpoHTML += `<td><b>${totalEscapadas}</b></td>`;
                        cuerpoHTML += "<td></td>";  // No hay detalle para la fila de totales
                        cuerpoHTML += "</tr>";

                        cuerpoHTML += "</tbody>";
                        $("#tablaResumen").append(cuerpoHTML);
                    }

                });
            </script>
@endsection