<a href="https://kunsnovel.blogspot.com/p/tao-va-sua-tac-pham.html" id="taotacpham" class="tao-tac-pham" target="_self">Tạo tác phẩm mới</a><br>
<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tra cứu Tác phẩm</title>
  <style>
    .error-message {
      color: red;
      font-weight: bold;
    }

    .book-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 15px;
      margin-top: 20px;
    }

    .book-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
    aspect-ratio: 2 / 3; /* Đảm bảo tỷ lệ 2:3 */
      cursor: pointer;

    }

    @media (max-width: 600px) {
      .book-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); 
      }
    }

    .book-item {
      width: 100%;
      aspect-ratio: 2 / 3;
      object-fit: cover;
      border-radius: 10px;
      margin-top: 10px;
  padding: 0 5px;
  text-align: center; /* Center align the text */
            cursor: pointer;

}

.book-item-details p {
  font-size: 14px;
  margin: 5px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block; /* Ensures each element takes up its own line */
  cursor: pointer;
}

.book-item-details p.book-title {
  font-weight: bold;
}

.book-item-details p.book-status,
.book-item-details p.book-progress {
  font-weight: bold;
  text-transform: capitalize; /* Capitalize the first letter of each word */
  margin: 2px 0; /* Reduced margin to decrease space between status and progress */
}

.status-waiting {
  color: yellow; /* Yellow for "Đợi duyệt" */
}

.status-approved {
  color: green; /* Green for "Đã duyệt" */
}

.status-not-qualified {
  color: red; /* Red for "Không đủ điều kiện" */
}

.progress-stopped {
  color: red; /* Red for "Tạm ngừng" */
}

.progress-writing {
  color: yellow; /* Yellow for "Đang viết" */
}

.progress-completed {
  color: green; /* Green for "Hoàn thành" */
}


    input, .action-button {
      padding: 12px;
      font-size: 16px;
      border: 1px solid var(--contentL);
      background: var(--contentB);
      border-radius: 8px;
      width: 100%;
      color: var(--bodyC);
      margin: 5px 0;
      text-align: center;
    }

    .action-button {
      align-items: center;
      background-color: var(--linkB);
      color: #fff;
      cursor: pointer;
    }

    .hidden {
      display: none;
    }

    .details-container {
      margin-top: 20px;
    }

    .details-container p {
      font-size: 16px;
      margin: 10px 0;
    }

    .details-container a {
      color: #4a90e2;
    }

.button-container {
  display: flex;
  justify-content: space-between; /* Căn đều các nút */
  gap: 10px;
  margin-top: 20px; /* Đảm bảo có khoảng cách giữa thông tin chi tiết và các nút */
}

.button-container .action-button {
  flex-grow: 1; /* Đảm bảo các nút chiếm đều không gian */
  width: auto; /* Đảm bảo độ rộng của các nút có thể mở rộng hết */
  
}

    /* Căn giữa nút Quay lại */
    .go-back-button {
      display: block;
      margin-top: 8px;
      width: 100%;
      text-align: center;
    }
    
    .tao-tac-pham {
      display: block;
      margin-top: 8px;
      width: 100%;
      text-align: center;
            align-items: center;
      background-color: var(--linkB);
      color: #fff;
      cursor: pointer;
            padding: 12px;
      font-size: 16px;
            border-radius: 8px;
      width: 100%;
      margin: 5px 0;
      text-align: center;
    }
    
  .tag {
    border: 1px solid var(--contentL);
    background: var(--linkB);
    color: #fff;
    padding: 3px 6px;
    cursor: pointer;
    font-size: 14px;
    user-select: none;
    transition: background-color .3s ease;
    display: inline-block; /* Đảm bảo các tag nằm cạnh nhau */
    margin-right: 5px; /* Khoảng cách giữa các tag */
    margin-bottom: 5px; /* Khoảng cách giữa các dòng nếu tag bị tràn xuống */
  }

    .loader-RenamedCL {
  display: none;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: var(--linkB);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  animation: loader 1s linear infinite;
  margin: 0 auto;
}

@keyframes loader {
  to { transform: rotate(360deg); }
}

  </style>
</head>
<body>
<div id="tab1" class="result-container">
  <div class="input-container" style="display: flex; align-items: center; gap: 10px;">
    <input type="text" id="partialID" placeholder="Nhập ID tác giả...">
    <button class="action-button" onclick="fetchData()">Xác nhận</button>
  </div><br>
  <div class="loader-RenamedCL"></div>
  <div id="bannersGrid" class="book-grid"></div>
</div>

<div id="tab2" class="result-container hidden">
  <div class="details-container">
<h4 style="text-align: center; margin-top: 0; padding-top: 0;">Thông tin chi tiết</h4>
    <p><strong>Tác phẩm:</strong><br> <span id="workTitle">Không có dữ liệu</span></p>
    <p><strong>Tác giả:</strong><br> <span id="author">Không có dữ liệu</span></p>
    <p><strong>Thể loại:</strong> <br><span id="categoryTags"></span></p>
    <p><strong>Giới thiệu:</strong> <br><span id="description">Không có dữ liệu</span></p>
    <p><strong>Tiến độ:</strong><br> <span id="progress">Không có dữ liệu</span></p>
    <p><strong>Tình trạng:</strong><br> <span id="status">Không có dữ liệu</span></p>
    <p id="bTV" class="hidden"><strong>Lời nhắn của BTV:</strong><br> <span id="bTVValue">Không có dữ liệu</span></p>
    <p id="link" class="hidden"><strong>Link tác phẩm:</strong> <br><a id="linkValue" href="#" target="_blank">Không có dữ liệu</a></p>
  </div>
  <div class="button-container">
    <button id="writeButton" class="action-button hidden" onclick="navigateToWrite()">Viết</button>
    <button id="editButton" class="action-button hidden" onclick="navigateToEdit()">Sửa</button>
  </div>
  <button class="action-button go-back-button" onclick="goBackToTab1()">Quay lại</button>
</div>

  <script>
    const webAppUrl = "https://script.google.com/macros/s/AKfycbyiJ4G4D2ZwMR2HVQZaMB1DVA2BWsuy_QZWwLzVJTektviFKl7aSlMwD5L8ShmBAymcDw/exec";
    let cachedData = {};

async function fetchData() {
  const partialID = document.getElementById("partialID").value.trim();

  // Show the loader
  document.querySelector('.loader-RenamedCL').style.display = 'block';

  if (!partialID) {
    document.getElementById("bannersGrid").innerHTML = '<p class="error-message">Vui lòng nhập ID.</p>';
    document.querySelector('.loader-RenamedCL').style.display = 'none'; // Hide the loader
    return;
  }

  try {
    const response = await fetch(`${webAppUrl}?partialID=${encodeURIComponent(partialID)}`);
    const data = await response.json();

    // In ra console để kiểm tra dữ liệu nhận được từ API
    console.log(data);

    // Kiểm tra xem API có trả về lỗi hay không
    if (data && data.error) {
      document.getElementById("bannersGrid").innerHTML = `<p class="error-message">${data.error}</p>`;
    } else {
      cachedData[partialID] = data;
      displayBanners(data);
    }
  } catch (error) {
    document.getElementById("bannersGrid").innerHTML = `<p class="error-message">Đã xảy ra lỗi: ${error.message}</p>`;
  } finally {
    document.querySelector('.loader-RenamedCL').style.display = 'none'; // Hide the loader, dù có lỗi hay không
  }
}


function displayBanners(data) {
  let gridHTML = '';
  if (Array.isArray(data)) {
    data.forEach(item => {
      // Determine the status color
      const statusClass = getStatusClass(item['Tình trạng']);
      // Determine the progress color
      const progressClass = getProgressClass(item['Tiến độ']);

      gridHTML += `
        <div onclick="showDetails('${item['Định danh']}')" class="book-item">
          <img src="${item['URL bìa']}" alt="${item['Tác phẩm']}">
          <div class="book-item-details">
            <p class="book-title">${item['Tác phẩm']}</p>
            <p class="book-status ${statusClass}">${item['Tình trạng']}</p>
            <p class="book-progress ${progressClass}">${item['Tiến độ']}</p>
          </div>
        </div>
      `;
    });
  }
  document.getElementById("bannersGrid").innerHTML = gridHTML;
}

// Function to determine status class based on the status value
function getStatusClass(status) {
  switch (status) {
    case "Đợi duyệt":
      return "status-waiting"; // Yellow
    case "Đã duyệt":
      return "status-approved"; // Green
    case "Không đủ điều kiện":
      return "status-not-qualified"; // Red
    default:
      return "";
  }
}

// Function to determine progress class based on the progress value
function getProgressClass(progress) {
  switch (progress) {
    case "Tạm ngừng":
      return "progress-stopped"; // Red
    case "Đang viết":
      return "progress-writing"; // Yellow
    case "Hoàn thành":
      return "progress-completed"; // Green
    default:
      return "";
  }
}



function showDetails(id) {
  const partialID = document.getElementById("partialID").value.trim();
  const data = cachedData[partialID];
  const workData = data.find(item => item["Định danh"] === id);

  if (workData) {
    document.getElementById("workTitle").textContent = workData["Tác phẩm"];
    document.getElementById("author").textContent = workData["Tác giả"];
    document.getElementById("status").textContent = workData["Tình trạng"];
    document.getElementById("description").textContent = workData["Giới thiệu"];
    document.getElementById("progress").textContent = workData["Tiến độ"];

    // Xử lý thể loại
    const categories = workData["Thể loại"].split(',').map(tag => tag.trim()); // Tách và loại bỏ khoảng trắng
    const categoryTagsContainer = document.getElementById("categoryTags");
    categoryTagsContainer.innerHTML = ""; // Xóa nội dung cũ

    categories.forEach(tag => {
      const tagElement = document.createElement("span");
      tagElement.textContent = tag;
      tagElement.className = "tag";
      categoryTagsContainer.appendChild(tagElement);
    });

    handleLinkAndBTV(workData);
    document.getElementById("writeButton").classList.remove("hidden");
    document.getElementById("editButton").classList.remove("hidden");

    toggleTabs();
  }
}


    function handleLinkAndBTV(workData) {
      if (workData["Tình trạng"] === "Đã duyệt") {
        document.getElementById("link").classList.remove("hidden");
        document.getElementById("linkValue").href = workData["Link tác phẩm"];
        document.getElementById("linkValue").textContent = workData["Link tác phẩm"];
        document.getElementById("bTV").classList.remove("hidden");
        document.getElementById("bTVValue").textContent = workData["BTV"];
      } else {
        document.getElementById("link").classList.add("hidden");
        document.getElementById("bTV").classList.add("hidden");
      }
    }

    function toggleTabs() {
      document.getElementById("tab1").classList.add("hidden");
      document.getElementById("tab2").classList.remove("hidden");
    }

    function goBackToTab1() {
      document.getElementById("tab2").classList.add("hidden");
      document.getElementById("tab1").classList.remove("hidden");
    }

    function navigateToWrite() {
      const id = document.getElementById("workTitle").textContent;
      const workData = cachedData[document.getElementById("partialID").value.trim()].find(item => item["Tác phẩm"] === id);
      if (workData) {
        const base64Id = btoa(workData["Định danh"]);
        window.location.href = `https://kunsnovel.blogspot.com/p/viet-tac-pham.html?id=${encodeURIComponent(base64Id)}`;
      }
    }

    function navigateToEdit() {
      const id = document.getElementById("workTitle").textContent;
      const workData = cachedData[document.getElementById("partialID").value.trim()].find(item => item["Tác phẩm"] === id);
      if (workData) {
        const base64Id = btoa(workData["Định danh"]);
        window.location.href = `https://kunsnovel.blogspot.com/p/tao-va-sua-tac-pham.html?id=${encodeURIComponent(base64Id)}`;
      }
    }
  </script>
</body>
</html>