@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/mixins/breakpoints";

.shop-listing {
    margin-top: 6.5rem;
    overflow: hidden;

    @include media-breakpoint-down(sm) {
        margin-top: 2rem;
    }
    header {
        margin: 0 auto 6.5rem auto;
        max-width: 60rem;

        @include media-breakpoint-down(sm) {
            margin-bottom: 3rem;
        }
    }
    .products {
        margin-bottom: 3rem;

        @include media-breakpoint-down(sm) {
            margin-bottom: 2rem;
        }
    }
}

.shop-filter {
    margin-bottom: 5rem;
    background-color: var(--lighter-colour);
    position: relative;

    @include media-breakpoint-down(sm) {
        margin-bottom: 2rem;

        .container {
            padding: 0;
        }
        &:after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            width: 3rem;
            height: 100%;
            display: block;
            background: linear-gradient(90deg, rgba($green-lighter,0) 0%, rgba($green-lighter,1) 100%);
        }
    }
    .shop-filter-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;

        @include media-breakpoint-down(sm) {
            justify-content: flex-start;
            overflow: auto;
        }
    }
    p {
        flex-shrink: 0;

        @include media-breakpoint-down(sm) {
            margin-right: 2rem;
            margin-left: 15px;
        }
    }
    a {
        color: $body;
        display: block;
        padding: 0.75rem 0;
        font-weight: 300;

        @include media-breakpoint-down(sm) {
            margin-right: 2rem;
            flex-shrink: 0;

            &:last-child {
                margin-right: 2rem;
            }
        }
        &:hover {
            color: $red;
        }
        &.active {
            font-weight: bold;
        }
    }
}

.product.filtered {
    display: none;
}

.testimonial-carousel-wrap {
    text-align: center;
    width: 100%;
    padding-top: 2.5rem;
    padding-bottom: 3rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    position: relative;

    @include media-breakpoint-down(sm) {
        display: none;
    }
    &.hidden {
        display: none;
    }
    &:after {
        content: "";
        position: absolute;
        top: 0;
        left: -50vw;
        width: 150vw;
        height: 100%;
        background: var(--theme-colour);
        z-index: -1;
        transform: translateX(-100%);
        transition: transform 0.7s cubic-bezier(0.62, 0.38, 0.17, 0.85);
        transition-delay: 0.6s;
    }
    &.aos-animate {
        &:after {
            transition-delay: 0s;
            transform: translateX(0);
        }
    }
}

.testimonial-carousel {
    max-width: 40rem;
    margin: 0 auto;

    @include media-breakpoint-down(sm) {
        max-width: 70%;
    }
}

.testimonial-carousel-controls {
    a {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);

        svg {
            color: #979797;
            display: block;
            transition: color 0.3s ease-in-out;

            @include media-breakpoint-down(xs) {
                width: 20px;
                height: 20px;
            }
        }
        &.prev {
            left: 1rem;

            svg {
                transform: rotate(90deg);
            }
        }
        &.next {
            right: 1rem;

            svg {
                transform: rotate(-90deg);
            }
        }
        &:hover {
            svg {
                color: $red;
            }
        }
    }
}

jQuery(function($){
    
    $('.js-shop-filter').click(function(e) {
        e.preventDefault();

        var cat = $(this).attr('data-category');

        $('.js-shop-filter').removeClass('active');
        $(this).addClass('active');
        
        if( cat == 'all' ) {
            $('.shop-listing .product').removeClass('filtered');
            $('.testimonial-carousel-wrap').removeClass('hidden');
            $('.testimonial-carousel-wrap').slick('setPosition');
        } else {
            $('.shop-listing .product').addClass('filtered');
            $('.shop-listing .product.product_cat-' + cat).removeClass('filtered');
            $('.testimonial-carousel-wrap').addClass('hidden');
        }

        AOS.refresh();
    });

    $('.js-testimonial-carousel').slick({
        speed: 1000,
        autoplay: true,
        centerMode: true,
        infinite: true,
        arrows: false,
        buttons: false,
        pauseOnHover: false,
        variableWidth: false,
        slidesToShow: 1,
        rows: 0,
        centerPadding: '0px'
    });

    $('.js-carousel-prev').click(function(e) {
        e.preventDefault();
        $(this).parents('.testimonial-carousel-wrap').find('.js-testimonial-carousel').slick('slickPrev');
    });
    $('.js-carousel-next').click(function(e) {
        e.preventDefault();
        $(this).parents('.testimonial-carousel-wrap').find('.js-testimonial-carousel').slick('slickNext');
    });

    if(window.location.hash) {
        setTimeout(function(){
            var hash = window.location.hash.substring(1); // removes the # character

            $('.js-shop-filter').removeClass('active');
            $('.js-shop-filter[data-category="' + hash + '"]').addClass('active');
            
            if( hash == 'all' ) {
                $('.shop-listing .product').removeClass('filtered');
                $('.testimonial-carousel-wrap').removeClass('hidden');
            } else {
                $('.shop-listing .product').addClass('filtered');
                $('.shop-listing .product.product_cat-' + hash).removeClass('filtered');
                $('.testimonial-carousel-wrap').addClass('hidden');
            }
    
            AOS.refresh();

            $('html, body').animate({
                scrollTop: $('.shop-filter').offset().top - 250
            });
        }, 500);
    }

});