@extends('template.main')

@section('titulo','Inscribir Nuevo Alumno')

@section('cabecera')
<script>
    $(document).ready(function () {
        $("#modalidad").change(function(){
            var plan = $("#plan").val();
            var modalidad = $("#modalidad").val();
            var tipoEstudio =  $("#modalidad").val();

            $.ajax({
                data: {"modalidad": modalidad},
                type: "GET",
                url: "{{ route('alumno.nivel') }}",

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

                success: function(response){

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

                }
            });
            $.ajax({
                data: {"plan": plan, "tipoEstudio": tipoEstudio},
                type: "GET",
                url: "{{ route('alumno.plan.generacion') }}",
                beforeSend: function(){
                    $('#salidaGeneracion').html("<center><img src=\"{{ asset('img/loading.gif') }}\" style=\"max-width: 100px\"></center>");
                },
                success: function(response){
                    $('#salidaGeneracion').html(response);
                }
            });

        });

        $("#plan").change(function(){
            var plan = $("#plan").val();
            var tipoEstudio =  $("#modalidad").val();

            $.ajax({
                data: {"plan": plan, "tipoEstudio": tipoEstudio},
                type: "GET",
                url: "{{ route('alumno.plan.generacion') }}",

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

                success: function(response){

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

                }
            });
        });

	$("#modalidad").change(function(){
            var tipoEstudio =  $("#modalidad").val();

            $.ajax({
                data: {"tipoEstudio": tipoEstudio},
                type: "GET",
                url: "{{ route('alumno.modalidad') }}",

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

                success: function(response){

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

                }
            });
        });



    });
</script>
<style>
    body {
        margin-top: -35px;
    }
</style>

<!-- Firma
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" crossorigin="anonymous" />
<link rel="stylesheet" type="text/css" href="http://keith-wood.name/css/jquery.signature.css">

<style>
    .kbw-signature { width: 100%; height: 200px;}
    #sig canvas{ width: 100% !important; height: auto;}
</style>
 /Firma -->
<meta name="csrf-token" content="{{ csrf_token() }}">
@endsection

@section('contenido')

    <div class="row" >
        <div class="col-lg-12">
            <div class="col-lg-12">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><i class="fas fa-home"></i> Inscripción </li>
                        <li class="breadcrumb-item">Alumnos</li>
                        <li class="breadcrumb-item active" aria-current="page"><i class="fas fa-user-graduate"></i> Inscribir Nuevo Alumno</li>
                    </ol>
                </nav>
                <hr>
            </div>
            <div class="col-lg-9">
                <h3 class="contexto"> <i class="fas fa-user-graduate"></i> Inscribir Nuevo Alumno</h3>
            </div>
            <div class="col-lg-12"><strong>* Campos obligatorios</strong></div>
            <div class="col-lg-12" id="inscripcion_form">
                <form method="post" action="{{ route('alumno.store') }}" autocomplete="off" enctype="multipart/form-data">
                  @csrf
                   <div class="row">
                       <div class="col-lg-12">
                           <hr>
                           <strong>Datos del Alumno</strong><br>
                           <hr>
                       </div>
                       <div class="col-lg-3">
                           <label>* Nombre(s)</label>
                           <input type="text" value="{{ old('nombre') }}" onkeyup="javascript:this.value=this.value.toUpperCase();" maxlength="100" pattern="[A-Za-z ]+" title="Solo se acepta letras." name="nombre" id="nombre" class="form-control" required autofocus>
                       </div>
                       <div class="col-lg-3">
                           <label>* Apellidos</label>
                           <input type="text" value="{{ old('apellidos') }}" onkeyup="javascript:this.value=this.value.toUpperCase();" name="apellidos" id="apellidos" maxlength="100" pattern="[A-Za-z ]+" title="Solo se acepta letras." class="form-control">
                       </div>
                       <div class="col-lg-3">
                           <label>Fecha de nacimiento</label>
                           <input id="fechaN" value="{{ old('fechaNacimiento') }}" type="date" name="fechaNacimiento" class="form-control" >
                       </div>
                       <div class="col-lg-3">
                           <label>Lugar de nacimiento</label>
                           <select id="lugarN" name="nacimiento" class="form-control" >
                               <option value="">Seleccione una opción</option>
                               @foreach($entidades as $cr)
                                   @if(old('nacimiento') == $cr->idEntidad)
                                       <option value="{{ $cr->idEntidad }}" selected>{{ $cr->entidad }}</option>
                                   @else
                                       <option value="{{ $cr->idEntidad }}">{{ $cr->entidad }}</option>
                                   @endif
                               @endforeach
                           </select>
                       </div>
                       <div class="col-lg-3">
                           <label>Género</label>
                           <select id="genero" name="genero" class="form-control">
                               <option value="">Seleccione una opción</option>
                               @foreach($generos as $cr)
                                  @if(old('genero') == $cr->idgenero)
                                       <option value="{{ $cr->idgenero }}" selected>{{ $cr->genero }}</option>
                                   @else
                                       <option value="{{ $cr->idgenero }}">{{ $cr->genero }}</option>
                                   @endif
                               @endforeach
                           </select>
                       </div>
                       <div class="col-lg-3">
                           <label>Estado civil</label>
                           <select id="civil" name="estadoCivil" class="form-control">
                               <option value="">Seleccione una opción</option>
                               @foreach($estadoCivil as $cr)
                                   @if(old('estadoCivil') == $cr->id)
                                        <option value="{{ $cr->id }}" selected>{{ $cr->estadoCivil }}</option>
                                   @else
                                       <option value="{{ $cr->id }}" >{{ $cr->estadoCivil }}</option>
                                   @endif
                               @endforeach
                           </select>

                       </div>
                       <div class="col-lg-3">
                           <label>Teléfono local</label>
                           <input id="telocal" type="text" name="telefonoLocal" value="{{ old('telefonoLocal') }}" maxlength="10" pattern="[0-9]+" title="Solo se acepta números." class="form-control">

                       </div>
                       <div class="col-lg-3">
                           <label>Teléfono celular</label>
                           <input id="tecelular" type="text" name="telefonoCelular" value="{{ old('telefonoCelular') }}" maxlength="10" pattern="[0-9]+" title="Solo se acepta números." class="form-control">

                       </div>
                        <div class="col-lg-3">
                            <label>Estado</label>
                            <select id="estado" name="estado" class="form-control">
                                <option value="">Seleccione una opción</option>
                                @foreach($estados as $estado)
                                    @if($estado->id == old('estado'))
                                        <option value="{{ $estado->id }}" selected>{{ $estado->estado }}</option>
                                    @else
                                        <option value="{{ $estado->id }}">{{ $estado->estado }}</option>
                                    @endif
                                @endforeach
                            </select>

                        </div>
                       <div class="col-lg-3">
                           <label>Delegación o Municipio</label>
                           <input id="delegacion" type="text" name="municipio" value="{{ old('municipio') }}" onkeyup="javascript:this.value=this.value.toUpperCase();" class="form-control" maxlength="200">

                       </div>
                       <div class="col-lg-3">
                           <label>Código postal</label>
                           <input id="postal" type="text" name="codigoPostal" value="{{ old('codigoPostal') }}" id="codigoPostal" maxlength="6" pattern="[0-9]+" title="Solo se acepta números." class="form-control">

                       </div>
                       <div class="col-lg-3" id="colonia">
                           <label>Colonia</label>
                           <input id="colonia2" type="text" name="colonia" value="{{ old('colonia') }}" onkeyup="javascript:this.value=this.value.toUpperCase();" maxlength="200" class="form-control" >

                       </div>
                       <div class="col-lg-3">
                           <label>Calle y número</label>
                           <input id="calle" type="text" value="{{ old('direccion') }}" onkeyup="javascript:this.value=this.value.toUpperCase();" name="direccion" maxlength="200" class="form-control">

                       </div>
                       <div class="col-lg-3" hidden>
                           <label>Matrícula</label>
                           <input id="matricula" type="text" value="{{ $matricula }}" name="matricula" maxlength="30" pattern="[A-Z0-9]+" class="form-control">
                       </div>
                       <div class="col-lg-3">
                           <label>* CURP</label>
                           <input id="curp" type="text" value="{{ old('curp') }}" onkeyup="javascript:this.value=this.value.toUpperCase();" name="curp" maxlength="18" pattern="[A-Z0-9]+" title="Solo se acepta letras mayúsculas." class="form-control">

                       </div>
                       <div class="col-lg-3">
                           <label>* e-Mail</label>
                           <input id="email" type="email" value="{{ old('email') }}" name="email" maxlength="100" class="form-control">

                       </div>
                       <!-- **********************************-->
                       <div class="col-lg-12">
                           <hr>
                           <strong>Datos de la Escuela</strong><br>
                           <hr>
                       </div>
                       <div class="col-lg-3">
                           <label>* Sede</label>
                           <select id="sede" name="sede" class="form-control" >
                               @foreach($sedes as $cr)
                                   @if(old('sede') == $cr->idsede)
                                       <option value="{{ $cr->idsede }}" selected>{{ $cr->sede }}</option>
                                   @else
                                       <option value="{{ $cr->idsede }}" >{{ $cr->sede }}</option>
                                   @endif
                               @endforeach
                           </select>

                       </div>
                       <div class="col-lg-3">
                           <label>* Nivel Educativo</label>
                           <select name="tipoCarrera" id="modalidad" class="form-control" required>
                               <option value="">Seleccione una opción</option>
                               @foreach($modalidadInfo as $cr)
                                   @if($cr->idnivel==2 || $cr->idnivel==3)
                                   <option value="{{ $cr->idnivel }}">{{ $cr->tipo }}</option>
                                   @endif
                               @endforeach
                           </select>

                       </div>
                       <div class="col-lg-3" id="carreraElemento">
                           <label>* Carrera</label>
                           <select id="carrera" name="carrera" class="form-control" disabled>
                               <option value="">Seleccione primero un tipo de estudio.</option>
                           </select>

                       </div>
                       <div class="col-lg-3" hidden>
                           <label>* Tipo de plan</label>
                           <input type="text" value="Cuatrimestral" name="plan" id="plan" maxlength="100" class="form-control">
                       </div>
                       <div class="col-lg-3" id="salidaModalidad">
                           <label>* Modalidad</label>
                           <select id="modalidadE" name="modalidad" class="form-control" disabled>
                               <option value="">Seleccione primero un nivel educativo.</option>
                           </select>
                           <!--<input type="text" name="generacion" class="form-control" required>-->
                       </div>                       <div class="col-lg-3" id="salidaGeneracion" >
                           <label>* Generación</label>
                           <select id="generacion" name="yearGeneracion" class="form-control" disabled>
                               <option value="">Seleccione primero un tipo de plan.</option>
                           </select>
                           <!--<input type="text" name="generacion" class="form-control" required>-->
                       </div>
                       <div class="col-lg-3" hidden>
                           <label>Último grado de estudios</label>
                           <input id="ultimoGrado" type="text" onkeyup="javascript:this.value=this.value.toUpperCase();" name="ultimoGrado" value="Bachillerato" maxlength="100" class="form-control">
                       </div>
                       <div class="col-lg-3" hidden>
                           <label>* Pago actual de inscripción</label>
                           @foreach($costos as $c)
                               @if($c->id==1)
                                   <input id="pagoInsc" type="number" name="pagoInscripcion" value="{{$c->valor}}" class="form-control">
                               @endif
                           @endforeach
                       </div>
                       <div class="col-lg-3" hidden>
                           <label>* Pago actual de colegiatura</label>
                           @foreach($costos as $c)
                               @if($c->id==2)
                                   <input id="pagoCol" type="number" name="pagoColegiatura" value="{{$c->valor}}" class="form-control">
                               @endif
                           @endforeach
                       </div>
                       <div class="col-lg-3" hidden>
                           <label>* Pago actual de re-inscripción</label>
                           @foreach($costos as $c)
                               @if($c->id==3)
                                   <input id="pagoRec" type="number" name="pagoReInscripcion" value="{{$c->valor}}" class="form-control">
                               @endif
                           @endforeach
                       </div>
                       <div class="col-lg-3" hidden>
                           <label>* Estatus</label>
                           <input id="estatus" type="text" onkeyup="javascript:this.value=this.value.toUpperCase();" name="estatus" value="1" maxlength="100" class="form-control">
                       </div>
                       <div class="col-lg-3" hidden>
                           <label>* Tipo</label>
                           <input id="tipo" type="text" onkeyup="javascript:this.value=this.value.toUpperCase();" name="tipo" value="1" maxlength="100" class="form-control">
                       </div>

                       <!--** ******************************/ -->
                       <div class="col-lg-12"><hr>
                           <strong>Información Adicional</strong><br>
                           <hr>
                       </div>
                       <!-- certificado en linea,afiliado,padecimiento-->
                       <div class="col-lg-3">
                           <label>Seguro Social</label>
                           <select id="seguro" name="seguro" class="form-control">
                               <option value="">Seleccione una opción</option>
                               <option value="IMSS">IMSS</option>
                               <option value="ISSSTE">ISSSTE</option>
                               <option value="ISSEMYM">ISSEMYM</option>
                               <option value="NO">No cuento con seguro médico.</option>
                               <option value="OTRO">Otro</option>
                           </select>
                       </div>
                       <div class="col-lg-3" id="divOtro" hidden>
                           <label>¿Con que seguro cuentas?</label>
                           <input id="otro" type="text" onkeyup="javascript:this.value=this.value.toUpperCase();" name="otro" maxlength="100" class="form-control" disabled>
                       </div>
                       <div class="col-lg-3">
                           <label>¿Tienes algún padecimiento?</label>
                           <select id="enfermedad" name="enfermedad" class="form-control">
                               <option value="">Seleccione una opción</option>
                               <option value="1">Si</option>
                               <option value="2">No</option>
                           </select>
                       </div>
                       <div class="col-lg-3" id="divCual" hidden>
                           <label>¿Cual?</label>
                           <input id="cual" type="text" onkeyup="javascript:this.value=this.value.toUpperCase();" name="cual" maxlength="100" class="form-control" disabled>
                       </div>
                       <div class="col-lg-12">
                           <br>
                           <button type="submit" class="btn btn-success"><i class="fas fa-plus"></i> Agregar</button>
                       </div>
                   </div>
                </form>
            </div>
        </div>
    </div>
    <script>
        $( function() {
            $("#seguro").change( function() {
                if ($(this).val() != "OTRO") {
                    $("#divOtro").prop("hidden", true);
                    $("#otro").prop("disabled", true);
                } else {
                    $("#divOtro").prop("hidden", false);
                    $("#otro").prop("disabled", false);
                }
            });
        });
        $( function() {
            $("#enfermedad").change( function() {
                if ($(this).val() != "1") {
                    $("#divCual").prop("hidden", true);
                    $("#cual").prop("disabled", true);
                } else {
                    $("#divCual").prop("hidden", false);
                    $("#cual").prop("disabled", false);
                }
            });
        });
    </script>
@endsection