@if (isset($lesson_details->lesson_type))
    @if ($lesson_details->lesson_type == 'text')
        <div class="course-video-area border-primary">
            <div class="text_show">
                {!! removeScripts($lesson_details->attachment) !!}
            </div>
        </div>
    @elseif ($lesson_details->lesson_type == 'video-url')
        <div class="course-video-area border-primary border">
            <!-- Video -->
            <div class="course-video-wrap">
                <div id="player" class="ratio ratio-16x9">
                    <iframe src="{{ $lesson_details->lesson_src }}?origin=https://plyr.io&amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1" allowfullscreen allowtransparency allow="autoplay"></iframe>
                </div>
                @include('course_player.player_config')
            </div>
        </div>
    @elseif($lesson_details->lesson_type == 'google_drive')
        @php
            $video_url = trim($lesson_details->lesson_src);
            preg_match('/\/d\/([a-zA-Z0-9_-]+)/', $video_url, $matches);
            $video_id = $matches[1] ?? null;
        @endphp

        @if($video_id)
            <div class="course-video-area border-primary border position-relative">
                <!-- Responsive wrapper with 16:9 aspect ratio -->
                <div class="ratio ratio-16x9 w-100">
                    <iframe 
                        src="https://drive.google.com/file/d/{{ $video_id }}/preview"
                        allowfullscreen
                        allow="autoplay; fullscreen; picture-in-picture"
                        class="border-0 rounded"
                        frameborder="0"
                        loading="lazy">
                    </iframe>
                </div>
            </div>

            @include('course_player.player_config')
        @else
            <div class="alert alert-danger text-center py-5">
                <h5>Invalid Google Drive Link</h5>
                <p>Could not extract video ID from the provided URL.</p>
            </div>
        @endif
    @elseif($lesson_details->lesson_type == 'image')
        @php
            // $img = asset('uploads/lesson_file/attachment/' . $lesson_details->attachment);
            $img = route('course.get_file', ['course_id' => $lesson_details->course_id, 'lesson_id' => $lesson_details->id])
        @endphp
        <img width="100%" class="max-w-auto" height="auto" src="{{ $img }}" />
    @elseif($lesson_details->lesson_type == 'document_type')
        @php
            $src = route('course.get_file', ['course_id' => $lesson_details->course_id, 'lesson_id' => $lesson_details->id]);
            $pdf_src = route('pdf_canvas', ['course_id' => $lesson_details->course_id, 'lesson_id' => $lesson_details->id]);
            $direct_pdf = $src; // URL langsung ke file PDF
            $fullscreen_id = 'lesson-content-' . $lesson_details->id;
        @endphp

        <div class="position-relative d-inline-block w-100">
            <div id="{{ $fullscreen_id }}" class="w-100 border rounded overflow-hidden bg-light">
                @if ($lesson_details->attachment_type == 'pdf')
                    <a href="{{ $direct_pdf }}" target="_blank" class="btn btn-sm position-absolute top-0 end-0 mt-2 me-2 shadow" style="z-index: 1050; color: white; background: #001151;" title="Buka PDF di Tab Baru (tekan F11 untuk full screen)">
                        <i class="bi bi-box-arrow-up-right"></i> Buka Full PDF
                    </a>
                    <iframe src="{{ $pdf_src }}#toolbar=1&navpanes=0&scrollbar=1&view=FitH"
                            class="w-100 border-0"
                            style="height: 80vh; min-height: 600px;"
                            allowfullscreen
                            allow="fullscreen">
                    </iframe>
                @elseif($lesson_details->attachment_type == 'txt')
                    <iframe src="{{ $src }}"
                            class="w-100 border-0"
                            style="height: 80vh; min-height: 600px;"
                            frameborder="0">
                    </iframe>
                @else
                    <div class="d-flex flex-column justify-content-center align-items-center"
                        style="height: 60vh; min-height: 300px;">

                        <div class="text-center mb-3">
                            <p class="mt-3 mb-1 fw-bold">
                                Dokumen tidak dapat ditampilkan secara langsung
                            </p>
                            <p class="text-muted small">
                                Silakan unduh file untuk melihat isi dokumen
                            </p>
                        </div>

                        <a href="{{ $src }}"
                        class="btn btn-primary"
                        target="_blank"
                        download>
                            <i class="fa fa-download me-1"></i>
                            Download Dokumen
                        </a>
                    </div>
                @endif 
            </div>
        </div>
    @elseif($lesson_details->lesson_type == 'quiz')
        <div class="course-video-area border-primary pb-5">
            @include('course_player.quiz.index')
        </div>
    @else
        <iframe class="embed-responsive-item" width="100%" src="{{ $lesson_details->lesson_src }}" allowfullscreen></iframe>
    @endif
@endif

<script>
    // Disable right-click on video
    document.getElementById('player').oncontextmenu = function() {
        return false; // Prevent right-click menu
    };
</script>

<script type="text/javascript">
    function reloadSidebar() {
        let courseId = '{{ $course_details->id }}';
        let lessonId = '{{ $lesson_details->id }}';

        let url = "{{ route('course.sidebar.reload', ['course_id' => '__COURSE__', 'lesson_id' => '__LESSON__']) }}";
        url = url.replace('__COURSE__', courseId)
                 .replace('__LESSON__', lessonId);

        $('#player_side_bar').load(url, function () {
            console.log('Sidebar updated');
        });
    }
</script>