Aprobación de Agencias

2025-07-14 13:27:15 -06:00
parent e820f81d31
commit 0e88fea37e
36 changed files with 2807 additions and 1128 deletions
--- a/views/locaciones/alta_locaciones.php
+++ b/views/locaciones/alta_locaciones.php
@@ -64,6 +64,51 @@ if ($tipoUsuario === 'agente_aduanal') {
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
    .btn-animated:hover::before { left: 100%; }
    .hide { display: none !important; }
+    /* ========== ANIMACIONES PARA INPUTS TEXTO ========== */
+    .form-control:not(.no-animation) { transition: all 0.3s ease; border: 2px solid #dee2e6; position: relative; }
+    .form-control:not(.no-animation):focus { border-color: #0d6efd; box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25), 0 0 20px rgba(13, 110, 253, 0.3); transform: translateY(-2px); }
+    .form-control:not(.no-animation):not(:placeholder-shown) { /*border-color: #198754; background-color: #f8fff9;*/ }
+    .form-control:not(.no-animation).shake { animation: shake 0.5s ease-in-out; }
+    @keyframes shake {
+      0%, 100% { transform: translateX(0); }
+      25% { transform: translateX(-5px); }
+      75% { transform: translateX(5px); }
+    }
+    /* Floating labels para inputs texto */
+    .form-floating-custom { position: relative; margin-bottom: 1.5rem; }
+    .form-floating-custom .form-control { padding: 1rem 0.75rem 0.5rem 0.75rem; height: auto; }
+    .form-floating-custom .form-label { position: absolute; top: 0.75rem; left: 0.75rem; transition: all 0.3s ease; pointer-events: none; color: #6c757d; z-index: 2; }
+    .form-floating-custom .form-control:focus ~ .form-label,
+    .form-floating-custom .form-control:not(:placeholder-shown) ~ .form-label { top: 0.25rem; font-size: 0.75rem; color: #0d6efd; font-weight: 600; }
+    .input-pulse:hover:not(.no-animation) { animation: inputPulse 0.6s ease-in-out; }
+    @keyframes inputPulse {
+    0%   { transform: scale(1); }
+    50%  { transform: scale(1.02); }
+    100% { transform: scale(1); }
+    }
+    .input-gradient:not(.no-animation) { position: relative; overflow: hidden; }
+    .input-gradient:not(.no-animation)::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; 
+    background: linear-gradient(90deg, transparent, rgba(13, 110, 253, 0.3), transparent); transition: left 0.5s; pointer-events: none; z-index: 1; }
+    .input-gradient:not(.no-animation):focus::before { left: 100%; }
+    .form-control.valid:not(.no-animation) { /*border-color: #198754; background: linear-gradient(45deg, #fff, #f8fff9);*/ animation: successGlow 1s ease-in-out; }
+    @keyframes successGlow {
+    0%   { box-shadow: 0 0 5px rgba(25, 135, 84, 0.5); }
+    50%  { box-shadow: 0 0 20px rgba(25, 135, 84, 0.8); }
+    100% { box-shadow: 0 0 5px rgba(25, 135, 84, 0.5); }
+    }
+    /* Animación para los campos del formulario */
+    .form-group-animated { opacity: 0; transform: translateY(20px); animation: slideUp 0.6s ease-out forwards; }
+    .form-group-animated:nth-child(1)  { animation-delay: 0.1s; }
+    .form-group-animated:nth-child(2)  { animation-delay: 0.2s; }
+    .form-group-animated:nth-child(3)  { animation-delay: 0.3s; }
+    .form-group-animated:nth-child(4)  { animation-delay: 0.4s; }
+    .form-group-animated:nth-child(5)  { animation-delay: 0.5s; }
+    .form-group-animated:nth-child(6)  { animation-delay: 0.6s; }
+    .form-group-animated:nth-child(7)  { animation-delay: 0.7s; }
+    .form-group-animated:nth-child(8)  { animation-delay: 0.8s; }
+    .form-group-animated:nth-child(9)  { animation-delay: 0.9s; }
+    .form-group-animated:nth-child(10) { animation-delay: 1.0s; }
+    @keyframes slideUp { to { opacity: 1; transform: translateY(0); } }
  </style>
 </head>
 <body>
@@ -73,15 +118,15 @@ if ($tipoUsuario === 'agente_aduanal') {
    <div class="row g-3">

      <!-- Nuevo Estado -->
-      <div class="col-md">
+      <div class="col-md form-group-animated">
        <div class="card p-4 bg-white shadow-sm card-hover position-relative h-auto">
          <form id="estadoForm">
            <h4 class="mb-4 text-dark">➕ Nuevo Estado</h4><br>
            <!-- País -->
-            <div class="col-md-12">
+            <div class="col-md-12 form-group-animated">
              <label for="paisEstado" class="form-label">País *</label>
              <select id="paisEstado" name="pais" class="form-select" required>
-                <option value="">Selecciona país</option>
+                <option value="">-- Selecciona un país --</option>
                <?php foreach($paises as $p): ?>
                  <option value="<?= $p['id_pais'] ?>">
                    <?= htmlspecialchars($p['nombre']) ?>
@@ -91,12 +136,12 @@ if ($tipoUsuario === 'agente_aduanal') {
            </div><br><br><br>

            <!-- Estado -->
-            <div class="col-md-12">
+            <div class="col-md-12 form-group-animated">
              <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">
+            <div class="col-md-4 d-flex align-items-end form-group-animated">
              <button type="submit" class="btn btn-success W-100 btn-animated">
                <i class="fas fa-plus"></i> Registrar Estado
              </button>
@@ -108,25 +153,25 @@ if ($tipoUsuario === 'agente_aduanal') {
      </div>

      <!-- Nueva Ciudad -->
-      <div class="col-md">
+      <div class="col-md form-group-animated">
        <div class="card p-4 bg-white shadow-sm card-hover position-relative h-auto">
          <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">
+            <div class="col-md-12 form-group-animated">
              <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>
+                <option value="">-- Selecciona un 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">
+            <div class="col-md-12 form-group-animated">
              <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>
@@ -134,12 +179,12 @@ if ($tipoUsuario === 'agente_aduanal') {
            </div><br>

            <!-- Ciudad -->
-            <div class="col-md-12">
+            <div class="col-md-12 form-group-animated">
              <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">
+            <div class="col-md-4 d-flex align-items-end form-group-animated">
              <button type="submit" class="btn btn-success W-100 btn-animated">
                <i class="fas fa-plus"></i> Registrar Ciudad
              </button>
@@ -156,12 +201,12 @@ if ($tipoUsuario === 'agente_aduanal') {
    // Función para cargar estados
    function cargarEstados(paisId, selectElement) {
      selectElement.innerHTML = '<option>Cargando...</option>';
-      selectElement.disabled = true;
+      selectElement.disabled  = true;
      
      fetch(`/IMPORTADORES/locaciones/estados?pais=${paisId}`)
        .then(response => response.json())
        .then(estados => {
-          selectElement.innerHTML = '<option value="">Selecciona estado</option>';
+          selectElement.innerHTML = '<option value="">-- Selecciona un estado --</option>';
          estados.forEach(estado => {
            const option = new Option(estado.nombre, estado.id_estado);
            selectElement.add(option);
@@ -176,14 +221,14 @@ if ($tipoUsuario === 'agente_aduanal') {

    // 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 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;
+        estadoSelect.innerHTML = '<option value="">Primero selecciona un país...</option>';
+        estadoSelect.disabled  = true;
      }
    });

@@ -192,28 +237,20 @@ if ($tipoUsuario === 'agente_aduanal') {
      e.preventDefault();
      
      // Obtener valores directamente
-      const paisSelect = document.getElementById('paisEstado');
+      const paisSelect   = document.getElementById('paisEstado');
      const entidadInput = document.getElementById('entidadEstado');
      
-      const paisValue = paisSelect.value;
+      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'
-        });
+        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'
-        });
+        Swal.fire({ icon: 'warning', title: 'Campo requerido', text: 'Debe ingresar el nombre del estado' });
        return;
      }
      
@@ -222,11 +259,11 @@ if ($tipoUsuario === 'agente_aduanal') {
      formData.append('pais', paisValue);
      formData.append('entidad', entidadValue);
      
-      const submitBtn = this.querySelector('button[type="submit"]');
+      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;
+      submitBtn.disabled  = true;
      
      // Debug: mostrar lo que se va a enviar
      console.log('Enviando:', {
@@ -241,33 +278,19 @@ if ($tipoUsuario === 'agente_aduanal') {
      .then(response => response.json())
      .then(data => {
        if (data.success) {
-          Swal.fire({
-            icon: 'success',
-            title: '¡Éxito!',
-            text: data.message,
-            timer: 2000,
-            showConfirmButton: false
-          });
+          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
-          });
+          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'
-        });
+        Swal.fire({ icon: 'error', title: 'Error', text: 'Ocurrió un error al procesar la solicitud' });
      })
      .finally(() => {
        submitBtn.innerHTML = originalText;
-        submitBtn.disabled = false;
+        submitBtn.disabled  = false;
      });
    });

@@ -275,12 +298,12 @@ if ($tipoUsuario === 'agente_aduanal') {
    document.getElementById('ciudadForm').addEventListener('submit', function(e) {
      e.preventDefault();
      
-      const formData = new FormData(this);
-      const submitBtn = this.querySelector('button[type="submit"]');
+      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;
+      submitBtn.disabled  = true;
      
      fetch('/IMPORTADORES/locaciones/guardarCiudad', {
        method: 'POST',
@@ -289,36 +312,60 @@ if ($tipoUsuario === 'agente_aduanal') {
      .then(response => response.json())
      .then(data => {
        if (data.success) {
-          Swal.fire({
-            icon: 'success',
-            title: '¡Éxito!',
-            text: data.message,
-            timer: 2000,
-            showConfirmButton: false
-          });
+          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;
+          document.getElementById('estadoCiudad').disabled  = true;
        } else {
-          Swal.fire({
-            icon: 'error',
-            title: 'Error',
-            text: data.message
-          });
+          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'
-        });
+        Swal.fire({ icon: 'error', title: 'Error', text: 'Ocurrió un error al procesar la solicitud' });
      })
      .finally(() => {
        submitBtn.innerHTML = originalText;
-        submitBtn.disabled = false;
+        submitBtn.disabled  = false;
+      });
+    });
+
+    // Script para manejar las animaciones de validación
+    document.addEventListener('DOMContentLoaded', function() {
+      const inputs = document.querySelectorAll('input.form-control');
+      
+      inputs.forEach(input => {
+        // Validación en tiempo real
+        input.addEventListener('input', function() {
+          if (this.checkValidity()) {
+            this.classList.remove('shake');
+            this.classList.add('valid');
+          } else {
+            this.classList.remove('valid');
+          }
+        });
+        
+        // Efecto shake en campos inválidos
+        input.addEventListener('invalid', function() {
+          this.classList.add('shake');
+          setTimeout(() => {
+            this.classList.remove('shake');
+          }, 500);
+        });
+      });
+
+      // Validación del formulario
+      document.getElementById('formAltaPatente').addEventListener('submit', function(e) {
+        e.preventDefault();
+        
+        let isValid = true;
+        inputs.forEach(input => {
+          if (!input.checkValidity()) {
+            input.classList.add('shake');
+            isValid = false;
+          }
+        });
      });
    });
  </script>
--- a/views/locaciones/gestion_locaciones.php
+++ b/views/locaciones/gestion_locaciones.php
@@ -588,7 +588,7 @@ if ($tipoUsuario === 'agente_aduanal') {
      .finally(() => {
        // RESTAURAR BOTÓN
        submitBtn.innerHTML = originalText;
-        submitBtn.disabled = false;
+        submitBtn.disabled  = false;
      });
    });
  </script>