<?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>Olvidaste Contraseña - Sistema de Trámite Documentario</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 ?>auth/send-reset-code" 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 DIGITAL</h4>
                <small class="text">UGEL CORONGO</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">Recuperar Contraseña</h1>

            <div class="form-group">
                <label for="person_type" class="sr-only">Tipo de Persona</label>
                <select id="person_type" name="person_type" class="form-control form-control-lg" required>
                    <option value="">Seleccione tipo</option>
                    <?php foreach ($personTypes as $type): ?>
                        <option value="<?= htmlspecialchars(strtoupper($type->description)) ?>"><?= htmlspecialchars($type->description) ?></option>
                    <?php endforeach; ?>
                </select>
            </div>

            <div class="form-group d-none" id="ruc_field">
                <label for="ruc" class="sr-only">RUC</label>
                <input type="text" name="ruc" id="ruc" class="form-control form-control-lg" placeholder="RUC (11 dígitos)" maxlength="11" pattern="\d{11}">
            </div>

            <div class="form-group" id="dni_field">
                <label for="dni" class="sr-only">DNI</label>
                <input type="text" name="dni" id="dni" class="form-control form-control-lg" placeholder="DNI (8 dígitos)" maxlength="8" pattern="\d{8}" required>
            </div>

            <div class="form-group" id="email_field">
                <label for="email" class="sr-only">Correo</label>
                <input type="email" name="email" id="email" class="form-control form-control-lg" placeholder="Correo electrónico" required>
            </div>

            <button class="btn btn-lg btn-primary btn-block" type="submit">Enviar Código de Recuperación</button>

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

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

            <p class="mt-5 mb-3 text-muted">© 2025</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('person_type').addEventListener('change', function () {
            const type = this.value.toUpperCase();
            const rucField = document.getElementById('ruc_field');
            const rucInput = document.getElementById('ruc');

            if (type === 'JURIDICA') {
                rucField.classList.remove('d-none');
                rucInput.setAttribute('required', 'required');
            } else {
                rucField.classList.add('d-none');
                rucInput.removeAttribute('required');
            }
        });
    </script>

  </body>
</html>