{{-- <div class="section-container" id="trick-trip-section"
    style="background-image: url('{{ asset('images/trick-trip-bg.png') }}');">
    <div class="container">
        <div class="position-relative">
            <h2 class="text-center mb-5">{{$titleTrick}}</h2>
            <a href="#" class="position-absolute top-50 end-0 translate-middle-y view-all-btn">View All 
                <img src="{{ asset('icon/arrow-right.svg') }}" alt="arrow" class="ms-2">
            </a>
        </div>
        <div class="list-container">
            <!-- First Item -->
            <div class="first-item">
                <a href="#">
                    <div>
                        <img src="{{ asset($trickTripItems[0]['image']) }}" alt="trick-trip" class="img-fluid">
                    </div>
                    <div class="content">
                        <h3 class="text-truncate">{{ $trickTripItems[0]['title'] }}</h3>
                        <p class="mb-2">{{ $trickTripItems[0]['description'] }}</p>
                        <p class="date">{{ $trickTripItems[0]['date'] }}</p>
                    </div>
                </a>
            </div>

            <!-- Other Items -->
            <div class="item-list-container">
                @for ($i = 1; $i < count($trickTripItems); $i++)
                    <a href="#" class="item-list">
                        <div class="item-list-image bg-danger">
                            <img src="{{ asset($trickTripItems[$i]['image']) }}" alt="trick-trip" class="img-fluid">
                        </div>
                        <div class="content">
                            <h3 class="">{{ $trickTripItems[$i]['title'] }}</h3>
                            <p class="mb-2">{{ $trickTripItems[$i]['description'] }}</p>
                            <p class="date">{{ $trickTripItems[$i]['date'] }}</p>
                        </div>
                    </a>
                @endfor
            </div>
        </div>

        <!-- Pagination Controls -->
        <div class="d-flex justify-content-center gap-3 mt-4 py-4">
            <a href="#" class="btn btn-light"><i class="bi bi-chevron-left"></i></a>
            <a href="#" class="btn btn-light"><i class="bi bi-chevron-right"></i></a>
        </div>
    </div>
</div> --}}
<div class="section-container" id="trick-trip-section" style="background-image: url('/images/trick-trip-bg.png');">
    <div class="container">
        <div class="position-relative">
            <h2 class="text-center mb-5" id="trick-trip-title">Loading...</h2>
            <a href="{{('trick-trip?type='.$showTrickSection['id'])}}" 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="list-container">
            <!-- First Item -->
            <div id="first-item-container" class="first-item"></div>

            <!-- Other Items -->
            <div class="item-list-container" id="item-list-container">
                <!-- Additional items will be dynamically injected here -->
            </div>
        </div>

        <!-- Pagination Controls -->
        <div class="d-flex justify-content-center gap-3 mt-4 py-4">
            <button class="btn btn-light" id="prev-page"><i class="bi bi-chevron-left"></i></button>
            <button class="btn btn-light" id="next-page"><i class="bi bi-chevron-right"></i></button>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const trick_sec = document.getElementById('trick-trip-section');
        const apiUrl = "{{env('APP_URL')}}/api/contents?type={{$showTrickSection['id']}}";
        const titleContainer = document.getElementById('trick-trip-title');
        const firstItemContainer = document.getElementById('first-item-container');
        const itemListContainer = document.getElementById('item-list-container');
        const prevPageButton = document.getElementById('prev-page');
        const nextPageButton = document.getElementById('next-page');
        const itemsPerPage = 4; // Number of items per page
        let currentPage = 1;
        let totalPages = 1;
        let approvedItems = []; // To store approved items

        // Fetch data from the API
        fetch(apiUrl)
            .then(response => response.json())
            .then(data => {
                if (data.status.statusType === "S") {
                    let trickTripItems = [];
                    if (typeof data.data === "object" && data.data !== null) {
                        for (const key in data.data) {
                            if (Array.isArray(data.data[key])) {
                                trickTripItems = trickTripItems.concat(data.data[key]);
                            }
                        }
                    }
                    // const trickTripItems = data.data || [];

                    // Filter approved items
                    approvedItems = trickTripItems.filter(item => item.approved === 'Y');
                    totalPages = Math.ceil(approvedItems.length / itemsPerPage);

                    // Update the title
                    titleContainer.innerText = "Trick & Trip";

                    // Render the first page
                    renderPage();
                } else {
                    // console.error("Error fetching trick-trip items:", data.status.errorMessage);
                    titleContainer.innerText = "Failed to load Trick & Trip items.";
                    trick_sec.style.display = 'none';
                }
            })
            .catch(error => {
                console.error("Error:", error);
                titleContainer.innerText = "Error loading Trick & Trip data.";
            });

        // Render the current page
        function renderPage() {
            const startIndex = (currentPage - 1) * itemsPerPage;
            const endIndex = Math.min(startIndex + itemsPerPage, approvedItems.length);
            const pageItems = approvedItems.slice(startIndex, endIndex);

            // Render the first item if it's the first page
            if (startIndex === 0 && approvedItems.length > 0) {
                const firstItem = approvedItems[0];
                firstItemContainer.innerHTML = renderItem(firstItem, true);
            } else if (approvedItems.length === 0) {
                firstItemContainer.innerHTML = `<p>No items available.</p>`;
            }

            // Render the other items
            itemListContainer.innerHTML = ""; // Clear previous items
            pageItems.forEach(item => {
                itemListContainer.innerHTML += renderItem(item, false);
            });

            // Update pagination controls
            prevPageButton.disabled = currentPage === 1;
            nextPageButton.disabled = currentPage === totalPages;
        }
        function stripHTML(html) {
                        const tempDiv = document.createElement("div");
                        tempDiv.innerHTML = html || ""; // Safeguard for null/undefined values
                        return tempDiv.textContent || tempDiv.innerText || "";
                    }
                    function truncateText(text, maxLength) {
                        if (!text) return "No description available."; // Safeguard for null/undefined values
                        return text.length > maxLength ? text.substring(0, maxLength) + "..." : text;
                    }
        // Function to render an individual item
        function renderItem(item, isFirstItem = false) {
            const itemImage = item.file_cover_img_name
                ? `{{ env('APP_URL') }}/storage/${item.file_cover_img_name}`
                : "/images/default-image.jpg"; // Fallback image

            return isFirstItem
                ? `
                    <a href="trick-trip-detail?id=${item.id}">
                        <div>
                            <img src="${itemImage}" alt="${item.title}" class="img-fluid w-100" style="height:320px;">
                        </div>
                        <div class="content w-auto">
                            <h3 class="text-truncate">${item.title || "Untitled"}</h3>
                           <div class="mb-2">${truncateText(stripHTML(item.description), 30)}</div>
                            <p class="date">${(item.start_date)}</p>
                        </div>
                    </a>`
                : `
                    <a href="trick-trip-detail?id=${item.id}" class="item-list">
                        <div class="item-list-image bg-danger">
                            <img src="${itemImage}" alt="${item.title}" class="img-fluid h-100">
                        </div>
                        <div class="content">
                            <h3 class="">${item.title || "Untitled"}</h3>
                            <p class="mb-2">${item.description || "No description available."}</p>
                            <p class="date">${(item.start_date)}</p>
                        </div>
                    </a>`;
        }

        // Format the date
        function formatDate(dateString) {
            if (!dateString) return "Unknown date";
            const date = new Date(dateString);
            if (isNaN(date)) return "Invalid date";
            return date.toLocaleDateString() + " " + date.toLocaleTimeString();
        }

        // Pagination event listeners
        prevPageButton.addEventListener('click', () => {
            if (currentPage > 1) {
                currentPage--;
                renderPage();
            }
        });

        nextPageButton.addEventListener('click', () => {
            if (currentPage < totalPages) {
                currentPage++;
                renderPage();
            }
        });
    });
</script>