@extends('layouts.app')
@section('css')
@endsection
@section('content')
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-title text-center ">
                    <h4> FICHA DE INSCRIPCION VIRTUAL</h4>
                    <h5> DIPLOMADO EN GESTIÓN PÚBLICA Y ESCOLAR</h5>

                </div>
                <div class="ibox-content ">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="row">
                                <div class="col-lg-6 mb-3">
                                    <label><b>D.N.I.</b> <span class=" text-danger">*</span> </label>
                                    <div class="input-group">
                                        <input id="dni" type="text" class="form-control" placeholder="Escriba un DNI">
                                        <span class="input-group-append">
                                            <button type="button" class="btn btn-primary" id="buscar_dni_api">Buscar</button>
                                        </span>
                                    </div>
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <label><b>Nombres</b> <span class=" text-danger">*</span> </label>
                                    <input id="nombre"type="text" class="form-control" placeholder="Escriba un nombre">
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <label><b>Apellido paterno</b> <span class=" text-danger">*</span> </label>
                                    <input id="paterno" type="text" class="form-control"
                                        placeholder="Escriba un apellido paterno">
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <label> <b>Apellido materno</b> <span class=" text-danger">*</span> </label>
                                    <input id="materno" type="text" class="form-control"
                                        placeholder="Escriba un apellido materno">
                                </div>
                        
                        
                                <div class="col-lg-6 mb-3">
                                    <label><b>Celular </b> <span class=" text-danger">*</span> </label>
                                    <input id="celular" type="text" class="form-control"
                                        placeholder="Escriba un numero de celular">
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <label><b>Correo electrónico</b> <span class=" text-danger">*</span> </label>
                                    <input id="correo" type="text" class="form-control"
                                        placeholder="Escriba un correo electrónico">
                                </div>
                                <div class="col-lg-12 mb-3">
                                    <label><b>UGEL</b> <span class=" text-danger">*</span> </label>
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <label>
                                                <input type="radio" checked="" value="Yunguyo" id="optionsRadios1"
                                                    name="optionsRadios1"> Yunguyo
                                            </label>
                                        </div>
                                        <div>
                                            <label>
                                                <input type="radio" value="Chucuito" id="optionsRadios2"
                                                    name="optionsRadios1">
                                                Chucuito
                                            </label>
                                        </div>
                                        <div>
                                            <label>
                                                <input type="radio" value="Sandia" id="optionsRadios3" name="optionsRadios1">
                                                Sandia
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <label><b>Condición laboral</b> <span class=" text-danger">*</span> </label>
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <label>
                                                <input type="radio" checked="" value="Nombrado" id="optionsRadios4"
                                                    name="optionsRadios2"> Nombrado
                                            </label>
                                        </div>
                                        <div>
                                            <label>
                                                <input type="radio" value="Contratado" id="optionsRadios5"
                                                    name="optionsRadios2">
                                                Contratado
                                            </label>
                                        </div>
                        
                                    </div>
                                </div>
                                <div class="col-lg-12 mb-3">
                                    <label><b>Nivel</b> <span class=" text-danger">*</span> </label>
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <label>
                                                <input type="radio" checked="" value="Inicial" id="optionsRadios6"
                                                    name="optionsRadios3"> Inicial
                                            </label>
                                        </div>
                                        <div>
                                            <label>
                                                <input type="radio" value="Primaria" id="optionsRadios7"
                                                    name="optionsRadios3">
                                                Primaria
                                            </label>
                                        </div>
                                        <div>
                                            <label>
                                                <input type="radio" value="Secundaria" id="optionsRadios8"
                                                    name="optionsRadios3">
                                                Secundaria
                                            </label>
                                        </div>
                                        <div>
                                            <label>
                                                <input type="radio" value="Otros" id="optionsRadios9"
                                                    name="optionsRadios3">
                                                Otros
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-12 mb-3">
                                    <label><b>Especialidad</b> <span class=" text-danger"></span> </label>
                                    <input id="especialidad" type="text" class="form-control"
                                        placeholder="Escriba una especialidad">
                                </div>
                                <div class="col-lg-12 mb-3">
                                    <label><b>Copia de DNI (.pdf)</b> <span class=" text-danger">*</span> </label>
                                    <input id="documento_dni" type="file" class="form-control">
                                </div>
                                <div class="col-lg-12 mb-3">
                                    <label><b>Copia de Título (.pdf)</b> <span class=" text-danger">*</span> </label>
                                    <input id="documento_titulo" type="file" class="form-control">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12 text-center mb-3">
                                    <button type="button" class="btn btn-sm btn-primary" id="registrar">Registrar
                                        Inscripción</button>
                        
                                </div>
                            </div>
                        
                        </div>
                        <div class="col-lg-6">
                            <div class="row">
                                <div class="col-lg-12">
                                    <img src="{{ asset('assets/img/afiche.jpg') }}" alt="" width="100%">
                                </div>
                        
                            </div>
                        </div>
                    </div>

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

    </div>

    <div class="modal fade" id="modal_ver_ficha">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Cargo</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="modal-body">

                    <div class="row">
                        <div class="col-sm-12">

                            <iframe id="documento_doc_ficha" width="100%" height="500"
                                src=""></iframe>

                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <a href="javascript:;" class="btn btn-white" data-dismiss="modal">Cerrar</a>
                </div>
            </div>
        </div>
    </div>
    <!-- #modal-dialog -->

@endsection
@section('js')
    <script src="{{ asset('js/formulario.js') }}"></script>
@endsection