<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Thêm Truyện</title>
  <style>
h2 {
	text-align: center;
}

.form-group {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}

.form-group label {
	font-weight: bold;
	width: 150px;
	font-size: 16px;
	text-align: center;
}

.form-group input, .form-group textarea, .form-group select {
	padding: 12px;
	font-size: 16px;
	border: 1px solid var(--contentL);
	background: var(--contentB);
	border-radius: 8px;
	width: 100%;
	box-sizing: border-box;
	transition: border-color .3s, background-color .3s;
	color: var(--bodyC);
}

.tags-container {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
	justify-content: center;
}

.tag {
	background-color: #007bff;
	color: white;
	padding: 8px 16px;
	border-radius: 20px;
	cursor: pointer;
	font-size: 14px;
	user-select: none;
	transition: background-color .3s ease;
}

.tag.selected {
	background-color: #28a745;
}

.tag:hover {
	background-color: #0056b3;
}

.submit-btn {
	background-color: #007bff;
	color: white;
	padding: 12px 20px;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	font-size: 16px;
	width: auto;
	margin: 0 auto;
	display: block;
	transition: background-color .3s ease;
}

.submit-btn:hover {
	background-color: #0056b3;
}

.response {
	margin-top: 15px;
	text-align: center;
	font-weight: bold;
	margin-bottom: 20px;
}

.success {
	color: green;
}

.error {
	color: red;
}

.loader {
	display: none;
	border: 4px solid rgba(0, 0, 0, .1);
	border-left-color: #007bff;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	animation: loader 1s linear infinite;
	margin: 0 auto;
	margin-bottom: 20px;
}

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

@media (max-width: 768px) {
	.form-group {
		flex-direction: column;
		align-items: flex-start;
	}
	
	.form-group label {
		width: auto;
	}
	
	.tags-container {
		justify-content: flex-start;
	}
	
	button {
		width: auto;
	}
}

  </style>
</head>
<body>
<div class="container">
  <form id="addDataForm">
    <div class="form-group">
      <label for="tacPham">Tác phẩm:</label>
      <input type="text" id="tacPham" name="tacPham" required>
    </div>
    <div class="form-group">
      <label for="tacGia">Tác giả:</label>
      <input type="text" id="tacGia" name="tacGia" required>
    </div>
    <div class="form-group">
      <label for="theLoai">Thể loại:</label>
      <div class="tags-container" id="tagsContainer">
<span class="tag" data-value="Hành Động">Hành Động</span>
<span class="tag" data-value="Giật Gân">Giật Gân</span>
<span class="tag" data-value="Phiêu Lưu">Phiêu Lưu</span>
<span class="tag" data-value="Hài Hước">Hài Hước</span>
<span class="tag" data-value="Kinh Dị">Kinh Dị</span>
<span class="tag" data-value="Lãng Mạn">Lãng Mạn</span>
<span class="tag" data-value="Hiện Thực">Hiện Thực</span>
<span class="tag" data-value="Lịch Sử">Lịch Sử</span>
<span class="tag" data-value="Trinh Thám">Trinh Thám</span>
<span class="tag" data-value="Tâm Lý">Tâm Lý</span>
<span class="tag" data-value="Bí Ẩn">Bí Ẩn</span>
<span class="tag" data-value="Viễn Tưởng">Viễn Tưởng</span>
<span class="tag" data-value="Khoa Học Viễn Tưởng">Khoa Học Viễn Tưởng</span>
<span class="tag" data-value="Tận Thế">Tận Thế</span>
<span class="tag" data-value="Tâm Linh">Tâm Linh</span>
<span class="tag" data-value="NamxNam">NamxNam</span>
<span class="tag" data-value="NữxNữ">NữxNữ</span>
<span class="tag" data-value="Cổ Trang">Cổ Trang</span>
<span class="tag" data-value="18+">18+</span>
      </div>
      <input type="hidden" id="selectedTags" name="theLoai" required>
    </div>
    <div class="form-group">
      <label for="urlBia">URL bìa:</label>
      <input type="url" id="urlBia" name="urlBia" required>
    </div>
<div class="form-group">
  <label for="trichDoan">Giới thiệu:</label>
  <textarea id="trichDoan" name="trichDoan" rows="4" required></textarea>
</div>
<div class="form-group">
  <label for="chuong1">Bản thảo chương 1:</label>
  <textarea id="chuong1" name="chuong1" rows="4"></textarea>
</div>
<div class="form-group">
  <label for="chuong2">Bản thảo chương 2:</label>
  <textarea id="chuong2" name="chuong2" rows="4"></textarea>
</div>
<div class="form-group">
  <label for="chuong3">Bản thảo chương 3:</label>
  <textarea id="chuong3" name="chuong3" rows="4"></textarea>
</div>
<div class="form-group">
  <label for="progress">Tiến độ:</label>
  <select id="progress" name="progress" required>
    <option value="Đang viết">Đang viết</option>
    <option value="Hoàn thành">Hoàn thành</option>
    <option value="Tạm ngừng">Tạm ngừng</option>
  </select>
</div>


<!-- Thêm loader và thông báo lên phía trên nút -->
<div id="addResponse" class="response"></div>
<div class="loader" id="loader"></div>
<button class="submit-btn" type="submit">Gửi duyệt</button>

  </form>
</div>


  <script>
    const scriptUrl = "https://script.google.com/macros/s/AKfycbwlTwlxo5bHAbMOOE9ER6x7uN41scjx2XmKzPq7PLrIzl4QWvqvvsf8JxM2XEyUC_Q/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
  chuong1: formData.get("chuong1"),  // Send Chương 1
  chuong2: formData.get("chuong2"),  // Send Chương 2
  chuong3: formData.get("chuong3")   // Send Chương 3
}));


    // 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>
</body>
</html>