@extends("admin.layout.layout")
@section("styles")
    @php
        $titulo = "Ingreso notas Admin";
        $modulo = "Notas";
        $vista="Ingreso notas Admin";
    @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>
                <form id="formNotas" action="{{ route('admin::notas.guardar') }}" method="POST">
                    @csrf
                    <div class="card-body table-responsive">
                        <div class="row mb-5">
                            <div class="col-md-1">
                                <div class="form-group">
                                    <label for="curso_lectivo_id" class="required">Curso lectivo</label>
                                    <select name="curso_lectivo_id" id="curso_lectivo_id" class="form-select form-select-sm">
                                        @foreach($cursos_lectivos as $curso_lectivo)
                                            <option value="{{$curso_lectivo->id}}">{{$curso_lectivo->curso_lectivo}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2" title="Periodo">
                                <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-1">
                                <div class="form-group">
                                    <label for="nivel_id" class="required">Nivel</label>
                                    <select name="nivel_id" id="nivel_id" class="form-select form-select-sm">
                                        <option value="">-</option>
                                        @foreach($niveles as $nivel)
                                            <option value="{{$nivel->id}}">{{$nivel->nivel}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-1" title="Plan Nacional">
                                <div class="form-group">
                                    <label for="plan_nacional" class="required">PN</label>
                                    <select name="plan_nacional" id="plan_nacional" class="form-select form-select-sm">
                                        <option value="0">NO</option>
                                        <option value="1">SI</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-1">
                                <div class="form-group">
                                    <label for="seccion_id" class="required">Sección</label>
                                    <select name="seccion_id" id="seccion_id" class="form-select form-select-sm">
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="materia_id" class="required">Materia</label>
                                    <select name="materia_id" id="materia_id" class="form-select form-select-sm">
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-1 divGrupo" style="display: none">
                                <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-1" >
                                <button type="button" class="btn btn-info btn-sm mt-6" id="btnBuscar"> <i class="fas fa-search"></i></button>
                            </div>
                        </div>
                        <table class="table table-hover table-condensed table-sm table-bordered" id="tablaNotas">
                            <thead><tr><th>Estudiante</th></tr></thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </form>
            </div>
        </div>
    </div>
    @include("profesor.notas.modal.ampliacion_modal")
@endsection
@section("scripts")
    <script>
        $(document).ready(function () {
            let cambiosSinGuardar = false;


            $('#curso_lectivo_id, #nivel_id, #plan_nacional').on('change', function () {
                let curso_lectivo_id=$("#curso_lectivo_id").val();
                let nivel_id=$("#nivel_id").val();
                let planNacional=$("#plan_nacional").val();
                $('#seccion_id').empty();
                $('#materia_id').empty();
                //limopiar tabla
                limpiar()


                if(nivel_id!==""){
                    let url="{{ route('admin::secciones.nivel',["nivel"=>':nivel',"planNacional"=>":planNacional"]) }}".replace(":nivel",nivel_id).replace(":planNacional",planNacional);
                    $.ajax({
                        url: url,
                        type: 'GET',
                        data: {curso_lectivo_id: curso_lectivo_id},
                        success: function (response) {
                            $('#seccion_id').append('<option value="">-</option>');
                            $.each(response, function (index, seccion) {
                                $('#seccion_id').append('<option value="' + seccion.id + '">' + seccion.seccion + '</option>');
                            });
                        },
                        error: function (error) {
                            console.log(error);
                        }
                    });
                }
            })

            $('#seccion_id').on('change', function () {
                let seccion_id=$(this).val();
                $('#materia_id').empty();
                $('.divGrupo').hide();
                //limopiar tabla
                $("#tablaNotas tbody").empty();
                $("#divCerrarNotas").hide();

                if(seccion_id!==""){
                    let url="{{ route('admin::seccion.getMaterias',["seccion"=>":seccion"]) }}".replace(":seccion",seccion_id);
                    $.ajax({
                        url: url,
                        type: 'GET',
                        success: function (response) {
                            $('#materia_id').append('<option value="">-</option>');
                            $.each(response, function (index, materia) {
                                $('#materia_id').append('<option value="' + materia.id+ '">' + materia.materia + '</option>');
                            });
                        },
                        error: function (error) {
                            console.log(error);
                        }
                    });
                }
            })
            $('#curso_lectivo_id').on('change', function () {
                let curso_lectivo_id=$("#curso_lectivo_id").val();
                let url="{{route("admin::periodo.get.cursolectivo",":curso_lectivo")}}".replace(":curso_lectivo",curso_lectivo_id);
                $.ajax({
                    url: url,
                    type: 'GET',
                    success: function (response) {
                        $('#periodo_id').empty();
                        $("#divCerrarNotas").hide();

                        $.each(response, function (index, periodo) {
                            $('#periodo_id').append('<option value="' + periodo.id + '">' + periodo.periodo + '</option>');
                        });
                    },
                    error: function (error) {
                        console.log(error);
                    }
                });
            });

            $('#materia_id').on('change', function () {
                let materia_id=$(this).val();
                let seccion_id=$("#seccion_id").val();
                $('#grupo_id').empty();
                //limopiar tabla
                $("#tablaNotas tbody").empty();
                $("#divCerrarNotas").hide();

                if(materia_id!==""){
                    let url="{{ route('admin::seccion.getGruposMateria',["seccion"=>":seccion","materia"=>":materia"]) }}".replace(":seccion",seccion_id).replace(":materia",materia_id);
                    $.ajax({
                        url: url,
                        type: 'GET',
                        success: function (response) {
                            if(response.length>0) {
                                $('.divGrupo').show();
                                $.each(response, function (index, grupo) {
                                    $('#grupo_id').append('<option value="' + grupo.id + '">' + grupo.grupo + '</option>');
                                });
                            }else{
                                $('.divGrupo').hide();
                            }
                        },
                        error: function (error) {
                            console.log(error);
                        }
                    });
                }
            })

            $('#periodo_id').on('change', function () {
                limpiar();
            });

                ///////////////////
            $('#btnBuscar').on('click', function () {
                let seccion_id = $("#seccion_id").val();
                let materia_id = $("#materia_id").val();
                let periodo_id = $("#periodo_id").val();
                let grupo_id = $("#grupo_id").val(); // Opcional si existe grupo
                limpiar();

                let url = "{{ route('admin::notas.getEstudiantesMateriaSeccion', ['seccion' => ':seccion', 'materia' => ':materia', 'periodo' => ':periodo']) }}"
                    .replace(":seccion", seccion_id)
                    .replace(":materia", materia_id)
                    .replace(":periodo", periodo_id);

                if (seccion_id && materia_id && periodo_id) {
                    if(grupo_id){
                        url = "{{ route('admin::notas.getEstudiantesMateriaSeccion', ['seccion' => ':seccion', 'materia' => ':materia', 'periodo' => ':periodo', 'grupo' => ':grupo']) }}"
                            .replace(":seccion", seccion_id)
                            .replace(":materia", materia_id)
                            .replace(":periodo", periodo_id)
                            .replace(":grupo", grupo_id);
                    }
                    console.log(url);
                    $.ajax({
                        url: url,
                        type: 'GET',
                        dataType: 'json',
                        success: function (response) {
                            let tablaBody = $("#tablaNotas tbody");
                            let tablaHeader = $("#tablaNotas thead tr");

                            // Limpiar encabezados existentes excepto el primero
                            tablaHeader.find("th:gt(0)").remove();

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

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

                                headerHtml += '<th>Total</th>';
                                headerHtml += '<th>Calificación</th>';
                                headerHtml += '<th>Ampliación</th>';

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

                                // Iterar sobre estudiantes y construir las filas
                                response.data.forEach(matricula => {
                                    let estudiante = matricula.matricula.estudiante;
                                    let rowHtml = `<tr class="filaEstudiante">
                                    <td>${estudiante.nombre_completo}
                                        <input type="hidden" name="matricula_materia_id[${estudiante.id}]" id="matricula_materia_id_${matricula.id}" value="${matricula.id}" required readonly>
                                    </td>`;

                                    // Añadir celdas dinámicas para cada componente
                                    componentes.forEach(componente => {
                                        let tipo_componente_id = componente.componente.id;
                                        let nota = matricula.notas.find(n => n.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" max="${componente.porcentaje}" value="${nota ? nota.nota : ''}">
                                        </td>`;
                                    });

                                    // Total y calificación
                                    rowHtml += `<td>
                                        <input tabindex="-1" step="any" type="text" value="${matricula.total || ''}" class="form-control form-control-sm numero lineaTotal  bg-secondary" readonly />
                                    </td>`;

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

                                    // Ampliación
                                    if (matricula.tipo_calificacion_id === 4 || matricula.ampliacion) {
                                        rowHtml += `<td>
                                            <span class="badge badge-info btnAmpliacion" data-matricula-materia-id="${matricula.id}" data-nombre="${estudiante.nombre_completo}" data-nota-final="${matricula.nota}">Ampliación</span>
                                        </td>`;
                                    } else {
                                        rowHtml += '<td></td>';
                                    }

                                    rowHtml += '</tr>';
                                    tablaBody.append(rowHtml);
                                });

                                // Añadir botón de guardar si no existe
                                if (!$('#btnGuardar').length) {
                                    $("#tablaNotas").after(`<div class="mt-3 text-center">
                                        <button id="btnGuardar" class="btn btn-success">Guardar Cambios</button>
                                    </div>`);
                                }
                                $("#divCerrarNotas").show();


                            } else {
                                // Si no hay datos
                                tablaBody.append('<tr><td colspan="100%">No hay estudiantes en esta sección y materia.</td></tr>');
                            }

                        },
                        error: function (error) {
                            console.error("Error al cargar los estudiantes:", error);
                            Swal.fire('Error', 'No se pudieron cargar los datos, inténtelo de nuevo.', 'error');
                        }
                    });
                } else {
                    Swal.fire('Advertencia', 'Debe seleccionar sección, materia y período.', 'warning');
                }
            });



            $('#formNotas').on('submit', function (e) {
                e.preventDefault(); // Prevenir el envío normal del formulario
                //bloquear boton sumit
                $('#btnGuardar').prop('disabled', true);
                $("#btnCerrarNotas").attr("disabled", true);

                let formData = $(this).serialize(); // Serializa los datos del formulario

                $.ajax({
                    url: $(this).attr('action'), // Usar la acción del formulario
                    type: 'POST',
                    data: formData,
                    success: function (response) {
                        Swal.fire('Éxito', 'Notas guardadas correctamente.', 'success');
                        $('#btnGuardar').prop('disabled', false); // Deshabilitar botón después de guardar
                        $("#btnCerrarNotas").attr("disabled", false);
                        cambiosSinGuardar = false;
                    },
                    error: function (error) {
                        Swal.fire('Error', 'No se pudieron guardar las notas.', 'error');
                        console.error(error);
                        $('#btnGuardar').prop('disabled', false); // Deshabilitar botón después de guardar
                        $("#btnCerrarNotas").attr("disabled", false);
                    }
                });
            });


            $(document).on('change', 'input.nota', function () {
                let $fila = $(this).closest('.filaEstudiante');
                actualizarTotal($fila);
            });


            function actualizarTotal($fila) {
                let sumaTotal = $fila.find('.nota').toArray().reduce((total, input) => {
                    let valor = parseFloat($(input).val());
                    return total + (isNaN(valor) ? 0 : valor);
                }, 0);

                sumaTotal = parseFloat(sumaTotal.toFixed(2)); // Redondea a 2 decimales
                $fila.find('.lineaTotal').val(sumaTotal || 0);
            }

        });


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

            if (!$('#btnGuardar').length) {
                $("#tablaNotas").after(`<div class="mt-3 text-center">
                    <button id="btnGuardar" class="btn btn-success">Guardar Cambios</button>
                </div>`);
            }
            $('#btnGuardar').prop('disabled', false);
        });


        ///////////////////////////////
        $(document).on("click", ".btnAmpliacion", function () {
            let matricula_materia_id = $(this).data("matricula-materia-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_materia_id"])}}".replace(":matricula_materia_id", matricula_materia_id));
            $.ajax({
                url: "{{route("admin::get.notas.matriculaMateria",[":matricula_materia_id"])}}".replace(":matricula_materia_id", matricula_materia_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);

                }
            });


        })

        /////
        $(document).on("click", "#btnCerrarNotas", function () {
            let valid = true;
            let seccion = $("#seccion_id").val();
            let materia = $("#materia_id").val();
            let periodo = $("#periodo_id").val();
            let grupo = $("#grupo_id").val();

            // 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 recalcular las notas?",
                    showDenyButton: true,
                    icon: "question",
                    showCancelButton: false,
                    confirmButtonText: "Re calcular",
                    denyButtonText: "No, cancelar",
                    confirmButtonColor: "#025d14",
                }).then((result) => {
                    if (result.isConfirmed) {
                        let url = "{{route("admin::notas.cerrar",["seccion"=>":seccion","materia"=>":materia","periodo"=>":periodo"])}}".replace(":seccion", seccion).replace(":materia", materia).replace(":periodo", periodo);
                        //falta si se slecciona grupo
                        if (grupo) {
                            url = "{{route("admin::notas.cerrar",["seccion"=>":seccion","materia"=>":materia","periodo"=>":periodo","grupo"=>":grupo"])}}".replace(":seccion", seccion).replace(":materia", materia).replace(":periodo", periodo).replace(":grupo", grupo);
                        }
                        $.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');
                            }
                        });
                    }
                });
            }
        });

        function limpiar(){
            $("#tablaNotas tbody").empty();
            $("#divCerrarNotas").hide();
            if ($('#btnGuardar').length) {
                $('#btnGuardar').remove();
            }
        }

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