<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
      rel="stylesheet" />
    <script src="https://cdn.tailwindcss.com"></script>
    <title>UPN SEHAT</title>
    <style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

    .font-inter {
      font-family: "Inter", sans-serif;
    }

    body {
      background-color: #f7fafc;
    }

    .video-card {
      background-color: #fff;
      border-radius: 0.5rem;
      padding: 1rem;
      margin-bottom: 1rem;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .video-card img {
      width: 100%;
      height: auto;
      border-radius: 0.5rem;
    }

    .text-container {
      margin-top: 1rem;
    }

    .text-container h2 {
      font-size: 1.25rem;
      font-weight: 600;
      line-height: 1.5;
      color: #2d3748;
      margin-bottom: 0.5rem;
    }

    .text-container p {
      font-size: 1rem;
      line-height: 1.5;
      color: #4a5568;
      margin-top: 0.5rem;
    }

    .text-container .text-sm {
      font-size: 0.875rem;
      color: #cbd5e0;
      margin-top: 0.5rem;
    }

    .spinner {
      border-top-color: transparent;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      border: 4px solid;
      border-color: #3498db;
      border-top-color: transparent;
      animation: spin 1s linear infinite;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: auto;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .pagination {
      margin-top: 20px;
    }

    .pagination button {
      margin-right: 5px;
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }
  </style>
  </head>

  <body class="font-inter">
    <!-- NAVBAR -->
    <header
      Fclass="bg-white fixed top-0 left-0 w-full flex items-center z-50 border-b-2 border-gray-100">
      <div class="container mx-auto">
        <div class="flex items-center justify-between relative">
          <div class="px-4">
            <a href="/">
              <img src="/img/logo.png" alt="upn-sehat" class="block py-8" />
            </a>
          </div>

          <!-- Hamburger -->
          <div class="flex items-center px-4">
            <button id="hamburger" name="hamburger" type="button"
              class="block absolute right-4 lg:hidden">
              <span class="w-[30px] h-[2px] my-2 block bg-gray-900"></span>
              <span class="w-[30px] h-[2px] my-2 block bg-gray-900"></span>
              <span class="w-[30px] h-[2px] my-2 block bg-gray-900"></span>
            </button>
          </div>

          <!-- List -->
          <nav id="nav-menu"
            class="hidden absolute py-2 bg-white shadow-lg rounded-lg max-w-[250px] w-full right-4 top-full lg:block lg:static lg:bg-transparent lg:max-w-full lg:shadow-none lg:rounded-none">
            <ul class="block lg:flex">
              <li class="group content-center">
                <a href="/"
                  class="text-gray-900 mx-6 py-2 flex group-hover:text-blue-600">Beranda</a>
              </li>
              <li class="group content-center">
                <a href="/to-article"
                  class="text-gray-900 mx-6 py-2 flex group-hover:text-blue-600">Artikel</a>
              </li>
              <li class="group content-center">
                <a href="/to-video"
                  class="text-gray-900 mx-6 py-2 flex group-hover:text-blue-600">Video</a>
              </li>
              <li class="group content-center">
                <a href="/to-aboutus"
                  class="text-gray-900 mx-6 py-2 flex group-hover:text-blue-600">About
                  Us</a>
              </li>
              <li
                class="group lg:ml-auto mx-6 space-x-2 py-2 flex content-center">
                <button id="logoutButton"
                  class="text-gray-800 px-4 py-2 rounded-md hover:bg-gray-400 focus:outline-none focus:ring focus:ring-gray-400 focus:ring-opacity-50 border-2 border-gray-200 w-full">
                  LogOut
                </button>
                <button onclick="window.location.href='/to-profile'"
                  class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-600 focus:ring-opacity-50 w-full">
                  Profile
                </a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </header>

    <!-- VIDEO SECTION -->
    <section id="video-section" class="video my-20 relative">
      <div class="container mx-auto px-8 mt-[150px]">
        <div class="card-video">
          <div class="head-section flex">
            <h2 class="text-2xl font-bold mr-auto">Video Terbaru</h2>
          </div>
        </div>

        <!-- Video Spinner -->
        <div id="video-spinner" class="spinner" style="display:none;"></div>

        <div id="video-container"
          class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
          <!-- Video akan diisi di sini oleh JavaScript -->
        </div>

        <!-- Pagination Buttons -->
        <div id="pagination" class="pagination flex justify-center mt-8">
          <!-- Tombol pagination akan diisi di sini oleh JavaScript -->
        </div>
      </div>
    </section>

    <footer class="bg-white text-white p-4">
      <div class="container mx-auto flex items-center justify-between">
        <!-- Logo -->
        <div class="logo flex space-x-3">
          <img src="/img/upnsehat-kecil.png" alt="Logo" class="h-8" />
          <img src="/img/upn-kecil.png" alt="Logo" class="h-8" />
        </div>
        <!-- Hak Cipta -->
        <p class="text-sm text-gray-900">
          &copy; 2024, Studi Informatika, Fakultas Ilmu Komputer. Hak Cipta
          Dilindungi
        </p>
      </div>
    </footer>

    <script>
    document.addEventListener("DOMContentLoaded", function () {
      const youtubeApiKey = "AIzaSyDODsBfBfjJGEbWmzAY-6wd_edR78rk5Ro";
      const youtubeApiUrl = `https://www.googleapis.com/youtube/v3/search?part=snippet&q=kesehatan&type=video&maxResults=200&key=${youtubeApiKey}`;
      const videoSpinner = document.getElementById("video-spinner");
      const videoContainer = document.getElementById("video-container");
      const pagination = document.getElementById("pagination");

      const videosPerPage = 20;
      let currentPage = 1;
      let videos = [];

      // Menampilkan spinner untuk video
      videoSpinner.style.display = "flex";

      // Fetch data video dari YouTube
      fetch(youtubeApiUrl)
        .then((response) => response.json())
        .then((data) => {
          videos = data.items;
          renderPage(currentPage);
        })
        .catch((error) => console.error("Error fetching YouTube data:", error))
        .finally(() => {
          videoSpinner.style.display = "none";
        });

      function renderPage(page) {
        videoContainer.innerHTML = "";
        const start = (page - 1) * videosPerPage;
        const end = start + videosPerPage;
        const pageVideos = videos.slice(start, end);

        pageVideos.forEach((video) => {
          const videoId = video.id.videoId;
          const title = video.snippet.title;
          const description = video.snippet.description;
          const publishedAt = video.snippet.publishTime;
          const imageUrl = video.snippet.thumbnails.high.url;

          const videoElement = createVideoElement(videoId, title, description, publishedAt, imageUrl);
          videoContainer.appendChild(videoElement);
        });

        renderPagination();
      }

      function renderPagination() {
        pagination.innerHTML = "";
        const totalPages = Math.ceil(videos.length / videosPerPage);

        for (let i = 1; i <= totalPages; i++) {
          const button = document.createElement("button");
          button.className = `px-3 py-1 mx-1 rounded ${i === currentPage ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-800'}`;
          button.textContent = i;
          button.addEventListener("click", () => {
            currentPage = i;
            renderPage(currentPage);
          });
          pagination.appendChild(button);
        }
      }

      function createVideoElement(videoId, title, description, publishedAt, imageUrl) {
        const videoUrl = `https://www.youtube.com/watch?v=${videoId}`;

        const card = document.createElement("div");
        card.className = "video-card bg-white rounded-lg p-4 flex flex-col justify-between overflow-hidden";
        card.innerHTML = `
          <a href="${videoUrl}" target="_blank" class="block h-full">
            <img src="${imageUrl}" alt="${title}" class="w-full h-32 object-cover rounded-md" />
            <div class="text-container mt-4">
              <h2 class="text-lg font-semibold line-clamp-2">${title}</h2>
              <p class="text-gray-600 mt-2 line-clamp-2">${description}</p>
              <p class="text-sm text-gray-400 mt-2">Published At: ${new Date(publishedAt).toLocaleDateString()}</p>
            </div>
          </a>
        `;
        return card;
      }
    });
  </script>
  </body>

</html>
