@extends("admin.layout.layout")
@section("styles")
    @php
        $titulo = "Notas";
        $modulo = "Notas";
        $vista="Ingreso de Notas";
    @endphp
    <title>{{getenv("APP_NAME")}} | {{$titulo}}</title>

    <style>
        .custom-table tbody tr:hover {
            background-color: #9cf3d4; /* Cambia este color al que desees */
            transition: background-color 0.3s ease; /* Agrega transición para suavizar el cambio */
        }
        .custom-column {
            min-width: 100px; /* Ancho mínimo deseado */
        }
        .numero{
            text-align: right;
        }
        th{
            text-align: center;
        }
        .btnAmpliacion{
            cursor: pointer;
        }
    </style>
@endsection

@section("contenido")
    <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"  id="cardHeader">
                    <div class="card-title w-100 d-flex justify-content-between">
                        <h3 class="card-label" id="cardTitle">{{$vista}}</h3>
                        <div id="divCerrarNotas" style="display: none">
                            <button type="button" class="btn btn-sm btn-success mx-1" id="btnCerrarNotas">
                                <i class="fas fa-check-double"></i> Calcular condiciones por estudiante
                            </button>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row mb-5">
                        <div class="col-md-2">
                            <div class="form-group">
                                <label for="periodo_id" class="required">Periodo</label>
                                <select name="periodo_id" id="periodo_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-2">
                            <div class="form-group">
                                <label for="satelite_id" class="required">Satelite</label>
                                <select name="satelite_id" id="satelite_id" class="form-select form-select-sm">
                                    <option>-</option>
                                    @foreach($satelites as $satelite)
                                        <option value="{{$satelite->id}}">{{$satelite->satelite}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <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">
                                </select>
                            </div>
                        </div>
                        <div class="col-md-5">
                            <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-1">
                            <button class="btn btn-info btn-sm mt-6" id="btnBuscar"> <i class="fas fa-search"></i></button>
                        </div>
                    </div>

                    <form method="post" id="frmNotas">
                        <div class="row">
                            <div class="table-responsive">
                                <table id="tabla" class="table table-condensed table-hover table-sm table-bordered custom-table ">
                                    <thead><tr><th>Estudiante</th></tr></thead>

                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>
                        <div class="row">
                            <button style="display: none" type="submit" id="btnSubmit" class="btn btn-success btn-sm"><i class="fas fa-save pe-2"></i>Guardar notas</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    @include("profesor.notas.modal.ampliacion_modal")
@endsection
@section("scripts")
    <script>
        $(document).ready(function () {
            let cambiosSinGuardar = false;

            $('#periodo_id, #satelite_id').on('change', function () {
                let periodo_id=$("#periodo_id").val();
                let satelite_id=$("#satelite_id").val();
                $("#grupo_id").empty();
                $("#modulo_id").empty();
                limpiar();

                if(periodo_id !=="" && satelite_id !==""){
                    let url="{{ route('admin::grupos.get.por.satelite.periodo',['satelite'=>':satelite','periodo'=>':periodo']) }}".replace(":satelite",satelite_id).replace(":periodo",periodo_id);
                    $.ajax({
                        url: url,
                        type: 'GET',
                        dataType: 'json',
                        success: function (response) {
                            $('#grupo_id').append('<option value="">-</option>');
                            $.each(response.grupos, function (index, grupo) {
                                $('#grupo_id').append('<option value="' + grupo.id + '">' + grupo.grupo + '</option>');
                            });
                        },
                        error: function (error) {
                            console.log(error);
                        }
                    });
                }
            })

            $('#grupo_id').on('change', function () {
                let grupo_id=$("#grupo_id").val();
                $('#modulo_id').empty();
                limpiar();
                if(grupo_id !==""){
                    let url="{{ route('admin::modulos.grupo',['grupo'=>':grupo']) }}".replace(":grupo",grupo_id);
                    $.ajax({
                        url: url,
                        type: 'GET',
                        dataType: 'json',
                        success: function (response) {
                            $('#modulo_id').append('<option value="">-</option>');
                            $.each(response, function (index, modulo) {
                                $('#modulo_id').append('<option value="' + modulo.id + '">' + 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();
                $("#tabla tbody").empty(); // Limpia el cuerpo de la tabla

                if (grupo_id && modulo_id) {
                    let url = "{{ route('admin::notas.getEstudiantesModuloGrupo',['grupo'=>':grupo','modulo'=>':modulo']) }}".replace(":grupo", grupo_id).replace(":modulo", modulo_id);
                    $.ajax({
                        url: url,
                        type: 'GET',
                        dataType: 'json',
                        success: function (response) {
                            let tablaBody = $("#tabla tbody");
                            let tablaHeader = $("#tabla thead tr");

                            // Limpiar solo los encabezados de componentes (excepto el primero)
                            tablaHeader.find("th:gt(0)").remove(); // Eliminar encabezados excepto el primero

                            if (response.data.length > 0) {
                                let componentes = response.tiposComponentes;
                                let headerHtml = '';

                                // Crear nuevos encabezados
                                componentes.forEach(componente => {
                                    headerHtml += `<th>${componente.componente.tipo_componente} <br> <span class="text-primary">${componente.porcentaje}%</span></th>`;
                                });

                                headerHtml += '<th>Total</th>';


                                // Añadir nuevos encabezados al thead
                                tablaHeader.append(headerHtml);

                                // Limpiar el cuerpo de la tabla antes de agregar nuevas filas
                                tablaBody.empty();

                                response.data.forEach(linea => {
                                    let estudiante = linea.matricula.estudiante;
                                    let rowHtml = `<tr class="filaEstudiante">
                                        <td>${estudiante.nombre_completo}
                                            <input type="hidden" name="matricula_modulo_id[${estudiante.id}]" id="matricula_modulo_id_${linea.id}" value="${linea.id}" required readonly>
                                         </td>`;

                                    componentes.forEach(componente => {
                                        let tipo_componente_id = componente.componente.id;
                                        let notaEncontrada = false;

                                        linea.notas.forEach(nota => {
                                            if (nota.tipo_componente_id == tipo_componente_id) {
                                                rowHtml += `<td><input inputmode="decimal" pattern="[0-9]*[.,]?[0-9]+" type="number" step="any" name="notas[${estudiante.id}][${tipo_componente_id}]" class="form-control form-control-sm nota numero nota" max="${componente.porcentaje}" maxlength="3" value="${nota.nota !== null ? nota.nota : ''}"></td>`;
                                                notaEncontrada = true;
                                            }
                                        });

                                        if (!notaEncontrada) {
                                            rowHtml += `<td><input inputmode="decimal" pattern="[0-9]*[.,]?[0-9]+" type="number" step="any" name="notas[${estudiante.id}][${tipo_componente_id}]" class="form-control form-control-sm nota numero nota" max="${componente.porcentaje}" maxlength="3"></td>`;
                                        }
                                    });

                                    rowHtml += `<td><input step="any" type="text" value="${linea.total}" class="form-control form-control-sm numero lineaTotal" readonly /></td>`;

                                    if (linea.tipo_calificacion) {
                                        rowHtml += `<td>
                                            <span class="badge badge-${linea.tipo_calificacion.color}">${linea.tipo_calificacion.tipo_calificacion}</span>
                                        </td>`;
                                    } else {
                                        rowHtml += '<td> <span class="badge badge-primary">Sin definir</span></td>';
                                    }

                                    if (linea.tipo_calificacion_id === 4) {
                                        rowHtml += `<td>
                                            <span class="badge badge-info btnAmpliacion"  data-matricula-modulo-id="${linea.id}" data-nombre="${estudiante.nombre_completo}"  data-nota-final="${linea.nota}">Ampliación</span></td>`;
                                    } else {
                                        rowHtml += '<td></td>'; // Celda vacía si no es tipo 4
                                    }



                                    rowHtml += '</tr>';
                                    tablaBody.append(rowHtml);
                                    // Registrar eventos de cambio en los inputs de notas para recalcular los totales
                                    $('input.nota').on('change', function () {
                                        let $fila = $(this).closest('.filaEstudiante');
                                        actualizarTotal($fila);
                                    });
                                });
                            } else {
                                tablaBody.append('<tr><td colspan="100%">No hay estudiantes en este grupo y módulo.</td></tr>');
                            }
                            $("#btnSubmit").show();
                            // if(!response.cerrado) {
                            //     $("#divCerrarNotas").show();
                            // }else{
                            //     $("#divCerrarNotas").hide();
                            // }
                            $("#divCerrarNotas").show();
                        },

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

            //on document submit frmNotas
            $("#frmNotas").on("submit", function (e) {
                e.preventDefault();
                let url = "{{ route("admin::notas.guardar",["grupo"=>":grupo","modulo"=>":modulo", "periodo"=>":periodo"]) }}";
                let url_submit=url.replace(":grupo",$("#grupo_id").val()).replace(":modulo",$("#modulo_id").val()).replace(":periodo",$("#periodo_id").val());
                let data = $(this).serialize();
                //disable submit button
                $("#btnSubmit").prop("disabled", true);
                $.ajax({
                    url: url_submit,
                    type: 'POST',
                    data: data,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function (response) {
                        if (response.success) {
                            toastr.success(response.message);
                        } else {
                            toastr.error(response.message);
                        }
                        $("#btnSubmit").prop("disabled", false);

                        cambiosSinGuardar = false;
                        $("#cardHeader").removeClass("bg-warning");
                        $("#cardTitle").removeClass("text-white");
                        $("#cardTitle").addClass("text-success");
                        $("#btnCerrarNotas").attr("disabled", false);
                    },
                    error: function (error) {
                        toastr.error(error);
                        $("#btnSubmit").prop("disabled", false);

                    }
                });
            });

            function limpiar(){
                let tablaBody = $("#tabla tbody");
                let tablaHeader = $("#tabla thead tr");
                tablaBody.empty(); // Limpia el cuerpo de la tabla
                tablaHeader.find("th:gt(0)").remove(); // Eliminar encabezados excepto el primero
                //ocultar el submit
                $("#btnSubmit").hide();
                $("#divCerrarNotas").hide();
            }


            //calcular totales
            function actualizarTotal($fila) {
                let sumaTotal = 0;

                // Iterar sobre cada input de nota dentro de la fila y sumar los valores
                $fila.find('.nota').each(function () {
                    var valor = parseFloat($(this).val()); // Obtener el valor ingresado como número

                    if (isNaN(valor)) {
                        valor = 0; // Si no es un número, considerarlo como 0
                    }
                    sumaTotal += valor; // Sumar el valor al total
                });

                sumaTotal = parseFloat(sumaTotal.toFixed(2)); // Redondear a 2 decimales
                $fila.find('.lineaTotal').val(sumaTotal); // Actualizar el campo total

                // Si la suma es NaN, restablecer el valor a 0 (seguridad adicional)
                if (isNaN(sumaTotal)) {
                    $fila.find('.lineaTotal').val(0);
                }
            }

            $(document).on("change", ".nota", function () {
                cambiosSinGuardar = true;
                $("#cardHeader").addClass("bg-warning");
                $("#cardTitle").addClass("text-white");
                $("#cardTitle").removeClass("text-primary");
                $("#btnCerrarNotas").attr("disabled", true);
            });


            $("#btnCerrarNotas").on("click", function (event) {
                let valid = true;

                // Recorre cada input de lineaTotal y verifica su valor
                $(".lineaTotal").each(function () {
                    let valorTotal = parseFloat($(this).val());
                    if (isNaN(valorTotal) || valorTotal <= 0) {
                        valid = false;
                        $(this).addClass("is-invalid");
                        $(this).closest('tr').addClass("tr-invalid");

                    } else {
                        $(this).removeClass("is-invalid");
                        $(this).closest('tr').removeClass("tr-invalid");
                    }
                });

                if (!valid) {
                    event.preventDefault(); // Evita que se ejecute la acción del botón
                    Swal.fire({icon: 'error', title: 'Advertencia', text: 'Hay notas sin ingresar.',});
                } else {

                    Swal.fire({
                        title: "¿Está seguro de cerrar notas?",
                        showDenyButton: true,
                        icon: "question",
                        showCancelButton: false,
                        confirmButtonText: "Cerrar",
                        denyButtonText: "No, cancelar",
                        confirmButtonColor: "#025d14",
                    }).then((result) => {
                        if (result.isConfirmed) {
                            let url="{{route("admin::notas.cerrar",["grupo"=>":grupo","modulo"=>":modulo", "periodo"=>":periodo"])}}".replace(":grupo",$("#grupo_id").val()).replace(":modulo",$("#modulo_id").val()).replace(":periodo",$("#periodo_id").val());
                            $.ajax({
                                headers: {
                                    'X-CSRF-TOKEN':"{{ csrf_token() }}"
                                },
                                url: url,
                                type: 'POST',
                                dataType: 'json',
                                success: function (response) {
                                    if(response.res){
                                        $("#btnBuscar").trigger("click");
                                    }else{
                                        Swal.fire('Ocurrió un error', response, 'error');
                                    }
                                },
                                error: function (error) {
                                    Swal.fire('Ocurrió un error', error, 'error');
                                }
                            });
                        }
                    });
                }
            });

            $(document).on("click", ".btnAmpliacion", function () {
                let matricula_modulo_id = $(this).data("matricula-modulo-id");
                let nombre = $(this).data("nombre");
                let notaFinal = $(this).data("nota-final");
                $(".lblEstudiante").text(nombre);
                $(".lblNotaFinal").text(notaFinal);
                //poner el accion del formulario
                $("#frmAmpliacion").attr("action", "{{route("admin::notas.guardarAmpliacion",[":matricula_modulo_id"])}}".replace(":matricula_modulo_id", matricula_modulo_id));
                $.ajax({
                    url: "{{route("admin::get.notas.matriculaModulo",[":matricula_modulo_id"])}}".replace(":matricula_modulo_id", matricula_modulo_id),
                    type: "GET",
                    dataType: "json",
                    success: function (response) {
                        $(".lblNotaAmpliacion").val(response.nota_ampliacion);
                        $(".lblNotaAmpliacion2").val(response.nota_ampliacion_2);
                        $(".lblNotaEstrategiaPromocion").val(response.nota_estrategia_promocion);

                        $("#ampliacionModal").modal({backdrop: 'static', keyboard: false}).modal('show');
                    },
                    error: function (error) {
                        Swal.fire('Ocurrió un error', error, 'error');
                    }
                });


            });


            $(document).on("submit", "#frmAmpliacion", function (e) {
                e.preventDefault();
                let data = $(this).serialize();
                let url = $(this).attr("action");
                //disable submit button
                $("#btnSubmitAmpliacion").prop("disabled", true);
                $.ajax({
                    url: url,
                    type: 'POST',
                    data: data,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function (response) {
                        if (response.success) {
                           $("#btnBuscar").trigger("click");
                            toastr.success(response.message);
                            $("#ampliacionModal").modal("hide");
                        } else {
                            toastr.error(response.message);
                        }
                        $("#btnSubmitAmpliacion").prop("disabled", false);

                    },
                    error: function (error) {
                        toastr.error(error);
                        $("#btnSubmitAmpliacion").prop("disabled", false);

                    }
                });


            })

            // Función para mostrar una alerta si hay cambios sin guardar al intentar salir de la página
            window.onbeforeunload = function () {
                if (cambiosSinGuardar) {
                    return "Tienes cambios sin guardar. ¿Estás seguro de que quieres abandonar la página?";
                }
            };


        });
    </script>
@endsection