let username = "guest";
let password = "pass";
let venueInfo = document.getElementById("venue-info");
let venueDate = document.getElementById("venueDate");

let getVenuesBtn = document.getElementById("getVenues");

let hiddenDivs = [];

function createHeader(username, password) {
    let auth = `Basic ${btoa(`${username}:${password}`)}`;
    let headers = {
        'Content-type': 'application/json',
        "Authorization": auth
    };
    return headers;
}


let headers = createHeader(username, password);
getVenuesBtn.addEventListener("click", load)

async function load() {
    let vd = venueDate.value;

    try {
        venueInfo.innerHTML="";
        let response = await fetch(`https://baas.kinvey.com/rpc/kid_BJ_Ke8hZg/custom/calendar?query=${vd}`, {
            method: "POST",
            headers: headers
        });

        let events = await response.json();
        events.forEach(id => {
            getInfoAboutVenue(id);
        });

    } catch {
        alert("No events in the calendar!");
    }
}

async function getInfoAboutVenue(id) {
    try {
        let response = await fetch(`https://baas.kinvey.com/appdata/kid_BJ_Ke8hZg/venues/${id}`, {
            method: "GET",
            headers: headers
        });

        let eventInfo = await response.json();
        display(eventInfo);

    } catch {
        alert("couldn't fetch info about the events")
    }
}

function display(eventInfo) {
    console.log(`i got this fucker ${eventInfo}`)

    let tmplt = document.createElement("div");
    tmplt.setAttribute("id", `${eventInfo._id}`)
    tmplt.innerHTML = `
 
  <span class="venue-name"><input class="info" id="btn${eventInfo._id}"  type="button" value="More info">${eventInfo.name}</span>
  <div class="venue-details" style="display: none;">
      <table>
          <tr>
              <th>Ticket Price</th>
              <th>Quantity</th>
              <th></th>
          </tr>
          <tr>
              <td class="venue-price">${eventInfo.price} lv</td>
              <td><select class="quantity">
                      <option value="1">1</option>
                      <option value="2">2</option>
                      <option value="3">3</option>
                      <option value="4">4</option>
                      <option value="5">5</option>
                  </select></td>
              <td><input class="purchase" type="button" value="Purchase"></td>
          </tr>
      </table>
      <span class="head">Venue description:</span>
      <p class="description">${eventInfo.description}</p>
      <p class="description">Starting time: ${eventInfo.startingHour}</p>
  </div>`;
    venueInfo.appendChild(tmplt);

    let detailsBtn = document.getElementById(`btn${eventInfo._id}`);
    let hiddenDiv = document.getElementById(tmplt.id).getElementsByClassName("venue-details")[0];
    hiddenDiv.setAttribute("id", `hidden ${tmplt.id}`)
    hiddenDivs.push(hiddenDiv);
    detailsBtn.addEventListener("click", function () {
        showDetails(tmplt.id, eventInfo.price, eventInfo.name)
    })
}

function showDetails(id, price, name) {
    hiddenDivs.forEach(hd => {
        if (hd.id.split(" ")[1] == id) {
            hd.style.display = "block";
        } else {
            hd.style.display = "none";
        }
    })

    let purchaseButton = document.getElementById(id).getElementsByClassName("purchase")[0];
    purchaseButton.addEventListener("click", function () {
        purchase(id, price, name)
    })
}

function purchase(id, price, name) {
    let quantitySelect = document.getElementById(id).getElementsByClassName("quantity")[0];
    let q = quantitySelect.value;
    let totalPrice = Number(price) * Number(q);

    //confirmation window
    let confirmDiv = document.createElement("div");
    confirmDiv.innerHTML = `
<span class="head">Confirm purchase</span>
<div class="purchase-info">
    <span>${name}</span>
    <span>${q} x ${price}</span>
    <span>Total: ${totalPrice} lv</span>
    <input type="button" value="Confirm">
</div>`
    confirmDiv.setAttribute("id", `confirm${id}`);
    venueInfo.innerHTML = "";
    venueInfo.appendChild(confirmDiv);
    let confirmButton = document.getElementById(confirmDiv.id).getElementsByTagName("input")[0];
    confirmButton.addEventListener("click", function () {
        confirmPurchase(id, q)
    })
}

async function confirmPurchase(id, q) {
    try {
        console.log(`confirm purchase ${id},${q}`);
        let response = await fetch(`https://baas.kinvey.com/rpc/kid_BJ_Ke8hZg/custom/purchase?venue=${id}&qty=${q} `, {
            method: "POST",
            headers: headers
        });

        let ticket = await response.json();
        let ticketHtml = ticket.html;
        let ticketDiv = document.createElement("div");
        ticketDiv.innerHTML = ticketHtml;
        let paragraph = document.createElement("p");
        paragraph.textContent = "You may print this page as your ticket";
        venueInfo.innerHTML = "";
        venueInfo.append(paragraph, ticketDiv);

    } catch {
        alert("Purchase failed")
    }
}