@extends('layoutstudent.layouts')
@section('title', 'All Course')

@section('content')
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<!-- Font Awesome CDN -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
<!-- <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Thai&display=swap" rel="stylesheet"> -->
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Kanit:wght@500&display=swap" rel="stylesheet">
<!-- Google Fonts: Poppins -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Prompt&display=swap" rel="stylesheet">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />
<style>
    .ranking-badge {
        width: 60px;
        height: auto;
        z-index: 10;
    }

    .course-box {
        min-height: 400px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #E8E8E8 !important;
    }

    .p-unset {
        padding: unset;
    }

    .ranking-badge {
        width: 60px;
        height: auto;
        z-index: 10;
    }

    .course-box {
        min-height: 400px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #E8E8E8 !important;
    }

    .custom-link-style {
        font-family: 'IBM Plex Sans Thai', sans-serif;
        font-weight: 400;
        line-height: 24px;
        letter-spacing: 0;
        text-decoration: underline;
        text-decoration-style: solid;
        text-decoration-offset: 0;
        text-decoration-thickness: 1px;
    }

    .text-gray {
        color: #3A3A3A;
    }

    .text-gray a,
    .text-gray i {
        color: #3A3A3A;
    }

        .fs-8 { font-size: 8px; }
        .fs-12 { font-size: 12px; }
        .fs-14 { font-size: 14px; }
        .fs-16 { font-size: 16px; }
        .fs-18 { font-size: 18px; }
        .fs-20 { font-size: 20px; }
        .fs-22 { font-size: 22px; }
        .fs-24 { font-size: 24px; }
        .fs-26 { font-size: 26px; }
        .fs-28 { font-size: 28px; }
        .fs-30 { font-size: 30px; }
        .fs-32 { font-size: 32px; }
        .fs-34 { font-size: 34px; }
        .fs-36 { font-size: 36px; }
        .fs-38 { font-size: 38px; }
        .fs-40 { font-size: 40px; }
        .fs-48 { font-size: 48px; }

    .kanit-400 {
        font-family: 'Kanit',"Prompt", sans-serif;
        font-weight: 400;
        line-height: 24px;
        letter-spacing: 0;
    }

    .kanit-500 {
        font-family: 'Kanit',"Prompt", sans-serif;
        font-weight: 500;
        line-height: 24px;
        letter-spacing: 0;
    }

    .poppins-700 {
        font-family: 'Poppins',"Prompt", sans-serif;
        font-weight: 700;
        line-height: 100%;
        letter-spacing: 0;
    }

    .poppins-600 {
        font-family: 'Poppins',"Prompt", sans-serif;
        font-weight: 600;
        line-height: 100%;
        letter-spacing: 0;
    }

    .poppins-500 {
        font-family: 'Poppins',"Prompt", sans-serif;
        font-weight: 500;
        line-height: 100%;
        letter-spacing: 0;
    }

    .poppins-400 {
        font-family: 'Poppins',"Prompt", sans-serif;
        font-weight: 400;
        line-height: 100%;
        letter-spacing: 0;
    }

    .vertical-flex {
        display: flex;
        flex-direction: column;
    }

    .icon-box {
        width: 50px;
        height: 50px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        border-radius: 50%;
        background-color: #f8f9fa;
        transition: background-color 0.3s;

        i {
            font-size: 30px;
            transition: color 0.3s;
        }

        &:hover {
            background-color: #ffc107;

            i {
                color: #f8f9fa;
            }
        }
    }

    .conteainer-w {
        max-width: 1296px;
    }

    .recommendImg {
        min-height: 400px;
    }

    @media (min-width: 992px) {

        .pl-lg-5-25rem {
            padding-left: 5.25rem !important;
        }

        .recommendImg {
            min-height: 700px;
        }
    }

    @media (min-width: 1540px) {
        .conteainer-w {
            max-width: 1700px;
        }
    }

    .swiper-container-wrapper {
        position: relative;
        width: 100%;
        margin-left: 0;
        /* ชิดซ้าย */
    }

    .swiper-button-prev,
    .swiper-button-next {
        color: #000;
        background-color: #fff;
        border-radius: 50%;
        width: 36px;
        height: 36px;
        top: 70%;
        transform: translateY(-50%);
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    }

    .swiper-button-prev {
        left: -10px;
    }

    .swiper-button-next {
        right: 30%;
    }

    .bg-brown {
        background-color: #7A4F2C;
        color: white;
        padding: 5px 12px;
        border-radius: 50px;
    }
</style>
</head>

<body>
    <div class="container"
        style="max-width:100%; padding-right: unset; padding-left: unset; background-color: #F4FFFF;">
        <div class="row g-0">
            <!-- Left: Image with text -->
            <div class="col-md-7 position-relative" style="background: #fff;">
                <img src="https://placehold.co/1170x815" class="img-fluid w-100 h-100" alt="Course Image"
                    style="object-fit: cover;">
            </div>

            <!-- Right: Course details -->
            <div class="col-md-5 d-flex flex-column justify-content-between p-5 bg-white">
                <div class="my-5">
                    <h4 class="poppins-700 fs-48 fw-semibold" style="color: #016FAB">Healthy Diet Food</h4>
                    <p class="poppins-500 fs-24 fw-medium text-dark mb-4">Business</p>
                    <p class="poppins-400 fs-24 text-muted mb-4" style="line-height: 36px;">Lorem ipsum dolor sit amet
                        consectetur. A amet pretium
                        lectus tincidunt lorem. Nam dignissim</p>

                    <div class="d-flex gap-4 mb-3" id="courseInfoBox">
                        <div class="poppins-400 fs-24"><i
                                class="bi bi-file-earmark-text me-1 poppins-400 fs-24 "></i> 4 Lessons</div>
                        <div class="poppins-400 fs-24">
                            <i class="bi bi-clock me-1 poppins-400 fs-24 "></i>4 h</div>
                    </div>
                </div>

                <div>
                    <div class="d-flex justify-content-between align-items-center mb-3 flex-column gap-5">
                        <span class="poppins-600 fs-40 text-end w-100" style="color: #016FAB">200.00 บาท</span>
                        <a id="buyCourseBtn" href="#" class="btn poppins-500 fs-32 px-5 py-3" style="background-color: #1CA3EE; color: white;">
                            Buy this Courses
                        </a>
                        <div class="text-center poppins-400 fs-28">
                            <i class="bi bi-cart3 me-1 fs-28 me-1 poppins-400 fs-28 "></i> ใส่รถเข็น
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <br />
        <br />
        <div class="p-5 mx-auto bg-white rounded shadow-sm" style="max-width: 90%;">
            <br />
            <br />
            <div class="d-flex align-items-center mb-5" style="height: 80px;">
                <div
                    style="width: 5px; height: 100%; background-color: #016FAB; margin-right: 12px; border-radius: 2px;">
                </div>
                <div class="poppins-600 fs-30" style="color: #016FAB">ผู้สอน</div>
            </div>
            <div class="d-flex align-items-center mb-5">
                <img src="https://placehold.co/113x113" class="rounded-circle me-3" width="100" height="100" />
                <div>
                    <div class="poppins-600 fs-30" style="color: #595959">Dr.Bill</div>
                </div>
            </div>

            <!-- รายละเอียดหลักสูตร -->
            <div class="mb-5">
                <div class="d-flex align-items-center  mb-5" style="height: 80px;">
                    <div
                        style="width: 5px; height: 100%; background-color: #016FAB; margin-right: 12px; border-radius: 2px;">
                    </div>
                    <div class="poppins-600 fs-30" style="color: #016FAB">รายละเอียดหลักสูตร</div>
                </div>
                <p class="text-secondary mb-0 poppins-400 fs-28" style="line-height: 48px;">
                    Lorem ipsum dolor sit amet consectetur. Egestas tortor dolor consectetur tristique bibendum viverra
                    elit. Vel vitae consectetur integer quis sapien ipsum elit proin dui. Tempor quis nullam integer
                    vitae viverra a. Sagittisero
                    sestuctus aenean bibendum nunc id dolor. Feugiat gravida velit et tincidunt amet vitae duis
                    condimentum. Vitae phasellus ornare nunc eu ultrices eget adipiscing. Sem ermentum viverra
                    pellentesque at consectetur laoreet. Bibendum vivamus justo maecenas ut dui at sit. Rhoncus vitae
                    sollicitudin id malesuada diam cras pellentesque turpis. Faucibus potenti mi etiam ultrices
                    scelerisque
                </p>
            </div>

            <!-- เนื้อหาในคอร์ส -->
            <div class="d-flex align-items-center mb-5" style="height: 80px;">
                <div
                    style="width: 5px; height: 100%; background-color: #016FAB; margin-right: 12px; border-radius: 2px;">
                </div>
                <div class=" poppins-600 fs-30" style="color: #016FAB">เนื้อหาในคอร์ส</div>
            </div>

            @php
            $episodes = [
            [
            'id' => 'ep1',
            'title' => 'Ep.1',
            'description' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            'duration' => '1 h',
            'image' => 'https://placehold.co/390x240',
            'locked' => true,
            'detailedContent' => 'เนื้อหาเพิ่มเติมสำหรับ Ep.1 จะปรากฏที่นี่เมื่อมีการปลดล็อค'
            ],
            [
            'id' => 'ep2',
            'title' => 'Ep.2',
            'description' => 'เรียนรู้การจัดองค์ประกอบเบื้องต้นของดีไซน์.',
            'duration' => '1 h',
            'image' => 'https://placehold.co/390x240',
            'locked' => false,
            'detailedContent' => 'ยินดีต้อนรับสู่ Ep.2! นี่คือเนื้อหาที่ละเอียดสำหรับบทเรียนนี้.'
            ],
            [
            'id' => 'ep3',
            'title' => 'Ep.3',
            'description' => 'เนื้อหาจำลองสำหรับ Ep.3.',
            'duration' => '1 h',
            'image' => 'https://placehold.co/390x240',
            'locked' => false,
            'detailedContent' => 'มาเรียนรู้เพิ่มเติมใน Ep.3 กันเถอะ!'
            ],
            [
            'id' => 'ep4',
            'title' => 'Ep.4',
            'description' => 'เนื้อหาจำลองสำหรับ Ep.4.',
            'duration' => '1 h',
            'image' => 'https://placehold.co/390x240',
            'locked' => false,
            'detailedContent' => 'Ep.4 มีเนื้อหาที่น่าสนใจรอคุณอยู่.'
            ]
            ];
            @endphp
            <div id="courseContent">
                @foreach ($episodes as $episode)
                <div class="border-top py-2">
                    {{-- ปุ่ม toggle ไม่ซ้อน toggle ลูก --}}
                    <button type="button"
                        class="d-flex w-100 justify-content-between align-items-center px-2 py-2 border-0 bg-transparent"
                        data-bs-toggle="collapse" data-bs-target="#{{ $episode['id'] }}Content" aria-expanded="false"
                        aria-controls="{{ $episode['id'] }}Content" style="cursor: pointer;">
                        <div class="kanit-400 fs-32" style="color: #016FAB">{{ $episode['title'] }}</div>
                        <div class="d-flex align-items-center gap-2 " style="color: #016FAB">
                            <i class="bi bi-chevron-down" id="{{ $episode['id'] }}Icon"
                                style="pointer-events: none;"></i>
                        </div>
                    </button>

                    <div class="collapse mt-2" id="{{ $episode['id'] }}Content">
                        <div class="d-flex flex-wrap justify-content-between align-items-start p-3 pt-2 ps-4">
                            <img src="{{ $episode['image'] }}" alt="{{ $episode['title'] }}" width="390" height="240"
                                class="rounded-2 me-3 mb-2" />
                            <div class="flex-grow-1">
                                <div class="d-flex justify-content-between align-items-start px-5">
                                    <div>
                                        <div class="kanit-400 fs-32 mb-4" style="color: #016FAB">{{ $episode['title'] }}</div>
                                        <p class="poppins-400 fs-16" style="color: #737791">{{ $episode['description'] }}</p>
                                    </div>
                                    <div class="text-end " style="color: #016FAB">
                                        <i class="bi bi-clock me-1"></i>{{ $episode['duration'] }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>




            @php
            $reviews = [
            [
            'name' => 'Nutra Chuensai',
            'date' => '26/03/2025 10:00',
            'rating' => 5,
            'comment' => 'คอร์สดีมีคุณภาพค่ะ',
            'avatar' => 'https://placehold.co/95x95',
            ],
            [
            'name' => 'Ploy Ploy',
            'date' => '20/03/2025 09:30',
            'rating' => 5,
            'comment' => 'เข้าใจง่าย มีตัวอย่างเยอะค่ะ',
            'avatar' => 'https://placehold.co/95x95',
            ],
            [
            'name' => 'Tee Tee',
            'date' => '18/03/2025 11:15',
            'rating' => 5,
            'comment' => 'สอนดีมาก ประทับใจครับ',
            'avatar' => 'https://placehold.co/95x95',
            ],
            [
            'name' => 'Nok Nok',
            'date' => '15/03/2025 14:00',
            'rating' => 2,
            'comment' => 'ได้ความรู้เยอะ และคุ้มค่าเวลา',
            'avatar' => 'https://placehold.co/95x95',
            ],
            ];
            @endphp
            <div class="w-100 mt-5">
                <div class="d-flex align-items-center mb-5" style="height: 80px;">
                    <div
                        style="width: 5px; height: 100%; background-color: #016FAB; margin-right: 12px; border-radius: 2px;">
                    </div>
                    <div class="poppins-600 fs-30" style="color: #016FAB">รีวิวผู้เรียน</div>
                </div>
                <div class="d-flex align-items-start mb-3">
                    <div class="me-3 text-success fw-bold fs-5">5.0 <span class="text-warning">★★★★★</span></div>
                    <small class="text-secondary mt-1">({{ count($reviews) }} คนรีวิว)</small>
                </div>

                <!-- Swiper -->
                <div class="swiper-container-wrapper" style="position: relative; width: 60%; ">
                    <div class="swiper mySwiper align-items-start" style="width: 60%; margin-left: 2rem;">
                        <div class="swiper-wrapper">
                            @foreach ($reviews as $review)
                            <div class="swiper-slide">
                                <div class="d-flex mt-3">
                                    <img src="{{ $review['avatar'] }}" class="rounded-circle me-3" width="80"
                                        height="80" />
                                    <div>
                                        <div class="fw-semibold poppins-600 fs-28">
                                            {{ $review['name'] }} <small class="text-muted poppins-400 fs-20">{{
                                                $review['date']
                                                }}</small>
                                        </div>
                                        <div class="text-warning mb-2">
                                            {!! str_repeat('★', $review['rating']) !!}
                                            {!! str_repeat('☆', 5 - $review['rating']) !!}
                                        </div>
                                        <p class="mb-0 poppins-400 fs-24" style="color: #595959;">{{ $review['comment'] }}</p>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                    <!-- Navigation buttons -->
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                </div>
            </div>
            <br />
            <br />
        </div>
        <!-- All Courses -->
        <div class="container-fluid mt-5 px-3 px-sm-5 my-5">
            <div class="mx-auto w-100 conteainer-w">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h4 class="poppins-700 fs-34 mb-4" style="color: #016FAB">คอร์สอื่นๆ ที่เกี่ยวข้อง</h4>
                    <div>
                        <a href="#" class="text-decoration-none me-3">See All</a>
                        <div class="btn-group">
                            <div id="paginationLinks">
                                <!-- Mock pagination links -->
                                <a href="#">1</a>
                                <a href="#">2</a>
                                <a href="#">3</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="coursesContainer">
                    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-5">
                        <!-- Mock courses data -->
                        @for($i = 0; $i < 4; $i++) <div class="col px-3">
                            <div class="card h-100" style="border: unset;">
                                <img src="https://placehold.co/375x200" class="card-img-top" alt="Course Image">
                                <div class="card-body">
                                    <small class="poppins-700 fs-14" style="color:#02166C;">Category Name</small>
                                    <h6 class="poppins-700 fs-20">Course Name</h6>
                                    <p class="text-muted poppins-500 fs-16" style="height: 80px; color:#7A8189;">Lorem
                                        ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae nunc eu nisi
                                        hendrerit fermentum.</p>
                                    <div class="d-flex align-items-center text-success small mb-2">
                                        <span class="poppins-500 fs-16">5.00</span>
                                        <span class="text-warning mx-1">★ ★ ★ ★ ★</span>
                                        <span class="text-muted poppins-500 fs-8">(2,000)</span>
                                    </div>
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div class="d-flex align-items-center text-start">
                                            <img src="https://placehold.co/30x30" class="rounded-circle me-2 img-fluid"
                                                width="30" height="30">
                                            <small class="poppins-700 fs-14" style="color:#4C5257;">Teacher
                                                Name<br><span class="poppins-500 fs-12" style="color:#7A8189;">1
                                                    Enrolled</span></small>
                                        </div>
                                        <span class="text-success poppins-700 fs-20">$99.99</span>
                                    </div>
                                </div>
                            </div>
                    </div>
                    @endfor
                </div>
            </div>
        </div>
    </div>
    <br />
    <br />

    <!-- Footer -->
    <footer class="py-4" style="background-color:rgb(255, 255, 255);">
        <div class="container-fluid mt-5 px-3 px-sm-5 my-5">
            <div class="mx-auto w-100 conteainer-w">
                <div class="row text-center text-md-start gy-4">
                    <div class="col-12 col-sm-6 col-md-6 col-lg-4 mb-4 pt-4">
                        <h6 class="kanit-500 fs-34  mb-4" style="color: #016FAB">เกี่ยวกับเรา</h6>
                        <ul class="list-unstyled d-flex flex-column gap-2 gap-md-3">
                            <li><a href="#" class="custom-link-style fs-20 text-dark">สอนกับเรา</a></li>
                            <li><a href="#" class="custom-link-style fs-20 text-dark">Privacy Policy</a></li>
                            <li><a href="#" class="custom-link-style fs-20 text-dark">Terms and Conditions</a></li>
                            <li><a href="#" class="custom-link-style fs-20 text-dark">Data Protection Policy</a>
                            </li>
                            <li><a href="#" class="custom-link-style fs-20 text-dark">Cookie Policy</a></li>
                        </ul>
                    </div>
                    <div class="col-12 col-sm-6 col-md-6 col-lg-4 mb-4 pt-4">
                        <h6 class="kanit-500 fs-34 mb-3" style="color: #016FAB">ช่องทางการติดต่อ</h6>
                        <div class="mb-4">
                            <a href="#" class="icon-box me-2 text-warning"><i class="bi bi-facebook"></i></a>
                            <a href="#" class="icon-box me-2 text-warning"><i class="bi bi-messenger"></i></a>
                            <a href="#" class="icon-box me-2 text-warning"><i class="bi bi-twitter"></i></a>
                            <a href="#" class="icon-box me-2 text-warning"><i class="bi bi-youtube"></i></a>
                            <a href="#" class="icon-box me-2 text-warning"><i class="bi bi-envelope-fill"></i></a>
                        </div>
                        <div class="d-flex flex-column gap-2 gap-md-3">
                            <p class="mb-0 custom-link-style fs-20 text-dark text-decoration-none">ที่อยู่
                                บ้านเลขที่ 111/150 ต.บางพูด</p>
                            <p class="mb-0 custom-link-style fs-20 text-dark text-decoration-none">อ.ปากเกร็ด
                                จ.นนทบุรี</p>
                        </div>
                    </div>
                    <div
                        class="col-12 col-sm-12 col-md-12 col-lg-4 d-flex flex-column align-items-center justify-content-center text-center">
                        <img src="{{ asset('images/acdemouslogo.png') }}" class="img-fluid mb-3"
                            style="height: auto; max-height: 250px;">

                        <strong class="kanit-500 fs-34 text-dark">Academous</strong>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    </div>
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            const toggles = document.querySelectorAll('[data-bs-toggle="collapse"]');

            toggles.forEach(toggle => {
                const targetId = toggle.getAttribute("data-bs-target");
                const icon = toggle.querySelector("i.bi");
                const target = document.querySelector(targetId);

                if (target && icon) {
                    target.addEventListener("show.bs.collapse", () => {
                        console.log(`Show: ${targetId}`);
                        icon.classList.remove("bi-chevron-down");
                        icon.classList.add("bi-chevron-up");
                    });

                    target.addEventListener("hide.bs.collapse", () => {
                        console.log(`Hide: ${targetId}`);
                        icon.classList.remove("bi-chevron-up");
                        icon.classList.add("bi-chevron-down");
                    });
                }
            });
        });
    </script>
    <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
    <script>
        var swiper = new Swiper(".mySwiper", {
            slidesPerView: 1,
            spaceBetween: 20,
            loop: false,
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
        });
    </script>

</body>
<script>
document.addEventListener("DOMContentLoaded", function () {
    const TOKEN = localStorage.getItem('token');
    const APP_URL = "{{ config('app.url') }}"; // ได้ค่าจาก .env หรือ config
    const urlParts = window.location.pathname.split('/');
    const courseId = urlParts[urlParts.length - 1];

    const API_URL = `{{ config('app.url') }}/api/course/detail/{{ $courseId }}`;
    
    fetch(API_URL, {
        method: 'GET',
        headers: {
            'Authorization': `Bearer ${TOKEN}`,
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(res => {
        if (res.status !== 'success') return console.error('Fetch failed:', res);

        const data = res.data;
        const course = data.course;
        const category = data.category;
        const teacher = data.teacher;
        const lessons = data.lessons;
        const lessonVideos = data.lesson_videos;
        const videoDetail = data.videos;
        let totalSeconds = 0;

        // ✅ รวมเวลาจากแต่ละ video
        lessonVideos.forEach(v => {
            const video = data.videos[v.video_id]; // ← lookup จาก object โดยตรง
            if (video && video.duration) {
                const [min, sec] = video.duration.split(':').map(Number);
                totalSeconds += (min * 60) + sec;
            }
        });

        // ✅ แปลงรวมเป็นชั่วโมง/นาที
        const hours = Math.floor(totalSeconds / 3600);
        const minutes = Math.floor((totalSeconds % 3600) / 60);
        const durationText = hours > 0
            ? `${hours} h ${minutes > 0 ? `${minutes} m` : ''}`
            : `${minutes} m`;

        console.log("🧮 รวมทั้งหมด", totalSeconds, "วินาที");
        console.log("🕒 durationText:", durationText);

        // ✅ อัปเดต DOM
        const lessonCount = lessons.length;
        const lessonDiv = document.querySelector('.d-flex.gap-4.mb-3 > div:nth-child(1)');
        const durationDiv = document.querySelector('.d-flex.gap-4.mb-3 > div:nth-child(2)');

        if (lessonDiv && durationDiv) {
            lessonDiv.innerHTML = `<i class="bi bi-file-earmark-text me-1 poppins-400 fs-24"></i> ${lessonCount} Lessons`;
            durationDiv.innerHTML = `<i class="bi bi-clock me-1 poppins-400 fs-24"></i> ${durationText}`;
        }

        // ✅ 1) อัปเดตรูปภาพหลักสูตร
        const courseImage = document.querySelector('.col-md-7 img');
        courseImage.src = course.image;

        // ✅ 2) อัปเดตชื่อคอร์ส / หมวดหมู่ / คำอธิบาย / ราคา
        document.querySelector('.poppins-700.fs-48').textContent = course.name;
        document.querySelector('.poppins-500.fs-24.fw-medium').textContent = category.name;
        document.querySelector('.poppins-400.fs-24.text-muted').textContent = course.description;
        document.querySelector('.poppins-600.fs-40').textContent = `${parseFloat(course.price).toFixed(2)} บาท`;
        document.getElementById('buyCourseBtn').href = `{{ config('app.url') }}/student/payment?id=${courseId}`;
        // ✅ 3) ผู้สอน
        const teacherImg = document.querySelector('img.rounded-circle');
        const teacherName = document.querySelectorAll('.poppins-600.fs-30')[1];
        teacherImg.src = teacher.profile_image.startsWith('http') ? teacher.profile_image : `{{ config('app.url') }}/${teacher.profile_image}`;
        teacherName.textContent = teacher.name;

        // ✅ 4) รายละเอียดหลักสูตร
        const descParagraph = document.querySelector('.mb-5 > p.text-secondary');
        descParagraph.textContent = course.description;

        // ✅ 5) วิดีโอ
        const container = document.getElementById('courseContent');
        container.innerHTML = '';

        lessons.forEach((lesson, index) => {
            const lessonId = `lesson${lesson.id}`;
            const lessonVideo = lessonVideos.find(v => v.lesson_id === lesson.id);
            const isLocked = lessonVideo?.disable === 1;
            const videoTitle = lesson.title;
            
            const videoData = data.videos[lessonVideo?.video_id];
            const duration = videoData?.duration || '0:00';
            const videoDescription = videoData?.video_description;
            const streamRouteBase = `{{ config('app.url') }}/video/stream/${lessonVideo?.video_id}`;
            const coverImage = `{{ env("APP_URL") }}/storage/${videoData.image_cover_path}`;

            const playerHTML = isLocked
                ? `<img src="${coverImage}" width="390" height="240" class="rounded-2 me-3 mb-2" alt="Cover" />`
                : `<video width="390" height="240" class="rounded-2 me-3 mb-2" controls preload="metadata" poster="${coverImage}">
                        <source src="${streamRouteBase}" type="video/mp4">
                        Your browser does not support the video tag.
                </video>`;

            const episodeHTML = `
                <div class="border-top py-2">
                    <button type="button"
                        class="d-flex w-100 justify-content-between align-items-center px-2 py-2 border-0 bg-transparent"
                        data-bs-toggle="collapse" data-bs-target="#${lessonId}Content" aria-expanded="false"
                        aria-controls="${lessonId}Content" style="cursor: pointer;">
                        <div class="kanit-400 fs-32" style="color: #016FAB">Ep.${index + 1} ${videoTitle}</div>
                        <div class="d-flex align-items-center gap-2 " style="color: #016FAB">
                            <i class="bi bi-chevron-down" id="${lessonId}Icon" style="pointer-events: none;"></i>
                        </div>
                    </button>

                    <div class="collapse mt-2" id="${lessonId}Content">
                        <div class="d-flex flex-wrap justify-content-between align-items-start p-3 pt-2 ps-4">
                            ${playerHTML}
                            <div class="flex-grow-1">
                                <div class="d-flex justify-content-between align-items-start px-5">
                                    <div>
                                        <div class="kanit-400 fs-32 mb-4" style="color: #016FAB">เนื้อหาของบทเรียน</div>
                                        <p class="poppins-400 fs-16" style="color: #737791">${videoDescription}</p>
                                    </div>
                                    <div class="text-end " style="color: #016FAB">
                                        <i class="bi bi-clock me-1"></i>${duration}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `;

            container.insertAdjacentHTML('beforeend', episodeHTML);
        });
    })
    .catch(err => console.error('Error:', err));
});
</script>


@endsection