@extends("admin.layout.layout")
@section("styles")
    @php
        $titulo = "Profesores";
        $modulo = "Profesores";
        $vista="Asignar profesor por materia y grupo";
    @endphp
    <title>{{getenv("APP_NAME")}} | {{$titulo}}</title>
    <style>
        .custom-table tbody tr:hover {
            background-color: #6ec2ff; /* Cambia este color al que desees */
            transition: background-color 0.3s ease; /* Agrega transición para suavizar el cambio */
        }
    </style>
@endsection

@section("contenido")
    <!--begin::Row-->
    <div class="row ">

        <div class="card col-md-12 mx-2">
            <div class="card-body">
                <div class="row mt-5">
                    <div class="col-md-3">
                        <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-3">
                        <div class="form-group">
                            <label for="satelite_id" class="required">Satélite</label>
                            <select name="satelite_id" id="satelite_id" class="form-select form-select-sm">
                                <option value="">-</option>
                                @foreach($satelites as $satelite)
                                    <option value="{{$satelite->id}}">{{$satelite->satelite}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="ciclo_id" class="required">Ciclo</label>
                            <select name="ciclo_id" id="ciclo_id" class="form-select form-select-sm">
                                <option value="">-</option>
                                @foreach($ciclos as $ciclo)
                                    <option value="{{$ciclo->id}}">{{$ciclo->ciclo}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-2 mt-6">
                        <div class="form-group">
                            <button class="btn btn-sm btn-primary" id="btnObtener" type="button"> <i class="fas fa-search"></i> Obtener</button>
                        </div>
                    </div>
                </div>
            </div>


            <div class="card-body">
                <div class="row mt-5 table-responsive">
                    <table class="table custom-table table-sm" id="tabla">
                        <tbody></tbody>
                    </table>
                </div>

                <div id="divBtnEnviar" class="text-center"></div>
            </div>

        </div>
    </div>
@endsection

@section("scripts")

    <script> window.dataTable = "{{ route('admin::secciones.nivel',":nivel") }}";</script>
    @vite('resources/js/app.js')
    <script>
        $(document).ready(function () {

            $('#btnObtener').on('click', function () {
                $("#divBtnEnviar").html("");
                let satelite = $('#satelite_id').val();
                let periodo = $('#periodo_id').val();
                let ciclo = $('#ciclo_id').val();

                if (satelite !== "" && periodo !== "" && ciclo !== "") {
                    let url = "{{ route('admin::grupos.getGruposAsignaturas', ['satelite' => ':satelite', 'periodo' => ':periodo', 'ciclo' => ':ciclo']) }}";
                    url = url.replace(":satelite", satelite).replace(":periodo", periodo).replace(":ciclo", ciclo);

                    $.ajax({
                        url: url,
                        type: 'GET',
                        dataType: 'json',
                        success: function (response) {
                            let grupos = response.grupos;
                            let tableBody = $("#tabla tbody");
                            tableBody.empty();

                            if (grupos.length > 0) {
                                // Crear la primera fila con los grupos
                                let gruposRow = $("<tr></tr>");
                                gruposRow.append("<th>Módulos</th>");

                                grupos.forEach(function (grupo) {
                                    gruposRow.append(`<th>${grupo.grupo}</th>`);
                                });

                                tableBody.append(gruposRow);

                                // Obtener módulos únicos de todos los grupos
                                let modulosUnicos = obtenerModulosUnicos(grupos);

                                // Crear una fila por cada módulo
                                modulosUnicos.forEach(function (modulo) {

                                    let row = $("<tr class='linea'></tr>");
                                    let moduloCell = $("<td class='text-wrap'>" + modulo.modulo.modulo + "</td>");
                                    row.append(moduloCell);

                                    grupos.forEach(function (grupo) {
                                        // Verificar si el módulo está presente en el grupo actual
                                        let moduloEnGrupo = grupo.modulos.find(m => m.modulo === modulo.modulo);

                                        if (moduloEnGrupo) {
                                            let cell = $("<td></td>");
                                            let select = $("<select class='form-select-sm form-select-solid profesorGrupoModulo' style='width: 100px;' name='profesorGrupoModulo[]'></select>");

                                            let opciones = [];  // Inicializar el array de opciones

                                            // Cargar profesores disponibles para el módulo
                                            if (moduloEnGrupo.profesores.length > 0) {
                                                let profesores = moduloEnGrupo.profesores;

                                                opciones = profesores.map(function (profesor) {
                                                    let seleccionado = (profesor.id === moduloEnGrupo.profesor_asignado) ? "selected" : "";
                                                    return `<option value='${profesor.id}' ${seleccionado} data-grupo_id='${grupo.id}' data-modulo_id='${moduloEnGrupo.modulo_id}' title='${profesor.nombre_completo}'>${profesor.nombre}</option>`;
                                                });

                                                // Añadir una opción de "N/E" si no hay profesores asignados
                                                if (opciones.length === 0) {
                                                    opciones.push("<option value='' selected>N/E</option>");
                                                }

                                                if (opciones.length > 1) {
                                                    select.append("<option value='' selected>-</option>");
                                                }
                                            } else {
                                                // No hay profesores disponibles
                                                opciones.push("<option value='0' title='No hay profesores' selected>S/P</option>");
                                            }

                                            // Agregar las opciones al select
                                            select.append(opciones);
                                            cell.append(select);
                                            row.append(cell);
                                        } else {
                                            // El módulo no está presente en este grupo, agregar una celda vacía
                                            row.append("<td></td>");
                                        }
                                    });

                                    tableBody.append(row);
                                });

                                // Agregar botón de guardar
                                $("#divBtnEnviar").append('<button id="btnGuardar" class="btn btn-sm btn-success"> <i class="fas fa-save"></i> Guardar </button>');
                            } else {
                                Swal.fire('No hay grupos', 'No hay grupos sin asignar profesores por módulo.', 'warning');
                            }
                        },
                        error: function (error) {
                            console.log(error);
                        }
                    });
                }
            });

            function obtenerModulosUnicos(grupos) {
                let modulosUnicos = [];

                grupos.forEach(function (grupo) {
                    grupo.modulos.forEach(function (modulo) {
                        // Verificar si el módulo ya está en el arreglo de módulos únicos
                        let moduloExistente = modulosUnicos.find(m => m.modulo === modulo.modulo);
                        if (!moduloExistente) {
                            // Agregar el módulo al arreglo de módulos únicos
                            modulosUnicos.push({
                                modulo: modulo.modulo,
                                id: modulo.id  // Puedes agregar más propiedades según sea necesario
                            });
                        }
                    });
                });

                return modulosUnicos;
            }


            $(document).on("dblclick", ".linea", function () {
                let primerSelect = $(this).find(".profesorSeccionMateria:first");
                let valorSeleccionado = primerSelect.val();

                // Asignar el mismo valor a los demás select de la fila
                $(this).find(".profesorSeccionMateria").val(valorSeleccionado);
            });

            $(document).on("click", "#btnGuardar", function() {
                let todosTienenValor = true;

                Swal.fire({
                    title: "¿Está seguro de guardar los datos?",
                    showDenyButton: true,
                    icon: "question",
                    showCancelButton: false,
                    confirmButtonText: "Guardar ahora",
                    denyButtonText: "No, cancelar",
                    confirmButtonColor: "#025d14",
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Preparar los datos a enviar al controlador
                        let asignaciones = [];
                        $(".profesorGrupoModulo").each(function () {
                            let select = $(this);
                            let profesorId = select.find(":selected").val();
                            let grupoId = select.find(":selected").data("grupo_id");
                            let moduloId = select.find(":selected").data("modulo_id");

                            // Validar que todos los valores sean diferentes de undefined
                            if (profesorId !== undefined && grupoId !== undefined && moduloId !== undefined) {
                                asignaciones.push({
                                    profesor_id: profesorId,
                                    grupo_id: grupoId,
                                    modulo_id: moduloId
                                });
                            } else {
                                // Al menos un select no tiene un valor seleccionado
                                todosTienenValor = false;
                            }
                        });

                        // Realizar la solicitud AJAX
                        let url = "{{route("admin::profesores.asignarGrupoModulos")}}";
                        $.ajax({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            url: url,
                            type: 'POST',
                            dataType: 'json',
                            data: {"asignaciones": asignaciones},
                            success: function (response) {
                                Swal.fire(response.mensaje, '', 'success').then(() => {
                                    location.reload();
                                });
                            },
                            error: function (error) {
                                Swal.fire('Ocurrió un error', error, 'error');
                            }
                        });
                    }
                });
            });


        });
    </script>
@endsection