@if (count($course->module) > 0)

<div>
    <div dir="ltr" class="flex flex-col gap-2 bg-transparent">
        <div data-state="active" role="tabpanel" tabindex="0" class="flex-1 outline-none pt-3">
            <div>
                <div class=" rounded-lg ">
                    {{--
                    <!-- Module 1 -->
                    <div class="border mb-2 border-slate-300 border-dashed text-[16px]  rounded-lg ">
                        <h3 class="flex course_syllabus_header hover:bg-slate-100 duration-300 rounded-lg bg-slate-50">
                            <button type="button"
                                class="group cursor-pointer flex flex-1 items-center justify-between gap-4 text-left px-5 py-5 text-[16px] f hover:no-underline rounded-none font-base font-semibold">
                                <div class="flex gap-2 items-center">

                                    <img src="{{ asset('assets/images/writing-book.png') }}" class="size-6" alt="">
                                    Module 1: Version Control System (VCS)
                                </div>
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" class="size-5 close_icons_syllabus ">
                                    <circle cx="12" cy="12" r="10">
                                    </circle>
                                    <path d="M8 12h8"></path>
                                    <path d="M12 8v8"></path>
                                </svg>
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" class=" hidden size-5 open_icons_syllabus">
                                    <circle cx="12" cy="12" r="10">
                                    </circle>
                                    <path d="M8 12h8"></path>
                                </svg>
                            </button>
                        </h3>
                        <div class="border-t course_syllabus_content  border-slate-300 hidden">
                            <!-- Video Lesson (available) -->
                            <div onclick="openVideoModal('https://www.youtube.com/embed/KAn1SIGQrME?si=0jF61gdhH5H-HDpw')"
                                class="flex items-center justify-between gap-3 px-5 py-3 text-sm rounded mt-2  hover:bg-slate-50cursor-pointer hover:bg-slate-50 cursor-pointer">
                                <div class="flex items-center gap-3">
                                    <img src="{{ asset('assets/icons/video-player.svg') }}" alt="" class="w-[22px]">
                                    <span class="flex-1 text-[15px]">Class 1:
                                        Introduction to
                                        Course and Career Path</span>
                                </div>
                                <div>
                                    <svg xmlns="http://www.w3.org/2000/svg" class="text-neutral-700" width="18"
                                        height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
                                        <circle cx="12" cy="12" r="3" />
                                    </svg>
                                </div>
                            </div>

                            <!-- Video Lesson (locked) -->
                            <div
                                class="flex items-center justify-between gap-3 px-5 py-3 text-sm rounded mt-2  hover:bg-slate-50">
                                <div class="flex items-center gap-3">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round"
                                        class="lucide lucide-circle-play w-5 h-5 text-neutral-600">
                                        <circle cx="12" cy="12" r="10"></circle>
                                        <polygon points="10 8 16 12 10 16 10 8">
                                        </polygon>
                                    </svg>
                                    <span class="flex-1 text-[15px]">Class 2:
                                        Advanced Concepts
                                        (Locked)</span>
                                </div>
                                <div>
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" class="lucide lucide-lock-keyhole w-4 h-4">
                                        <circle cx="12" cy="16" r="1"></circle>
                                        <rect x="3" y="10" width="18" height="12" rx="2"></rect>
                                        <path d="M7 10V7a5 5 0 0 1 10 0v3"></path>
                                    </svg>
                                </div>
                            </div>

                            <!-- Quiz Section -->
                            <div
                                class="flex items-center justify-between gap-3 px-5 py-3 text-sm rounded mt-2  hover:bg-slate-50 ">
                                <div class="flex items-center gap-3">
                                    <img src="{{ asset('assets/icons/quiz.svg') }}" alt="">
                                    <span class="flex-1 text-[15px]">Module 1 Quiz:
                                        Test Your
                                        Knowledge</span>
                                </div>
                                <div>
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" class="lucide lucide-lock-keyhole w-4 h-4">
                                        <circle cx="12" cy="16" r="1"></circle>
                                        <rect x="3" y="10" width="18" height="12" rx="2"></rect>
                                        <path d="M7 10V7a5 5 0 0 1 10 0v3"></path>
                                    </svg>
                                </div>
                            </div>

                            <!-- PDF Material -->
                            <div onclick="openPdfModal('module1_notes.pdf')"
                                class="flex items-center justify-between gap-3 px-5 py-3 text-sm rounded mt-2  hover:bg-slate-50">
                                <div class="flex items-center gap-3">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" class="lucide lucide-download w-4 h-4 text-neutral-600">
                                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4">
                                        </path>
                                        <polyline points="7 10 12 15 17 10">
                                        </polyline>
                                        <line x1="12" x2="12" y1="15" y2="3">
                                        </line>
                                    </svg>
                                    <span class="flex-1 text-[15px]">Module 1 Notes
                                        (PDF
                                        Download)</span>
                                </div>
                                <div>
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" class="lucide lucide-lock-keyhole w-4 h-4">
                                        <circle cx="12" cy="16" r="1"></circle>
                                        <rect x="3" y="10" width="18" height="12" rx="2"></rect>
                                        <path d="M7 10V7a5 5 0 0 1 10 0v3"></path>
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </div> --}}

                    @foreach ($course->module as $module)
                    <div class="border mb-2 border-slate-300 border-dashed text-[16px]  rounded-lg ">
                        <h3 class="flex course_syllabus_header hover:bg-slate-100 duration-300 rounded-lg bg-slate-50">
                            <button type="button"
                                class="group cursor-pointer flex flex-1 items-center justify-between gap-4 text-left px-5 py-5 text-[16px] f hover:no-underline rounded-none font-base font-semibold">
                                <div class="flex gap-2 items-center">

                                    <img src="{{ asset('assets/images/writing-book.png') }}" class="size-6" alt="">
                                    {{ $module->title }}
                                </div>
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" class="size-5 close_icons_syllabus ">
                                    <circle cx="12" cy="12" r="10">
                                    </circle>
                                    <path d="M8 12h8"></path>
                                    <path d="M12 8v8"></path>
                                </svg>
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" class=" hidden size-5 open_icons_syllabus">
                                    <circle cx="12" cy="12" r="10">
                                    </circle>
                                    <path d="M8 12h8"></path>
                                </svg>
                            </button>
                        </h3>
                        <div class="border-t course_syllabus_content  border-slate-300 hidden">
                            <!-- Video Lesson (available) -->


                            @foreach ($module->moduleContent as $module_content)
                            @if ($module_content->content_type == 'video')
                            @if ($module_content->is_free == 1)
                            <div onclick="openVideoModal('https://www.youtube.com/embed/{{ $module_content->content_url }}?si=0jF61gdhH5H-HDpw')"
                                class="flex items-center justify-between gap-3 px-5 py-3 text-sm rounded mt-2  hover:bg-slate-50cursor-pointer hover:bg-slate-50">
                                <div class="flex items-center gap-3">
                                    <img src="{{ asset('assets/icons/video-player.svg') }}" alt="" class="w-[22px]">
                                    <span class="flex-1 text-[15px]">{{ $module_content->title }}</span>
                                </div>
                                <div>
                                    <svg xmlns="http://www.w3.org/2000/svg" class="text-neutral-700" width="18"
                                        height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
                                        <circle cx="12" cy="12" r="3" />
                                    </svg>
                                </div>
                            </div>
                            @else
                            <!-- Video Lesson (locked) -->
                            <div
                                class="flex items-center justify-between gap-3 px-5 py-3 text-sm rounded mt-2  hover:bg-slate-50">
                                <div class="flex items-center gap-3">
                                    <img src="{{ asset('assets/icons/video-player.svg') }}" alt="" class="w-[22px]">
                                    <span class="flex-1 text-[15px]">{{ $module_content->title }}</span>
                                </div>
                                <div>
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" class="lucide lucide-lock-keyhole w-4 h-4">
                                        <circle cx="12" cy="16" r="1"></circle>
                                        <rect x="3" y="10" width="18" height="12" rx="2"></rect>
                                        <path d="M7 10V7a5 5 0 0 1 10 0v3"></path>
                                    </svg>
                                </div>
                            </div>
                            @endif
                            <!-- Quiz Section -->
                            @elseif ($module_content->content_type == 'quiz')
                            <div
                                class="flex items-center justify-between gap-3 px-5 py-3 text-sm rounded mt-2  hover:bg-slate-50 ">
                                <div class="flex items-center gap-3">
                                    <img src="{{ asset('assets/icons/quiz.png') }}" class="size-5" alt="">
                                    <span class="flex-1 text-[15px]">{{ $module_content->title }}</span>
                                </div>
                                <div>
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" class="lucide lucide-lock-keyhole w-4 h-4">
                                        <circle cx="12" cy="16" r="1"></circle>
                                        <rect x="3" y="10" width="18" height="12" rx="2"></rect>
                                        <path d="M7 10V7a5 5 0 0 1 10 0v3"></path>
                                    </svg>
                                </div>
                            </div>
                            @else
                            <!-- PDF Material -->
                            @if ($module_content->is_free == 1)
                            <a href="{{ $module_content->content_url }}" target="_blank"
                                class="flex items-center justify-between gap-3 px-5 py-3 text-sm rounded mt-2  hover:bg-slate-50">
                                <div class="flex items-center gap-3">
                                    @if ($module_content->content_type == 'pdf')
                                    <img src="{{ asset('assets/icons/pdf.png') }}" class="size-5" alt="">
                                    @else
                                    <img src="{{ asset('assets/icons/quiz.svg') }}" alt="">
                                    @endif

                                    <span class="flex-1 text-[15px]">{{ $module_content->title }}
                                    </span>
                                </div>
                                <div>
                                    <svg xmlns="http://www.w3.org/2000/svg" class="text-neutral-700" width="18"
                                        height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z">
                                        </path>
                                        <circle cx="12" cy="12" r="3"></circle>
                                    </svg>
                                </div>
                            </a>
                            @else
                            <div
                                class="flex items-center justify-between gap-3 px-5 py-3 text-sm rounded mt-2  hover:bg-slate-50">
                                <div class="flex items-center gap-3">
                                    @if ($module_content->content_type == 'pdf')
                                    <img src="{{ asset('assets/icons/pdf.png') }}" class="size-5" alt="">
                                    @else
                                    <img src="{{ asset('assets/icons/quiz.svg') }}" alt="">
                                    @endif
                                    <span class="flex-1 text-[15px]">{{ $module_content->title }}
                                    </span>
                                </div>
                                <div>
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" class="lucide lucide-lock-keyhole w-4 h-4">
                                        <circle cx="12" cy="16" r="1"></circle>
                                        <rect x="3" y="10" width="18" height="12" rx="2"></rect>
                                        <path d="M7 10V7a5 5 0 0 1 10 0v3"></path>
                                    </svg>
                                </div>
                            </div>
                            @endif
                            @endif
                            @endforeach

                        </div>
                    </div>
                    @endforeach



                </div>
            </div>
        </div>
    </div>
</div>

@endif