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

{{-- <div id="news-page" class="page-container">
    <div class="container py-5">
        <h1>{{$newstitlename}}</h1>
        @foreach ($newsGrouped as $categoryName => $newsItems)
            <!-- Section Header -->
            <div class="my-5">
                <h2>{{ $categoryName }}</h2>
                <hr>
                <div class="row g-4">
                    @foreach ($newsItems 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->author }}</h4>
                                            <p>{{ \Carbon\Carbon::parse($news->create_time)->format('d/m/Y') }}</p>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    @endforeach
                </div>

                <!-- Pagination -->
                <div class="pagination-container d-flex justify-content-center mt-4">
                    {{ $newsItems->links('pagination::bootstrap-4') }}
                </div>
            </div>
        @endforeach
    </div>
</div> --}}
<div id="news-page" class="page-container">
    <div class="container py-5">
        <h1 id="news-title"></h1>

        <!-- Dynamic News Sections -->
        <div id="news-categories">
            <!-- Each category will be dynamically rendered here -->
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
    const urlParams = new URLSearchParams(window.location.search);
    const typeParam = urlParams.get("type");
    const apiUrl = "{{ env('APP_URL') }}/api/contents?type=" + typeParam;
    const newsCategoriesContainer = document.getElementById("news-categories");
    const title = document.getElementById('news-title');
    const itemsPerPage = 8; // Number of items per page

    // Fetch news items from the API
    fetch(apiUrl)
        .then(response => response.json())
        .then(data => {
            if (data.status.statusType === "S") {
                const groupedNews = data.data; // Assume API returns grouped categories
                renderCategories(groupedNews);
            } else {
                console.error("Error fetching news:", data.status.errorMessage);
            }
        })
        .catch(error => {
            console.error("Fetch error:", error);
        });

    // Render all categories
    function renderCategories(categories) {
        newsCategoriesContainer.innerHTML = ""; // Clear existing content

        for (const [categoryName, newsItems] of Object.entries(categories)) {
            renderCategory(categoryName, newsItems);
        }
    }

    // Render a single category
    function renderCategory(categoryName, newsItems) {
        const totalPages = Math.ceil(newsItems.length / itemsPerPage);
        let currentPage = 1; // Track the current page for this category

        // Create the category section
        const categoryContainer = document.createElement('div');
        categoryContainer.className = "my-5";
        categoryContainer.innerHTML = `
            <h2>${categoryName}</h2>
            <hr>
            <div id="news-section-${categoryName}" class="row g-4"></div>
            <nav id="pagination-${categoryName}" class="pagination-container d-flex justify-content-center mt-4">
                <ul class="pagination"></ul>
            </nav>
        `;
        newsCategoriesContainer.appendChild(categoryContainer);

        // Render the first page of news for this category
        renderNewsPage(categoryName, newsItems, currentPage);

        // Render pagination controls if necessary
        if (totalPages > 1) {
            renderPaginationControls(categoryName, newsItems, totalPages, currentPage);
        }
    }

    // Render news items for a specific page
    function renderNewsPage(categoryName, newsItems, page) {
        const startIndex = (page - 1) * itemsPerPage;
        const endIndex = startIndex + itemsPerPage;
        const newsToDisplay = newsItems.slice(startIndex, endIndex);

        const newsSection = document.getElementById(`news-section-${categoryName}`);
        newsSection.innerHTML = ""; // Clear existing content

        newsToDisplay.forEach(news => {
            if (news.approved === "Y") {
                newsSection.innerHTML += renderNewsItem(news);
            }
        });
    }

    // Render pagination controls
    function renderPaginationControls(categoryName, newsItems, totalPages, currentPage) {
        const paginationContainer = document.getElementById(`pagination-${categoryName}`).querySelector('.pagination');
        paginationContainer.innerHTML = ""; // Clear existing controls

        // Add "Previous" button
        paginationContainer.innerHTML += `
            <li class="page-item ${currentPage === 1 ? "disabled" : ""}">
                <a href="#" class="page-link" data-page="${currentPage - 1}">&laquo;</a>
            </li>`;

        // Add page numbers
        for (let i = 1; i <= totalPages; i++) {
            paginationContainer.innerHTML += `
                <li class="page-item ${i === currentPage ? "active" : ""}">
                    <a href="#" class="page-link" data-page="${i}">${i}</a>
                </li>`;
        }

        // Add "Next" button
        paginationContainer.innerHTML += `
            <li class="page-item ${currentPage === totalPages ? "disabled" : ""}">
                <a href="#" class="page-link" data-page="${currentPage + 1}">&raquo;</a>
            </li>`;

        // Add click event listeners for pagination links
        paginationContainer.querySelectorAll('.page-link').forEach(link => {
            link.addEventListener('click', (event) => {
                event.preventDefault();
                const selectedPage = parseInt(event.target.getAttribute('data-page'));
                if (selectedPage > 0 && selectedPage <= totalPages && selectedPage !== currentPage) {
                    currentPage = selectedPage;
                    renderNewsPage(categoryName, newsItems, currentPage); // Render the new page
                    renderPaginationControls(categoryName, newsItems, totalPages, currentPage); // Update pagination controls
                }
            });
        });
    }

    // Render individual news items
    function renderNewsItem(news) {
        const newsImage = news.file_cover_img_name
            ? `{{ env('APP_URL') }}/storage/${news.file_cover_img_name}`
            : "/images/default-image.jpg";

        const avatarImage = news.avatar
            ? `{{ env('APP_URL') }}/${news.avatar}`
            : "/images/avatar-1.png";
            title.innerHTML = news.type_name;

        return `
            <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="${newsImage}" alt="${news.title || "Untitled"}" class="w-100" style="height: 160px;">
                        <h3 class="text-truncate">${news.title || "Untitled"}</h3>
                        <div class="mb-2">${truncateText(news.description, 30)}</div>
                        <div class="card-footer">
                            <div class="avatar">
                                <img src="${avatarImage}" alt="avatar" class="img-fluid">
                            </div>
                            <div>
                                <h4>${news.author || "Unknown Author"}</h4>
                                <p>${(news.start_date)}</p>
                            </div>
                        </div>
                    </div>
                </a>
            </div>`;
    }

    // Utility to truncate text
    function truncateText(text, maxLength) {
        if (!text) return "No description available.";
        return text.length > maxLength ? text.substring(0, maxLength) + "..." : text;
    }

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

</script>

{{-- <div id="news-page" class="page-container">
    <div class="container py-5">
        <h1 id="main-title">News</h1>

        <!-- Categories will be dynamically added here -->
        <div id="news-container"></div>
    </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
    const urlParams = new URLSearchParams(window.location.search);
    const typeParam = urlParams.get("type"); // Get the value of the 'type' parameter

    console.log("Type parameter:", typeParam);

    // Use `typeParam` to fetch data
    const apiUrl = `{{ env('APP_URL') }}/api/contents?type=${typeParam}`;
    const newsContainer = document.getElementById("news-container");

    fetch(apiUrl)
        .then(response => response.json())
        .then(data => {
            if (data.status.statusType === "S") {
                const items = data.data;

                // Filter items by `approved === 'Y'`
                const approvedItems = items.filter(item => item.approved === 'Y');

                // Group items by category
                const groupedByCategory = approvedItems.reduce((acc, item) => {
                    if (!acc[item.category_id]) {
                        acc[item.category_id] = {
                            name: item.category_name,
                            items: [],
                        };
                    }
                    acc[item.category_id].items.push(item);
                    return acc;
                }, {});

                // Render each category
                for (const [categoryId, categoryData] of Object.entries(groupedByCategory)) {
                    renderCategory(categoryId, categoryData);
                }
            } else {
                console.error("Error fetching data:", data.status.errorMessage);
            }
        })
        .catch(error => {
            console.error("Error:", error);
        });

    function renderCategory(categoryId, categoryData) {
        const categoryContainer = document.createElement("div");
        categoryContainer.classList.add("my-5");

        const categoryTitle = document.createElement("h2");
        categoryTitle.textContent = categoryData.name;

        const contentRow = document.createElement("div");
        contentRow.classList.add("row", "g-4");
        contentRow.setAttribute("data-category-id", categoryId);

        // Pagination settings
        const itemsPerPage = 8;
        let currentPage = 1;
        const totalPages = Math.ceil(categoryData.items.length / itemsPerPage);

        // Function to render paginated content
        function renderPage(page) {
            contentRow.innerHTML = ""; // Clear the current content

            const startIndex = (page - 1) * itemsPerPage;
            const endIndex = Math.min(startIndex + itemsPerPage, categoryData.items.length);
            const paginatedItems = categoryData.items.slice(startIndex, endIndex);

            paginatedItems.forEach(item => {
                const itemHTML = `
                    <div class="col-md-6 col-sm-6 col-lg-3">
                        <a href="news-detail?id=${item.id}" class="card-link">
                            <div class="card-container">
                                <img src="{{ env('APP_URL') }}/storage/${item.file_cover_img_name}" alt="news" class="img-fluid">
                                <h3 class="text-truncate">${item.title}</h3>
                                <p class="mb-2">${item.description}</p>
                                <div class="card-footer">
                                    <div class="avatar">
                                        <img src="{{ env('APP_URL') }}/storage/${item.avatar || 'default-avatar.png'}" alt="avatar" class="img-fluid">
                                    </div>
                                    <div>
                                        <h4>${item.create_by || "N/A"}</h4>
                                        <p>${formatDate(item.create_time)}</p>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                `;
                contentRow.innerHTML += itemHTML;
            });

            // Update pagination controls
            pagination.innerHTML = createPaginationControls(page, totalPages);
        }

        // Pagination controls
        const pagination = document.createElement("div");
        pagination.classList.add("pagination-container", "d-flex", "justify-content-center", "mt-4");

        // Handle pagination click events
        pagination.addEventListener("click", (event) => {
            if (event.target.dataset.page) {
                currentPage = parseInt(event.target.dataset.page);
                renderPage(currentPage);
            }
        });

        // Render the first page
        renderPage(currentPage);

        // Add category title, content, and pagination to the container
        categoryContainer.appendChild(categoryTitle);
        categoryContainer.appendChild(contentRow);
        categoryContainer.appendChild(pagination);
        newsContainer.appendChild(categoryContainer);
    }

    function createPaginationControls(currentPage, totalPages) {
    let paginationHTML = '<nav aria-label="Page navigation"><ul class="pagination pagination-sm justify-content-center">';

    // Previous button
    paginationHTML += `
        <li class="page-item ${currentPage === 1 ? "disabled" : ""}">
            <button class="page-link" data-page="${currentPage - 1}" ${currentPage === 1 ? "disabled" : ""}>
                <i class="bi bi-chevron-left"></i>
            </button>
        </li>`;

    // Page numbers
    for (let i = 1; i <= totalPages; i++) {
        paginationHTML += `
            <li class="page-item ${i === currentPage ? "active" : ""}">
                <button class="page-link" data-page="${i}">${i}</button>
            </li>`;
    }

    // Next button
    paginationHTML += `
        <li class="page-item ${currentPage === totalPages ? "disabled" : ""}">
            <button class="page-link" data-page="${currentPage + 1}" ${currentPage === totalPages ? "disabled" : ""}>
                <i class="bi bi-chevron-right"></i>
            </button>
        </li>`;

    paginationHTML += '</ul></nav>';

    return paginationHTML;
}


    function formatDate(dateString) {
        const date = new Date(dateString);
        return date.toLocaleDateString("en-GB", { year: "numeric", month: "short", day: "numeric" });
    }
});
</script> --}}



@endsection