<?php include __DIR__ . '/../partials/sidebar_importador.php'; ?>

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Dashboard | Alta transportista</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  <!-- SweetAlert2 -->
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <style>
    body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9;}
    .sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 56px; z-index: 1040; }
    .sidebar .nav-link { font-weight: bold; color: white; transition: all 0.3s ease; }
    .sidebar .nav-link:hover,
    .sidebar .nav-link.active { background-color: #495057; color: #fff; }
    .content { margin-top: 56px; padding: 40px 20px; position: relative; z-index: 1; background-color: #f4f6f9; transition: margin-left 0.3s ease; }
    .navbar { position: fixed; top: 0; width: 100%; z-index: 1050; }
    /* A partir de dispositivos medianos (>=768px), deja espacio lateral */
    @media (min-width: 768px) { .content { margin-left: 250px; /* Ancho del sidebar */ } }
    /* En móviles, sin margen lateral */
    @media (max-width: 767.98px) { .content { margin-left: 0; } }
    .card { border-radius: 12px; }
  </style>
</head>
<body>

  <div class="content">
    <h4 class="mb-4">🚛 Alta de Transportista</h4>
    <form action="/IMPORTADORES/transportistas/guardar" method="POST" class="card p-4 shadow-sm" id="formAltaTransportista">
      <div class="row g-3">
        <div class="col-md-4">
          <label for="clave" class="form-label">Clave *</label>
          <input name="clave"    class="form-control" required>
        </div>

        <div class="col-md-4">
          <label for="nombre" class="form-label">Nombre *</label>
          <input name="nombre"   class="form-control" required>
        </div>

        <div class="col-md-4">
          <label for="rfc" class="form-label">RFC *</label>  
          <input name="rfc"      class="form-control" maxlength="13" required>
        </div>

        <div class="col-md-4">
          <label for="curp" class="form-label">CURP *</label>
          <input name="curp"     class="form-control" maxlength="18" required>
        </div>

        <div class="col-md-4">
          <label for="telefono" class="form-label">Teléfono *</label>
          <input name="telefono" class="form-control" maxlength="11" required>
        </div>

        <div class="col-md-4">
          <label for="caat" class="form-label">Código CAAT *</label>
          <input name="caat"     class="form-control" required>
        </div>

        <div class="col-md-4">
          <label for="pais" class="form-label">País *</label>
          <select id="pais" name="pais" class="form-select" required>
            <option value="">Selecciona país</option>
            <?php foreach($paises as $p): ?>
              <option value="<?= $p['id_pais'] ?>">
                <?= htmlspecialchars($p['nombre']) ?>
              </option>
            <?php endforeach; ?>
          </select>
        </div>

        <div class="col-md-4">
          <label for="entidad" class="form-label">Entidad *</label>
          <select id="estado" name="entidad" class="form-select" required disabled>
            <option value="">Primero país…</option>
          </select>
        </div>

        <div class="col-md-4">
          <label for="ciudad" class="form-label">Ciudad *</label>
          <select id="ciudad" name="ciudad" class="form-select" required disabled>
            <option value="">Primero estado…</option>
          </select>
        </div>

        <div class="col-md-8">
          <label for="domicilio" class="form-label">Domicilio *</label>
          <input name="domicilio" class="form-control" required>
        </div>
      </div>

      <div class="text-end mt-4">
        <button class="btn btn-success px-4">Guardar Transportista</button>
      </div>
    </form>
  </div>

  <script>
    document.getElementById('formAltaTransportista').addEventListener('submit', function(e) {
      const rfcInput = document.querySelector('input[name="rfc"]');
      const curpInput = document.querySelector('input[name="curp"]');
      const telefonoInput = document.querySelector('input[name="telefono"]');

      const rfc = rfcInput.value.trim().toUpperCase();
      const curp = curpInput.value.trim();
      const telefono = telefonoInput.value.trim();

      // Expresiones regulares
      const curpRegex = /^[A-Z]{4}[0-9]{6}[HM](AS|BC|BS|CC|CL|CM|CS|CH|DF|DG|GT|GR|HG|JC|MC|MN|MS|NT|NL|OC|PL|QT|QR|SP|SL|SR|TC|TS|TL|VZ|YN|ZS)[A-Z]{3}[A-Z0-9]{2}$/;
      const rfcRegex = /^[A-ZÑ&]{3,4}\d{6}[A-Z0-9]{3}$/;
      const telefonoRegex = /^\d{3}\s\d{7}$/;

      // Validación de correo
      if (!curpRegex.test(curp)) {
        e.preventDefault();
        Swal.fire("CURP inválido", "No tiene el formato correcto.", "error");
        emailInput.focus();
        return;
      }

      // Validación de RFC
      if (!rfcRegex.test(rfc)) {
        e.preventDefault();
        Swal.fire("RFC inválido", "El RFC debe tener 12 o 13 caracteres con el formato correcto (ej. ABC123456XYZ).", "error");
        rfcInput.focus();
        return;
      }

      // Validación de teléfono
      if (!telefonoRegex.test(telefono)) {
        e.preventDefault();
        Swal.fire("Teléfono inválido", "Debe tener 10 dígitos en el formato: 3 dígitos (LADA), espacio, y 7 dígitos. Ejemplo: 123 4567890", "error");
        phoneInput.focus();
        return;
      }

      // Si no hay errores, enviar el formulario
      this.submit(); // Esto sí lo envía manualmente
    });

    // Active inputs entidad y ciudad
    // 1) Cuando elige país → cargo estados
    document.getElementById('pais').addEventListener('change', e => {
      const pid = e.target.value;
      const sel = document.getElementById('estado');
      sel.innerHTML = '<option>Cargando…</option>';
      sel.disabled = true;
      document.getElementById('ciudad').innerHTML = '<option>Primero estado…</option>';
      document.getElementById('ciudad').disabled = true;

      fetch(`/IMPORTADORES/transportistas/estados?pais=${pid}`)
        .then(r=>r.json())
        .then(list=>{
          sel.innerHTML = '<option value="">Selecciona estado</option>';
          list.forEach(st => sel.add(new Option(st.nombre, st.id_estado)));
          sel.disabled = false;
        });
    });

    // 2) Cuando elige estado → cargo ciudades
    document.getElementById('estado').addEventListener('change', e => {
      const eid = e.target.value;
      const sel = document.getElementById('ciudad');
      sel.innerHTML = '<option>Cargando…</option>';
      sel.disabled = true;

      fetch(`/IMPORTADORES/transportistas/ciudades?estado=${eid}`)
        .then(r=>r.json())
        .then(list=>{
          sel.innerHTML = '<option value="">Selecciona ciudad</option>';
          list.forEach(ct => sel.add(new Option(ct.nombre, ct.id_ciudad)));
          sel.disabled = false;
        });
    });
  </script>

</body>
</html>