<!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>
    .tab-content { display: none; margin-top: 20px; }
    .tab-content.active { display: block; }
    label { font-weight: bold; font-size: 1.1em; display: block; }
    input, textarea, button, #tinhTrangInput { 
      width: 100%; padding: 10px; margin: 8px 0 15px; box-sizing: border-box; 
      border: 1px solid #ddd; border-radius: 5px; font-size: 1em; 
    }
    button { 
      background-color: #4CAF50; color: white; border: none; cursor: pointer; 
      font-size: 1.1em; border-radius: 5px; transition: background-color 0.3s; 
    }
    button:hover { background-color: #45a049; }
    .result { margin-top: 20px; padding: 15px; background: #fff; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }
    .error { color: red; font-weight: bold; }
    .form-container { max-width: 800px; margin: 0 auto; }
    .form-container h2 { text-align: center; font-size: 1.8em; color: #333; }
    #loader { text-align: center; }
    .restricted { background-color: #ffeb3b; border: 2px solid red; cursor: pointer; }
    .display-only { padding: 10px; font-size: 1.1em; border-radius: 5px; }
    #buttonContainer { display: flex; gap: 10px; }
  </style>
</head>
<body>
<div id="loader" style="display:none;">Loading...</div>

<div id="tab1" class="tab-content active">
  <div id="tacPhamList"></div>
</div>

<div id="tab2" class="tab-content">
  <div id="tacPhamListTab2"></div>
  <div class="form-container">
    <div id="biaPreview"></div>
        <form id="updateForm" onsubmit="updateTacPham(event)">
    <div><br>
      <label for="tacPhamInput">Tên Tác phẩm:</label>
      <div id="tacPhamInput" class="display-only"></div>
    </div><br>

      <label for="tacGiaInput">Tác giả:</label>
      <div id="tacGiaInput" class="display-only"></div><br>
      <label for="theLoaiInput">Thể loại:</label>
      <div id="theLoaiInput" class="display-only"></div><br>
      <label for="urlBiaInput">Url bìa:</label>
      <div class="display-only" id="urlBiaInput" oninput="updatePreviewBia()"></div><br>
      <label for="gioiThieuInput">Giới thiệu:</label>
      <div id="gioiThieuInput" class="display-only"></div><br>
      <label for="tienDoInput">Tiến độ:</label>
      <div id="tienDoInput" class="display-only"></div><br>
      <label for="tinhTrangInput">Tình trạng:</label>
      <select id="tinhTrangInput">
        <option value="Đợi duyệt">Đợi duyệt</option>
        <option value="Đã duyệt">Đã duyệt</option>
        <option value="Không đủ điều kiện">Không đủ điều kiện</option>
      </select>
      <label for="btvInput">Lời nhắn:</label>
      <input type="text" id="btvInput" placeholder="Viết cẩn thận, không viết tắt">
      <label for="linkTacPhamInput">Link tác phẩm:</label>
      <input type="text" id="linkTacPhamInput" placeholder="Nhập link tác phẩm">
      <div id="buttonContainer">
              <button type="button" id="backToTab1FromTab2">Về</button>
        <button type="button" id="readButton">Đọc</button>
        <button type="submit">Duyệt</button>
      </div>
    </form>
  </div>
</div>

<div id="tab3" class="tab-content">
  <div id="tabChuong1" class="tab-content-chapter">
    <label for="chuong1Input">Chương 1:</label>
    <div id="chuong1Input" class="display-only"></div>
    <div id="buttonContainer">
          <button type="button" class="backToTab1">Về</button>

      <button type="button" id="prevButton">Sau</button>
      <button type="button" id="nextButton">Tiếp</button>
    </div>
  </div>
  <div id="tabChuong2" class="tab-content-chapter" style="display: none;">
    <label for="chuong2Input">Chương 2:</label>
    <div id="chuong2Input" class="display-only"></div>
    <div id="buttonContainer">
          <button type="button" class="backToTab1">Về</button>

      <button type="button" id="prevButton2">Sau</button>
      <button type="button" id="nextButton2">Tiếp</button>
    </div>
  </div>
  <div id="tabChuong3" class="tab-content-chapter" style="display: none;">
    <label for="chuong3Input">Chương 3:</label>
    <div id="chuong3Input" class="display-only"></div>
    <div id="buttonContainer">
          <button type="button" class="backToTab1">Về</button>

      <button type="button"
      id="prevButton3">Sau</button>
      <button type="button" id="nextButton3">Tiếp</button>
    </div>
  </div>
</div>

<script>const apiUrl="https://script.google.com/macros/s/AKfycbxOOHp5RYr8mkbbEO9taOOESqLlqwrZqiQ-rnvU6sMEqQt0Goln_2zlHlREkgXfmX6cOg/exec";function showLoader(){document.getElementById("loader").style.display="block";const formContainer=document.querySelector(".form-container");if(formContainer){formContainer.style.display="none"}}
function hideLoader(){document.getElementById("loader").style.display="none";const formContainer=document.querySelector(".form-container");if(formContainer){formContainer.style.display="block"}}
function formatTextToBr(text){if(!text)return'';return text.split(/(\r\n|\n|\r)+/).map(line=>`<div style="margin-bottom: 8px; text-align: justify;">${line}</div>`).join('')}
function getTacPhamByTinhTrang(tinhTrang){showLoader();document.getElementById("tacPhamList").innerHTML="";fetch(`${apiUrl}?action=getByTinhTrang&tinhTrang=${encodeURIComponent(tinhTrang)}`).then(response=>response.json()).then(data=>{hideLoader();if(data.tacPhamList.length===0){document.getElementById("tacPhamList").innerHTML+=`<p>Không có tác phẩm nào trong tình trạng "${tinhTrang}".</p>`}else{displayTacPhamInfoByTinhTrang(tinhTrang,data)}}).catch(error=>{hideLoader();console.error("Lỗi khi truy vấn API:",error)})}
function displayTacPhamInfoByTinhTrang(tinhTrang,data){let htmlContent=`<h3>Tác phẩm: ${tinhTrang}</h3>`;data.tacPhamList.forEach((tacPham,index)=>{htmlContent+=`
            <p 
                onclick="selectTacPham('${tacPham}')"
                style="cursor: pointer;">
                #${index + 1} ${tacPham}
            </p>`});document.getElementById("tacPhamList").innerHTML+=htmlContent}
function selectTacPham(tacPham){document.getElementById("tacPhamInput").value=tacPham;getTacPham();document.getElementById("tab1").classList.remove('active');document.getElementById("tab2").classList.add('active')}
function getTacPham(){const tacPham=document.getElementById("tacPhamInput").value;if(!tacPham){alert("Vui lòng nhập tên tác phẩm!");return}
showLoader();fetch(`${apiUrl}?action=get&tacPham=${encodeURIComponent(tacPham)}`).then(response=>response.json()).then(data=>{hideLoader();if(data.error){alert("Tác phẩm không tìm thấy!");document.getElementById("tacPhamInfo").innerText=""}else{displayTacPhamInfo(data)}}).catch(error=>{hideLoader();console.error("Lỗi khi truy vấn API:",error)})}
function displayTacPhamInfo(data){document.getElementById("tacPhamInput").innerText=data.tacPham;document.getElementById("tacGiaInput").innerText=data.tacGia;document.getElementById("theLoaiInput").innerText=data.theLoai;document.getElementById("urlBiaInput").innerText=data.urlBia;document.getElementById("gioiThieuInput").innerHTML=formatTextToBr(data.gioiThieu);document.getElementById("tinhTrangInput").value=data.tinhTrang;document.getElementById("tienDoInput").innerText=data.tienDo;document.getElementById("linkTacPhamInput").value=data.linkTacPham;document.getElementById("btvInput").value=data.btv;const biaPreview=document.getElementById("biaPreview");biaPreview.innerHTML=`
    <div style="display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; margin-bottom: 12px;">
      <img src="${data.urlBia}" alt="Mạng KDV yếu or Url bìa không đúng" style="width: 30%; height: auto; aspect-ratio: 2 / 3; object-fit: cover;">
    </div>
  `;document.getElementById("chuong1Input").innerHTML=formatTextToBr(data.chuong1||"Chưa có thông tin");document.getElementById("chuong2Input").innerHTML=formatTextToBr(data.chuong2||"Chưa có thông tin");document.getElementById("chuong3Input").innerHTML=formatTextToBr(data.chuong3||"Chưa có thông tin")}
function updateTacPham(event){event.preventDefault();showLoader();const tacPham=document.getElementById("tacPhamInput").innerText;const tacGia=document.getElementById("tacGiaInput").innerText;const theLoai=document.getElementById("theLoaiInput").innerText;const urlBia=document.getElementById("urlBiaInput").innerText;const gioiThieu=document.getElementById("gioiThieuInput").value;const tinhTrang=document.getElementById("tinhTrangInput").value;const tienDo=document.getElementById("tienDoInput").innerText;const linkTacPham=document.getElementById("linkTacPhamInput").value;const btv=document.getElementById("btvInput").value;const params=new URLSearchParams({action:"update",tacPham:tacPham,tacGia:tacGia,theLoai:theLoai,urlBia:urlBia,gioiThieu:gioiThieu,tinhTrang:tinhTrang,tienDo:tienDo,linkTacPham:linkTacPham,btv:btv});fetch(`${apiUrl}?${params.toString()}`,{method:"GET",}).then(response=>response.json()).then(data=>{hideLoader();if(data.success){switchTab('tab1');getTacPhamByTinhTrang("Đợi duyệt");getTacPhamByTinhTrang("Không đủ điều kiện")}else{alert("Cập nhật thất bại!")}}).catch(error=>{hideLoader();alert("Có lỗi xảy ra khi cập nhật tác phẩm!");console.error(error)})}
window.onload=function(){getTacPhamByTinhTrang("Đợi duyệt");getTacPhamByTinhTrang("Không đủ điều kiện")};function hideAllHTML(){const allContent=document.body.children;for(let element of allContent){element.style.display='none'}}
function showAllHTML(){const allContent=document.body.children;for(let element of allContent){element.style.display=''}}
function switchTab(tabId){const tabs=document.querySelectorAll('.tab-content');tabs.forEach(tab=>{tab.classList.remove('active')});const activeTab=document.getElementById(tabId);activeTab.classList.add('active')}
function switchToChapter(chapterNumber){document.getElementById('tabChuong1').style.display='none';document.getElementById('tabChuong2').style.display='none';document.getElementById('tabChuong3').style.display='none';document.getElementById(`tabChuong${chapterNumber}`).style.display=''}
document.getElementById('readButton').addEventListener('click',()=>{hideAllHTML();setTimeout(()=>{showAllHTML();switchTab('tab3');switchToChapter(1)},100)});document.getElementById('backToTab1FromTab2').addEventListener('click',()=>{hideAllHTML();setTimeout(()=>{showAllHTML();switchTab('tab1')},100)});document.getElementById('prevButton').addEventListener('click',()=>{hideAllHTML();setTimeout(()=>{showAllHTML();switchToChapter(1)},100)});document.getElementById('nextButton').addEventListener('click',()=>{hideAllHTML();setTimeout(()=>{showAllHTML();switchToChapter(2)},100)});document.getElementById('prevButton2').addEventListener('click',()=>{hideAllHTML();setTimeout(()=>{showAllHTML();switchToChapter(1)},100)});document.getElementById('nextButton2').addEventListener('click',()=>{hideAllHTML();setTimeout(()=>{showAllHTML();switchToChapter(3)},100)});document.getElementById('prevButton3').addEventListener('click',()=>{hideAllHTML();setTimeout(()=>{showAllHTML();switchToChapter(2)},100)});document.querySelectorAll('.backToTab1').forEach(button=>{button.addEventListener('click',()=>{hideAllHTML();setTimeout(()=>{showAllHTML();switchTab('tab2')},100)})});</script>


</body>
</html>
