jQuery(document).ready(function () {

    $('.js-bestellvorgang-button-login').on('click', function () {
        $('.js-bestellvorgang-logincontainer').removeClass('d-none');
        $(this).addClass('btn-success').removeClass('btn-outline-dark');
        $('.js-bestellvorgang-button-neukunde').removeClass('btn-success').addClass('btn-outline-dark');
        $('.js-bestellvorgang-neukunde').addClass('d-none');
    });

    $('.js-bestellvorgang-button-neukunde').on('click', function () {
        $('.js-bestellvorgang-logincontainer').addClass('d-none');
        $(this).addClass('btn-success').removeClass('btn-outline-dark');
        $('.js-bestellvorgang-button-login').removeClass('btn-success').addClass('btn-outline-dark');
        $('.js-bestellvorgang-neukunde').removeClass('d-none');
    });

    $('.js-kundenkonto-anlegen').on('change', function () {
        let kundenkontoanlegen = $('.js-kundenkonto-anlegen:checked').val();
        console.log(kundenkontoanlegen);

        if (kundenkontoanlegen == 1) {
            $('.js-bestellvorgang-passwort-anzeigen').removeClass('d-none');
        } else {
            $('.js-bestellvorgang-passwort-anzeigen').addClass('d-none');
        }
    });

    $('.js-bestellvorgang-checkbox-abweichende-lieferadresse').on('change', function () {
        let abweichendelieferadresse = $('.js-bestellvorgang-checkbox-abweichende-lieferadresse:checked').val();

        if (abweichendelieferadresse == 1) {
            $('.js-bestellvorgang-abweichende-lieferadresse').removeClass('d-none');
        } else {
            $('.js-bestellvorgang-abweichende-lieferadresse').addClass('d-none');
        }
    });


    function pod(action, material, framenumber) {

        $.ajax({
            type: 'GET',
            url: '/ajaxphp/printOnDemand.php?action=' + action,
            data: $('#pod form').serializeArray(),
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            success: function (returndata) {

                $('#minbreite').html(returndata.minbreite);
                $('#maxbreite').html(returndata.maxbreite);
                $('#minhoehe').html(returndata.minhoehe);
                $('#maxhoehe').html(returndata.maxhoehe);

                $('#hoehe').val(returndata.neuehoehe);
                $('#breite').val(returndata.neuebreite);
                $('#messagecontainer').html(returndata.message);
                $('#hoehebild').html(returndata.neuehoehe);
                $('#breitebild').html(returndata.neuebreite);
                $('#gesamtpreis').html(returndata.gesamtpreisstring);

                if (returndata.infoheadline) {
                    $('#info-headline').html(returndata.infoheadline);
                } else {
                    $('#info-headline').html('');
                }

                if (returndata.infoliste) {
                    $('#info-ul').html('');

                    for (i = 0; i < returndata.infoliste.length; i++) {
                        $('#info-ul').append('<li>' + returndata.infoliste[i] + '</li>')
                    }

                } else {
                    $('#info-ul').html('');
                }

                if (returndata.vorschaubilder) {

                    for (var i = 0; i < returndata.vorschaubilder.length; i++) {

                        if (i == 0) {
                            $('#modal-vorschaubild-small-0').attr('src', returndata.vorschaubilder[i]);
                            $('#modal-vorschaubild-0').attr('src', returndata.vorschaubilder[i]);
                            $('#modal-big-image').attr('src', returndata.vorschaubilder[i]);
                        } else {
                            $('#vorschaubild-' + i).attr('src', returndata.vorschaubilder[i]);
                            $('#modal-vorschaubild-small-' + i).attr('src', returndata.vorschaubilder[i]);
                        }

                    }

                }


                if (returndata.material == '0') {
                    $('#standardgesamtpreis').addClass('d-none');
                    $('#standardwarenkorbbutton').addClass('d-none');

                } else {
                    $('#standardgesamtpreis').removeClass('d-none');
                    $('#standardwarenkorbbutton').removeClass('d-none');
                }

                if (returndata.message.length > 0) $('#breite').focus();


                if (action == 'changematerial') {
                    $('.frame-colours').addClass('d-none');
                    $('#frame-colours-' + material).removeClass('d-none');
                }


            }

        })

    }

    function mygallery(action) {

        $.ajax({
            type: "GET",
            url: "/ajaxphp/myGallery.php?action=" + action,
            data: $('#mygallery_form').serializeArray(),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (returndata) {

                $('#mygallery_minbreite').html(returndata.minbreite);
                $('#mygallery_maxbreite').html(returndata.maxbreite);
                $('#mygallery_minhoehe').html(returndata.minhoehe);
                $('#mygallery_maxhoehe').html(returndata.maxhoehe);

                $('#mygallery_hoehe').val(returndata.neuehoehe);
                $('#mygallery_breite').val(returndata.neuebreite);
                $('#mygallery_messagecontainer').html(returndata.message);
                $('#mygallery_hoehebild').html(returndata.neuehoehe);
                $('#mygallery_breitebild').html(returndata.neuebreite);
                $('#mygallery_gesamtpreis').html(returndata.gesamtpreisstring);

                if (returndata.material == '5' || returndata.material == '6' || returndata.material == '7' || returndata.material == '8') {
                    $('#mygallery_leinwandzusatz').removeClass('d-none');
                } else {
                    $('#mygallery_leinwandzusatz').addClass('d-none');
                }


                if (returndata.material == '0') {
                    $('#mygallery_standardgesamtpreis').addClass('d-none');
                    $('#mygallery_standardwarenkorbbutton').addClass('d-none');

                } else {
                    $('#mygallery_standardgesamtpreis').removeClass('d-none');
                    $('#mygallery_standardwarenkorbbutton').removeClass('d-none');
                }

                if (returndata.message.length > 0) $('#mygallery_breite').focus();

            }

        });

    }


    $('#sidebar .collapse').on('show.bs.collapse', function () {
        $(this).parent().addClass('open');
    });

    $('#navbar-md .dropdown').hover(function () {
        $(this).find('.dropdown-menu').stop(true, true).delay(300).fadeIn();
    }, function () {
        $(this).find('.dropdown-menu').stop(true, true).delay(100).fadeOut();
    });


    $(".dropdown-menu a").on('click', function () {
        var href = $(this).attr('href');
    });


    $('[data-toggle="tooltip"]').tooltip();

    let suchergebnisse = new Bloodhound({
        remote: {
            url: '/ajaxphp/searchTitel.php?search=%QUERY',
            wildcard: '%QUERY'
        },
        datumTokenizer: function (e) {
            return e.value;
        },
        queryTokenizer: Bloodhound.tokenizers.whitespace
    });



    $("#suchfeld").typeahead({
            highlight: true,
        },
        {
            name: 'ergebnisarray',
            displayKey: "titel",
            limit: 200,
            source: suchergebnisse.ttAdapter(),
            templates: {
                suggestion: function (ergebnisarray) {

                    let returnHtlm = '<div class="container-fluid">' +
                        '<div class="row border-bottom border-light py-2">' +
                        '<div class="col-4 text-center">' +
                        '<a href ="' + ergebnisarray.slug + '">' +
                        '<img style="max-height:60px;" class="img-fluid" src="' + ergebnisarray.pic + '"></a>' +
                        '</div>' +
                        '<div class="col-8 text-start fs-6 lh-sm">' +
                        '<a class="link-dark link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover" href ="' + ergebnisarray.slug + '">' + ergebnisarray.titel + '<br><small>' + ergebnisarray.kuenstler + '</small></a></div>' +
                        '</div>' +
                        '</div>';

                    return returnHtlm;
                }
            }
        }
    );




    $('.js-filter-reset').on('click', function () {
        $('.js-produkt-klein').removeClass('d-none');
        $('#chooseSize').val('all');
        $('#chooseArtists').val('all');
        $('#chooseDruckart').val('all');
    });



    $('.js-filter-auswahl').on('change', function() {
        let artist = $('#chooseArtists').val();
        let format = $('#chooseSize').val();
        let druckart = $('#chooseDruckart').val();
        $('.js-produkt-klein').addClass('d-none');

        if ( druckart == 'all' && artist == 'all' && format =='all' ) {
            $('.js-produkt-klein').removeClass('d-none');
        } else if ( druckart === 'all' && artist === 'all' && format !== 'all' ) {
            $('.js-produkt-klein-data[data-format="' + format + '"]').parent().removeClass('d-none');
        } else if ( druckart === 'all' && artist !== 'all' && format !== 'all' ) {
            $('.js-produkt-klein-data[data-kuenstler="' + artist + '"][data-format="' + format + '"]').parent().removeClass('d-none');
        } else if ( druckart === 'all' && artist !== 'all' && format === 'all' ) {
            $('.js-produkt-klein-data[data-kuenstler="' + artist + '"]').parent().removeClass('d-none');
        } else if ( druckart !== 'all' && artist == 'all' && format === 'all' ) {
            $('.js-produkt-klein-data[data-druckart="' + druckart + '"]').parent().removeClass('d-none');
        } else if ( druckart !== 'all' && artist !== 'all' && format === 'all' ) {
            $('.js-produkt-klein-data[data-kuenstler="' + artist + '"][data-druckart="' + druckart + '"]').parent().removeClass('d-none');
        } else if ( druckart !== 'all' && artist === 'all' && format !== 'all' ) {
            $('.js-produkt-klein-data[data-format="' + format + '"][data-druckart="' + druckart + '"]').parent().removeClass('d-none');
        } else if ( druckart !== 'all' && artist !== 'all' && format !== 'all' ) {
            $('.js-produkt-klein-data[data-kuenstler="' + artist + '"][data-format="' + format + '"][data-druckart="' + druckart + '"]').parent().removeClass('d-none');
        }
    });

    $('#breite').change(function () {
        var material = $('#materialwahl').val();
        var framenumber = $('input[name="rahmen-variante-' + material + '"]:checked').val();
        pod('changebreite', material, framenumber);
    });


    $('#hoehe').change(function () {
        var material = $('#materialwahl').val();
        var framenumber = $('input[name="rahmen-variante-' + material + '"]:checked').val();
        pod('changehoehe', '', '');
    });


    // Change bei der Materialwahl
    $('#materialwahl').change(function () {
        var material = $(this).val();
        var framenumber = $('input[name="rahmen-variante-' + material + '"]:checked').val();
        var produktionsart = $('#produktionsart').val();

        if (produktionsart == 'mygallery') {
            mygallery('changematerial');
        } else if (produktionsart == 'pod') {
            pod('changematerial', material, framenumber);
        } else if (produktionsart == 'druck') {

            var artikelcode = this.value;
            $('.frame-colours').addClass('d-none');
            if (artikelcode != 0) {
                $('.warenkorb-button-zusatztext').removeClass('d-none');
                $('#frame-information').removeClass('d-none');
                $('#frame-gesamtpreis-information').removeClass('d-none');
                $('#frame-colours-' + artikelcode).removeClass('d-none');
                var farbe = $('input[name="rahmen-variante-' + artikelcode + '"]:checked').val();
                $('#rahmen-variante-' + farbe).click();
            } else {
                $('.frame-bezeichnung').addClass('d-none');
                $('.frame-gesamtpreis-information').addClass('d-none');
                $('.frame-preis-information').addClass('d-none');
                $('.warenkorb-button-zusatztext').addClass('d-none');
                $('#frame_number').attr('value', '');
                $('#frame-gesamtpreis-information').addClass('d-none');

                $('#modal-big-image').attr('src', $('#picSrc').val());
                $('.modal-big-image').attr('src', $('#picSrc').val());

                $('img.pic-small').each(function (index, value) {
                    var data = 'ac=' + $('#artikelnummer').val() + '&frame_number=fb&posterhoehe=' + $('#posterhoehe').val() + '&posterbreite=' + $('#posterbreite').val() + '&picId=' + $('#picId').val() + '&raum=' + $(this).attr('data-raum');
                    $(this).attr('src', '/ajaxphp/framedPic.php?' + data);

                });

            }
        } else if (produktionsart == 'fertigbild') {

        }

    });

    $('.rahmen-variante input').on('click', function () {

        if ($('#produktionsart').val() == 'mygallery') {

        } else if ($('#produktionsart').val() == 'pod') {

            var material = $(this).attr('rahmen');
            var framenumber = $('input[name="rahmen-variante-' + material + '"]:checked').val();

            pod('changeframecolour', material, framenumber);

        } else if ($('#produktionsart').val() == 'druck') {

            var rahmen = $(this).attr('rahmen');
            var alterRahmen = $('#frame_number').val();
            var frame_number = $(this).val();
            var artikelnummer = $('#artikelnummer').val();
            var posterhoehe = $('#posterhoehe').val();
            var rahmenbreite = $(this).attr('rahmenbreite');
            var posterbreite = $('#posterbreite').val();
            var picId = $('#picId').val();
            var pptbreite_mm = $('#pptbreite_mm').val();
            var pptfarbe = $('#pptfarbe').val();
            var beschneiden = $('#beschneiden').val();
            var raum = 0;

            $('#frame_number').attr('value', frame_number);
            $('#rahmenbreite').attr('value', rahmenbreite);

            var data = 'ac=' + artikelnummer + '&frame_number=' + frame_number + '&rahmenbreite=' + rahmenbreite + '&posterhoehe=' + posterhoehe + '&posterbreite=' + posterbreite + '&picId=' + picId + '&passepartoutfarbe=' + pptfarbe + '&passepartoutbreite_mm=' + pptbreite_mm + '&beschneiden=' + beschneiden + '&raum=' + raum;
            $('#modal-big-image').attr('src', '/ajaxphp/framedPic.php?' + data);
            $('.modal-big-image').attr('src', '/ajaxphp/framedPic.php?' + data);

            $('img.pic-small').each(function (index, value) {
                var data = 'ac=' + artikelnummer + '&frame_number=' + frame_number + '&rahmenbreite=' + rahmenbreite + '&posterhoehe=' + posterhoehe + '&posterbreite=' + posterbreite + '&picId=' + picId + '&passepartoutfarbe=' + pptfarbe + '&passepartoutbreite_mm=' + pptbreite_mm + '&beschneiden=' + beschneiden + '&raum=' + $(this).attr('data-raum');

                $(this).attr('src', '/ajaxphp/framedPic.php?' + data);

            });

            $('#frame-bezeichnung-' + alterRahmen).addClass('d-none');
            $('#frame-preis-information-' + alterRahmen).addClass('d-none');
            $('#frame-gesamtpreis-information-' + alterRahmen).addClass('d-none');

            $('#frame-bezeichnung-' + frame_number).removeClass('d-none');
            $('#frame-preis-information-' + frame_number).removeClass('d-none');
            $('#frame-gesamtpreis-information-' + frame_number).removeClass('d-none');

        } else if ($('#produktionsart').val() == 'fertigbild') {

        }
    });


    $('#mygallery_breite').change(function () {
        mygallery('changebreite');
    });


    $('#mygallery_hoehe').change(function () {
        mygallery('changehoehe');
    });

    $('#mygallery_keilrahmen').change(function () {
        mygallery('changebreite');
    });


    $('#offcanvasSuche').on('shown.bs.offcanvas',function () {
        $('#suchfeld').val('').focus();
    });



});
