window.onload = function () {
            document.body.classList.add("fade-in");
        };

        function goBack() {
            window.location.href = "./index.htm";
        }

        function closeDuplicateWarningDialog() {
            const duplicateWarningDialog = document.getElementById("duplicateWarningDialog");
            duplicateWarningDialog.classList.remove("visible");
        }

function proceedWithPrinting() {
    closeDuplicateWarningDialog();

    const rows = document.querySelectorAll("#dataTable tr:not(:first-child)");

    // Filter out crossed-out rows for printing
    const rowsToPrint = Array.from(rows).filter(row => !row.classList.contains("crossed-out"));
    const totalRows = rowsToPrint.length; // Only count rows that will be printed

    if (totalRows === 0) return;

    const addTrailingPages = document.getElementById("trailingPagesCheckbox").checked;
    const isDuplicate = document.getElementById("duplicateQrCheckbox").checked;
    const isPrintText = document.getElementById("printTextCheckbox").checked;

    let printContent = "";

    printContent += `<div style="
    page-break-after: ${addTrailingPages ? "always" : "avoid"};
    page-break-before: ${addTrailingPages ? "always" : "avoid"};"
    ></div>`;

    if (addTrailingPages) {
        printContent += `<div style="page-break-after: always;"></div>`;
    }

    let currentRow = 0;

    const loadingOverlay = document.getElementById("loadingOverlay");
    const loadingText = document.querySelector(".loading-text");
    loadingOverlay.style.display = "flex";

    function processRow() {
        if (currentRow >= totalRows) {
            setTimeout(() => {
                const printWindow = window.open("", "_blank");
                printWindow.document.write(`
            <html>
                <head>
                    <title>Print QR Codes</title>
                    <style>
                        body {
                            font-family: 'Arial', sans-serif;
                            text-align: center;
                            zoom: ${isDuplicate ? "0.225" : "0.30"};
                            margin: 0;
                            padding: 0;
                        }
                        div {
                            margin-bottom: 0;
                        }
                        @media print {
                            div {
                                page-break-inside: avoid;
                            }
                            body {
                                padding: 0px;
                            }
                        }
                    </style>
                </head>
                <body>${printContent}</body>
            </html>
        `);
                printWindow.document.close();

                printWindow.onafterprint = function () {
                    printWindow.close();
                    loadingOverlay.style.display = "none";
                };

                setTimeout(() => {
                    printWindow.print();
                }, 300);
            }, 500);
            return;
        }

        const row = rowsToPrint[currentRow];
        let rowText = row.querySelector("td").textContent.trim();

        // Remove the exclamation point from the row text before generating the QR code
        rowText = rowText.replace(/\u2757/g, ''); // Removes any exclamation points

        const qrCodeContainer = document.createElement("div");

        new QRCode(qrCodeContainer, {
            text: rowText,  // Use cleaned text without exclamation point
            width: 256,
            height: 256,
        });

        const qrCanvas = qrCodeContainer.querySelector("canvas");
        const qrDataUrl = qrCanvas.toDataURL();
        let displayText = rowText.length > 6 ? `...${rowText.slice(-3)}` : rowText;

        let qrContent = `<div style="display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 31%;
    text-align: center;">`;

        if (!isDuplicate) {
            qrContent = `<div style="display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    text-align: center;">`;
        }

        qrContent += `
<div style="display: flex;
flex-direction: column;
align-items: center;">
<img src="${qrDataUrl}"
alt="QR Code"
style="width: 128px;
height: 128px;" /></div>`;

        let textStyle = `
font-size: ${rowText.length > 6 ? "34" : "27"};
font-weight: 800;
margin-top: 10px;
text-align: center;`;

        if (isDuplicate) {
            textStyle = `
    font-size: ${rowText.length > 6 ? "34" : "27"};
    font-weight: 800;
    transform: rotate(180deg);
    writing-mode: vertical-rl;
    text-align: center;
    margin-left: 0;
    margin-top: 10px;
    `;
        }

        qrContent += `<div style="${textStyle}">${isPrintText ? displayText : ""}</div>`;
        qrContent += `</div>`;

        if (isDuplicate) {
            printContent += `
    <div style="page-break-inside: avoid; text-align: center;">
    <div style="height:13%;"></div>
    ${qrContent}${qrContent}</div>
    `;
        } else {
            printContent += `
    <div style="page-break-inside: avoid; text-align: center;">
    <div style="height:20%;"></div>
    ${qrContent}</div>`;
        }

        if (addTrailingPages && currentRow == totalRows - 1) {
            printContent += `
    <div style="height:50%;"></div>
    `;
        }

        currentRow++;
        loadingText.textContent = `Loading QR code ${currentRow} of ${totalRows}`;
        setTimeout(processRow, 50);
    }

    processRow();
}


function checkForDuplicates() {
    const tableRows = document.querySelectorAll("#dataTable tr:not(:first-child)");
    const values = [];
    const duplicates = new Map();

    tableRows.forEach((row) => {
        // Skip rows that are crossed-out
        if (row.classList.contains("crossed-out")) {
            return;
        }

        const rowValue = row.querySelector("td").textContent.trim();
        if (values.includes(rowValue)) {
            duplicates.set(rowValue, true);
        } else {
            values.push(rowValue);
        }
    });

    // Highlight duplicates and add exclamation icons
    tableRows.forEach((row) => {
        const rowValue = row.querySelector("td").textContent.trim();
        const existingExclamationIcon = row.querySelector(".exclamation-icon");

        // If the row is crossed out, remove the duplicate highlight and exclamation mark
        if (row.classList.contains("crossed-out")) {
            row.classList.remove("duplicate-row");
            if (existingExclamationIcon) {
                existingExclamationIcon.remove();
            }
        } else if (duplicates.has(rowValue)) {
            // Add duplicate-row class and exclamation icon
            row.classList.add("duplicate-row");
            if (!existingExclamationIcon) {
                const exclamationIcon = document.createElement("span");
                exclamationIcon.classList.add("exclamation-icon");
                exclamationIcon.innerHTML = "&#10071;";
                row.querySelector("td").appendChild(exclamationIcon);
            }
        } else {
            // Remove the duplicate highlight and exclamation icon if not a duplicate
            row.classList.remove("duplicate-row");
            if (existingExclamationIcon) {
                existingExclamationIcon.remove();
            }
        }
    });
}

        function removeAllDuplicatesAndPrint() {
            const tableRows = document.querySelectorAll("#dataTable tr:not(:first-child)");
            const uniqueValues = new Set();

            tableRows.forEach((row) => {
                const rowValue = row.querySelector("td").textContent.trim();
                if (uniqueValues.has(rowValue)) {
                    row.remove();
                } else {
                    uniqueValues.add(rowValue);
                    row.classList.remove("duplicate-row");
                    const exclamationIcon = row.querySelector(".exclamation-icon");
                    if (exclamationIcon) {
                        exclamationIcon.remove();
                    }
                }
            });

            closeDuplicateWarningDialog();
            proceedWithPrinting();
        }

function showDuplicateWarning(duplicates) {
    const duplicateWarningDialog = document.getElementById("duplicateWarningDialog");
    const duplicateListBox = document.getElementById("duplicateListBox");

    // Clear previous list
    duplicateListBox.textContent = "";

    // Loop through duplicates and add them to the dialog without exclamation icons
    duplicates.forEach((duplicate, index) => {
        const duplicateText = document.createElement("div");

        // Remove any exclamation points from the row content
        const cleanText = duplicate.replace(/[\u2757]/g, ""); // Remove exclamation mark

        duplicateText.textContent = `${index + 1}. ${cleanText}`;
        duplicateListBox.appendChild(duplicateText);
    });

    duplicateWarningDialog.classList.add("visible");
}

        function printTable() {
            const duplicates = getDuplicateValues(); // Get duplicate values from the table

            if (duplicates.length > 0) {
                // Check if there are any visible duplicates (i.e., not crossed out)
                const visibleDuplicates = duplicates.filter((value) => {
                    const matchingRows = Array.from(document.querySelectorAll("#dataTable tr:not(:first-child)"));
                    return matchingRows.some((row) => row.querySelector("td").textContent.trim() === value && !row.classList.contains("crossed-out"));
                });

                if (visibleDuplicates.length > 0) {
                    showDuplicateWarning(visibleDuplicates); // Show warning if visible duplicates exist
                    return; // Exit and wait for user input on the duplicate warning dialog
                }
            }

            proceedWithPrinting();
        }

function getDuplicateValues() {
    const rows = document.querySelectorAll("#dataTable tr:not(:first-child)");
    const values = [];
    const duplicates = [];

    rows.forEach((row) => {
        // Skip crossed-out rows from the duplicate check
        if (row.classList.contains("crossed-out")) {
            return;
        }

        const rowText = row.querySelector("td").textContent.trim();
        if (values.includes(rowText)) {
            duplicates.push(rowText);
        } else {
            values.push(rowText);
        }
    });

    return duplicates;
}


function displayDataInTable(data) {
    let table = document.getElementById("dataTable");
    if (!table) {
        table = document.createElement("table");
        table.setAttribute("id", "dataTable");
        table.classList.add("styled-table");
        document.getElementById("excelTableContainer").appendChild(table);
    }

    table.innerHTML = "";

    if (data.length === 0) {
        document.getElementById("excelTableContainer").style.display = "none";
        return;
    }

    const headerRow = document.createElement("tr");

    const headerCell = document.createElement("th");
    headerCell.setAttribute("colspan", "2"); // Spans across two columns
    headerCell.classList.add("table-header"); // Added class for styling

    // Main header title with value count on the right
    headerCell.innerHTML = `<span>Imported QR Values</span> <span class="values-loaded">Values Loaded: ${data.length}</span>`;
    headerRow.appendChild(headerCell);
    table.appendChild(headerRow);

    const valuesMap = {};

    data.forEach((row, index) => {
        const rowValue = row[0].trim();
        const tr = document.createElement("tr");
        const td = document.createElement("td");
        td.textContent = rowValue || "";
        td.style.position = "relative"; // To ensure icons are positioned correctly
        tr.appendChild(td);
        table.appendChild(tr);

        // Add click event to select the row
        tr.addEventListener('click', () => selectRow(index));

        const hideIcon = document.createElement("span");
        hideIcon.classList.add("hide-icon");

        const hideImage = document.createElement("img");
        hideImage.src = "./resources/hide.png";
        hideImage.alt = "Hide Icon";

        hideIcon.appendChild(hideImage);
        td.appendChild(hideIcon);

        hideIcon.onclick = function () {
            tr.classList.toggle("crossed-out");

            if (tr.classList.contains("crossed-out")) {
                hideImage.src = "./resources/show.png";
                hideImage.alt = "Show Icon";

                tr.classList.remove("duplicate-row");
                const existingExclamationIcon = tr.querySelector(".exclamation-icon");
                if (existingExclamationIcon) {
                    existingExclamationIcon.remove();
                }
            } else {
                hideImage.src = "./resources/hide.png";
                hideImage.alt = "Hide Icon";
            }

            checkForDuplicates();
        };

        // Check for duplicates
        if (rowValue && valuesMap[rowValue]) {
            valuesMap[rowValue].classList.add("duplicate-row");
            td.classList.add("duplicate-row");

            // Add the exclamation icon if it's not already there
            if (!valuesMap[rowValue].querySelector(".exclamation-icon")) {
                const exclamationIcon = document.createElement("span");
                exclamationIcon.classList.add("exclamation-icon");
                exclamationIcon.innerHTML = "&#10071;"; // Exclamation icon
                valuesMap[rowValue].querySelector("td").appendChild(exclamationIcon);
            }

            // Also add the exclamation icon to the current row (the one being processed)
            const exclamationIcon = document.createElement("span");
            exclamationIcon.classList.add("exclamation-icon");
            exclamationIcon.innerHTML = "&#10071;";
            td.appendChild(exclamationIcon);
        } else {
            valuesMap[rowValue] = tr;
        }
    });

    document.querySelector(".print-excel-button").style.display = "block";
    document.querySelector(".clear-excel-button").style.display = "block";
    document.querySelector(".checkbox-wrapper").style.display = "flex";

    selectRow(0);  // Automatically select the first row
}

        function triggerFileUpload() {
            const fileInput = document.getElementById("fileInput");
            fileInput.click();

            fileInput.onchange = function (event) {
                const file = event.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function (e) {
                        const data = new Uint8Array(e.target.result);
                        const workbook = XLSX.read(data, { type: "array" });

                        const sheetName = workbook.SheetNames[0];
                        const sheet = workbook.Sheets[sheetName];
                        const jsonData = XLSX.utils.sheet_to_json(sheet, { header: 1 });

                        displayDataInTable(jsonData);

                        document.querySelector(".upload-section").style.display = "none";
                        document.getElementById("excelTableContainer").style.display = "block";
                        document.querySelector(".clear-excel-button").style.display = "block";
                    };
                    reader.readAsArrayBuffer(file);
                }
            };
        }

        function clearExcelFile() {
            document.getElementById("excelTableContainer").innerHTML = "";
            document.getElementById("excelTableContainer").style.display = "none";
            document.querySelector(".upload-section").style.display = "block";
            document.querySelector(".clear-excel-button").style.display = "none";
            document.querySelector(".print-excel-button").style.display = "none";
            document.querySelector(".checkbox-wrapper").style.display = "none";

            const fileInput = document.getElementById("fileInput");
            fileInput.value = "";
        }

        document.addEventListener("keydown", handleKeyPress);

        let currentSelectedRowIndex = null;

        // Function to select a row
function selectRow(rowIndex) {
    const rows = document.querySelectorAll("#dataTable tr:not(:first-child)");

    // Deselect previous row
    rows.forEach(row => row.classList.remove("selected-row"));

    // Select the new row
    if (rows[rowIndex]) {
        rows[rowIndex].classList.add("selected-row");
        currentSelectedRowIndex = rowIndex;

        // Scroll into view if necessary
        rows[rowIndex].scrollIntoView({
            behavior: "smooth",
            block: "nearest"
        });
    }
}

function handleKeyPress(event) {
    const rows = document.querySelectorAll("#dataTable tr:not(:first-child)");

    // Check for Ctrl+P key combination to start the QR code printing process
    if (event.ctrlKey && event.key === "p") {
        event.preventDefault(); // Prevent the default print dialog
        printTable(); // Trigger the custom QR code printing process
        return;
    }

    if (event.key === "Escape") {
        clearExcelFile(); // Simulate clear button click
        return;
    }

    if (rows.length === 0 || currentSelectedRowIndex === null) return;

    switch (event.key) {
        case "ArrowUp":
            if (currentSelectedRowIndex > 0) {
                selectRow(currentSelectedRowIndex - 1);
            }
            break;
        case "ArrowDown":
            if (currentSelectedRowIndex < rows.length - 1) {
                selectRow(currentSelectedRowIndex + 1);
            }
            break;
        case "Enter":
            const currentRow = rows[currentSelectedRowIndex];
            toggleRowVisibility(currentRow);
            break;
    }
}

        // Function to toggle hide/reveal (used for Enter key)
function toggleRowVisibility(row) {
    const hideIcon = row.querySelector(".hide-icon img");
    row.classList.toggle("crossed-out");

    if (row.classList.contains("crossed-out")) {
        hideIcon.src = "./resources/show.png";
        hideIcon.alt = "Show Icon";

        row.classList.remove("duplicate-row");
        const exclamationIcon = row.querySelector(".exclamation-icon");
        if (exclamationIcon) {
            exclamationIcon.remove();
        }
    } else {
        hideIcon.src = "./resources/hide.png";
        hideIcon.alt = "Hide Icon";
    }

    // Check for duplicates after toggling
    checkForDuplicates();
}