@extends('layout')
@section('content')
<style>
    
    #hero_banner {
    width: 100%;
    height: 70vh; /* Full-screen height */
    position: relative;
    overflow: hidden; /* Prevent overflow */
  }
  
  .swiper-slide {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    position: relative;
  }
  
 
  
  .swiper-slide img {
    display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
  }
  
  .swiper-pagination-bullet-active {
    background-color: rgb(9, 130, 244) !important; /* Highlight active bullet */
  }
  
  .swiper-button-next,
  .swiper-button-prev {
    color: white; /* White navigation arrows */
  }
  
   </style>
<div class="page-container video-content-page">
    {{-- <div class="section-container" id="video-banner">

        <div class="swiper-container mySwiper">
            <div class="swiper-wrapper">
                @foreach ($banner_video_content as $bannerImage)
                    <div class="swiper-slide">
                        <div class="video-container-item" style="background-image: url('{{ $bannerImage }}'); background-size: cover; background-position: center;">
                            <div class="play-button">
                                <i class="bi bi-play-circle" aria-hidden="true"></i>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            <!-- Add Arrows -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>

    </div> --}}
    <div class="swiper-container" id="hero_banner">
        <div class="swiper-wrapper">
          @foreach ($banner_video_content as $bannerImage)
            <div class="swiper-slide" style="background-image: url('{{$bannerImage}}'); background-size: cover; background-position: center;">
                <div class="play-button">
                    <i class="bi bi-play-circle" aria-hidden="true"></i>
                </div>
              
              <div class="w-100 mt-5">
                <div class="swiper mySwiper">
                  <div class="swiper-wrapper">
                      
                  </div>
                </div>
              </div>
              
            </div>
          @endforeach
        </div>
        
        <div class="swiper-pagination"></div>
      </div>

    <!-- Search Section -->
    <div class="search-section">
        <div class="container">
            <div class="card custom-card">
                <form class="p-3">
                    <div class="row align-items-center">
                        <div class="col-md-6 form-group">
                            <input type="text" class="form-control" placeholder="ค้นหาชื่อคอร์ส ชื่อผู้สอน ที่คุณสนใจ" aria-label="Search">
                        </div>
                        <div class="col-md-2 form-group">
                            <button type="submit" class="btn green-btn w-100">ค้นหา</button>
                        </div>
                        <div class="col-md-4 form-group">
                            <select class="form-control" aria-label="Select Category">
                                <option value="">เลือกหมวดหมู่</option>
                                <option value="category1">หมวดหมู่ 1</option>
                                <option value="category2">หมวดหมู่ 2</option>
                                <option value="category3">หมวดหมู่ 3</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- วิดิโอของคุณ Section -->
    <div id="video-content-section" class="py-5">
        <div class="container">
            <div class="position-relative mb-4">
                <h2>วิดิโอของคุณ</h2>
                <a href="/list_video_content" class="position-absolute top-50 end-0 translate-middle-y view-all-btn">
                    View All
                    <img src="icon/arrow-right.svg" alt="arrow" class="ms-2">
                </a>
            </div>
            <div class="row g-2">
                <!-- Videos will be dynamically populated here -->
            </div>
        </div>
    </div>
    
    <!-- ดูอีกครั้ง Section -->
    <div id="video-content-section-again" class="py-5">
        <div class="container">
            <div class="position-relative mb-4">
                <h2>ดูอีกครั้ง</h2>
                <a href="{{('list_video_content')}}" class="position-absolute top-50 end-0 translate-middle-y view-all-btn">View All
                    <img src="icon/arrow-right.svg" alt="arrow" class="ms-2">
                </a>
            </div>
            <div class="row g-2">
                @foreach ($videosItemsData2 as $videosItem)
                    <div class="col-md-6 col-sm-6 col-lg-3">
                        <a href="{{('video_detail')}}" class="text-decoration-none hover-scale">
                            <div class="video-item card-container">
                                <div class="video-item-image">
                                    <div class="duration">
                                        <span>{{ $videosItem['duration'] }}</span>
                                    </div>
                                    <img src="{{ $videosItem['image'] }}" alt="Video Thumbnail for {{ $videosItem['title'] }}" class="img-fluid">
                                </div>
                                <div class="card-body">
                                    <h3>{{ $videosItem['title'] }}</h3>
                                    <p>{{ $videosItem['description'] }}</p>
                                    <div class="rating">
                                        @php
                                            $fullStars = floor($videosItem['rating']);
                                            $halfStar = ($videosItem['rating'] - $fullStars) >= 0.5 ? 1 : 0;
                                            $emptyStars = 5 - $fullStars - $halfStar;
                                        @endphp
                                        @for ($i = 0; $i < $fullStars; $i++)
                                            <span style="color: #ECD53B;">★</span>
                                        @endfor
                                        @if ($halfStar)
                                            <span style="color: #ECD53B;">☆</span>
                                        @endif
                                        @for ($i = 0; $i < $emptyStars; $i++)
                                            <span style="color: #EDF1F3;">☆</span>
                                        @endfor
                                        <span style="color: #B6B6B6;">{{ $videosItem['rating'] }}</span>
                                    </div>
                                </div>
                                <div class="card-footer">
                                    <div class="d-flex align-items-top gap-2">
                                        <div class="avatar">
                                            <img src="{{ $videosItem['author_image'] }}" alt="Author Avatar for {{ $videosItem['author'] }}">
                                        </div>
                                        <div class="author-info">
                                            <h4 class="author-name">{{ $videosItem['author'] }}</h4>
                                            <p class="date">{{ $videosItem['date'] }}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="lesson-buttons">
                                    @foreach ($videosItem['lessons'] as $lesson)
                                        <button class="tag-btn">{{ $lesson }}</button>
                                    @endforeach
                                </div>
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    <!-- Top Voted Videos Section -->
    <div class="py-5 top-voted-section">
        <div class="container">
            <div class="position-relative mb-4">
                <h2>วิดิโอที่ได้รับการโหวตมากที่สุด</h2>
                <a href="{{('list_video_content')}}" class="position-absolute top-50 end-0 translate-middle-y view-all-btn">View All
                    <img src="icon/arrow-right.svg" alt="arrow" class="ms-2">
                </a>
            </div>
            <div class="row g-2">
                @foreach ($videosItemsVotedData as $key => $videosItem)
                    <div class="col-md-4 col-sm-4 col-lg-4 top-voted-item position-relative">
                        <a href="{{('video_detail')}}" class="text-decoration-none hover-scale position-relative ">
                            <p class="number-ranking">{{ $key + 1 }}</p>
                            <div class="video-item card-container">
                                <div class="video-item-image">
                                    <div class="duration">
                                        <span>{{ $videosItem['duration'] }}</span>
                                    </div>
                                    <img src="{{ $videosItem['image'] }}" alt="Video Thumbnail for {{ $videosItem['title'] }}" class="img-fluid">
                                </div>
                                <div class="card-body">
                                    <h3>{{ $videosItem['title'] }}</h3>
                                    <p>{{ $videosItem['description'] }}</p>
                                    <div class="rating">
                                        @php
                                            $fullStars = floor($videosItem['rating']);
                                            $halfStar = ($videosItem['rating'] - $fullStars) >= 0.5 ? 1 : 0;
                                            $emptyStars = 5 - $fullStars - $halfStar;
                                        @endphp
                                        @for ($i = 0; $i < $fullStars; $i++)
                                            <span style="color: #ECD53B;">★</span>
                                        @endfor
                                        @if ($halfStar)
                                            <span style="color: #ECD53B;">☆</span>
                                        @endif
                                        @for ($i = 0; $i < $emptyStars; $i++)
                                            <span style="color: #EDF1F3;">☆</span>
                                        @endfor
                                        <span style="color: #B6B6B6;">{{ $videosItem['rating'] }}</span>
                                    </div>
                                </div>
                                <div class="card-footer">
                                    <div class="d-flex align-items-top gap-2">
                                        <div class="avatar">
                                            <img src="{{ $videosItem['author_image'] }}" alt="Author Avatar for {{ $videosItem['author'] }}">
                                        </div>
                                        <div class="author-info">
                                            <h4 class="author-name">{{ $videosItem['author'] }}</h4>
                                            <p class="date">{{ $videosItem['date'] }}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="lesson-buttons">
                                    @foreach ($videosItem['lessons'] as $lesson)
                                        <button class="tag-btn">{{ $lesson }}</button>
                                    @endforeach
                                </div>
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</div>



<script>

document.addEventListener('DOMContentLoaded', async function () {
    const apiUrl = '{{ env("APP_URL") }}/api/videos'; // API endpoint
    const videoSection = document.querySelector('#video-content-section .container');
    const topVotedSection = document.querySelector('#video-content-section-again .container'); // For category-based videos

    // Retrieve and decode JWT from localStorage
    const token = localStorage.getItem('jwtTokencustomer');
    let userId = null;

    if (token) {
        try {
            const tokenPayload = JSON.parse(atob(token.split('.')[1])); // Decode JWT payload
            userId = tokenPayload.id; // Extract user ID
        } catch (error) {
            console.error("Error decoding JWT:", error);
        }
    }

    if (!userId) {
        console.warn("User ID not found in JWT.");
        // return; // Stop execution if user ID is missing
    }

    try {
        const response = await fetch(apiUrl);
        const data = await response.json();

        if (data.status.statusType === 'S') {
            const categories = data.data;
            videoSection.innerHTML = ''; // Clear previous content

            let userVideos = []; // Store videos the user has access to

            // **Loop through each category (e.g., แพทย์, พยาบาล)**
            Object.keys(categories).forEach(category => {
                const videos = categories[category];

                // **Filter videos based on user access**
                const filteredVideos = videos.filter(video => {
                    return video.permission_type !== "3" || video.register_name.includes(userId);
                });

                // Add user-accessible videos to personal list
                userVideos.push(...filteredVideos);

                // **Only create a category section if there are videos**
                if (filteredVideos.length > 0) {
                    const categorySection = document.createElement('div');
                    categorySection.className = 'py-5 category-section';
                    categorySection.innerHTML = `
                        <div class="position-relative mb-4">
                            <h2>${category}</h2>
                        </div>
                        <div class="row g-2"></div>
                    `;

                    const videoContainer = categorySection.querySelector('.row');

                    // Add videos to category
                    filteredVideos.forEach(video => {
                        const coverImagePath = `/storage/${video.file_cover_img_name}`;
                        videoContainer.insertAdjacentHTML('beforeend', createVideoHTML(video, coverImagePath));
                    });

                    // Append category section **under "Top-Voted Videos"**
                    topVotedSection.appendChild(categorySection);
                }
            });

            // **"วิดีโอของคุณ" - User's Personal Videos**
            if (userVideos.length > 0) {
                const yourVideosSection = document.createElement('div');
                yourVideosSection.className = 'py-5';
                yourVideosSection.innerHTML = `
                    <div class="position-relative mb-4">
                        <h2>วิดีโอของคุณ</h2>
                        <a href="/list_video_content" class="position-absolute top-50 end-0 translate-middle-y view-all-btn">
                            View All
                            <img src="icon/arrow-right.svg" alt="arrow" class="ms-2">
                        </a>
                    </div>
                    <div class="row g-2"></div>
                `;

                const videoContainer = yourVideosSection.querySelector('.row');

                // Append all user-accessible videos
                userVideos.forEach(video => {
                    const coverImagePath = `/storage/${video.file_cover_img_name}`;
                    videoContainer.insertAdjacentHTML('beforeend', createVideoHTML(video, coverImagePath));
                });

                // Insert "วิดีโอของคุณ" at the top
                videoSection.insertBefore(yourVideosSection, videoSection.firstChild);
            }

        } else {
            console.error('Failed to fetch videos:', data.status.errorMessage);
        }
    } catch (error) {
        console.error('Error fetching videos:', error);
    }
});

// **Reusable function to create video cards**
function createVideoHTML(video, coverImagePath) {
    // Handle JSON parsing safely
    let tagsArray = [];
    try {
        tagsArray = JSON.parse(video.tags);
    } catch (error) {
        console.warn("Error parsing tags:", error);
    }

    return `
        <div class="col-md-6 col-sm-6 col-lg-3">
            <a href="/video_detail?id=${video.id}" class="text-decoration-none hover-scale">
                <div class="video-item card-container">
                    <div class="video-item-image">
                        <video 
                            class="img-fluid"
                            muted
                            preload="metadata"
                            poster="${coverImagePath}"
                            onmouseover="handleMouseOver(this)" 
                            onmouseout="handleMouseOut(this, '${coverImagePath}')">
                            <source src="${video.videoUrl}" type="video/mp4">
                            Your browser does not support the video tag.
                        </video>
                        <div class="duration">
                            <span>${video.duration || "N/A"}</span>
                        </div>
                    </div>
                    <div class="card-body">
                        <h3>${video.title}</h3>
                        <p>${video.description}</p>
                    </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 || 'Unknown Author'}</h4>
                                <p class="date">${video.start_date}</p>
                            </div>
                        </div>
                    </div>
                    <div class="lesson-buttons">
                        ${tagsArray.map(tag => `<button class="tag-btn">${tag}</button>`).join('')}
                    </div>
                </div>
            </a>
        </div>
    `;
};

// **Handle mouse over event for the video**
window.handleMouseOver = function (videoElement) {
    videoElement.play().catch((error) => {
        if (error.name !== 'AbortError') {
            console.error('Error playing video:', error);
        }
    });
};

// **Handle mouse out event for the video**
window.handleMouseOut = function (videoElement, posterPath) {
    videoElement.pause();
    videoElement.currentTime = 0;
    setTimeout(() => {
        videoElement.load(); // Force reload to show the poster again
    }, 200);
};





// document.addEventListener('DOMContentLoaded', async function () {
//     const apiUrl = '{{ env("APP_URL") }}/api/videos'; // API endpoint
//     const videoSection = document.querySelector('#video-content-section .container');

//     // Retrieve and decode JWT from localStorage
//     const token = localStorage.getItem('jwtTokencustomer');
//     let userId = null;

//     if (token) {
//         try {
//             const tokenPayload = JSON.parse(atob(token.split('.')[1])); // Decode JWT payload
//             userId = tokenPayload.id; // Extract user ID
//         } catch (error) {
//             console.error("Error decoding JWT:", error);
//         }
//     }

//     if (!userId) {
//         console.warn("User ID not found in JWT.");
//         return; // Stop execution if user ID is missing
//     }

//     try {
//         const response = await fetch(apiUrl);
//         const data = await response.json();

//         if (data.status.statusType === 'S') {
//             const categories = data.data;
//             videoSection.innerHTML = ''; // Clear previous content

//             let userVideos = []; // Array to store videos user has access to

//             // **Loop through each category (e.g., แพทย์, พยาบาล)**
//             Object.keys(categories).forEach(category => {
//                 const videos = categories[category];

//                 // Filter videos the user has access to
//                 const filteredVideos = videos.filter(video => {
//                     return video.permission_type !== "3" || video.register_name.includes(userId);
//                 });

//                 // Add to user's personal video list
//                 userVideos.push(...filteredVideos);

//                 // **If category has at least 1 video, create a section**
//                 if (filteredVideos.length > 0) {
//                     const categorySection = document.createElement('div');
//                     categorySection.className = 'py-5';
//                     categorySection.innerHTML = `
//                         <div class="position-relative mb-4">
//                             <h2>${category}</h2>
//                         </div>
//                         <div class="row g-2"></div>
//                     `;

//                     const videoContainer = categorySection.querySelector('.row');

//                     // Append each video to the category section
//                     filteredVideos.forEach(video => {
//                         const coverImagePath = `/storage/${video.file_cover_img_name}`;
//                         const videoHTML = createVideoHTML(video, coverImagePath);
//                         videoContainer.insertAdjacentHTML('beforeend', videoHTML);
//                     });

//                     // Append category section to the page
//                     videoSection.appendChild(categorySection);
//                 }
//             });

//             // **"วิดีโอของคุณ" (All User's Accessible Videos)**
//             if (userVideos.length > 0) {
//                 const yourVideosSection = document.createElement('div');
//                 yourVideosSection.className = 'py-5';
//                 yourVideosSection.innerHTML = `
//                     <div class="position-relative mb-4">
//                         <h2>วิดีโอของคุณ</h2>
//                         <a href="/list_video_content" class="position-absolute top-50 end-0 translate-middle-y view-all-btn">
//                             View All
//                             <img src="icon/arrow-right.svg" alt="arrow" class="ms-2">
//                         </a>
//                     </div>
//                     <div class="row g-2"></div>
//                 `;

//                 const videoContainer = yourVideosSection.querySelector('.row');

//                 // Append all videos user has access to
//                 userVideos.forEach(video => {
//                     const coverImagePath = `/storage/${video.file_cover_img_name}`;
//                     const videoHTML = createVideoHTML(video, coverImagePath);
//                     videoContainer.insertAdjacentHTML('beforeend', videoHTML);
//                 });

//                 // Insert "วิดีโอของคุณ" at the top
//                 videoSection.insertBefore(yourVideosSection, videoSection.firstChild);
//             }

//         } else {
//             console.error('Failed to fetch videos:', data.status.errorMessage);
//         }
//     } catch (error) {
//         console.error('Error fetching videos:', error);
//     }
// });

// // **Reusable function to create video cards**
// function createVideoHTML(video, coverImagePath) {
//     return `
//         <div class="col-md-6 col-sm-6 col-lg-3">
//             <a href="/video_detail?id=${video.id}" class="text-decoration-none hover-scale">
//                 <div class="video-item card-container">
//                     <div class="video-item-image">
//                         <video 
//                             class="img-fluid"
//                             muted
//                             preload="metadata"
//                             poster="${coverImagePath}"
//                             onmouseover="handleMouseOver(this)" 
//                             onmouseout="handleMouseOut(this, '${coverImagePath}')">
//                             <source src="${video.videoUrl}" type="video/mp4">
//                             Your browser does not support the video tag.
//                         </video>
//                         <div class="duration">
//                             <span>${video.duration}</span>
//                         </div>
//                     </div>
//                     <div class="card-body">
//                         <h3>${video.title}</h3>
//                         <p>${video.description}</p>
//                     </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 || 'Unknown Author'}</h4>
//                                 <p class="date">${video.start_date}</p>
//                             </div>
//                         </div>
//                     </div>
//                     <div class="lesson-buttons">
//                                 <button class="tag-btn">${JSON.parse(video.tags).join(', ')}</button>
//                     </div>
//                 </div>
//             </a>
//         </div>
//     `;
// }

// // **Handle mouse over event for the video**
// window.handleMouseOver = function (videoElement) {
//     videoElement.play().catch((error) => {
//         if (error.name !== 'AbortError') {
//             console.error('Error playing video:', error);
//         }
//     });
// };

// // **Handle mouse out event for the video**
// window.handleMouseOut = function (videoElement, posterPath) {
//     videoElement.pause();
//     videoElement.currentTime = 0;
//     setTimeout(() => {
//         videoElement.load(); // Force reload to show the poster again
//     }, 200);
// };

</script>
@endsection