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

{{-- <div class="trick-trip-detail-page">
    <div class="container py-5">
        <h1>{{ $mockData['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">
                    <img src="{{ asset($mockData['avatar']) }}" alt="">
                </div>
                <div>{{ $mockData['author'] }}</div>
            </div> |
            <div><i class="bi bi-calendar-date me-1"></i> {{ $mockData['date'] }}</div> |
            <div><i class="bi bi-eye me-1"></i> {{ $mockData['views'] }}</div>
        </div>
        <div class="image-container my-5">
            <img src="{{ asset($mockData['image']) }}" alt="" class="img-fluid">
        </div>
        <div class="content-container">
            {!! $mockData['content'] !!}
        </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-trick-trip-container mt-5">
            <h2>Trick & Trip ที่เกี่ยวข้อง</h2>
            <div class="row g-4 mt-2">
                @foreach ($relatedTrickTrip as $trickTrip)
                    <div class="col-sm-6 col-lg-4"> --}}
                        {{-- <a href="{{ route('trick_trip.detail', ['id' => $trickTrip['id']]) }}" class="item-list"> --}}
                        {{-- <a href="{{ ('trick-trip-detail') }}" class="item-list">

                            <div class="item-list-image">
                                <img src="{{ asset($trickTrip['image']) }}" alt="trick-trip" class="img-fluid">
                            </div>
                            <div class="content">
                                <div>
                                    <h3 class="title">{{ $trickTrip['title'] }}</h3>
                                    <p class="description">{{ $trickTrip['description'] }}</p>
                                </div>
                                <p class="date">{{ $trickTrip['date'] }}</p>
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</div> --}}

<style>
    .gallery-container {
    width: 100%;
    margin: 20px auto;
    text-align: center;
}

.main-image-container {
    text-align: center;
    margin-bottom: 20px;
}

.main-image {
    width: 80%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.thumbnails-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    gap: 10px;
}

.thumbnail-gallery {
    display: flex;
    overflow-x: auto;
    gap: 10px;
}

.thumbnail-gallery img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.3s ease;
}



.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="trick-trip-detail-page">
    <div class="container py-5">
        <h1 id="title">Loading...</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">
                    <img id="author-avatar" src="" alt="" class="img-fluid">
                </div>
                <div id="author">Loading...</div>
            </div> |
            <div><i class="bi bi-calendar-date me-1"></i> <span id="date">Loading...</span></div> |
            {{-- <div><i class="bi bi-eye me-1"></i> <span id="views">0</span></div> --}}
        </div>

        <!-- Main Image Section -->
        <div class="image-container my-5">
            {{-- <img id="main-image" src="" alt="" class="img-fluid w-100"> --}}
        </div>

        <!-- Gallery Section -->
        <div class="gallery-container">
            <!-- Main Image -->
            <div class="main-image-container">
                <img id="main-image" src="" alt="Main Image" class="main-image w-100">
            </div>
        
            <!-- Thumbnails -->
            <div class="thumbnails-container">
                <button id="prev-arrow" class="gallery-arrows left">
                    <i class="bi bi-chevron-left"></i>
                </button>
                <div id="thumbnail-gallery" class="thumbnail-gallery">
                    <!-- Thumbnails will be dynamically added here -->
                </div>
                <button id="next-arrow" class="gallery-arrows right">
                    <i class="bi bi-chevron-right"></i>
                </button>
            </div>
        </div>
        <div class="content-container mt-4" id="content">Loading...</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="/images/facebook.png" alt="facebook" class="img-fluid"></a>
                <a href="#"><img src="/images/messenger.png" alt="messenger" class="img-fluid"></a>
                <a href="#"><img src="/images/line.png" alt="line" class="img-fluid"></a>
                <a href="#"><img src="/images/twitter.png" alt="twitter" class="img-fluid"></a>
                <a href="#"><img src="/images/instagram.png" alt="instagram" class="img-fluid"></a>
            </div>
        </div>
        <hr>
        <div class="related-trick-trip-container mt-5">
            <h2>Trick & Trip ที่เกี่ยวข้อง</h2>
            <div class="row g-4 mt-2">
               
            </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 URL

    const mainImage = document.getElementById('main-image');
    const galleryThumbnails = document.getElementById('thumbnail-gallery');
    const prevArrow = document.getElementById('prev-arrow');
    const nextArrow = document.getElementById('next-arrow');
    const titleElement = document.getElementById('title');
    const authorElement = document.getElementById('author');
    const dateElement = document.getElementById('date');
    // const viewsElement = document.getElementById('views');
    const contentElement = document.getElementById('content');
    const authorAvatar = document.getElementById('author-avatar');
    const relatedContainer = document.querySelector('.related-trick-trip-container .row');

    let galleryImages = [];
    let currentImageIndex = 0;

    if (!id) {
        alert('No trick-trip ID provided!');
        return;
    }

    const apiUrl = `{{ env('APP_URL') }}/api/contents/${id}`;

    // Fetch trick-trip details
    fetch(apiUrl)
        .then(response => response.json())
        .then(data => {
            if (data.status.statusType === "S") {
                const trickTrip = data.data;

                // Populate Title, Author, Date, Views, Content
                titleElement.innerText = trickTrip.title || 'No title available';
                authorElement.innerText = trickTrip.create_by || 'Unknown Author';
                dateElement.innerText = (trickTrip.start_date);
                // viewsElement.innerText = trickTrip.views || 0;
                contentElement.innerHTML = trickTrip.description || 'No content available';
                authorAvatar.src = "images/avatar-1.png";
                galleryImages = JSON.parse(trickTrip.images);
              
                // Populate Main Image and Gallery
                if (galleryImages.length > 0) {
                    console.log('aaa');
                    mainImage.src = `{{ env('APP_URL') }}/storage/${galleryImages[0]}`;
                    renderGalleryThumbnails();
                    updateArrows();
                } else {
                    // Fallback for no images
                    const src= `{{ env('APP_URL') }}/storage/${trickTrip.file_cover_img_name}`;
                    nextArrow.style.display = "none"; // Hide if only one image
                    prevArrow.style.display = "none";
                    mainImage.src = src; // Replace with your fallback image
                    // galleryThumbnails.innerHTML = '<p>No gallery images available.</p>';
                }
                fetchRelatedTrickTrips(trickTrip.category_id);
              
            } else {
                throw new Error('Failed to fetch trick-trip details.');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Failed to load trick-trip details. Please try again.');
        });

    // Render gallery thumbnails
    function renderGalleryThumbnails() {
        galleryThumbnails.innerHTML = ''; // Clear existing thumbnails

        galleryImages.forEach((image, index) => {
            const imgElement = document.createElement('img');
            imgElement.src = `{{ env('APP_URL') }}/storage/${image}`;
            imgElement.alt = `Thumbnail ${index + 1}`;
            imgElement.dataset.index = index;

            // Add click event to change main image
            imgElement.addEventListener('click', () => {
                currentImageIndex = index;
                updateMainImage();
            });

            galleryThumbnails.appendChild(imgElement);
        });
    }

    // Update the main image
    function updateMainImage() {
        mainImage.src = `{{ env('APP_URL') }}/storage/${galleryImages[currentImageIndex]}`;
        updateArrows();
    }

    // Update navigation arrows
    function updateArrows() {
        prevArrow.disabled = currentImageIndex === 0;
        nextArrow.disabled = currentImageIndex === galleryImages.length - 1;
    }

    // Arrow navigation
    prevArrow.addEventListener('click', () => {
        if (currentImageIndex > 0) {
            currentImageIndex--;
            updateMainImage();
        }
    });

    nextArrow.addEventListener('click', () => {
        if (currentImageIndex < galleryImages.length - 1) {
            currentImageIndex++;
            updateMainImage();
        }
    });

    // Render related Trick & Trips
    function fetchRelatedTrickTrips(categoryId) {
        const relatedApiUrl = `{{ env('APP_URL') }}/api/contents/related/${categoryId}`;
        fetch(relatedApiUrl)
            .then(response => response.json())
            .then(data => {
                if (data.status.statusType === "S") {
                    renderRelatedTrickTrips(data.data);
                } else {
                    throw new Error('Failed to fetch related trick-trips.');
                }
            })
            .catch(error => {
                console.error('Error fetching related trick-trips:', error);
                relatedContainer.innerHTML = '<p>No related Trick & Trips available.</p>';
            });
    }

    // Render related Trick & Trips
    function renderRelatedTrickTrips(relatedTricks) {
        relatedContainer.innerHTML = ''; // Clear existing content

        relatedTricks.forEach(trickTrip => {
            const relatedItem = document.createElement('div');
            relatedItem.className = 'col-md-6 col-sm-6 col-lg-3';

            relatedItem.innerHTML = `
                <a href="/trick-trip-detail?id=${trickTrip.id}" class="card-link">
                    <div class="card-container">
                    <div class="item-list-image">
                        <img src="{{ env('APP_URL') }}/storage/${trickTrip.file_cover_img_name}" alt="trick-trip" class="img-fluid w-100" style="height:200px">
                    </div>
                    <div class="content mt-2">
                        <div>
                            <h3 class="title">${trickTrip.title || 'No title available'}</h3>
                            <p class="description">${trickTrip.description || 'No description available'}</p>
                        </div>
                        <div class="card-footer">
                                        <div class="avatar">
                                            <img src="${trickTrip.avatar ? '{{env('APP_URL')}}/' + trickTrip.avatar : '{{env('APP_URL')}}/images/avatar-1.png'}" 
                                                 alt="avatar" class="img-fluid">
                                        </div>
                                        <div>
                                            <h4>${trickTrip.create_by}</h4>
                                            <p>${trickTrip.start_date}</p>
                                        </div>
                                    </div>
                    </div>
                    </div>
                </a>
            `;
            relatedContainer.appendChild(relatedItem);
        });
    }

    // Format date utility function
    function formatDate(dateString) {
        const date = new Date(dateString);
        return date.toLocaleDateString() + " " + date.toLocaleTimeString();
    }
});



</script>

@endsection