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

@push('styles_top')
    <meta property="og:image" content="{{ url(!empty($course->thumbnail) ? $course->thumbnail : '') }}">
    <meta property="twitter:image" content="{{ url(!empty($course->thumbnail) ? $course->thumbnail : '') }}">
    <meta property="keywords" content="@foreach($course->tags as $tag){{ $tag->title }},@endforeach">
    <meta property="og:keywords" content="@foreach($course->tags as $tag){{ $tag->title }},@endforeach">

    <link rel="stylesheet" href="/assets/default/vendors/swiper/swiper-bundle.min.css">
    <link rel="stylesheet" href="/assets/default/css/css-stars.css">
    <link rel="stylesheet" href="/assets/default/vendors/video/video-js.min.css">
    <link rel="stylesheet" href="{{ asset('assets/default/css/premium-course-page.css') }}?v=20260606d">
@endpush

@section('content')
@php
    $lessonCount = 0;
    if (!empty($course->chapters)) {
        foreach ($course->chapters as $chapter) {
            if (!empty($chapter->chapterItems)) {
                $lessonCount += $chapter->chapterItems->count();
            }
        }
    }
    $chapterCount = !empty($course->chapters) ? $course->chapters->count() : 0;
    $canSale = ($course->canSale() and !$hasBought);
    $courseTheme = getCourseLandingTheme($course);

    $heroCopy = getCourseLandingHeroCopy($course);
    $heroTagline = $heroCopy['tagline'] ?? '';
    $heroExcerpt = $heroCopy['lead'] ?? '';
@endphp

<div class="cp-page premium-course-page {{ $courseTheme }}">
    @include('web.default.course.landing.hero')

    <div class="cp-page__body">
        @include('web.default.course.landing.benefits')
        @include('web.default.course.landing.learn_bento')
        @include('web.default.course.landing.free_lessons')
        @include('web.default.course.landing.details_extra')

        <section class="cp-section cp-split cp-animate" id="cp-curriculum-block">
            <div class="container">
                <div class="row cp-split__row">
                    <div class="col-lg-8 cp-split__main">
                        @include('web.default.course.landing.curriculum')
                        @include('web.default.course.landing.testimonials')
                    </div>
                    <div class="col-lg-4 cp-split__aside cp-page__aside">
                        <div class="cp-page__sticky">
                            @include('web.default.course.landing.enrollment_card')
                            @include('web.default.course.landing.sidebar_specs')
                        </div>
                    </div>
                </div>
            </div>
        </section>

        @include('web.default.course.landing.instructor')
        @include('web.default.course.landing.faq')
        @include('web.default.course.landing.academy_strip')
        @include('web.default.course.landing.related')
    </div>
</div>

@include('web.default.course.share_modal')
@include('web.default.course.buy_with_point_modal')

@endsection

@push('scripts_bottom')
    @if($course->video_demo != '')
    <script>
        var videolink = "{{ $course->video_demo }}";
        var videoid = videolink.match(/(?:https?:\/{2})?(?:w{3}\.)?youtu(?:be)?\.(?:com|be)(?:\/watch\?v=|\/)([^\s&]+)/);
        if (videoid && videoid[1]) {
            var ytId = videoid[1];
            $('.video_demo').html(
                '<div class="embed-responsive embed-responsive-4by3 video-facade" data-video-facade data-embed-url="https://www.youtube.com/embed/' + ytId + '" data-youtube-id="' + ytId + '">' +
                '<img src="https://i.ytimg.com/vi/' + ytId + '/hqdefault.jpg" alt="" class="video-facade__thumb" loading="lazy" decoding="async">' +
                '<button type="button" class="video-facade__play" aria-label="Play">' +
                '<span class="video-facade__play-icon" aria-hidden="true">' +
                '<svg viewBox="0 0 24 24" width="28" height="28" fill="currentColor"><path d="M8 5.14v13.72c0 .79.87 1.27 1.54.84l11.14-6.86c.6-.37.6-1.27 0-1.64L9.54 4.3A1 1 0 0 0 8 5.14z"/></svg>' +
                '</span></button></div>'
            );
        }
    </script>
    @endif

    <script src="/assets/default/js/video-facade.js" defer></script>
    <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 src="/assets/default/vendors/swiper/swiper-bundle.min.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') }}';
    </script>

    <script src="/assets/default/vendors/owl-carousel2/owl.carousel.min.js"></script>
    <script src="/assets/default/vendors/parallax/parallax.min.js"></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>

    <script>
        $("body").on("click", ".js-course-direct-payment", function (o) {
            var e = $(this);
            e.addClass("loadingbar danger").prop("disabled", !0);
            var a = e.closest("form");
            @if(auth()->check())
            a.attr("action", "/course/direct-payment"), a.trigger("submit");
            @else
            window.location.href = "/login?url={{ url()->current() }}";
            @endif
        });
        $('.course-description img').css('max-width', '100%');
    </script>

    <script src="{{ asset('assets/default/js/premium-course-landing.js') }}?v=20260606c" defer></script>
@endpush
