$(function () {

    var pickups = null;
    var timeKey = null;
    var timeSelected = null;

    var calendar_rgba = Helpers.convertHex(getComputedStyle(document.documentElement).getPropertyValue('--primary-color-st'), 0.35);
    document.documentElement.style.setProperty('--box-shadow-color', '0 15px 20px -3px ' + calendar_rgba);

    $('.calendar__date--avaiable').click(function () {
        selectDay($(this));
    });

    function selectDay(element, reset = true) {
        if (reset) {
            $(".calendar__date--selected-only").removeClass("calendar__date--selected-only");
            $('.ticket-container').remove();
            $('.request-quote').remove();
        }
        $(element).addClass('calendar__date--selected-only');
        var dateSelected = $(element).attr('date');
        timeKey = $(element).attr('timeKey') === undefined ? null : $(element).attr('timeKey');
        timeSelected = $(element).attr('timeSelected') === undefined ? null : $(element).attr('timeSelected');
        $('.calendar-search-result h4').html('');
        $('.calendar-search-result .subtitle').html('');

        $('.calendar__dates').append('<div class="calendar__on-loading">Loading\u0020calendar</div>');

        $.get('/en/calendar/day-detail', {
            productId: productID,
            date: dateSelected,
            timeKey: timeKey
        }, function (res) {
            $('.calendar-times-area').remove();
            $('.calendar__on-loading').remove();

            for (var i = 0; i < res.length; i++) {
                var price = "";
                var explanation = "";
                if (res[i].price != null) price = '<label class="price">' + res[i].price + ' €</label>';
                if (res[i].explanation != null) explanation = '<p>' + res[i].explanation + '</p>';
                var ticketCalendarElement = '<div class="ticket-container">' +
                    '<div class="ticket-info">' +
                    '<h3>' + res[i].descr + '</h3>' + explanation +
                    '</div>' +
                    '<div class="ticket-choice">' + price +
                    '<div class="input-ticket">' +
                    '<button onClick="diminuisci(' + res[i].id + ')">-</button>' +
                    '<input name="qty' + res[i].id + '"' +
                    'data-product-id="' + res[i].id + '"' +
                    'data-product-bookingData="' + res[i].bookingData + '"' +
                    'data-product-price="' + res[i].price + '"' +
                    'type="number" step="1" min="0" max="20" value="0">' +
                    '<button onClick="aumenta(' + res[i].id + ')">+</button>' +
                    '</div>' +
                    '</div>' +
                    '</div>';
                $('.calendar-search-result').append(ticketCalendarElement);
            }

            $(".calendar-search-result").find('h4').text('Selected\u0020date: ' + Helpers.convertDateToIta(dateSelected));

            if (timeSelected != null) {
                $(".calendar-search-result").find('h4').append('<br>Selected\u0020time: ' + timeSelected);
            }

            if (res.times !== undefined && (res.times.morning.length > 0 || res.times.afternoon.length > 0 || res.times.evening.length > 0 || res.times.night.length > 0)) {
                $('.calendar-search-result').append('<div class="calendar-times-area"></div>');
                $('.calendar-search-result').find('.subtitle').text('Select\u0020a\u0020time');


                for (var a = 0; a < res.times.morning.length; a++) {
                    if (a === 0)
                        $('.calendar-times-area').append("<label class='calendar-times-title'>Morning</label>");

                    var timeCalendarElement = '<button class="calendar-times-button" date="' + dateSelected + '" timeKey="' + res.times.morning[a].timeKey + '" timeSelected="' + res.times.morning[a].value + '">' + res.times.morning[a].value + '</button>';
                    $('.calendar-times-area').append(timeCalendarElement);
                }

                for (var b = 0; b < res.times.afternoon.length; b++) {
                    if (b === 0)
                        $('.calendar-times-area').append("<label class='calendar-times-title'>Afternoon</label>");

                    var timeCalendarElement = '<button class="calendar-times-button" date="' + dateSelected + '" timeKey="' + res.times.afternoon[b].timeKey + '" timeSelected="' + res.times.afternoon[b].value + '">' + res.times.afternoon[b].value + '</button>';
                    $('.calendar-times-area').append(timeCalendarElement);
                }

                for (var c = 0; c < res.times.evening.length; c++) {
                    if (c === 0)
                        $('.calendar-times-area').append("<label class='calendar-times-title'>Evening</label>");

                    var timeCalendarElement = '<button class="calendar-times-button" date="' + dateSelected + '" timeKey="' + res.times.evening[c].timeKey + '" timeSelected="' + res.times.evening[c].value + '">' + res.times.evening[c].value + '</button>';
                    $('.calendar-times-area').append(timeCalendarElement);
                }

                for (var d = 0; d < res.times.night.length; d++) {
                    if (d === 0)
                        $('.calendar-times-area').append("<label class='calendar-times-title'>Night</label>");

                    var timeCalendarElement = '<button class="calendar-times-button" date="' + dateSelected + '" timeKey="' + res.times.night[d].timeKey + '" timeSelected="' + res.times.night[d].value + '">' + res.times.night[d].value + '</button>';
                    $('.calendar-times-area').append(timeCalendarElement);
                }

                $('.calendar-times-button').click(function () {
                    selectDay($(this), false);
                });


            } else {
                if (res.length > 0) {
                    $('.calendar-search-result').find('.subtitle').text('Select\u0020the\u0020number\u0020of\u0020tickets\u0020and\u0020click\u0020\u0022calculate\u0020price\u0022\u0020to\u0020proceed');

                    if (typeof res[0].is_seated != 'undefined' && res[0].is_seated) {
                        $('.calendar-search-result').find('.subtitle').append('<br>By\u0020selecting\u0020your\u0020tickets\u0020below\u0020you\u0020will\u0020be\u0020assigned\u0020the\u0020best\u0020seat\u0020available');
                        $('.calendar-search-result').find('.subtitle').append('<br><a style="" href="/en/event-map/?product=' + productID + '&date=' + dateSelected + '&timeKey=' + timeKey + '">Press\u0020here\u0020if\u0020you\u0020prefer\u0020to\u0020select\u0020places\u0020from\u0020the\u0020map</a>');
                    }

                    $('.calendar-search-result').append('<button class="request-quote">Calculate\u0020quote</button>');
                    $('.request-quote').click(requestQuote);
                } else {
                    $(".calendar-search-result").find('h4').html("<p style='text-align: center; color: red; font-size: large'>There\u0020are\u0020no\u0020products\u0020for\u0020the\u0020selected\u0020date</p>");
                }
            }


            $('html,body').animate({
                scrollTop: $('.calendar-search-result').offset().top - 30
            }, 'slow');

        });
    }

    var months = [
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December"
    ];
    var today = new Date();
    var currentYear = today.getFullYear();
    var currentMonth = today.getMonth();

    $.each(months, function (i, item) {
        var selected = currentMonth === i ? 'selected' : '';
        $('#calendar__month').append('<option value="' + i + '" ' + selected + '>' + item + '</option>');
    });

    for (var a = 0; a < 3; a++) {
        var selected = a == 0 ? 'selected' : '';
        $('#calendar__year').append('<option value="' + currentYear + '" ' + selected + '>' + currentYear + '</option>');
        currentYear++;
    }

    currentYear = today.getFullYear();

    if (typeof avaiableDays != "undefined") {
        var firstAvaiableDay = new Date(avaiableDays[0].date);
        currentYear = firstAvaiableDay.getFullYear();
        currentMonth = firstAvaiableDay.getMonth();

        var avDayLength = avaiableDays.length;
        if (new Date(avaiableDays[0].date).getMonth() === new Date(avaiableDays[avDayLength - 1].date).getMonth())
            $('.calendar__opts').hide();

        $('#calendar__month').val(currentMonth);
        $('#calendar__year').val(currentYear);

        renderCalendar(currentMonth, currentYear);

    } else {
        renderCalendar(currentMonth, currentYear);
    }

    function daysInMonth(month, year) {
        month++;
        return new Date(year, month, 0).getDate();
    }

    function renderCalendar(month, year) {

        month = parseInt(month);
        year = parseInt(year);

        $('.calendar__dates').html('');

        var startWeek = dayOfWeek(1, month, year);
        var differece = 7 - startWeek;

        //Mese precedente
        if (startWeek != 0) {
            var lastMonthStartDay = daysInMonth(month - 1, year) - startWeek;
            for (var a = lastMonthStartDay; a < daysInMonth(month - 1, year); a++) {
                $('.calendar__dates').append('<div class="calendar__date calendar__date--grey"><span>' + (lastMonthStartDay + 1) + '</span></div>');
                lastMonthStartDay++;
            }
        }

        //Mese corrente
        var closeOnSunday = false;
        var daysInCurrentMonth = daysInMonth(month, year);

        for (var b = 0; b < daysInCurrentMonth; b++) {
            $('.calendar__dates').append('<div class="calendar__date calendar__date--close"><span>' + (b + 1) + '</span></div>');
        }
        var closingMontDay = dayOfWeek(daysInCurrentMonth, month, year);

        //Mese successivo
        if (closingMontDay !== 6) {
            var succMonthStartDay = 1;
            for (var c = closingMontDay; c < 6; c++) {
                $('.calendar__dates').append('<div class="calendar__date calendar__date--grey"><span>' + succMonthStartDay + '</span></div>');
                succMonthStartDay++;
            }
        }

        $('.calendar__dates').append('<div class="calendar__on-loading"><span>Loading\u0020calendar</span></div>');


        if (typeof avaiableDays != "undefined") {
            for (var i = 0; i < avaiableDays.length; i++) {
                if (new Date(avaiableDays[i].date).getMonth() == month) {
                    var elements = $(".calendar__date--close > span:contains(" + (new Date(avaiableDays[i].date).getDate()) + ")");
                    if (elements.length > 1) {
                        for (var a = 0; a < elements.length; a++) {
                            var text = $(elements[a]).text();
                            var day = new Date(avaiableDays[i].date).getDate();
                            if (text == day) {
                                $(elements[a]).parent().removeClass('calendar__date--close');
                                $(elements[a]).parent().addClass('calendar__date--avaiable');
                                $(elements[a]).parent().attr('date', Helpers.formatDate(new Date(year, month, (new Date(avaiableDays[i].date).getDate()))));
                            }
                        }
                    } else {
                        $(elements).parent().removeClass('calendar__date--close');
                        $(elements).parent().addClass('calendar__date--avaiable');
                        $(elements).parent().attr('date', Helpers.formatDate(new Date(year, month, (new Date(avaiableDays[i].date).getDate()))));
                    }
                }
            }

            $('.calendar__date--avaiable').click(function () {
                selectDay($(this));
            });

            $('.calendar__on-loading').remove();

        } else {
            //Carico disponibilità
            $.get('/en/calendar/available-days', {
                productId: productID,
                startDate: Helpers.formatDate(new Date(year, month, 1)),
                endDate: Helpers.formatDate(new Date(year, month + 1, 0))
            }, function (res) {
                $('.calendar__on-loading').remove();

                for (var i = 0; i < res.length; i++) {
                    var elements = $(".calendar__date--close > span:contains(" + (new Date(res[i].date).getDate()) + ")");
                    if (elements.length > 1) {
                        for (var a = 0; a < elements.length; a++) {
                            var text = $(elements[a]).text();
                            var day = new Date(res[i].date).getDate();
                            if (text == day) {
                                $(elements[a]).parent().removeClass('calendar__date--close');
                                $(elements[a]).parent().addClass('calendar__date--avaiable');
                                $(elements[a]).parent().attr('date', Helpers.formatDate(new Date(year, month, (new Date(res[i].date).getDate()))));

                            }
                        }
                    } else {
                        $(elements).parent().removeClass('calendar__date--close');
                        $(elements).parent().addClass('calendar__date--avaiable');
                        $(elements).parent().attr('date', Helpers.formatDate(new Date(year, month, (new Date(res[i].date).getDate()))));
                    }
                }

                $('.calendar__date--avaiable').click(function () {
                    selectDay($(this));
                });
            }).fail(function () {
                $('.calendar__on-loading').remove();
                $('.calendar__dates').append('<div class="calendar__on-loading">Unable\u0020to\u0020check\u0020availability</div>');
            });
        }

    }

    function dayOfWeek(day, month, year) {
        return new Date(year, month, day).getDay() === 0 ? 6 : new Date(year, month, day).getDay() - 1;
    }

    function requestQuote() {
        $('.request-quote').prop('disabled', true);

        var products = [];

        $('input[name^=qty]').each(
            function () {
                if ($(this).val() > 0) {
                    products.push({
                        'id': $(this).attr('data-product-id'),
                        'qty': $(this).val()
                    })
                }
            }
        );

        $('.calendar-quotation').empty();

        $.ajax({
            url: '/en/calendar/quote',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            method: "POST",
            data: JSON.stringify({
                date: $('.calendar__date--selected-only').attr('date').toString(),
                productId: productID,
                products: products,
                lang: "it",
                timeKey: timeKey
            })
        }).done(function (res) {
            $('.calendar-quotation').empty();
            $('.calendar-quotation').append('<h4></h4>');
            $('.calendar-quotation').append('<label class="subtitle"></label>');

            var quoteElements = '<div class="radio-area">';
            $(res).each(
                function (index) {
                    /*var bookingCode = "";*/
                    var checked = "";
                    if (index == 0) checked = "checked";
                    var subDescr = "";
                    if (typeof this.subDescr != 'undefined' && this.subDescr != null) subDescr = "<p>" + this.subDescr + "</p>";

                    if (this.times.length > 0) {
                        var that = this;
                        $(this.times).each(
                            function (index) {
                                quoteElements += '<div class="radio-quotation">' +
                                    '<input type="radio" id="' + that.rateKey + this + '" name="quotation" time="' + this + '" value="' + that.rateKey + '" ' + checked + '>' +
                                    '<label for="' + that.rateKey + this + '">' +
                                    '<div class="date-quotation">' +
                                    '<p>' + Helpers.formatDayMont(that.date) + '</p>' +
                                    '<p>' + Helpers.formatYear(that.date) + '</p>' +
                                    '<p>' + this + '</p>' +
                                    '</div>' +
                                    '<div class="price-quotation">' +
                                    '<p>' + that.descr + '</p>' +
                                    '<p>' + that.total + ' €</p>' +
                                    subDescr +
                                    '</div>' +
                                    '</label>' +
                                    '</div>';
                            }
                        );
                    } else {
                        quoteElements += '<div class="radio-quotation">' +
                            '<input type="radio" id="' + this.rateKey + '" name="quotation" value="' + this.rateKey + '" ' + checked + '>' +
                            '<label for="' + this.rateKey + '">' +
                            '<div class="date-quotation">' +
                            '<p>' + Helpers.formatDayMont(this.date) + '</p>' +
                            '<p>' + Helpers.formatYear(this.date) + '</p>' +
                            '</div>' +
                            '<div class="price-quotation">' +
                            '<p>' + this.descr + '</p>' +
                            '<p>' + this.total + ' €</p>' +
                            subDescr +
                            '</div>' +
                            '</label>' +
                            '</div>';
                    }


                }
            );

            quoteElements += '</div>';

            $('.calendar-quotation').find('h4').text('Make\u0020a\u0020selection');
            $('.calendar-quotation').find('.subtitle').text('The\u0020price\u0020shown\u0020is\u0020total\u0020for\u0020the\u0020tickets\u0020requested');

            $('.calendar-quotation').append(quoteElements);
            $('.request-quote').text('Modify\u0020quote');

            if (typeof avaiableDays != "undefined") {
                if (pickupType == "M")
                    $('.calendar-quotation').append('<button class="get-pickup btn-acquista" style="background-color: var(--secondary-color-st);">Continue\u0020with\u0020your\u0020pickup\u0020choice</button>');
                else if (pickupType == "O")
                    $('.calendar-quotation').append('<button class="store-package btn-acquista">Confirm\u0020selection\u0020without\u0020pickup</button><p style="margin: 15px 0; text-transform:uppercase; text-align:center">- Or -</p><button class="get-pickup btn-acquista" style="background-color: var(--secondary-color-st);">Select\u0020a\u0020pickup</button>');
                else
                    $('.calendar-quotation').append('<button class="store-package btn-acquista">Confirm\u0020selection\u0020and\u0020show\u0020hotel</button>');

            } else {
                if (pickupType == "M")
                    $('.calendar-quotation').append('<button class="get-pickup btn-acquista" style="background-color: var(--secondary-color-st);">Continue\u0020with\u0020your\u0020pickup\u0020choice</button>');
                else if (pickupType == "O")
                    $('.calendar-quotation').append('<button class="store-cart btn-acquista">Confirm\u0020selection\u0020without\u0020pickup</button><p style="margin: 15px 0; text-transform:uppercase; text-align:center">- Or -</p><button class="get-pickup btn-acquista" style="background-color: var(--secondary-color-st);">Select\u0020a\u0020pickup</button>');
                else
                    $('.calendar-quotation').append('<button class="store-cart btn-acquista">Confirm\u0020selection\u0020and\u0020buy</button>');
            }

            $('.get-pickup').click(function () {
                requestPickups()
            });
            $('.store-cart').click(function () {
                storeCart()
            });
            $('.store-package').click(function () {
                storePackage()
            });
            $('html,body').animate({
                scrollTop: $('.calendar-quotation').offset().top - 30
            }, 'slow');
        }).fail(function (res) {
            nascondiLoader();
            var errorMessage = "Unexpected error";
            if (res.status == 400) errorMessage = res.responseJSON.error;
            $.notify({
                message: "<i class='fa fa-warning'></i> " + errorMessage,
            }, {
                type: 'danger',
                allow_dismiss: true,
                delay: 5000
            });
        }).always(function () {
            $('.request-quote').prop('disabled', false);
        });
    }

    function requestPickups() {

        $('.pickup-quotation').empty();

        $.ajax({
            url: '/en/calendar/pickups?rateKey=' + $('input[name="quotation"]:checked').val(),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            method: "GET"
        }).done(function (res) {
            $('.pickup-quotation').empty();
            $('.pickup-quotation').append('<h4></h4>');
            $('.pickup-quotation').append('<label class="subtitle"></label>');

            pickups = res;
            var pickupsElement = '<select class="pickup-select" style="background-color: #f3f4f6;background-position: calc(100% - 20px) center;margin-bottom: 21px;padding-right: 60px;">';

            $(res).each(
                function (index) {
                    pickupsElement += '<option value="' + res[index].pickupKey + '">' + res[index].name + (res[index].time == null ? '' : ' - ' + res[index].time) + '</option>'
                }
            );

            pickupsElement += '</select>';


            $('.pickup-quotation').find('h4').text('Select\u0020a\u0020pickup');
            $('.pickup-quotation').find('.subtitle').text('Select\u0020a\u0020pickup\u0020and\u0020time');

            $('.pickup-quotation').append(pickupsElement);

            var pickup = res[0];
            var pickupinfo = "<div class='pick-up-info'>";
            if (pickup.name != null) pickupinfo += "<p>Pickup\u0020name: <strong>" + pickup.name + "</strong>";
            if (pickup.description != null) pickupinfo += "<p>Description: <strong>" + pickup.description + "</strong>";
            if (pickup.address != null) pickupinfo += "<p>Address: <strong>" + pickup.address + "</strong>";
            if (pickup.city != null) pickupinfo += "<p>City: <strong>" + pickup.city + "</strong>";
            if (pickup.postcode != null) pickupinfo += "<p>POSTAL\u0020CODE: <strong>" + pickup.postcode + "</strong>";
            if (pickup.time != null) pickupinfo += "<p>Hours: <strong>" + pickup.time + "</strong>";
            if (pickup.total != null) pickupinfo += "<p>Total\u0020pickup\u0020amount: <strong>" + pickup.total + " €</strong>";

            pickupinfo += "</div>";
            $('.pickup-select').after(pickupinfo);


            if (typeof avaiableDays != "undefined") {
                $('.pickup-quotation').append('<button class="pickup-store-package btn-acquista">Confirm\u0020selection\u0020and\u0020show\u0020hotel</button>');
            } else {
                $('.pickup-quotation').append('<button class="pickup-store-cart pick-up-area btn-acquista">Confirm\u0020selection\u0020and\u0020buy</button>');
            }

            $('.pickup-store-cart').click(function () {
                storeCart();
            });

            $('.pickup-select').change(function () {
                showPickInfo($(this).val());
            });

            $('.pickup-store-package').click(function () {
                storePackage();
            });
            $('html,body').animate({
                scrollTop: $('.pickup-quotation').offset().top - 30
            }, 'slow');
        }).fail(function (res) {
            nascondiLoader();
            var errorMessage = "Unexpected error";
            if (res.status == 400) errorMessage = res.responseJSON.error;
            $.notify({
                message: "<i class='fa fa-warning'></i> " + errorMessage,
            }, {
                type: 'danger',
                allow_dismiss: true,
                delay: 5000
            });
        }).always(function () {
            //$('.request-quote').prop('disabled', false);
        });
    }

    function showPickInfo(pickupKey) {
        $(".pick-up-info").remove();

        var pickup = null;

        $(pickups).each(
            function (index) {
                if (pickups[index].pickupKey == pickupKey) pickup = pickups[index];
            }
        );

        var pickupinfo = "<div class='pick-up-info'>";
        if (pickup.name != null) pickupinfo += "<p>Pickup\u0020name: <strong>" + pickup.name + "</strong>";
        if (pickup.description != null) pickupinfo += "<p>Description: <strong>" + pickup.description + "</strong>";
        if (pickup.address != null) pickupinfo += "<p>Address: <strong>" + pickup.address + "</strong>";
        if (pickup.city != null) pickupinfo += "<p>City: <strong>" + pickup.city + "</strong>";
        if (pickup.postcode != null) pickupinfo += "<p>POSTAL\u0020CODE: <strong>" + pickup.postcode + "</strong>";
        if (pickup.time != null) pickupinfo += "<p>Hours: <strong>" + pickup.time + "</strong>";
        if (pickup.total != null) pickupinfo += "<p>Total\u0020pickup\u0020amount: <strong>" + pickup.total + " €</strong>";

        pickupinfo += "</div>";
        $('.pickup-select').after(pickupinfo);
    }

    $('#calendar__month').on('change', function () {
        var month = $(this).find(":selected").val();
        var year = $('#calendar__year').find(":selected").val();
        renderCalendar(month, year);
    });

    $('#calendar__year').on('change', function () {
        var month = $('#calendar__month').find(":selected").val();
        var year = $(this).find(":selected").val();
        renderCalendar(month, year);
    });
});