@extends("profesor.layout.layout")
@section("styles")
    @php
        $titulo = "Asistencia";
        $modulo = "Reporte Asistencia";
        $vista="Reporte Asistencia por rangos de fecha";
    @endphp
    <title>{{getenv("APP_NAME")}} | {{$titulo}}</title>
    <style>
        .custom-table tbody tr:hover {
            background-color: #6ec2ff !important; /* Cambia este color al que desees */
            transition: background-color 0.3s ease; /* Agrega transición para suavizar el cambio */
        }
        .fecha-header {
            border-left: double 3px black;
            border-right: double 3px black;
        }
        .tipo-header {
            border-bottom: double 3px black;
            text-align: center;
        }
        .asistencia-cell {
            border: 1px solid black;
            text-align: center;
        }
        .border-left {
            border-left: double 3px black !important;
        }
        .border-right {
            border-right: double 3px black !important;
        }
        th, td {
            padding: 5px;
        }
        .sticky-th {
            position: sticky;
            left: 0;
            z-index: 1;
            background-color: white !important; /* Fondo blanco para ocultar el contenido detrás */
        }
        .custom-table tbody tr:hover {
            background-color: #6ec2ff; /* Cambia este color al que desees */
            transition: background-color 0.3s ease; /* Agrega transición para suavizar el cambio */
        }

        /* Ajuste de estilos para la tabla */
        .table-responsive {
            overflow-x: auto; /* Habilitar el desplazamiento horizontal */
            -webkit-overflow-scrolling: touch; /* Habilitar el desplazamiento fluido en iOS */
        }
    </style>
@endsection

@section("contenido")
    <div class="row gx-5 gx-xl-10 align-items-stretch">
        <div class="card-body">
            <div class="row mb-5">
                <div class="col-md-1">
                    <div class="form-group">
                        <label for="curso_lectivo_id" class="required">Periodo</label>
                        <select name="curso_lectivo_id" id="curso_lectivo_id" class="form-select form-select-sm">
                            @foreach($periodos as $periodo)
                                <option value="{{$periodo->id}}">{{$periodo->periodo}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="col-md-1">
                    <div class="form-group">
                        <label for="grupo_id" class="required">Grupo</label>
                        <select name="grupo_id" id="grupo_id" class="form-select form-select-sm">
                            <option value="">-</option>
                            @foreach($gruposAsignados as $grupo)
                                <option value="{{$grupo->id}}">{{$grupo->grupo}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="modulo_id" class="required">Modulo</label>
                        <select name="modulo_id" id="modulo_id" class="form-select form-select-sm">
                        </select>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group">
                        <label for="fecha_i" class="required">Fecha inicio</label>
                        <input type="date" id="fecha_i" name="fecha_i" class="form-control form-control-sm" value="{{date("Y-m-01")}}">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group">
                        <label for="fecha_f" class="required">Fecha Fin</label>
                        <input type="date" id="fecha_f" name="fecha_f" class="form-control form-control-sm" value="{{date("Y-m-t")}}">
                    </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>
                    <button style="display: none" class="btn btn-success btn-sm mt-6" id="btnExportar" title="Exportar"> <i class="fas fa-file-excel"></i></button>
                </div>
            </div>
            <div class="row table-responsive">
                <table id="tabla" class="table custom-table table-condensed table-striped  table-bordered table-sm "></table>
            </div>
        </div>
    </div>
@endsection

@section("scripts")

    @vite('resources/js/app.js')
    <script>
        $(document).ready(function () {

            $('#grupo_id').on('change', function () {
                let grupo_id = $(this).val();
                $('#modulo_id').empty();
                if (grupo_id !== "") {
                    let url = "{{ route('profesor::grupo.getMisModulos', ['grupo' => ':grupo']) }}".replace(":grupo", grupo_id);
                    $.ajax({
                        url: url,
                        type: 'GET',
                        success: function (response) {
                            $.each(response.modulos, function (index, modulo) {
                                $('#modulo_id').append('<option value="' + modulo.modulo.id + '">' + modulo.modulo.modulo + '</option>');
                            });
                        },
                        error: function (error) {
                            console.log(error);
                        }
                    });
                }
            });

            $('#btnBuscar').on('click', function () {
                let grupo_id = $("#grupo_id").val();
                let modulo_id = $("#modulo_id").val();
                let fecha_i = $("#fecha_i").val();
                let fecha_f = $("#fecha_f").val();

                if (grupo_id !== "") {
                    let url = "{{ route('profesor::asistencia.reporte.modulo', ['grupo' => ':grupo', 'modulo' => ':modulo', 'fecha_i' => ':fecha_i', 'fecha_f' => ':fecha_f']) }}"
                        .replace(":grupo", grupo_id)
                        .replace(":modulo", modulo_id)
                        .replace(":fecha_i", fecha_i)
                        .replace(":fecha_f", fecha_f);
                    $.ajax({
                        url: url,
                        type: 'GET',
                        success: function (response) {
                            $('#tabla').empty();
                            $('#btnExportar').show();
                            const asistencias = response.asistencias;
                            const fechas = response.fechas;

                            // Crear la cabecera de la tabla
                            let thead = '<thead><tr><th class="sticky-th" rowspan="2">Estudiante</th>';
                            fechas.forEach((fecha) => {
                                thead += `<th class="fecha-header" colspan="5">${fecha}</th>`;
                            });
                            thead += '<th class="fecha-header" colspan="5">Totales</th>';
                            thead += '</tr><tr>';
                            fechas.forEach(() => {
                                thead += '<th class="tipo-header">P</th><th class="tipo-header">T</th><th class="tipo-header">A</th><th class="tipo-header">J</th><th class="tipo-header">E</th>';
                            });
                            thead += '<th class="tipo-header">P</th><th class="tipo-header">T</th><th class="tipo-header">A</th><th class="tipo-header">J</th><th class="tipo-header">E</th><th class="tipo-header">% A+T</th><th class="tipo-header">Nota asistencia</th>';
                            thead += '</tr></thead>';
                            $('#tabla').append(thead);

                            console.log(asistencias);
                            // Crear el cuerpo de la tabla
                            let tbody = '<tbody>';
                            for (const estudianteId in asistencias) {
                                const estudiante = asistencias[estudianteId];
                                let totalPresencias = 0;
                                let totalTardias = 0;
                                let totalAusencias = 0;
                                let totalJustificadas = 0;
                                let totalEscapadas = 0;

                                tbody += `<tr><td class="sticky-th">${estudiante.nombre}</td>`;
                                fechas.forEach((fecha, index) => {
                                    const asistencia = estudiante.asistencias[fecha] || { presencias: 0, tardias: 0, ausencias: 0, justificadas: 0, escapadas: 0 };
                                    const borderClass = index % 5 === 0 ? 'border-left' : '';
                                    tbody += `<td class="asistencia-cell ${borderClass}">${asistencia.presencias}</td>`;
                                    tbody += `<td class="asistencia-cell">${asistencia.tardias}</td>`;
                                    tbody += `<td class="asistencia-cell">${asistencia.ausencias}</td>`;
                                    tbody += `<td class="asistencia-cell">${asistencia.justificadas}</td>`;
                                    tbody += `<td class="asistencia-cell ${index === fechas.length - 1 ? 'border-right' : ''}">${asistencia.escapadas}</td>`;

                                    // Sumar los totales
                                    totalPresencias += asistencia.presencias;
                                    totalTardias += asistencia.tardias;
                                    totalAusencias += asistencia.ausencias;
                                    totalJustificadas += asistencia.justificadas;
                                    totalEscapadas += asistencia.escapadas;
                                });

                                // Calcular los totales de clases y los porcentajes
                                let totalClases = totalPresencias + totalTardias + totalAusencias + totalJustificadas + totalEscapadas;

                                let presenciasPct = totalClases ? (totalPresencias / totalClases * 100).toFixed(1) : 0;
                                let ausenciasPct = totalClases ? (totalAusencias / totalClases * 100).toFixed(1) : 0;
                                let tardiasPct = totalClases ? (totalTardias / totalClases * 50).toFixed(1) : 0; // Cada tardanza cuenta como 0.5 ausencias
                                let ausenciasTardiasPct = parseFloat(ausenciasPct) + parseFloat(tardiasPct);

                                // Calcular la nota de asistencia
                                let porcentaje_nota = parseFloat(response.porcentaje_nota); // Nota en el componente de asistencia de esa materia
                                let nota_asistencia = 0;
                                if (ausenciasTardiasPct <= 1) {
                                    nota_asistencia=(totalPresencias>0)?porcentaje_nota:0;
                                } else if (ausenciasTardiasPct > 1 && ausenciasTardiasPct <= 10) {
                                    nota_asistencia = porcentaje_nota - 1;
                                } else if (ausenciasTardiasPct > 10 && ausenciasTardiasPct <= 20) {
                                    nota_asistencia = porcentaje_nota - 2;
                                } else if (ausenciasTardiasPct > 20 && ausenciasTardiasPct <= 30) {
                                    nota_asistencia = porcentaje_nota - 3;
                                } else if (ausenciasTardiasPct > 30 && ausenciasTardiasPct <= 40) {
                                    nota_asistencia = porcentaje_nota - 4;
                                } else if (ausenciasTardiasPct > 40 && ausenciasTardiasPct <= 50) {
                                    nota_asistencia = porcentaje_nota - 5;
                                }else if (ausenciasTardiasPct > 50 && ausenciasTardiasPct <= 60) {
                                    nota_asistencia = porcentaje_nota - 6;
                                }else if (ausenciasTardiasPct > 60 && ausenciasTardiasPct <= 70) {
                                    nota_asistencia = porcentaje_nota - 7;
                                }else if (ausenciasTardiasPct > 70 && ausenciasTardiasPct <= 80) {
                                    nota_asistencia = porcentaje_nota - 8;
                                }else if (ausenciasTardiasPct > 80 && ausenciasTardiasPct <= 90) {
                                    nota_asistencia = porcentaje_nota - 9;
                                }else if (ausenciasTardiasPct > 90) {
                                    nota_asistencia = 0;
                                }


                                tbody += `<td width="200px" class="asistencia-cell border-left">${totalPresencias}</td>`;
                                tbody += `<td width="100px" class="asistencia-cell">${totalTardias}</td>`;
                                tbody += `<td width="100px" class="asistencia-cell">${totalAusencias}</td>`;
                                tbody += `<td width="100px" class="asistencia-cell">${totalJustificadas} </td>`;
                                tbody += `<td width="100px" class="asistencia-cell border-right">${totalEscapadas}</td>`;
                                tbody += `<td width="200px" class="asistencia-cell border-left">${ausenciasTardiasPct}%</td>`;
                                tbody += `<td width="200px" class="asistencia-cell border-left">${nota_asistencia}</td>`;


                                tbody += '</tr>';
                            };
                            tbody += '</tbody>';
                            $('#tabla').append(tbody);
                        },
                        error: function (error) {
                            console.log(error);
                        }
                    });
                }
            });

            $('#btnExportar').on('click', function () {
                let grupo_id = $("#grupo_id").val();
                let modulo_id = $("#modulo_id").val();
                let fecha_i = $("#fecha_i").val();
                let fecha_f = $("#fecha_f").val();

                if (grupo_id !== "") {
                    let url = "{{ route('profesor::asistencia.reporte.modulo.exportar', ['grupo' => ':grupo', 'modulo' => ':modulo', 'fecha_i' => ':fecha_i', 'fecha_f' => ':fecha_f']) }}"
                        .replace(":grupo", grupo_id)
                        .replace(":modulo", modulo_id)
                        .replace(":fecha_i", fecha_i)
                        .replace(":fecha_f", fecha_f);
                    window.open(url, '_blank');
                }
            });
        });
    </script>

@endsection