<?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 SANTA</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 a la casilla electrónica denominada como <b>Domicilio Digital</b>.  
                <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">
           <b>AUTORIZACIÓN EXPRESA DE NOTIFICACIÓN ELECTRÓNICA:</b> Que, en amparo de lo dispuesto en el numeral 20.1.2 del artículo 20 del Texto Único Ordenado de la Ley N° 27444 - Ley del Procedimiento Administrativo General, otorgo mi CONSENTIMIENTO EXPRESO para que todo acto administrativo, actuación o resolución que se derive del presente procedimiento me sea notificado de manera preferente en la Casilla Electrónica institucional que me encuentro en proceso de habilitar y crear en el sistema de la Mesa de Partes de esta entidad.

Para efectos del sistema de alertas y avisos obligatorios conforme a ley, señalo como mi <b>domicilio digital</b>, comprometiéndome a revisar periódicamente el buzón electrónico institucional a fin de garantizar el derecho a la defensa y el debido procedimiento administrativo.
          </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>
