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

    <style>
        .abrirNotaModulo, .btnAmpliacionHistorial{
            cursor: pointer;
        }
    </style>
@endsection

@section("contenido")
    <div id="kt_app_content_container" class="app-container container-fluid">
        @include("estudiante.perfil.components.header")
        @include("admin.estudiante.components.links")
        <div class="row g-5 g-xxl-12">
            <div class="col-xl-12">
                <div class="card mb-5 mb-xxl-12">
                    <div class="card-body pb-0">
                        <div class="row pb-5 ">
                            <div class="col-md-3">
                                <label for="curso_lectivo_id">
                                    <strong>Periodo:</strong>
                                </label>
                                <select name="periodo_id" id="periodo_id" class="form-select form-select-lg mt-1" required>
                                    <option value="">Seleccione</option>
                                    @foreach($periodos as $periodo)
                                        <option value="{{$periodo->id}}">{{$periodo->periodo}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6" id="divBotones">

                            </div>
                        </div>

                        <div class="row pb-5">
                            <div id="notas-container" class="col-md-12">
                                <!-- Las tablas de notas se insertarán aquí -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @include("profesor.notas.modal.ampliacion_historial_modal")
@endsection
@section("scripts")
    @vite(['resources/js/global/validaciones.js'])
    <script>
        $(document).ready(function () {
            $(document).on('change', '#periodo_id', function () {
                let periodo_id=$(this).val();

                if(periodo_id===""){
                    $('#notas-container').empty();
                    return;
                }

                let url="{{route("admin::notas.get.estudiante",["estudiante"=>$estudiante,"periodo"=>":periodo_id"])}}".replace(":periodo_id",periodo_id);

                let ajax= $.ajax({
                    url: url,
                    dataType: "json",
                })
                ajax.done(function (response) {
                    renderNotas(response.data);
                })
                ajax.fail(function (error) {
                    Swal.fire({icon: 'error', title: error, showConfirmButton: true, showCancelButton:false});
                })
            })


            function renderNotas(data) {
                let container = $('#notas-container');
                container.empty();

                data.forEach(function (matricula) {
                    let urlPdf="{{route("admin::notas.pdfEstudiante",":matricula")}}".replace(":matricula",matricula.id);

                    // Crear una nueva tabla para cada matrícula
                    let table = $('<table class="table table-sm table-striped table-bordered table-hover mb-4"></table>');

                    // Encabezado con el nombre del módulo
                    let thead = $('<thead class="fw-bold"></thead>');
                    let headerRow = $('<tr></tr>');
                    let headerMatricula = $('<th></th>').text("Matricula: "+matricula.id);
                    let headerEstado = $('<th></th>').text(matricula.tipo_estado.tipo_estado);
                    let headerPdf = $('<th class="text-center"></th>').html('<a href="'+urlPdf+'" target="_blank" class="btn btn-sm btn-danger"> <i class="fas fa-file-pdf"></i></a>');

                    headerRow.append(headerMatricula);
                    headerRow.append(headerEstado);
                    headerRow.append(headerPdf);
                    thead.append(headerRow);
                    table.append(thead);

                    // Cuerpo de la tabla con las notas y acciones
                    let tbody = $('<tbody></tbody>');

                    // Fila de encabezado de la tabla
                    let headerRow2 = $('<tr></tr>');
                    headerRow2.append('<th>Modulo</th>');
                    headerRow2.append('<th class="text-center">Nota</th>');
                    headerRow2.append('<th class="text-center">Ampliación</th>');
                    headerRow2.append('<th class="text-center">Ampliación 2</th>');
                    headerRow2.append('<th class="text-center">Estrategia de promoción</th>');
                    headerRow2.append('<th class="text-center">Acciones</th>');
                    tbody.append(headerRow2);

                    if (matricula.modulos.length > 0) {
                        // Filas con las notas de cada módulo
                        matricula.modulos.forEach(function (matriculaModulo) {
                            let row = $('<tr></tr>');

                            let moduloCell = $('<td></td>').text(matriculaModulo.modulo.modulo);
                            // Celdas de datos para cada columna
                            if(matriculaModulo.suficiencia){
                                moduloCell.append('<span class="badge badge-success mx-2">Suficiencia</span>');
                            }

                            let notaCell = $('<td class="text-center"></td>').text(matriculaModulo.nota);
                            let notaAmpliacionCell = $('<td class="text-center"></td>').text(matriculaModulo.nota_ampliacion);
                            let notaAmpliacion2Cell = $('<td class="text-center"></td>').text(matriculaModulo.nota_ampliacion_2);
                            let notaEstrategiaPromocionCell = $('<td class="text-center"></td>').text(matriculaModulo.nota_estrategia_promocion);
                            let tipoCalificacion = $('<td class="text-center"></td>').html('<span class="badge badge-primary">Sin definir</span>');
                            if(matriculaModulo.tipo_calificacion){
                                tipoCalificacion= $('<td class="text-center"></td>').html('<span class="badge badge-'+matriculaModulo.tipo_calificacion.color+'">'+matriculaModulo.tipo_calificacion.tipo_calificacion+'</span>');
                            }

                            // Celda de acciones con el botón
                            let accionesCell = $('<td class="text-center"></td>');
                            if (matriculaModulo.nota > 0) {
                                let btnAmpliacion="";
                                @can("Estudiante nota abrir")
                                    btnAmpliacion = $('<span class="badge badge-dark abrirNotaModulo" data-matricula-modulo-id="' + matriculaModulo.id + '"><i class="fas fa-box-open"></i></span>');
                                @else
                                    btnAmpliacion ="SP"
                                @endcan
                                accionesCell.append(btnAmpliacion);
                            }

                            // Agregar las celdas en el orden deseado
                            row.append(moduloCell, notaCell, notaAmpliacionCell, notaAmpliacion2Cell, notaEstrategiaPromocionCell, accionesCell);
                            row.append(tipoCalificacion);

                            // Añadir la fila al cuerpo de la tabla
                            tbody.append(row);
                        });
                    } else {
                        // Fila cuando no hay notas registradas
                        let noNotasRow = $('<tr></tr>');
                        let noNotasCell = $('<td colspan="6" class="text-center"></td>').text("No hay notas registradas");
                        noNotasRow.append(noNotasCell);
                        tbody.append(noNotasRow);
                    }


                    // Añadir el tbody a la tabla y la tabla al contenedor
                    table.append(tbody);
                    container.append(table);
                });
            }


            //abrir nota
            $(document).on('click', '.abrirNotaModulo', function () {

                let periodo_id=$('#periodo_id').val();
                let matricula_modulo_id=$(this).data('matricula-modulo-id');
                let url="{{route("admin::notas.abrir",["matricula_modulo"=>":matricula_modulo"])}}".replace(":matricula_modulo",matricula_modulo_id);
                Swal.fire({
                    title: '¿Esta segur@ de esta acción?',
                    text: "El profesor podrá modificar las notas de este módulo para este estudiante",
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#007b02',
                    cancelButtonColor: '#a1a1a1',
                    cancelButtonText: 'Cancelar',
                    confirmButtonText: 'Sí, Abrir'
                }).then((result) => {
                    if (result.isConfirmed) {

                        let ajax= $.ajax({
                            url: url,
                            dataType: "json",
                        })
                        ajax.done(function (response) {
                            $('#periodo_id').val(periodo_id).change();
                        })
                        ajax.fail(function (error) {
                            Swal.fire({icon: 'error', title: error, showConfirmButton: true, showCancelButton:false});
                        })
                    }
                })
            })

            $(document).on('click', '.btnAmpliacionHistorial', function () {
                let matricula_modulo_id = $(this).data("matricula-modulo-id");
                let nombre = $(this).data("estudiante");
                let notaFinal = $(this).data("nota-final");
                $(".lblEstudiante").text(nombre);
                $(".lblNotaFinal").text(notaFinal);

                $.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").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