@extends("admin.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="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">
                                    <option value="">-</option>
                                </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, #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(":periodo",periodo_id).replace(":satelite",satelite_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();
                let periodo_id=$("#periodo_id").val();
                $('#modulo_id').empty();
                limpiar();
                if(grupo_id !==""){
                    let url="{{ route('admin::grupos.get.modulos',['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.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();
                            $("#divCerrarNotas").show();
                        },

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



            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("admin::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);

                    }
                });
            });
        });
    </script>
@endsection