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

@section("contenido")
    <!--begin::Row-->
    <div class="row gx-5 gx-xl-10">
        <div class="card">
            @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
            <form action="{{route("admin::grupo.insertar")}}" method="post">
                @csrf
                <div class="card-body ">
                    <div class="row pb-2">
                        <div class="col-1 pb-2">
                            <div class="form-group">
                                <label for="nivel_id" class="required">Curso lectivo</label>
                                <select class="form-select" name="curso_lectivo_id" id="curso_lectivo_id" required>
                                    <option value="">-</option>
                                    @foreach($cursos_lectivos as $curso_lectivo)
                                        <option value="{{$curso_lectivo->id}}">{{$curso_lectivo->curso_lectivo}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="col-2 pb-2">
                            <div class="form-group">
                                <label for="nivel_id" class="required">Periodo</label>
                                <select class="form-select" name="periodo_id" id="periodo_id" required>
                                </select>
                            </div>
                        </div>
                        <div class="col-2 pb-2">
                            <div class="form-group">
                                <label for="tipo_semestre_id" class="required">Tipo</label>
                                <select class="form-select" name="tipo_semestre_id" id="tipo_semestre_id" required>
                                    <option value="">-</option>
                                    @foreach($tipos_semestres as $tipo_semestre)
                                        <option value="{{$tipo_semestre->id}}">{{$tipo_semestre->tipo_semestre}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-2 pb-2">
                            <div class="form-group">
                                <label for="satelite_id" class="required">Satélite</label>
                                <select class="form-select" name="satelite_id" id="satelite_id" required>
                                    <option value="">-</option>
                                    @foreach($satelites as $satelite)
                                        <option value="{{$satelite->id}}">{{$satelite->satelite}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-3 pb-2">
                            <div class="form-group">
                                <label for="grupo" class="required">Grupo</label>
                                <input type="text" class="form-control " name="grupo" id="grupo" required>
                            </div>
                        </div>
                        <div class="col-2 pb-2">
                            <div class="form-group">
                                <label for="ciclo_id" class="required">Ciclo</label>
                                <select class="form-select" name="ciclo_id" id="ciclo_id" required>
                                    <option value="">-</option>
                                    @foreach($ciclos as $ciclo)
                                        <option value="{{$ciclo->id}}">{{$ciclo->ciclo}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>


                        <div class="col-1 pb-2">
                            <div class="form-group">
                                <label for="cupo" class="required">Cupo</label>
                                <input type="number" class="form-control " name="cupo" id="cupo"  value="30" required>
                            </div>
                        </div>

                        <div class="col-4 pb-2">
                            <div class="form-group">
                                <label for="profesor_guia_id">Profesor guía</label>
                                <select class="form-select" name="profesor_guia_id" id="profesor_guia_id" >
                                    <option value="">-</option>
                                    @foreach($profesores as $profesor)
                                        <option value="{{$profesor->id}}">{{$profesor->nombre_completo}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2 text-center ">
                            <button class="btn btn-sm btn-success mt-7" type="submit">
                                <i class="fas fa-save pe-2"></i> Crear grupo
                            </button>
                        </div>

                    </div>
                    <div class="card-footer">
                       <table id="tabla" class="table table-sm table-striped">
                           <thead></thead>
                           <tbody></tbody>
                       </table>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section("scripts")
    <script> window.url_get_periodos = "{{ route('admin::periodo.get.cursolectivo',":cursoLectivo") }}";</script>
    @vite('resources/js/global/getPeriodos.js')

    <script>
        $(document).ready(function(){
            $("#tipo_semestre_id").change(function(){
                $("#tabla tbody").empty();
                $("#tabla thead").empty();

                if(this.value != ""){
                    $.ajax({
                        url: "{{route("admin::tipos_semestres.getPlanEstudios",":tipo_semestre_id")}}".replace(":tipo_semestre_id",this.value),
                        type: "get",
                        dataType: "json",
                        success: function(response){
                            if(response.length === 0){
                                $("#tabla thead").append("<tr><th><b> <h4 class='text-danger'> <i class='ki-solid ki-information text-danger'></i> Plan de estudios vacío</h4></b>" +
                                    " <span>El grupo se creará, pero sin módulos, puede agregarlos luego en ajustes de grupos Plan de estudios.</span> </th>");

                                $("#grupo").val("");
                                return false;
                            }else{
                                $("#tabla thead").append("<tr><th><b> <i class='ki-solid ki-information text-primary'></i> Plan de estudios pre establecido</b></th>");
                                $("#tabla thead").append("<tr><th><b>Código</b></th><th><b>Módulo</b></th><th><b>Créditos</b></th><th><b>Asignatura</b></th><th><b>Grado</b></th></tr>");
                                $.each(response, function(i, item){
                                    var fila = "<tr>";
                                    fila += "<td>"+item.modulo.codigo+"</td>";
                                    fila += "<td>"+item.modulo.modulo+"</td>";
                                    fila += "<td>"+item.modulo.creditos+"</td>";
                                    fila += "<td>"+item.modulo.asignatura.asignatura+"</td>";
                                    fila += "<td>"+item.modulo.grado.grado+"</td>";
                                    fila += "</tr>";
                                    $("#tabla tbody").append(fila);
                                });
                                var texto = $("#tipo_semestre_id option:selected").text();
                                $("#grupo").val(texto+"-");
                            }

                        }
                    });

                }else{
                }
            });
            //on change grupo ajax para ver si ese nombre de grupo ya existe en ese periodo
            $("#grupo, #periodo_id, #satelite_id").change(function(){
                var grupo = $("#grupo").val();
                var periodo_id = $("#periodo_id").val();
                var satelite_id = $("#satelite_id").val();
                var id={{(isset($id)) ? $id->id : 0}};
                if(grupo != "" && periodo_id != "" && satelite_id != ""){
                    $.ajax({
                        url: "{{route("admin::grupo.validarNombre")}}",
                        type: "get",
                        data: {
                            grupo: grupo,
                            periodo_id: periodo_id,
                            satelite_id: satelite_id,
                            id: id
                        },
                        success: function(response){
                            if(response){
                                Swal.fire({title: 'Grupo ya existe', text: "El grupo "+grupo+" ya existe en este periodo y en este satélite", icon: 'error', confirmButtonText: 'Aceptar'});
                                $("#grupo").val("").focus();
                            }
                        }
                    });
                }
            });
        });
    </script>

@endsection