jQuery(document).ready(function() {

    // Slick Slider Initialisierung

    bsBreakpoints.init();

    $(window).on('new.bs.breakpoint', function (e) {
        // on change
        change_breakpoint();
    })

    function change_breakpoint() {
        var breakpoint = bsBreakpoints.detectBreakpoint();

        if (breakpoint=='xSmall' || breakpoint=='small') {

            $('.slider-for').slick({
                slidesToShow: 1,
                slidesToScroll: 1,
                arrows: true,
                fade: true,
                asNavFor: '.slider-nav',
                mobileFirst: true,
                dots: true
            });

            $('.slider-nav').slick({
                slidesToShow: 1,
                slidesToScroll: 1,
                dots: true,
                arrows: false,
                centerMode: true,
                focusOnSelect: true,
                asNavFor: '.slider-for'
            });

        } else if (breakpoint=='medium') {
            $('.slider-for').slick({
                slidesToShow: 1,
                slidesToScroll: 1,
                arrows: true,
                fade: true,
                asNavFor: '.slider-nav',
                mobileFirst: false,
            });

            $('.slider-nav').slick({
                slidesToShow: 4,
                slidesToScroll: 1,
                dots: true,
                arrows: true,
                centerMode: true,
                focusOnSelect: true,
                asNavFor: '.slider-for'
            });
        } else if (breakpoint=='large') {
            $('.slider-for').slick({
                slidesToShow: 1,
                slidesToScroll: 1,
                arrows: false,
                fade: true,
                asNavFor: '.slider-nav',
                mobileFirst: false,
            });

            $('.slider-nav').slick({
                slidesToShow: 4,
                slidesToScroll: 1,
                dots: true,
                arrows: true,
                centerMode: true,
                focusOnSelect: true,
                asNavFor: '.slider-for'
            });
        } else if (breakpoint=='xLarge') {
            $('.slider-for').slick({
                slidesToShow: 1,
                slidesToScroll: 1,
                arrows: true,
                fade: true,
                asNavFor: '.slider-nav',
                mobileFirst: false,
            });

            $('.slider-nav').slick({
                slidesToShow: 3,
                slidesToScroll: 1,
                dots: false,
                arrows: false,
                centerMode: true,
                focusOnSelect: true,
                asNavFor: '.slider-for'
            });
        } else {
            $('.slider-for').slick({
                slidesToShow: 1,
                slidesToScroll: 1,
                arrows: false,
                fade: true,
                asNavFor: '.slider-nav',
                mobileFirst: false,
            });

            $('.slider-nav').slick({
                slidesToShow: 4,
                slidesToScroll: 1,
                dots: true,
                arrows: true,
                centerMode: true,
                focusOnSelect: true,
                asNavFor: '.slider-for'
            });
        }
    }

    $('.slider-for').slickLightbox({
        src: 'data-xxlpath',
        itemSelector: 'div img',
        background: "rgba(0,0,0,1)",
        lazy: true,
        slick: {
            dots: true,
            infinite: true,
            speed: 500,
            fade: true,
            centerMode: true,
            cssEase: 'linear'
        },
        caption:  function(element, info) {
            console.log(element);
            return $(element).attr('title') + ' <br><small class="d-none d-md-block">Zoom in/out: Mausrad</small>';
        }
    }).on({
        'shown.slickLightbox': function(){
            console.log('A `shown.slickLightbox` event triggered.');
            //$('.slick-lightbox-slick-img').css('width', '100%');
            //$('.slick-lightbox-slick-item').css('position', 'absolute');
            const zoomArea = document.querySelectorAll(".slick-lightbox-slick-item");
            //const zoomIn = document.querySelectorAll(".zoom-in");
            //const zoomOut = document.querySelectorAll(".zoom-out");
            //const zoomRange = document.querySelectorAll(".zoom-range");
            //const reset = document.querySelectorAll(".reset");

            [...zoomArea].forEach((elem) => {
                const panzoom = Panzoom(elem, {
                    maxScale: 4,
                    minScale: 1,
                    startScale:0.5,
                    contain: 'outside',
                });
                const parent = elem.closest(".slick-slide");
                parent.addEventListener("wheel", panzoom.zoomWithWheel);
                parent.addEventListener("click", panzoom.reset);
            });
        }
    });
    $('#sidebarCollapse').on('click', function () {
        $('#sidebar').toggleClass('active');
    });

    $('#sidebar .collapse').collapse({
        toggle: false
    })

    $('#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();
    });

    $('#navbar-xs').on('shown.bs.dropdown',function() {
        $(this).find('.fa-caret-down').removeClass('fa-caret-down').addClass('fa-caret-up');
    });

    $('#navbar-xs').on('hide.bs.dropdown',function() {
        $(this).find('.fa-caret-up').removeClass('fa-caret-up').addClass('fa-caret-down');
    });

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

    $('.promotion-img-container a').on('click',function() {
        var href = $(this).attr('href');
    });

    $('#suche-xs').on('click',function(){
        $('#suchcontainer-xs').toggleClass('d-none');
        $(this).toggleClass('d-none');
        $('#main-navigation').removeClass('show');
        $('#suchfeld-xs').focus();
    });

    $("#suche").click(function() {
        $("#suche-formular" ).submit();
    });


    $('#select-kategorien').on('change',function() {
        var ahref=$(this).val();
        window.location.href = '/' + ahref;
    });

    $('#select-suche-kategorien').on('change',function() {
        var ahref=$(this).val();
        window.location.href = '/' + ahref;
    });

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

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

    $('.product-big .carousel').carousel({
        interval: false
    })

    $('.carousel').bcSwipe({ threshold: 50 });

    $('#carousel-empfehlungen').carousel({
        interval: false
    });
    $('#carousel-neuheiten').carousel({
        interval: 10000
    });
    $('#carousel-angebote').carousel({
        interval: 10000
    });
    $('#carousel-neuheiten').on('slid.bs.carousel', function () {
        var currentIndex = $('#carousel-neuheiten div.active').index()+1;
        $('#neuheiten-seite-von').html(currentIndex);
    })
    $('#carousel-angebote').on('slid.bs.carousel', function () {
        var currentIndex = $('#carousel-angebote div.active').index()+1;
        $('#angebote-seite-von').html(currentIndex);
    })

    $('#carousel-empfehlungen').on('slid.bs.carousel', function () {
        var currentIndex = $('#carousel-empfehlungen div.active').index()+1;
        $('#empfehlungen-seite-von').html(currentIndex);
    })

    $('#carousel-alternativen').carousel({
        interval: false
    });

    $('#carousel-alternativen').on('slid.bs.carousel', function () {
        var currentIndex = $('#carousel-alternativen div.active').index()+1;
        $('#alternativen-seite-von').html(currentIndex);
    })

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

    var searchTitel = new Bloodhound({
        remote: {
            url: '/ajaxphp-2015/searchTitel.php?search=%QUERY',
            wildcard: '%QUERY',

        },
        datumTokenizer: function(d) { return d.value; },
        queryTokenizer: Bloodhound.tokenizers.whitespace
    });

    $("#suchfeld").typeahead({
            highlight: true,
            minLength: 3,
            classNames: {
                dataset: 'hauptsuche-result',
                selectable: 'selectable-result',
                suggestion: 'suggestion',
                menu: 'hauptsuche-menu bg-light',
                open: 'hauptsuche-open px-3',
            },
        },
        {
            name: 'kategorie',
            displayKey: "value",
            limit: 50,
            source: searchKategorien.ttAdapter(),
            templates: {
                empty: [
                    '<h4 class="h5 w-100 mt-2 mb-3 text-muted">Kategorien</h4>',
                    '<div class="row"><div class="col-12 text-muted">',
                    'keine Kategorien gefunden',
                    '</div></div>'
                ].join('\n'),
                header: [
                    '<h4 class="h5 w-100 mt-2 mb-3 text-muted">Kategorien</h4>'
                ].join('\n'),
                suggestion:  function(kategorie){
                    return  '<div><a href ="/' + (kategorie.slug) + '">' + kategorie.value + '</a></div>';
                }
            }
        },
        {
            name: 'produkttitel',

            displayKey: "value",
            limit: 100,
            source: searchTitel.ttAdapter(),
            templates: {
                empty: [
                    '<h4 class="h5 text-left w-100 mt-2 mb-3 text-muted">Produkte</h4>',
                    '<div class="row"><div class="col-12 text-muted">',
                    'kein Ergebnis gefunden',
                    '</div></div>'
                ].join('\n'),
                notFound: [
                    '<div class="row"><div class="col-12">',
                    'Leider kein(e) Produkte gefunden',
                    '</div></div>'
                ].join('\n'),
                header: [
                    '<h4 class="h5 text-left w-100 mt-2 mb-3 text-muted">Produkte</h4>'
                ].join('\n'),
                suggestion:  function(produkttitel){
                    return  '<div class=""><p class="result-image"><a href ="/' + (produkttitel.slug) + '"><img class="img-fluid" src="/Ressources-2015/Public/Files/Products/Small/' + produkttitel.image + '"></a></p><p class="result-titel"><a href ="/' + (produkttitel.slug) + '">' + produkttitel.value + '</a></p></div>';
                },
                footer: [
                    '<div class="w-100 d-block my-2 text-center">',
                    '<a id="alle-ergebnisse" href="" class="btn btn-outline-dark">',
                    'Alle Ergebnisse anzeigen',
                    '</a>',
                    '</div>'
                ].join('\n')

            }
        }).on("typeahead:render", function() {
        var searchTerm = $(this).val();
        $('#alle-ergebnisse').attr('href','/suchergebnis/q=' + searchTerm);
    });

    $('#suchfeld').keypress(function (e) {
        if (e.which == 13) {
            $('#suche-formular').submit();
        }
    });

    $('.modal-images').on('click', '.change-image',function() {
        var html = $(this).html();
        $('#img-main-container').html(html);
        $('#img-main-container p').removeClass('hidden');
    })






    $('#filterLieferzeit').on('change', function() {
        if ($(this).val()=='all') {
            var notinstock = $('[data-bestand="notinstock"]');
            notinstock.parent().toggleClass('hidden');
            $('.show-in-stock').toggleClass('hidden');
        } else if ($(this).val()=='sofort') {
            var notinstock = $('[data-bestand="notinstock"]');
            notinstock.parent().toggleClass('hidden');
            $('.show-in-stock').toggleClass('hidden');
        } else if ($(this).val()=='3') {

        } else if ($(this).val()=='7') {

        } else if ($(this).val()=='14') {

        }
    });

    $('.artikelanzahl').on('change', function() {
        var artikelnummer = $(this).data('artikelnummer');
        var anzahl = $(this).val();
        var ahref='shop.php?action=updateproduct&artikelnummer='+artikelnummer+'&anzahl=' + anzahl;
        window.location.href = ahref;
    });

    $('.js-faq-toggle').on('click', function (e) {

        let $icon = $(this).find('.js-faq-toggle-icon');
        $icon.toggleClass('fa-circle-plus fa-circle-minus');
    });

    change_breakpoint();
});