@extends("admin.layout.layout")
@section("styles")
    @php
        $titulo = "Ajustes de módulos de grupo";
        $modulo = "Ajustes";
        $vista="Ajuste de módulos de grupo";
    @endphp
    <title>{{getenv("APP_NAME")}} | {{$titulo}}</title>
    <style>
        th{
            font-weight: bold !important;
        }
        .modal-inactive {
            opacity: 0.5; /* Reduce la opacidad para dar un efecto gris */
            pointer-events: none; /* Evita que sea interactivo */
            transition: opacity 0.3s ease; /* Animación suave */
        }
    </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">
                    <div class="card-title">
                        <h3 class="card-label">{{$vista}} <b>{{$grupo->grupo}}</b>
                            <span class="d-block text-muted pt-2 font-size-sm"> {{$grupo->periodo->periodo}}  {{$grupo->satelite->satelite}}</span>
                        </h3>
                    </div>
                    <div class="card-toolbar">
                        <button type="button" class="btn-sm nuevo btn btn-success mx-3 font-weight-bolder mr-2 btnAbreModalBuscar">
                            <i class="fa-solid fa-plus-circle fa-lg"></i> Agregar módulo
                        </button>
                        <a href="{{route("admin::ajustes.grupos")}}" class="btn-sm nuevo btn btn-secondary mx-3 font-weight-bolder mr-2">
                            <i class="fa-solid fa-arrow-left fa-lg"></i> Volver a grupos
                        </a>
                    </div>
                </div>
                <div class="card-body container">
                    <table id="tabla" class="table table-condensed table-hover table-sm ">
                        @if($modulosCargados->count()>0)
                            <thead>
                            <tr>
                                <th>Código</th>
                                <th>Módulo</th>
                                <th>Créditos</th>
                                <th>Asignatura</th>
                                <th>Grado</th>
                                <th>Agregado</th>
                                <th>Responsable</th>
                                <th>Quitar</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($modulosCargados as $moduloCargado)
                                <tr>
                                    <td>{{$moduloCargado->modulo->codigo}}</td>
                                    <td>{{$moduloCargado->modulo->modulo}}</td>
                                    <td>{{$moduloCargado->modulo->creditos}}</td>
                                    <td>{{$moduloCargado->modulo->asignatura->asignatura}}</td>
                                    <td>{{$moduloCargado->modulo->grado->grado}}</td>
                                    <td>{{$moduloCargado->created_at}}</td>
                                    <td>{{$moduloCargado->user->nombre_completo}}</td>
                                    <td>
                                        <button type="button" data-modulo="{{$moduloCargado->modulo->modulo}}" class="btn btn-danger btn-sm btnQuitarModulo" data-id="{{$moduloCargado->id}}"><i class="fa-solid fa-trash fa-sm"></i></button></button>
                                    </td>
                                </tr>

                            @endforeach
                            </tbody>
                        @endif
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal para agregar módulos -->

    @include("admin.grupos.modal.agregar_modulo")


@endsection
@section("scripts")
    <script>
        $(document ).ready(function() {
            let url_buscar_modulo = "{{route("admin::modulos.paraAgregarAGrupo.buscar",":string")}}";

            $(".btnAbreModalBuscar").click(function() {
                $("#modalAgregarModulo").modal("show");

                $("#txtModulo").val("");
                $("#tablaBusqueda tbody").empty();
                $("#modulo_id").val("");
                $("#frmAccionModuloAGrupo").attr("action","");

                //esperar y poner .focus()
                setTimeout(function() {
                    $("#txtModulo").focus();
                },500);

            });

            //on enter en el input buscar
            $("#txtModulo").keypress(function(e) {
                if(e.which == 13) {
                    $("#btnBuscarModulo").click();
                }
            });

            $("#btnBuscarModulo").click(function() {
                let string = $("#txtModulo").val();
                let url = url_buscar_modulo.replace(":string",string);
                let grupo_id = {{$grupo->id}};
                //ajax enviar en data el grupo
                $.ajax({
                    url: url,
                    type: "GET",
                    data: {
                        grupo_id: grupo_id
                    },
                    dataType: "json",
                    success: function(response) {
                        console.log(response);
                        let tabla = $("#tablaBusqueda tbody");
                        tabla.empty();

                        $.each(response, function (i,v) {
                            let fila = "<tr>";
                            fila += "<td>"+v.codigo+"</td>";
                            fila += "<td>"+v.modulo+"</td>";
                            fila += "<td>"+v.creditos+"</td>";
                            fila += "<td>"+v.asignatura.asignatura+"</td>";
                            fila += "<td>"+v.grado.grado+"</td>";
                            fila += "<td><button type='button' class='btn btn-success btn-sm btnGetMatriculas' data-modulo='"+v.modulo+"' data-id='"+v.id+"'><i class='fa-solid fa-plus fa-sm'></i></button></td>";
                            fila += "</tr>";
                            tabla.append(fila);
                        });
                    },
                    error: function(error) {
                        console.error("Error:", error);
                        // Mostrar un mensaje de error al usuario
                        alert("Hubo un error al cargar los datos. Por favor, intente de nuevo.");
                    }
                });
            });

            $(document).on("click",".btnGetMatriculas",function() {
                let modulo_id = $(this).data("id");
                let grupo_id = {{$grupo->id}};
                let modulo = $(this).data("modulo");
                let url = "{{route("admin::reportes.getDataGrupo",":grupo")}}".replace(":grupo",grupo_id);
                $.ajax({
                    url: url,
                    type: "get",
                    data: {
                        modulo_id: modulo_id,
                        grupo_id: grupo_id
                    },
                    dataType: "json",
                    success: function(response) {

                        let tabla = $("#tablaMatriculas tbody");
                        $("#modulo_id").val(modulo_id);
                        tabla.empty();
                        $("#tablaMatriculas thead").html("<tr><th>Agregar Modulo</th><th>Identificación</th><th>Estudiante</th><th>Grupo</th><th>Satélite</th></tr>");

                        $.each(response.data, function (i,v) {
                            let fila = "<tr>";
                            fila += "<td><input checked type='checkbox' name='matricula_id[]' id='matricula_id_"+v.id+"' value='"+v.id+"'></td>";
                            fila += "<td>"+v.estudiante.identificacion+"</td>";
                            fila += "<td> <label for='matricula_id_"+v.id+"'>"+v.estudiante.nombre_completo+"</label</td>";
                            fila += "<td>"+v.grupo.grupo+"</td>";
                            fila += "<td>"+v.satelite.satelite+"</td>";
                            fila += "</tr>";
                            tabla.append(fila);
                        });

                        $("#lblModulo").text(modulo);
                        $("#btnSubmit").text("Agregar módulo");
                        $("#frmAccionModuloAGrupo").attr("action","{{route("admin::grupo.agregarModulo",$grupo->id)}}");
                        $("#modalListadoMatriculasGrupo").modal({backdrop: 'static', keyboard: false}).modal('show');

                    },
                    error: function(error) {

                        alert("Hubo un error al cargar los datos. Por favor, intente de nuevo.");
                    }
                });
            });


            $('#modalListadoMatriculasGrupo').on('show.bs.modal', function () {
                $('#modalAgregarModulo .modal-content').addClass('modal-inactive'); // Añade la clase al contenido del primer modal
            });

            // Al cerrar el segundo modal, reactiva el primero
            $('#modalListadoMatriculasGrupo').on('hidden.bs.modal', function () {
                $('#modalAgregarModulo .modal-content').removeClass('modal-inactive'); // Quita la clase
            });


            ///enviar formulario
            $(document).on("submit","#frmAccionModuloAGrupo",function(e) {
                e.preventDefault();
                let url = $(this).attr("action");
                let data = $(this).serialize();
                //disable button submit
                $("#btnSubmit").prop("disabled",true);
                $.ajax({
                    url: url,
                    type: "POST",
                    data: data,
                    dataType: "json",
                    success: function(response) {
                        if(response.res){
                            Swal.fire({title: 'Éxito!', text: 'Módulo agregado correctamente.',
                                text: 'Módulo agregado correctamente al grupo y a las matrículas seleccionadas.',
                                icon: 'success', confirmButtonText: 'Aceptar'}).then((result) => {
                                    $("#modalListadoMatriculasGrupo").modal("hide");
                                    $("#modalAgregarModulo").modal("hide");
                                    location.reload();
                            });
                        }else{
                            Swal.fire({title: response.error, icon: 'error', confirmButtonText: 'Aceptar'});
                        }
                        $("#btnSubmit").prop("disabled",false);

                    },
                    error: function(error) {
                        console.error("Error:", error);
                        Swal.fire({title: 'Error!', text: 'Hubo un error al agregar el módulo. Por favor, intente de nuevo.', icon: 'error', confirmButtonText: 'Aceptar'});
                        $("#btnSubmit").prop("disabled",false);
                    }
                });
            });

            $(document).on("click",".btnQuitarModulo",function() {
                let modulo_id = $(this).data("id");
                let grupo_id = {{$grupo->id}};
                let url = "{{route("admin::reportes.getDataGrupo",":grupo")}}".replace(":grupo",grupo_id);
                let modulo = $(this).data("modulo");

                $.ajax({
                    url: url,
                    type: "get",
                    data: {
                        modulo_id: modulo_id,
                        grupo_id: grupo_id
                    },
                    dataType: "json",
                    success: function(response) {

                        let tabla = $("#tablaMatriculas tbody");
                        $("#modulo_id").val(modulo_id);
                        tabla.empty();
                        $("#tablaMatriculas thead").html("<tr><th>Quitar módulo</th><th>Identificación</th><th>Estudiante</th><th>Grupo</th><th>Satélite</th></tr>");
                        $.each(response.data, function (i,v) {
                            let fila = "<tr>";
                            fila += "<td><input checked type='checkbox' name='matricula_id[]' id='matricula_id_"+v.id+"' value='"+v.id+"'></td>";
                            fila += "<td>"+v.estudiante.identificacion+"</td>";
                            fila += "<td> <label for='matricula_id_"+v.id+"'>"+v.estudiante.nombre_completo+"</label</td>";
                            fila += "<td>"+v.grupo.grupo+"</td>";
                            fila += "<td>"+v.satelite.satelite+"</td>";
                            fila += "</tr>";
                            tabla.append(fila);
                        });

                        $("#lblModulo").text(modulo);
                        $("#btnSubmit").text("Quitar módulo");
                        $("#frmAccionModuloAGrupo").attr("action","{{route("admin::grupo.quitarModulo",$grupo->id)}}");
                        $("#modalListadoMatriculasGrupo").modal({backdrop: 'static', keyboard: false}).modal('show');

                    },
                    error: function(error) {

                        alert("Hubo un error al cargar los datos. Por favor, intente de nuevo.");
                    }
                });

            });


        });
    </script>
@endsection