@extends('layouts.sidenav')

@section('content')
<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-10">
            <div class="card shadow-lg border-0">
                
                <!-- Video Player (อยู่ด้านบนสุด) -->
                <div class="video-container">
                    <video id="videoPlayer" controls class="w-100 rounded-top" style="max-height: 1000px; object-fit: cover;">
                        Your browser does not support the video tag.
                    </video>
                </div>

                <!-- Card Body -->
                <div class="card-body p-4">
                    <!-- Video Title -->
                    <h2 class="fw-bold text-primary mb-3">{{ $video->video_name }}</h2>
                    <p class="text-muted">{{ $video->video_description }}</p>

                    <!-- Author & Date -->
                    <div class="d-flex justify-content-between align-items-center mt-4">
                        <p class="mb-0 text-dark fw-semibold"><i class="bi bi-person-fill"></i> {{ $video->full_name }}</p>
                        <small class="text-secondary"><i class="bi bi-calendar"></i> {{ \Carbon\Carbon::parse($video->create_time)->format('F j, Y') }}</small>
                    </div>

                    <!-- Video Duration -->
                    <div class="mt-3">
                        <p class="text-secondary"><i class="bi bi-clock"></i> Duration: <span id="videoDuration">Loading...</span></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script>
    document.addEventListener("DOMContentLoaded", async function () {
        const video = document.getElementById("videoPlayer");
        const videoId = "{{ $video->id }}"; // Unique identifier for each video
        const storageKey = "videoTime_" + videoId;
        const videoUrl = "{{ $videoUrl }}"; // API สำหรับดึงวิดีโอ (stream)
    
        try {
            // ดึงวิดีโอผ่าน fetch และแปลงเป็น Blob
            const response = await fetch(videoUrl);
    
            if (!response.ok) {
                throw new Error("Error loading video");
            }
    
            const blob = await response.blob();
            const objectUrl = URL.createObjectURL(blob);
            video.src = objectUrl;
    
            // ลบ Blob URL หลังจากวิดีโอโหลดสำเร็จ
            video.addEventListener("loadeddata", function () {
                setTimeout(() => {
                    URL.revokeObjectURL(objectUrl); // ลบ blob หลังโหลดสำเร็จ
                }, 1000); // รอ 1 วินาที เผื่อมีการเริ่มเล่น
            });
    
            // ตั้งค่าตำแหน่งเล่นล่าสุด
            video.addEventListener("loadedmetadata", function () {
                const savedTime = sessionStorage.getItem(storageKey);
                if (savedTime) {
                    video.currentTime = parseFloat(savedTime);
                }
                updateVideoTimeDisplay();
            });
    
            // บันทึกเวลาที่ดูล่าสุดลง sessionStorage
            video.addEventListener("timeupdate", function () {
                sessionStorage.setItem(storageKey, video.currentTime);
                updateVideoTimeDisplay();
            });
    
            // ลบเวลาเมื่อวิดีโอเล่นจบ
            video.addEventListener("ended", function () {
                sessionStorage.removeItem(storageKey);
            });
    
            // อัปเดตเวลาที่เหลือ
            function updateVideoTimeDisplay() {
                const durationElement = document.getElementById("videoDuration");
                if (!durationElement) return;
    
                const remainingTime = video.duration - video.currentTime;
                if (isNaN(remainingTime)) return;
    
                const minutes = Math.floor(remainingTime / 60);
                const seconds = Math.floor(remainingTime % 60);
                const formattedTime = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
    
                durationElement.textContent = formattedTime;
            }
        } catch (error) {
            console.error("Error handling video blob:", error);
        }
    });
    </script>
    

    
@endsection