<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Order Entry Form</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
    />
    <script>
      // Define the original modal content as a constant.
      const originalModalContent = `
          <h2 class="text-2xl font-bold mb-4">Confirm Submission</h2>
          <p class="mb-4">Would you like to submit the order now?</p>
          <div class="flex justify-end space-x-4">
            <button id="cancel-c" class="bg-gray-500 text-white px-4 py-2" onclick="closeModal()">Cancel</button>
            <button id="submit-now-button" class="bg-blue-500 text-white px-4 py-2" onclick="submitOrder()">Submit Now</button>
          </div>
      `;

      // ---------------- Order & Dropdown Data Functions ---------------- //
      window.onload = fetchDropdownData;

      function fetchDropdownData() {
        google.script.run
          .withSuccessHandler(populateDropdowns)
          .getDropdownData();
      }

      var itName;

      function populateDropdowns(data) {
        populateDropdown("concerned-person", data.concernedPerson);
        populateDropdown("category", data.category);
        populateDropdown("outlet-name", data.outletName);
        populateDropdown("occasion-type", data.occasionType);
        populateDropdown("box-type", data.boxType);
        populateDropdown("refer-by", data.referBy);
        itName = data.itNames;
      }

      function populateDropdown(dropdownId, options) {
        const dropdown = document.getElementById(dropdownId);
        dropdown.innerHTML = "";

        const formattedLabel = `Select ${dropdownId
          .replace(/-/g, " ")
          .replace(/\b\w/g, (char) => char.toUpperCase())}`;

        const defaultOption = document.createElement("option");
        defaultOption.value = "";
        defaultOption.textContent = formattedLabel;
        defaultOption.disabled = true;
        defaultOption.selected = true;
        dropdown.appendChild(defaultOption);

        options.forEach((option) => {
          const opt = document.createElement("option");
          opt.value = option;
          opt.textContent = option;
          dropdown.appendChild(opt);
        });
      }

      function saveOrder() {
        const requiredFields = [
          "order-number",
          "outlet-name",
          "customer-name",
          "phone-number",
          "occasion-type",
          "occasion-date",
          "box-type",
          "concerned-person",
        ];
        let allFieldsFilled = true;

        requiredFields.forEach((field) => {
          const el = document.getElementById(field);
          if (!el.value) {
            allFieldsFilled = false;
            el.classList.add("border-red-500");
          } else {
            el.classList.remove("border-red-500");
          }
        });

        if (!allFieldsFilled) {
          alert("Please fill all mandatory fields.");
          return;
        }

        document.getElementById("order-info").classList.add("hidden");
        document.getElementById("order-preview").classList.remove("hidden");
        document.getElementById("order-preview-content").innerHTML = `
          <p><strong>Order Number:</strong> ${document.getElementById("order-number").value}</p>
          <p><strong>Outlet Name:</strong> ${document.getElementById("outlet-name").value}</p>
          <p><strong>Customer Name:</strong> ${document.getElementById("customer-name").value}</p>
          <p><strong>Phone Number:</strong> ${document.getElementById("phone-number").value}</p>
          <p><strong>Occasion Type:</strong> ${document.getElementById("occasion-type").value}</p>
          <p><strong>Occasion Date:</strong> ${document.getElementById("occasion-date").value}</p>
          <p><strong>Box Type:</strong> ${document.getElementById("box-type").value}</p>
          <p><strong>Couple Name:</strong> ${document.getElementById("couple-name").value}</p>
          <p><strong>Refer By:</strong> ${document.getElementById("refer-by").value}</p>
          <p><strong>Concerned Person:</strong> ${document.getElementById("concerned-person").value}</p>
        `;
      }

      function addCategory() {
        document.getElementById("category-options").classList.remove("hidden");
        resetCategoryFields();
        document
          .getElementById("category-options")
          .scrollIntoView({ behavior: "smooth" });
      }

      function resetCategoryFields() {
        document.getElementById("category").value = "";
        document.getElementById("box-number").value = "";
        document.getElementById("mrp").value = "";
        document.getElementById("fixed-price").value = "";
        document.getElementById("box-code").value = "";
        document.getElementById("category-remarks").value = "";
      }

      function saveCategory() {
        const requiredFields = [
          "category",
          "box-number",
          "mrp",
          "fixed-price",
          "box-code",
        ];
        let allFieldsFilled = true;

        requiredFields.forEach((field) => {
          const el = document.getElementById(field);
          if (!el.value) {
            allFieldsFilled = false;
            el.classList.add("border-red-500");
          } else {
            el.classList.remove("border-red-500");
          }
        });

        if (!allFieldsFilled) {
          alert("Please fill all mandatory fields.");
          return;
        }

        document.getElementById("category-options").classList.add("hidden");
        const categoryPreview = document.createElement("div");
        categoryPreview.classList.add("border", "p-4", "mb-4", "bg-gray-100", "rounded");
        categoryPreview.innerHTML = `
          <h3 class="text-xl font-bold mb-2">Category Details</h3>
          <p><strong>Category:</strong> ${document.getElementById("category").value}</p>
          <p><strong>BOX Number:</strong> ${document.getElementById("box-number").value}</p>
          <p><strong>MRP:</strong> ${document.getElementById("mrp").value}</p>
          <p><strong>Fixed Price:</strong> ${document.getElementById("fixed-price").value}</p>
          <p><strong>Box Code:</strong> ${document.getElementById("box-code").value}</p>
          <p><strong>Category Remarks:</strong> ${document.getElementById("category-remarks").value}</p>
          <button class="bg-blue-500 text-white px-4 py-2 mt-2" onclick="addItem(this)">Add Item</button>
          <div class="item-previews mt-4"></div>
        `;
        document.getElementById("order-preview-content").appendChild(categoryPreview);
      }

      // ------------------ ITEM DETAILS FUNCTIONS ------------------ //

      function getItemNames() {
        return itName;
      }

      function initItemDetails(container) {
        const dropdownButton = container.querySelector(".dropdown-button");
        const dropdownMenu = container.querySelector(".dropdown-menu");
        const searchInput = container.querySelector(".search-input");
        const itemList = container.querySelector(".item-list");
        const selectedItemSpan = container.querySelector(".selected-item");
        const itemNameInput = container.querySelector(".item-name");

        function renderDropdownItems(items) {
          itemList.innerHTML = "";
          items.forEach((item) => {
            const a = document.createElement("a");
            a.href = "#";
            a.className = "dropdown-item block px-4 py-2 hover:bg-gray-100 cursor-pointer";
            a.textContent = item;
            a.addEventListener("click", function (e) {
              e.preventDefault();
              selectedItemSpan.textContent = this.textContent;
              itemNameInput.value = this.textContent;
              dropdownMenu.classList.add("hidden");
            });
            itemList.appendChild(a);
          });
        }

        dropdownButton.addEventListener("click", function () {
          dropdownMenu.classList.toggle("hidden");
          searchInput.value = "";
          renderDropdownItems(getItemNames());
        });

        searchInput.addEventListener("input", function () {
          const searchTerm = this.value.toLowerCase();
          const filteredItems = getItemNames().filter((item) =>
            item.toLowerCase().includes(searchTerm)
          );
          renderDropdownItems(filteredItems);
        });
      }

      function addItem(button) {
        const itemContainer = document.createElement("div");
        itemContainer.classList.add("item-detail", "border", "p-4", "mb-4", "bg-white", "rounded");
        itemContainer.innerHTML = `
          <h4 class="text-lg font-bold mb-2">Item Details</h4>
          <div class="mb-2">
            <label class="block">ITEM NAME <span class="text-red-500">*</span></label>
            <div class="relative">
              <button type="button" class="dropdown-button inline-flex justify-between w-full px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none">
                <span class="selected-item">Select Item</span>
                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M6.293 9.293a1 1 0 011.414 0L10 11.586l2.293-2.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"/>
                </svg>
              </button>
              <input type="hidden" class="item-name">
              <div class="dropdown-menu hidden absolute mt-2 w-full bg-white border border-gray-300 shadow-md rounded-md">
                <input type="text" class="search-input w-full px-4 py-2 border-b focus:outline-none" placeholder="Search items">
                <div class="item-list max-h-40 overflow-y-auto"></div>
              </div>
            </div>
          </div>
          <div class="mb-2">
            <label class="block">QUANTITY <span class="text-red-500">*</span></label>
            <input type="number" class="quantity border p-2 w-full">
          </div>
          <div class="mb-2">
            <label class="block">UNIT <span class="text-red-500">*</span></label>
            <div class="flex space-x-2">
              <button type="button" class="unit-option border p-2 w-full" onclick="selectUnit(this, 'KGS')">KGS</button>
              <button type="button" class="unit-option border p-2 w-full" onclick="selectUnit(this, 'PCS')">PCS</button>
            </div>
            <input type="hidden" class="unit" value="N/A">
          </div>
          <div class="mb-2">
            <label class="block">ITEM REMARKS</label>
            <input type="text" class="item-remarks border p-2 w-full">
          </div>
          <button class="bg-blue-500 text-white px-4 py-2" onclick="saveItem(this)">Save Item</button>
        `;
        button.parentElement.querySelector(".item-previews").appendChild(itemContainer);
        initItemDetails(itemContainer);
      }

      function selectUnit(button, unit) {
        const container = button.closest(".item-detail");
        const unitButtons = container.querySelectorAll(".unit-option");
        unitButtons.forEach((btn) => {
          btn.classList.remove("bg-blue-500", "text-white");
        });
        button.classList.add("bg-blue-500", "text-white");
        container.querySelector(".unit").value = unit;
      }

      function saveItem(button) {
        const container = button.closest(".item-detail");
        const itemName = container.querySelector(".item-name").value;
        const quantity = container.querySelector(".quantity").value;
        const unit = container.querySelector(".unit").value;
        if (!itemName || !quantity || !unit || unit === "N/A") {
          alert("Please fill all mandatory fields.");
          return;
        }
        const itemPreview = document.createElement("div");
        itemPreview.classList.add("border", "p-4", "mb-4", "bg-gray-50", "rounded");
        itemPreview.innerHTML = `
          <p><strong>ITEM NAME:</strong> ${itemName}</p>
          <p><strong>QUANTITY:</strong> ${quantity}</p>
          <p><strong>UNIT:</strong> ${unit}</p>
          <p><strong>ITEM REMARKS:</strong> ${container.querySelector(".item-remarks").value}</p>
        `;
        container.parentElement.appendChild(itemPreview);
        container.remove();
      }

      // ------------------ FINAL SUBMISSION & RESET ------------------ //

      function finalSubmit() {
        // When finalSubmit is called, reset the modal content.
        document.getElementById("confirmation-modal-content").innerHTML = originalModalContent;
        document.getElementById("confirmation-modal").classList.remove("hidden");
      }

      function closeModal() {
        document.getElementById("confirmation-modal").classList.add("hidden");
      }

      function submitOrder() {
        const canButton = document.getElementById("cancel-c");
        canButton.disabled = true;
        const submitButton = document.getElementById("submit-now-button");
        submitButton.disabled = true;
        submitButton.innerText = "Submitting...";

        const orderInfo = {
          orderNumber: document.getElementById("order-number").value,
          outletName: document.getElementById("outlet-name").value,
          customerName: document.getElementById("customer-name").value,
          phoneNumber: document.getElementById("phone-number").value,
          occasionType: document.getElementById("occasion-type").value,
          occasionDate: document.getElementById("occasion-date").value,
          boxType: document.getElementById("box-type").value,
          coupleName: document.getElementById("couple-name").value,
          referBy: document.getElementById("refer-by").value,
          concernedPerson: document.getElementById("concerned-person").value,
        };

        const categories = Array.from(document.querySelectorAll("#order-preview-content > div")).map((categoryDiv) => {
          const categoryData = {
            category: categoryDiv.querySelector("p:nth-of-type(1)").textContent.split(": ")[1],
            boxNumber: categoryDiv.querySelector("p:nth-of-type(2)").textContent.split(": ")[1],
            mrp: categoryDiv.querySelector("p:nth-of-type(3)").textContent.split(": ")[1],
            fixedPrice: categoryDiv.querySelector("p:nth-of-type(4)").textContent.split(": ")[1],
            boxCode: categoryDiv.querySelector("p:nth-of-type(5)").textContent.split(": ")[1],
            categoryRemarks: categoryDiv.querySelector("p:nth-of-type(6)").textContent.split(": ")[1],
            items: Array.from(categoryDiv.querySelectorAll(".item-previews > div")).map((itemDiv) => ({
              itemName: itemDiv.querySelector("p:nth-of-type(1)").textContent.split(": ")[1],
              quantity: itemDiv.querySelector("p:nth-of-type(2)").textContent.split(": ")[1],
              unit: itemDiv.querySelector("p:nth-of-type(3)").textContent.split(": ")[1],
              itemRemarks: itemDiv.querySelector("p:nth-of-type(4)").textContent.split(": ")[1],
            })),
          };
          return categoryData;
        });

        const fullOrder = { orderInfo, categories };

        google.script.run
          .withSuccessHandler(() => {
            document.getElementById("confirmation-modal-content").innerHTML = `
              <h2 class="text-2xl font-bold mb-4">Order Submitted Successfully!</h2>
              <div class="flex justify-end">
                <button id="ok-button" class="bg-green-500 text-white px-4 py-2" onclick="okHandler()">OK</button>
              </div>
            `;
          })
          .withFailureHandler((error) => {
            submitButton.disabled = false;
            submitButton.innerText = "Submit Now";
            canButton.disabled = false;
            document.getElementById("confirmation-modal-content").innerHTML =
              '<h2 class="text-2xl font-bold mb-4">Error: ' + error.message + "</h2>";
          })
          .saveOrder(fullOrder);
      }

      function okHandler() {
      closeModal();
      resetForm();

      document.getElementById("confirmation-modal-content").innerHTML = originalModalContent;

      const submitButton = document.getElementById("submit-now-button");
      submitButton.disabled = false;
      submitButton.innerText = "Submit Now";
      canButton.disabled = false;
      }

      function resetForm() {
        document.getElementById("order-info").classList.remove("hidden");
        document.getElementById("order-preview").classList.add("hidden");
        document.getElementById("order-preview-content").innerHTML = "";
        document.getElementById("order-number").value = "";
        document.getElementById("outlet-name").value = "";
        document.getElementById("customer-name").value = "";
        document.getElementById("phone-number").value = "";
        document.getElementById("occasion-type").value = "";
        document.getElementById("occasion-date").value = "";
        document.getElementById("box-type").value = "";
        document.getElementById("couple-name").value = "";
        document.getElementById("refer-by").value = "";
        document.getElementById("concerned-person").value = "";
      }
    </script>
  </head>
  <body class="bg-gray-100 p-8">
    <h1 class="text-3xl font-bold mb-8">Order Entry Form</h1>
    <div id="order-info" class="bg-white p-8 rounded shadow-md">
      <h2 class="text-2xl font-bold mb-4">Order Information</h2>
      <div class="mb-4">
        <label for="order-number" class="block">
          Order Number <span class="text-red-500">*</span>
        </label>
        <input type="text" id="order-number" class="border p-2 w-full" required />
      </div>
      <div class="mb-4">
        <label for="outlet-name" class="block">
          Outlet Name <span class="text-red-500">*</span>
        </label>
        <select id="outlet-name" class="border p-2 w-full" required>
          <option value="" disabled selected>Select Outlet</option>
          <option>Outlet A</option>
          <option>Outlet B</option>
          <option>Outlet C</option>
        </select>
      </div>
      <div class="mb-4">
        <label for="customer-name" class="block">
          Customer Name <span class="text-red-500">*</span>
        </label>
        <input type="text" id="customer-name" class="border p-2 w-full" required />
      </div>
      <div class="mb-4">
        <label for="phone-number" class="block">
          Phone Number <span class="text-red-500">*</span>
        </label>
        <input type="text" id="phone-number" class="border p-2 w-full" required />
      </div>
      <div class="mb-4">
        <label for="occasion-type" class="block">
          Occasion Type <span class="text-red-500">*</span>
        </label>
        <select id="occasion-type" class="border p-2 w-full" required>
          <option value="" disabled selected>Select Occasion</option>
          <option>Wedding</option>
          <option>Birthday</option>
          <option>Anniversary</option>
        </select>
      </div>
      <div class="mb-4">
        <label for="occasion-date" class="block">
          Occasion Date <span class="text-red-500">*</span>
        </label>
        <input type="date" id="occasion-date" class="border p-2 w-full" required />
      </div>
      <div class="mb-4">
        <label for="box-type" class="block">
          Box Type <span class="text-red-500">*</span>
        </label>
        <select id="box-type" class="border p-2 w-full" required>
          <option value="" disabled selected>Select Box Type</option>
          <option>Type 1</option>
          <option>Type 2</option>
        </select>
      </div>
      <div class="mb-4">
        <label for="couple-name" class="block">Couple Name</label>
        <input type="text" id="couple-name" class="border p-2 w-full" />
      </div>
      <div class="mb-4">
        <label for="refer-by" class="block">Refer By</label>
        <select id="refer-by" class="border p-2 w-full">
          <option value="" disabled selected>Select Refer By</option>
          <option>Refer 1</option>
          <option>Refer 2</option>
        </select>
      </div>
      <div class="mb-4">
        <label for="concerned-person" class="block">
          Concerned Person <span class="text-red-500">*</span>
        </label>
        <select id="concerned-person" class="border p-2 w-full" required>
          <option value="" disabled selected>Select Concerned Person</option>
          <option>Person 1</option>
          <option>Person 2</option>
          <option>Person 3</option>
        </select>
      </div>
      <button class="bg-blue-500 text-white px-4 py-2" onclick="saveOrder()">Save Order</button>
    </div>

    <div id="order-preview" class="hidden bg-white p-8 rounded shadow-md mt-8">
      <h2 class="text-2xl font-bold mb-4">Order Preview</h2>
      <div id="order-preview-content" class="mb-4"></div>
      <button class="bg-blue-500 text-white px-4 py-2" onclick="addCategory()">Add Category</button>
      <div class="mt-8">
        <button class="bg-green-500 text-white px-4 py-2" onclick="finalSubmit()">Final Submit</button>
      </div>
    </div>

    <div id="category-options" class="hidden bg-white p-8 rounded shadow-md mt-8">
      <h2 class="text-2xl font-bold mb-4">Category Options</h2>
      <div class="mb-4">
        <label for="category" class="block">
          Category <span class="text-red-500">*</span>
        </label>
        <select id="category" class="border p-2 w-full" required>
          <option value="" disabled selected>Select Category</option>
          <option>Electronics</option>
          <option>Furniture</option>
          <option>Clothing</option>
        </select>
      </div>
      <div class="mb-4">
        <label for="box-number" class="block">
          Total Box <span class="text-red-500">*</span>
        </label>
        <input type="number" id="box-number" class="border p-2 w-full" required />
      </div>
      <div class="mb-4">
        <label for="mrp" class="block">
          MRP <span class="text-red-500">*</span>
        </label>
        <input type="number" id="mrp" class="border p-2 w-full" required />
      </div>
      <div class="mb-4">
        <label for="fixed-price" class="block">
          Fixed Price <span class="text-red-500">*</span>
        </label>
        <input type="number" id="fixed-price" class="border p-2 w-full" required />
      </div>
      <div class="mb-4">
        <label for="box-code" class="block">
          Box Code <span class="text-red-500">*</span>
        </label>
        <input type="text" id="box-code" class="border p-2 w-full" required />
      </div>
      <div class="mb-4">
        <label for="category-remarks" class="block">Category Remarks</label>
        <input type="text" id="category-remarks" class="border p-2 w-full" />
      </div>
      <button class="bg-blue-500 text-white px-4 py-2" onclick="saveCategory()">Save Category</button>
    </div>

    <!-- Confirmation Modal -->
    <div
      id="confirmation-modal"
      class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center"
    >
      <div class="bg-white p-8 rounded shadow-md">
        <div id="confirmation-modal-content">
          <!-- The modal content will be set dynamically -->
        </div>
      </div>
    </div>
  </body>
</html>
