@extends('layout')

@section('content')
<style>
    #gallery-images {
        display: flex;
        overflow-x: auto;
        gap: 1rem;
        /* scrollbar-width: thin; */
    }

    #gallery-images::-webkit-scrollbar {
        height: 6px;
    }

    #gallery-images::-webkit-scrollbar-thumb {
        background: #aaa;
        border-radius: 3px;
    }

    #gallery-images img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        border-radius: 5px;
        cursor: pointer;
    }

    #main-image {
        width: 100%;
        height: auto;
        object-fit: cover;
        /* border-radius: 5px; */
    }

    .gallery-arrows {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: #fff;
        border: none;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }

    .gallery-arrows.left {
        left: -20px;
    }

    .gallery-arrows.right {
        right: -20px;
    }
    .gallery-arrows {
    background-color: #007bffad;
    color: #fff
}
</style>
{{-- <div class="news-detail-page">
    <div class="container py-5">
        <h1>{{ $news['title'] }}</h1>
        <div class="d-flex gap-3 justify-content-center text-black">
            <div class="d-flex align-items-center gap-2">
                <div class="author-image">
                    @foreach (json_decode($news['image']) as $image)
                        <img src="{{ asset('storage/' . $image) }}" alt="Additional Image">
                    @endforeach
                </div>
                <div>{{ $news['full_name'] }}</div>
            </div> |
            <div><i class="bi bi-calendar-date me-1"></i> {{ $news['update_time'] }}</div> |
            <div><i class="bi bi-eye me-1"></i> {{ $news['views'] }}</div>
        </div>
        <div class="image-container my-5">
            <img src="{{asset('storage/'.$news['file_cover_img_name'])}}" alt="" class="img-fluid">
        </div>
        <div class="content-container">
            {!! $news['description'] !!}
        </div>
        <hr>
        <div class="d-flex justify-content-center gap-3 my-4">
            <div class="share-title"><i class="bi bi-share me-2"></i>Share</div>
            <div class="share-icons d-flex gap-3">
                <a href="#"><img src="{{ asset('images/facebook.png') }}" alt="facebook" class="img-fluid"></a>
                <a href="#"><img src="{{ asset('images/messenger.png') }}" alt="messenger" class="img-fluid"></a>
                <a href="#"><img src="{{ asset('images/line.png') }}" alt="line" class="img-fluid"></a>
                <a href="#"><img src="{{ asset('images/twitter.png') }}" alt="twitter" class="img-fluid"></a>
                <a href="#"><img src="{{ asset('images/instagram.png') }}" alt="instagram" class="img-fluid"></a>
            </div>
        </div>
        <hr>
        <div class="related-news-container mt-5">
            <h2>ข่าวประชาสัมพันธ์ที่เกี่ยวข้อง</h2>
            <div class="row g-4">
                @foreach ($relatedNews as $news)
                    <div class="col-md-6 col-sm-6 col-lg-3">
                        <a href="{{ url('/news-detail?id=' . $news['id']) }}" class="card-link">
                            <div class="card-container">
                                <img src="{{asset('storage/'.$news['file_cover_img_name'])}}" alt="news" class="img-fluid">
                                <h3 class="text-truncate">{{ $news['title'] }}</h3>
                                <p class="mb-2">{{ $news['description'] }}</p>
                                <div class="card-footer">
                                    <div class="avatar">
                                        <img src="{{ asset($news['avatar']) }}" alt="avatar" class="img-fluid">
                                    </div>
                                    <div>
                                        <h4>{{ $news['full_name'] }}</h4>
                                        <p>{{ $news['update_time'] }}</p>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</div> --}}
<div class="news-detail-page">
    <div class="container py-5">
        <h1 id="news-title">Loading...</h1>
        <div class="d-flex gap-3 justify-content-center text-black" id="news-meta">
            <!-- Meta information will be loaded here -->
        </div>
        <div class="container-fluid p-0">
            <!-- Main Image Section -->
            <div class="w-100 h-100">
                <img id="main-image" src="" alt="Main News Image" class="img-fluid shadow">
            </div>
    
            <!-- Gallery Thumbnails -->
            <div class="container-fluid mt-4">
                <div class="d-flex align-items-center justify-content-center position-relative">
                    <!-- Previous Button -->
                    <button id="prev-arrow" class="gallery-arrows left">
                        <i class="bi bi-chevron-left"></i>
                    </button>
    
                    <!-- Gallery Thumbnails -->
                    <div id="gallery-images" class="d-flex">
                        <!-- Thumbnails will be dynamically inserted here -->
                    </div>
    
                    <!-- Next Button -->
                    <button id="next-arrow" class="gallery-arrows right">
                        <i class="bi bi-chevron-right"></i>
                    </button>
                </div>
            </div>
        </div>
        <div class="content-container mt-4" id="news-description">
            <!-- News description will be loaded here -->
        </div>
        <hr>
        {{-- <div class="related-news-container mt-5">
            <h2 id="relate"></h2>
            <div class="row g-4">
                @foreach ($relatedNews as $news)
                    <div class="col-md-6 col-sm-6 col-lg-3">
                        <a href="{{ url('/news-detail?id=' . $news['id']) }}" class="card-link">
                            <div class="card-container">
                                <img src="{{asset('storage/'.$news['file_cover_img_name'])}}" alt="news" class="img-fluid w-100" style="height:160px">
                                <h3 class="text-truncate">{{ $news['title'] }}</h3>
                                <div class="mb-2">{!! Str::limit(strip_tags($news['description'] ?? 'No description available.'), 30, '...') !!}
                                </div>
                                <div class="card-footer">
                                    <div class="avatar">
                                        <img src="{{ asset($news['avatar'] ?? 'images/avatar-1.png') }}" alt="avatar" class="img-fluid">
                                    </div>
                                    <div>
                                        <h4>{{ $news['full_name'] }}</h4>
                                        <p>{{ $news['update_time'] }}</p>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>
        </div> --}}
        <div class="related-news-container mt-5">
            <h2 id="relate">Related News</h2>
            <div class="row g-4" id="related-news-content">
                <!-- Related news will be dynamically populated here -->
            </div>
        </div>
    </div>
</div>
<script>
    document.addEventListener('DOMContentLoaded', () => {
    const urlParams = new URLSearchParams(window.location.search);
    const id = urlParams.get('id'); // Get the 'id' parameter from the query string
    const mainImageElement = document.getElementById("main-image");
    const galleryImagesContainer = document.getElementById("gallery-images");
    const prevArrow = document.getElementById("prev-arrow");
    const nextArrow = document.getElementById("next-arrow");
    if (!id) {
        alert('No news ID provided!');
        return;
    }
    let currentImageIndex = 0;
    let galleryImages = [];
    const apiUrl = "{{env('APP_URL')}}/api/contents/"+id;
    // const relatedApiUrl = `{{ env('APP_URL') }}/api/contents`;

    // Fetch news details
    fetch(apiUrl)
        .then(response => response.json())
        .then(data => {
            if (data.status.statusType === 'S') {
                const news = data.data;
                const relateid = news.category_id;
                console.log(news);
                // @foreach (json_decode($news['images']) as $image)
                //                 <img src="{{ asset('storage/' . $image) }}" alt="Additional Image">
                //             @endforeach
                // Populate the page with news details
                document.getElementById('news-title').innerText = news.title;
                document.getElementById('news-meta').innerHTML = `
                    <div class="d-flex align-items-center gap-2">
                        <div class="author-image">
                            <img src="images/avatar-1.png" alt="avatar" class="img-fluid">
                        </div>
                        <div>${news.create_by || 'Unknown'}</div>
                    </div> |
                    <div><i class="bi bi-calendar-date me-1"></i> ${new Date(news.update_time).toLocaleString()}</div> |
                `;
                    // <div><i class="bi bi-eye me-1"></i> ${news.views || 0}</div>
        
            //    if(news.images != null){
                galleryImages = JSON.parse(news.images);
                    if (galleryImages.length > 0) {
                        mainImageElement.src = `{{env('APP_URL')}}/storage/${galleryImages[0]}`;
                        renderGallery();
                    }
                    else{
                        nextArrow.style.display = "none";
                        prevArrow.style.display = "none";
                        mainImageElement.src =`{{env('APP_URL')}}/storage/${news.file_cover_img_name}`;
                    }
                // }
                
                document.getElementById('relate').innerHTML=news.type_name+"ที่เกี่ยวข้อง";
                // <img src="{{ env('APP_URL') }}/storage/${news.file_cover_img_name}" alt="news" class="img-fluid">
                const description = news.description.replace(/\t/g, '&emsp;'); // Replace tabs (\t) with HTML entity for indentation
                document.getElementById('news-description').innerHTML = description;
                fetchRelatedNews(relateid);
                // Fetch related news
                // return fetch(`${relatedApiUrl}?category_id=${news.category_id}&limit=4`);
            } else {
                throw new Error('Failed to fetch news details.');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Failed to load news details. Please try again.');
        });
        function renderGallery() {
    galleryImagesContainer.innerHTML = "";
    const visibleThumbnails = getVisibleThumbnails(); // Get the thumbnails to display

    visibleThumbnails.forEach((image, index) => {
        const thumbnail = document.createElement("img");
        thumbnail.src = `{{env('APP_URL')}}/storage/${image}`;
        thumbnail.dataset.index = currentImageIndex + index;

        thumbnail.className = "thumbnail";
        thumbnail.addEventListener("click", () => {
            currentImageIndex = parseInt(thumbnail.dataset.index, 10);
            updateMainImage();
        });

        galleryImagesContainer.appendChild(thumbnail);
    });

    updateGalleryArrows();
}

function updateMainImage() {
    mainImageElement.src = `{{env('APP_URL')}}/storage/${galleryImages[currentImageIndex]}`;
    renderGallery(); // Re-render gallery to update visible thumbnails
}

function getVisibleThumbnails() {
    const startIndex = Math.max(0, currentImageIndex - 1); // Ensure at least one previous thumbnail is visible
    const endIndex = Math.min(galleryImages.length, startIndex + 4); // Show up to 4 thumbnails
    return galleryImages.slice(startIndex, endIndex);
}

function updateGalleryArrows() {
    prevArrow.disabled = currentImageIndex === 0;
    nextArrow.disabled = currentImageIndex === galleryImages.length - 1;
}

// Handle "Previous" button click
prevArrow.addEventListener("click", () => {
    if (currentImageIndex > 0) {
        currentImageIndex--;
        updateMainImage();
    }
});

// Handle "Next" button click
nextArrow.addEventListener("click", () => {
    if (currentImageIndex < galleryImages.length - 1) {
        currentImageIndex++;
        updateMainImage();
    }
});
function truncateText(text, maxLength) {
        if (!text) return "No description available.";
        return text.length > maxLength ? text.substring(0, maxLength) + "..." : text;
    }
    // Fetch data from the API
    function fetchRelatedNews(relateid) {
    const apiUrlrelate = `{{env('APP_URL')}}/api/contents/related/${relateid}`;
    fetch(apiUrlrelate)
        .then(response => response.json())
        .then(data => {
            if (data.status.statusType === 'S') {
                const newsList = data.data;
                const newsContainer = document.getElementById('related-news-content');
                newsContainer.innerHTML = ""; // Clear previous content

                newsList.forEach(news => {
                    const newsHTML = `
                        <div class="col-md-6 col-sm-6 col-lg-3">
                            <a href="/news-detail?id=${news.id}" class="card-link">
                                <div class="card-container">
                                    <img src="{{env('APP_URL')}}/storage/${news.file_cover_img_name}" 
                                         alt="news" class="img-fluid w-100" style="height:160px">
                                    <h3 class="text-truncate">${news.title}</h3>
                                    <div class="mb-2">${truncateText(news.description, 30)}</div>
                                    <div class="card-footer">
                                        <div class="avatar">
                                            <img src="${news.avatar ? '{{env('APP_URL')}}/' + news.avatar : '{{env('APP_URL')}}/images/avatar-1.png'}" 
                                                 alt="avatar" class="img-fluid">
                                        </div>
                                        <div>
                                            <h4>${news.create_by}</h4>
                                            <p>${news.start_date}</p>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    `;
                    newsContainer.insertAdjacentHTML('beforeend', newsHTML);
                });
            } else {
                console.error('Error fetching related news:', data.status.errorMessage);
            }
        })
        .catch(error => {
            console.error('Error fetching related news:', error);
        });
}
});

</script>

@endsection