<!DOCTYPE html>
<html lang="en">
<!--begin::Head-->
<head>
<meta charset="utf-8" />
<title>Registro | VENTANILLA ÚNICA VIRTUAL</title>
<meta name="description" content="VENTANILLA ÚNICA VIRTUAL" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!--begin::Fonts-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" />
<!--end::Fonts-->
<!--begin::Page Custom Styles(used by this page)-->
<link href="{{ asset('mtr/css/pages/login/login-3.css') }}" rel="stylesheet" type="text/css" />
<!--end::Page Custom Styles-->
<!--begin::Global Theme Styles(used by all pages)-->
<link href="{{ asset('mtr/plugins/global/plugins.bundle.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('mtr/plugins/custom/prismjs/prismjs.bundle.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('mtr/css/style.bundle.css') }}" rel="stylesheet" type="text/css" />
<!--end::Global Theme Styles-->
<!--begin::Layout Themes(used by all pages)-->
<link href="{{ asset('mtr/css/themes/layout/header/base/light.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('mtr/css/themes/layout/header/menu/light.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('mtr/css/themes/layout/brand/dark.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('mtr/css/themes/layout/aside/dark.css') }}" rel="stylesheet" type="text/css" />
<!--end::Layout Themes-->
<link rel="icon" type="image/png" href="{{ asset('mtr/media/logos/favicon-96x96.png') }}" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="{{ asset('mtr/media/logos/favicon.svg') }}" />
<link rel="shortcut icon" href="{{ asset('mtr/media/logos/favicon.ico') }}" />
<link rel="apple-touch-icon" sizes="180x180" href="{{ asset('mtr/media/logos/apple-touch-icon.png') }}" />
</head>
<!--end::Head-->
<!--begin::Body-->
<body id="kt_body" class="header-fixed header-mobile-fixed subheader-enabled subheader-fixed aside-enabled aside-fixed aside-minimize-hoverable page-loading">
<!--begin::Main-->
<div class="d-flex flex-column flex-root">
<!--begin::Login-->
<div class="login login-3 wizard d-flex flex-column flex-lg-row flex-column-fluid wizard" id="kt_login">
<!--begin::Aside-->
<div class="login-aside d-flex flex-column flex-row-auto">
<!--begin::Aside Top-->
<div class="d-flex flex-column-auto flex-column pt-15 px-30">
<!--begin::Aside header-->
<a href="#" class="login-logo py-6">
<img src="{{ asset('mtr/media/logos/logoLogin.svg') }}" style="max-height: 200px !important" >
</a>
<!--end::Aside header-->
<!--begin: Wizard Nav-->
<div class="wizard-nav pt-5 pt-lg-30">
<!--begin::Wizard Steps-->
<div class="wizard-steps">
<!--begin::Wizard Step 1 Nav-->
<div class="wizard-step" data-wizard-type="step" data-wizard-state="current">
<div class="wizard-wrapper">
<div class="wizard-icon">
<i class="wizard-check ki ki-check"></i>
<span class="wizard-number">1</span>
</div>
<div class="wizard-label">
<h3 class="wizard-title">Datos personales</h3>
<div class="wizard-desc">Sus datos personales</div>
</div>
</div>
</div>
<!--end::Wizard Step 1 Nav-->
<!--begin::Wizard Step 2 Nav-->
<div class="wizard-step" data-wizard-type="step">
<div class="wizard-wrapper">
<div class="wizard-icon">
<i class="wizard-check ki ki-check"></i>
<span class="wizard-number">2</span>
</div>
<div class="wizard-label">
<h3 class="wizard-title">Datos de su cuenta</h3>
<div class="wizard-desc">Usuario y contraseña</div>
</div>
</div>
</div>
<!--end::Wizard Step 2 Nav-->
<!--begin::Wizard Step 4 Nav-->
<div class="wizard-step" data-wizard-type="step">
<div class="wizard-wrapper">
<div class="wizard-icon">
<i class="wizard-check ki ki-check"></i>
<span class="wizard-number">3</span>
</div>
<div class="wizard-label">
<h3 class="wizard-title">Resumen</h3>
<div class="wizard-desc">Verificar sus datos</div>
</div>
</div>
</div>
<!--end::Wizard Step 4 Nav-->
</div>
<!--end::Wizard Steps-->
</div>
<!--end: Wizard Nav-->
</div>
<!--end::Aside Top-->
<!--begin::Aside Bottom-->
<div class="aside-img-wizard d-flex flex-row-fluid bgi-no-repeat bgi-position-y-bottom bgi-position-x-center pt-2 pt-lg-5" style="background-position-y: calc(100% + 3rem); background-image: url({{ asset('mtr/media/svg/illustrations/features.svg')}})"></div>
<!--end::Aside Bottom-->
</div>
<!--begin::Aside-->
<!--begin::Content-->
<div class="login-content flex-column-fluid d-flex flex-column p-10">
{% for message in app.flashes('warning') %}
<div class="alert alert-custom alert-outline-warning" role="alert">
<div class="alert-icon"><i class="flaticon-warning"></i></div>
<div class="alert-text">{{ message|raw }}</div>
</div>
{% endfor %}
<!--begin::Top-->
<div class="text-right d-flex justify-content-center">
<div class="top-signup text-right d-flex justify-content-end pt-5 pb-lg-0 pb-10">
<a href="javascript:;" class="font-weight-bolder text-primary font-size-h4 ml-2" id="kt_login_signup">Ayuda</a>
</div>
</div>
<!--end::Top-->
<!--begin::Wrapper-->
<div class="d-flex flex-row-fluid flex-center">
<!--begin::Signin-->
<div class="login-form login-form-signup">
<!--begin::Form-->
<form class="form" novalidate="novalidate" id="frm_registro" action="{{ path('registro_nuevo') }}" method="post">
<!--begin: Wizard Step 1-->
<div class="pb-5" data-wizard-type="step-content" data-wizard-state="current">
<!--begin::Title-->
<div class="pb-10 pb-lg-15">
<h3 class="font-weight-bolder text-dark display5">Registro de Usuario</h3>
<div class="text-muted font-weight-bold font-size-h4">¿Ya tienes una cuenta?
<a href="{{ path('login') }}" class="text-primary font-weight-bolder">Inicia sesión aquí</a></div>
</div>
<!--begin::Title-->
<!--begin::Form Group-->
<div class="form-group">
<label class="font-size-h6 font-weight-bolder text-dark">CURP</label>
<input type="text" class="form-control h-auto py-7 px-6 border-0 rounded-lg font-size-h6" name="curp" id="curp" required />
</div>
<!--end::Form Group-->
<!--begin::Form Group-->
<div class="form-group">
<label class="font-size-h6 font-weight-bolder text-dark">Nombre</label>
<input type="text" class="form-control h-auto py-7 px-6 border-0 rounded-lg font-size-h6" name="nombre" id="nombre" required />
</div>
<!--end::Form Group-->
<!--begin::Row-->
<div class="row">
<div class="col-xl-6">
<!--begin::Input-->
<div class="form-group">
<label class="font-size-h6 font-weight-bolder text-dark">Apellido paterno</label>
<input type="text" class="form-control h-auto py-7 px-6 border-0 rounded-lg font-size-h6" name="apellido_paterno" id="apellido_paterno" required />
</div>
<!--end::Input-->
</div>
<div class="col-xl-6">
<!--begin::Input-->
<div class="form-group">
<label class="font-size-h6 font-weight-bolder text-dark">Apellido materno</label>
<input type="text" class="form-control h-auto py-7 px-6 border-0 rounded-lg font-size-h6" name="apellido_materno" id="apellido_materno" required />
</div>
<!--end::Input-->
</div>
</div>
<!--end::Row-->
<!--begin::Row-->
<div class="row">
<div class="col-xl-6">
<!--begin::Input-->
<div class="form-group">
<label class="font-size-h6 font-weight-bolder text-dark">Estado</label>
<select class="form-control select2" id="estado" name="estado" required>
<option label="Label"></option>
{% for estado in estados %}
<option value="{{ estado.id }}">{{ estado.estado }}</option>
{% endfor %}
</select>
</div>
<!--end::Input-->
</div>
<div class="col-xl-6">
<!--begin::Input-->
<div class="form-group">
<label class="font-size-h6 font-weight-bolder text-dark">Municipio</label>
<select class="form-control select2" id="municipio" name="municipio" required disabled>
<option ></option>
</select>
</div>
<!--end::Input-->
</div>
</div>
<!--end::Row-->
<!--begin::Row-->
<div class="row">
<div class="col-xl-6">
<!--begin::Input-->
<div class="form-group">
<label class="font-size-h6 font-weight-bolder text-dark">Colonia, Barrio o localidad</label>
<input type="text" class="form-control h-auto py-7 px-6 border-0 rounded-lg font-size-h6" name="colonia" id="colonia" required />
</div>
<!--end::Input-->
</div>
<div class="col-xl-6">
<!--begin::Input-->
<div class="form-group">
<label class="font-size-h6 font-weight-bolder text-dark">Código postal</label>
<input type="text" class="form-control h-auto py-7 px-6 border-0 rounded-lg font-size-h6" name="cp" id="cp" required />
</div>
<!--end::Input-->
</div>
</div>
<!--end::Row-->
<!--begin::Form Group-->
<div class="form-group">
<label class="font-size-h6 font-weight-bolder text-dark">Dirección</label>
<input type="text" class="form-control h-auto py-7 px-6 border-0 rounded-lg font-size-h6" name="direccion" id="direccion" required />
</div>
<!--end::Form Group-->
<!--begin::Row-->
<div class="row">
<div class="col-xl-6">
<!--begin::Input-->
<div class="form-group">
<label class="font-size-h6 font-weight-bolder text-dark">Número de Celular</label>
<input type="text" class="form-control h-auto py-7 px-6 border-0 rounded-lg font-size-h6" name="celular" id="celular" required />
</div>
<!--end::Input-->
</div>
<div class="col-xl-6">
<!--begin::Input-->
<div class="form-group">
<label class="font-size-h6 font-weight-bolder text-dark">Télefono local</label>
<input type="text" class="form-control h-auto py-7 px-6 border-0 rounded-lg font-size-h6" name="telefono" id="telefono" required />
</div>
<!--end::Input-->
</div>
</div>
<!--end::Row-->
<div class="form-group">
<div class="checkbox-list">
<label class="checkbox checkbox-outline checkbox-success">
<input type="checkbox" name="acuerdo" id="acuerdo" required/>
<span></span>
Aceptar <a href="{{ path('terminos_condiciones') }}" target="_blank">Términos y Condiciones, Política de privacidad y Protección de Datos.</a>
</label>
</div>
</div>
</div>
<!--end: Wizard Step 1-->
<!--begin: Wizard Step 2-->
<div class="pb-5" data-wizard-type="step-content">
<!--begin::Title-->
<div class="pt-lg-0 pt-5 pb-15">
<h3 class="font-weight-bolder text-dark font-size-h2 font-size-h1-lg">Datos de su cuenta</h3>
</div>
<!--begin::Title-->
<!--begin::Form Group-->
<div class="form-group">
<label class="font-size-h6 font-weight-bolder text-dark">Correo eléctronico (Email)</label>
<input type="text" class="form-control h-auto py-7 px-6 border-0 rounded-lg font-size-h6" name="correo" id="correo" value="" />
</div>
<!--end::Form Group-->
<!--begin::Row-->
<div class="row">
<div class="col-xl-6">
<!--begin::Input-->
<div class="form-group">
<label class="font-size-h6 font-weight-bolder text-dark">Contraseña</label>
<input type="password" class="form-control h-auto py-7 px-6 border-0 rounded-lg font-size-h6" name="contrasena" value="" />
</div>
<!--end::Input-->
</div>
<div class="col-xl-6">
<!--begin::Input-->
<div class="form-group">
<label class="font-size-h6 font-weight-bolder text-dark">Repite Contraseña</label>
<input type="password" class="form-control h-auto py-7 px-6 border-0 rounded-lg font-size-h6" name="contrasena_repite" value="" />
</div>
<!--end::Input-->
</div>
</div>
<!--end::Row-->
<!--begin::Section-->
<h5 class="font-weight-bolder mb-3">Formato de contraseña:</h5>
<div class="text-dark-50 font-weight-bold line-height-lg mb-8">
<ul>
<li>Al menos contenga cinco caracteres</li>
<li>Al menos contenga un caracter minuscula</li>
<li>Al menos contenga un caracter mayuscula</li>
<li>Al menos contenga un caracter númerico</li>
</ul>
</div>
<!--end::Section-->
</div>
<!--end: Wizard Step 2-->
<!--begin: Wizard Step 4-->
<div class="pb-5" data-wizard-type="step-content">
<!--begin::Title-->
<div class="pt-lg-0 pt-5 pb-15">
<h3 class="font-weight-bolder text-dark font-size-h2 font-size-h1-lg">Resumen de sus datos</h3>
<div class="text-muted font-weight-bold font-size-h4">Verifica que sus datos sean correctos</div>
</div>
<!--end::Title-->
<div id="contenedor_confirmacion" >
</div>
</div>
<!--end: Wizard Step 4-->
<!--begin: Wizard Actions-->
<div class="d-flex justify-content-between pt-3">
<div class="mr-2">
<button type="button" class="btn btn-light-primary font-weight-bolder font-size-h6 pl-6 pr-8 py-4 my-3 mr-3" data-wizard-type="action-prev">
<span class="svg-icon svg-icon-md mr-1">
<!--begin::Svg Icon | path:assets/media/svg/icons/Navigation/Left-2.svg-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon points="0 0 24 0 24 24 0 24" />
<rect fill="#000000" opacity="0.3" transform="translate(15.000000, 12.000000) scale(-1, 1) rotate(-90.000000) translate(-15.000000, -12.000000)" x="14" y="7" width="2" height="10" rx="1" />
<path d="M3.7071045,15.7071045 C3.3165802,16.0976288 2.68341522,16.0976288 2.29289093,15.7071045 C1.90236664,15.3165802 1.90236664,14.6834152 2.29289093,14.2928909 L8.29289093,8.29289093 C8.67146987,7.914312 9.28105631,7.90106637 9.67572234,8.26284357 L15.6757223,13.7628436 C16.0828413,14.136036 16.1103443,14.7686034 15.7371519,15.1757223 C15.3639594,15.5828413 14.7313921,15.6103443 14.3242731,15.2371519 L9.03007346,10.3841355 L3.7071045,15.7071045 Z" fill="#000000" fill-rule="nonzero" transform="translate(9.000001, 11.999997) scale(-1, -1) rotate(90.000000) translate(-9.000001, -11.999997)" />
</g>
</svg>
<!--end::Svg Icon-->
</span>Regresar</button>
</div>
<div>
<button class="btn btn-primary font-weight-bolder font-size-h6 pl-5 pr-8 py-4 my-3" data-wizard-type="action-submit" type="submit" id="btn_enviar">Enviar
<span class="svg-icon svg-icon-md ml-2">
<!--begin::Svg Icon | path:assets/media/svg/icons/Navigation/Right-2.svg-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon points="0 0 24 0 24 24 0 24" />
<rect fill="#000000" opacity="0.3" transform="translate(8.500000, 12.000000) rotate(-90.000000) translate(-8.500000, -12.000000)" x="7.5" y="7.5" width="2" height="9" rx="1" />
<path d="M9.70710318,15.7071045 C9.31657888,16.0976288 8.68341391,16.0976288 8.29288961,15.7071045 C7.90236532,15.3165802 7.90236532,14.6834152 8.29288961,14.2928909 L14.2928896,8.29289093 C14.6714686,7.914312 15.281055,7.90106637 15.675721,8.26284357 L21.675721,13.7628436 C22.08284,14.136036 22.1103429,14.7686034 21.7371505,15.1757223 C21.3639581,15.5828413 20.7313908,15.6103443 20.3242718,15.2371519 L15.0300721,10.3841355 L9.70710318,15.7071045 Z" fill="#000000" fill-rule="nonzero" transform="translate(14.999999, 11.999997) scale(1, -1) rotate(90.000000) translate(-14.999999, -11.999997)" />
</g>
</svg>
<!--end::Svg Icon-->
</span></button>
<button type="button" class="btn btn-primary font-weight-bolder font-size-h6 pl-8 pr-4 py-4 my-3" data-wizard-type="action-next">Continuar
<span class="svg-icon svg-icon-md ml-1">
<!--begin::Svg Icon | path:assets/media/svg/icons/Navigation/Right-2.svg-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon points="0 0 24 0 24 24 0 24" />
<rect fill="#000000" opacity="0.3" transform="translate(8.500000, 12.000000) rotate(-90.000000) translate(-8.500000, -12.000000)" x="7.5" y="7.5" width="2" height="9" rx="1" />
<path d="M9.70710318,15.7071045 C9.31657888,16.0976288 8.68341391,16.0976288 8.29288961,15.7071045 C7.90236532,15.3165802 7.90236532,14.6834152 8.29288961,14.2928909 L14.2928896,8.29289093 C14.6714686,7.914312 15.281055,7.90106637 15.675721,8.26284357 L21.675721,13.7628436 C22.08284,14.136036 22.1103429,14.7686034 21.7371505,15.1757223 C21.3639581,15.5828413 20.7313908,15.6103443 20.3242718,15.2371519 L15.0300721,10.3841355 L9.70710318,15.7071045 Z" fill="#000000" fill-rule="nonzero" transform="translate(14.999999, 11.999997) scale(1, -1) rotate(90.000000) translate(-14.999999, -11.999997)" />
</g>
</svg>
<!--end::Svg Icon-->
</span></button>
</div>
</div>
<!--end: Wizard Actions-->
<input type="hidden" id="registro_municipios_path" value="{{ path('registro_municipios') }}">
</form>
<!--end::Form-->
</div>
<!--end::Signin-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Content-->
</div>
<!--end::Login-->
</div>
<!--end::Main-->
<script>var HOST_URL = "https://preview.keenthemes.com/metronic/theme/html/tools/preview";</script>
<!--begin::Global Config(global config for global JS scripts)-->
<script>var KTAppSettings = { "breakpoints": { "sm": 576, "md": 768, "lg": 992, "xl": 1200, "xxl": 1400 }, "colors": { "theme": { "base": { "white": "#ffffff", "primary": "#3699FF", "secondary": "#E5EAEE", "success": "#1BC5BD", "info": "#8950FC", "warning": "#FFA800", "danger": "#F64E60", "light": "#E4E6EF", "dark": "#181C32" }, "light": { "white": "#ffffff", "primary": "#E1F0FF", "secondary": "#EBEDF3", "success": "#C9F7F5", "info": "#EEE5FF", "warning": "#FFF4DE", "danger": "#FFE2E5", "light": "#F3F6F9", "dark": "#D6D6E0" }, "inverse": { "white": "#ffffff", "primary": "#ffffff", "secondary": "#3F4254", "success": "#ffffff", "info": "#ffffff", "warning": "#ffffff", "danger": "#ffffff", "light": "#464E5F", "dark": "#ffffff" } }, "gray": { "gray-100": "#F3F6F9", "gray-200": "#EBEDF3", "gray-300": "#E4E6EF", "gray-400": "#D1D3E0", "gray-500": "#B5B5C3", "gray-600": "#7E8299", "gray-700": "#5E6278", "gray-800": "#3F4254", "gray-900": "#181C32" } }, "font-family": "Poppins" };</script>
<!--end::Global Config-->
<!--begin::Global Theme Bundle(used by all pages)-->
<script src="{{ asset('mtr/plugins/global/plugins.bundle.js') }}"></script>
<script src="{{ asset('mtr/plugins/custom/prismjs/prismjs.bundle.js') }}"></script>
<script src="{{ asset('mtr/js/scripts.bundle.js') }}"></script>
<script src="{{ asset('vendors/formvalidation/js/locales/es_ES.js') }}"></script>
<script src="{{ asset('js/vendors/formvalidation/validaciones/formulario.js') }}"></script>
<!--end::Global Theme Bundle-->
<!--begin::Page Scripts(used by this page)-->
<script src="{{ asset('mtr/js/pages/custom/login/login-3.js') }}"></script>
<script src="{{ asset('vendors/select2/i18n/es.js') }}"></script>
<!--end::Page Scripts-->
</body>
<!--end::Body-->
</html>