<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Google Form Automation - Generalized Dynamic Dropdown</title><link href="https://cdn.jsdelivr.net/npm/selectize/dist/css/selectize.default.css" rel="stylesheet"><link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.13.18/jquery.timepicker.min.css"><link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"></head><style>body{font-family:Roboto,sans-serif;margin:0;padding:0;background-color:var(--bg-color);color:var(--text-color);transition:background-color .3s,color .3s}:root{--bg-color:#ffffff;--text-color:#000000;--primary-color:#6200ea;--secondary-color:#03dac6}[data-theme=dark]{--bg-color:#121212;--text-color:#ffffff;--primary-color:#bb86fc;--secondary-color:#03dac6}.container{max-width:800px;margin:auto;padding:20px}h1{text-align:center;color:var(--primary-color)}.form-group{margin-bottom:15px}label{display:block;font-weight:700;margin-bottom:5px}input[type=number],input[type=text],select,textarea{width:100%;padding:10px;border:1px solid var(--secondary-color);border-radius:5px;box-sizing:border-box;font-size:16px;transition:border-color .3s}input[type=number]:focus,input[type=text]:focus,select:focus,textarea:focus{border-color:var(--primary-color);outline:0}textarea{resize:vertical;min-height:100px}input[type=date-picker],input[type=time],select{width:100%;padding:10px;border:1px solid var(--secondary-color);border-radius:5px;box-sizing:border-box}button{background-color:var(--primary-color);color:#fff;padding:10px 20px;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s}button:hover{background-color:var(--secondary-color)}.theme-toggle{text-align:right;margin-bottom:20px}.respondent-container{margin-bottom:40px;border:1px solid var(--secondary-color);padding:15px;border-radius:5px}.respondent-container h3{color:var(--primary-color)}</style><body><div class="container"><div class="theme-toggle"><button onclick="toggleTheme()"><i id="themeIcon" class="fas fa-sun"></i></button></div><h1>Google Form Automation</h1><div class="form-group"><label for="entryCount">How many entries do you want to make?</label><select id="entryCount" required><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button style="margin-top:10px" onclick="fetchDropdownData()">Generate Forms</button></div><form id="mainForm"><div id="respondentForms"></div><button type="button" onclick="submitForms()">Submit All</button></form></div><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script src="https://cdn.jsdelivr.net/npm/selectize/dist/js/standalone/selectize.min.js"></script><link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"><script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.13.18/jquery.timepicker.min.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.13.18/jquery.timepicker.min.js"></script><script>function toggleTheme() {
        const body = document.body;
        const themeIcon = document.getElementById("themeIcon");

        // Toggle the data-theme attribute to switch between dark and light modes
        if (body.getAttribute("data-theme") === "dark") {
            body.removeAttribute("data-theme");
            themeIcon.classList.remove("fas", "fa-moon");
            themeIcon.classList.add("fas", "fa-sun");
        } else {
            body.setAttribute("data-theme", "dark");
            themeIcon.classList.remove("fas", "fa-sun");
            themeIcon.classList.add("fas", "fa-moon");
        }
    }

    const googleFormURL = "https://docs.google.com/forms/d/e/1FAIpQLSdPKu5PhYSYgya08g0nmoLkeIeZOXyKw3me4438HXDB-eMZIA/formResponse";
    const googleSheetURL = "https://docs.google.com/spreadsheets/d/11hg18hBmd21xhkl0pU8uIX20LmziAolpsT-_boyiKFI/gviz/tq?tqx=out:html";

const entryIDs = {

    name: "entry.447942522",
    code: "entry.812243099",
    rating: "entry.1512964190",
    checkboxfield: "entry.2051218209"

};

const labels = {

    name: "Nama anda",
    code: "Kod anda",
    rating: "Rating anda",
    checkboxfield: "abah anda"

};

    let sheetData = {}; // To store dropdown options by header

    async function fetchDropdownData() {
        try {
            const response = await fetch(googleSheetURL);
            const htmlText = await response.text();
            const parser = new DOMParser();
            const doc = parser.parseFromString(htmlText, "text/html");

            const rows = Array.from(doc.querySelectorAll("table tbody tr"));
            const headers = rows[0]?.querySelectorAll("td");

            if (!headers || headers.length === 0) {
                alert("No headers found in the sheet. Ensure headers are in the format 'fieldName-D' or 'fieldName-MD'.");
                return;
            }

            headers.forEach((header, index) => {
                const rawHeader = header.textContent.trim().toLowerCase();
                let fieldName = rawHeader;

                if (rawHeader.endsWith("-d")) {
                    fieldName = rawHeader.replace("-d", "").trim();
                    sheetData[fieldName] = {
                        type: "D",
                        values: rows.slice(1).map(row => row.querySelectorAll("td")[index]?.textContent.trim()).filter(Boolean)
                    };
                } else if (rawHeader.endsWith("-md")) {
                    fieldName = rawHeader.replace("-md", "").trim();
                    sheetData[fieldName] = {
                        type: "MD",
                        values: rows.slice(1).map(row => row.querySelectorAll("td")[index]?.textContent.trim()).filter(Boolean)
                    };
                } else if (rawHeader.endsWith("-t")) {
                    fieldName = rawHeader.replace("-t", "").trim();
                    sheetData[fieldName] = {
                        type: "T",
                        values: rows.slice(1).map(row => row.querySelectorAll("td")[index]?.textContent.trim()).filter(Boolean)
                    };
                } else if (rawHeader.endsWith("-ex")) {
                    fieldName = rawHeader.replace("-ex", "").trim();
                    sheetData[fieldName] = {
                        type: "EX",
                        values: rows.slice(1).map(row => row.querySelectorAll("td")[index]?.textContent.trim()).filter(Boolean)
                    };
                } else if (rawHeader.endsWith("-tarikh")) {
                    fieldName = rawHeader.replace("-tarikh", "").trim();
                    sheetData[fieldName] = {
                        type: "TARIKH",
                        values: rows.slice(1).map(row => row.querySelectorAll("td")[index]?.textContent.trim()).filter(Boolean)
                    };
                } else if (rawHeader.endsWith("-ma")) {
                    fieldName = rawHeader.replace("-ma", "").trim();
                    sheetData[fieldName] = {
                        type: "MA",
                        values: rows.slice(1).map(row => row.querySelectorAll("td")[index]?.textContent.trim()).filter(Boolean)
                    };
                }
            });

            console.log("Parsed sheetData:", sheetData); // Debugging output
            generateForms();
        } catch (error) {
            console.error("Error fetching dropdown data:", error);
            alert("An error occurred while fetching data from the Google Sheet. Check the console for details.");
        }
    }

    function generateForms() {
        const entryCount = parseInt(document.getElementById("entryCount").value, 10);
        const respondentForms = document.getElementById("respondentForms");

        // Clear existing forms
        respondentForms.innerHTML = "";

        if (!sheetData || Object.keys(sheetData).length === 0) {
            alert("No fields detected from the Google Sheet. Ensure headers are correctly formatted.");
            return;
        }

        for (let i = 1; i <= entryCount; i++) {
            const formHTML = `
                <div class="respondent-container">
                    <h3>Respondent ${i}</h3>
                    ${generateFormFields(i)}
                </div>
            `;
            respondentForms.innerHTML += formHTML;
        }

        // Initialize Selectize.js on all dropdowns
        document.querySelectorAll(".searchable").forEach(select => {
            $(select).selectize({
                create: false,
                sortField: "text"
            });
        });

        document.querySelectorAll(".multi-select").forEach(select => {
            $(select).selectize({
                plugins: ["remove_button"],
                delimiter: ",",
                persist: false,
                create: false,
                sortField: "text"
            });
        });
            // Initialize date and time pickers after forms are generated

    $('.date-picker').datepicker({
        dateFormat: 'dd-mm-yy',
        onSelect: function(dateText) {
            console.log("Selected date: " + dateText);
        }
    });

$('.time-picker').timepicker({
    timeFormat: 'h:mm p',
    interval: 30,
    minTime: '0',
    maxTime: '11:30pm',
    defaultTime: 'now',
    startTime: '0:00',
    dynamic: false,
    dropdown: true,
    scrollbar: true,
    change: function(time) {
        console.log("Selected time: " + time);
    }
});

        console.log("Form generation complete.");
    }

    function generateFormFields(index) {
        return Object.keys(sheetData).map(fieldName => {
            const field = sheetData[fieldName];
            if (!field || !field.values) {
                console.warn(`Field ${fieldName} is missing or has no values.`);
                return ""; // Skip undefined or empty fields
            }

            const options = field.values.map(value => `<option value="${value}">${value}</option>`).join("");

            if (field.type === "D") {
                return `
                    <div class="form-group">
                        <label for="${fieldName}${index}">${labels[fieldName]}</label>
                        <select id="${fieldName}${index}" name="${fieldName}" class="searchable" required>
                            <option value="" disabled selected>Select your ${fieldName}</option>
                            ${options}
                        </select>
                    </div>
                `;
            } else if (field.type === "MD") {
                return `
                    <div class="form-group">
                        <label for="${fieldName}${index}">${labels[fieldName]}</label>
                        <select id="${fieldName}${index}" name="${fieldName}" class="multi-select" multiple>
                            ${options}
                        </select>
                    </div>
                `;
            } else if (field.type === "T") {
                return `
                    <div class="form-group">
                        <label for="${fieldName}${index}">${labels[fieldName]}</label>
                        <input type="text" id="${fieldName}${index}" name="${fieldName}" required />
                    </div>
                `;
            } else if (field.type === "EX") {
                return `
                    <div class="form-group">
                        <label for="${fieldName}${index}">${labels[fieldName]}</label>
                        <textarea id="${fieldName}${index}" name="${fieldName}" rows="4" required></textarea>
                    </div>
                `;
            } else if (field.type === "TARIKH") {
                return `
                    <div class="form-group">
                        <label for="${fieldName}${index}">${labels[fieldName]}</label>
                    <input type="text" id="${fieldName}${index}" name="${fieldName}" class="date-picker" required />
                    </div>
                `;
            } else if (field.type === "MA") {
                return `
                    <div class="form-group">
                        <label for="${fieldName}${index}">${labels[fieldName]}</label>
            <input type="time" id="${fieldName}${index}" name="${fieldName}" class="time-picker" required />
                    </div>
                `;
            }

            return ""; // Skip unrecognized field types
        }).join("");
    }


function submitForms() {
    const entryCount = parseInt(document.getElementById("entryCount").value, 10);

    for (let i = 1; i <= entryCount; i++) {
        const formData = new FormData();
        const formFields = ["name", "code", "rating", "checkboxfield"]; // Fields to submit

        formFields.forEach(field => {
            const fieldElement = document.getElementById(`${field}${i}`);
            if (fieldElement) {
                if (fieldElement.type === "select-one") {
                    // Dropdown field (D type)
                    const selectedValue = fieldElement.value;
                    if (selectedValue) {
                        formData.append(entryIDs[field], selectedValue);
                    }
                } else if (fieldElement.type === "select-multiple") {
                    // Multi-select field (MD type)
                    const selectedValues = Array.from(fieldElement.selectedOptions).map(option => option.value);
                    if (selectedValues.length > 0) {
                        formData.append(entryIDs[field], selectedValues.join(",")); // Comma-separated values
                    }
                } else if (fieldElement.type === "checkbox") {
                    // Checkbox field
                    const checkboxes = document.querySelectorAll(`input[name="${field}${i}"]:checked`);
                    const selectedValues = Array.from(checkboxes).map(checkbox => checkbox.value);
                    if (selectedValues.length > 0) {
                        formData.append(entryIDs[field], selectedValues.join(",")); // Comma-separated values
                    }
                } else {
                    const value = fieldElement.value;
                    if (value) {
                        formData.append(entryIDs[field], value); // Use entryIDs mapping for other fields
                    }
                }
            }
        });

        console.log("Submitting form data:", [...formData]);
        fetch(googleFormURL, {
            method: "POST",
            mode: "no-cors",
            body: formData
        }).then(() => {
            console.log(`Form ${i} submitted`);
        }).catch((error) => {
            console.error(`Error submitting form ${i}:`, error);
        });
    }

    alert("All forms submitted!");
}</script></body></html>