<?php if (isset($_SESSION['message'])): ?>
  <div class="alert alert-<?php echo $_SESSION['message_type']; ?>">
      <?php 
          echo $_SESSION['message']; 
          unset($_SESSION['message']);
      ?>
  </div>
<?php endif; ?>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" type="image/png" href="<?= BASE_HREF ?>assets/favicon.png">
    <title>Login - Sistema de Mesa de Partes Virtual</title>
    <!-- Simple bar CSS -->
    <link rel="stylesheet" href="<?= BASE_HREF ?>css/simplebar.css">
    <!-- Fonts CSS -->
    <link href="https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,100;0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
    <!-- Icons CSS -->
    <link rel="stylesheet" href="<?= BASE_HREF ?>css/feather.css">
    <!-- Date Range Picker CSS -->
    <link rel="stylesheet" href="<?= BASE_HREF ?>css/daterangepicker.css">
    <!-- App CSS -->
    <link rel="stylesheet" href="<?= BASE_HREF ?>css/app-light.css" id="lightTheme">
    <link rel="stylesheet" href="<?= BASE_HREF ?>css/app-dark.css" id="darkTheme" disabled>
  </head>
  <body class="light ">
    <div class="wrapper vh-100">
      <div class="row align-items-center h-100">
        <form action="<?= BASE_ACTION ?>login" method="POST" class="col-lg-3 col-md-4 col-10 mx-auto text-center">
          <div class="text-center mb-2">
            <h4 class="mb-0 font-weight-bold">MESA DE PARTES VIRTUAL</h4>
            <small class="text">UGEL SANTA</small>
          </div>
          <a class="navbar-brand mx-auto mt-2 flex-fill text-center" href="<?= BASE_HREF ?>dashboard">
            <img src="<?= BASE_SRC ?>assets/favicon.png" alt="Logo del sistema" class="navbar-brand-img brand-sm" style="height: 120px !important; width: auto;">
          </a>
          <h1 class="h6 mb-3">Iniciar Sesión</h1>
          <div class="form-group">
            <label for="username" class="sr-only">Usuario</label>
            <input type="text" id="username" name="username" class="form-control form-control-lg" placeholder="Nombre de usuario" required autofocus="">
          </div>
          <div class="form-group">
            <label for="password" class="sr-only">Password</label>
            <input type="password" id="password" name="password" class="form-control form-control-lg" placeholder="Contraseña" required>
          </div>
          <button class="btn btn-lg btn-primary btn-block" type="submit">Ingresar</button>

          <div class="mt-3">
            <a href="<?= BASE_HREF ?>auth/forgot-password">¿Olvidaste tu contraseña?</a>
          </div>

          <div class="mt-3">
            <a href="<?= BASE_HREF ?>auth/register">¿No tienes una cuenta? Regístrate aquí</a>
          </div>

          <div class="mt-3">
            <a href="<?= BASE_HREF ?>public/docs/politica-privacidad.pdf" target="_blank" rel="noopener noreferrer" class="text-danger fw-bold">
                Política de Privacidad de Datos Personales
            </a>
          </div>

          <div class="mt-3">
            <a href="<?= BASE_HREF ?>public/docs/manual-usuario.pdf" target="_blank" rel="noopener noreferrer" class="text-danger fw-bold">
                Manual de Usuario
            </a>
          </div>

          <p class="mt-5 mb-3 text-muted">© <?php 
          $anioCompleto = date("Y");
            echo $anioCompleto;
          ?>
          
          </p>
        </form>
      </div>
    </div>
    <script src="<?= BASE_SRC ?>js/jquery.min.js"></script>
    <script src="<?= BASE_SRC ?>js/popper.min.js"></script>
    <script src="<?= BASE_SRC ?>js/moment.min.js"></script>
    <script src="<?= BASE_SRC ?>js/bootstrap.min.js"></script>
    <script src="<?= BASE_SRC ?>js/simplebar.min.js"></script>
    <script src='<?= BASE_SRC ?>js/daterangepicker.js'></script>
    <script src='<?= BASE_SRC ?>js/jquery.stickOnScroll.js'></script>
    <script src="<?= BASE_SRC ?>js/tinycolor-min.js"></script>
    <script src="<?= BASE_SRC ?>js/config.js"></script>
    <script src="<?= BASE_SRC ?>js/apps.js"></script>
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-56159088-1"></script>
    <script>
      window.dataLayer = window.dataLayer || [];

      function gtag()
      {
        dataLayer.push(arguments);
      }
      gtag('js', new Date());
      gtag('config', 'UA-56159088-1');
    </script>

    <script>
      document.getElementById('username').addEventListener('input', function (event) {
          event.target.value = event.target.value.toUpperCase();
      });
      document.getElementById('password').addEventListener('input', function (event) {
          event.target.value = event.target.value.toUpperCase();
      });
    </script>
  </body>
</html>