@extends('new_header')
@section('main')

<div class="container-fluid ps-0">
    <!---->
    <div class="row shadow-lg flex-nowrap ps-0 ms-0 py-0 mt-5 pt-5">
        <!-- BARRA VERSION LARGE RESPONSE -->
        <div class="col-auto col-md-4 col-lg-3 col-xl-3 px-sm-2 px-0 d-md-inline d-none bg-fidelitas bg-gradient">
            <div class="d-flex flex-column align-items-center align-items-sm-start px-2 pt-5 text-white min-vh-100 sticky-top">
                <!---->
                <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">
                    <!----->
                    <li class="nav-item fs-4 my-2">
                        <a href="#" class="nav-link align-middle">
                            <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">Home</span>
                            </span>
                        </a>
                    </li>
                    <!----->
                    {{--<li class="nav-item">
                        <a href="#" class="nav-link align-middle px-0">
                            <span class="d-none d-md-inline">
                                <i class="bi bi-person-circle"></i> <span class="ms-1 d-none d-md-inline">Home</span>
                            </span>
                            <!---->
                            <span class="d-md-none d-inline">
                                <i class="bi bi-person-circle" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-original-title="Home"></i>
                            </span>
                        </a>
                    </li>
                    <!---->
                    <li class="nav-item">
                        <a href="#" class="nav-link align-middle px-0">
                            <span class="d-none d-md-inline">
                                <i class="bi bi-person-circle"></i> <span class="ms-1 d-none d-md-inline">Home</span>
                            </span>
                            <!---->
                            <span class="d-md-none d-inline">
                                <i class="bi bi-person-circle" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-original-title="Home"></i>
                            </span>
                        </a>
                    </li>
                    <!---->
                    <li class="nav-item">
                        <a href="#" class="nav-link align-middle px-0">
                            <span class="d-none d-md-inline">
                                <i class="bi bi-person-circle"></i> <span class="ms-1 d-none d-md-inline">Home</span>
                            </span>
                            <!---->
                            <span class="d-md-none d-inline">
                                <i class="bi bi-person-circle" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-original-title="Home"></i>
                            </span>
                        </a>
                    </li>
                    <!---->
                    <li class="nav-item">
                        <a href="#" class="nav-link align-middle px-0">
                            <span class="d-none d-md-inline">
                                <i class="bi bi-person-circle"></i> <span class="ms-1 d-none d-md-inline">Home</span>
                            </span>
                            <!---->
                            <span class="d-md-none d-inline">
                                <i class="bi bi-person-circle" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-original-title="Home"></i>
                            </span>
                        </a>
                    </li>--}}
                    <!---->
                </ul>
            </div>
        </div>
        <!-- BARRA VERSION SMALL RESPONSE -->
        <div class="offcanvas offcanvas-start d-md-none d-inline w-25 bg-fidelitas bg-gradient" tabindex="-1" id="offcanvas" data-bs-keyboard="false" data-bs-backdrop="false">
            <div class="offcanvas-header">
                {{--<img src="{{ Session::get('webdata')['uri_icon'] }}" alt="{{ Session::get('webdata')['web_title'] }}" height="10" class="img-thumbnail"/>--}}
                <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body px-0">
                <ul class="nav nav-pills flex-column mb-sm-auto mb-0 align-items-start" id="menu">
                    <li class="nav-item">
                        <a href="#" class="nav-link align-middle ms-2 text-decoration-none text-white">                            
                            <!---->
                            <span class="">Home</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>
            </div>
        </div>
        <!-- Formulario de datos --->
        <div class="col">
            <form id="formulario_datos_personales" action="#">
                <div class="row justify-content-start d-md-none d-inline">
                    <div class="col">
                        <a class="btn float-start bg-fidelitas text-white" data-bs-toggle="offcanvas" data-bs-target="#offcanvas" role="button">
                            <i class="bi bi-list fs-3" data-bs-toggle="offcanvas" data-bs-target="#offcanvas"></i>
                        </a>
                    </div>
                </div>
                <div class="row my-4">
                    <div class="col-md-10">
                        <h4 class="text-start">Datos Personales</h4>
                    </div>
                    <div class="col-md-2">
                        <a href="/iv/iv-panel-control" class="d-flex align-items-center pb-3 mb-md-0 me-md-auto text-white text-decoration-none">
                        <div class="d-none d-md-inline">
                            <img src="{{ Session::get('webdata')['uri_logo'] }}" alt="{{ Session::get('webdata')['web_title'] }}" height="40" class="img-fluid bg-white"/>
                        </div>
                    </div>
                </a>
                </div>
                <!----->
                <div class="row form-group my-3 mx-1">
                    <label for="nombre" class="form-label ps-0">Nombre <b class="text-danger">*</b> </label>
                    <input type="text" class="form-control form-control-sm" id="nombre" name="nombre" readonly>
                </div>
                <!----->
                <div class="row form-group my-3 mx-1">
                    <label for="apellido" class="form-label ps-0">Apellido <b class="text-danger">*</b> </label>
                    <input type="text" class="form-control form-control-sm" id="apellido" name="apellido" readonly>
                </div>
                <!----->
                <div class="row form-group my-3 mx-1">
                    <label for="foto" class="form-label ps-0">Foto <b class="text-danger">*</b> </label>
                    <input type="file" class="form-control form-control-sm" id="foto" name="foto" >
                </div>
                <!----->
                <div class="row justify-content-end form-group my-3 mx-1">
                    <div class="col-12 col-md-6 my-2 ps-0">
                        <label for="sexo" class="form-label">Sexo <b class="text-danger">*</b> </label>
                        <select name="sexo" id="sexo" class="form-select form-select-sm">
                            <option value="">Seleccione la opcion</option>
                            <option value="M">Masculino</option>
                            <option value="F">Femenino</option>
                            <option value="O">Otro</option>
                        </select>
                    </div>
                    <div class="col-12 col-md-6 my-2">
                        <label for="fecha_de_nacimiento" class="form-label">Fecha de Nacimiento <b class="text-danger">*</b> </label>
                        <input type="text" name="fecha_de_nacimiento" id="fecha_de_nacimiento" class="form-control form-control-sm">
                    </div>
                </div>
                <!----->
                <div class="row form-group my-3 mx-1">
                    <label for="pais_de_nacimiento" class="form-label ps-0">Pais de Nacimiento <b class="text-danger">*</b> </label>
                    <select name="pais_de_nacimiento" id="pais_de_nacimiento" class="form-select form-select-sm">
                        <option value="">Seleccione la opcion</option>
                    </select>
                </div>
                <!------>
                <div class="row justify-content-end form-group my-3 mx-1">
                    <div class="col-12 col-md-6 my-2 ps-0">
                        <label for="nacionalidad" class="form-label">Nacionalidad <b class="text-danger">*</b> </label>
                        <select name="nacionalidad" id="nacionalidad" class="form-select form-select-sm">
                            <option value="">Seleccione la opcion</option>
                        </select>
                    </div>
                    <!---->
                    <div class="col-12 col-md-6 my-2">
                        <label for="segunda_nacionalidad" class="form-label">Segunda Nacionalidad <b class="text-danger">*</b> </label>
                        <select name="segunda_nacionalidad" id="segunda_nacionalidad" class="form-select form-select-sm">
                            <option value="">Seleccione la opcion</option>
                            <option value="">Ninguna</option>
                        </select>
                    </div>
                </div>
                <!----->
                <div class="row justify-content-end form-group my-3 mx-1">
                    <div class="col-12 col-md-6 ps-0">
                        <label for="dni" class="form-label">DNI <b class="text-danger">*</b> </label>
                        <input type="text" id="dni" name="dni" class="form-control form-control-sm" readonly>
                    </div>
                    <!---->
                    <div class="col-12 col-md-6">
                        <label for="cuil" class="form-label">CUIL <b class="text-danger">*</b> </label>
                        <input type="text" id="cuil" name="cuil" class="form-control form-control-sm" readonly>
                    </div>
                </div>
                <!----->
                <div class="row form-group my-3 mx-1">
                    <label for="foto_dni_frente" class="form-label ps-0">DNI Frente <b class="text-danger">*</b> </label>
                    <input type="file" id="foto_dni_frente" name="foto_dni_frente" class="form-control form-control-sm">
                </div>
                <!----->
                <div class="row form-group my-3 mx-1">
                    <label for="foto_dni_dorso" class="form-label ps-0">DNI Dorso <b class="text-danger">*</b> </label>
                    <input type="file" id="foto_dni_dorso" name="foto_dni_dorso" class="form-control form-control-sm">
                </div>
                <!----->
                <div class="row justify-content-end form-group my-3 mx-1">
                    <div class="col-12 col-md-5 my-2 ps-0" id="seccion_estado_civil">
                        <label for="estado_civil" class="form-label ps-0">Estado Civil <b class="text-danger">*</b> </label>
                        <select name="estado_civil" id="estado_civil" class="form-select form-select-sm">
                            <option value="">Seleccione la opcion</option>
                            <option value="soltero">Soltero</option>
                            <option value="casado">Casado / Vive en pareja</option>
                            <option value="viudo">Viudo</option>
                            <option value="otro">Otro (especificar)</option>
                        </select>
                    </div>
                    <!---->
                    <div class="col-12 col-md-4 my-2 d-none" id="seccion_otro_estado_civil">
                        <label for="otra_opcion_estado_civil" class="form-label">Especificar Opcion</label>
                        <input type="text" id="otra_opcion_estado_civil" name="otra_opcion_estado_civil" class="form-control form-control-sm" disabled>
                    </div>
                    <!---->
                    <div class="col-12 col-md-5 my-2" id="seccion_pasaporte">
                        <label for="nro_pasaporte" class="form-label">Número de Pasaporte <b class="text-danger">*</b> </label>
                        <input type="text" id="nro_pasaporte" name="nro_pasaporte" class="form-control form-control-sm" data-format="">
                        <div class="invalid-feedback"></div>
                    </div>
                    <!----->
                    <div class="col-2 form-check my-md-4 my-2 py-md-3">
                        <input class="form-check-input" type="checkbox" value="" id="sin_pasaporte">
                        <label class="form-check-label" for="sin_pasaporte">
                            No tengo
                        </label>
                    </div>
                </div>
                <div class="row justify-content-end py-lg-3">
                    <div class="col-12 col-lg-2 d-grid">
                        <button class="btn btn-success">Siguiente</button>
                    </div>
                </div>
            </form>
        </div>
        <!----->
    </div>
</div>
@endsection

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