var endpointResult = '';

window.addEventListener('DOMContentLoaded', async () => {
  endpointResult = await endpoint();
  fetchCustomMaps();
  fetchMaps();
});

async function fetchCustomMaps() {
  try {
    const response = await fetch(`${endpointResult}/website/custom`);
    if (!response.ok) throw new Error(`Error al obtener Custom Maps: ${response.status}`);
    
    const json = await response.json();
    renderCustomMapsSwiper(json.data, 'customMapsContainer');
  } catch (error) {
    console.error(error);
  }
}

async function fetchMaps() {
  try {
    const response = await fetch(`${endpointResult}/website/maps`);
    if (!response.ok) throw new Error(`Error al obtener Maps: ${response.status}`);
    
    const json = await response.json();
    renderItems(json.data, 'mapsContainer');
  } catch (error) {
    console.error(error);
  }
}

function renderItems(data, containerId) {
  const container = document.getElementById(containerId);
  if (!container) return;

  container.innerHTML = '';

  if (!data || data.length === 0) {
    container.innerHTML = '<p>No se encontraron resultados.</p>';
    return;
  }

  for (let item of data) {
    const card = document.createElement('div');
    card.className = 'col-xxl-3 col-xl-3 col-md-6 col-sm-12 mb-4';

    card.innerHTML = `
      <h6 class="text-default text-center p-3 fw-semibold border-top-0 mb-0">${item.title}</h6>
      <div class="screens-main-list">
        <div class="screens-main bg-primary-transparent bg-opacity-10">
          <div class="overflow-hidden bg-style max-height-demo">
            <a href="${item.url}" target="_blank">
              <img src="${item.primaryScreenshot}" class="img-fluid" alt="${item.title}">
            </a>
            <a href="${item.url}" target="_blank" class="btn btn-sm btn-primary view-content text-fixed-white mt-2">
              View Demo
            </a>
          </div>
        </div>
      </div>
    `;

    container.appendChild(card);
  }
}

async function endpoint() {
  const res = await fetch("endpoint.php");
  const data = await res.json();
  return data.base_url;
}

function renderCustomMapsSwiper(data, containerId) {
  const container = document.getElementById(containerId);
  if (!container) return;

  container.innerHTML = '';

  if (!data || data.length === 0) {
    container.innerHTML = '<p>No se encontraron resultados.</p>';
    return;
  }

  for (let item of data) {
    const slide = document.createElement('div');
    slide.className = 'swiper-slide';

    slide.innerHTML = `
      <a href="${item.url}" target="_blank" class="glightbox" data-gallery="gallery1">
        <img src="${item.primaryScreenshot}" alt="${item.title}" class="img-fluid rounded">
        <h6 class="bg-transparent text-center p-3 mb-0 text-white">${item.title}</h6>
      </a>
    `;

    container.appendChild(slide);
  }
}