@extends("profesor.layout.layout")

@section("styles")
    @php
        $titulo = "Notas";
        $modulo = "Ingreso de notas ". $periodo->periodo;
        $vista = "Ingreso de notas por sección";
    @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;
        }
    </style>
@endsection

@section("contenido")
    <div class="row gx-5 gx-xl-10 align-items-stretch">
        <div class="card">
            <div class="card-header d-flex align-items-center justify-content-between" id="cardHeader">
                <h5 class="text-primary card-title mb-0" id="cardTitle">{{ $seccion->seccion }} / {{ $materia->materia }} {{ ($grupo) ? " / " . $grupo->grupo : "" }}</h5>
                <a href="{{route("profesor::notas.misMaterias.seccion",$seccion)}}" class="text-info">Volver</a>


                <div class="ms-auto">
                    <a class="btn btn-sm btn-success mx-1" title="Exportar archivo para SEA" href="{{ route('profesor::notas.exportar.sea', ['seccion' => $seccion, 'materia' => $materia, 'periodo' => $periodo, 'grupo' => $grupo]) }}">
                        <i class="fas fa-file-csv"></i>
                    </a>
                    <a class="btn btn-sm btn-danger mx-1" target="_blank" title="PDF de acta" href="{{ route('profesor::notas.actaPdf', ['seccion' => $seccion, 'materia' => $materia, 'periodo' => $periodo, 'grupo' => $grupo]) }}">
                        <i class="fas fa-file-pdf"></i>
                    </a>
                    @if(!$cerrado)
                        <button type="button" class="btn btn-sm btn-secondary mx-1" id="btnModalImportar"> <i class="fas fa-file-import"></i> Importar registro SEA</button>

                        <button type="button" class="btn btn-sm btn-success mx-1" id="btnCerrarNotas"> <i class="fas fa-check-double"></i> Cerrar Notas</button>
                    @else
                        <span title="Solicite a la dirección en caso de necesitar editar" class="badge badge-info">Notas cerradas</span>
                    @endif
                </div>
            </div>
            <div class="card-body">
                @if ($errors->any())
                    <div class="alert alert-danger">
                        <h4>El registro tiene los siguientes errores.</h4>
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                @if (session('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <strong>{{ session('success') }}</strong>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                <form action="{{ route("profesor::notas.guardar",["seccion"=>$seccion,"materia"=>$materia, "periodo"=>$periodo]) }}" method="post" id="formularioNotas">
                    @csrf
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered custom-table mt-2">
                            <thead>
                            <tr>
                                <td><b>#</b></td>
                                <td><b>Primer apellido</b></td>
                                <td><b>Segundo apellido</b></td>
                                <td><b>Nombres</b></td>
                                @foreach($componentes as $componente)
                                    <td class="text-center custom-column">
                                        <b>{{ $componente->componente->tipo_componente }} </b><br>
                                        <small class="text-info">{{ $componente->porcentaje }}%</small>
                                    </td>
                                @endforeach
                                <td class="text-center custom-column">
                                    <b>Total</b>
                                </td>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($estudiantes as $estudiante)
                                <tr class="filaEstudiante">
                                    <td title="{{ $estudiante->identificacion }}">{{ $loop->index + 1 }}
                                        <input type="hidden" name="matricula_materia_id[{{ $estudiante->id }}]" id="matricula_materia_id{{$estudiante->matricula_materia_id}}" value="{{$estudiante->matricula_materia_id}}" required readonly>
                                    </td>
                                    <td>{{ $estudiante->primer_apellido }}</td>
                                    <td>{{ $estudiante->segundo_apellido }}</td>
                                    <td>
                                        {{ $estudiante->nombre }}
                                        @if($estudiante->tipo_estado)
                                            @if($estudiante->tipo_estado->id==4 || $estudiante->tipo_estado->id==5)
                                                <span class="badge badge-danger">{{ $estudiante->tipo_estado->tipo_estado }}</span>
                                            @endif
                                        @endif

                                    </td>
                                    @foreach($componentes as $componente)
                                        @php
                                            $nota = isset($notas[$estudiante->id]) ? $notas[$estudiante->id]->firstWhere('tipo_componente_id', $componente->componente->id) : null;
                                        @endphp
                                        @if(!$estudiante->nota_periodo)
                                            <td class="text-center" width="15px">
                                                <input inputmode="decimal" pattern="[0-9]*[.,]?[0-9]+" type="number" step="any" name="notas[{{ $estudiante->id }}][{{ $componente->componente->id }}]" class="form-control form-control-sm nota numero" max="{{ $componente->porcentaje }}" maxlength="3" value="{{ $nota ? $nota->nota : '' }}">
                                            </td>
                                        @else
                                            <td class="text-center">
                                                {{$nota ? $nota->nota : ''}}
                                            </td>
                                        @endif
                                    @endforeach

                                    @if(!$estudiante->nota_periodo)
                                        <td width="15px"><input tabindex="-1" type="number" readonly class="form-control form-control-sm lineaTotal numero"></td>
                                    @else
                                        <td title="Nota periodo cerrada" class="text-center">{{$estudiante->nota_periodo}} <i class="ki-solid ki-check text-info"></i></td>
                                        @if($estudiante->tipo_calificacion)
                                            <td class="text-center">
                                                {{$estudiante->nota_final}} <span class="badge badge-{{$estudiante->tipo_calificacion->color}}">{{ $estudiante->tipo_calificacion->tipo_calificacion}}</span>
                                            </td>
                                        @endif

                                    @endif
                                    @if($estudiante->tipo_calificacion_id == 4 && $estudiante->tipo_estado->id==2 )
                                        <td>
                                            <span class="badge badge-info btnAmpliacion" data-matricula-materia-id="{{$estudiante->matricula_materia_id}}" data-nombre="{{$estudiante->nombre_completo}}" data-nota-final="{{$estudiante->nota_final}}">Ampliación</span>
                                        </td>
                                    @endif
                                    @if($estudiante->tipo_calificacion_id == 2  && $estudiante->ampliacion)
                                        <td>
                                            <span class="badge badge-info btnAmpliacionHistorial"data-matricula-materia-id="{{$estudiante->matricula_materia_id}}" data-nombre="{{$estudiante->nombre_completo}}" data-nota-final="{{$estudiante->nota_final}}">H. Ampliación</span>
                                        </td>
                                    @endif
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="row">
                        @if(!$cerrado)
                            <button type="submit" id="btnSubmit" class="btn btn-success btn-sm"><i class="fas fa-save pe-2"></i>Guardar notas</button>
                        @else
                            <p class="text-info text-center">Las notas están cerradas, si necesita realizar cambios solicite a la dirección.</p>
                        @endif
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="ModalImportar" tabindex="-1" aria-labelledby="ModalImportarLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="uploadModalLabel">Subir archivo</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="frmImportar" method="POST" enctype="multipart/form-data" action="{{ route("profesor::notas.importar.sea",["seccion"=>$seccion,"materia"=>$materia, "periodo"=>$periodo]) }}">
                    <div class="modal-body">
                        @csrf
                        <div class="mb-3">
                            <label for="fileInput" class="form-label">Selecciona un archivo</label>
                            <input class="form-control" type="file" id="archivo" name="archivo" required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                        <button type="submit" form="frmImportar" class="btn btn-primary">Subir</button>
                    </div>
                </form>

            </div>
        </div>
    </div>
    @include("profesor.notas.modal.ampliacion_modal")
    @include("profesor.notas.modal.ampliacion_historial_modal")
@endsection

@section("scripts")
    @vite('resources/js/app.js')
    <script>
        $(document).ready(function () {
            $('#formularioNotas').submit(function (event) {
                $("#btnSubmit").attr("disabled", true)
            });

            let inputsNotas = $('input[type="number"]');

            // Recorrer cada campo de entrada
            inputsNotas.each(function () {
                // Agregar evento change
                $(this).on('change', function () {
                    var valor = parseFloat($(this).val()); // Obtener el valor ingresado como número
                    var maximo = parseFloat($(this).attr('max')); // Obtener el valor máximo permitido

                    // Validar si el valor ingresado supera el máximo permitido
                    if (valor > maximo) {
                        $(this).val(maximo); // Establecer el valor máximo permitido
                        Swal.fire({icon: 'warning', title: 'Advertencia', text: 'El valor ingresado supera el máximo permitido'});
                    }

                    // Actualizar el total
                    actualizarTotal($(this).closest('.filaEstudiante'));
                });
            });

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

                $fila.find('.nota').each(function () {
                    var valor = parseFloat($(this).val()); // Obtener el valor ingresado como número

                    if (isNaN(valor)) {
                        valor = 0;
                    }
                    sumaTotal += valor; // Sumar el valor al total
                });

                sumaTotal = parseFloat(sumaTotal.toFixed(2));
                $fila.find('.lineaTotal').val(sumaTotal);


                // Restablecer el valor del campo total a cero si la suma es NaN (esto es una redundancia de seguridad)
                if (isNaN(sumaTotal)) {
                    $fila.find('.lineaTotal').val(0);
                }
            }


            // Calcular el total inicial para cada fila
            $('.filaEstudiante').each(function () {
                actualizarTotal($(this));
            });



            //recordatorio guardar
            let cambiosSinGuardar = false;

            // Agregar evento change a los campos de notas
            $('.nota').change(function () {
                cambiosSinGuardar = true;
                $("#cardHeader").addClass("bg-warning");
                $("#cardTitle").addClass("text-white");
                $("#cardTitle").removeClass("text-primary");
                $("#btnCerrarNotas").attr("disabled", true);

            });

            // Agregar evento submit al formulario
            $('#formularioNotas').submit(function () {
                // Reiniciar la bandera de cambios sin guardar al enviar el formulario
                cambiosSinGuardar = false;
                $("#cardHeader").removeClass("bg-warning");
                $("#cardTitle").removeClass("text-white");
                $("#cardTitle").addClass("text-primary");
            });

            // 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?";
                }
            };

            //on docuemtn click btnModalImportar
            $("#btnModalImportar").on("click", function () {
                $("#ModalImportar").modal("show");
            });


            $("#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?",
                        text: "Una vez cerradas las notas no podrá realizar cambios.",
                        showDenyButton: true,
                        icon: "question",
                        showCancelButton: false,
                        confirmButtonText: "Cerrar",
                        denyButtonText: "No, cancelar",
                        confirmButtonColor: "#025d14",
                    }).then((result) => {
                        if (result.isConfirmed) {
                            let url = "{{route("profesor::notas.cerrar",["seccion"=>$seccion,"materia"=>$materia, "periodo"=>$periodo, "grupo"=>$grupo])}}";
                            $.ajax({
                                headers: {
                                    'X-CSRF-TOKEN':"{{ csrf_token() }}"
                                },
                                url: url,
                                type: 'POST',
                                dataType: 'json',
                                success: function (response) {
                                    if(response.res){
                                        location.reload();
                                    }else{
                                        Swal.fire('Ocurrió un error', response, 'error');
                                    }
                                },
                                error: function (error) {
                                    Swal.fire('Ocurrió un error', error, 'error');
                                }
                            });
                        }
                    });
                }
            });

            $(".btnAmpliacion").on("click", 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("profesor::notas.guardarAmpliacion",[":matricula_materia_id"])}}".replace(":matricula_materia_id", matricula_materia_id));
                $.ajax({
                    url: "{{route("profesor::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');
                    }
                });


            });

            $(".btnAmpliacionHistorial").on("click", 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("profesor::notas.guardarAmpliacion",[":matricula_materia_id"])}}".replace(":matricula_materia_id", matricula_materia_id));
                $.ajax({
                    url: "{{route("profesor::get.notas.matriculaMateria",[":matricula_materia_id"])}}".replace(":matricula_materia_id", matricula_materia_id),
                    type: "GET",
                    dataType: "json",
                    success: function (response) {
                        $(".lblNotaAmpliacion").text(response.nota_ampliacion);
                        $(".lblNotaAmpliacion2").text(response.nota_ampliacion_2);
                        $(".lblNotaEstrategiaPromocion").text(response.nota_estrategia_promocion);

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


            });
        });

    </script>
@endsection