<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-items {
  display: flex;
  flex-wrap: wrap;
  gap: 15px; /* Khoảng cách giữa các phần tử */
}

.book-item {
  width: 150px; /* Chiều rộng của bìa, bạn có thể tùy chỉnh */
  aspect-ratio: 2 / 3; /* Đảm bảo tỷ lệ 2:3 */
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  overflow: hidden; /* Đảm bảo không dư khoảng trắng xung quanh */
  border-radius: 8px; /* Bo góc bìa */
  background-color: #f0f0f0; /* Màu nền nếu ảnh không tải được */
  position: relative; /* Để căn chỉnh ảnh bên trong */
}

.book-item img {
  width: 100%; /* Ảnh sẽ chiếm toàn bộ chiều rộng */
  height: 100%; /* Ảnh sẽ chiếm toàn bộ chiều cao */
  object-fit: cover; /* Cắt ảnh để không dư khoảng trắng */
  position: absolute; /* Căn chỉnh ảnh bên trong phần tử */
  top: 0;
  left: 0;
}

.book-item-details p {
  font-size: 14px;
  margin: 5px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  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-banner {
  position: absolute;
  top: 5px; /* Adjust the top position */
  right: 5px; /* Adjust the left position */
  z-index: 2; /* Ensure it's on top of the image */
}

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

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

.hidden {
  display: none;
}

.button-container {
  display: flex;
  justify-content: space-between; /* Căn đều các nút */
  gap: 10px;
  margin-top: 20px; 
}

.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 */
}

.go-back-button {
  display: block;
  margin-top: 8px;
  width: 100%;
  text-align: center;
}

.tag {
  border: 1px solid var(--contentL);
  background: var(--contentB);
  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;
    margin-top: 15px;

}

@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>
  <div class="loader-RenamedCL"></div>
  <div id="bannersGrid" class="book-grid"></div>
</div>

<div id="tab2" class="result-container hidden">
  <div class="details-container">
<h3 style="text-align: center; margin-top: 0; padding-top: 0;">Thông tin chi tiết</h3>
    <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 class="action-button go-back-button" onclick="goBackToTab1()">Về</button>
    <button id="editButton" class="action-button hidden" onclick="navigateToEdit()">Sửa</button>
        <button id="writeButton" class="action-button hidden" onclick="navigateToWrite()">Viết</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)) {
    // Group the data by "Danh mục"
    const groupedData = data.reduce((groups, item) => {
      const category = item['Danh mục'];
      if (!groups[category]) {
        groups[category] = [];
      }
      groups[category].push(item);
      return groups;
    }, {});

    // Create HTML for each category
    for (const category in groupedData) {
      gridHTML += `
        <div class="category-section">
          <h3>${category}</h3>
          <div class="book-items">
      `;

      // Generate items within each category
      groupedData[category].forEach(item => {
        // Generate the status SVG
        const statusSVG = getStatusSVG(item['Tình trạng']);
        
        gridHTML += `
          <div onclick="showDetails('${item['Định danh']}')" class="book-item">
            <div class="status-banner">${statusSVG}</div>
            <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-progress">${item['Tiến độ']}</p>
            </div>
          </div>
        `;
      });

      gridHTML += `
          </div>
        </div>
      `;
    }
  }

  document.getElementById("bannersGrid").innerHTML = gridHTML;
}

function getStatusSVG(status) {
  let svg = '';
  switch (status) {
    case "Đợi duyệt":
      svg = `<svg version="1.1" id="Uploaded to svgrepo.com" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" xml:space="preserve" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <style type="text/css"> .pictogram_een{fill:#F4D6B0;} .pictogram_twee{fill:#F8AD89;} .pictogram_vier{fill:#E54D2E;} .pictogram_vijf{fill:#01A59C;} .pictogram_zes{fill:#0C6667;} .st0{fill:#F27261;} .st1{fill:none;} .st2{fill:#F8AD89;} .st3{clip-path:url(#SVGID_2_);fill:#01A59C;} .st4{clip-path:url(#SVGID_2_);fill:none;} .st5{clip-path:url(#SVGID_2_);fill:#0C6667;} .st6{fill:#0C6667;} </style> <g> <path class="pictogram_vier" d="M4.601,27.22C1.758,24.332,0,20.373,0,16S1.758,7.668,4.601,4.78 c0.354,0.474,0.841,0.837,1.408,1.038C6.007,5.879,6,5.938,6,6v4c0,3.3,2.7,6,6,6c-3.3,0-6,2.7-6,6v4 c0,0.062,0.007,0.121,0.009,0.182C5.442,26.383,4.955,26.746,4.601,27.22z M25.991,5.818C25.993,5.879,26,5.938,26,6v4 c0,3.3-2.7,6-6,6c3.3,0,6,2.7,6,6v4c0,0.062-0.007,0.121-0.009,0.182c0.567,0.201,1.054,0.563,1.408,1.038 C30.242,24.332,32,20.373,32,16s-1.758-8.332-4.601-11.22C27.045,5.254,26.558,5.617,25.991,5.818z"></path> <path class="pictogram_een" d="M26,10V6c0-0.062-0.007-0.121-0.009-0.182C25.679,5.928,25.349,6,25,6h-9H7 C6.651,6,6.321,5.928,6.009,5.818C6.007,5.879,6,5.938,6,6v4c0,3.3,2.7,6,6,6c-3.3,0-6,2.7-6,6v4c0,0.062,0.007,0.121,0.009,0.182 C6.321,26.072,6.651,26,7,26H6.754l7.125-7.125C14.462,18.292,15.231,18,16,18s1.538,0.292,2.121,0.875L25.246,26H25 c0.349,0,0.679,0.072,0.991,0.182C25.993,26.121,26,26.062,26,26v-4c0-3.3-2.7-6-6-6C23.3,16,26,13.3,26,10z"></path> <path class="pictogram_twee" d="M18.121,18.875C17.538,18.292,16.769,18,16,18s-1.538,0.292-2.121,0.875L6.754,26H7h9h9h0.246 L18.121,18.875z"></path> <path class="pictogram_vijf" d="M27.399,4.78c-0.354,0.474-0.841,0.837-1.408,1.038C25.679,5.928,25.349,6,25,6h-9V0 c3.376,0,6.503,1.051,9.084,2.836C25.916,3.411,26.691,4.061,27.399,4.78z M25.991,26.182C25.679,26.072,25.349,26,25,26h-9v6 c3.376,0,6.503-1.051,9.084-2.836c0.832-0.575,1.607-1.225,2.315-1.944C27.045,26.746,26.558,26.383,25.991,26.182z"></path> <path class="pictogram_zes" d="M16,0v6H7C6.651,6,6.321,5.928,6.009,5.818C5.442,5.617,4.955,5.254,4.601,4.78 c0.707-0.719,1.483-1.369,2.315-1.944C9.497,1.051,12.624,0,16,0z M7,26c-0.349,0-0.679,0.072-0.991,0.182 c-0.567,0.201-1.054,0.563-1.408,1.038c0.707,0.719,1.483,1.369,2.315,1.944C9.497,30.949,12.624,32,16,32v-6H7z"></path> </g> </g></svg>`;
      break;
    case "Đã duyệt":
      svg = `<svg height="200px" width="200px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path style="fill:#003C61;" d="M437.02,74.98C388.667,26.628,324.25,0,255.87,0S123.333,26.628,74.98,74.98 C26.628,123.333,0,187.62,0,256s26.628,132.667,74.98,181.02C123.333,485.372,187.49,512,255.87,512s132.797-26.628,181.15-74.98 C485.372,388.667,512,324.38,512,256S485.372,123.333,437.02,74.98z"></path> <path style="fill:#0066A6;" d="M255.87,0.003C187.58,0.067,123.275,26.686,74.98,74.98C26.628,123.333,0,187.62,0,256 s26.628,132.667,74.98,181.02c48.295,48.294,112.6,74.915,180.89,74.978V0.003z"></path> <path style="fill:#005A95;" d="M398.454,113.546c-38.051-38.052-88.772-59.007-142.584-59.007s-104.273,20.955-142.325,59.007 C75.494,151.597,54.539,202.188,54.539,256s20.955,104.403,59.007,142.454c38.05,38.052,88.511,59.007,142.324,59.007 s104.534-20.955,142.584-59.007c38.052-38.051,59.007-88.642,59.007-142.454S436.506,151.597,398.454,113.546z"></path> <path style="fill:#31AAEF;" d="M255.87,54.542c-53.721,0.063-104.331,21.01-142.325,59.004 C75.494,151.597,54.539,202.188,54.539,256s20.955,104.403,59.006,142.454c37.994,37.993,88.603,58.94,142.325,59.004V54.542z"></path> <path style="fill:#79C6BF;" d="M225.38,368.767c-10.332,0-20.241-4.105-27.547-11.41l-68.094-68.094 c-15.213-15.213-15.213-39.879,0-55.093c15.214-15.212,39.88-15.213,55.093,0l40.547,40.547l101.936-101.936 c15.214-15.213,39.879-15.213,55.093,0c15.213,15.213,15.213,39.879,0,55.092L252.926,357.357 C245.621,364.663,235.711,368.767,225.38,368.767z"></path> <path style="fill:#E4F3F6;" d="M255.87,244.227l-30.491,30.491l-40.547-40.547c-15.213-15.213-39.879-15.213-55.093,0 c-15.213,15.213-15.213,39.879,0,55.093l68.094,68.094c7.306,7.306,17.214,11.41,27.547,11.41c10.331,0,20.241-4.105,27.547-11.41 l2.944-2.944L255.87,244.227L255.87,244.227z"></path> </g></svg>`;
      break;
    case "Không đủ điều kiện":
      svg = `<svg height="200px" width="200px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512.001 512.001" xml:space="preserve" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path style="fill:#FF6465;" d="M256.001,512c141.384,0,255.999-114.615,255.999-256.001C512.001,114.615,397.386,0,256.001,0 S0.001,114.615,0.001,256.001S114.616,512,256.001,512z"></path> <path style="opacity:0.1;enable-background:new ;" d="M68.873,256.001c0-129.706,96.466-236.866,221.564-253.688 C279.172,0.798,267.681,0,256.001,0C114.616,0,0.001,114.615,0.001,256.001S114.616,512.001,256,512.001 c11.68,0,23.171-0.798,34.436-2.313C165.339,492.865,68.873,385.705,68.873,256.001z"></path> <path style="fill:#FFFFFF;" d="M313.391,256.001l67.398-67.398c4.899-4.899,4.899-12.842,0-17.74l-39.65-39.65 c-4.899-4.899-12.842-4.899-17.74,0l-67.398,67.398l-67.398-67.398c-4.899-4.899-12.842-4.899-17.74,0l-39.65,39.65 c-4.899,4.899-4.899,12.842,0,17.74l67.398,67.398l-67.398,67.398c-4.899,4.899-4.899,12.842,0,17.741l39.65,39.65 c4.899,4.899,12.842,4.899,17.74,0l67.398-67.398L323.4,380.79c4.899,4.899,12.842,4.899,17.74,0l39.65-39.65 c4.899-4.899,4.899-12.842,0-17.741L313.391,256.001z"></path> </g></svg>`;
      break;
  }
  return svg;
}



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"];
    
    // Preserve line breaks in description and collapse multiple newlines into one <br>
    document.getElementById("description").innerHTML = workData["Giới thiệu"]
      .replace(/\n+/g, "<br>");

    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");

    // Cập nhật các nút "Viết" và "Sửa"
    updateButtons(workData);

    toggleTabs();
  }
}

function updateButtons(workData) {
  const base64Id = btoa(workData["Định danh"]); // Mã hóa định danh thành base64
  const writeButton = document.getElementById("writeButton"); // Nút Viết
  const editButton = document.getElementById("editButton"); // Nút Sửa

  if (workData["Danh mục"] === "Tác phẩm nhiều chương") {
    // Nếu là tác phẩm nhiều chương, hiện cả hai nút
    writeButton.style.display = "block";
    editButton.style.display = "block";

    // Cập nhật liên kết
    writeButton.href = `https://kunsnovel.blogspot.com/p/viet-tac-pham.html?id=${encodeURIComponent(base64Id)}`;
    editButton.href = `https://kunsnovel.blogspot.com/p/tao-va-sua-tac-pham.html?id=${encodeURIComponent(base64Id)}`;
  } else if (workData["Danh mục"] === "Tác phẩm 1 chương") {
    // Nếu là tác phẩm 1 chương, chỉ hiện nút Sửa
    writeButton.style.display = "none"; // Ẩn nút Viết
    editButton.style.display = "block";

    // Cập nhật liên kết cho nút Sửa
    editButton.href = workData["Link tác phẩm"]
      ? workData["Link tác phẩm"]
      : `https://kunsnovel.blogspot.com/p/viet-oneshot.html?id=${encodeURIComponent(base64Id)}`;
  }
}

writeButton.addEventListener("click", function() {
  window.location.href = writeButton.href;
});

editButton.addEventListener("click", function() {
  window.location.href = editButton.href;
});


    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");
    }


  </script>
</body>
</html>


