@extends('template.main')

@section('titulo','Consultar calificaciones')

@section('cabecera')
    <script>
        $(document).ready(function () {
            $("#modalidad").change(function () {
                var modalidad = $("#modalidad").val();
                $.ajax({
                    data: {"modalidad": modalidad,"parametro":1},
                    type: "GET",
                    url: "{{ route('alumnos.nivel') }}",

                    beforeSend: function () {
                        $('#carreraElemento').html("<center><img src=\"{{ asset('img/loading.gif') }}\" style=\"max-width: 100px\"></center>");
                    },

                    success: function (response) {

                        $('#carreraElemento').html(response);

                    }
                });
            });

            $("#plan").change(function () {
                var plan = $("#plan").val();
                var tipoEstudio = $("#modalidad").val();
                var carrera = $("#carrera").val();
                $.ajax({
                    data: {"plan": plan, "tipoEstudio": tipoEstudio, "carrera": carrera},
                    type: "GET",
                    url: "{{ route('alumnos.plan.generacion') }}",

                    beforeSend: function () {
                        $('#salidaGeneracion').html("<center><img src=\"{{ asset('img/loading.gif') }}\" style=\"max-width: 100px\"></center>");
                    },

                    success: function (response) {

                        $('#salidaGeneracion').html(response);

                    }
                });
                $.ajax({
                    data: {"plan": plan},
                    type: "GET",
                    url: "{{ route('calificaciones.plan') }}",

                    beforeSend: function () {
                        $('#salidaPeriodo').html("<center><img src=\"{{ asset('img/loading.gif') }}\" style=\"max-width: 100px\"></center>");
                    },

                    success: function (response) {

                        $('#salidaPeriodo').html(response);

                    }
                });
            });
            $("#validacion").submit(function(e){
                e.preventDefault();
                $.ajax({
                    data: $(this).serialize(),
                    type: "POST",
                    url: "{{ route('calificaciones.alumnos') }}",

                    beforeSend: function () {
                        $('#respuestaCalificaciones').html("<center><img src=\"{{ asset('img/loading.gif') }}\" style=\"max-width: 100px\"></center>");
                    },

                    success: function (response) {

                        $('#respuestaCalificaciones').html(response);

                    }
                });

            });
        });
    </script>
@endsection

@section('contenido')
    <div style="margin: 5px;" class="row">
        <div class="col-lg-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('home') }}"><i class="fas fa-home"></i> Inicio </a></li>
                    <li class="breadcrumb-item">Calificaciones</li>
                    <li class="breadcrumb-item active" aria-current="page"><i class="fas fa-list-ul"></i> Consultar</li>
                </ol>
            </nav>
            <hr>
        </div>
        <div class="col-lg-12">
            <h3 class="contexto"> <i class="fas fa-list-ul"></i> Consultar calificaciones</h3>
        </div>
        <div class="col-lg-12">
            <form id="validacion">
                @csrf
                <div class="row">
                    <div class="col-lg-3">
                        <label>Seleccione Sede</label>
                        <select name="sede" class="form-control" required>
                            <option value="">Seleccione una opción</option>
                            @foreach($sedes as $sede)
                                <option value="{{ $sede->idsede }}">{{ $sede->sede }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-lg-3">
                        <label>Seleccione modalidad</label>
                        <select name="modalidad" class="form-control" required>
                            <option value="">Seleccione una opción</option>
                            @foreach($modalidades as $modalidad)
                                <option value="{{ $modalidad->idModalidad }}">{{ $modalidad->modalidad }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-lg-3">
                        <label>* Tipo de estudio</label>
                        <select name="tipoCarrera" id="modalidad" class="form-control">
                            <option value="">Seleccione una opción</option>
                            @foreach($modalidadInfo as $cr)
                                <option value="{{ $cr->idnivel }}">{{ $cr->tipo }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-lg-3" id="carreraElemento">
                        <label>* Carrera</label>
                        <select name="carrera" class="form-control" disabled>
                            <option value="">Seleccione primero un tipo de estudio.</option>

                        </select>
                    </div>
                    <div class="col-lg-3">
                        <label>Seleccione plan de estudio</label>
                        <select name="plan" id="plan" class="form-control" required>
                            <option value="">Seleccione una opción</option>

                            <option value="Trimestral" >Trimestral</option>
                            <option value="Cuatrimestral" >Cuatrimestral</option>
                            <option value="Semestral" >Semestral</option>
                        </select>
                    </div>
                    <div class="col-lg-3" id="salidaGeneracions">
                        <label>* Generacion</label>
                        <select name="yearGeneracion" class="form-control" disabled>
                            <option value="">Seleccione primero plan de estudio.</option>

                        </select>

                        <!--<input type="text" name="generacion" class="form-control" required>-->
                    </div>


                    <div class="col-lg-12">
                        <br>
                        <button style="float:right;" type="submit" id="solicitar" class="btn btn-primary"><i class="fas fa-search"></i> Buscar</button>
                    </div>
                </div>
            </form>
        </div>
        <div id="respuestaCalificaciones" class="col-lg-12">

        </div>
    </div>
@endsection