<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script src="https://unpkg.com/gijgo@1.9.13/js/gijgo.min.js" type="text/javascript"></script>
<link href="https://unpkg.com/gijgo@1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<script src="https://unpkg.com/gijgo@1.9.13/js/messages/messages.es-es.js" type="text/javascript"></script>
<header id="header" class="">
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark menu-color">
<div class="container">
<!-- Navbar brand -->
<!-- Collapse button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"
aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="basicExampleNav">
<!-- Links -->
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="home-logged.html">Inicio
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="request-safe-conduct.html">Salvoconducto</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Lista de Salvoconducto</a>
</li>
<li class="nav-item">
<a class="nav-link" href="perfil.html">Perfil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Información</a>
</li>
</ul>
<!-- Links -->
<!-- Links -->
<form class="form-inline" action="#!">
<div class="md-form my-0">
<a class="white-text cerrar-sesion" type="submit" >Cerrar Seccion</a>
</div>
</form>
</div>
<!-- Collapsible content -->
</div>
</nav>
<!--/.Navbar-->
<div class="container safe-conduct">
<div class="row">
<div class="col" align="center">
<!-- Card -->
<div class="card contenedor-safe-conduct">
<h4 class=" card-header h4 mb-3 barra-titulos white-text">¿NECESITA UN SALVOCONDUCTO?</h4>
<p class="titulo-request">Genere su salvoconducto digital</p>
<div class="sub-contenido-pre">
<p>
Declaración Autorresponsable de Desplazamiento en el marco del estado de alarma por la crisis sanitaria COVID-19.
</p>
</div>
<!-- Card content -->
<div class="card-body">
<form class="text-center p-1" action="#!">
<div class="row row-contenedor1">
<div class="cont-subtirulo-safe">
<h4 class=" card-header h4 mb-3 barra-titulos white-text">Usuario Identificado</h4>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div align="left">
<label for="nombre">Nombre</label>
<input type="text" id="nombre" name="nombre" value="Fancy" readonly class="form-control mb-4" required>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div align="left">
<label for="apellido">Apellidos</label>
<input type="text" id="apellido" name="apellido" value="Dancy" readonly class="form-control mb-4" required>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div align="left">
<label for="email">Email</label>
<input type="email" id="email" name="email" value="JoaquinCopete@gmail.com" readonly class="form-control mb-4" required>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div align="left">
<label for="dni">DNI / Pasaporte / NIE</label>
<input type="text" id="dni" name="dni" value="75.521.256-H" readonly class="form-control mb-4" required>
</div>
</div>
<div class="col-12">
<div align="left">
<label for="direccion">Dirección de Origen</label>
<input type="text" id="direccion" name="direccion" value="Calle Ciudadela 10. Las Rozas. Madrid" readonly class="form-control mb-4" required>
</div>
</div>
<div class="col-12">
<div align="left">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="micheckbox" value="" >
<label class="form-check-label p-2" for="micheckbox">Usar otra Dirección</label>
</div>
<input type="text" id="otraDireccion" name="direccion2" value="" class="form-control mb-4">
</div>
</div>
</div>
<!-- row 2 -->
<div class="row row-contenedor2">
<div class="cont-subtirulo-safe">
<h4 class=" card-header h4 mb-3 barra-titulos white-text">Datos del Salvoconducto</h4>
</div>
<div class="col-12">
<div align="left">
<label for="fecha">Fecha de Generación del Salvoconducto </label>
</div>
</div>
<div class="col-4">
<div align="left">
<input type="text" id="fecha" name="fecha" value="04/05/2020" readonly class="form-control mb-4">
</div>
</div>
<div class="col-12">
<div align="left" class="cont-razon">
<legend>Motivo del Desplazamiento (Marcar el que corresponda)</legend>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="reason1" name="reason">
<label class="custom-control-label" for="reason1">Adquisición de alimentos, productos farmacéuticos y de primera necesidad.</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="reason2" name="reason">
<label class="custom-control-label" for="reason2">Asistencia a centro, servicio o establecimiento sanitario.</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="reason3" name="reason">
<label class="custom-control-label" for="reason3">Desplazamiento desde/hasta el lugar de trabajo para efectuar la prestación laboral, profesional o empresarial. (Indicar empresa).</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="reason4" name="reason">
<label class="custom-control-label" for="reason4">Asistencia o cuidado a mayores, menores, dependientes, personas con discapacidad o personas especialmente vulnerables.</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="reason5" name="reason">
<label class="custom-control-label" for="reason5">Desplazamiento a entidades financieras o de seguros.</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="reason6" name="reason">
<label class="custom-control-label" for="reason6">Dausa de fuerza mayor o situación de necesidad. (Justificar).</label>
</div>
</div>
</div>
<div class="col-12">
<div align="left">
<input type="text" id="reason" name="reason" value="" placeholder=" “Introduce otras causas, empresa, comercio al que va, o cualquier comentario que considere“ " class="form-control mb-4">
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div align="left">
<label for="fecha-desplazamiento">Fecha del Desplazamiento</label>
<input class="form-control" value="" id="fecha-desplazamiento" name="fecha-desplazamiento" required -->
<script>
var datepicker, config;
config = {
locale: 'es-es',
uiLibrary: 'bootstrap4'
};
//$('#fecha-desplazamiento').datepicker();
datepicker = $('#fecha-desplazamiento').datepicker(config);
</script>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div align="left">
<label for="hora-salida">Hora de Salida</label>
<input class="form-control" type="text" value="" id="hora-salida" placeholder="00:00" name="hora-salida" required>
<script>
$('#hora-salida').timepicker({
uiLibrary: 'bootstrap4'
});
</script>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div align="left">
<label for="hora-llegada">Hora de Llegada</label>
<input class="form-control" type="text" value="" placeholder="00:00" id="hora-llegada" name="hora-llegada" required>
<script>
$('#hora-llegada').timepicker({
uiLibrary: 'bootstrap4'
});
</script>
</div>
</div>
<div class="col-12 mt-4">
<div align="left">
<label for="direccion-destino">Dirección de Destino</label>
<input type="text" id="direccion-destino" name="direccion-destino" value="" class="form-control mb-4" required>
<select id="busqueda_provincia">
<option value='alava'>Álava</option>
<option value='albacete'>Albacete</option>
<option value='alicante'>Alicante/Alacant</option>
<option value='almeria'>Almería</option>
<option value='asturias'>Asturias</option>
<option value='avila'>Ávila</option>
<option value='badajoz'>Badajoz</option>
<option value='barcelona'>Barcelona</option>
<option value='burgos'>Burgos</option>
<option value='caceres'>Cáceres</option>
<option value='cadiz'>Cádiz</option>
<option value='cantabria'>Cantabria</option>
<option value='castellon'>Castellón/Castelló</option>
<option value='ceuta'>Ceuta</option>
<option value='ciudadreal'>Ciudad Real</option>
<option value='cordoba'>Córdoba</option>
<option value='cuenca'>Cuenca</option>
<option value='girona'>Girona</option>
<option value='laspalmas'>Las Palmas</option>
<option value='granada'>Granada</option>
<option value='guadalajara'>Guadalajara</option>
<option value='guipuzcoa'>Guipúzcoa</option>
<option value='huelva'>Huelva</option>
<option value='huesca'>Huesca</option>
<option value='illesbalears'>Illes Balears</option>
<option value='jaen'>Jaén</option>
<option value='acoruña'>A Coruña</option>
<option value='larioja'>La Rioja</option>
<option value='leon'>León</option>
<option value='lleida'>Lleida</option>
<option value='lugo'>Lugo</option>
<option value='madrid'>Madrid</option>
<option value='malaga'>Málaga</option>
<option value='melilla'>Melilla</option>
<option value='murcia'>Murcia</option>
<option value='navarra'>Navarra</option>
<option value='ourense'>Ourense</option>
<option value='palencia'>Palencia</option>
<option value='pontevedra'>Pontevedra</option>
<option value='salamanca'>Salamanca</option>
<option value='segovia'>Segovia</option>
<option value='sevilla'>Sevilla</option>
<option value='soria'>Soria</option>
<option value='tarragona'>Tarragona</option>
<option value='santacruztenerife'>Santa Cruz de Tenerife</option>
<option value='teruel'>Teruel</option>
<option value='toledo'>Toledo</option>
<option value='valencia'>Valencia/Valéncia</option>
<option value='valladolid'>Valladolid</option>
<option value='vizcaya'>Vizcaya</option>
<option value='zamora'>Zamora</option>
<option value='zaragoza'>Zaragoza</option>
</select>
</div>
</div>
<div class="col-12">
<div align="left">
<label for="distancia">Distancia aproximada entre la dirección de Origen y la de Destino:</label>
<input type="text" id="distancia" name="distancia" value="" class="form-control mb-4" placeholder=" 3 kilómetros" required>
</div>
<div class="col-12">
<div align="left">
<div class="form-check form-check-inline aliniacion-left">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="" name="" required="">
<label class="form-check-label p-2" for="inlineCheckbox1">Certifico que mi desplazamiento está relacionado con las actividades autorizadas por el artículo 7 del RD 463/2020 y sus posteriores modificaciones.</label>
</div>
</div>
</div>
</div>
<!-- Sign in button -->
<button class="btn boton-safe white-text btn-block my-4" type="submit"><b>GENERAR SALVOCONDUCTO</b></button>
</form>
</div>
</div>
<!-- Card -->
</div>
</div>
</div>
</header>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/locales/bootstrap-datepicker.es.min.js"></script>
<script >
$('#datetimepicker2').datepicker({
weekStart: 0,
todayBtn: "linked",
language: "es",
orientation: "bottom auto",
keyboardNavigation: false,
autoclose: true
});
$('#datetimepicker1').datetimepicker({
format: 'HH:mm'
});
</script>
$("#otraDireccion").css("display", "none");
$( '#micheckbox' ).on( 'click', function() {
if( $(this).is(':checked') ){
// Hacer algo si el checkbox ha sido seleccionado
$("#otraDireccion").css("display", "");
} else {
// Hacer algo si el checkbox ha sido deseleccionado
$("#otraDireccion").css("display", "none");
}
});
