  <script>
    const scriptUrl = "https://script.google.com/macros/s/AKfycby62R2xhdB30mn0a5BisCNmtaF5RfFmqVB5dOS3gvwTvppXXNuj4T6onevc7L5PG2yjFQ/exec";

    // Event listener for tag selection
    document.getElementById("tagsContainer").addEventListener("click", (event) => {
      if (event.target.classList.contains("tag")) {
        event.target.classList.toggle("selected");

        // Get all selected tags
        const selectedTags = Array.from(document.querySelectorAll(".tag.selected"))
          .map(tag => tag.getAttribute("data-value"));

        // Update the hidden input with the comma-separated tags
        document.getElementById("selectedTags").value = selectedTags.join(", ");
      }
    });

document.getElementById("addDataForm").addEventListener("submit", async (event) => {
  event.preventDefault();
  const formData = new FormData(event.target);
  const loader = document.getElementById("loader");
  const addResponse = document.getElementById("addResponse");
  const submitButton = event.target.querySelector("button");

  // Disable the submit button to prevent multiple submissions
  submitButton.disabled = true;

  // Clear any previous response and hide the loader
  addResponse.innerHTML = "";
  addResponse.classList.remove("success", "error");

  // Hiển thị loader
  loader.style.display = "block";

  try {
    const response = await fetch(`${scriptUrl}?action=add&` + new URLSearchParams({
      tacPham: formData.get("tacPham"),
      tacGia: formData.get("tacGia"),
      theLoai: formData.get("theLoai"),  // Send the formatted tags
      urlBia: formData.get("urlBia"),
      trichDoan: formData.get("trichDoan"),
      progress: formData.get("progress")  // Send progress value
    }));

    // Check if the response is ok
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }

    const result = await response.json();

    // Check if the result indicates success
    if (result.success) {
      addResponse.innerHTML = `
        Tác phẩm đã được nhận và đang đợi kiểm duyệt với ID: <span id="idValue">${result.id}</span>
        <svg class="copy-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path class='line' d="M6 11C6 8.17157 6 6.75736 6.87868 5.87868C7.75736 5 9.17157 5 12 5H15C17.8284 5 19.2426 5 20.1213 5.87868C21 6.75736 21 8.17157 21 11V16C21 18.8284 21 20.2426 20.1213 21.1213C19.2426 22 17.8284 22 15 22H12C9.17157 22 7.75736 22 6.87868 21.1213C6 20.2426 6 18.8284 6 16V11Z" stroke="#1C274C" stroke-width="1.5"></path>
        </svg>
        <p style="font-size: 12px; color: var(--darkTa); margin-top: 10px;">* ID được dùng để quản lí tác phẩm, tuyệt đối không để lộ ID, và cần lưu trữ ID cẩn thận. Trong trường hợp mất ID, lộ ID, quên ID hãy liên hệ QTV ngay lập tức.</p>
      `;
      addResponse.classList.add("success");
      addResponse.classList.remove("error");

      // Save the book info in localStorage
      const bookInfo = {
        id: result.id,
        tacPham: formData.get("tacPham"),
        tacGia: formData.get("tacGia"),
      };

      localStorage.setItem(result.id, JSON.stringify(bookInfo));
      console.log('Book info saved to localStorage:', bookInfo);
    } else {
      addResponse.textContent = `Lỗi: ${result.error}`;
      addResponse.classList.add("error");
      addResponse.classList.remove("success");
    }

  } catch (error) {
    console.error('Error during form submission:', error);
    addResponse.textContent = `Lỗi: ${error.message}`;
    addResponse.classList.add("error");
    addResponse.classList.remove("success");
  } finally {
    // Ẩn loader sau khi hoàn tất
    loader.style.display = "none";

    // Re-enable the submit button
    submitButton.disabled = false;
  }
});

  </script>