@extends(getTemplate() . '.layouts.app')

@push('styles_top')
    <link rel="stylesheet" href="/assets/default/vendors/swiper/swiper-bundle.min.css">
    <link rel="stylesheet" href="/assets/default/vendors/select2/select2.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    <style>
        .staggered-animation .staggered-item {
            opacity: 0;
            animation: fadeIn 0.5s ease-in-out forwards;
        }

        @keyframes fadeIn {
            to {
                opacity: 1;
            }
        }
    </style>

    {{-- Sidebar Styles --}}
    <style>
        #topFilters {
            /* background-color: var(--bs-body-bg); */
        }

        .side-menu {
            height: calc(100vh - 65px);
            position: sticky;
            top: 100px;
            width: 300px;
            padding: 1rem;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
            /* border-right: 1px solid #d1d5db; */
            /* background-color: var(--bs-body-bg); */
            z-index: 1;
        }

        /* Remove these classes as they're no longer needed */
        .side-menu.show,
        .side-menu.hide {
            display: none !important;
        }
    </style>
    {{-- Start Extended Info Popup --}}
    <style>
        .extended-info-popup {
            position: absolute;
            margin-top: 0px !important;
            background-color: var(--bs-body-bg) !important;
            display: block !important;
            z-index: 99 !important;
            opacity: 0;
            transform: scale(0, 0);
            transition: opacity 0.3s ease, transform 0.3s ease;
            max-width: 90vw;
            width: 350px;
            pointer-events: visible !important;

        }

        .add-to-cart-button {
            opacity: 0;
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        .add-to-cart-button.show {
            animation: fadeIn 0.5s ease .5s forwards;
            /* 0.3s duration, 1s delay */
        }

        .add-to-cart-button.hide {
            opacity: 0;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        .extended-info-popup.show {
            opacity: 1;
            transform: scale(1, 1);
            display: block !important;
        }

        .extended-info-popup.hide {
            opacity: 0;
            left: -100px !important;
            top: -100px !important;
            display: none !important;
            pointer-events: none !important;
        }

        .popup-content {
            font-size: clamp(12px, 2vw, 14px);
        }

        .extended-info-popup .card-title {
            font-size: clamp(12px, 1.8vw, 15px);
        }

        .extended-info-popup .card-text,
        .extended-info-popup .fs-5 {
            font-size: clamp(10px, 1.8vw, 12px) !important;
        }

        .extended-info-popup .fs-4 {
            font-size: clamp(10px, 2vw, 14px) !important;

        }

        .extended-info-popup .card-body {
            padding: clamp(0.5rem, 2vw, 1rem);
        }

        .extended-info-popup .btn {
            font-size: clamp(12px, 2vw, 14px);
            padding: clamp(0.25rem, 1vw, 0.5rem) clamp(0.5rem, 2vw, 1rem);
        }
    </style>
    {{-- End Extended Info Popup --}}

    <style>
        @media (min-width: 768px) {
            .main-container {
                /* margin-left: 280px !important; */
                display: flex;
                /* width: calc(100% - 280px); */
            }
        }

        @media (max-width: 768px) {
            .main-container {
                margin-left: 0px !important;
                display: flex;

                width: 100%;
            }
        }

        .course-card .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0);
            /* Transparent background */
            z-index: 9999;
            /* Above the course card but below the popup */
            pointer-events: none;
            /* Prevent interactions */
        }

        .position-relative {
            position: relative;
        }

        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 50px;
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
            padding: 5px;
            display: flex;
            align-items: center;
        }

        .overlay-text {
            color: white;
            font-weight: bold;
        }

        @keyframes slideDown {
            from {
                transform: translateY(-100%);
                opacity: 0;
            }

            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .animate-slide-down {
            animation: slideDown 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            animation-delay: 2s;
            will-change: transform, opacity;
        }

        * Add staggered children animations */ .animate-slide-down>.row>div {
            opacity: 0;
            animation: slideDown 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        .animate-slide-down>.row>div:nth-child(1) {
            animation-delay: 0.2s;
        }

        .animate-slide-down>.row>div:nth-child(2) {
            animation-delay: 0.4s;
        }

        .animate-slide-down>.row>div:nth-child(3) {
            animation-delay: 0.6s;
        }
    </style>
@endpush

@section('content')
    <div class="container-fluid h-500px " id="ad-container">
        <div class="row" style="min-height: 500px">
            <div class="col-md-4 bg-black text-white  d-flex flex-column justify-content-center align-items-center p-10">
                <div class="display-3 fw-bold">RIGHT</div>
                <div class="display-3 fw-bold">TO</div>
                <div class="display-3 fw-bold">DISCONNECT</div>
            </div>
            <div class="d-flex flex-column col-md-4 bg-black text-white text-center justify-content-between p-4">
                <div class="fs-2 fw-bold">NEW COURSE</div>
                <div class="display-1 fw-bold">$99</div>
                <div class="fs-5">
                    Essential training for<br>
                    Australian workplace compliance<br>
                    under new legislation
                </div>
                <button class="btn btn-danger btn-lg mt-3">Enroll Now</button>
            </div>

            <div class="col-md-4 bg-black text-white d-flex flex-column justify-content-center align-items-center p-4">
                <div class="display-4 fw-bold">ORANGE</div>
                <div class="display-4 fw-bold">CARD</div>
                <div class="fs-5 mt-3 text-center">Compliant with 2024<br>Fair Work Changes</div>
            </div>
        </div>
    </div>
    <!-- Main Container -->
    <div class="page d-flex  w-full h-full mt-65px">

        
        <div class="position-absolute top-0 start-50 translate-middle-x mt-100px text-center"
            style="z-index:10000 !important;">
            <div class="d-block d-sm-none fs-2">xs</div>
            <div class="d-none d-sm-block d-md-none fs-2">sm</div>
            <div class="d-none d-md-block d-lg-none fs-2">md</div>
            <div class="d-none d-lg-block d-xl-none fs-2">lg</div>
            <div class="d-none d-xl-block fs-2">xl</div>
        </div>

        <!-- Side Menu -->
        <div class="side-menu d-none d-md-block mt-5">
            <form id="filtersForm" class="w-100" onsubmit="return false;">
                <div id="topFilters" class="w-100">
                    <div class="d-flex flex-wrap align-items-center mb-1 text-center">
                        <span class="w-100 fw-bold fs-lg">{{ trans('panel.filters') }}</span>
                    </div>
                    <div class="d-flex flex-wrap align-items-center mb-1">
                        <div class="w-100 d-flex align-items-center space-x-2 mb-1 mt-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="upcoming" name="upcoming">
                                <label class="form-check-label text-gray-700"
                                    for="upcoming">{{ trans('panel.upcoming') }}</label>
                            </div>
                        </div>

                        <div class="w-100 d-flex align-items-center space-x-2 mb-1">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="free" name="free">
                                <label class="form-check-label text-gray-700"
                                    for="free">{{ trans('public.free') }}</label>
                            </div>
                        </div>

                        <div class="w-100 d-flex align-items-center space-x-2 mb-1">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="discount" name="discount">
                                <label class="form-check-label text-gray-700"
                                    for="discount">{{ trans('public.discount') }}</label>
                            </div>
                        </div>

                        <div class="w-100 d-flex align-items-center space-x-2 mb-1">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="download" name="downloadable">
                                <label class="form-check-label text-gray-700"
                                    for="download">{{ trans('home.download') }}</label>
                            </div>
                        </div>

                        <div class="w-100 mb-4">
                            <select name="sort" class="form-select font-14">
                                <option disabled selected>{{ trans('public.sort_by') }}</option>
                                <option value="">{{ trans('public.all') }}</option>
                                <option value="newest">{{ trans('public.newest') }}</option>
                                <option value="expensive">{{ trans('public.expensive') }}</option>
                                <option value="inexpensive">{{ trans('public.inexpensive') }}</option>
                                <option value="bestsellers">{{ trans('public.bestsellers') }}</option>
                                <option value="best_rates">{{ trans('public.best_rates') }}</option>
                            </select>
                        </div>

                        <div class="w-100 mb-4">
                            <h4 class="font-14 text-gray font-weight-500 mb-2">{{ trans('public.type') }}</h4>
                            @foreach (['bundle', 'webinar', 'course', 'text_lesson'] as $typeOption)
                                <div class="form-check form-switch mb-2">
                                    <input class="form-check-input" type="checkbox" id="filterType{{ $typeOption }}"
                                        name="type[]" value="{{ $typeOption }}">
                                    <label class="form-check-label text-gray-700" for="filterType{{ $typeOption }}">
                                        @if ($typeOption == 'bundle')
                                            {{ trans('update.bundle') }}
                                        @else
                                            {{ trans('webinars.' . $typeOption) }}
                                        @endif
                                    </label>
                                </div>
                            @endforeach
                        </div>

                        <div class="w-100 mb-4">
                            <h4 class="font-14 text-gray font-weight-500 mb-2">{{ trans('site.more_options') }}
                            </h4>
                            @foreach (['subscribe', 'certificate_included', 'with_quiz', 'featured'] as $moreOption)
                                <div class="form-check form-switch mb-2">
                                    <input class="form-check-input" type="checkbox" id="filterOption{{ $moreOption }}"
                                        name="moreOptions[]" value="{{ $moreOption }}">
                                    <label class="form-check-label text-gray-700" for="filterOption{{ $moreOption }}">
                                        {{ trans('webinars.show_only_' . $moreOption) }}
                                    </label>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </form>
        </div>
        {{-- end sidebar --}}
        <div class="main-container container-fluid h-100 d-flex flex-row">

            <div class="row w-100 justify-content-md-start justify-content-center">
                {{-- <div class="col-md-auto"> --}}
                {{-- @include('web.default.includes.webinar.side-menu') --}}


                {{-- </div> --}}
                <div class="d-block d-md-none">
                    @include('web.default.includes.webinar.mobile-toolbar')
                </div>



                <div class="col-auto col-md d-flex flex-start flex-shrink-1">
                    <div id="courses-content"
                        class="staggered-animation container-fluid w-100 mx-0 mt-20 overflow-auto h-100">
                        <div class="row gy-5 justify-content-lg-start justify-content-center">
                            @foreach ($webinars as $index => $webinar)
                                @include('web.default.includes.webinar.grid-card', [
                                    'webinar' => $webinar,
                                    'popup' => true

                                ])
                            @endforeach
                        </div>
                    </div>
                    {{-- infinite scroll will go here --}}
                </div>
            </div>
        </div>
        <!-- Add elements below courses-container here -->
    </div>
@endsection

@push('scripts_bottom')
    <script src="/assets/default/vendors/select2/select2.min.js"></script>
    <script src="/assets/default/vendors/swiper/swiper-bundle.min.js"></script>

    <script src="/assets/default/js/parts/categories.min.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {


            // const content = document.querySelector("#ad-container");
            // if (content) {
            //     console.log(content);
            //     content.classList.remove('d-none');
            //     content.style.visibility = 'visible';
            //     content.style.opacity = '1';
            //     content.classList.add('animate-slide-down');
            // }
            // Prevent form submission on checkbox click
            $('#filtersForm input[type="checkbox"]').on('change', function(e) {
                const filters = $('#filtersForm').serialize();
                loadCourses(filters);
            });
            $('#filtersForm select').on('change', function(e) {
                const filters = $('#filtersForm').serialize();
                loadCourses(filters);
            });
            // Prevent form submission on checkbox click
            $('#mobileFiltersForm input[type="checkbox"]').on('change', function(e) {
                const filters = $('#mobileFiltersForm').serialize();
                loadCourses(filters);
            });
            $('#mobileFiltersForm select').on('change', function(e) {
                const filters = $('#mobileFiltersForm').serialize();
                loadCourses(filters);
            });

            // Function to load courses
            function loadCourses(filters = {}) {
                console.log(filters);
                // Get current path and remove leading/trailing slashes
                const path = window.location.pathname.replace(/^\/|\/$/g, '');
                const segments = path.split('/');



                // If we're on a category page, add category filters
                if (segments.length > 1 && segments[0] === 'classes') {
                    let filterData = new URLSearchParams(filters);
                    filterData.set('category', segments[1]);
                    console.log('Category added:', segments[1]); // Debugging line

                    if (segments.length > 2) {
                        filterData.set('subcategory', segments[2]);
                        console.log('Subcategory added:', segments[2]); // Debugging line
                    }

                    filters = filterData.toString();
                    console.log('Updated filters:', filters); // Debugging line
                }

                console.log('Updated filters:', filters); // Add this line for debugging


                $.ajax({
                    url: '/classes/filter',
                    method: 'GET',
                    data: filters,
                    success: function(response) {
                        $('#courses-content').html(response);
                        addHoverListeners();
                    },
                    error: function(error) {
                        console.error('Error loading courses:', error);
                        $('#courses-content').html(
                            '<div class="alert alert-danger">Failed to load courses</div>');
                    }
                });
            }

            // Add hover listeners to course cards
            function isElementInViewport(el) {
                const rect = el.getBoundingClientRect();
                return (
                    rect.top >= 0 &&
                    rect.left >= 0 &&
                    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
                    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
                );
            }
            const updateSidebarPosition = () => {
                const side_bar = document.querySelector('.side-menu');
                const courses_content = document.querySelector('#courses-content');

                if (!side_bar || !courses_content) return;

                // Get initial offset once
                const initialOffset = courses_content.getBoundingClientRect().top + window.scrollY;
                console.log("Initial Offset: ", initialOffset); // Debugging line
                console.log("Scroll Y: ", window.scrollY); // Debugging line
                requestAnimationFrame(() => {
                    if (window.scrollY > initialOffset - 300) {
                        // Switch to fixed positioning when scrolled past initial position
                        side_bar.style.position = 'fixed';
                        side_bar.style.top = '65px';
                        side_bar.classList.add('show');
                        side_bar.classList.remove('hide');
                        console.log("Fixed Positioning"); // Debugging line
                    } else {
                        // Keep absolute positioning when above initial position
                        // side_bar.style.position = 'absolute';
                        // side_bar.style.top = `${initialOffset}px`;
                        side_bar.classList.add('hide');
                        side_bar.classList.remove('show');
                        console.log("Absolute Positioning"); // Debugging line
                    }
                });
            };

            function addHoverListeners() {
                const courseCards = document.querySelectorAll('.course-card');
                courseCards.forEach(card => {
                    let hideTimeout;

                    card.addEventListener('mouseenter', function() {
                        // if (!isElementInViewport(this)) {
                        //     return;
                        // }

                        const popupId = this.getAttribute('data-popup-id');
                        let buttonId = popupId.replace('popup', 'button');
                        const popup = document.getElementById(popupId);
                        if (popup) {
                            // Hide all other popups

                            hideAllPopupsExcept(popupId);

                            const cardRect = this.getBoundingClientRect();
                            const popupRect = popup.getBoundingClientRect();
                            const top = cardRect.top + window.scrollY;
                            const left = cardRect.left + window.scrollX;
                            const right = cardRect.right + window.scrollX;
                            // popup.style.width = `${Math.max(cardRect.width, 350)}px`;
                            popup.style.width = `${cardRect.width}px`;

                            popup.style.height = `${cardRect.height}px`;
                            popup.style.top = `${top}px`;
                            popup.style.left = `${left}px`;
                            popup.classList.remove('hide');
                            popup.classList.add('show');
                            //enable button
                            const button = document.getElementById(buttonId);
                            setTimeout(() => {
                                button.classList.remove('disabled');
                                button.classList.remove('hide');
                                button.classList.add('show');

                            }, 100);
                            // Clear any existing hide timeout
                            clearTimeout(hideTimeout);
                        }
                    });

                    function hideAllPopupsExcept(exceptId) {
                        const popups = document.querySelectorAll('.extended-info-popup');
                        popups.forEach(popup => {
                            if (popup.id !== exceptId) {
                                popup.classList.remove('show');
                                popup.classList.add('hide');
                                const popupId = popup.id;
                                let buttonId = popupId.replace('popup', 'button');
                                const button = document.getElementById(buttonId);
                                setTimeout(() => {

                                    button.classList.add('disabled');
                                    button.classList.add('hide');
                                    button.classList.remove('show');
                                }, 100);
                            }
                        });
                    }

                    card.addEventListener('mouseleave', function(event) {
                        const popupId = this.getAttribute('data-popup-id');
                        const popup = document.getElementById(popupId);
                        let buttonId = popupId.replace('popup', 'button');

                        if (popup) {
                            hideTimeout = setTimeout(() => {
                                const relatedTarget = event.relatedTarget;

                                if (relatedTarget && (card.contains(relatedTarget) || popup
                                        .contains(relatedTarget))) {
                                    return;
                                }

                                let buttonId = popupId.replace('popup', 'button');
                                const button = document.getElementById(buttonId);
                                setTimeout(() => {
                                    console.log(buttonId);
                                    button.classList.add('disabled');
                                    button.classList.add('hide');
                                    button.classList.remove('show');
                                }, 100);

                                popup.classList.remove('show');
                                popup.classList.add('hide');

                            }, 100); // Delay before hiding the popup
                        }
                    });

                    // Add mouseleave event to the popup itself to handle quick movements
                    const popupId = card.getAttribute('data-popup-id');
                    const popup = document.getElementById(popupId);
                    if (popup) {
                        popup.addEventListener('mouseleave', function(event) {
                            hideTimeout = setTimeout(() => {
                                const relatedTarget = event.relatedTarget;
                                if (relatedTarget && (card.contains(relatedTarget) || popup
                                        .contains(relatedTarget))) {
                                    return;
                                }
                                popup.classList.remove('show');
                                popup.classList.add('hide');
                            }, 100); // Delay before hiding the popup
                        });

                        popup.addEventListener('mouseenter', function() {
                            // Clear any existing hide timeout
                            clearTimeout(hideTimeout);
                        });
                    }
                });

                // Add scroll event listener to hide popups when they leave the viewport
                window.addEventListener('scroll', function() {
                    const popups = document.querySelectorAll('.extended-info-popup.show');
                    popups.forEach(popup => {
                        if (!isElementInViewport(popup)) {
                            popup.classList.remove('show');
                            popup.classList.add('hide');
                        }
                    });

                    // updateSidebarPosition();
                });

                /**
                 * Checks if an element is within the viewport.
                 * @param {HTMLElement} el - The element to check.
                 * @returns {boolean} - True if the element is in the viewport, false otherwise.
                 */
                function isElementInViewport(el) {
                    // Get the bounding rectangle of the element
                    const rect = el.getBoundingClientRect();

                    // Check if the element is within the viewport
                    return (
                        rect.top >= 0 - rect.height && // The top of the element is within the viewport
                        rect.left >= 0 && // The left side of the element is within the viewport
                        rect.bottom <= (window.innerHeight + rect.height || document.documentElement
                            .clientHeight + rect.height) && // The bottom of the element is within the viewport
                        rect.right <= (window.innerWidth || document.documentElement
                            .clientWidth) // The right side of the element is within the viewport
                    );
                }
            }
            // Load courses on page load with no filters
            // loadCourses();

            // Add hover listeners on initial load
            addHoverListeners();

            // Infinite scrolling
            $(document).on('click', '#load-more', function() {
                const nextPageUrl = $(this).data('next-page');
                if (nextPageUrl) {
                    $.ajax({
                        url: nextPageUrl,
                        method: 'GET',
                        success: function(response) {
                            $('#courses-content').append(response);
                            addHoverListeners
                                (); // Add hover listeners after loading more courses
                            $('#load-more').remove(); // Remove the load more button
                        },
                        error: function(error) {
                            console.error('Error loading more courses:', error);
                        }
                    });
                }
            });
        });
    </script>
@endpush