@extends('layout')
@section('content')

<div class="courses-detail-page video-detail-page">
    <div class="container py-5">
        <div class="course-summary-container row g-4">
            <div>
                <div class="course-summary-image">
                    <video id="videoPlayer" class="w-100" controls controlsList="nodownload">
                        <source id="videoSource" src="" type="video/mp4">
                        Your browser does not support the video tag.
                    </video>
                </div>
            </div>
            <div class="col-md-5">
                
            </div>
        </div>

        <div class="card custom-card my-5 p-5">
            <h1 id="videoDetailTitle"></h1>
            <div class="course-info2 d-flex align-items-center gap-4">
                <div class="info-item">
                    <img src="{{ asset('icon/calendar-time.svg') }}" alt="calendar" class="img-fluid">
                    <span id="videoDate"></span>
                    
                </div>
                <div class="info-item">
                    <img src="{{ asset('icon/time.svg') }}" alt="time" class="img-fluid">
                    <span id="videoDuration"></span>
                </div>
            </div>

            <div class="course-author">
                <h3>ผู้สอน</h3>
                <div class="d-flex align-items-center gap-3 p-2">
                    <div class="avatar">
                        <img id="authorImage" src="images/avatar-1.png" alt="author" class="img-fluid">
                    </div>
                    <div class="author-name">
                        <p id="authorName"></p>
                    </div>
                </div>
            </div>
            <div class="course-description">
                <h3>รายละเอียดวิดิโอ</h3>
                <p id="videoFullDescription"></p>
            </div>
            <div class="course-rating-section mt-4">
                <h3 class="text-primary">ประเมินจากผู้เรียน</h3>
                <div class="rating-stars">
                    <span class="star" data-value="1">&#9733;</span>
                    <span class="star" data-value="2">&#9733;</span>
                    <span class="star" data-value="3">&#9733;</span>
                    <span class="star" data-value="4">&#9733;</span>
                    <span class="star" data-value="5">&#9733;</span>
                </div>
                <p id="ratingText" class="mt-2 text-secondary">ให้คะแนนวิดิโอนี้</p>
            </div>
        </div>
        
        <div class="related-courses-container mt-5">
            <h2 class="text-primary">วิดิโออื่นๆ ที่แนะนำ</h2>
        
            <!-- Swiper Container -->
            <div class="swiper related-videos-swiper">
                <div class="swiper-wrapper" id="relatedVideosContainer">
                    <!-- Related videos will be injected here dynamically -->
                </div>
        
                <!-- Swiper Navigation Buttons -->
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
        </div>
    </div>
</div>
<style>
    .tag-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px; /* Adjust space between tags */
}

.tag-badge {
    background-color: #f0f2f5; /* Light background */
    color: #333; /* Text color */
    padding: 8px 15px; /* Padding for better spacing */
    border-radius: 20px; /* Rounded look */
    font-size: 14px; /* Adjust text size */
    font-weight: 500; /* Make text bold */
    display: inline-flex; 
    align-items: center; 
    justify-content: center;
    white-space: nowrap; /* Prevent text wrapping */
    min-width: 80px; /* Ensure consistent size */
    text-align: center;
}

    .rating-stars {
        display: flex;
        gap: 8px;
        font-size: 30px;
        cursor: pointer;
    }

    .star {
        color: #E0E0E0; /* Default gray */
        transition: color 0.3s ease;
    }
    .rating {
        color: #FFD700; /* Gold color when selected */
    }
    .star.selected, .star:hover {
        color: #FFD700; /* Gold color when selected */
    }
</style>
<script>
    document.addEventListener('DOMContentLoaded', function () {
    const urlParams = new URLSearchParams(window.location.search);
    const videoId = urlParams.get('id'); // Get video ID from URL
    const apiUrl = `{{ env('APP_URL') }}/api/videos/${videoId}`;
    const stars = document.querySelectorAll('.rating-stars .star');
    const apiUrl2 = `{{ env('APP_URL') }}/api/videos/relate/${videoId}`;
    const relatedVideosContainer = document.getElementById("relatedVideosContainer");
    const videoSource = document.getElementById('videoSource');
    const videoElement = document.getElementById('videoPlayer');
    
    let selectedRating = 0; // Default rating

    if (!videoId) {
        console.error("No video ID provided in the URL.");
        return;
    }

    let currentFetchController = null; // Store active fetch request

async function fetchAndPlayVideo() {
    try {
        // ✅ Cancel previous fetch if another request is triggered
        if (currentFetchController) {
            currentFetchController.abort();
        }
        currentFetchController = new AbortController();
        const signal = currentFetchController.signal;

        const response = await fetch(apiUrl, { signal });
            const data = await response.json();

            if (data.status.statusType === 'S') {
                const video = data.data;

                // ✅ Set page title
                document.title = video.video_name;

                // ✅ Set video details
                document.getElementById('videoDetailTitle').innerText = video.video_name;
                document.getElementById('videoFullDescription').innerText = video.video_description;
                document.getElementById('videoDate').innerText = formatDate(video.create_time);
                document.getElementById('authorName').innerText = video.author || 'Unknown Author';
                document.getElementById('authorImage').src = video.author_image
                    ? `/storage/${video.author_image}`
                    : 'images/avatar-1.png';

                // ✅ Set video poster
                videoElement.poster = `/storage/${video.image_cover_path}`;

                // ✅ Fetch the video as a Blob and set it as the source
                const videoStreamUrl = `{{ env('APP_URL') }}/video/stream/${video.id}`;
                const videoResponse = await fetch(videoStreamUrl);
                const videoBlob = await videoResponse.blob();
               

                // ✅ Create a new Blob URL
                currentObjectUrl = URL.createObjectURL(videoBlob);
                videoSource.src = currentObjectUrl;
                videoElement.load();

                // ✅ Revoke Blob URL as soon as the video starts playing
                 videoElement.addEventListener('play', function () {
                if (currentObjectUrl) {
                    // URL.revokeObjectURL(currentObjectUrl);
                    // currentObjectUrl = null;
                    console.log("Blob URL revoked after video started.");
                }
            });

            // Prevent right-click
            videoElement.addEventListener('contextmenu', (event) => event.preventDefault());
            videoElement.setAttribute('draggable', false);
            videoElement.addEventListener('dragstart', (event) => event.preventDefault());

            videoElement.addEventListener('loadedmetadata', function () {
                document.getElementById('videoDuration').innerText = formatDuration(videoElement.duration);
            });


            } else {
                console.error('Failed to fetch video:', data.status.errorMessage);
            }
        } catch (error) {
            console.error('Error fetching video:', error);
        }
    }
}
    // ✅ Call the async function
    fetchAndPlayVideo();


    // Helper function to format duration (HH:MM:SS)
    function formatDuration(seconds) {
        const minutes = Math.floor(seconds / 60);
        const remainingSeconds = Math.floor(seconds % 60);
        return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds} min`;
    }

    // Helper function to format the date
    function formatDate(dateString) {
        const date = new Date(dateString);
        return date.toLocaleDateString();
    }
    var swiper = new Swiper('.related-videos-swiper', {
            slidesPerView: 2, // Show 2 slides at a time
            spaceBetween: 20,
            loop: true,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            breakpoints: {
                1024: { slidesPerView: 3 }, // Show 3 on large screens
                768: { slidesPerView: 2 }, // Show 2 on medium screens
                576: { slidesPerView: 1 }, // Show 1 on small screens
            }
        });
    stars.forEach(star => {
        // Hover effect (preview rating)
        star.addEventListener('mouseover', function () {
            resetStars();
            highlightStars(this.dataset.value);
        });

        // Remove hover effect when mouse leaves
        star.addEventListener('mouseleave', function () {
            resetStars();
            if (selectedRating) highlightStars(selectedRating); // Keep selected rating
        });

        // Click event (store rating)
        star.addEventListener('click', function () {
            selectedRating = this.dataset.value;
            highlightStars(selectedRating);
            document.getElementById('ratingText').innerText = `คุณให้คะแนน ${selectedRating} ดาว`;

            // Send rating to API (if needed)
            sendRating(selectedRating);
        });
    });

    function highlightStars(rating) {
        stars.forEach(star => {
            if (star.dataset.value <= rating) {
                star.classList.add('selected');
            }
        });
    }

    function resetStars() {
        stars.forEach(star => {
            star.classList.remove('selected');
        });
    }
    function truncateText(text, maxLength) {
        if (!text) return "No description available.";
        return text.length > maxLength ? text.substring(0, maxLength) + "..." : text;
    }
    
    fetch(apiUrl2)
        .then(response => response.json())
        .then(data => {
            if (data.status.statusType === "S") {
                const relatedVideos = Object.values(data.data).flat();
                relatedVideosContainer.innerHTML = ""; // Clear previous content

                relatedVideos.forEach(video => {
                    let imageCoverPath = JSON.parse(video.images)[0];

                    const slide = document.createElement("div");
                    slide.className = "swiper-slide";

                    slide.innerHTML = `
                        <div class="card h-100">
                            <a href="/video_detail?id=${video.id}" class="text-decoration-none hover-scale">
                                <div class="position-relative">
                                    <img src="{{ env('APP_URL') }}/storage/${imageCoverPath}" alt="Video Thumbnail" class="card-img-top img-fluid relate_thum">
                                    
                                    <!-- Duration Badge -->
                                    <span class="badge bg-dark position-absolute top-0 end-0 m-2">${video.duration}</span>
                                </div>

                                <div class="card-body">
                                    <h5 class="card-title text-primary">${video.title}</h5>
                                    <p class="card-text text-muted">${truncateText(video.description, 30)}</p>
                                </div>

                                <div class="card-footer bg-white border-0">
                                    <div class="d-flex align-items-center mb-2">
                                        <img src="images/avatar-1.png" alt="Author Avatar" class="rounded-circle me-2" style="width: 30px;">
                                        <div>
                                            <p class="mb-0 small">${video.author}</p>
                                            <p class="mb-0 small text-muted">${formatDate(video.create_time)}</p>
                                        </div>
                                    </div>

                                    <!-- Rating -->
                                    <div class="rating mb-2">
                                        ${generateStarRating(4.0)}
                                    </div>

                                    <!-- Lesson Tags -->
                                    <div class="d-flex flex-wrap">
                                        ${parseTags(video.tags)}
                                    </div>
                                </div>
                            </a>
                        </div>
                    `;

                    relatedVideosContainer.appendChild(slide);
                });

                // Initialize Swiper after loading videos
                new Swiper(".related-videos-swiper", {
                    slidesPerView: 3,
                    spaceBetween: 20,
                    navigation: {
                        nextEl: ".swiper-button-next",
                        prevEl: ".swiper-button-prev",
                    },
                    breakpoints: {
                        768: { slidesPerView: 2 },
                        1024: { slidesPerView: 3 }
                    }
                });
            } else {
                console.error("Failed to fetch related videos:", data.status.errorMessage);
            }
        })
        .catch(error => console.error("Error fetching related videos:", error));

    // Function to format date
    function formatDate(dateString) {
        const date = new Date(dateString);
        return date.toLocaleDateString();
    }

    // Function to parse and clean tags
    function parseTags(tags) {
    try {
        const tagArray = JSON.parse(tags);
        return `<div class="tag-container">` + 
            tagArray.map(tag => `<span class="tag-badge">${tag}</span>`).join('') + 
            `</div>`;
    } catch (error) {
        console.error("Error parsing tags:", error);
        return "";
    }
}

    // Function to generate star ratings
    function generateStarRating(rating) {
        let fullStars = Math.floor(rating);
        let halfStar = rating - fullStars >= 0.5 ? 1 : 0;
        let emptyStars = 5 - fullStars - halfStar;

        return `${"★".repeat(fullStars)}${halfStar ? "☆" : ""}${"☆".repeat(emptyStars)} <span style="color:black;">${rating}</span>`;
    }
    // function sendRating(rating) {
    //     fetch('{{ env('APP_URL') }}/api/rate-video', {
    //         method: 'POST',
    //         headers: { 'Content-Type': 'application/json' },
    //         body: JSON.stringify({ video_id: " $videoId ", rating: rating })
    //     })
    //     .then(response => response.json())
    //     .then(data => {
    //         console.log('Rating submitted:', data);
    //     })
    //     .catch(error => {
    //         console.error('Error submitting rating:', error);
    //     });
    // }
});

    </script>
  <style>
    .relate_thum{
        width: 100%;
        height: 233px;
        object-fit: cover;
        object-position: center;
    }
  </style>
@endsection