@extends('layouts.app')

@section('title', $course->title ?? $seoSetting->site_title ?? $websiteSetting->app_name)
@section('description', $course->short_description ?? $seoSetting->meta_description ?? 'Default description here')
@section('keywords', $course->category->name ?? $seoSetting->meta_keywords ?? 'Online course, learning, education')
@section('image', asset($course->thumbnail_url ?? $websiteSetting->logo))
@section('url', url()->current())



@push('css')
    <link rel="stylesheet" href="{{ asset('assets/css/sweetalert2.min.css') }}">
    <style>
        .rotate-180 {
            transform: rotate(0deg);
        }


        .accordion-content {
            transition: max-height 0.3s ease-in-out;
            overflow: hidden;
        }
    </style>
@endpush

@push('js')
    <script src="{{ asset('assets/js/sweetalert2.min.js') }}"></script>

    <script>
        $(document).ready(function() {
            $('.course_syllabus_header').on('click', function() {
                $(this).next('.course_syllabus_content').slideToggle();
                $(this).find('.close_icons_syllabus').toggleClass('hidden');
                $(this).find('.open_icons_syllabus').toggleClass('hidden');
            });
        })
    </script>


    <script>
        $(document).ready(function() {
            $('.accordion-header').on('click', function() {
                // Close all other accordion items first
                $(this).next('.accordion-content').addClass('pb-3');
                $('.accordion-content').not($(this).next()).slideUp();
                $('.accordion-arrow').not($(this).find('.accordion-arrow')).removeClass('rotate-180');

                // Toggle current item
                $(this).find('.accordion-arrow').toggleClass('rotate-180');
                $(this).next('.accordion-content').slideToggle();

            });
        });
    </script>





    <script>
        // Initialize with default video thumbnail
        document.addEventListener('DOMContentLoaded', function() {
            const videoThumbnail = document.getElementById('video-thumbnail');
            const videoFrame = document.getElementById('video-frame');

            // When main thumbnail is clicked
            videoThumbnail.addEventListener('click', function() {
                const currentVideoSrc = videoFrame.src;
                videoFrame.src = currentVideoSrc.includes('?') ?
                    currentVideoSrc + '&autoplay=1&mute=1' :
                    currentVideoSrc + '?autoplay=1&mute=1';

                this.classList.add('hidden');
                videoFrame.classList.remove('hidden');
            });
        });

        function showMedia(type, src, thumb) {
            const videoFrame = document.getElementById('video-frame');
            const videoThumbnail = document.getElementById('video-thumbnail');
            const mainDisplay = document.getElementById('main-display');

            // Reset all thumbnail borders
            document.querySelectorAll('[onclick^="showMedia"]').forEach(thumb => {
                thumb.classList.remove('border-blue-500');
                thumb.classList.add('border-gray-300');
            });

            // Highlight clicked thumbnail
            event.currentTarget.classList.remove('border-gray-300');
            event.currentTarget.classList.add('border-blue-500');

            if (type === 'video') {
                // Show video thumbnail
                videoFrame.src = `https://www.youtube.com/embed/${src}?rel=0`;
                videoThumbnail.querySelector('img').src = thumb;

                videoThumbnail.classList.remove('hidden');
                videoFrame.classList.add('hidden');
                mainDisplay.classList.add('hidden');
            } else if (type === 'image') {
                // Show image
                mainDisplay.src = src;
                mainDisplay.classList.remove('hidden');
                videoThumbnail.classList.add('hidden');
                videoFrame.classList.add('hidden');
            }
        }


        // Initialize first video as active
        document.querySelector('[onclick^="showMedia"]').click();
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const container = document.getElementById('section-nav');
            const leftArrow = document.querySelector('.scroll-arrow-left');
            const rightArrow = document.querySelector('.scroll-arrow-right');

            function updateArrows() {
                // Left arrow state
                if (container.scrollLeft > 0) {
                    leftArrow.classList.remove('opacity-30', 'pointer-events-none');
                    leftArrow.classList.add('opacity-100');
                } else {
                    leftArrow.classList.remove('opacity-100');
                    leftArrow.classList.add('opacity-30', 'pointer-events-none');
                }

                // Right arrow state
                if (container.scrollLeft < container.scrollWidth - container.clientWidth - 1) {
                    rightArrow.classList.remove('opacity-30', 'pointer-events-none');
                    rightArrow.classList.add('opacity-100');
                } else {
                    rightArrow.classList.remove('opacity-100');
                    rightArrow.classList.add('opacity-30', 'pointer-events-none');
                }
            }

            // Initial check
            updateArrows();

            // Check on scroll
            container.addEventListener('scroll', updateArrows);

            // Arrow click handlers
            leftArrow.addEventListener('click', () => {
                container.scrollBy({
                    left: -200,
                    behavior: 'smooth'
                });
            });

            rightArrow.addEventListener('click', () => {
                container.scrollBy({
                    left: 200,
                    behavior: 'smooth'
                });
            });

            // Also check on window resize
            window.addEventListener('resize', updateArrows);
        });
    </script>


    <script>
        $(document).ready(function() {
            const $navLinks = $('.section-link');
            const $sections = $navLinks.map(function() {
                const href = $(this).attr('href');
                return $(href); // Get corresponding sections
            }).get();

            // Throttle scroll events (better performance)
            let isScrolling;


            function updateActiveLink() {
                const scrollPosition = $(window).scrollTop() + ($(window).height() /
                    3); // Adjust offset (1/3 of viewport)
                let activeSection = null;

                // Check sections from BOTTOM to TOP (reverse order)
                for (let i = $sections.length - 1; i >= 0; i--) {
                    const $section = $sections[i];
                    if (!$section.length) continue;

                    const sectionTop = $section.offset().top;
                    const sectionBottom = sectionTop + $section.outerHeight();

                    if (scrollPosition >= sectionTop && scrollPosition <= sectionBottom) {
                        activeSection = $section.attr('id');
                        break; // Stop at the first matching section (bottom-up)
                    }
                }

                // Update active link
                $navLinks.each(function() {
                    const $link = $(this);
                    const linkHref = $link.attr('href').substring(1); // Remove '#'

                    if (linkHref === activeSection) {
                        $link.addClass('bg-dark text-white')
                            .removeClass('text-gray-600 hover:bg-gray-200');
                    } else {
                        $link.removeClass('bg-dark text-white')
                            .addClass('text-gray-600 hover:bg-gray-200');
                    }
                });
            }

            // Initial check & scroll listener
            $(window).on('scroll', updateActiveLink);


        });
    </script>
@endpush
@section('content')
    <div class=" ">
        <div class="rounded-md px-2 md:px-4 py-6 md:py-14 relative ">
            <div class="absolute inset-0 z-0 pointer-events-none h-[800px] md:h-[490px] bg-center opacity-30 md:opacity-50 bg-auto"
                style="background-image:url({{ asset('assets/images/bg_image.png') }})">
            </div>


            <div class="container">

                <div class="flex flex-col-reverse md:flex-row gap-4 lg:gap-8 items-start relative z-[3] w-full">
                    <div class="md:w-[430px] w-full order-1 md:order-2 md:sticky md:top-[94px] md:h-fit">
                        <section class="w-full  md:bg-white">
                            <div class="md:sticky md:top-[112px]">
                                <div class="md:border border-slate-300 rounded-sm">

                                    @include('page.course.include.details-medal')

                                    <p class="hidden justify-between text-sm text-center text-gray-400 md:flex p-3">
                                        <span>{{ __('messages.more_info_course') }}</span>
                                        <span
                                            class="flex items-center justify-center ml-2 underline cursor-pointer text-primary-dark">
                                            <svg stroke="currentColor" fill="currentColor" stroke-width="0"
                                                viewBox="0 0 512 512" height="1em" width="1em">
                                                <path
                                                    d="M497.39 361.8l-112-48a24 24 0 0 0-28 6.9l-49.6 60.6A370.66 370.66 0 0 1 130.6 204.11l60.6-49.6a23.94 23.94 0 0 0 6.9-28l-48-112A24.16 24.16 0 0 0 122.6.61l-104 24A24 24 0 0 0 0 48c0 256.5 207.9 464 464 464a24 24 0 0 0 23.4-18.6l24-104a24.29 24.29 0 0 0-14.01-27.6z">
                                                </path>
                                            </svg>
                                            <span class="ml-1">{{ __('menu.call_now') }} </span>
                                        </span>
                                    </p>
                                </div>
                            </div>
                        </section>
                    </div>
                    <div class="flex-1 relative min-w-0 md:order-1  w-full ">

                        <div class="flex flex-col justify-center h-full px-2">
                            <h1 class="text-dark mb-2 text-[28px] font-bold lg:text-4xl">
                                {{ $course->title }}
                            </h1>
                            <div class="mb-2"></div>
                            <div class="text-gray-700 overflow-hidden" style="height:auto; mask-image:none;">
                                <p>
                                    {{ $course->short_description }}
                                </p>
                            </div>
                            <span class="md:hidden grid grid-cols-2 gap-2 sm:gap-4 leading-none mt-3">
                                <span
                                    class="flex items-center gap-2 bg-white border border-dashed border-slate-300 rounded-lg px-3 py-2">
                                    <img src="{{ asset('assets/icons/profileIllusIcon.svg') }}" alt=""
                                        class="w-6">
                                    <span class="space-y-1">
                                        <p class="text-text_dim text-[15px]">{{ __('text.enrolled') }}</p>

                                        <p class="text-dark text-sm enroll-count">{{ $course->total_enroll }}</p>
                                    </span>
                                </span>
                                <span
                                    class=" flex items-center gap-2 bg-white border border-dashed border-slate-300 rounded-lg px-3 py-2">
                                    <img src="{{ asset('assets/icons/calenderIcon.svg') }}" alt="" class="w-6">
                                    <span class="space-y-1">
                                        <p class="text-text_dim text-[15px]">{{ __('text.class') }}</p>
                                        <p class="text-dark text-sm">{{ $course->total_class }}</p>
                                    </span>
                                </span>
                            </span>
                            @if ($totalCountFeature > 0)
                                <div
                                    class="course-features rounded-[10px] border border-[#d1e9ff] bg-gradient-to-b from-[#fdfeff] to-[#f1f9ff]   mt-6 p-4 lg:p-6  bg-card">
                                    <h2 class="course-features__heading text-neutral-800 text-[20px] font-semibold mb-4">
                                        Included in this course
                                    </h2>

                                    <div class="course-features__grid flex flex-col md:flex-row gap-4 md:gap-8 lg:gap-15">
                                        <!-- First Column -->
                                        <div class="course-features__column flex-1">
                                            @foreach ($leftFeatures as $leftFeature)
                                                <div class="course-features__item flex items-center gap-3 mb-3">
                                                    <span
                                                        class="course-features__bullet w-[10px] h-[10px] rounded-full bg-[#82CEE6] flex-shrink-0"></span>
                                                    <p
                                                        class="course-features__text text-neutral-800 text-sm md:text-base font-semibold font-siliguri">
                                                        {{ $leftFeature->feature_text }}
                                                    </p>
                                                </div>
                                            @endforeach
                                        </div>

                                        <!-- Second Column -->

                                        <div class="course-features__column flex-1">
                                            @foreach ($rightFeatures as $rightFeature)
                                                <div class="course-features__item flex items-center gap-3 mb-3">
                                                    <span
                                                        class="course-features__bullet w-[10px] h-[10px] rounded-full bg-[#82CEE6] flex-shrink-0"></span>
                                                    <p
                                                        class="course-features__text text-neutral-800 text-sm md:text-base font-semibold font-siliguri">
                                                        {{ $rightFeature->feature_text }}
                                                    </p>
                                                </div>
                                            @endforeach

                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>
                        <div class="mt-3 ">
                            <div class="sticky top-14 md:top-16 z-10 bg-white shadow rounded-md">
                                <div class="">
                                    <!-- Left arrow (hidden by default, shown when needed via JS) -->
                                    <!-- Left Arrow -->
                                    <button
                                        class="absolute left-0 top-1/2 -translate-y-1/2 rounded-full cursor-pointer flex items-center justify-center bg-gray-300 w-8 h-8 text-gray-700 hover:bg-gray-400 duration-500 z-20 opacity-0 transition-opacity pointer-events-none scroll-arrow-left">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20"
                                            fill="currentColor">
                                            <path fill-rule="evenodd"
                                                d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
                                                clip-rule="evenodd"></path>
                                        </svg>
                                    </button>

                                    <!-- Right Arrow -->
                                    <button
                                        class="absolute right-0 top-1/2 -translate-y-1/2 rounded-full cursor-pointer flex items-center justify-center bg-gray-300 w-8 h-8 text-gray-700 hover:bg-gray-400 z-20 transition-opacity duration-200 scroll-arrow-right opacity-0 pointer-events-none">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20"
                                            fill="currentColor">
                                            <path fill-rule="evenodd"
                                                d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                                                clip-rule="evenodd"></path>
                                        </svg>
                                    </button>


                                    <!-- Tab container -->
                                    <div class="relative w-full">



                                        <!-- Tab container -->
                                        <div class="overflow-x-auto no-scrollbar px-10" id="section-nav">
                                            <div class="min-w-max">
                                                <div class="flex py-3 space-x-2 flex-nowrap justify-center">
                                                    <div class="bg-gray-100 p-1 rounded-full inline-flex">

                                                        <a href="#course_details"
                                                            class="px-6 py-2 text-gray-600 hover:bg-gray-200
 rounded-full font-medium text-sm transition-all duration-200 section-link">
                                                            {{ __('menu.course_details') }}
                                                        </a>
                                                        <a href="#instructors"
                                                            class="px-6 py-2 bg-dark text-white rounded-full font-medium text-sm  transition-all duration-200 section-link">
                                                            {{ __('menu.instructors') }}
                                                        </a>
                                                        <a href="#syllabus"
                                                            class="px-6 py-2 text-gray-600 hover:bg-gray-200
 rounded-full font-medium text-sm transition-all duration-200 section-link">
                                                            {{ __('menu.syllabus') }}
                                                        </a>

                                                        <a href="#payment"
                                                            class="px-6 py-2 text-gray-600 hover:bg-gray-200
 rounded-full font-medium text-sm transition-all duration-200 section-link">
                                                            {{ __('menu.payment') }}
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Right scroll arrow -->

                                    </div>

                                    <style>
                                        .no-scrollbar {
                                            scrollbar-width: none;
                                        }

                                        .no-scrollbar::-webkit-scrollbar {
                                            display: none;
                                        }
                                    </style>

                                </div>

                            </div>

                            <div class="py-b pt-2 bg-gray-50">

                                <div class="bg-white rounded-xl shadow-sm p-4 md:p-8 box-border py-5">

                                    <div id="course_details" class="">
                                        @include('page.course.include.course_details')

                                    </div>
                                    <div id="instructors" class="mt-12 mb-6">


                                        <h2 class="text-xl md:text-2xl font-bold text-gray-700 mb-6">
                                            {{ __('menu.course_instructor') }}</h2>

                                        @include('page.course.include.instructors')

                                        <div class="mt-8 text-center">
                                            <a href="{{ route('instructor.index') }}"
                                                class="px-6 py-2 bg-primary/10 text-primary rounded font-medium hover:bg-primary/20  transition-colors duration-200">
                                                View All Instructors
                                            </a>
                                        </div>
                                    </div>

                                    <div id="syllabus" class="bg-white rounded-xl shadow-sm p-4 md:p-8 box-border py-5">
                                        <h5 class="text-xl md:text-2xl font-bold text-gray-700 mb-4">
                                            {{ __('menu.course_content') }}</h5>

                                        @include('page.course.include.syllabus')
                                    </div>

                                    <div  class="bg-white rounded-xl shadow-sm p-4 md:p-8 box-border py-5 mt-4">
                                        <div class=" mb-6">
                                            <h2 class="text-xl md:text-2xl font-bold text-gray-700 mb-6">
                                                {{ __('menu.general_question') }}
                                            </h2>
                                        </div>
                                        <div class="rounded-lg py-2 border border-slate-300 md:px-5 px-4 bg-[#fcfcfc] ">
                                            <!-- Course Overview -->
                                            <div
                                                class="accordion-item mb-0 border-b border-dashed border-slate-300 last:border-none">
                                                <div
                                                    class="accordion-header py-3 cursor-pointer flex justify-between items-center">
                                                    <div class="text-gray-800 font-medium md:text-base mx-lg:text-sm">
                                                        <strong>আমার রেজিস্ট্রেশন কোড কোথায় পাবো?</strong>
                                                    </div>
                                                    <button
                                                        class="p-2 cursor-pointer rounded-full hover:bg-gray-200 transition-colors duration-200 focus:outline-none">
                                                        <svg class="accordion-arrow w-4.5 h-4.5 text-gray-500 transform transition-transform duration-200"
                                                            fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                                stroke-width="2" d="M19 9l-7 7-7-7" />
                                                        </svg>
                                                    </button>
                                                </div>
                                                <div
                                                    class="accordion-content transition-all  px-0 text-gray-500 overflow-hidden duration-100 ease-in-out pb-3">
                                                    কোর্স ইনরোল করার পর কোর্সের ছবির উপরেই লেখা থাকবে "আপনার রেজিস্ট্রেশন
                                                    কোড"। ওটাই আপনার রেজিস্ট্রেশন
                                                    কোড
                                                    এবং ফেসবুক প্রাইভেট গ্রুপে জয়েন রিকুয়েস্ট পাঠানোর সময় প্রথম প্রশ্নের
                                                    উত্তরে এই কোডটি লিখবেন।
                                                </div>
                                            </div>

                                            <!-- Who is this course for? -->
                                            <div
                                                class="accordion-item mb-0 border-b border-dashed border-slate-300 last:border-none">
                                                <div
                                                    class="accordion-header py-3 cursor-pointer flex justify-between items-center">
                                                    <div class="text-gray-800 font-medium md:text-base mx-lg:text-sm">
                                                        <strong>ফেইসবুক গ্রুপে কীভাবে যুক্ত হবো?</strong>
                                                    </div>
                                                    <button
                                                        class="p-2 cursor-pointer rounded-full hover:bg-gray-200 transition-colors duration-200 focus:outline-none">
                                                        <svg class="accordion-arrow w-4.5 h-4.5 text-gray-500 transform transition-transform duration-200"
                                                            fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                                stroke-width="2" d="M19 9l-7 7-7-7" />
                                                        </svg>
                                                    </button>
                                                </div>
                                                <div
                                                    class="accordion-content hidden px-0   text-gray-500 overflow-hidden  transition-all duration-100 ease-in-out">
                                                    -কোর্স কেনার পরে "Join Group" লেখা অপশন দেখতে পাবেন। Join Group-এ Click
                                                    করলে Facebook private group এর
                                                    লিঙ্কটি ওপেন হবে।
                                                    -লিঙ্কটিতে Click করে গ্রুপে Join Request পাঠাবেন।
                                                    -গ্রুপে জয়েন রিকুয়েস্ট দিলে সেখানে ৩টি প্রশ্নের উত্তর জানতে চাওয়া
                                                    হবে। উত্তরগুলো সঠিকভাবে সাবমিট
                                                    করুন।
                                                    উত্তর সাবমিট করার পর আমাদের টিম আপনার উত্তর যাচাই করবে এবং উত্তর সঠিক
                                                    হলে আপনাকে দ্রুততার সাথে এপ্রুভ
                                                    করা
                                                    হবে।
                                                </div>
                                            </div>

                                            <div
                                                class="accordion-item mb-0 border-b border-dashed border-slate-300 last:border-none">
                                                <div
                                                    class="accordion-header py-3 cursor-pointer flex justify-between items-center">
                                                    <div class="text-gray-800 font-medium md:text-base mx-lg:text-sm">
                                                        <strong>সকল ক্লাস কি রেকর্ড থাকবে?</strong>
                                                    </div>
                                                    <button
                                                        class="p-2 cursor-pointer rounded-full hover:bg-gray-200 transition-colors duration-200 focus:outline-none">
                                                        <svg class="accordion-arrow w-4.5 h-4.5 text-gray-500 transform transition-transform duration-200"
                                                            fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                                stroke-width="2" d="M19 9l-7 7-7-7" />
                                                        </svg>
                                                    </button>
                                                </div>
                                                <div
                                                    class="accordion-content hidden px-0   text-gray-500 transition-all duration-100 ease-in-out">
                                                    "হ্যাঁ! সকল ক্লাস Playlist আকারে আমাদের ওয়েবসাইটে রেকর্ড থাকবে, একদম
                                                    পরীক্ষা পর্যন্ত। তাই যেকোন সময়
                                                    ক্লাসগুলো দেখা যাবে।
                                                </div>
                                            </div>


                                            <div
                                                class="accordion-item mb-0 border-b border-dashed border-slate-300 last:border-none">
                                                <div
                                                    class="accordion-header py-3 cursor-pointer flex justify-between items-center">
                                                    <div class=" font-medium text-gray-800 md:text-base mx-lg:text-sm">
                                                        <strong>কোর্সের ভর্তি বাতিল করা কি সম্ভব?</strong>
                                                    </div>
                                                    <button
                                                        class="p-2 cursor-pointer rounded-full hover:bg-gray-200 transition-colors duration-200 focus:outline-none">
                                                        <svg class="accordion-arrow w-4.5 h-4.5 text-gray-500 transform transition-transform duration-200"
                                                            fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                                stroke-width="2" d="M19 9l-7 7-7-7" />
                                                        </svg>
                                                    </button>
                                                </div>
                                                <div
                                                    class="accordion-content hidden px-0  text-gray-500 transition-all duration-100 ease-in-out">
                                                    দুঃখিত! একবার কোন কোর্স কেনা হয়ে গেলে সেই কোর্সটিতে আর ভর্তি বাতিল করতে
                                                    পারবেন না।
                                                </div>
                                            </div>

                                            <div
                                                class="accordion-item mb-0 border-b border-dashed border-slate-300 last:border-none">
                                                <div
                                                    class="accordion-header py-3 cursor-pointer flex justify-between items-center">
                                                    <div class=" font-medium text-gray-800 md:text-base mx-lg:text-sm">
                                                        <strong>কোর্সটি কীভাবে কিনবো?</strong>
                                                    </div>
                                                    <button
                                                        class="p-2 cursor-pointer rounded-full hover:bg-gray-200 transition-colors duration-200 focus:outline-none">
                                                        <svg class="accordion-arrow w-4.5 h-4.5 text-gray-500 transform transition-transform duration-200"
                                                            fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                                stroke-width="2" d="M19 9l-7 7-7-7" />
                                                        </svg>
                                                    </button>
                                                </div>
                                                <div
                                                    class="accordion-content hidden px-0  text-gray-500 transition-all duration-100 ease-in-out">
                                                    - 'কোর্সটি শুরু করুন' বাটনে ক্লিক করুন
                                                    - আপনাকে লগ-ইন পেজে নিয়ে যাবে, যদি আপনার ইতিমধ্যে একাউন্ট খোলা থাকে
                                                    তাহলে নাম্বার/ইমেইল এবং
                                                    পাসওয়ার্ড
                                                    দিয়ে লগ-ইন করুন। আর যদি একাউন্ট না থাকে তাহলে নতুন একাউন্ট তৈরি করুন,
                                                    সেক্ষেত্রে আপনি আমাদের
                                                    ওয়াবসাইটের
                                                    ইন্সট্রাকশন ফলো করুন।
                                                    - আবার কোর্সটি শুরু করুন বাটনে ক্লিক করুন
                                                    -আপনাকে বিকাশের পেমেন্ট গেটওয়েতে নিয়ে যাবে। সেখানে আপনার বিকাশ নম্বর ও
                                                    পাসওয়ার্ড দিয়ে পেমেন্ট
                                                    করুন।
                                                    - পেমেন্ট সম্পন্ন করার পর Continue' বাটনে ক্লিক করলে আপনি কোর্সটি দেখতে
                                                    পারবেন। ( পরবর্তীতে আপনার কেনা
                                                    কোর্সটি আপনার প্রোফাইলের 'আমার কোর্সসমূহ' সেকশনে দেখতে পাবেন)
                                                    -Join Group অপশনে ক্লিক করে ফেসবুক প্রাইভেট গ্রুপে যুক্ত হয়ে নিন।
                                                </div>
                                            </div>

                                        </div>
                                    </div>

                                    <div id="payment">
                                        @include('page.course.include.how_to_pay')

                                    </div>



                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>
        </div>

    </div>


    <script>
        new Swiper('.swiper', {
            loop: true,
            autoplay: {
                delay: 5000,
                disableOnInteraction: false,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });
    </script>



    <div id="videoModal" class="hidden fixed inset-0 z-[1000] bg-black/90 flex items-center justify-center p-4">
        <div class="relative w-full max-w-4xl bg-white">

            <button onclick="closeVideoModal()"
                class=" absolute -top-10 right-0 text-white cursor-pointer text-4xl hover:text-gray-300 transition-colors">
                &times;
            </button>

            <iframe id="youtubeVideo" class="w-full aspect-video" src="" frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen></iframe>
        </div>
    </div>

    <script>
        function openVideoModal(source) {
            const modal = document.getElementById('videoModal');
            const iframe = document.getElementById('youtubeVideo');

            iframe.src = source;

            modal.style.display = 'flex';
            document.body.style.overflow = 'hidden';
        }

        function closeVideoModal() {
            const modal = document.getElementById('videoModal');
            const iframe = document.getElementById('youtubeVideo');

            iframe.src = '';
            modal.style.display = 'none';
            document.body.style.overflow = 'auto'; // Re-enable scrolling
        }
    </script>
@endsection