<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Quản lí tác phẩm </title>
 <style>.error-message{color:red;font-weight:700}.book-items{display:flex;flex-wrap:wrap;gap:15px}.book-item{width:150px;aspect-ratio:2 / 3;display:flex;flex-direction:column;align-items:center;cursor:pointer;overflow:hidden;border-radius:8px;background-color:#f0f0f0;position:relative}.book-item img{width:100%;height:100%;object-fit:cover;position:absolute;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:700}.book-item-details p.book-status,.book-item-details p.book-progress{font-weight:700;text-transform:capitalize;margin:2px 0}.status-banner{position:absolute;top:5px;right:5px;z-index:2}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;gap:10px;margin-top:20px}.button-container .action-button{flex-grow:1;width:auto}.go-back-button{display:block;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;margin-right:5px;margin-bottom:5px}.loader-RenamedCL{display:none;border:4px solid rgb(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">
<h4 style="text-align: center; margin-top: 0; padding-top: 0; background: var(--linkB); color: white;">≡ 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>Số dư:</strong><br> <span id="cost">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();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';return}
try{const response=await fetch(`${webAppUrl}?partialID=${encodeURIComponent(partialID)}`);const data=await response.json();console.log(data);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">${error.message}</p>`}finally{document.querySelector('.loader-RenamedCL').style.display='none'}}
function displayBanners(data){let gridHTML='';if(Array.isArray(data)){const groupedData=data.reduce((groups,item)=>{const category=item['Danh mục'];if(!groups[category]){groups[category]=[]}
groups[category].push(item);return groups},{});for(const category in groupedData){gridHTML+=`
        <div class="category-section">
          <h4>${category}</h4>
          <div class="book-items">
      `;groupedData[category].forEach(item=>{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"];let balanceText=workData["Số dư"];let balance=parseInt(balanceText.replace(' đồng','').trim());let message=balance>=200000?"Có thể rút":"Chưa đạt số dư tối thiểu";let formattedBalance=balance.toLocaleString();document.getElementById("cost").textContent=formattedBalance+" đồng - "+message;document.getElementById("description").innerHTML=workData["Giới thiệu"].split("\n").filter(line=>line.trim()!=="").map(line=>`<div style="margin-bottom: 6px; text-align: justify;">${line}</div>`).join("");document.getElementById("progress").textContent=workData["Tiến độ"];const categories=workData["Thể loại"].split(',').map(tag=>tag.trim());const categoryTagsContainer=document.getElementById("categoryTags");categoryTagsContainer.innerHTML="";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");updateButtons(workData);toggleTabs()}}
function updateButtons(workData){const base64Id=btoa(workData["Định danh"]);const writeButton=document.getElementById("writeButton");const editButton=document.getElementById("editButton");if(workData["Danh mục"]==="Tác phẩm nhiều chương"){writeButton.style.display="block";editButton.style.display="block";writeButton.href=`https://www.kunsnovel.pro.vn/p/viet-tac-pham.html?id=${encodeURIComponent(base64Id)}`;editButton.href=`https://www.kunsnovel.pro.vn/p/tao-va-sua-tac-pham.html?id=${encodeURIComponent(base64Id)}`}else if(workData["Danh mục"]==="Tác phẩm 1 chương"){writeButton.style.display="none";editButton.style.display="block";editButton.href=workData["Link tác phẩm"]?workData["Link tác phẩm"]:`https://www.kunsnovel.pro.vn/p/viet-oneshot.html?id=${encodeURIComponent(base64Id)}`}}
writeButton.addEventListener("click",function(){window.open(writeButton.href,"_blank")});editButton.addEventListener("click",function(){window.open(editButton.href,"_blank")});function handleLinkAndBTV(workData){const linkElement=document.getElementById("link");const linkValueElement=document.getElementById("linkValue");const btvElement=document.getElementById("bTV");const btvValueElement=document.getElementById("bTVValue");if(workData["Tình trạng"]==="Đã duyệt"){linkElement.classList.remove("hidden");if(workData["Danh mục"]==="Tác phẩm 1 chương"){linkValueElement.href=`https://www.kunsnovel.pro.vn/p/read-os.html${workData["Link tác phẩm"]}`;linkValueElement.textContent=`https://www.kunsnovel.pro.vn/p/read-os.html${workData["Link tác phẩm"]}`}else{linkValueElement.href=workData["Link tác phẩm"];linkValueElement.textContent=workData["Link tác phẩm"]}
btvElement.classList.remove("hidden");btvValueElement.textContent=workData.BTV}else if(workData["Tình trạng"]==="Không đủ điều kiện"){linkElement.classList.add("hidden");btvElement.classList.remove("hidden");btvValueElement.textContent=workData.BTV}else{linkElement.classList.add("hidden");btvElement.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>




