@extends("profesor.layout.layout")
@section("styles")
    @php
        $titulo = "Notas por suficiencia";
        $modulo = "Notas";
        $vista="Ingreso de Notas por suficiencia";
    @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>
                </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="grupo_id" class="required">Grupo</label>
                                <select name="grupo_id" id="grupo_id" class="form-select form-select-sm">
                                    <option value="">-</option>
                                    @foreach($grupos as $grupo)
                                        <option value="{{$grupo->id}}">{{$grupo->grupo}}</option>
                                    @endforeach
                                </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>
                    <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>
            </div>
        </div>
    </div>
@endsection
@section("scripts")
    <script>
        $(document).ready(function () {
            let cambiosSinGuardar = false;

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

                if(periodo_id !==""){
                    let url="{{ route('profesor::listadoMisGrupos',":periodo_id") }}".replace(":periodo_id",periodo_id);
                    $.ajax({
                        url: url,
                        type: 'GET',
                        dataType: 'json',
                        success: function (response) {
                            $('#grupo_id').append('<option value="">-</option>');
                            $.each(response, 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('profesor::listadoMisModulos',['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.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();
                $("#tabla tbody").empty(); // Limpia el cuerpo de la tabla

                if (grupo_id && modulo_id) {
                    let url = "{{ route('profesor::notas.getEstudiantesModuloGrupoSuficiencia',['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 headerHtml = '';

                                headerHtml += '<th>Nota suficiencia</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>`;

                                    rowHtml += `<td width="100px"><input data-matricula-id="${linea.id}"  step="any" type="number" value="${(linea.nota)?linea.nota:''}" class="form-control form-control-sm numero nota" /></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>';
                                    }


                                    rowHtml += '</tr>';
                                    tablaBody.append(rowHtml);
                                    tablaBody.append('<tr><td colspan="100%" align="center"> <i class="ki-solid ki-information text-info"></i><small class="text-info">Al cambiar la nota y salir del campo se auto guarda</small></td></tr>');

                                });
                            } else {
                                tablaBody.append('<tr><td colspan="100%">No hay estudiantes en este grupo y módulo con suficiencia.</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();
            }




            $(document).on("change", ".nota", function () {
                let matricula_modulo_id = $(this).data("matricula-id");
                let nota = $(this).val();

                //nota debe ser entre 1 y 100
                if(nota<1 || nota>100){
                    toastr.error("La nota debe ser entre 1 y 100");
                    $(this).val("");
                    return;
                }

                cambiosSinGuardar = true;
                $("#cardHeader").addClass("bg-warning");
                $("#cardTitle").addClass("text-white");
                $("#cardTitle").removeClass("text-primary");

                //ajax para guardar la nota suficiencia en  nota.guardar.suficiencia

                let url="{{ route("profesor::nota.guardar.suficiencia",":matricula_modulo") }}".replace(":matricula_modulo",matricula_modulo_id);
                $.ajax({
                    url: url,
                    type: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': "{{ csrf_token() }}"
                    },
                    data: {nota: nota},
                    success: function (response) {
                        if (response.res) {
                            toastr.success(response.message);
                            $("#btnBuscar").trigger("click");
                        } else {
                            toastr.error(response.message);
                        }
                        cambiosSinGuardar = false;
                        $("#cardHeader").removeClass("bg-warning");
                        $("#cardTitle").removeClass("text-white");
                        $("#cardTitle").addClass("text-primary");
                    },
                    error: function (error) {
                        toastr.error(error);

                    }
                });
            });


            $("#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("profesor::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');
                                }
                            });
                        }
                    });
                }
            });


            // 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