define([
    'jquery',
    'popper',
    'slick',
    'domReady!'
], function($, Popper) {
    'use strict';

    window.Popper = Popper; // re-attach to global scope

    const appHeight = () => {
        const doc = document.documentElement;
        doc.style.setProperty('--app-height', `${window.innerHeight - 310}px`);
    }

    window.addEventListener('resize', appHeight);
    appHeight();

    $('.category-slider').slick({
        centerMode: true,
        arrows: false,
        autoplay: false,
        autoplaySpeed: 5000,
        dots: false,
        infinite: true,
        slidesToShow: 7,
        slidesToScroll: 1,
        swipeToSlide: true,
        dragEndSpeed: 0,

        responsive: [
            {
                breakpoint: 1280,
                settings: {
                    slidesToShow: 6
                },
            },
            {
                breakpoint: 1024,
                settings: {
                    slidesToShow: 5
                },
            },
            {
                breakpoint: 768,
                settings: {
                    slidesToShow: 4
                },
            },
            {
                breakpoint: 640,
                settings: {
                    slidesToShow: 3
                },
            },
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 2
                }
            }
        ]
    });

    require(['bootstrap'], function() {
        $(function() {

             // Menu Mobile
            $('.navbar-toggler.nav_mobil').click(function () {
                $('#mySidenav').addClass('slider_show');
                $('body').addClass('menu_show');
                $('.sidebar-content').addClass('open');

                if ($('.navmenu_active').length === 0) {
                    $('.page-wrapper').prepend('<div class="navmenu_active"></div>');
                }

                if ($('.page-wrapper').find('.navmenu_active')) {
                    $('.page-wrapper .navmenu_active').click(function () {
                        $('body').removeClass('menu_show');
                        $('#mySidenav').removeClass('slider_show');
                        $('.sidebar-content').removeClass('open');
                        $('.sub-menu-body').removeClass('open');
                        $('.menu-body').removeClass('open');
                        $('.navmenu_active').remove();
                    });
                }

                const $container = $('#mySidenav');
                const $pos1 = $container.find('.fixed-pos-1');
                const $pos2 = $container.find('.fixed-pos-2');

                function updateCardPositions() {
                    const containerOffsetTop = $container.offset().top;
                    const scrollTop = $container.scrollTop();
                    const viewportHeight = $(window).height();

                    const visibleBottom = scrollTop + (viewportHeight - containerOffsetTop);

                    console.log(visibleBottom)

                    // Posicionar el segundo card al fondo visible
                    $pos2.css({
                        position: 'absolute',
                        top: visibleBottom - $pos2.outerHeight() - 48,
                        left: 0,
                        right: 0,
                        zIndex: 10
                    });

                    console.log(visibleBottom - $pos2.outerHeight())
                    // Posicionar el primero justo encima del segundo + 48px
                    $pos1.css({
                        position: 'absolute',
                        top: visibleBottom - $pos1.outerHeight() - 96,
                        left: 0,
                        right: 0,
                        zIndex: 11
                    });

                    console.log(visibleBottom - $pos2.outerHeight() - $pos1.outerHeight() - 48)
                }

                function addScrollSpacer() {
                    const totalHeight =
                        $pos1.outerHeight(true) +
                        $pos2.outerHeight(true) +
                        48; // espacio entre ellos

                    let $spacer = $container.find('.scroll-spacer');

                    if ($spacer.length === 0) {
                        $spacer = $('<div class="scroll-spacer"></div>').appendTo($container);
                    }

                    $spacer.css({
                        height: totalHeight + 'px',
                        width: '100%',
                        display: 'block'
                    });
                }

                function onScrollOrResize() {
                    if ($(window).width() < 768) {
                        updateCardPositions();
                        addScrollSpacer();
                    } else {
                        // Reset styles si ya no está en mobile
                        $pos1.add($pos2).css({
                            position: '',
                            top: '',
                            left: '',
                            right: '',
                            zIndex: ''
                        });

                        $container.find('.scroll-spacer').remove();
                    }
                }

                // Ejecutar al inicio y en eventos
                onScrollOrResize();
                $container.on('scroll', onScrollOrResize);
                $(window).on('resize', onScrollOrResize);
            });

            $('#mobile .nav-pills .nav-link').click(function () {

                $('.open').each(function() {
                    $(this).removeClass('open');
                });

                $('.sidebar-content').removeClass('open');
                $('.menu-body').addClass('open');

                var attr = $(this).attr('id');
                var id = attr.split('-')[1];

                $('.cat-second-'+id+'.second').addClass('open');
                $('body').addClass('show-submenus');
            });
            $('#mobile .cat-third-name').click(function () {

                $('.open').each(function() {
                   $(this).removeClass('open');
                });

                $('.menu-body').removeClass('open');
                $('.sub-menu-body').addClass('open');
                $('body').removeClass('show-submenus');

                var attr = $(this).attr('id');
                var second = attr.split('-')[0];
                var third = attr.split('-')[1];

                $('.cat-third-'+second+'.third').addClass('open');
                $('.sub-cat-third-'+third+'.third').addClass('open');


            });
            $(document).on('click', '#mobile .nav-link-arrow .close', function () {
                $('#mySidenav').removeClass('slider_show');
                $('body').removeClass('menu_show');
                $('.navmenu_active').remove();

                $('.open').each(function(index) {

                    console.log(index + ": " + $(this).text());
                    console.log($(this).attr('id'));
                    console.log($(this).attr('class'));
                });

            });
            $('#mobile .sub-menu-body .third .card .fa').click(function () {

                $('.sub-menu-body').removeClass('open');
                $('.menu-body').addClass('open');
                $('body').addClass('show-submenus');

                var id = $(this).attr('id');
                $('.cat-second-'+id+'.second').addClass('open');
                console.log('id '+id);

            });
            $('#mobile .menu-body .second .card .fa').click(function () {
                $('.menu-body').removeClass('open');
                $('body').removeClass('show-submenus');
                $('.sidebar-content').addClass('open');

            });

            $('#mobile .cat-third-name-one .cat-one').click(function () {
                $('.menu-body').removeClass('open');
                $('body').removeClass('show-submenus');
                $('.navmenu_active').remove();

            });

            $('#mobile .cat-third-name .cat-url').click(function () {
                $('.sub-menu-body').removeClass('open');
                $('.navmenu_active').remove();

            });

            $('.action.nav-toggle').click(function () {
                $('body').addClass('menu_show');
                $('#mySidenav').addClass('slider_show');

                if ($('.navmenu_active').length === 0) {
                    $('.page-wrapper').prepend('<div class="navmenu_active"></div>');
                }

                if ($('.page-wrapper').find('.navmenu_active')) {
                    $('.page-wrapper .navmenu_active').click(function () {
                        $('body').removeClass('menu_show');
                        $('#mySidenav').removeClass('slider_show');
                        $('.navmenu_active').remove();
                    });
                }
            });
            $('#desktop .nav-link-arrow .close').click(function () {
                $('body').removeClass('menu_show');
                $('#mySidenav').removeClass('slider_show');
                $('.menu-body').removeClass('open');
                $('.navmenu_active').remove();

            });
            $('#desktop .nav-pills .nav-link').hover(function () {
                $('.nav-link.active').each(function(index) {
                    $('#'+$(this).attr('id')).removeClass('active');
                });

                $('.fade.show.d-flex').each(function(index) {
                    $('#'+$(this).attr('id')).removeClass('show d-flex');
                });

                var attr = $(this).attr('id');

                if(typeof attr !== 'undefined' && attr !== false) {

                    console.log('1'+attr);
                    var id = '#tab-content-'+attr.split('-')[1];
                    $('.menu-body').addClass('open');
                    $(id).addClass('show d-flex');

                    $('#'+$(this).attr('id')).addClass('active');

                }else{
                    console.log('2');
                    $('.menu-body').removeClass('open');
                }

            });
            $('#desktop .nav-link-end , .cart').hover(function () {
                $('.menu-body').removeClass('open');
            });

        });
    });

    $(window).scroll(function () {
        var isDesktop = $(window).width() >= 768;

        if (isDesktop) {
            if( $(window).scrollTop() > $('.header-container').offset().top && !($('.header-container').hasClass('sticky'))){
                $('.header-container').addClass('sticky');
                $('.top-header').slideUp('100');
            } else if ($(window).scrollTop() == 0){
                $('.header-container').removeClass('sticky');
                $('.top-header').slideDown('100');
            }
        } else {
            if( $(window).scrollTop() > $('.page-header').offset().top && !($('.page-header').hasClass('sticky'))){
                $('.page-header').addClass('sticky');
            } else if ($(window).scrollTop() == 0){
                $('.page-header').removeClass('sticky');
            }
        }

        if (jQuery('.header-container').hasClass('sticky') || jQuery('.page-header').hasClass('sticky')) {
            $('body').addClass('page-header-sticky');
        } else {
            $('body').removeClass('page-header-sticky');
        }
    });
});