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

@section('content')
<div class="container mt-4">
    <div class="row">
        <!-- Sidebar -->
        <div class="col-md-4">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h5 id="course-title" class="fw-bold">Course Lessons</h5>
                    <div class="progress mb-3" style="height: 8px;">
                        <div class="progress-bar bg-primary" id="course-progress" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    <small id="course-progress-text">0% completed</small>

                    <ul id="episode-list" class="list-group mt-3">
                        <!-- Episodes here -->
                    </ul>
                </div>
            </div>
        </div>

        <!-- Video player -->
        <div class="col-md-8">
            <div class="card shadow-sm">
                <div class="ratio ratio-16x9">
                    <video id="main-video" class="w-100" controls poster="">
                        <source id="video-source" src="" type="video/mp4">
                        Your browser does not support the video tag.
                    </video>
                </div>
                <div class="card-body">
                    <h5 id="video-title" class="card-title">Ep. - </h5>
                    <p id="video-description" class="card-text text-muted">Loading description...</p>
                    <button id="next-btn" class="btn btn-primary mt-3">Next Episode</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    const baseUrl = "{{ url('/') }}";
    const streamRouteBase = "{{ url('/video/stream') }}";
    const courseId = window.location.pathname.split('/').filter(Boolean).at(-2);
    const API_URL = `${baseUrl}/api/course/${courseId}/lessons`;
    const COURSE_API_URL = `${baseUrl}/api/course/${courseId}`;

    let flatVideoList = []; // list of all videos (flattened)
    let currentIndex = 0;
    fetch(COURSE_API_URL)
        .then(res => res.json())
        .then(data => {
            if (data.status === "success") {
            const courseName = data.data.name;
            document.getElementById('course-title').innerText = `Course: ${courseName}`;
            } else {
            console.error('Failed to get course data');
            }
        })
        .catch(err => {
            console.error('Error fetching course:', err);
        });
    const videoElement = document.getElementById("main-video");
    const source = document.getElementById("video-source");
    const nextBtn = document.getElementById("next-btn");

    function renderEpisodes(data) {
        const episodeList = document.getElementById('episode-list');
        episodeList.innerHTML = '';
        flatVideoList = [];
        let videoCount = 0;

        data.forEach((lesson, lessonIndex) => {
            const lessonTitle = document.createElement('li');
            lessonTitle.className = 'list-group-item bg-light fw-bold';
            lessonTitle.innerText = `Lesson ${lessonIndex + 1}: ${lesson.title}`;
            episodeList.appendChild(lessonTitle);

            lesson.videos.forEach((video, videoIndex) => {
                flatVideoList.push(video); // add to flat list
                videoCount++;
                const li = document.createElement('li');
                li.className = 'list-group-item d-flex justify-content-between align-items-center episode-item';
                li.setAttribute('data-index', flatVideoList.length - 1);

                li.innerHTML = `
                    <div class="d-flex align-items-center">
                        <i class="bi bi-circle me-2"></i>
                        <a href="#" class="text-dark text-decoration-none">Ep.${videoCount} - ${video.title}</a>
                    </div>
                    <span class="small">${video.duration}</span>
                `;

                li.addEventListener('click', () => {
                    playVideo(flatVideoList.length - 1);
                });

                episodeList.appendChild(li);
            });
        });

        if (flatVideoList.length > 0) {
            playVideo(0); // play first
        }
    }

    async function playVideo(index) {
        const video = flatVideoList[index];
        if (!video) return;

        currentIndex = index;
        const storageKey = `videoTime_${video.video_id}`;
        const videoUrl = `${streamRouteBase}/${video.video_id}`;

        document.querySelectorAll('.episode-item').forEach(el => el.classList.remove('active', 'text-white'));
        const activeItem = document.querySelector(`.episode-item[data-index="${index}"]`);
        if (activeItem) activeItem.classList.add('active', 'text-white');

        try {
            const response = await fetch(videoUrl);
            if (!response.ok) throw new Error("โหลดวิดีโอล้มเหลว");

            const blob = await response.blob();
            const objectUrl = URL.createObjectURL(blob);

            source.src = videoUrl; // ให้ src เป็น URL ปกติที่สตรีมรองรับ range request
            videoElement.poster = `${baseUrl}/storage/${video.image_cover_path}`;
            videoElement.load();
            videoElement.play();

            videoElement.onloadeddata = () => {
                setTimeout(() => URL.revokeObjectURL(objectUrl), 1000);
            };

            videoElement.onloadedmetadata = () => {
                const savedTime = sessionStorage.getItem(storageKey);
                if (savedTime) {
                    videoElement.currentTime = parseFloat(savedTime);
                }
            };

            videoElement.ontimeupdate = () => {
                sessionStorage.setItem(storageKey, videoElement.currentTime);
            };

            videoElement.onended = () => {
                sessionStorage.removeItem(storageKey);
                // Auto play next
                if (currentIndex + 1 < flatVideoList.length) {
                    playVideo(currentIndex + 1);
                } else {
                    nextBtn.disabled = true;
                }
            };

            document.getElementById('video-title').innerText = `Ep.${index + 1} - ${video.title}`;
            document.getElementById('video-description').innerText = video.video_description;
            nextBtn.disabled = currentIndex + 1 >= flatVideoList.length;

        } catch (err) {
            console.error("❌ Error loading video:", err);
        }
    }

    document.addEventListener('DOMContentLoaded', async () => {
        try {
            const res = await fetch(API_URL);
            const json = await res.json();
            if (json.status === 'success') {
                renderEpisodes(json.data);
            } else {
                alert('ไม่สามารถโหลดข้อมูลบทเรียนได้');
            }
        } catch (err) {
            console.error('Error fetching lessons:', err);
        }
    });
    
    nextBtn.addEventListener('click', () => {
        if (currentIndex + 1 < flatVideoList.length) {
            playVideo(currentIndex + 1);
        }
    });
</script>
@endsection