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

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Dashboard | Agente Aduanal</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>
  <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; }
    @media (min-width: 768px) { .content { margin-left: 250px; } }
    @media (max-width: 767.98px) {
      .content { margin-left: 0; }
      .sidebar .nav-link { font-weight: normal; color: #343a40; background-color: transparent; }
      .sidebar .nav-link:hover, .sidebar .nav-link.active { background-color: #e9ecef; color: #212529; }
    }
    .card { border-radius: 12px; }
    .hide { display: none !important; }
  </style>
</head>
<body>

  <div class="content">
    <h4 class="mb-4">🗺️ Nuevas Locaciones</h4>
    <div class="row g-3">

      <!-- Nuevo Estado -->
      <div class="col-md">
        <div class="card p-4 bg-white shadow-sm">
          <form id="estadoForm">
            <h4 class="mb-4 text-dark">➕ Nuevo Estado</h4><br>
            <!-- País -->
            <div class="col-md-12">
              <label for="paisEstado" class="form-label">País *</label>
              <select id="paisEstado" 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><br><br><br>

            <!-- Estado -->
            <div class="col-md-12">
              <label for="entidadEstado" class="form-label">Entidad / Provincia *</label>
              <input id="entidadEstado" name="entidad" class="form-control" required>
            </div><br><br>

            <div class="col-md-4 d-flex align-items-end">
              <button type="submit" class="btn btn-success w-100">
                <i class="fas fa-plus"></i> Registrar Estado
              </button>
              <a href="/IMPORTADORES/locaciones/lista" class="btn btn-secondary ms-2">Cancelar</a>
            </div>
          </form>
          
        </div>
      </div>

      <!-- Nueva Ciudad -->
      <div class="col-md">
        <div class="card p-4 bg-white shadow-sm">
          <form id="ciudadForm" action="/IMPORTADORES/locaciones/guadarCiudad" method="POST" enctype="multipart/form-data">
            <h4 class="mb-4 text-dark">➕ Nueva Ciudad</h4>
            <!-- País -->
            <div class="col-md-12">
              <label for="paisCiudad" class="form-label">País *</label>
              <select id="paisCiudad" 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><br>

            <!-- Estado -->
            <div class="col-md-12">
              <label for="entidadCiudad" class="form-label">Entidad / Provincia *</label>
              <select id="estadoCiudad" name="entidad" class="form-select" required disabled>
                <option value="">Primero país…</option>
              </select>
            </div><br>

            <!-- Ciudad -->
            <div class="col-md-12">
              <label for="nombreCiudad" class="form-label">Ciudad *</label>
              <input id="nombreCiudad" name="ciudad" class="form-control" required>
            </div><br>

            <div class="col-md-4 d-flex align-items-end">
              <button type="submit" class="btn btn-success w-100">
                <i class="fas fa-plus"></i> Registrar Ciudad
              </button>
              <a href="/IMPORTADORES/locaciones/lista" class="btn btn-secondary ms-2">Cancelar</a>
            </div>
          </form>
        </div>
      </div>

    </div>
  </div>

  <script>
    // Función para cargar estados
    function cargarEstados(paisId, selectElement) {
      selectElement.innerHTML = '<option>Cargando...</option>';
      selectElement.disabled = true;
      
      fetch(`/IMPORTADORES/locaciones/estados?pais=${paisId}`)
        .then(response => response.json())
        .then(estados => {
          selectElement.innerHTML = '<option value="">Selecciona estado</option>';
          estados.forEach(estado => {
            const option = new Option(estado.nombre, estado.id_estado);
            selectElement.add(option);
          });
          selectElement.disabled = false;
        })
        .catch(error => {
          console.error('Error:', error);
          selectElement.innerHTML = '<option value="">Error al cargar</option>';
        });
    }

    // Evento para cargar estados cuando se selecciona país en formulario de ciudad
    document.getElementById('paisCiudad').addEventListener('change', function(e) {
      const paisId = e.target.value;
      const estadoSelect = document.getElementById('estadoCiudad');
      
      if (paisId) {
        cargarEstados(paisId, estadoSelect);
      } else {
        estadoSelect.innerHTML = '<option value="">Primero selecciona país</option>';
        estadoSelect.disabled = true;
      }
    });

    // Formulario de nuevo estado
    document.getElementById('estadoForm').addEventListener('submit', function(e) {
      e.preventDefault();
      
      // Obtener valores directamente
      const paisSelect = document.getElementById('paisEstado');
      const entidadInput = document.getElementById('entidadEstado');
      
      const paisValue = paisSelect.value;
      const entidadValue = entidadInput.value.trim();
      
      // Validación en frontend
      if (!paisValue) {
        Swal.fire({
          icon: 'warning',
          title: 'Campo requerido',
          text: 'Debe seleccionar un país'
        });
        return;
      }
      
      if (!entidadValue) {
        Swal.fire({
          icon: 'warning',
          title: 'Campo requerido',
          text: 'Debe ingresar el nombre del estado'
        });
        return;
      }
      
      // Crear FormData manualmente
      const formData = new FormData();
      formData.append('pais', paisValue);
      formData.append('entidad', entidadValue);
      
      const submitBtn = this.querySelector('button[type="submit"]');
      const originalText = submitBtn.innerHTML;
      
      submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Guardando...';
      submitBtn.disabled = true;
      
      // Debug: mostrar lo que se va a enviar
      console.log('Enviando:', {
        pais: paisValue,
        entidad: entidadValue
      });
      
      fetch('/IMPORTADORES/locaciones/guardarEstado', {
        method: 'POST',
        body: formData
      })
      .then(response => response.json())
      .then(data => {
        if (data.success) {
          Swal.fire({
            icon: 'success',
            title: '¡Éxito!',
            text: data.message,
            timer: 2000,
            showConfirmButton: false
          });
          this.reset();
        } else {
          Swal.fire({
            icon: 'error',
            title: 'Error',
            text: data.message
          });
        }
      })
      .catch(error => {
        console.error('Error:', error);
        Swal.fire({
          icon: 'error',
          title: 'Error',
          text: 'Ocurrió un error al procesar la solicitud'
        });
      })
      .finally(() => {
        submitBtn.innerHTML = originalText;
        submitBtn.disabled = false;
      });
    });

    // Formulario de nueva ciudad
    document.getElementById('ciudadForm').addEventListener('submit', function(e) {
      e.preventDefault();
      
      const formData = new FormData(this);
      const submitBtn = this.querySelector('button[type="submit"]');
      const originalText = submitBtn.innerHTML;
      
      submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Guardando...';
      submitBtn.disabled = true;
      
      fetch('/IMPORTADORES/locaciones/guardarCiudad', {
        method: 'POST',
        body: formData
      })
      .then(response => response.json())
      .then(data => {
        if (data.success) {
          Swal.fire({
            icon: 'success',
            title: '¡Éxito!',
            text: data.message,
            timer: 2000,
            showConfirmButton: false
          });
          this.reset();
          // Resetear el select de estados
          document.getElementById('estadoCiudad').innerHTML = '<option value="">Primero selecciona país</option>';
          document.getElementById('estadoCiudad').disabled = true;
        } else {
          Swal.fire({
            icon: 'error',
            title: 'Error',
            text: data.message
          });
        }
      })
      .catch(error => {
        console.error('Error:', error);
        Swal.fire({
          icon: 'error',
          title: 'Error',
          text: 'Ocurrió un error al procesar la solicitud'
        });
      })
      .finally(() => {
        submitBtn.innerHTML = originalText;
        submitBtn.disabled = false;
      });
    });
  </script>

</body>
</html>