Funcionalidad JavaScript Taxi Directorio - OV

function taxistas_shortcode() {
    ob_start();
    ?>
    <script>
      let currentPage = 1;
      const itemsPerPage = 6;
      let allTaxistas = [];
      let filteredTaxistas = [];

      function showError(message) {
          const errorDiv = document.getElementById('error-message');
          errorDiv.textContent = message;
          errorDiv.style.display = 'block';
          setTimeout(() => {
              errorDiv.style.display = 'none';
          }, 5000);
      }

      function showLoading(show) {
          document.getElementById('loadingSpinner').style.display = show ? 'flex' : 'none';
          document.getElementById('taxiList').style.display = show ? 'none' : 'grid';
      }

      function createTaxiCard(taxista) {
          const card = document.createElement('div');
          card.className = 'taxi-card';

          const whatsappMsg = encodeURIComponent(`Hola ${taxista.nombre}, me gustaría solicitar un viaje. ¿Está disponible en este momento?`);
          const imageUrl = taxista.foto && taxista.foto.length > 0
              ? taxista.foto[0].url
              : '/api/placeholder/400/320';

          card.innerHTML = `
              <img src="${imageUrl}" alt="Foto de ${taxista.nombre}" class="taxi-image">
              <div class="taxi-content">
                  <div class="taxi-header">
                      <div class="taxi-name">${taxista.nombre}</div>
                      <span class="status-badge status-${taxista.estado}">
                          <i class="fas fa-${taxista.estado === 'ocupado' ? 'times-circle' : 'check-circle'}"></i>
                          ${taxista.estado === 'ocupado' ? 'Ocupado' : 'Disponible'}
                      </span>
                  </div>
                  <div class="taxi-details">
                      <div><i class="fas fa-taxi"></i> Unidad: ${taxista.unidad}</div>
                      <div><i class="fas fa-map-marker-alt"></i> Zona: ${taxista.zona}</div>
                  </div>
                  <div class="contact-buttons">
                      ${taxista.telefono ? `
                          <a href="tel:${taxista.telefono}"
                              class="contact-button phone-button"
                              title="Llamar">
                              <i class="fas fa-phone"></i>
                              Llamar
                          </a>
                          <a href="https://wa.me/${taxista.telefono}?text=${whatsappMsg}"
                              class="contact-button whatsapp-button"
                              target="_blank">
                              <i class="fab fa-whatsapp"></i>
                              WhatsApp
                          </a>
                      ` : ''}
                  </div>
              </div>
          `;

          return card;
      }

      function updatePagination() {
          const totalPages = Math.ceil(filteredTaxistas.length / itemsPerPage);
          document.getElementById('prevPage').disabled = currentPage === 1;
          document.getElementById('nextPage').disabled = currentPage === totalPages;
          document.getElementById('pageInfo').textContent = `Página ${currentPage} de ${totalPages}`;
      }

      function applyFilters() {
          const searchTerm = document.getElementById('searchInput').value.toLowerCase();
          const statusFilter = document.getElementById('filterStatus').value;

          filteredTaxistas = allTaxistas.filter(taxista => {
              const matchesSearch = (
                  taxista.nombre.toLowerCase().includes(searchTerm) ||
                  taxista.unidad.toLowerCase().includes(searchTerm) ||
                  taxista.zona.toLowerCase().includes(searchTerm)
              );

              const matchesStatus = statusFilter === 'todos' || taxista.estado === statusFilter;

              return matchesSearch && matchesStatus;
          });

          currentPage = 1;
          displayTaxistas();
      }

      function displayTaxistas() {
          const taxiList = document.getElementById('taxiList');
          taxiList.innerHTML = '';

          const start = (currentPage - 1) * itemsPerPage;
          const end = start + itemsPerPage;
          const pageItems = filteredTaxistas.slice(start, end);

          if (pageItems.length === 0) {
              taxiList.innerHTML = `
                  <div style="grid-column: 1/-1; text-align: center; padding: 50px; color: #666;">
                      <i class="fas fa-search" style="font-size: 48px; margin-bottom: 20px;"></i>
                      <p>No se encontraron taxistas que coincidan con tu búsqueda.</p>
                  </div>
              `;
          } else {
              pageItems.forEach(taxista => {
                  const card = createTaxiCard(taxista);
                  taxiList.appendChild(card);
              });
          }

          updatePagination();
          document.getElementById('taxiCount').textContent = filteredTaxistas.length;
      }

      function shuffleArray(array) {
          for (let i = array.length - 1; i > 0; i--) {
              const j = Math.floor(Math.random() * (i + 1));
              [array[i], array[j]] = [array[j], array[i]];
          }
          return array;
      }

      async function loadTaxistas() {
          showLoading(true);
          try {
              const response = await fetch('<?php echo admin_url('admin-ajax.php'); ?>?action=get_taxistas_data');

              if (!response.ok) {
                  throw new Error(`HTTP error! status: ${response.status}`);
              }

              const result = await response.json();

              if (!result.success) {
                  throw new Error(result.data || 'Error al cargar los datos');
              }

              const data = result.data;

              if (!data.records || data.records.length === 0) {
                  showError('No se encontraron registros');
                  return;
              }

              // Convertir records a array y mezclar aleatoriamente
              allTaxistas = shuffleArray(data.records.map(record => ({
                  id: record.id,
                  nombre: record.fields.Nombre || 'Sin nombre',
                  unidad: record.fields.Unidad || 'Sin unidad',
                  telefono: record.fields.Telefono || '',
                  zona: record.fields.Zona || 'Sin zona',
                  estado: record.fields.Estado || 'disponible',
                  foto: record.fields.Foto
              })));

              filteredTaxistas = [...allTaxistas];
              displayTaxistas();

          } catch (error) {
              showError('Error al cargar los datos: ' + error.message);
              console.error('Error completo:', error);
          } finally {
              showLoading(false);
          }
      }

      // Event Listeners
      document.getElementById('searchInput').addEventListener('input', applyFilters);
      document.getElementById('filterStatus').addEventListener('change', applyFilters);
      document.getElementById('sortSelect').addEventListener('change', function(e) {
          const sortField = e.target.value;
          filteredTaxistas.sort((a, b) => a[sortField].localeCompare(b[sortField]));
          displayTaxistas();
      });

      document.getElementById('prevPage').addEventListener('click', function() {
          if (currentPage > 1) {
              currentPage--;
              displayTaxistas();
          }
      });

      document.getElementById('nextPage').addEventListener('click', function() {
          const totalPages = Math.ceil(filteredTaxistas.length / itemsPerPage);
          if (currentPage < totalPages) {
              currentPage++;
              displayTaxistas();
          }
      });

      // Iniciar la aplicación
      loadTaxistas();
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('taxistas', 'taxistas_shortcode');