jQuery(document).ready(function ($) {
    // Function to update styles dynamically
    function updateStyles1() {

        const dataToSave = {
            'wtdp-latest-container-bg-gradient-start': $('#wtdp-latest-container-bg-gradient-start').val(),
            'wtdp-latest-container-bg-gradient-end': $('#wtdp-latest-container-bg-gradient-end').val(),
            'wtdp-latest-items-bg-gradient-start': $('#wtdp-latest-items-bg-gradient-start').val(),
            'wtdp-latest-items-bg-gradient-end': $('#wtdp-latest-items-bg-gradient-end').val(),
            'wtdp-latest-items-text-color': $('#wtdp-latest-items-text-color').val(),
            'wtdp-latest-timestamp-text-color': $('#wtdp-latest-timestamp-text-color').val(),
            'wtdp-latest-description-text-color': $('#wtdp-latest-description-text-color').val(),
            'wtdp-latest-location-text-color': $('#wtdp-latest-location-text-color').val(),
            'wtdp-latest-temperature-text-color': $('#wtdp-latest-temperature-text-color').val(),
            'wtdp-latest-timestamp-font-size': $('#wtdp-latest-timestamp-font-size').val(),
            'wtdp-latest-timestamp-font-size-unit': $('#wtdp-latest-timestamp-font-size-unit').val(), // Added unit
            'wtdp-latest-location-font-size': $('#wtdp-latest-location-font-size').val(),
            'wtdp-latest-location-font-size-unit': $('#wtdp-latest-location-font-size-unit').val(), // Added unit
            'wtdp-latest-temp-font-size': $('#wtdp-latest-temp-font-size').val(),
            'wtdp-latest-temp-font-size-unit': $('#wtdp-latest-temp-font-size-unit').val(), // Added unit
            'wtdp-latest-unit-font-size': $('#wtdp-latest-unit-font-size').val(),
            'wtdp-latest-unit-font-size-unit': $('#wtdp-latest-unit-font-size-unit').val(), // Added unit
            'wtdp-latest-description-font-size': $('#wtdp-latest-description-font-size').val(),
            'wtdp-latest-description-font-size-unit': $('#wtdp-latest-description-font-size-unit').val(), // Added unit
            'wtdp-latest-items-font-size': $('#wtdp-latest-items-font-size').val(),
            'wtdp-latest-items-font-size-unit': $('#wtdp-latest-items-font-size-unit').val(), // Added unit
            'wtdp-latest-icon-size': $('#wtdp-latest-icon-size').val(),
            'wtdp-latest-icon-size-unit': $('#wtdp-latest-icon-size-unit').val(), // Added unit
            'wtdp-latest-container-width': $('#wtdp-latest-container-width').val(),
            'wtdp-latest-container-width-unit': $('#wtdp-latest-container-width-unit').val(), // Added unit
            'wtdp-latest-container-padding': $('#wtdp-latest-container-padding').val(),
            'wtdp-latest-container-padding-unit': $('#wtdp-latest-container-padding-unit').val(), // Added unit
            'wtdp-latest-items-padding': $('#wtdp-latest-items-padding').val(),
            'wtdp-latest-items-padding-unit': $('#wtdp-latest-items-padding-unit').val(), // Added unit
            'wtdp-latest-show-icon': $('#wtdp-latest-show-icon').is(':checked') ? '1' : '0',
            'wtdp-latest-show-temperature': $('#wtdp-latest-show-temperature').is(':checked') ? '1' : '0',
            'wtdp-latest-show-description': $('#wtdp-latest-show-description').is(':checked') ? '1' : '0',
            'wtdp-latest-show-location': $('#wtdp-latest-show-location').is(':checked') ? '1' : '0',
            'wtdp-latest-show-timestamp': $('#wtdp-latest-show-timestamp').is(':checked') ? '1' : '0',
            'wtdp-latest-show-sunrise-sunset': $('#wtdp-latest-show-sunrise-sunset').is(':checked') ? '1' : '0',
            'wtdp-latest-show-humidity': $('#wtdp-latest-show-humidity').is(':checked') ? '1' : '0',
            'wtdp-latest-show-wind-speed': $('#wtdp-latest-show-wind-speed').is(':checked') ? '1' : '0',
            'wtdp-latest-show-pressure': $('#wtdp-latest-show-pressure').is(':checked') ? '1' : '0',
        };

        // Update the styles based on the input values
        $('.wtdp-latest-container').css({
            'background-image': 'radial-gradient(circle, ' + dataToSave['wtdp-latest-container-bg-gradient-start'] + ', ' + dataToSave['wtdp-latest-container-bg-gradient-end'] + ')',
            'width': dataToSave['wtdp-latest-container-width'] + dataToSave['wtdp-latest-container-width-unit'],
            'padding': dataToSave['wtdp-latest-container-padding'] + dataToSave['wtdp-latest-container-padding-unit'],
        });

        // Update the styles for the latest items based on the input values
        $('.wtdp-latest-items').css({
            'background-image': 'linear-gradient(to bottom right, ' + dataToSave['wtdp-latest-items-bg-gradient-start'] + ', ' + dataToSave['wtdp-latest-items-bg-gradient-end'] + ')',
            'color': dataToSave['wtdp-latest-items-text-color'],
            'font-size': dataToSave['wtdp-latest-items-font-size'] + dataToSave['wtdp-latest-items-font-size-unit'],
            'padding': dataToSave['wtdp-latest-items-padding'] + dataToSave['wtdp-latest-items-padding-unit'],
        });

        // Update the styles for the latest items based on the input values
        $('.wtdp-latest-items div').css({
            'color': dataToSave['wtdp-latest-items-text-color'],
            'font-size': dataToSave['wtdp-latest-items-font-size'] + dataToSave['wtdp-latest-items-font-size-unit'],
        });

        // Location
        if (dataToSave['wtdp-latest-show-location'] === '1') {
            $('.wtdp-latest-location').css({
                'font-size': dataToSave['wtdp-latest-location-font-size'] + dataToSave['wtdp-latest-location-font-size-unit'],
                'color': dataToSave['wtdp-latest-location-text-color'],
            }).show(); // Show location
        } else {
            $('.wtdp-latest-location').hide(); // Hide location
        }

        // Timestamp
        if (dataToSave['wtdp-latest-show-timestamp'] === '1') {
            $('.wtdp-latest-timestamp').css({
                'font-size': dataToSave['wtdp-latest-timestamp-font-size'] + dataToSave['wtdp-latest-timestamp-font-size-unit'],
                'color': dataToSave['wtdp-latest-timestamp-text-color'],
            }).show(); // Show timestamp
        } else {
            $('.wtdp-latest-timestamp').hide(); // Hide timestamp
        }

        // Temperature
        if (dataToSave['wtdp-latest-show-temperature'] === '1') {
            $('.wtdp-latest-temperature').css({
                'font-size': dataToSave['wtdp-latest-temp-font-size'] + dataToSave['wtdp-latest-temp-font-size-unit'],
                'color': dataToSave['wtdp-latest-temperature-text-color'],
            }).show(); // Show temperature

            $('.wtdp-latest-temp-unit').css({
                'font-size': dataToSave['wtdp-latest-unit-font-size'] + dataToSave['wtdp-latest-unit-font-size-unit'],
                'color': dataToSave['wtdp-latest-temperature-text-color'],
            }).show(); // Show unit
        } else {
            $('.wtdp-latest-temperature').hide(); // Hide temperature
            $('.wtdp-latest-temp-unit').hide(); // Hide unit
        }

        // Icon
        if (dataToSave['wtdp-latest-show-icon'] === '1') {
            $('.wtdp-latest-icon img').css({
                'width': dataToSave['wtdp-latest-icon-size'],
                'height': 'auto'
            }).show(); // Show icon
        } else {
            $('.wtdp-latest-icon img').hide(); // Hide icon
        }

        // Description
        if (dataToSave['wtdp-latest-show-description'] === '1') {
            $('.wtdp-latest-description').css({
                'font-size': dataToSave['wtdp-latest-description-font-size'],
                'color': dataToSave['wtdp-latest-description-text-color'],
            }).show();
        } else {
            $('.wtdp-latest-description').hide();
        }

        // Sunrise/Sunset
        if (dataToSave['wtdp-latest-show-sunrise-sunset'] === '1') {
            $('.wtdp-latest-sunrise-sunset').show();
            $('.wtdp-latest-sunrise-val').show();
            $('.wtdp-latest-sunset-val').show();
        } else {
            $('.wtdp-latest-sunrise-sunset').hide();
            $('.wtdp-latest-sunrise-val').hide();
            $('.wtdp-latest-sunset-val').hide();
        }

        // Humidity
        if (dataToSave['wtdp-latest-show-humidity'] === '1') {
            $('.wtdp-latest-humidity').show();
            $('.wtdp-latest-humidity-val').show();
        } else {
            $('.wtdp-latest-humidity').hide();
            $('.wtdp-latest-humidity-val').hide();
        }

        // Pressure
        if (dataToSave['wtdp-latest-show-pressure'] === '1') {
            $('.wtdp-latest-pressure').show();
            $('.wtdp-latest-pressure-val').show();
        } else {
            $('.wtdp-latest-pressure').hide();
            $('.wtdp-latest-pressure-val').hide();
        }

        // Wind Speed
        if (dataToSave['wtdp-latest-show-wind-speed'] === '1') {
            $('.wtdp-latest-wind-speed').show();
            $('.wtdp-latest-wind-speed-val').show();
        } else {
            $('.wtdp-latest-wind-speed').hide();
            $('.wtdp-latest-wind-speed-val').hide();
        }

        // Save data to local storage
        localStorage.setItem('wtdpLatestData', JSON.stringify(dataToSave));
    }

    // Call the updateStyles function on change of any input
    $('input, select').on('change', function () {
        updateStyles1();
    });

    // Initialize the color picker
    $('.latest-color-picker').wpColorPicker({
        change: function (event, ui) {
            updateStyles1();
        }

    });


    // Initial call to set the styles on page load
    updateStyles1();
});

















jQuery(document).ready(function ($) {
    // Function to update styles dynamically
    function updateStyles2() {

        // Gather values for the main settings
        const dataToSave = {
            'wtdp-latest-2-container-bg-gradient-start': $('#wtdp-latest-2-container-bg-gradient-start').val(),
            'wtdp-latest-2-container-bg-gradient-end': $('#wtdp-latest-2-container-bg-gradient-end').val(),
            'wtdp-latest-2-description-text-color': $('#wtdp-latest-2-description-text-color').val(),
            'wtdp-latest-2-items-text-color': $('#wtdp-latest-2-items-text-color').val(),
            'wtdp-latest-2-temp-text-color': $('#wtdp-latest-2-temp-text-color').val(),
            'wtdp-latest-2-temp-font-size': $('#wtdp-latest-2-temp-font-size').val(),
            'wtdp-latest-2-unit-font-size': $('#wtdp-latest-2-unit-font-size').val(),
            'wtdp-latest-2-container-width': $('#wtdp-latest-2-container-width').val(),
            'wtdp-latest-2-container-padding': $('#wtdp-latest-2-container-padding').val(),
            'wtdp-latest-2-show-icon': $('#wtdp-latest-2-show-icon').is(':checked') ? '1' : '0',
            'wtdp-latest-2-show-temperature': $('#wtdp-latest-2-show-temperature').is(':checked') ? '1' : '0',
            'wtdp-latest-2-show-description': $('#wtdp-latest-2-show-description').is(':checked') ? '1' : '0',
            'wtdp-latest-2-show-city': $('#wtdp-latest-2-show-city').is(':checked') ? '1' : '0',
            'wtdp-latest-2-show-sunrise-sunset': $('#wtdp-latest-2-show-sunrise-sunset').is(':checked') ? '1' : '0',
            'wtdp-latest-2-temp-font-size-unit': $('#wtdp-latest-2-temp-font-size-unit').val(),
            'wtdp-latest-2-unit-font-size-unit': $('#wtdp-latest-2-unit-font-size-unit').val(),
            'wtdp-latest-2-description-font-size': $('#wtdp-latest-2-description-font-size').val(),
            'wtdp-latest-2-description-font-size-unit': $('#wtdp-latest-2-description-font-size-unit').val(),
            'wtdp-latest-2-items-font-size': $('#wtdp-latest-2-items-font-size').val(),
            'wtdp-latest-2-items-font-size-unit': $('#wtdp-latest-2-items-font-size-unit').val(),
            'wtdp-latest-2-icon-size': $('#wtdp-latest-2-icon-size').val(),
            'wtdp-latest-2-icon-size-unit': $('#wtdp-latest-2-icon-size-unit').val(),
            'wtdp-latest-2-container-width-unit': $('#wtdp-latest-2-container-width-unit').val(),
            'wtdp-latest-2-container-padding-unit': $('#wtdp-latest-2-container-padding-unit').val(),
        };

        // Update the styles based on the input values
        $('.wtdp-latest-2-container').css({
            'background-image': 'radial-gradient(circle, ' + dataToSave['wtdp-latest-2-container-bg-gradient-start'] + ', ' + dataToSave['wtdp-latest-2-container-bg-gradient-end'] + ')',
            'width': dataToSave['wtdp-latest-2-container-width'] + dataToSave['wtdp-latest-2-container-width-unit'],
            'padding': dataToSave['wtdp-latest-2-container-padding'] + dataToSave['wtdp-latest-2-container-padding-unit'],
        });

        // Show/Hide Icon
        if (dataToSave['wtdp-latest-2-show-icon'] === '1') {
            $('.wtdp-latest-2-icon img').css({
                'width': dataToSave['wtdp-latest-2-icon-size'] + dataToSave['wtdp-latest-2-icon-size-unit'],
                'height': 'auto'
            }).show(); // Show icon
        } else {
            $('.wtdp-latest-2-icon img').hide(); // Hide icon
        }

        // Temperature
        if (dataToSave['wtdp-latest-2-show-temperature'] === '1') {
            $('.wtdp-latest-2-temperature').css({
                'font-size': dataToSave['wtdp-latest-2-temp-font-size'] + dataToSave['wtdp-latest-2-temp-font-size-unit'],
                'color': dataToSave['wtdp-latest-2-temp-text-color'],
            }).show(); // Show temperature

            $('.wtdp-latest-2-unit-temperature').css({
                'font-size': dataToSave['wtdp-latest-2-unit-font-size'] + dataToSave['wtdp-latest-2-unit-font-size-unit'],
                'color': dataToSave['wtdp-latest-2-temp-text-color'],
            }).show(); // Show unit
        } else {
            $('.wtdp-latest-2-temperature').hide(); // Hide temperature
            $('.wtdp-latest-2-unit-temperature').hide(); // Hide unit
        }

        // Description
        if (dataToSave['wtdp-latest-2-show-description'] === '1') {
            $('.wtdp-latest-2-description').css({
                'font-size': dataToSave['wtdp-latest-2-description-font-size'] + dataToSave['wtdp-latest-2-description-font-size-unit'],
                'color': dataToSave['wtdp-latest-2-description-text-color'],
            }).show(); // Show description
        } else {
            $('.wtdp-latest-2-description').hide(); // Hide description
        }

        // City
        if (dataToSave['wtdp-latest-2-show-city'] === '1') {
            $('.wtdp-latest-2-city').css({
                'font-size': dataToSave['wtdp-latest-2-items-font-size'] + dataToSave['wtdp-latest-2-items-font-size-unit'],
                'color': dataToSave['wtdp-latest-2-items-text-color'],
            }).show();
        } else {
            $('.wtdp-latest-2-city').hide();
        }

        // Sunrise/Sunset
        if (dataToSave['wtdp-latest-2-show-sunrise-sunset'] === '1') {
            $('.wtdp-latest-2-sunrise-sunset').css({
                'font-size': dataToSave['wtdp-latest-2-items-font-size'] + dataToSave['wtdp-latest-2-items-font-size-unit'],
                'color': dataToSave['wtdp-latest-2-items-text-color'],
            }).show();
        } else {
            $('.wtdp-latest-2-sunrise-sunset').hide();
        }
    }

    // Initialize the color picker
    $('.my-color-picker').wpColorPicker({
        change: function (event, ui) {
            updateStyles2();
        }
    });

    // Attach change event to relevant input fields
    $('#wtdp-latest-2-container-bg-gradient-start, #wtdp-latest-2-container-bg-gradient-end, #wtdp-latest-2-temp-text-color, #wtdp-latest-2-description-text-color, #wtdp-latest-2-items-text-color, #wtdp-latest-2-temp-font-size, #wtdp-latest-2-temp-font-size-unit, #wtdp-latest-2-unit-font-size, #wtdp-latest-2-unit-font-size-unit, #wtdp-latest-2-description-font-size, #wtdp-latest-2-items-font-size, #wtdp-latest-2-description-font-size-unit, #wtdp-latest-2-items-font-size-unit, #wtdp-latest-2-icon-size, #wtdp-latest-2-icon-size-unit, #wtdp-latest-2-container-width, #wtdp-latest-2-container-width-unit, #wtdp-latest-2-container-padding, #wtdp-latest-2-container-padding-unit, #wtdp-latest-2-show-icon, #wtdp-latest-2-show-temperature, #wtdp-latest-2-show-description, #wtdp-latest-2-show-city, #wtdp-latest-2-show-sunrise-sunset').on('input', updateStyles2);

    // Optionally, trigger update on page load for initial values
    updateStyles2();
});
