<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dynamic Form to Google Form</title>
  <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
  <style>
    /* Basic reset and styling */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
      margin: 0;
      padding: 20px;
    }
    .form-container {
      max-width: 100%;
      margin: 0 auto;
      padding: 20px;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    }
    .form-group {
      margin-bottom: 15px;
    }
    .form-group label {
      display: block;
      font-weight: bold;
    }
    .form-group input,
    .form-group select {
      width: 100%;
      padding: 10px;
      font-size: 14px;
      margin-top: 5px;
      border-radius: 4px;
      border: 1px solid #ccc;
    }
    button {
      background-color: #4CAF50;
      color: black;
      padding: 10px 15px;
      border: none;
      cursor: pointer;
      margin-top: 10px;
      border-radius: 4px;
    }
    button[type="reset"] {
      background-color: #f44336;
    }
    button[type="submit"] {
      background-color: #008CBA;
    }
    button:hover {
      opacity: 0.9;
    }
    body.dark-mode {
      background-color: #333;
      color: white;
    }
    body.dark-mode .form-container {
      background-color: #444;
      color: white;
    }
    /* Fix select2 dropdown alignment */
    .select2-container--default .select2-selection--multiple .select2-selection__choice {
      background-color: #d9d9d9;
      color: #000;
    }
    .select2-container--default .select2-results__option--highlighted {
      background-color: #666;
      color: #fff;
    }
  </style>
</head>
<body>
  <div class="form-container">
    <h2>Dynamic Form to Google Form</h2>
    <form id="dynamic-google-form" action="https://docs.google.com/forms/d/e/1FAIpQLScg_9OoF94R1w7VbWb2HRa_h2CeL3tr-1HVhjwkSl-fwrCrIQ/formResponse" method="POST">
      <div id="dynamic-form">
        <!-- Dynamic fields will be injected here -->
      </div>
      <button type="button" onclick="addDateTimeFields()">Add Date and Time</button>
      <button type="submit">Submit</button>
      <button type="button" onclick="saveForm()">Save Progress</button>
      <button type="reset">Reset</button>
    </form>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
  <script>
    const csvData = `
label,type,options,entry_id,required
Name,text,,1795746754,true
What is your favorite fruit?,select,Apple|Banana|Casava|Cantaloupe|Candle|Grog|Noob,355593056,true
Select multiple fruits,multi-select,Apple|Banana|Casava|Cantaloupe|Candle|Grog|Noob,1268255035,true
    `;
    let dateTimeCounter = 0;

    // Load form fields from CSV
    function loadForm() {
      const form = document.getElementById("dynamic-form");
      const rows = csvData.trim().split("\n").slice(1);

      rows.forEach(row => {
        const [label, type, options, entryId, required] = row.split(",");
        const formGroup = document.createElement("div");
        formGroup.className = "form-group";

        const fieldLabel = document.createElement("label");
        fieldLabel.textContent = label;
        formGroup.appendChild(fieldLabel);

        if (type === "text" || type === "date" || type === "time") {
          const input = document.createElement("input");
          input.type = type;
          input.name = `entry.${entryId}`;
          input.required = required === "true";
          formGroup.appendChild(input);
        } else if (type === "select" || type === "multi-select") {
          const select = document.createElement("select");
          select.name = `entry.${entryId}`;
          select.required = required === "true";
          if (type === "multi-select") select.multiple = true;

          options.split("|").forEach(option => {
            const opt = document.createElement("option");
            opt.value = option.trim();
            opt.textContent = option.trim();
            select.appendChild(opt);
          });

          formGroup.appendChild(select);
          $(select).select2({ width: '100%', placeholder: "Select an option", allowClear: true });
        }

        form.appendChild(formGroup);
      });
    }

    // Add dynamic Date and Time fields
    function addDateTimeFields() {
      dateTimeCounter++;

      const form = document.getElementById("dynamic-form");

      const dateGroup = document.createElement("div");
      dateGroup.className = "form-group";
      const dateLabel = document.createElement("label");
      dateLabel.textContent = `Date ${dateTimeCounter}`;
      const dateInput = document.createElement("input");
      dateInput.type = "date";
      dateInput.name = `entry.dynamic_date_${dateTimeCounter}`;
      dateGroup.appendChild(dateLabel);
      dateGroup.appendChild(dateInput);

      const timeGroup = document.createElement("div");
      timeGroup.className = "form-group";
      const timeLabel = document.createElement("label");
      timeLabel.textContent = `Time ${dateTimeCounter}`;
      const timeInput = document.createElement("input");
      timeInput.type = "time";
      timeInput.name = `entry.dynamic_time_${dateTimeCounter}`;
      timeGroup.appendChild(timeLabel);
      timeGroup.appendChild(timeInput);

      form.appendChild(dateGroup);
      form.appendChild(timeGroup);
    }

    // Save form progress
    function saveForm() {
      const form = document.getElementById("dynamic-google-form").cloneNode(true);
      const formData = $("#dynamic-google-form").serializeArray();

      formData.forEach(field => {
        const input = form.querySelector(`[name='${field.name}']`);
        if (input) input.value = field.value;
      });

      const htmlContent = `
        <!DOCTYPE html>
        <html lang="en">
        <head><title>Saved Form</title></head>
        <body>${form.outerHTML}</body>
        </html>
      `;

      const blob = new Blob([htmlContent], { type: "text/html" });
      const link = document.createElement("a");
      link.href = URL.createObjectURL(blob);
      link.download = prompt("Enter a filename", "saved_form.html");
      link.click();
    }

    $(document).ready(loadForm);
  </script>
</body>
</html>
