@extends('layout')
@section('content')
{{-- <div class="page-container trick-trip-page">
    <div class="container py-5">
        <h1>Trick & Trip</h1>

        <div class="my-5">
            <div class="row g-4">
                @foreach ($trickTripItems as $item)
                    <div class="col-sm-6 col-lg-4">
                        <a href="{{ url('trick-trip-detail') }}" class="item-list">
                            <div class="item-list-image">
                                <img src="{{ asset($item['image']) }}" alt="trick-trip" class="img-fluid">
                            </div>
                            <div class="content">
                                <div>
                                    <h3 class="title">{{ $item['title'] }}</h3>
                                    <p class="description">{{ $item['description'] }}</p>
                                </div>
                                <p class="date">{{ $item['date'] }}</p>
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>
        </div>

        <div class="position-relative" style="margin-top: 100px;">
            <div class="reload-button">
                <i class="bi bi-chevron-down"></i>
            </div>
            <hr>
        </div>
    </div>
</div> --}}
{{-- 
<div class="page-container trick-trip-page">
  <div class="container py-5">
      <h1 id="trick-trip-title">Trick & Trip</h1>

      <!-- Content Section -->
      <div class="my-5">
          <div class="row g-4" id="trickTripContent">
              <!-- Dynamic content will be injected here -->
          </div>
      </div>

      <!-- Pagination Section -->
      <div class="position-relative" style="margin-top: 100px;">
          <div class="reload-button" id="loadMoreButton">
              <i class="bi bi-chevron-down"></i>
          </div>
          <hr>
      </div>
  </div>
</div>

<s>
 
  document.addEventListener("DOMContentLoaded", function () {
  const contentContainer = document.getElementById("trickTripContent");
  const loadMoreButton = document.getElementById("loadMoreButton");
  const titleContainer = document.getElementById("trick-trip-title");
  const urlParams = new URLSearchParams(window.location.search);
  const typeParam = urlParams.get("type");
  const apiUrl = "{{ env('APP_URL') }}/api/contents?type=" + typeParam;

  const itemsPerLoad = 9; // Number of items to show per load
  let allItems = []; // Store all fetched items
  let displayedItems = 0; // Counter for displayed items

  // Format date utility function
  function formatDate(dateString) {
    const options = { year: "numeric", month: "long", day: "numeric" };
    return new Date(dateString).toLocaleDateString(undefined, options);
  }

  // Fetch data from API
  function fetchData() {
    fetch(apiUrl)
      .then(response => response.json())
      .then(data => {
        if (data.status.statusType === "S") {
          allItems = data.data.filter(item => item.approved === "Y");
          console.log(allItems);
          if (allItems.length > 0) {
            titleContainer.innerText = allItems[0].type_name;
            renderItems();
          } else {
            titleContainer.innerText = "No Items Found";
            loadMoreButton.style.display = "none";
          }
        } else {
          console.error("Error:", data.status.errorMessage);
        }
      })
      .catch(error => {
        console.error("Fetch error:", error);
      });
  }

  // Render items incrementally
  function renderItems() {
    const nextItems = allItems.slice(displayedItems, displayedItems + itemsPerLoad);
    nextItems.forEach(item => {
      contentContainer.innerHTML += `
        <div class="col-sm-6 col-lg-4">
          <a href="trick-trip-detail?id=${item.id}" class="item-list">
            <div class="item-list-image">
              <img src="{{ env('APP_URL') }}/storage/${item.file_cover_img_name}" alt="trick-trip" class="img-fluid">
            </div>
            <div class="content">
              <div>
                <h3 class="title">${item.title}</h3>
                <p class="description">${item.description}</p>
              </div>
              <p class="date">${formatDate(item.update_time)}</p>
            </div>
          </a>
        </div>
      `;
    });
    displayedItems += nextItems.length;

    // Hide Load More button if all items are displayed
    if (displayedItems >= allItems.length) {
      loadMoreButton.style.display = "none";
    }
  }

  // Event listener for Load More button
  loadMoreButton.addEventListener("click", renderItems);

  // Initial fetch
  fetchData();
});
</script> --}}
<div class="page-container trick-trip-page">
  <div class="container py-5">
    <h1 id="trick-trip-title">Trick & Trip</h1>

    <!-- Content Section -->
    <div id="categorySections">
      <!-- Dynamic categories and content will be injected here -->
    </div>

    <!-- Pagination Section -->
    <div class="position-relative" style="margin-top: 100px;" id="paginationContainer">
      <div class="reload-button" id="loadMoreButton">
        <div class="d-flex justify-content-center align-items-center rounded-circle bg-primary text-white" style="width: 50px; height: 50px;">
          <i class="bi bi-chevron-down"></i>
        </div>
      </div>
      <hr>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function () {
    const urlParams = new URLSearchParams(window.location.search);
    const typeParam = urlParams.get("type");
    const apiUrl = "{{ env('APP_URL') }}/api/contents?type=" + typeParam;

    const titleContainer = document.getElementById("trick-trip-title");
    const categorySectionsContainer = document.getElementById("categorySections");
    const loadMoreButton = document.getElementById("loadMoreButton");

    const itemsPerLoad = 4; // Number of items to load per category
    let categorizedItems = {}; // Store items grouped by category
    let displayedItemsPerCategory = {}; // Track how many items are displayed per category

    // Fetch data from the API
    fetch(apiUrl)
      .then((response) => response.json())
      .then((data) => {
        if (data.status.statusType === "S") {
          categorizedItems = data.data;

          Object.keys(categorizedItems).forEach((category) => {
            displayedItemsPerCategory[category] = 0;
          });

          if (Object.keys(categorizedItems).length > 0) {
           
            renderCategories();
            loadMoreButton.style.display = "block";
          } else {
            titleContainer.innerText = "No Items Found";
            loadMoreButton.style.display = "none";
          }
        } else {
          console.error("Error fetching data:", data.status.errorMessage);
        }
      })
      .catch((error) => {
        console.error("Fetch error:", error);
      });

    // Render all categories
    function renderCategories() {
      categorySectionsContainer.innerHTML = "";

      Object.entries(categorizedItems).forEach(([category, items]) => {
        const sectionId = `category-${category.replace(/\s+/g, "-").toLowerCase()}`;
        const categoryHTML = `
          <div class="my-5">
            <h2>${category}</h2>
            <hr>
            <div class="row g-4" id="${sectionId}">
              <!-- Items will be added here -->
            </div>
          </div>
        `;
        categorySectionsContainer.innerHTML += categoryHTML;

        renderItemsForCategory(category, sectionId);
      });
    }

    // Render items for a specific category
    function renderItemsForCategory(category, sectionId) {
      const items = categorizedItems[category];
      const startIndex = displayedItemsPerCategory[category];
      const endIndex = startIndex + itemsPerLoad;

      const sectionContainer = document.getElementById(sectionId);
      const itemsToDisplay = items.slice(startIndex, endIndex);

      let rowHTML = '<div class="row g-4">';
      itemsToDisplay.forEach((item) => {
        rowHTML += renderItem(item);
      });
      rowHTML += '</div>';

      sectionContainer.innerHTML += rowHTML;

      displayedItemsPerCategory[category] += itemsToDisplay.length;

      updateLoadMoreButtonState();
    }
    function truncateText(text, maxLength) {
        if (!text) return "No description available.";
        return text.length > maxLength ? text.substring(0, maxLength) + "..." : text;
    }
    // Render individual item
    function renderItem(item) {
      console.log(item);
      titleContainer.innerText = item.type_name;
    const itemImage = item.file_cover_img_name
        ? `{{ env('APP_URL') }}/storage/${item.file_cover_img_name}`
        : "/images/default-image.jpg";
    const avatarImage = item.avatar
        ? `{{ env('APP_URL') }}/${item.avatar}`
        : "/images/avatar-1.png";
    return `
        <div class="col-lg-3 col-md-4 col-sm-6">
            <a href="trick-trip-detail?id=${item.id}" class="card-link">
                <div class="card-container shadow-sm border rounded">
                    <img src="${itemImage}" alt="${item.title || "Untitled"}" class="img-fluid w-100" style="height: 160px; object-fit: cover;">
                    <div class="p-3">
                        <h3 class="text-truncate">${item.title || "Untitled"}</h3>
                        <div class="mb-2">${truncateText(item.description, 30)}</div>
                    </div>
                    <div class="card-footer d-flex align-items-center px-3 py-2 bg-light">
                        <div class="avatar d-flex align-items-center">
                            <img src="${avatarImage}" alt="Avatar" class="rounded-circle" style="width: 30px; height: 30px;">
                        </div>
                        <div>
                            <h4 class="ms-2">${item.author || "Unknown Author"}</h4>
                            <span class="text-muted">${(item.start_date)}</span>
                        </div>
                    </div>
                    
                </div>
            </a>
        </div>`;
}

    // Format date utility function
    function formatDate(dateString) {
      const options = { year: "numeric", month: "long", day: "numeric" };
      const date = new Date(dateString);
      return isNaN(date) ? "Invalid date" : date.toLocaleDateString(undefined, options);
    }

    // Update Load More button state
    function updateLoadMoreButtonState() {
      const allCategoriesComplete = Object.keys(categorizedItems).every(
        (category) => displayedItemsPerCategory[category] >= categorizedItems[category].length
      );

      loadMoreButton.style.display = allCategoriesComplete ? "none" : "block";
    }

    // Event listener for Load More button
    loadMoreButton.addEventListener("click", () => {
      Object.keys(categorizedItems).forEach((category) => {
        const sectionId = `category-${category.replace(/\s+/g, "-").toLowerCase()}`;
        renderItemsForCategory(category, sectionId);
      });
    });
  });
</script>



@endsection