document.addEventListener("DOMContentLoaded", function () {
    loadSettings();
});
let lastThreeRecordslength = 2;
function toggleOptionsBox() {
    var optionsBox = document.getElementById("options-box");
    optionsBox.style.display = optionsBox.style.display === "block" ? "none" : "block";
}

function closeOptionsBox() {
    document.getElementById("options-box").style.display = "none";
}

function changeBackgroundColor() {
    var color = document.getElementById("background-color").value;
    document.body.style.background = color;
}

function changeFontSize() {
    var fontSize = document.getElementById("font-size").value;
    document.body.style.fontSize = fontSize + "px";
}
function changeLastRecords() {
    const last = document.getElementById("last-record-setting").value;
    lastThreeRecordslength = last;
    console.log('last recored setted to' , lastThreeRecordslength);
    
}

function toggleTableVisibility() {
    var tableList = document.getElementById("lastThree");
    var checkbox = document.getElementById("toggleCheckbox");

    if (checkbox.checked) {
        tableList.classList.add("visible-table");
        // tableList.classList.add("hide");
    } else {
        tableList.classList.remove("visible-table");
        // tableList.classList.add("hide");
    }
    console.log("toggleTableVisibility toggeled "  );
    
}

function toggleWaitingVisibility() {
    var tableList = document.getElementById("topButtonsContainer");
    var checkbox = document.getElementById("toggleWaitingCheckbox");

    if (checkbox.checked) {
        tableList.classList.add("visible-table");
        // tableList.classList.add("hide");
    } else {
        tableList.classList.remove("visible-table");
        // tableList.classList.add("hide");
    }
}

function toggleFixesVisibility() {
    var tableList = document.getElementById("top2ButtonsContainer");
    var checkbox = document.getElementById("toggleFixesCheckbox");

    if (checkbox.checked) {
        tableList.classList.add("visible-table");
        // tableList.classList.add("hide");
    } else {
        tableList.classList.remove("visible-table");
        // tableList.classList.add("hide");
    }
}
 
function toggleNotificationUP() {
    var toast = document.getElementById("toast");
    var checkbox = document.getElementById("toggleNotificationCheckbox");

    if (checkbox.checked) {
        toast.classList.add("toast-up");
         
    } else {
        toast.classList.remove("toast-up");
         
    }
}

function toggleNotificationPolite() {
    var checkbox = document.getElementById("togglePoliteCheckbox");

    if (checkbox.checked) {
        polite = true
    } else {
        polite = false 
    }
}

function toggleBlinking() {
    var checkbox = document.getElementById("enableBlinkingCheckbox");

    if (checkbox.checked) {
        enableBlinking = true
    } else {
        enableBlinking = false 
    }
    console.log('enableBlinking is toggled ', enableBlinking);
}

 

function saveSettings() {
    var backgroundColor = document.getElementById("background-color").value;
    // var fontSize = document.getElementById("font-size").value;
    var toggleCheckbox = document.getElementById("toggleCheckbox").checked;
    var toggleWaitingCheckbox = document.getElementById("toggleWaitingCheckbox").checked;
    var toggleFixesCheckbox = document.getElementById("toggleFixesCheckbox").checked;
    var notificationUP = document.getElementById("toggleNotificationCheckbox").checked;
    var lastRecord = document.getElementById("last-record-setting").value;
    var polite = document.getElementById("togglePoliteCheckbox").checked;
    var enableBlinking = document.getElementById("enableBlinkingCheckbox").checked;

    var settings = {
        backgroundColor: backgroundColor,
        // fontSize: fontSize,
        lastRecord: lastRecord,
        toggleCheckbox: toggleCheckbox,
        toggleWaitingCheckbox: toggleWaitingCheckbox,
        toggleFixesCheckbox: toggleFixesCheckbox,
        notificationUP: notificationUP,
        polite: polite,
        enableBlinking: enableBlinking
    };
    console.log('settings is object as ', settings);

    localStorage.setItem("webpageSettings", JSON.stringify(settings));
}

function clearSettings() {
    var settings = {};
    localStorage.setItem("webpageSettings", JSON.stringify(settings));
    window.location.reload();
}

function loadSettings() {
    var settings = JSON.parse(localStorage.getItem("webpageSettings"));
    console.log('settings is ', settings);

    if (settings) {
        if (settings.backgroundColor !== '#000000') {
            document.body.style.background = settings.backgroundColor;
        }
        if (settings.fontSize) {
            document.body.style.fontSize = settings.fontSize + "px";
            document.getElementById("font-size").value = settings.fontSize;
        }

        // if (settings.hasOwnProperty("backgroundColor")) {
        //     document.getElementById("background-color").value = settings.backgroundColor;
             
        // }
         
        

        if (settings.lastRecord) {
            lastThreeRecordslength = settings.lastRecord;
            document.getElementById("last-record-setting").value = settings.lastRecord;
        }

        // Check if toggleCheckbox setting exists and set its state accordingly
        if (settings.hasOwnProperty("toggleCheckbox")) {
            document.getElementById("toggleCheckbox").checked = settings.toggleCheckbox;
            toggleTableVisibility(); // Call the function to apply visibility based on checkbox state
        }
        if (settings.hasOwnProperty("toggleWaitingCheckbox")) {
            document.getElementById("toggleWaitingCheckbox").checked = settings.toggleWaitingCheckbox;
            toggleWaitingVisibility(); // Call the function to apply visibility based on checkbox state
        }
        if (settings.hasOwnProperty("toggleFixesCheckbox")) {
            document.getElementById("toggleFixesCheckbox").checked = settings.toggleFixesCheckbox;
            toggleFixesVisibility(); // Call the function to apply visibility based on checkbox state
        }
        if (settings.hasOwnProperty("notificationUP")) {
            document.getElementById("toggleNotificationCheckbox").checked = settings.notificationUP;
            toggleNotificationUP(); // Call the function to apply visibility based on checkbox state
        }
        if (settings.hasOwnProperty("polite")) {
            document.getElementById("togglePoliteCheckbox").checked = settings.polite;
            toggleNotificationPolite(); // Call the function to apply visibility based on checkbox state
        }
        if (settings.hasOwnProperty("enableBlinking")) {
            document.getElementById("enableBlinkingCheckbox").checked = settings.enableBlinking;
            toggleBlinking(); // Call the function to apply visibility based on checkbox state
            console.log('blinknig is ' , settings.enableBlinking);
            
        }
    }
}



// add buttons script

function addButton() {
    var buttonName = document.getElementById("newButtonInput").value;
    var optionalButtons = JSON.parse(localStorage.getItem("optionalButtons")) || [];
    optionalButtons.push(buttonName);
    localStorage.setItem("optionalButtons", JSON.stringify(optionalButtons));
    displayButtons();
    /* console.log(optionalButtons) */
}

function displayButtons() {
    var optionalButtons = JSON.parse(localStorage.getItem("optionalButtons")) || [];
    var settingButtonsContainer = document.getElementById("settingButtonsContainer");
    var topButtonsContainer = document.getElementById("topButtonsContainer");
    // var buttonValuesTextarea = document.getElementById("buttonValues");
    settingButtonsContainer.innerHTML = ""; // Clear previous content
    topButtonsContainer.innerHTML = ""; // Clear previous content
    // buttonValuesTextarea.value = ""; // Clear previous button values

    optionalButtons.forEach(function (buttonName) {
        var button = document.createElement("button"); // Create button element
        button.textContent = buttonName; // Set button text content
        button.className = 'additionalInfo';  //style button
        var topButton = document.createElement("button"); // Create button element
        topButton.textContent = buttonName; // Set button text content
        topButton.className = 'additionalInfo'; // style

        // Create delete button
        var deleteButton = document.createElement("button");
        var spaceBetween = document.createElement("br");
        deleteButton.textContent = "X"; // Set delete button text content
        deleteButton.addEventListener("click", function () {
            // Remove button from DOM
            settingButtonsContainer.removeChild(button);
            topButtonsContainer.removeChild(topButton);
            settingButtonsContainer.removeChild(deleteButton);
            // Remove button from local storage
            optionalButtons.splice(optionalButtons.indexOf(buttonName), 1);
            localStorage.setItem("optionalButtons", JSON.stringify(optionalButtons));
            // Update button values in textarea
            // buttonValuesTextarea.value = optionalButtons.join("\n");
        });

        // Add click event to display button value in textarea
        topButton.addEventListener("click", function () {
            // add 5th col on excel as waiting spare parts;
            console.log('Waiting for : ', buttonName);
            document.getElementById("titleInput").value += '	' + buttonName;

        });

        // Append both buttons to container
        settingButtonsContainer.appendChild(button);
        settingButtonsContainer.appendChild(deleteButton);
        settingButtonsContainer.appendChild(spaceBetween);


        topButtonsContainer.appendChild(topButton);
    });

    // Display button values in textarea initially
    // buttonValuesTextarea.value = optionalButtons.join("\n");
}




window.onload = function () {
    displayButtons();
    display2Buttons();
};

// add 2222222222222222222222222222 buttons  script

function add2Button() {
    var buttonName = document.getElementById("new2ButtonInput").value;
    var buttonNote = document.getElementById("new2ButtonNote").value; // Get button note

    var optionalButtons = JSON.parse(localStorage.getItem("optional2Buttons")) || [];
    optionalButtons.push({ name: buttonName, note: buttonNote }); // Store as an object
    localStorage.setItem("optional2Buttons", JSON.stringify(optionalButtons));
    display2Buttons();
    // console.log(optionalButtons) 
}

function display2Buttons() {
    var optionalButtons = JSON.parse(localStorage.getItem("optional2Buttons")) || [];
    var settingButtonsContainer = document.getElementById("setting2ButtonsContainer");
    var topButtonsContainer = document.getElementById("top2ButtonsContainer");
    // var buttonValuesTextarea = document.getElementById("buttonValues");
    settingButtonsContainer.innerHTML = ""; // Clear previous content
    topButtonsContainer.innerHTML = ""; // Clear previous content
    // buttonValuesTextarea.value = ""; // Clear previous button values

    optionalButtons.forEach(function (button) {
        console.log(button);
        var buttonElement = document.createElement("button"); // Create button element
        buttonElement.textContent = button.name; // Set button text content
        //   button.textContent = buttonName; // Set button text content
        buttonElement.className = 'additional2buttons';  //style button
        var topButton = document.createElement("button"); // Create button element
        topButton.textContent = button.name; // Set button text content
        topButton.className = 'additional2buttons'; // style

        // Create delete button
        var deleteButton = document.createElement("button");
        var spaceBetween = document.createElement("br");
        deleteButton.textContent = "X"; // Set delete button text content
        deleteButton.addEventListener("click", function () {
            // Remove button from DOM
            settingButtonsContainer.removeChild(buttonElement);
            topButtonsContainer.removeChild(topButton);
            settingButtonsContainer.removeChild(deleteButton);
            // Remove button from local storage
            optionalButtons.splice(optionalButtons.indexOf(button), 1);
            localStorage.setItem("optional2Buttons", JSON.stringify(optionalButtons));
            // Update button values in textarea
            // buttonValuesTextarea.value = optionalButtons.join("\n");
        });

        // Add click event to display button value in textarea
        topButton.addEventListener("click", function () {
            // buttonValuesTextarea.value = buttonName;

            console.log(` Problem = ${button.name}   ,,  Fix = ${button.note}`);
            tempDetails.push([button.note, button.name]);
            checkDetails()


        });

        // Append both buttons to container
        settingButtonsContainer.appendChild(buttonElement);
        settingButtonsContainer.appendChild(deleteButton);
        settingButtonsContainer.appendChild(spaceBetween);


        topButtonsContainer.appendChild(topButton);
    });

    // Display button values in textarea initially
    // buttonValuesTextarea.value = optionalButtons.join("\n");
}


