@extends('/facon/formulario_generico')
<!---- BARRA DE MENU VERTICAL EN PANTALLA GRANDE ---->
@section('barra_large')
<div class="row justify-content-center">
    <h3 class="py-3"><b>Hola Cliente Demo</b></h3>
    <!----->
    <p class="d-flex"> Por favor Completa el formulario solicitado por Cliente Demo ,</p>
    <p class="d-flex"> Si tenes dudas podes escribir a asistencia@inquirovitae.com o llamanos al 11 5254 9950 int. 231. </p>
    <p class="d-flex"> Tenes 46h para completar y enviar el formulario </p>
</div>
<!----->
<ul class="nav nav-pills flex-column align-items-center align-items-sm-start mb-sm-auto mb-0" role="tablist">
    <!----->
    <li class="nav-item fs-4 my-2" role="presentation">
        <a class="nav-link active align-middle pill-lg" id="pill_datos_personales" data-bs-toggle="pill" data-bs-target="#seccion_datos_personales" type="button" role="tab" aria-controls="seccion_datos_personales" data-other-item="pill_datos_personales_responsive">
            <span class="d-none d-md-inline text-white">
                <i class="bi bi-person-circle"></i> <span class="ms-1 d-none d-md-inline">Datos Personales</span>
            </span>
        </a>
    </li>
    <!----->
    <li class="nav-item fs-4 my-2" role="presentation">
        <a href="#" class="nav-link align-middle pill-lg" id="pill_datos_contacto" data-bs-toggle="pill" data-bs-target="#seccion_datos_contacto" type="button" role="tab" aria-controls="seccion_datos_contacto" data-other-item="pill_datos_contacto_responsive">
            <span class="d-none d-md-inline text-white">
                <i class="bi bi-house-door-fill"></i> <span class="ms-1 d-none d-md-inline">Datos de Contacto</span>
            </span>
        </a>
    </li>
    <!----->
    <li class="nav-item fs-4 my-2" role="presentation">
        <a href="#" class="nav-link align-middle pill-lg" id="pill_grupo_familiar" data-bs-toggle="pill" data-bs-target="#seccion_grupo_familiar" type="button" role="tab" aria-controls="seccion_grupo_familiar" data-other-item="pill_grupo_familiar_responsive">
            <span class="d-none d-md-inline text-white">
                <i class="bi bi-people-fill"></i> <span class="ms-1 d-none d-md-inline">Grupo Familiar</span>
            </span>
        </a>
    </li>
    <!----->
    <li class="nav-item fs-4 my-2" role="presentation">
        <a href="#" class="nav-link align-middle pill-lg" id="pill_perfil_academico" data-bs-toggle="pill" data-bs-target="#seccion_perfil_academico" type="button" role="tab" aria-controls="seccion_perfil_academico" data-other-item="pill_perfil_academico_responsive">
            <span class="d-none d-md-inline text-white">
                <i class="bi bi-mortarboard-fill"></i> <span class="ms-1 d-none d-md-inline">Perfil Academico</span>
            </span>
        </a>
    </li>
    <!----->
    <li class="nav-item fs-4 my-2" role="presentation">
        <a href="#" class="nav-link align-middle pill-lg" id="pill_experiencia_laboral" data-bs-toggle="pill" data-bs-target="#seccion_experiencia_laboral" type="button" role="tab" aria-controls="seccion_experiencia_laboral" data-other-item="pill_experiencia_laboral_responsive">
            <span class="d-none d-md-inline text-white">
                <i class="bi bi-briefcase-fill"></i> <span class="ms-1 d-none d-md-inline">Experiencia Laboral</span>
            </span>
        </a>
    </li>
    <!----->
</ul>
@endsection
<!------>
@section('barra_chica')
<ul class="nav nav-pills flex-column mb-sm-auto mb-0 align-items-start" id="menu">
    <li class="nav-item">
        <a href="#" id="pill_datos_personales_responsive" class="nav-link active align-middle ms-2 text-decoration-none text-white pill-sm" data-bs-toggle="pill" data-bs-target="#seccion_datos_personales" role="tab" aria-controls="seccion_datos_personales" data-other-item="pill_datos_personales">                            
            <!---->
            <span class="">Datos Personales</span>
        </a>
    </li>
    <!----->
    <li class="nav-item">
        <a href="#" id="pill_datos_contacto_responsive" class="nav-link align-middle ms-2 text-decoration-none text-white pill-sm" data-bs-toggle="pill" data-bs-target="#seccion_datos_contacto" role="tab" aria-controls="seccion_datos_contacto" data-other-item="pill_datos_contacto">
            <span>Datos de Contacto</span>
        </a>
    </li>
    <!----->
    <li class="nav-item">
        <a href="#" id="pill_grupo_familiar_responsive" class="nav-link align-middle ms-2 text-decoration-none text-white pill-sm" data-bs-toggle="pill" data-bs-target="#seccion_grupo_familiar" role="tab" aria-controls="seccion_grupo_familiar" data-other-item="pill_grupo_familiar">
            <span>Grupo Familiar</span>
        </a>
    </li>
    <!----->
    <li class="nav-item">
        <a href="#" id="pill_perfil_academico_responsive" class="nav-link align-middle ms-2 text-decoration-none text-white pill-sm" data-bs-toggle="pill" data-bs-target="#seccion_perfil_academico" role="tab" aria-controls="seccion_perfil_academico" data-other-item="pill_perfil_academico">
            <span>Perfil Academico</span>
        </a>
    </li>
    <!----->
    <li class="nav-item">
        <a href="#" id="pill_experiencia_laboral_responsive" class="nav-link align-middle ms-2 text-decoration-none text-white pill-sm" data-bs-toggle="pill" data-bs-target="#seccion_experiencia_laboral" role="tab" aria-controls="seccion_experiencia_laboral" data-other-item="pill_experiencia_laboral">
            <span>Experiencia Laboral</span>
        </a>
    </li>
    <!----->
    {{--<li class="nav-item">
        <a href="#" class="nav-link text-truncate">
            <i class="fs-5 bi-house"></i><span class="ms-1 d-none d-sm-inline">Home</span>
        </a>
    </li>
    <li>
        <a href="#submenu1" data-bs-toggle="collapse" class="nav-link text-truncate">
            <i class="fs-5 bi-speedometer2"></i><span class="ms-1 d-none d-sm-inline">Dashboard</span> </a>
    </li>
    <li>
        <a href="#" class="nav-link text-truncate">
            <i class="fs-5 bi-table"></i><span class="ms-1 d-none d-sm-inline">Orders</span></a>
    </li>
    <li class="dropdown">
        <a href="#" class="nav-link dropdown-toggle  text-truncate" id="dropdown" data-bs-toggle="dropdown" aria-expanded="false">
            <i class="fs-5 bi-bootstrap"></i><span class="ms-1 d-none d-sm-inline">Bootstrap</span>
        </a>
        <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdown">
            <li><a class="dropdown-item" href="#">New project...</a></li>
            <li><a class="dropdown-item" href="#">Settings</a></li>
            <li><a class="dropdown-item" href="#">Profile</a></li>
            <li>
                <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
    </li>
    <li>
        <a href="#" class="nav-link text-truncate">
            <i class="fs-5 bi-grid"></i><span class="ms-1 d-none d-sm-inline">Products</span></a>
    </li>
    <li>
        <a href="#" class="nav-link text-truncate">
            <i class="fs-5 bi-people"></i><span class="ms-1 d-none d-sm-inline">Customers</span> </a>
    </li>--}}
</ul>
@endsection
<!-- SECCION DEL FORMULARIO ---->
@section('formulario')
<div id="formularios_candidatos_inquiro" class="tab-content">
    <!----------------------->
    <!-- DATOS PERSONALES --->
    <!----------------------->
    <div class="tab-pane fade show active" id="seccion_datos_personales" role="tabpanel" aria-labelledby="pill_datos_personales">
        <!--- Seccion Datos Personales --->
        @include('facon/seccion_formulario_datos_personales')
        <!------>
        <div class="row justify-content-end py-lg-3">
            <!-- Boton siguiente -->
            <div class="col-12 col-lg-2 d-grid">
                <a type="button" class="btn btn-success" data-tab-siguiente="seccion_datos_contacto" data-tab-anterior="seccion_datos_personales" data-pill-siguiente="pill_datos_contacto" data-pill-anterior="pill_datos_personales" onClick="moverEntreSeccionesFormulario(this);">Siguiente</a>
            </div>
        </div>
        <!------>
    </div>
    <!----------------------->
    <!-- DATOS DE CONTACTO -->
    <!----------------------->
    <div class="tab-pane fade" id="seccion_datos_contacto" role="tabpanel" aria-labelledby="pill_datos_contacto">
        <!---->
        @include('/facon/seccion_formulario_datos_contacto')
        <div class="row justify-content-end py-lg-3">
            <!---- Boton anterior --->
            <div class="col-12 col-lg-2 d-grid my-2">
                <a type="button" class="btn btn-secondary" data-tab-siguiente="seccion_datos_personales" data-tab-anterior="seccion_datos_contacto" data-pill-siguiente="pill_datos_personales" data-pill-anterior="pill_datos_contacto" onClick="moverEntreSeccionesFormulario(this);">Anterior</a>
            </div>
            <!-- Boton siguiente --->
            <div class="col-12 col-lg-2 d-grid my-2">
                <a type="button" class="btn btn-success" data-tab-siguiente="seccion_grupo_familiar" data-tab-anterior="seccion_datos_contacto" data-pill-siguiente="pill_grupo_familiar" data-pill-anterior="pill_datos_contacto" onClick="moverEntreSeccionesFormulario(this);">Siguiente</a>
            </div>
        </div>
    </div>
    <!--------------------->
    <!-- GRUPO FAMILIAR -->
    <!--------------------->
    <div class="tab-pane fade" id="seccion_grupo_familiar" role="tabpanel" aria-labelledby="pill_grupo_familiar">
        <!----->
        @include('/facon/seccion_formulario_grupo_familiar')
        <!----->
        <div class="row justify-content-end py-lg-3">
            <!-- Boton anterior -->
            <div class="col-12 col-lg-2 d-grid my-2">
                <a type="button" class="btn btn-secondary" data-tab-siguiente="seccion_datos_contacto" data-tab-anterior="seccion_grupo_familiar" data-pill-siguiente="pill_datos_contacto" data-pill-anterior="pill_grupo_familiar" onClick="moverEntreSeccionesFormulario(this);">Anterior</a>
            </div>
            <!-- Boton siguiente -->
            <div class="col-12 col-lg-2 d-grid my-2">
                <a type="button" class="btn btn-success" data-tab-siguiente="seccion_perfil_academico" data-tab-anterior="seccion_grupo_familiar" data-pill-siguiente="pill_perfil_academico" data-pill-anterior="pill_grupo_familiar" onClick="moverEntreSeccionesFormulario(this);">Siguiente</a>
            </div>
        </div>
    </div>
    <!---------------------->
    <!-- PERFIL ACADEMICO -->
    <!---------------------->
    <div class="tab-pane fade" id="seccion_perfil_academico" role="tabpanel" aria-labelledby="pill_perfil_academico">
        @include('/facon/seccion_formulario_perfil_academico')
        <div class="row justify-content-end py-lg-3">
            <!-- Boton anterior -->
            <div class="col-12 col-lg-2 d-grid my-2">
                <a type="button" class="btn btn-secondary" data-tab-siguiente="seccion_grupo_familiar" data-tab-anterior="seccion_perfil_academico" data-pill-siguiente="pill_grupo_familiar" data-pill-anterior="pill_perfil_academico" onClick="moverEntreSeccionesFormulario(this);">Anterior</a>
            </div>
            <!-- Boton siguiente -->
            <div class="col-12 col-lg-2 d-grid my-2">
                <a type="button" class="btn btn-success" data-tab-siguiente="seccion_experiencia_laboral" data-tab-anterior="seccion_perfil_academico" data-pill-siguiente="pill_experiencia_laboral" data-pill-anterior="pill_perfil_academico" onClick="moverEntreSeccionesFormulario(this);">Siguiente</a>
            </div>
        </div>
    </div>
    <!------------------------>
    <!-- EXPERIENCIA LABORAL-->
    <!------------------------>
    <div class="tab-pane fade" id="seccion_experiencia_laboral" role="tabpanel" aria-labelledby="pill_experiencia_laboral">
        @include('facon/seccion_formulario_experiencia_laboral')
        <!---->
        <div class="row justify-content-end py-lg-3">
            <!-- Boton anterior -->
            <div class="col-12 col-lg-2 d-grid">
                <a type="button" class="btn btn-secondary" data-tab-siguiente="seccion_perfil_academico" data-tab-anterior="seccion_experiencia_laboral" data-pill-siguiente="pill_perfil_academico" data-pill-anterior="pill_experiencia_laboral" onClick="moverEntreSeccionesFormulario(this);">Anterior</a>
            </div>
        </div>
    </div>
</form> 
@endsection

@section('jsFunction')
    <script src="{{ asset('/Libreria_CA/Js/facon.js') }}?v={{rand()}}"></script>
    <script>
        $(document).ready(function(){
            llamadaFancon();
        });
    </script>
@endsection