@extends("admin.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("admin.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")
        @include("admin.asistencia.modal.editar")
        @endsection
        @section("scripts")
            <script> window.dataTable = "{{ route('admin::asistencia.estudiante.detalle',["estudiante"=>":estudiante","fecha"=>":fecha"]) }}";</script>
            <script> window.url_get_asistencia= "{{ route('admin::asistencia.get',":id") }}";</script>
            <script> window.url_guardar_asistencia_linea= "{{ route('admin::asistencia.guardarLinea',":id") }}";</script>

            <script> window.titulo="Detalle asistencia {{$estudiante->nombre_completo}}";</script>

            <script>
                window.permiso_editar = "{{Auth::user()->can('asistencia editar')}}";
            </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('admin::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);
                    }

                    $(document).on('click', '.editarAsistencia', function () {
                        let id = $(this).data("value");
                        let url = url_get_asistencia.replace(":id", id);
                        //ajax
                        $.ajax({
                            url: url,
                            type: 'GET',
                            dataType: 'json',
                            headers: { 'X-CSRF-TOKEN': "{{ csrf_token() }}" },
                            success: function (data) {
                                $("#lecciones").val(data.lecciones);

                                $("#lecciones_presente").val(data.lecciones_presente);
                                $("#lecciones_tardia").val(data.lecciones_tardia);
                                $("#lecciones_ausente").val(data.lecciones_ausente);
                                $("#lecciones_escapado").val(data.lecciones_escapado);
                                $("#lecciones_justificado").val(data.lecciones_justificado);

                                $("#comentario").val(data.comentario);

                                let url_guardar = url_guardar_asistencia_linea.replace(":id", id);
                                $("#frmEditarAsistencia").attr("action", url_guardar);
                                $("#asistenciaModal").modal({backdrop: 'static', keyboard: false}).modal('show');

                            },
                            error: function (data) {
                                console.log(data);
                            }
                        });

                    });

                    $(document).on('submit', '#frmEditarAsistencia', function (e) {
                        e.preventDefault();
                        let url = $(this).attr("action");
                        let data = $(this).serialize();
                        $(this).find("button[type=submit]").attr("disabled", true);

                        let total = parseInt($("#lecciones").val());
                        //la suma de las lecciones presentes, tardias, ausentes, escapadas y justificadas no puede ser diferente al total de lecciones
                        let total_lecciones = 0;
                        $(".lecciones").each(function (index, element) {
                            total_lecciones += parseInt($(element).val());
                        });

                        console.log(total, total_lecciones);

                        if (total != total_lecciones) {
                            toastr.error("La suma de las lecciones presentes, tardías, ausentes, escapadas y justificadas debe ser igual al total de lecciones");
                            $(this).find("button[type=submit]").attr("disabled", false);
                            return;
                        }

                        $.ajax({
                            url: url,
                            type: 'POST',
                            dataType: 'json',
                            data: data,
                            headers: { 'X-CSRF-TOKEN': "{{ csrf_token() }}" },
                            success: function (data) {
                                if (data.ok) {
                                    toastr.success(data.mensaje);
                                    $("#asistenciaModal").modal('hide');
                                    $("#asistenciaDetalleModal").modal('hide');
                                    $('#btnBuscar').trigger('click');
                                } else {
                                    toastr.error(data.mensaje);
                                }
                                $(this).find("button[type=submit]").attr("disabled", false);

                            },
                            error: function (data) {
                                console.log(data);
                            }
                        });
                    });


                    $(document).on('change', '.lecciones', function (e) {
                        let total = parseInt($("#lecciones").val());
                        //la suma de las lecciones presentes, tardias, ausentes, escapadas y justificadas no puede ser mayor al total de lecciones
                        let total_lecciones = 0;
                        $(".lecciones").each(function (index, element) {
                            total_lecciones += parseInt($(element).val());
                        });

                        if (total_lecciones > total) {
                            toastr.error("La suma de las lecciones presentes, tardías, ausentes, escapadas y justificadas no puede ser mayor al total de lecciones");
                            $(this).val(0);
                            //disable button
                            $("#frmEditarAsistencia").find("button[type=submit]").attr("disabled", true);
                        }else{
                            $("#frmEditarAsistencia").find("button[type=submit]").attr("disabled", false);
                        }
                    });

                });
            </script>
@endsection