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

{{-- <div class="page-container training-courses-page">
  <div class="container py-5">
      <h1 id="title"></h1>

      <div class="my-5">
          <div class="row g-4" id="courses-container">
              <!-- Courses will be dynamically inserted here -->
          </div>

          <!-- Reload/Load More Button -->
          <div class="position-relative" style="margin-top: 100px;">
              <button id="load-more-button" class="reload-button">
                  <i class="bi bi-chevron-down"></i>
              </button>
              <hr>
          </div>
      </div>
  </div>
</div> --}}

<div class="page-container training-courses-page">
    <div class="container py-5">
        <h1 id="title"></h1>
        <div class="my-5">
            <div id="newsCategoriesContainer" class="container">
                <!-- Categories will be rendered here -->
              </div>
            <!-- Reload/Load More Button -->
            <div class="position-relative" style="margin-top: 100px;">
                <button id="load-more-button" class="reload-button bg-primary">
                    <i class="bi bi-chevron-down"></i>
                </button>
                <hr>
            </div>
        </div>
    </div>
  </div>
  
  <script>
    document.addEventListener("DOMContentLoaded", function () {
        const title = document.getElementById('title');
        const urlParams = new URLSearchParams(window.location.search);
        const typeParam = urlParams.get("type");
        const newsCategoriesContainer = document.getElementById("newsCategoriesContainer");
        const loadMoreButton = document.getElementById("load-more-button");
        const apiUrl = "{{ env('APP_URL') }}/api/contents?type="+typeParam;
        const itemsPerLoad = 4; // Number of items to load per category per click
        let currentLoadedItemsPerCategory = {}; // Track the loaded items per category

        let categoriesData = {}; // Store fetched categories globally

        // Fetch data from the API
        fetch(apiUrl)
            .then((response) => response.json())
            .then((data) => {
                if (data.status.statusType === "S") {
                    categoriesData = data.data; // Grouped by category
                    renderCategories(categoriesData);

                    // Initially load items for all categories
                    for (const categoryName in categoriesData) {
                        currentLoadedItemsPerCategory[categoryName] = 0; // Initialize tracking
                        loadMoreItems(categoryName);
                    }

                    // Show the Load More button if there are items to load
                    updateLoadMoreButtonState();
                } else {
                    console.error("Error fetching data:", data.status.errorMessage);
                }
            })
            .catch((error) => {
                console.error("Fetch error:", error);
            });

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

            for (const [categoryName] of Object.entries(categories)) {
                // Create category container
                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>
                `;
                newsCategoriesContainer.appendChild(categoryContainer);
            }
        }
        function truncateText(text, maxLength) {
            if (!text) return "No description available.";
            return text.length > maxLength ? text.substring(0, maxLength) + "..." : text;
        }
        // Function to load more items for a specific category
        function loadMoreItems(categoryName) {
            const newsItems = categoriesData[categoryName];
            const newsSection = document.getElementById(`news-section-${categoryName}`);
            const startIndex = currentLoadedItemsPerCategory[categoryName];
            const endIndex = Math.min(startIndex + itemsPerLoad, newsItems.length);
            const itemsToDisplay = newsItems.slice(startIndex, endIndex);

            itemsToDisplay.forEach((news) => {
                if (news.approved === "Y") {
                    title.innerHTML=news.type_name;
                    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.title}" class="img-fluid" 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 small-rounded">
                                            <img src="images/avatar-1.png" alt="avatar" class="rounded-circle" style="width: 30px; height: 30px;">
                                        </div>
                                        <div>
                                            <h4>${news.author || "Unknown Author"}</h4>
                                            <p>${(news.start_date)}</p>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    `;
                    newsSection.innerHTML += newsHTML;
                }
            });

            // Update the count of loaded items
            currentLoadedItemsPerCategory[categoryName] = endIndex;
        }

        // Update Load More button state
        function updateLoadMoreButtonState() {
            const allCategoriesLoaded = Object.keys(categoriesData).every(
                (categoryName) =>
                    currentLoadedItemsPerCategory[categoryName] >= categoriesData[categoryName].length
            );

            // Show or hide the button based on whether all items are loaded
            loadMoreButton.style.display = allCategoriesLoaded ? "none" : "block";
        }

        // Event listener for the single Load More button
        loadMoreButton.addEventListener("click", function () {
            for (const categoryName in categoriesData) {
                const newsItems = categoriesData[categoryName];
                if (
                    currentLoadedItemsPerCategory[categoryName] <
                    newsItems.length
                ) {
                    loadMoreItems(categoryName);
                }
            }

            // Check and update button visibility
            updateLoadMoreButtonState();
        });
    });
</script>
  
  <style>
    .reload-button {
        background: #f8f9fa;
        border: 1px solid #ddd;
        border-radius: 50%;
        padding: 10px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: auto;
        width: 50px;
        height: 50px;
    }
  
    .reload-button:hover {
        background: #e9ecef;
    }
  </style>
  



@endsection