import './bootstrap';
import 'preline'

import Alpine from 'alpinejs';

window.Alpine = Alpine;

Alpine.start();

$(document).ready(function() {
    // Toggle Dropdown
    $(document).on('click', '.dropdown-trigger', function() {
        if ($(this).next().css('display') !== 'block') {
            $(this).closest('ul').children().children('.dropdown').slideUp(300);
            $(this).closest('ul').children().children('.dropdown-trigger').children('.dropdown-icon').removeClass('rotate-180');
        }
        $(this).children('.dropdown-icon').toggleClass('rotate-180');
        $(this).next().slideToggle(300);
    });
    // Toggle active on sidebar nave item
    $(document).on('click', '.active-trigger', function() {
        $(this).closest('.sidebar-nav').find('.sidebar-nav-active').removeClass('sidebar-nav-active');
        $(this).parents('.dropdown').prev().addClass('sidebar-nav-active');
        $(this).addClass('sidebar-nav-active');
    });
    // Toggle sidebar on click
    $(document).on('click', '.sidebar-trigger-btn', function() {
        if ($('.sidebar').hasClass('sidebar-active')) {
            $(this).closest('aside').addClass('md:w-[70px]').removeClass('md:w-[270px]');
            $(this).closest('aside').find('.hideable').addClass('hidden');
            $(this).closest('aside').find('.dropdown').addClass('!hidden');
        } else {
            $(this).closest('aside').addClass('md:w-[270px]').removeClass('md:w-[70px]');
            $(this).closest('aside').find('.hideable').removeClass('hidden');
            $(this).closest('aside').find('.dropdown').removeClass('!hidden');
        }
        $(this).children('i').toggleClass('rotate-180');
        $(this).closest('aside').toggleClass('sidebar-active');
        $('.main-content').toggleClass('md:pl-[94px] md:pl-[294px]');
    });
    // open sidebar on hover in
    $(document).on('mouseenter', '.sidebar', function() {
        if (!$('.sidebar').hasClass('sidebar-active')) {
            $(this).closest('aside').removeClass('md:w-[70px]').addClass('md:w-[270px]');
            $(this).closest('aside').find('.hideable').removeClass('hidden');
            $(this).closest('aside').find('.dropdown').removeClass('!hidden');
        }
    });
    // close sidebar on hover out
    $(document).on('mouseleave', '.sidebar', function() {
        if (!$('.sidebar').hasClass('sidebar-active')) {
            $(this).closest('aside').addClass('md:w-[70px]').removeClass('md:w-[270px] ');
            $(this).closest('aside').find('.hideable').addClass('hidden');
            $(this).closest('aside').find('.dropdown').addClass('!hidden');
        }
    });
    // Small Screen Sidebar Toggle
    $(document).on('click', '.sm-sidebar-trigger-btn', function(event) {
        if (!$('.sidebar').hasClass('sidebar-active')) {
            $('.sidebar-trigger-btn').trigger('click');
        }
        $('.sidebar').toggleClass('-translate-x-[110%]');
        $('.overlay').toggleClass('w-fit w-full');
    });
    $(document).on('click', '.sidebar', function(event) {
        event.stopPropagation();
    });
    $(document).on('click', '.overlay', function() {
        $('.sidebar').toggleClass('-translate-x-[110%]');
        $('.overlay').toggleClass('w-fit w-full');
    });


});

$(document).ready(function() {
    // Toggle Menu
    $(document).on('click', '.menu-btn', function() {
        $(this).prev().children('.nav-ul').toggleClass('-left-full left-0');
        $(this).prev().toggleClass('w-fit h-fit w-full h-full');
    });

    // turn off menu bar when clicked on overlay
    $(document).on('click', '.nav-overlay', function() {
        $(this).children().toggleClass('-left-full left-0');
        $(this).toggleClass('w-fit h-fit w-full h-full');
    });

    // To prevent the click event from reaching the parent element
    $(document).on('click', '.nav-ul', function(event) {
        event.stopPropagation();
    });

    // dropdown
    $(document).on('click', '.dropdown-trigger', function() {
        if (!$(this).hasClass('dropdown-active')) {
            $(this).closest('.multiple-dropdown-container').find('.dropdown-content').slideUp(300);
            $(this).closest('.multiple-dropdown-container').find('.dropdown-trigger').children('span').children('i').removeClass('fa-minus').addClass('fa-plus');
            $(this).closest('.multiple-dropdown-container').find('.dropdown-trigger').removeClass('dropdown-active');
            $(this).addClass('dropdown-active');
        }
        $(this).next('.dropdown-content').slideToggle(300);
        $(this).children('span').children('i').toggleClass('fa-plus fa-minus');
    });

    // Fade text

    // Fade text
    $(document).on('click', '.fade-trigger', function() {
        $(this).closest('.swiperHistory').find('.fade-trigger').removeClass('bg-[#F06728] text-white').addClass('bg-[#EDEDED]');
        $(this).addClass('bg-[#F06728] text-white').removeClass('bg-[#EDEDED]');
        var fadeclass = '.' + $(this).attr('fade');
        $('.fade-container').children().hide();
        $('.fade-container').children(fadeclass).fadeIn(500);
        $('.image-container').find('img').hide();
        $('.image-container').find(fadeclass).fadeIn(500);
    });

    // learn more button
    $(document).on('click', '.learn-more-btn', function() {
        $(this).parent().children('p').toggleClass('line-clamp-6');
        if ($(this).text().trim() == 'Learn More') {
            $(this).text('Learn Less');
        } else if ($(this).text().trim() == 'Learn Less') {
            $(this).text('Learn More');
        }
    });

});



// Swiper js
new Swiper('#swiper-1', {
    effect: 'slide',
    speed: 800,
    navigation: {
        nextEl: "#nav-right",
        prevEl: "#nav-left"
    },
    // Optional parameters
    direction: 'horizontal',
    loop: true,

    // Autoplay
    autoplay: {
        delay: 3000, // milliseconds
        disableOnInteraction: false,
    },
});

// swiper card
var swiper = new Swiper(".mySwiper", {
    slidesPerView: 1,
    spaceBetween: 20,
    touch: true,
    speed: 800,
    slidesPerGroup: 1,
    rewind: true,
    navigation: {
        nextEl: "#card-nav-right",
        prevEl: "#card-nav-left"
    },
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
    },
    breakpoints: {
        // Responsive breakpoints
        500: {
            slidesPerView: 2,
            slidesPerGroup: 2,
            spaceBetween: 20,
        },
        1024: {
            slidesPerView: 3,
            slidesPerGroup: 3,
            spaceBetween: 30,
        },
        1440: {
            slidesPerView: 3,
            slidesPerGroup: 3,
            spaceBetween: 60,
        },
    },
});
// swiper card
var swiper = new Swiper(".swiperPartner", {
    slidesPerView: 2,
    spaceBetween: 20,
    speed: 800,
    slidesPerGroup: 2,
    rewind: true,
    breakpoints: {
        // Responsive breakpoints
        500: {
            slidesPerView: 3,
            slidesPerGroup: 3,
            spaceBetween: 20,
        },
        1024: {
            slidesPerView: 4,
            slidesPerGroup: 4,
            spaceBetween: 30,
        },
    },
});
//swiper js

// swiper company history
var swiper = new Swiper(".swiperHistory", {
    slidesPerView: 2,
    spaceBetween: 10,
    speed: 800,
    grabCursor: true,
    slidesPerGroup: 1,
    rewind: true,
    breakpoints: {
        // Responsive breakpoints
        568: {
            slidesPerView: 3,
        },
        768: {
            slidesPerView: 2,
        },
        1024: {
            slidesPerView: 3,
        },
        1540: {
            slidesPerView: 4,
        },
    },
});