@extends('web.default.layouts.app')

@push('styles_top')
    <link rel="stylesheet" href="/assets/default/learning_page/styles.css" />
    <link rel="stylesheet" href="/assets/default/vendors/video/video-js.min.css">
    <style>
        /* Desktop View for Course Content Container */
        .course-content-container {
            min-height: 600px;
            height: calc(100vh - 200px);
        }
        /* Mobile View for Course Content Container */
        @media (max-width: 992px) {
            .course-content-container {
                min-height: 400px;
                height: calc(100vh - 100px);
            }
        }

        /* Course Content Sidebar - Min width for Desktop View*/
        @media (min-width: 992px) {
            #content-sidebar {
                width: 320px;
                min-width: 320px;
            }
        }
        @media (max-width: 992px) {
            #content-sidebar {
                margin-top: 20px !important;
            }
        }
    </style>
@endpush

@section('content')
    <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>
    <div class="container d-flex gap-5 flex-column justify-content-center d-md-block ">

        {{-- @include('web.default.course.learningPage.components.navbar') --}}
        @php
            $percent = $course->getProgress(true);
        @endphp

        {{-- Learning NavBar --}}
        @include('web.default.course.learningPage.components.navbar')
        <!-- Main content flex container -->
        <div class="d-block d-lg-flex gap-4 course-content-container">
            <!-- Main video area - flex-grow-1 allows it to take remaining space -->
            <!-- Main video area - with overflow control -->
            <div class="flex-grow-1 d-flex align-items-center justify-content-center rounded bg-gray-200 overflow-hidden">

                <!-- Video container with max height -->
                <div class="w-100 mh-100" style="aspect-ratio: 16/9">
                    <div class="w-100 h-100" id="content-player">
                        @livewire('video-player')
                    </div>
                </div>
            </div>

            <!-- Right sidebar with fixed width on desktop, full width mobile -->
            @include('web.default.course.learningPage.components.sidebar')
        </div>
    </div>
@endsection

@push('scripts_bottom')
    <script src="https://vjs.zencdn.net/7.20.3/video.min.js"></script>
    <script>
        window.videojs = videojs;
        window.VIDEOJS_NO_DYNAMIC_STYLE = true;
    </script>
    <script src="/assets/default/vendors/video/youtube.min.js"></script>
    <script src="/assets/default/vendors/video/vimeo.js"></script>
    <script src="/assets/default/js/parts/video_player_helpers.min.js"></script>
    <script src="/assets/learning_page/scripts.min.js"></script>

    <script>
        var defaultItemType =
            '{{ !empty(request()->get('type')) ? request()->get('type') : (!empty($userLearningLastView) ? $userLearningLastView->item_type : '') }}'
        var defaultItemId =
            '{{ !empty(request()->get('item')) ? request()->get('item') : (!empty($userLearningLastView) ? $userLearningLastView->item_id : '') }}'
        var loadFirstContent =
            {{ (!empty($dontAllowLoadFirstContent) and $dontAllowLoadFirstContent) ? 'false' : 'true' }}; // allow to load first content when request item is empty

        var appUrl = '{{ url('') }}';
        var courseUrl = '{{ $course->getUrl() }}';
        var courseNotesStatus = '{{ !empty(getFeaturesSettings('course_notes_status')) }}';
        var courseNotesShowAttachment = '{{ !empty(getFeaturesSettings('course_notes_attachment')) }}';

        // lang
        var pleaseWaitForTheContentLang = '{{ trans('update.please_wait_for_the_content_to_load') }}';
        var downloadTheFileLang = '{{ trans('update.download_the_file') }}';
        var downloadLang = '{{ trans('home.download') }}';
        var showHtmlFileLang = '{{ trans('update.show_html_file') }}';
        var showLang = '{{ trans('update.show') }}';
        var sessionIsLiveLang = '{{ trans('update.session_is_live') }}';
        var youCanJoinTheLiveNowLang = '{{ trans('update.you_can_join_the_live_now') }}';
        var passwordLang = '{{ trans('auth.password') }}';
        var joinTheClassLang = '{{ trans('update.join_the_class') }}';
        var coursePageLang = '{{ trans('update.course_page') }}';
        var quizPageLang = '{{ trans('update.quiz_page') }}';
        var sessionIsNotStartedYetLang = '{{ trans('update.session_is_not_started_yet') }}';
        var thisSessionWillBeStartedOnLang = '{{ trans('update.this_session_will_be_started_on') }}';
        var sessionIsFinishedLang = '{{ trans('update.session_is_finished') }}';
        var sessionIsFinishedHintLang = '{{ trans('update.this_session_is_finished_You_cant_join_it') }}';
        var goToTheQuizPageForMoreInformationLang = '{{ trans('update.go_to_the_quiz_page_for_more_information') }}';
        var downloadCertificateLang = '{{ trans('update.download_certificate') }}';
        var enjoySharingYourCertificateWithOthersLang = '{{ trans('update.enjoy_sharing_your_certificate_with_others') }}';
        var attachmentsLang = '{{ trans('public.attachments') }}';
        var checkAgainLang = '{{ trans('update.check_again') }}';
        var learningToggleLangSuccess = '{{ trans('public.course_learning_change_status_success') }}';
        var learningToggleLangError = '{{ trans('public.course_learning_change_status_error') }}';
        var sequenceContentErrorModalTitle = '{{ trans('update.sequence_content_error_modal_title') }}';
        var sendAssignmentSuccessLang = '{{ trans('update.send_assignment_success') }}';
        var saveAssignmentRateSuccessLang = '{{ trans('update.save_assignment_grade_success') }}';
        var saveSuccessLang = '{{ trans('webinars.success_store') }}';
        var changesSavedSuccessfullyLang = '{{ trans('update.changes_saved_successfully') }}';
        var oopsLang = '{{ trans('update.oops') }}';
        var somethingWentWrongLang = '{{ trans('update.something_went_wrong') }}';
        var notAccessToastTitleLang = '{{ trans('public.not_access_toast_lang') }}';
        var notAccessToastMsgLang = '{{ trans('public.not_access_toast_msg_lang') }}';
        var cantStartQuizToastTitleLang = '{{ trans('public.request_failed') }}';
        var cantStartQuizToastMsgLang = '{{ trans('quiz.cant_start_quiz') }}';
        var learningPageEmptyContentTitleLang = '{{ trans('update.learning_page_empty_content_title') }}';
        var learningPageEmptyContentHintLang = '{{ trans('update.learning_page_empty_content_hint') }}';
        var expiredQuizLang = '{{ trans('update.expired_quiz') }}';
        var personalNoteLang = '{{ trans('update.personal_note') }}';
        var personalNoteHintLang = '{{ trans('update.this_note_will_be_displayed_for_you_privately') }}';
        var attachmentLang = '{{ trans('update.attachment') }}';
        var saveNoteLang = '{{ trans('update.save_note') }}';
        var clearNoteLang = '{{ trans('update.clear_note') }}';
        var personalNoteStoredSuccessfullyLang = '{{ trans('update.personal_note_stored_successfully') }}';
    </script>
@endpush