<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>
  <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; /* Alineado con la altura de la navbar */
      z-index: 1040; /* Asegura que esté por encima del contenido */
    }
    .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; /* Ajusta debajo de navbar */
      padding: 40px 20px;
      position: relative;
      z-index: 1;
      background-color: #f4f6f9; /* Asegura fondo uniforme */
      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>

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

<body>
<br><br><br>

<div class="content">
    <h4 class="mb-4">🚛 Alta de Transportista</h4>
    <form action="/IMPORTADORES/transportistas/guardar" method="POST" class="card p-4 shadow-sm">
      <div class="row g-3">
        <div class="col-md-4"><input name="clave"    class="form-control" placeholder="Clave" required></div>
        <div class="col-md-4"><input name="nombre"   class="form-control" placeholder="Nombre completo" required></div>
        <div class="col-md-4"><input name="rfc"      class="form-control" placeholder="RFC" required></div>
        <div class="col-md-4"><input name="curp"     class="form-control" placeholder="CURP"></div>
        <div class="col-md-4"><input name="telefono" class="form-control" placeholder="Teléfono" required></div>
        <div class="col-md-4"><input name="caat"     class="form-control" placeholder="Código CAAT" required></div>

        <div class="col-md-4">
          <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">
          <select id="estado" name="entidad" class="form-select" required disabled>
            <option value="">Primero país…</option>
          </select>
        </div>

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

        <div class="col-md-8"><input name="domicilio" class="form-control" placeholder="Domicilio completo" required></div>
      </div>
      <div class="text-end mt-4">
        <button class="btn btn-success px-4">Guardar Transportista</button>
      </div>
    </form>
  </div>

  <script>
    // 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>