@extends('layout')
@section('content')
<div class="page-container video-list-content-page">
    <div class="py-5">
        <div class="container">
            <div class="position-relative mb-4">
                <h2 class="text-center">วิดิโอของคุณ</h2>
            </div>
            <div class="row g-2" id="videoContainer"> 
                <!-- Videos will be inserted here dynamically -->
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
    const apiUrl = "{{ env('APP_URL') }}/api/videos";
    const videoContainer = document.getElementById("videoContainer");

    fetch(apiUrl)
        .then(response => response.json())
        .then(data => {
            if (data.status.statusType === "S") {
                const videos = data.data;
                videoContainer.innerHTML = ""; // Clear previous content

                videos.forEach(video => {
                    const videoElement = document.createElement("div");
                    videoElement.className = "col-md-6 col-sm-6 col-lg-3";

                    videoElement.innerHTML = `
                        <a href="/video_detail?id=${video.id}" class="text-decoration-none hover-scale">
                            <div class="video-item card-container">
                                <div class="video-item-image">
                                    <div class="duration">
                                        <span>10:00</span>
                                    </div>
                                    <img src="{{ env('APP_URL') }}/storage/${video.image_cover_path}" 
                                        alt="Video Thumbnail for ${video.video_name}" class="img-fluid">
                                </div>
                                <div class="card-body">
                                    <h3>${video.video_name}</h3>
                                    <p>${video.video_description}</p>
                                    <div class="rating" style="color:#ECD53B;">
                                        ${generateStarRating(4.0)} <!-- Replace with actual rating if available -->
                                    </div>
                                </div>
                                <div class="card-footer">
                                    <div class="d-flex align-items-top gap-2">
                                        <div class="avatar">
                                            <img src="images/avatar-1.png" alt="Author Avatar">
                                        </div>
                                        <div class="author-info">
                                            <h4 class="author-name">${video.author}</h4>
                                            <p class="date">${formatDate(video.create_time)}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="lesson-buttons">
                                    <button class="tag-btn">${JSON.parse(video.tags).join(', ')}</button>
                                </div>
                            </div>
                        </a>
                    `;
                    videoContainer.appendChild(videoElement);
                });
            } else {
                console.error("Failed to fetch videos:", data.status.errorMessage);
            }
        })
        .catch(error => console.error("Error fetching videos:", error));

    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: #B6B6B6;">${rating}</span>
        `;
    }

    function formatDate(dateString) {
        const date = new Date(dateString);
        return date.toLocaleDateString();
    }
});
</script>

@endsection