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 = `
 
  ${eventInfo.name}
  

      

          

              
Ticket Price
              
Quantity
              

          
          

              
${eventInfo.price} lv
              

                      1
                      2
                      3
                      4
                      5
                  
              

          
      
      Venue description:
      
${eventInfo.description}
      
Starting time: ${eventInfo.startingHour}
  
`;
    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 = `
Confirm purchase

    ${name}
    ${q} x ${price}
    Total: ${totalPrice} lv
    
`
    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")
    }
}