Venuemaster

function attachEvents() {
    let authorization = "Basic " + btoa("guest" + ":" + "pass");
    $('#getVenues').click(getVenues);
    let baseUrl = 'https://baas.kinvey.com/';

    const requestHeaders = {
        "Authorization": authorization,
        "Content-Type": "application/json"
    };

    function getVenues() {
        let venueDate = $('#venueDate');
        let request = {
            method: "POST",
            url: baseUrl + "rpc/kid_BJ_Ke8hZg/custom/calendar?query=" + venueDate.val(),
            headers: requestHeaders
        };
        $.ajax(request)
            .then(getInformation)
            .catch(showError);

        function getInformation(dataID) {
            let infoArray = [];
            for (let id of dataID) {
                let request = {
                    method: "GET",
                    url: baseUrl + "appdata/kid_BJ_Ke8hZg/venues/" + id,
                    headers: requestHeaders
                    // success: function (response) {
                    //     infoArray.push(response)
                    // }
                };
                infoArray.push($.ajax(request));
            }

            Promise.all(infoArray)
                .then(renderHTML)
                .then(renderMoreInfo);
            function renderHTML(venue) {
                let venueInfo = $('#venue-info').empty();
                for (let ven of venue) {
                    let html = `<div class="venue" id="${ven._id}">
                  <span class="venue-name"><input class="info" type="button" value="More info">${ven.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">${ven.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">${ven.description}</p>
                    <p class="description">Starting time: ${ven.startingHour}</p>
                  </div>
                </div>`;
                    venueInfo.append(html);
                }
                return venue;
            }

            function renderMoreInfo() {
                let arrInfo = [];
                $('.info').click(function () {
                    let info = $(this).parent().parent().find('.venue-details');
                    if (info.is(':hidden')) {
                        info.css('display', 'block');
                    }
                    Promise.all(arrInfo).then(renderPurchase)
                });
            }

            function renderPurchase() {
                $('.purchase').click(function () {
                    let id = $(this).parent().parent().parent().parent().parent().parent().attr('id');
                    let name=$(this).parent().parent().parent().parent().parent().parent().find('.venue-name').text();
                    let price = $(this).parent().parent().parent().find('.venue-price').text().replace(' lv', '');
                    let quantity = $(this).parent().parent().parent().find('.quantity').find('option:selected').text();
                    let sum = Number(price) * Number(quantity).toFixed(2);
                    let html = `<span class="head">Confirm purchase</span>
                    <div class="purchase-info">
                      <span>${name}</span>
                      <span>${quantity} x ${price}.00</span>
                      <span>Total: ${sum}.00 lv</span>
                      <input type="button" value="Confirm">
                    </div>`;

                    $('#venue-info').empty();
                    $('#venue-info').append(html);

                    $('.purchase-info').find('input').click(function () {
                        let request = {
                            method: "POST",
                            url: baseUrl + `rpc/kid_BJ_Ke8hZg/custom/purchase?venue=${id}&qty=${quantity}`,
                            headers: requestHeaders,
                            success: function (data) {
                                $('#venue-info').append(data)
                            },
                            error: function (error) {
                                alert(error)
                            }
                        };
                        $.ajax(request).then(function (data) {
                            $('.purchase-info').empty();
                            $('.head').empty();
                            $('#venue-info').text("You may print this page as your ticket").append(data.html)
                        })
                    })
                })
            }
        }
    }
    function showError(error) {
        alert(JSON.stringify(error))
    }
}