<!doctype html>
<html lang="en" data-layout="vertical" data-topbar="light" data-sidebar="dark" data-sidebar-size="lg" data-sidebar-image="none" data-preloader="disable">
	<head>
		<meta charset="utf-8">
		<title><?= $titulo ?></title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta content="Premium Multipurpose Admin & Dashboard Template" name="description">
		<meta content="Themesbrand" name="author">
		<!-- App favicon -->
		<link rel="shortcut icon" href="<?= $baseUrl ?>/public/images/favicon.ico">
		
		<!--datatable css-->
		<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css">
		<!--datatable responsive css-->
		<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap.min.css">
		<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css">
		<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">

		<!-- Layout config Js -->
		<script src="<?= $baseUrl ?>/public/js/layout.js"></script>
		<!-- Bootstrap Css -->
		<link href="<?= $baseUrl ?>/public/css/bootstrap.min.css" rel="stylesheet" type="text/css">
		<link href="<?= $baseUrl ?>/public/libs/bootstrap-switch/css/bootstrap3/bootstrap-switch.min.css" rel="stylesheet" type="text/css">
		<!-- Icons Css -->
		<link href="<?= $baseUrl ?>/public/css/icons.min.css" rel="stylesheet" type="text/css">
		<!-- App Css-->
		<link href="<?= $baseUrl ?>/public/css/app.min.css?<?= $aleatorio ?>" rel="stylesheet" type="text/css">
		<!-- custom Css-->
		<link href="<?= $baseUrl ?>/public/css/custom.min.css" rel="stylesheet" type="text/css">
		<!-- Toastr -->
		<link rel="stylesheet" href="<?= $baseUrl ?>/public/js/pages/plugins/toastr/toastr.min.css">
		<!-- SweetAlert -->
		<link rel="stylesheet" href="<?= $baseUrl ?>/public/js/pages/plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css">
	    <!-- SmartWizard -->
	    <link rel="stylesheet" href="<?= $baseUrl ?>/public/css/smartwizard.css">
	</head>
	<body>
		<!-- auth-page wrapper -->
		<div class="auth-page-wrapper auth-bg-cover py-5 d-flex justify-content-center align-items-center min-vh-100">
			<div class="bg-overlay"></div>
			<!-- auth-page content -->
			<div class="auth-page-content overflow-hidden pt-lg-5">
				<div class="container">
					<div class="row align-items-center justify-content-center">
						<!--<div class="col-lg-6">-->
						<!--	<div class="card overflow-hidden">-->
						<!--		<div class="row g-0">-->
						<!--			<div class="col-lg-6 d-none">-->
						<!--				<div class="p-lg-5 p-4 auth-one-bg h-100">-->
						<!--					<div class="bg-overlay"></div>-->
						<!--					<div class="position-relative h-100 d-flex flex-column">-->
						<!--						<div class="mb-4">-->
						<!--						</div>-->
						<!--						<div class="mt-auto d-none">-->
						<!--							<div class="mb-3">-->
						<!--								<i class="ri-double-quotes-l display-4 text-success"></i>-->
						<!--							</div>-->
						<!--							<div id="qoutescarouselIndicators" class="carousel slide" data-bs-ride="carousel">-->
						<!--								<div class="carousel-indicators">-->
						<!--									<button type="button" data-bs-target="#qoutescarouselIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>-->
						<!--									<button type="button" data-bs-target="#qoutescarouselIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>-->
						<!--									<button type="button" data-bs-target="#qoutescarouselIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>-->
						<!--								</div>-->
						<!--								<div class="carousel-inner text-center text-white pb-5">-->
						<!--									<div class="carousel-item active">-->
						<!--										<p class="fs-15 fst-italic">" Great! Clean code, clean design, easy for customization. Thanks very much! "</p>-->
						<!--									</div>-->
						<!--									<div class="carousel-item">-->
						<!--										<p class="fs-15 fst-italic">" The theme is really great with an amazing customer support."</p>-->
						<!--									</div>-->
						<!--									<div class="carousel-item">-->
						<!--										<p class="fs-15 fst-italic">" Great! Clean code, clean design, easy for customization. Thanks very much! "</p>-->
						<!--									</div>-->
						<!--								</div>-->
						<!--							</div>-->
													<!-- end carousel -->
						<!--						</div>-->
						<!--					</div>-->
						<!--				</div>-->
						<!--			</div>-->
									<!-- end col -->
						<!--			<div class="col-lg-12">-->
						<!--				<div class="p-lg-5 p-4">-->
						<!--					<div>-->
						<!--						<h5 class="text-primary">Bienvenido de nuevo</h5>-->
						<!--						<p class="text-muted">Inicia sesión para continuar</p>-->
						<!--					</div>-->
						<!--					<div class="mt-4">-->
						<!--						<form class="formulario" action="<?= $baseUrl ?>/entrar" method="POST">-->
						<!--							<span class="respuesta"></span>-->
						<!--							<div class="mb-3">-->
						<!--								<label for="username" class="form-label">Usuario</label>-->
						<!--								<input type="text" class="form-control" id="usuario" name="usuario" placeholder="Ingresa tu Usuario">-->
						<!--							</div>-->
						<!--							<div class="mb-3">-->
						<!--								<label class="form-label" for="password-input">Contraseña</label>-->
						<!--								<div class="position-relative auth-pass-inputgroup mb-3">-->
						<!--									<input type="password" class="form-control pe-5 password-input" placeholder="Ingresa tu contraseña" id="contrasena" name="contrasena">-->
						<!--									<button class="btn btn-link position-absolute end-0 top-0 text-decoration-none text-muted password-addon" type="button" id="password-addon"><i class="ri-eye-fill align-middle"></i></button>-->
						<!--								</div>-->
						<!--							</div>-->
						<!--							<div class="form-check">-->
						<!--								<input class="form-check-input" type="checkbox" value="" id="auth-remember-check">-->
						<!--								<label class="form-check-label" for="auth-remember-check">Recordarme</label>-->
						<!--							</div>-->
						<!--							<div class="mt-4">-->
						<!--								<button class="btn btn-dark w-100" type="submit">Ingresar</button>-->
						<!--							</div>-->
						<!--						</form>-->
						<!--					</div>-->
						<!--				</div>-->
						<!--			</div>-->
									<!-- end col -->
						<!--		</div>-->
								<!-- end row -->
						<!--	</div>-->
							<!-- end card -->
						<!--</div>-->
						<div class="col-lg-4">
    						<div class="card overflow-hidden">
    							<div class="row g-0">
    								<div class="col-lg-12">
    									<div class="p-4">
    										<div class="text-center">
    											<a href="<?= $baseUrl ?>" class="h1"><img style="max-width: 70%;" src="<?= $baseUrl ?>/public/images/cambioContrasena2.png" /></a>
    										</div>
    
    										<div class="mt-4">
    										<div>
    											<h5 class="text-primary" style="text-align:center">Ingresa a tu cuenta</h5>
    										</div>											
    											<form class="formulario" action="<?= $baseUrl ?>/entrar" method="POST">
    
    												<span class="respuesta"></span>
    												<div class="input-group mb-3">
    													<input type="text" class="form-control" id="usuario" name="usuario" placeholder="Ingresa tu Usuario">
    													<div class="input-group-append">
    														<div class="input-group-text" style="border: 1px solid #aca397; background-color: #dcd5cc;">
    
    															<img src="<?= $baseUrl ?>/public/images/iconoUsuario.png" width="21" height="24" />
    														</div>
    													</div>
    												</div>
    												<div class="input-group mb-3">
    													<input type="password" class="form-control pe-5 password-input" placeholder="Ingresa tu contraseña" id="contrasena" name="contrasena">
    													<!--<button class="btn btn-link position-absolute end-0 top-0 text-decoration-none text-muted password-addon" type="button" id="password-addon"><i class="ri-eye-fill align-middle"></i></button>-->
    													<div class="input-group-append">
    														<div class="input-group-text" style="border: 1px solid #aca397; background-color: #dcd5cc;">
    
    															<img src="<?= $baseUrl ?>/public/images/iconoContrasena.png" width="21" height="24" />
    														</div>
    													</div>
    												</div>
    												<div class="form-check">
    													<input class="form-check-input" type="checkbox" value="" id="auth-remember-check">
    													<label class="form-check-label" for="auth-remember-check">Recordarme</label>
    												</div>
    												<div class="mt-4">
    													<button type="submit" class="btn w-100" style="background-color: #ab192d;color:#fff">Iniciar sesión</button>
    												</div>
    											</form>
    										</div>
    									</div>
    								</div>
    								<!-- end col -->
    							</div>
    							<!-- end row -->
    						</div>
    						<!-- end card -->
    					</div>
						<!-- end col -->
					</div>
					<!-- end row -->
				</div>
				<!-- end container -->
			</div>
			<!-- end auth page content -->
			<!-- footer -->
			<footer class="footer">
				<div class="container">
					<div class="row">
						<div class="col-lg-12">
							<div class="text-center">
								<p class="mb-0">
									&copy;
									<script>document.write(new Date().getFullYear())</script> Verisure Peru. Desarrollado por Verisure Peru
								</p>
							</div>
						</div>
					</div>
				</div>
			</footer>
			<!-- end Footer -->
		</div>
		<!-- end auth-page-wrapper -->

		<!-- Modal Cambiar de Contraseña -->
		<div class="modal fade" id="cambiarContrasena" tabindex="-1" role="dialog" aria-labelledby="examplecambiarContrasena" aria-hidden="true">
			<div class="modal-dialog modal-dialog-centered" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title" id="examplecambiarContrasena">Cambiar contraseña</h5>
						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
					</div>
					<form class="formulario" action="<?= $baseUrl ?>/restaurar-contrasena" method="POST">
						<span class="respuesta"></span>
						<div class="modal-body">
							<div class="row">
								<div class="col-xxl-12 col-md-12 col-12 mb-3">
									<div>
										<label for="usuario_recuperar" class="form-label">Usuario (correo electrónico)</label>
										<input type="text" class="form-control" id="usuario_recuperar" name="usuario_recuperar" placeholder="Ingresa tu correo electrónico">
									</div>
								</div>
								<div class="col-xxl-12 col-md-12 col-12 mb-3">
									<div>
										<label for="contrasena_actual" class="form-label">Contraseña</label>
										<input type="password" class="form-control" id="contrasena_actual" name="contrasena_actual">
									</div>
								</div>
								<div class="col-xxl-12 col-md-12 col-12 mb-3">
									<div>
										<label for="nueva_contrasena" class="form-label">Nueva Contraseña</label>
										<input type="password" class="form-control" id="nueva_contrasena" name="nueva_contrasena">
									</div>
								</div>
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
							<button type="submit" class="btn btn-primary"><i class="mdi mdi-content-save"></i> Guardar</button>
						</div>
					</form>
				</div>
			</div>
		</div>

     	<script> window.baseUrl = "<?= base_url(); ?>"</script>
		<!-- jQuery -->
		<script src="<?= $baseUrl ?>/public/js/pages/plugins/jquery/jquery.min.js"></script>
		<!-- JAVASCRIPT -->
		<script src="<?= $baseUrl ?>/public/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
		<script src="<?= $baseUrl ?>/public/libs/simplebar/simplebar.min.js"></script>
		<script src="<?= $baseUrl ?>/public/libs/node-waves/waves.min.js"></script>
		<script src="<?= $baseUrl ?>/public/libs/feather-icons/feather.min.js"></script>
		<script src="<?= $baseUrl ?>/public/js/pages/plugins/lord-icon-2.1.0.js"></script>
		<script src="<?= $baseUrl ?>/public/js/plugins.js"></script>
		<script src="<?= $baseUrl ?>/public/libs/bootstrap-switch/js/bootstrap-switch.min.js"></script>
		<!--datatable js-->
		<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
		<script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
		<script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
		<script src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>
		<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.print.min.js"></script>
		<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.html5.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
		<!--select2 cdn-->
		<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
		<script src="<?= $baseUrl ?>/public/js/pages/select2.init.js"></script>
		<!-- particles app js -->
		<!--<script src="<?= $baseUrl ?>/public/js/pages/particles.app.js"></script>-->
		<!-- password-addon init -->
		<script src="<?= $baseUrl ?>/public/js/pages/password-addon.init.js"></script>
		<!-- Toastr -->
		<script src="<?= $baseUrl ?>/public/js/pages/plugins/toastr/toastr.min.js"></script>
		<!-- SweetAlert -->
		<script src="<?= $baseUrl ?>/public/js/pages/plugins/sweetalert2/sweetalert2.min.js"></script>
		<!-- SmartWizard -->
		<script src="https://cdn.jsdelivr.net/npm/smartwizard@6/dist/js/jquery.smartWizard.min.js" type="text/javascript"></script>
		<!-- Estructura -->
		<script src="<?= $baseUrl ?>/public/js/estructura.js"></script>
		<!-- Proceso -->
		<script src="<?= $baseUrl ?>/public/js/proceso.js"></script>
	</body>
</html>