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

@push('styles_top')
    <link rel="stylesheet" href="/assets/default/css/css-stars.css">
    <link rel="stylesheet" href="/assets/default/vendors/video/video-js.min.css">
    <style>
        @media (max-width: 767px) {
            .mobile-buy-bar {
                position: fixed;
                bottom: -50px;
                /* Start off-screen */
                left: 0;
                right: 0;
                height: 50px;
                background-color: var(--bs-body-bg);
                box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
                z-index: 1000;
                transition: bottom 0.3s ease-in-out;
                /* Add smooth transition */
            }

            .mobile-buy-bar.show {
                bottom: 0;
                /* Show the bar */
            }


            .mobile-buy-bar .container {
                height: 100%;
            }

            .mobile-buy-bar .price-container {
                font-size: 18px;
                font-weight: bold;
            }

            .mobile-buy-bar .btn {
                padding: 5px 15px;
            }


        }
    </style>

    <style>
        .course-content-sidebar {
            width: 340px;
            position: sticky;
            margin-top: 30px;
            background-color: var(--bs-body-bg);
            will-change: scroll-position;

        }

        .course-img {
            position: relative;
            overflow: hidden;
        }

        .course-video-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0, 0, 0, 0.6);
            width: 60px;
            height: 60px;
            border-radius: 50%;
            z-index: 2;
            transition: all 0.3s ease;
        }

        .course-video-icon:hover {
            background: rgba(0, 0, 0, 0.8);
            transform: translate(-50%, -50%) scale(1.1);
        }

        .course-video-icon i {
            color: white;
            font-size: 1.5rem;
        }
    </style>

    <style>
        .full-width-div {
            height: 500px;
            width: 100%;
            margin-top: 65px;
        }

        .content-container {
            max-width: 1200px;
            margin: 0 auto;
        }
    </style>
@endpush


@section('content')
    <!-- Course Header Container -->
    <div class="container-fluid p-0">

        {{-- Bootstrap Screen Size Breakpoint Labels --}}
        <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>

        <!-- Full-width black div Desktop -->
        @include('web.default.course.includes._desktop_header')
        <!-- End Full-width black div Desktop -->

        <!-- Full-width black div Mobile -->
        @include('web.default.course.includes._mobile_header')
        <!-- End Full-width black div Mobile -->

    </div>

    {{-- What You'll Learn Section --}}
    <div class="container content-container px-5 mt-10">
        @include('web.default.course.includes._what_youll_learn')
    </div>
    {{-- End What You'll Learn Section --}}

    {{-- Course Includes Section --}}
    <div class="container content-container p-10 mt-4">

        @include('web.default.course.includes._course_includes')
    </div>

    {{-- Begin Course Content Accordions --}}
    @if (!empty($course->chapters) and count($course->chapters))
        <section class="">
            @include('web.default.course.tabs.contents.chapter')
        </section>
    @endif
    {{-- End Course Content --}}


    @include('web.default.course.includes._mobile_buy_bar')

    
@endsection

@push('scripts_bottom')
    <script src="/assets/default/js/parts/time-counter-down.min.js"></script>
    <script src="/assets/default/vendors/barrating/jquery.barrating.min.js"></script>
    <script src="/assets/default/vendors/video/video.min.js"></script>
    <script src="/assets/default/vendors/video/youtube.min.js"></script>
    <script src="/assets/default/vendors/video/vimeo.js"></script>

    <script>
        var webinarDemoLang = '{{ trans('webinars.webinar_demo') }}';
        var replyLang = '{{ trans('panel.reply') }}';
        var closeLang = '{{ trans('public.close') }}';
        var saveLang = '{{ trans('public.save') }}';
        var reportLang = '{{ trans('panel.report') }}';
        var reportSuccessLang = '{{ trans('panel.report_success') }}';
        var reportFailLang = '{{ trans('panel.report_fail') }}';
        var messageToReviewerLang = '{{ trans('public.message_to_reviewer') }}';
        var copyLang = '{{ trans('public.copy') }}';
        var copiedLang = '{{ trans('public.copied') }}';
        var learningToggleLangSuccess = '{{ trans('public.course_learning_change_status_success') }}';
        var learningToggleLangError = '{{ trans('public.course_learning_change_status_error') }}';
        var notLoginToastTitleLang = '{{ trans('public.not_login_toast_lang') }}';
        var notLoginToastMsgLang = '{{ trans('public.not_login_toast_msg_lang') }}';
        var notAccessToastTitleLang = '{{ trans('public.not_access_toast_lang') }}';
        var notAccessToastMsgLang = '{{ trans('public.not_access_toast_msg_lang') }}';
        var canNotTryAgainQuizToastTitleLang = '{{ trans('public.can_not_try_again_quiz_toast_lang') }}';
        var canNotTryAgainQuizToastMsgLang = '{{ trans('public.can_not_try_again_quiz_toast_msg_lang') }}';
        var canNotDownloadCertificateToastTitleLang = '{{ trans('public.can_not_download_certificate_toast_lang') }}';
        var canNotDownloadCertificateToastMsgLang = '{{ trans('public.can_not_download_certificate_toast_msg_lang') }}';
        var sessionFinishedToastTitleLang = '{{ trans('public.session_finished_toast_title_lang') }}';
        var sessionFinishedToastMsgLang = '{{ trans('public.session_finished_toast_msg_lang') }}';
        var sequenceContentErrorModalTitle = '{{ trans('update.sequence_content_error_modal_title') }}';
        var courseHasBoughtStatusToastTitleLang = '{{ trans('cart.fail_purchase') }}';
        var courseHasBoughtStatusToastMsgLang = '{{ trans('site.you_bought_webinar') }}';
        var courseNotCapacityStatusToastTitleLang = '{{ trans('public.request_failed') }}';
        var courseNotCapacityStatusToastMsgLang = '{{ trans('cart.course_not_capacity') }}';
        var courseHasStartedStatusToastTitleLang = '{{ trans('cart.fail_purchase') }}';
        var courseHasStartedStatusToastMsgLang = '{{ trans('update.class_has_started') }}';
        var joinCourseWaitlistLang = '{{ trans('update.join_course_waitlist') }}';
        var joinCourseWaitlistModalHintLang = "{{ trans('update.join_course_waitlist_modal_hint') }}";
        var joinLang = '{{ trans('footer.join') }}';
        var nameLang = '{{ trans('auth.name') }}';
        var emailLang = '{{ trans('auth.email') }}';
        var phoneLang = '{{ trans('public.phone') }}';
        var captchaLang = '{{ trans('site.captcha') }}';
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const mobileBuyBar = document.querySelector('.mobile-buy-bar');
            const scrollThreshold = 300; // Adjust this value to change when the bar appears

            window.addEventListener('scroll', function() {
                if (window.pageYOffset > scrollThreshold) {
                    mobileBuyBar.classList.add('show');
                } else {
                    mobileBuyBar.classList.remove('show');
                }
            });
        });
    </script>
    <script src="/assets/default/js/parts/comment.min.js"></script>
    <script src="/assets/default/js/parts/video_player_helpers.min.js"></script>
    <script src="/assets/default/js/parts/webinar_show.min.js"></script>


    @if (
        !empty($course->creator) and
            !empty($course->creator->getLiveChatJsCode()) and
            !empty(getFeaturesSettings('show_live_chat_widget')))
        <script>
            (function() {
                "use strict"

                {!! $course->creator->getLiveChatJsCode() !!}
            })(jQuery)
        </script>
    @endif

    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function() {
            const side_bar = document.querySelector('.course-content-sidebar');
            side_bar.style.marginTop = (50 + window.scrollY) + 'px';
            const updateSidebarPosition = () => {


                if (!side_bar) return;

                console.log("Scroll Y: ", window.scrollY); // Debugging line

                requestAnimationFrame(() => {
                    if (window.scrollY > 40) {
                        side_bar.style.marginTop = (50 + window.scrollY) + 'px';

                    } else {
                        side_bar.style.marginTop = '30px';
                    }
                });
            };
            // Add scroll event listener to hide popups when they leave the viewport
            window.addEventListener('scroll', function() {

                updateSidebarPosition();
            });
        });
    </script>

@endpush