const apiUrl = 'https://camp.sidis.click/webflow/meloncamp';
const xhr = new XMLHttpRequest();

xhr.open('GET', `${apiUrl}/v1/trip/all?place=пухівка`);

xhr.onload = function() {
  if (xhr.status === 200) {
    const tripContainer = document.getElementById('trips');
    const tripData = JSON.parse(xhr.responseText);
    tripData.forEach(trip => {
        const tripElement = createTripElement(trip);
        tripContainer.appendChild(tripElement);
    });

  } else {
    console.error(xhr.statusText);
  }
};

xhr.onerror = function() {
  console.error(xhr.statusText);
};

xhr.send();


function createTripElement(trip) {
  // create the trip element
  const tripElement = document.createElement('div');
  tripElement.classList.add('box');
	if (trip.price == 0) {
  tripElement.innerHTML = `
        <img src="${trip.image_url} loading="lazy" height="Auto" width="Auto" alt="" sizes="(max-width: 479px) 100vw, (max-width: 767px) 147.5px, 400px" srcset="${trip.image_url} 500w, ${trip.image_url} 800w, ${trip.image_url} 800w" class="image-box">
        <div class="div-block-10">
          <h2 class="h2-box">${trip.name}</h2>
          <div class="h-10-px"></div>
          <h2 class="h4">${trip.shift} ${trip.dates}</h2>
          <div class="h-30-px"></div>

          <div class="h-20-px"></div>
        </div>
	  <div class="sold-out" style="display: flex; min-width: 270px;">
            <div class="h3-bold-2 red" style="  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
    color: #ff5555; ">ПУТІВКИ РОЗПРОДАНО</div>
          </div>
      `;

	}
	else{
  tripElement.innerHTML = `
        <img src="${trip.image_url} loading="lazy" height="Auto" width="Auto" alt="" sizes="(max-width: 479px) 100vw, (max-width: 767px) 147.5px, 400px" srcset="${trip.image_url} 500w, ${trip.image_url} 800w, ${trip.image_url} 800w" class="image-box">
        <div class="div-block-10">
          <h2 class="h2-box">${trip.name}</h2>
          <div class="h-10-px"></div>
          <h2 class="h4">${trip.shift} ${trip.dates}</h2>
          <div class="h-30-px"></div>
          <div class="price-block">
            <h2 class="price">${trip.price} грн.</h2>
            <h2 class="price-previsious">${trip.old_price}</h2>
          </div>
          <div class="h-20-px"></div>
        </div>
        <div class="buttons-block-box" style="display: flex;">
          <a href="/info?id=${trip.sku}" class="btn-green-box w-button">Детальніше</a>
          <div class="_w-20-px"></div>
          <button class="btn-white-box w-button book-btn">Забронювати</button>
        </div>
      `;
	}

  // add an event listener to the book button
  const bookButton = tripElement.querySelector('.book-btn');
	if (bookButton !== null) {
  bookButton.addEventListener('click', () => {
    bookTrip(trip.id);
  });
	}

  return tripElement;
}

function bookTrip(tripId) {
  // function to handle booking the trip
  fetch(`${apiUrl}/v1/trip/${tripId}`)
  .then(response => response.json())
  .then(response => {
    displayForm(response)
  })
}

// I changed the name of the function to be more descriptive of what it does
function displayForm(trip) {
  // I changed the name of the variable to be more descriptive of what it is
  var form = document.getElementsByClassName("form-1")[1];

  // I changed the name of the variable to be more descriptive of what it is
  var element = form.querySelector('.box-title-1');
  element.style.transition = 'transform 0.5s ease, opacity 0.5s ease';
  element.style.transform = 'translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg)';
  element.style.transformStyle = 'preserve-3d';
  element.style.opacity = '1';
  element.style.display = 'block';

  // I changed the name of the variable to be more descriptive of what it is
  var element2 = form.querySelector('.shift1');
  element2.style.transition = 'opacity 0.5s ease';
  element2.style.opacity = '1';
  element2.style.display = 'block';

  // I changed the name of the variable to be more descriptive of what it is
  var element = form.querySelector('.h2-box')
  // I changed the name of the variable to be more descriptive of what it is
  var element2 = form.querySelector('.image-box')
  
  // I changed the name of the variable to be more descriptive of what it is
  var form = document.getElementsByClassName("form-2")[0];

  element.innerHTML = trip.name
  element2.src = trip.image_url
  element2.removeAttribute("srcset")
  form.setAttribute("data-name", `${trip.shift} ${trip.name} | ${trip.dates} | (${trip.sku})`);
}