$(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">Kalender\u0020wird\u0020geladen</div>');

        $.get('/de/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('Ausgew\u00E4hltes\u0020Datum: ' + Helpers.convertDateToIta(dateSelected));

            if (timeSelected != null) {
                $(".calendar-search-result").find('h4').append('<br>Ausgew\u00E4hlte\u0020Zeit: ' + 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('W\u00E4hlen\u0020Sie\u0020eine\u0020Zeit\u0020aus');


                for (var a = 0; a < res.times.morning.length; a++) {
                    if (a === 0)
                        $('.calendar-times-area').append("<label class='calendar-times-title'>Morgen</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'>Nachmittag</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'>Abend</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'>Nacht</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('W\u00E4hlen\u0020Sie\u0020die\u0020Anzahl\u0020der\u0020Tickets\u0020aus\u0020und\u0020klicken\u0020Sie\u0020auf\u0020\u0022Preis\u0020berechnen\u0022,\u0020um\u0020fortzufahren');

                    if (typeof res[0].is_seated != 'undefined' && res[0].is_seated) {
                        $('.calendar-search-result').find('.subtitle').append('<br>Indem\u0020Sie\u0020Ihre\u0020Tickets\u0020unten\u0020ausw\u00E4hlen,\u0020wird\u0020Ihnen\u0020der\u0020beste\u0020verf\u00FCgbare\u0020Sitzplatz\u0020zugewiesen');
                        $('.calendar-search-result').find('.subtitle').append('<br><a style="" href="/de/event-map/?product=' + productID + '&date=' + dateSelected + '&timeKey=' + timeKey + '">Dr\u00FCcken\u0020Sie\u0020hier,\u0020wenn\u0020Sie\u0020Orte\u0020lieber\u0020auf\u0020der\u0020Karte\u0020ausw\u00E4hlen\u0020m\u00F6chten</a>');
                    }

                    $('.calendar-search-result').append('<button class="request-quote">Angebot\u0020berechnen</button>');
                    $('.request-quote').click(requestQuote);
                } else {
                    $(".calendar-search-result").find('h4').html("<p style='text-align: center; color: red; font-size: large'>F\u00FCr\u0020das\u0020ausgew\u00E4hlte\u0020Datum\u0020sind\u0020keine\u0020Produkte\u0020vorhanden</p>");
                }
            }


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

        });
    }

    var months = [
        "Januar",
        "Februar",
        "Marsch",
        "April",
        "Kann",
        "Juni",
        "Juli",
        "August",
        "September",
        "Oktober",
        "November",
        "Dezember"
    ];
    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>Kalender\u0020wird\u0020geladen</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('/de/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">Verf\u00FCgbarkeit\u0020kann\u0020nicht\u0020gepr\u00FCft\u0020werden</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: '/de/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('Eine\u0020Auswahl\u0020treffen');
            $('.calendar-quotation').find('.subtitle').text('Der\u0020angezeigte\u0020Preis\u0020ist\u0020der\u0020Gesamtpreis\u0020f\u00FCr\u0020die\u0020angeforderten\u0020Tickets');

            $('.calendar-quotation').append(quoteElements);
            $('.request-quote').text('Zitat\u0020\u00E4ndern');

            if (typeof avaiableDays != "undefined") {
                if (pickupType == "M")
                    $('.calendar-quotation').append('<button class="get-pickup btn-acquista" style="background-color: var(--secondary-color-st);">Fahren\u0020Sie\u0020mit\u0020Ihrer\u0020Abholauswahl\u0020fort</button>');
                else if (pickupType == "O")
                    $('.calendar-quotation').append('<button class="store-package btn-acquista">Auswahl\u0020ohne\u0020Abholung\u0020best\u00E4tigen</button><p style="margin: 15px 0; text-transform:uppercase; text-align:center">- Oder -</p><button class="get-pickup btn-acquista" style="background-color: var(--secondary-color-st);">W\u00E4hlen\u0020Sie\u0020eine\u0020Abholung\u0020aus</button>');
                else
                    $('.calendar-quotation').append('<button class="store-package btn-acquista">Auswahl\u0020best\u00E4tigen\u0020und\u0020Hotel\u0020anzeigen</button>');

            } else {
                if (pickupType == "M")
                    $('.calendar-quotation').append('<button class="get-pickup btn-acquista" style="background-color: var(--secondary-color-st);">Fahren\u0020Sie\u0020mit\u0020Ihrer\u0020Abholauswahl\u0020fort</button>');
                else if (pickupType == "O")
                    $('.calendar-quotation').append('<button class="store-cart btn-acquista">Auswahl\u0020ohne\u0020Abholung\u0020best\u00E4tigen</button><p style="margin: 15px 0; text-transform:uppercase; text-align:center">- Oder -</p><button class="get-pickup btn-acquista" style="background-color: var(--secondary-color-st);">W\u00E4hlen\u0020Sie\u0020eine\u0020Abholung\u0020aus</button>');
                else
                    $('.calendar-quotation').append('<button class="store-cart btn-acquista">Auswahl\u0020best\u00E4tigen\u0020und\u0020kaufen</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: '/de/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('W\u00E4hlen\u0020Sie\u0020eine\u0020Abholung\u0020aus');
            $('.pickup-quotation').find('.subtitle').text('W\u00E4hlen\u0020Sie\u0020eine\u0020Abholung\u0020und\u0020eine\u0020Uhrzeit\u0020aus');

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

            var pickup = res[0];
            var pickupinfo = "<div class='pick-up-info'>";
            if (pickup.name != null) pickupinfo += "<p>Name\u0020der\u0020Abholung: <strong>" + pickup.name + "</strong>";
            if (pickup.description != null) pickupinfo += "<p>Beschreibung: <strong>" + pickup.description + "</strong>";
            if (pickup.address != null) pickupinfo += "<p>Adresse: <strong>" + pickup.address + "</strong>";
            if (pickup.city != null) pickupinfo += "<p>Stadt: <strong>" + pickup.city + "</strong>";
            if (pickup.postcode != null) pickupinfo += "<p>POSTLEITZAHL: <strong>" + pickup.postcode + "</strong>";
            if (pickup.time != null) pickupinfo += "<p>Std: <strong>" + pickup.time + "</strong>";
            if (pickup.total != null) pickupinfo += "<p>Gesamtabholbetrag: <strong>" + pickup.total + " €</strong>";

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


            if (typeof avaiableDays != "undefined") {
                $('.pickup-quotation').append('<button class="pickup-store-package btn-acquista">Auswahl\u0020best\u00E4tigen\u0020und\u0020Hotel\u0020anzeigen</button>');
            } else {
                $('.pickup-quotation').append('<button class="pickup-store-cart pick-up-area btn-acquista">Auswahl\u0020best\u00E4tigen\u0020und\u0020kaufen</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>Name\u0020der\u0020Abholung: <strong>" + pickup.name + "</strong>";
        if (pickup.description != null) pickupinfo += "<p>Beschreibung: <strong>" + pickup.description + "</strong>";
        if (pickup.address != null) pickupinfo += "<p>Adresse: <strong>" + pickup.address + "</strong>";
        if (pickup.city != null) pickupinfo += "<p>Stadt: <strong>" + pickup.city + "</strong>";
        if (pickup.postcode != null) pickupinfo += "<p>POSTLEITZAHL: <strong>" + pickup.postcode + "</strong>";
        if (pickup.time != null) pickupinfo += "<p>Std: <strong>" + pickup.time + "</strong>";
        if (pickup.total != null) pickupinfo += "<p>Gesamtabholbetrag: <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);
    });
});