@extends("admin.layout.layout")

@section("styles")
    @php
        $titulo = "Estudiante";
        $modulo = "Estudiantes";
        $vista="Registro";
    @endphp
    <title>{{getenv("APP_NAME")}} | {{$titulo }} {{$vista}}</title>
@endsection

@section("contenido")
    <div class="card">
        <div class="card-body">
            @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 class="form w-100"  action="{{route("admin::estudiante.registrar")}}" method="post">
                @csrf
                <div class="fv-row mb-4">
                    <div class="row">
                        <div class="col-md-3">
                            <label class="form-label required" for="tipo_identificación_id">Tipo de identificación</label>
                            <select name="tipo_identificacion_id" id="tipo_identificacion_id" class="form-select form-select-lg mt-1" data-control="select2" data-placeholder="Seleccione..." data-allow-clear="false" data-hide-search="true" required>
                                @foreach($tiposIdentificaciones as $tipoIdentificacion)
                                    <option value="{{$tipoIdentificacion->id}}">{{$tipoIdentificacion->tipo_identificacion}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label for="identificacion" class="form-label  required">Numero de identificación</label>
                            <input type="text" class="form-control form-control-lg input-cedula" name="identificacion" id="identificacion" value="{{ old('identificacion') }}" required/>
                            <input type="hidden" class="form-control form-control-lg" name="uso_registro_civil" id="uso_registro_civil" value="{{ old('uso_registro_civil') }}" readonly />
                            <div id="loader_cedula" style="display: none;">
                                <i class="fas fa-spinner fa-spin"></i> Cargando...
                            </div>
                            <div id="error_cedula" class="text-info" style="display: none;">
                                <i class="fas fa-close text-info"></i> Cédula no encontrada...
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mb-4">
                    <div class="col-md-4">
                        <label for="nombre" class="form-label  required">Nombre(s)</label>
                        <input type="text" class="form-control form-control-lg" name="nombre" id="nombre"  value="{{ old('nombre') }}" required/>
                    </div>
                    <div class="col-md-4">
                        <label for="primer_apellido" class="form-label  required">Primer apellido</label>
                        <input type="text" class="form-control form-control-lg" name="primer_apellido" id="primer_apellido" value="{{ old('primer_apellido') }}" required/>
                    </div>
                    <div class="col-md-4">
                        <label for="segundo_apellido" class="form-label ">Segundo apellido</label>
                        <input type="text" class="form-control form-control-lg" name="segundo_apellido" id="segundo_apellido" value="{{ old('segundo_apellido') }}" />
                    </div>
                </div>
                <div class="fv-row mb-4">
                    <div class="row">
                        <div class="col-md-3">
                            <label class="form-label required" for="tipo_nacionalidad_id">Nacionalidad</label>
                            <select name="tipo_nacionalidad_id" id="tipo_nacionalidad_id" class="form-select form-select-lg mt-1" data-control="select2" data-placeholder="Seleccione..." data-allow-clear="false" required>
                                <option value=""></option>
                                @foreach($tiposNacionalidades as $tipoNacionalidad)
                                    <option value="{{ $tipoNacionalidad->id }}" @if(old('tipo_nacionalidad_id') == $tipoNacionalidad->id) selected @endif>
                                        {{ $tipoNacionalidad->tipo_nacionalidad }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label required" for="sexo">Sexo</label>
                            <select name="tipo_sexo_id" id="tipo_sexo_id" class="form-select form-select-lg mt-1" data-control="select2" data-placeholder="Seleccione..." data-allow-clear="false" data-hide-search="true" required>
                                <option value=""></option>
                                @foreach($tiposSexos as $tipoSexo)
                                    <option value="{{ $tipoSexo->id }}" @if(old('tipo_sexo_id') == $tipoSexo->id) selected @endif>
                                        {{ $tipoSexo->tipo_sexo }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label for="nacimiento" class="form-label required">Fecha nacimiento</label>
                            <input type="date" class="form-control form-control-lg" name="nacimiento" id="nacimiento" value="{{ old('nacimiento') }}" required/>
                        </div>
                        <div class="col-md-2">
                            <label for="edad" class="form-label">Edad</label>
                            <input type="number" class="form-control form-control-lg" name="edad" id="edad" readonly value="{{old('edad')}}"  />
                        </div>
                    </div>
                </div>

                <div class="fv-row mb-4">
                    <div class="row">
                        <div class="col-md-6">
                            <label for="correo" class="form-label required ">Correo</label>
                            <input type="email" class="form-control form-control-lg" name="correo" id="correo" value="{{old('correo')}}"  required/>
                        </div>
                        <div class="col-md-3">
                            <label for="celular" class="form-label required ">Celular</label>
                            <input type="text" class="form-control form-control-lg input-telefono" name="celular" id="celular" value="{{old('celular')}}"  required/>
                        </div>
                    </div>
                </div>
                <div class="fv-row mb-4">
                    <div class="row">
                        <div class="col-md-2">
                            <label for="provincia_id" class="form-label required ">Provincia</label>
                            <select name="provincia_id" id="provincia_id" class="form-select form-select-lg provincia_id" data-control="select2" data-placeholder="Seleccione..." data-allow-clear="false" data-hide-search="true" required >
                                <option value=""></option>
                                @foreach($provincias as $provincia)
                                    <option value="{{$provincia->id}}">{{$provincia->provincia}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label for="canton_id" class="form-label required ">Cantón</label>
                            <select name="canton_id" id="canton_id" class="form-select form-select-lg canton_id" data-control="select2" data-placeholder="Seleccione..." data-allow-clear="false" data-hide-search="true" required >
                                <option value=""></option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label for="distrito_id" class="form-label required ">Distrito</label>
                            <select name="distrito_id" id="distrito_id" class="form-select form-select-lg distrito_id" data-control="select2" data-placeholder="Seleccione..." data-allow-clear="false" data-hide-search="true" required >
                                <option value=""></option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="direccion" class="form-label required ">Dirección exacta</label>
                            <input type="text" class="form-control form-control-lg" name="direccion" id="direccion" value="{{old('direccion')}}"  required/>
                        </div>
                    </div>
                    <div class="d-flex mt-10 justify-content-center">
                            <button type="submit" id="bnt_submit" class="btn btn-success">
                                <span class="indicator-label"><i class="fas fa-save pe-2"></i> Registrar estudiante</span>
                                <span class="indicator-progress">Por favor espera...
                                <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                            </span>
                            </button>
                    </div>
                </div>

            </form>
        </div>
    </div>

@endsection

@section("scripts")
    <script> window.url_buscar_cedula = "{{ route('admin::estudiante.buscar.cedula',':cedula') }}";</script>
    <script> window.urlGetCantones = "{{ route('direccion.get.cantones',':provincia') }}";</script>
    <script> window.urlGetDistritos = "{{ route('direccion.get.distritos',':canton') }}";</script>

    @vite(['resources/js/global/tools.js'])
    @vite(['resources/js/global/validaciones.js'])
    @vite(['resources/js/global/seleccionarDistrito.js'])
    <script>
        $(document).ready(function() {
        });
    </script>
@endsection