<?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="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Registro de usuario - Paso 1">
    <link rel="icon" type="image/png" href="<?= BASE_HREF ?>assets/favicon.png">
    <title>Registro - Paso 1 | Sistema de Trámite</title>
    <!-- CSS -->
    <link rel="stylesheet" href="<?= BASE_HREF ?>css/simplebar.css">
    <link rel="stylesheet" href="<?= BASE_HREF ?>css/feather.css">
    <link rel="stylesheet" href="<?= BASE_HREF ?>css/daterangepicker.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 ?>auth/register-step1" method="POST" class="col-lg-3 col-md-4 col-10 mx-auto">
          <div class="text-center mb-2">
            <h4 class="mb-0 font-weight-bold">MESA DE PARTES DIGITAL</h4>
            <small class="text">UGEL CORONGO</small>
          </div>
          <div class="text-center mt-3 mb-2">
            <a href="<?= BASE_HREF ?>">
              <img src="<?= BASE_SRC ?>assets/favicon.png" alt="Logo del sistema" style="height: 120px; width: auto;">
            </a>
          </div>

          <h1 class="h6 mb-3 text-center">Registro - Paso 1</h1>
          <div class="form-group text-center">
            <label for="email" class="sr-only">Correo Electrónico</label>
            <input type="email" id="email" name="email" class="form-control form-control-lg" placeholder="Ingresa tu correo" required>
          </div>

          <div class="form-group text-left">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="checkbox1" name="checkbox1" required>
              <label class="form-check-label" for="checkbox1">
                Declaración Jurada: Autorizo notificación al correo electrónico.  
                <a href="#" data-toggle="modal" data-target="#modalDeclaracion">(Leer más)</a>
              </label>
            </div>

            <div class="form-check mt-2">
              <input class="form-check-input" type="checkbox" id="checkbox2" name="checkbox2" required>
              <label class="form-check-label" for="checkbox2">
                Ley de Protección de Datos Personales.  
                <a href="#" data-toggle="modal" data-target="#modalDatos">(Leer más)</a>
              </label>
            </div>
          </div>

          <button class="btn btn-lg btn-primary btn-block" type="submit">Enviar correo de verificación</button>

          <div class="mt-3 text-center">
            <a href="<?= BASE_HREF ?>">¿Ya tienes una cuenta? Inicia sesión aquí</a>
          </div>

          <p class="mt-5 mb-3 text-muted text-center">© 2025</p>
        </form>
      </div>
    </div>


    <!-- Modal: Declaración Jurada -->
    <div class="modal fade" id="modalDeclaracion" tabindex="-1" role="dialog" aria-labelledby="modalDeclaracionLabel" 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="modalDeclaracionLabel">DECLARACIÓN JURADA</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Cerrar">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body text-justify">
            Autorizo a que todo acto administrativo y/o demás acciones derivadas del presente procedimiento se me notifique en el correo electrónico consignado en el presente formulario (TUO de la Ley N°27444, numeral 20.4 del artículo 20°).
          </div>
        </div>
      </div>
    </div>

    <!-- Modal: Protección de Datos -->
    <div class="modal fade" id="modalDatos" tabindex="-1" role="dialog" aria-labelledby="modalDatosLabel" 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="modalDatosLabel">Protección de Datos Personales</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Cerrar">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body text-justify">
            En cumplimiento de lo dispuesto por la Ley N° 29733, Ley de Protección de Datos Personales, le informamos que los datos personales que usted nos proporcione serán utilizados y/o tratados por la UGEL (por sí mismo o a través de terceros), estricta y únicamente para la atención de las reclamaciones de los servicios prestados por nuestra Entidad, pudiendo ser incorporados en un banco de datos personales de titularidad de la UGEL. Se informa que la UGEL podría compartir y/o usar y/o almacenar y/o transferir dicha información a terceras personas, estrictamente con el objeto de realizar las actividades antes mencionadas. Usted podrá ejercer sus derechos de información, acceso, rectificación, cancelación y oposición de sus datos personales, en cualquier momento, a través de la Mesa de Partes Presencial y Virtual en la UGEL.
          </div>
        </div>
      </div>
    </div>


    <!-- JS -->
    <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>
      function toggleText(link) {
        const span = link.closest("small").querySelector("span");
        const isHidden = span.classList.contains("d-none");

        if (isHidden) {
          span.classList.remove("d-none");
          link.style.display = "none";
        } else {
          span.classList.add("d-none");
          const leerMas = link.closest("small").querySelector("a");
          leerMas.style.display = "inline";
        }
      }
    </script>


  </body>
</html>
