{{-- <div class="section-container" id="article-section" style="background-image: url('{{ asset('images/article-bg.png') }}');">
    <div class="container">
        <div class="position-relative">
            <h2 class="text-center mb-5">{{$titleArticle}}</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="row g-4">
            @foreach ($articleItems as $article)
                <div class="col-md-6 col-sm-6 col-lg-3">
                    <a href="#" class="card-link">
                        <div class="card-container">
                            <img src="{{ asset('storage/'.$article['file_cover_img_name']) }}" alt="news" class="img-fluid">
                            <h3 class="text-truncate">{{ $article['title'] }}</h3>
                            <p class="mb-2">{{ $article['description'] }}</p>
                            <div class="card-footer d-flex align-items-center">
                                <div class="avatar me-2">
                                    <img src="{{ asset($article['avatar']) }}" alt="avatar" class="img-fluid">
                                </div>
                                <div>
                                    <h4>{{ $article['author'] }}</h4>
                                    <p>{{ $article['date'] }}</p>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            @endforeach
        </div>
        <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="article-section" style="background-image: url('/images/article-bg.png');">
    <div class="container">
        <div class="position-relative">
            <h2 class="text-center mb-5" id="title-article">Loading...</h2>
            <a href="{{('training-courses?type='.$showArticleSection['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="row g-4" id="article-items-container">
            <!-- Articles will be dynamically injected here -->
        </div>
        <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 apiUrl = "{{env('APP_URL')}}/api/contents?type={{$showArticleSection['id']}}";
        const container = document.getElementById('article-items-container');
        const titleElement = document.getElementById('title-article');
        const prevPageButton = document.getElementById('prev-page');
        const nextPageButton = document.getElementById('next-page');

        let currentPage = 1; // Initialize current page
        const itemsPerPage = 4; // Items per page
        let totalPages = 1; // Total pages placeholder

        // Fetch and Populate Articles
        function fetchArticles(page) {
            fetch(`${apiUrl}&page=${page}&limit=${itemsPerPage}`)
                .then(response => response.json())
                .then(data => {
                    if (data.status.statusType === "S") {
                        let articles = [];
                        if (typeof data.data === "object" && data.data !== null) {
                            for (const key in data.data) {
                                if (Array.isArray(data.data[key])) {
                                    articles = articles.concat(data.data[key]);
                                }
                            }
                        }
                        totalPages = Math.ceil(data.total / itemsPerPage);

                        // Update Section Title
                        titleElement.innerText = "{{$titleArticle}}" || "Articles";

                        // Clear Previous Content
                        container.innerHTML = "";

                        // Populate Articles
                        if (articles.length > 0) {
                            articles.forEach(article => {
                                if (article.approved === 'Y') {
                                    const articleHTML = renderArticle(article);
                                    container.innerHTML += articleHTML;
                                }
                            });
                        } else {
                            container.innerHTML = '<p>No approved articles available.</p>';
                        }

                        // Update Pagination Buttons
                        updatePaginationButtons();
                    } else {
                        console.error("Error fetching articles:", data.status.errorMessage);
                        container.innerHTML = '<p>Error fetching articles. Please try again later.</p>';
                        document.getElementById('article-section').style.display = 'none';
                    }
                })
                .catch(error => {
                    console.error("Error:", error);
                    alert("Failed to load articles. Please try again.");
                });
        }
        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;
        }
        // Render Individual Article
        function renderArticle(article) {
            const articleImage = article.file_cover_img_name
                ? `{{ env('APP_URL') }}/storage/${article.file_cover_img_name}`
                : "/images/default-image.jpg"; // Fallback Image
            const avatarImage = article.avatar
                ? `{{ env('APP_URL') }}/${article.avatar}`
                : "/images/avatar-1.png"; // Fallback Avatar

            return `
                <div class="col-md-6 col-sm-6 col-lg-3">
                    <a href="/news-detail?id=${article.id}" class="card-link">
                        <div class="card-container">
                            <img src="${articleImage}" alt="${article.title || "Untitled"}" class="img-fluid">
                            <h3 class="text-truncate">${article.title || "Untitled"}</h3>
                            <div class="mb-2">${truncateText(stripHTML(article.description), 30)}</div>
                            <div class="card-footer d-flex align-items-center">
                                <div class="avatar me-2">
                                    <img src="${avatarImage}" alt="avatar" class="img-fluid">
                                </div>
                                <div>
                                    <h4>${article.author || "Unknown Author"}</h4>
                                    <p>${(article.start_date)}</p>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>`;
        }

        // Update Pagination Buttons
        function updatePaginationButtons() {
            prevPageButton.disabled = currentPage === 1;
            nextPageButton.disabled = currentPage === totalPages;
        }

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

        // Event Listeners for Pagination Buttons
        prevPageButton.addEventListener('click', (e) => {
            e.preventDefault();
            if (currentPage > 1) {
                currentPage--;
                fetchArticles(currentPage);
            }
        });

        nextPageButton.addEventListener('click', (e) => {
            e.preventDefault();
            if (currentPage < totalPages) {
                currentPage++;
                fetchArticles(currentPage);
            }
        });

        // Initial Fetch for the First Page
        fetchArticles(currentPage);
    });
</script>