@extends('layouts.app')
@section('scripts')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#estado').on('change', onState);
        });

        function onState(){
           var estadoId= $(this).val();
           // AJAX
           if(!estadoId){
            $('#municipio').html('<option value="">Seleccione una opción</option>');
           }
           // /ProyectoJardines/public
           $.get('/public/municipios/'+estadoId+'/estados', function(data){
               var html_select='<option value="">Seleccione una opción</option>';
               for (var i=0; i<data.length; i++){
                   html_select+='<option value="'+data[i].id+'">'+data[i].nombre+'</option>';
                   console.log(html_select);
                   $('#municipio').html(html_select);
               }
           });
        }
        $(function(){
            $('#municipio').on('change', onMunicipio);
        });

        function onMunicipio(){
            var municipioId= $(this).val();
           // AJAX
           if(!municipioId){
            $('#localidad').html('<option value="">Seleccione una opción</option>');
           }
           ///ProyectoJardines/public/
           $.get('/public/localidades/'+municipioId+'/municipios', function(data){
               var html_select='<option value="">Seleccione una opción</option>';
               for (var i=0; i<data.length; i++){
                   html_select+='<option value="'+data[i].id+'">'+data[i].nombre+'</option>';
                   console.log(html_select);
                   $('#localidad').html(html_select);
               }
        });
      }
    </script>
@endsection
@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">{{ __('Register') }}</div>
                <h5 class="text-center">Todos los campos obligatorios están marcados con un *</h5>
                

                <div class="card-body">
                    <form method="POST" action="{{ route('register') }}" novalidate>
                        @csrf
                        <div class="card-header">{{ __('Datos Generales') }}</div>
                        <br>
                        <div class="form-group row">
                            <label for="name" class="col-md-4 col-form-label text-md-right">{{ __('Nombre*') }}</label>

                            <div class="col-md-6">
                                <input id="name" type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" required autocomplete="name" autofocus>

                                @error('name')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="email" class="col-md-4 col-form-label text-md-right">{{ __('Correo Electrónico*') }}</label>

                            <div class="col-md-6">
                                <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email">

                                @error('email')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                        {{-- Datos adicionales --}}
                        <div class="form-group row">
                            <label for="Telefono" class="col-md-4 col-form-label text-md-right">{{ __('Telefono*') }}</label>

                            <div class="col-md-6">
                                <input id="Telefono" type="text" class="form-control @error('Telefono') is-invalid @enderror" name="Telefono" value="{{ old('Telefono') }}" required autocomplete="Telefono">

                                @error('Telefono')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                        <div class="card-header">{{ __('Datos Escolares') }}</div>
                        <br>
                        <div class="form-group row">
                            <label for="estado" class="col-md-4 col-form-label text-md-right">Estado*</label>
                            <div class="col-md-6">
                            <select name="estado"
                            class="form-control @error('estado') is-invalid @enderror"
                            id="estado">
                            <option value="">Seleccione</option>
                            <!--Comienzo for each -->
                            @foreach($estados as $estado)
                            <option value="{{$estado->id}}" {{old('estado')== $estado->id ? 'selected' : ''}}>{{$estado->nombre}}</option>
                            @endforeach
                            <!--termino for each -->
                            </select>
                            @error('estado')
                            <span class="invalid-feedback d-block" role="alert">
                                <strong>{{$message}}</strong>
                                </span>
                            @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="municipio" class="col-md-4 col-form-label text-md-right">Seleccionar municipio*</label>
                            <div class="col-md-6">
                            <select name="municipio"
                            class="form-control @error('usuario') is-invalid @enderror"
                            id="municipio">
                            </select>
                            @error('municipio')
                            <span class="invalid-feedback d-block" role="alert">
                                <strong>{{$message}}</strong>
                                </span>
                            @enderror
                            </div>
                        </div>

                        <!--<div class="form-group row">
                            <label for="localidad" class="col-md-4 col-form-label text-md-right">Seleccionar localidad</label>
                            <div class="col-md-6">
                            <select name="localidad"
                            class="form-control @error('usuario') is-invalid @enderror"
                            id="localidad">
                            <option value="">Seleccione</option>     
                            </select>
                            @error('localidad')
                            <span class="invalid-feedback d-block" role="alert">
                                <strong>{{$message}}</strong>
                                </span>
                            @enderror
                            </div>
                        </div>-->
                        
                        <div class="form-group row">
                            <label for="localidad" class="col-md-4 col-form-label text-md-right">{{ __('Localidad*') }}</label>

                            <div class="col-md-6">
                                <input id="localidad" type="text" class="form-control @error('localidad') is-invalid @enderror" name="localidad" value="{{ old('localidad') }}" required autocomplete="localidad">

                                @error('localidad')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="rol" class="col-md-4 col-form-label text-md-right">Nivel Educativo*</label>
                            <div class="col-md-6">
                            <select name="nivelE"
                            class="form-control @error('enivelE') is-invalid @enderror"
                            id="nivelE">
                            <option value="">Seleccione</option>
                            <!--Comienzo for each -->
                            @foreach($grados as $grado)
                            <option value="{{$grado->id}}" {{old('nivelE')== $grado->id ? 'selected' : ''}}>{{$grado->nombre}}</option>
                            @endforeach
                            <!--termino for each -->
                            </select>
                            @error('nivelE')
                            <span class="invalid-feedback d-block" role="alert">
                                <strong>{{$message}}</strong>
                                </span>
                            @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="escuela" class="col-md-4 col-form-label text-md-right">{{ __('Escuela*') }}</label>

                            <div class="col-md-6">
                                <input id="escuela" type="text" class="form-control @error('escuela') is-invalid @enderror" name="escuela" value="{{ old('escuela') }}" required autocomplete="escuela">

                                @error('escuela')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="clave" class="col-md-4 col-form-label text-md-right">{{ __('Clave*') }}</label>

                            <div class="col-md-6">
                                <input id="clave" type="text" class="form-control @error('clave') is-invalid @enderror" name="clave" value="{{ old('clave') }}" required autocomplete="clave">

                                @error('clave')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <!-- este era el opcional - sector-->
                            <label for="sector" class="col-md-4 col-form-label text-md-right">{{ __('Sector') }}</label>

                            <div class="col-md-6">
                                <input id="sector" type="text" class="form-control @error('sector') is-invalid @enderror" name="sector" value="{{ old('sector') }}" required autocomplete="sector">

                                @error('sector')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="direccionE" class="col-md-4 col-form-label text-md-right">{{ __('Dirección de la escuela*') }}</label>

                            <div class="col-md-6">
                                <input id="direccionE" type="text" class="form-control @error('direccionE') is-invalid @enderror" name="direccionE" value="{{ old('direccionE') }}" required autocomplete="direccionE">

                                @error('direccionE')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="emailE" class="col-md-4 col-form-label text-md-right">{{ __('Correo electrónico(de la escuela)*') }}</label>

                            <div class="col-md-6">
                                <input id="emailE" type="email" class="form-control @error('emailE') is-invalid @enderror" name="emailE" value="{{ old('emailE') }}" required autocomplete="emailE">

                                @error('emailE')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="modalidad" class="col-md-4 col-form-label text-md-right">Modalidad de grado atendido*</label>
                            <div class="col-md-6">
                                <select name="modalidad"
                                class="form-control @error('modalidad') is-invalid @enderror"
                                id="modalidad">
                                    <option value="anual">Estatal</option>
                                    <option value="semestre">Federal</option>
                                    <option value="trimestre">Privada</option>
                                    <option value="cuatrimestre">Telesecundarias</option>
                                    <option value="cuatrimestre">Técnicas</option>
                                    <option value="cuatrimestre">Generales</option>
                                  </select>
                                  @error('modalidad')
                            <span class="invalid-feedback d-block" role="alert">
                                <strong>{{$message}}</strong>
                                </span>
                            @enderror
                            </div>
                          </div>

                        <div class="form-group row">
                            <label for="grado" class="col-md-4 col-form-label text-md-right">{{ __('Grado educativo atendido*') }}</label>

                            <div class="col-md-6">
                                <input id="grado" type="number" max="24" class="form-control @error('grado') is-invalid @enderror" name="grado" value="{{ old('grado') }}" required autocomplete="grado">

                                @error('grado')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>



                        <div class="form-group row">
                            <label for="hombres" class="col-md-4 col-form-label text-md-right">{{ __('Numero de estudiantes atendidos (hombres)*') }}</label>

                            <div class="col-md-6">
                                <input id="hombres" type="number" class="form-control @error('hombres') is-invalid @enderror" name="hombres" value="{{ old('hombres') }}" required autocomplete="hombres">

                                @error('hombres')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="mujeres" class="col-md-4 col-form-label text-md-right">{{ __('Numero de estudiantes atendidos (mujeres)*') }}</label>

                            <div class="col-md-6">
                                <input id="mujeres" type="number" class="form-control @error('mujeres') is-invalid @enderror" name="mujeres" value="{{ old('mujeres') }}" required autocomplete="mujeres">

                                @error('mujeres')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                    
                        <div class="card-header">{{ __('Datos de autoridades') }}</div>
                        <br>

                        <div class="form-group row">
                            <label for="director" class="col-md-4 col-form-label text-md-right">{{ __('Nombre del director*') }}</label>

                            <div class="col-md-6">
                                <input id="director" type="text" class="form-control @error('director') is-invalid @enderror" name="director" value="{{ old('director') }}" required autocomplete="director">

                                @error('director')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="directorEmail" class="col-md-4 col-form-label text-md-right">{{ __('Correo del director*') }}</label>

                            <div class="col-md-6">
                                <input id="directorEmail" type="email" class="form-control @error('directorEmail') is-invalid @enderror" name="directorEmail" value="{{ old('directorEmail') }}" required autocomplete="directorEmail">

                                @error('directorEmail')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="supervisor" class="col-md-4 col-form-label text-md-right">{{ __('Nombre del supervisor*') }}</label>

                            <div class="col-md-6">
                                <input id="supervisor" type="text" class="form-control @error('supervisor') is-invalid @enderror" name="supervisor" value="{{ old('supervisor') }}" required autocomplete="supervisor">

                                @error('supervisor')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="supervisorEmail" class="col-md-4 col-form-label text-md-right">{{ __('Correo electrónico del supervisor*') }}</label>

                            <div class="col-md-6">
                                <input id="supervisorEmail" type="email" class="form-control @error('supervisorEmail') is-invalid @enderror" name="supervisorEmail" value="{{ old('supervisorEmail') }}" required autocomplete="supervisorEmail">

                                @error('supervisorEmail')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                        {{-- Datos adicionales --}}
                        <div class="card-header">{{ __('Seguridad') }}</div>
                        <br>
                        <div class="form-group row">
                            <label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Contraseña*') }}</label>

                            <div class="col-md-6">
                                <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="new-password">

                                @error('password')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="password-confirm" class="col-md-4 col-form-label text-md-right">{{ __('Confirmar contraseña*') }}</label>

                            <div class="col-md-6">
                                <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
                            </div>
                        </div>

                        <div class="form-group row mb-0">
                            <div class="col-md-6 offset-md-4">
                                <button type="submit" class="btn btn-primary">
                                    {{ __('Register') }}
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection