<!DOCTYPE html>
<html lang="en" data-layout="vertical" data-topbar="light" data-layout-mode="light" data-sidebar="light" data-sidebar-size="lg" data-sidebar-image="none">

<head>

    <meta charset="utf-8" />
    <title>SEAC - Login</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- App favicon -->
    <link rel="shortcut icon" href="main/assets/images/favicon.ico">

    <!-- Sweetalert 2 -->
    <link rel="stylesheet" href="main/assets/libs/sweetalert2/css/sweetalert2.min.css">


    <link rel="stylesheet" href="main/assets/libs/toastify-js/toastify.css">

    <link rel="stylesheet" href="main/assets/libs/bootstrap-select/css/bootstrap-select.min.css">

    <!-- Bootstrap Css -->
    <link href="main/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- Icons Css -->
    <link href="main/assets/css/icons.min.css" rel="stylesheet" type="text/css" />
    <!-- App Css-->
    <link href="main/assets/css/app.min.css" rel="stylesheet" type="text/css" />
    <!-- custom Css-->
    <link href="main/assets/css/custom.min.css" rel="stylesheet" type="text/css" />

    <!-- loader -->
    <link rel="stylesheet" href="main/assets/css/loader.css?v=1.0.0">
    <link rel="stylesheet" href="main/assets/css/login.css?v=1.0.0">

</head>

<body>

    <div class="loader">
        <div class="loader-container">
            <div class="lds-ellipsis">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
    </div>

    <div class="auth-main-container">
        <div class="auth-sub-container">
            <div class="auth-container">
                <div class="auth-container-l1">
                    <div class="container">

                        <div class="row justify-content-center" id="main-container">
                            <div class="col-md-8 col-lg-6 col-xl-5">
                                <div class="card mt-3">

                                    <div class="card-body p-4">
                                        <div class="text-center mt-2">
                                            <img src="main/assets/images/logo.png" alt="SEAC" height="85" class="mb-2">
                                            <h5 class="text-primary">¡Bienvenido!</h5>
                                            <!-- <?= md5('123'); ?> -->
                                            <p class="text-muted" id="spn-indicaciones">Identifícate para continuar al sistema.</p>
                                        </div>
                                        <div class="p-2 mt-0" id="login-container">
                                            <form id="login-form" name="login-form" accept-charset="utf-8" method="POST" class="needs-validation" novalidate>

                                                <div class="mb-1 mayusculas">
                                                    <label for="txt-username" class="form-label">Usuario <span class="required">*</span></label>
                                                    <div class="position-relative auth-pass-inputgroup mb-1 has-validation">
                                                        <input type="password" class="form-control password-input" id="txt-username" placeholder="Ingresa tu usuario" required>
                                                        <button class="btn btn-link position-absolute end-0 top-0 text-decoration-none text-muted password-addon" type="button"><i class="ri-eye-fill align-middle"></i></button>
                                                        <div class="invalid-feedback">
                                                            Por favor ingresa tu usuario.
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="mb-2">
                                                    <label class="form-label" for="txt-password">Contraseña <span class="required">*</span></label>
                                                    <input type="password" class="form-control pe-5" placeholder="Ingresa tu contraseña" id="txt-password" required>
                                                    <div class="invalid-feedback">
                                                        Por favor ingresa tu contraseña.
                                                    </div>
                                                </div>

                                                <div class="mt-2">
                                                    <button class="btn btn-primary w-100" type="submit">Ingresar</button>
                                                </div>
                                                <div class="mt-4 text-center">
                                                    <a href="#" id="request-password-link" class="text-muted"><i class="mdi mdi-lock me-1"></i> ¿Olvidaste tu contraseña?</a>
                                                </div>
                                            </form>
                                        </div>
                                        <div class="p-2 mt-1 d-none" id="change-password-container">
                                            <form id="password-form" name="password-form" accept-charset="utf-8" method="POST" class="needs-validation" novalidate>
                                                <div class="mb-2">
                                                    <label class="form-label" for="txt-nueva-contrasenia">Nueva contraseña</label>
                                                    <div class="position-relative auth-pass-inputgroup mb-3 has-validation">
                                                        <input type="password" class="form-control pe-5 password-input" placeholder="Ingresa tu nueva contraseña" id="txt-nueva-contrasenia" required>
                                                        <button class="btn btn-link position-absolute end-0 top-0 text-decoration-none text-muted password-addon" type="button"><i class="ri-eye-fill align-middle"></i></button>
                                                        <div class="invalid-feedback">
                                                            Por favor ingresa tu nueva contraseña.
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="mb-2">
                                                    <label class="form-label" for="txt-confirmacion-contrasenia">Confirmar contraseña</label>
                                                    <div class="position-relative auth-pass-inputgroup mb-3 has-validation">
                                                        <input type="password" class="form-control pe-5 password-input" placeholder="Confirma tu nueva contraseña" id="txt-confirmacion-contrasenia" required>
                                                        <button class="btn btn-link position-absolute end-0 top-0 text-decoration-none text-muted password-addon" type="button"><i class="ri-eye-fill align-middle"></i></button>
                                                        <div class="invalid-feedback">
                                                            Por favor confirma tu nueva contraseña.
                                                        </div>
                                                    </div>
                                                </div>

                                                <div id="password-contain" class="p-3 bg-light mb-2 rounded">
                                                    <h5 class="fs-13">La contraseña debe tener:</h5>
                                                    <p id="pass-length" class="invalid fs-12 mb-2">Mínimo <b>6 carácteres</b></p>
                                                    <p id="pass-lower" class="invalid fs-12 mb-2">Al menos una letra <b>minúscula</b> (a-z)</p>
                                                    <p id="pass-upper" class="invalid fs-12 mb-2">Al menos una letra <b>mayúscula</b> (A-Z)</p>
                                                    <p id="pass-number" class="invalid fs-12 mb-0">Al menos un <b>número</b> (0-9)</p>
                                                </div>

                                                <div class="mt-4">
                                                    <button class="btn btn-primary w-100" type="submit">Aplicar e ingresar</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                    <!-- end card body -->
                                </div>
                                <!-- end card -->

                            </div>
                        </div>
                        <!-- end row -->
                        <div class="row justify-content-center d-none" id="request-password-container">
                            <div class="col-md-8 col-lg-6 col-xl-5">
                                <div class="card mt-4">

                                    <div class="card-body p-4">
                                        <div class="text-center mt-2">
                                            <h5 class="text-primary">¿Olvidaste tu contraseña?</h5>

                                            <lord-icon src="https://cdn.lordicon.com/rhvddzym.json" trigger="loop" colors="primary:#00A264" class="avatar-xl"></lord-icon>

                                        </div>

                                        <div class="alert alert-borderless alert-warning text-center mb-2 mx-2" role="alert">
                                            Ingresa tu usuario y el correo electrónico vinculado a tu cuenta, te enviaremos un enlace para restablecer tu contraseña.
                                        </div>
                                        <div class="p-2">
                                            <form id="request-password-form" name="request-password-form" accept-charset="utf-8" method="POST" class="needs-validation" novalidate action="javascript:login.send_reset_link();">
                                                <div class="mb-1 mayusculas">
                                                    <label class="form-label" for="txt-username-request">Usuario</label>
                                                    <div class="position-relative auth-pass-inputgroup mb-1 has-validation">
                                                        <input type="password" class="form-control password-input" id="txt-username-request" placeholder="Ingresa tu usuario" required>
                                                        <button class="btn btn-link position-absolute end-0 top-0 text-decoration-none text-muted password-addon" type="button"><i class="ri-eye-fill align-middle"></i></button>
                                                        <div class="invalid-feedback">
                                                            Por favor ingresa tu usuario.
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="mb-4">
                                                    <label class="form-label" for="txt-email">Email</label>
                                                    <input type="email" class="form-control" id="txt-email" placeholder="Ingresa tu correo electrónico" required>
                                                    <div class="invalid-feedback">
                                                        Por favor ingresa tu correo electrónico.
                                                    </div>
                                                </div>

                                                <div class="text-center mt-2">
                                                    <button class="btn btn-primary w-100" type="submit">Enviar correo de restablecimiento</button>
                                                </div>
                                            </form><!-- end form -->
                                        </div>
                                    </div>
                                    <!-- end card body -->
                                </div>
                                <!-- end card -->

                                <div class="mt-4 text-center text-white">
                                    <p class="mb-0">Espera, Ya recordé mi contraseña... <a href="#" id="back-to-login-link" class="fw-semibold text-primary text-decoration-underline"> Click aquí </a> </p>
                                </div>

                            </div>
                        </div>
                        <!-- end row -->
                    </div>
                </div>
            </div>
            <footer class="auth-footer">
                <div class="row">
                    <div class="col-sm-12 col-md-12">
                        <div class="text-center text-white">
                            <script>
                                document.write(new Date().getFullYear())
                            </script> Seguridad Activa. © Sistema web principal
                        </div>
                    </div>
                </div>
            </footer>
        </div>
    </div>

    <!-- Layout config Js -->
    <script src="main/assets/libs/moment/moment.js"></script>

    <!-- jQuery -->
    <script type="text/javascript" src="main/assets/libs/jquery/jquery-3.6.0.min.js"></script>

    <!-- JAVASCRIPT -->
    <script src="main/assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="main/assets/libs/simplebar/simplebar.min.js"></script>
    <script src="main/assets/libs/node-waves/waves.min.js"></script>
    <script src="main/assets/libs/feather-icons/feather.min.js"></script>
    <script src="main/assets/plugins/lord-icon-2.1.0.js"></script>

    <!-- Sweetalert2 -->
    <script type="text/javascript" src="main/assets/libs/sweetalert2/js/sweetalert2.min.js"></script>

    <script type="text/javascript" src="main/assets/libs/bootstrap-select/js/bootstrap-select.js"></script>

    <!-- particles js -->
    <script src="main/assets/libs/particles.js/particles.js"></script>

    <script src="main/assets/libs/jQuery-mask/jquery.mask.min.js"></script>

    <script src="main/assets/libs/toastify-js/toastify.js"></script>

    <script src="main/assets/js/app/plugins.js?v=1.0.0"></script>
    <script src="main/assets/js/app/settings.js?v=1.0.0"></script>
    <script src="main/assets/js/app/password-addon.init.js?v=1.0.0"></script>
    <script src="main/assets/js/app/bootstrap-validation.init.js?v=1.0.0"></script>

    <script type="module" src="main/assets/js/modules/loginPage.js?v=1.0.0"></script>
</body>

</html>