<!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" 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">
	</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>
						<!-- 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="username" class="form-label">Usuario (correo electrónico)</label>
										<input type="text" class="form-control" id="usuario" name="usuario" placeholder="Ingresa tu correo electrónico">
									</div>
								</div>
								<div class="col-xxl-12 col-md-12 col-12 mb-3">
									<div>
										<label for="contrasena" class="form-label">Contraseña</label>
										<input type="password" class="form-control" id="contrasena" name="contrasena">
									</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 js -->
		<script src="<?= $baseUrl ?>/public/libs/particles.js/particles.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>
		<!-- Estructura -->
		<script src="<?= $baseUrl ?>/public/js/estructura.js"></script>
		<!-- Proceso -->
		<script src="<?= $baseUrl ?>/public/js/proceso.js"></script>
	</body>
</html>