// ==UserScript==
// @name         Hide Fields in Specific Table - Example
// @namespace    http://your-namespace/
// @version      1.0
// @description  Hide fields in a specific table based on checkbox selection and remember choices
// @author       Your Name
// @match        https://backend.pcgarage.ro/admin/products/edit?product=*
// @grant        GM_setValue
// @grant        GM_getValue
// ==/UserScript==

(function() {
    'use strict';

    // Select the content div where checkboxes will be placed
    const contentDiv = document.getElementById('overwhite');

    // Create a new div to contain all the checkboxes
    const whiteDiv = document.createElement('div');
    whiteDiv.setAttribute('id', 'white');

    // Apply specified CSS styles to the whiteDiv
    whiteDiv.style.margin = '1px';
    whiteDiv.style.borderRadius = '4px';
    whiteDiv.style.backgroundClip = '-moz-background-clip padding';
    whiteDiv.style.backgroundClip = '-webkit-background-clip padding-box';
    whiteDiv.style.backgroundClip = 'background-clip padding-box';
    whiteDiv.style.padding = '5px 5px 10px 5px';
    whiteDiv.style.fontSize = '11px';
    whiteDiv.style.fontFamily = 'verdana, arial, helvetica, sans-serif';
    whiteDiv.style.display = 'none'; // Initially hide the whiteDiv
    whiteDiv.style.flexWrap = 'wrap'; // Add flex-wrap property to allow wrapping

    // Group the rows into checkbox sections
    const checkboxesByRows = [];

    // Select all table rows containing input, textarea, and select fields
    const rows = document.querySelectorAll('tbody tr');

    rows.forEach(row => {
        const fields = row.querySelectorAll('input, textarea, select');
        const isAutoAddedRow = row.querySelector('.nodatath strong');
        if (fields.length === 0 && !isAutoAddedRow) return; // Skip rows without form fields and not the specified row

        let labelText = '';

        // Extract label text from form field rows
        if (fields.length > 0) {
            labelText = row.querySelector('td').textContent.trim();
        } else { // Extract "Adaugat:" label from the specific row structure
            const adaugatCell = row.querySelector('.nodatath');
            if (adaugatCell) {
                labelText = adaugatCell.textContent.trim();
            }
        }

        // Check the length of the label text before creating the checkbox
        if (labelText.length > 100) return; // Skip if the label text is longer than 100 characters

        // Create a checkbox element
        const checkbox = document.createElement('input');
        checkbox.setAttribute('type', 'checkbox');

        // Create a label for the checkbox
        const label = document.createElement('label');
        label.textContent = labelText;
        label.style.marginRight = '5px'; // Add some margin between label text and checkbox

        // Create a div to contain checkbox and label text with borders
        const checkboxLabelDiv = document.createElement('div');
        checkboxLabelDiv.appendChild(label);
        checkboxLabelDiv.appendChild(checkbox);
        checkboxLabelDiv.style.display = 'block';
        checkboxLabelDiv.style.border = '1px solid #ccc'; // Add border around checkbox and label
        checkboxLabelDiv.style.padding = '5px'; // Add padding for better visibility
        checkboxLabelDiv.style.borderRadius = '4px';
        checkboxLabelDiv.style.marginBottom = '5px'; // Add some space between rows

        // Append the checkbox div to the whiteDiv
        checkboxesByRows.push(checkboxLabelDiv);

        // Hide the entire row initially
        row.style.display = 'none';

        // Retrieve the stored checkbox state if available using GM_getValue
        const storedState = GM_getValue(`${labelText}_state`);
        if (storedState !== undefined) {
            checkbox.checked = storedState === 'true';
            row.style.display = checkbox.checked ? 'table-row' : 'none';
        }

        // Add event listener to toggle the visibility of the corresponding row
        checkbox.addEventListener('change', function() {
            const isChecked = this.checked;
            row.style.display = isChecked ? 'table-row' : 'none';
            // Store the checkbox state using GM_setValue
            GM_setValue(`${labelText}_state`, isChecked.toString());
        });

        // Function to toggle checkboxes when clicking inside their border
        function toggleCheckboxOnClick(checkbox) {
            label.addEventListener('click', function(event) {
                if (event.target !== checkbox) {
                    checkbox.checked = !checkbox.checked;
                    checkbox.dispatchEvent(new Event('change'));
                }
            });
        }

        // Toggle checkboxes when clicking inside their border
        toggleCheckboxOnClick(checkbox);
    });

    // Append each checkbox div to the whiteDiv
    checkboxesByRows.forEach(checkboxLabelDiv => {
        whiteDiv.appendChild(checkboxLabelDiv);
    });

    // Append the whiteDiv containing all checkboxes to the contentDiv
    contentDiv.appendChild(whiteDiv);

    // Create a checkbox to toggle the visibility of the whiteDiv
    const toggleCheckbox = document.createElement('input');
    toggleCheckbox.setAttribute('type', 'checkbox');
    toggleCheckbox.setAttribute('id', 'toggleWhiteDiv'); // Set an ID for the toggle checkbox

    const toggleLabel = document.createElement('label');
    toggleLabel.textContent = 'Arata/Ascunde filtrele'; // Label text for the toggle checkbox
    toggleLabel.setAttribute('for', 'toggleWhiteDiv');
    toggleLabel.style.border = '1px solid #ccc'; // Add border to the toggle label
    toggleLabel.style.padding = '5px'; // Add padding for better visibility
    toggleLabel.style.borderRadius = '4px'; // Add border radius

    // Append the toggle checkbox and label to the contentDiv
    contentDiv.insertBefore(toggleCheckbox, whiteDiv);
    contentDiv.insertBefore(toggleLabel, whiteDiv);

    // Function to toggle checkboxes when clicking inside the "Arata/Ascunde filtrele" border
    function toggleCheckboxOnClick(checkbox) {
        toggleLabel.addEventListener('click', function(event) {
            if (event.target !== checkbox) {
                checkbox.checked = !checkbox.checked;
                checkbox.dispatchEvent(new Event('change'));
            }
        });
    }

    // Toggle checkboxes when clicking inside the "Arata/Ascunde filtrele" border
    toggleCheckboxOnClick(toggleCheckbox);

    // Add event listener to the toggle checkbox
    toggleCheckbox.addEventListener('change', function() {
        // Update storage with the toggle checkbox state using GM_setValue
        GM_setValue('toggleCheckbox_state', this.checked.toString());

        // Toggle the display of the whiteDiv based on the checked state
        whiteDiv.style.display = this.checked ? 'flex' : 'none';
    });

})();