<?php
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly 


// Get the JSON options
$css_options = json_decode(get_option('wtdp_latest_css', '{}'), true);


// Set default values if options are not set
$default_css_values = [
    'wtdp-latest-container-bg-gradient-start' => '#1e73be',
    'wtdp-latest-container-bg-gradient-end' => '#0b328e',
    'wtdp-latest-items-bg-gradient-start' => '#ffffff',
    'wtdp-latest-items-bg-gradient-end' => '#f9f9f9',
    'wtdp-latest-items-text-color' => '#000000',
    'wtdp-latest-timestamp-text-color' => '#ffffff',
    'wtdp-latest-description-text-color' => '#ffffff',
    'wtdp-latest-location-text-color' => '#ffffff',
    'wtdp-latest-temperature-text-color' => '#ffffff',

    'wtdp-latest-timestamp-font-size' => '14px',
    'wtdp-latest-location-font-size' => '25px',
    'wtdp-latest-temp-font-size' => '40px',
    'wtdp-latest-unit-font-size' => '25px',
    'wtdp-latest-description-font-size' => '15px',
    'wtdp-latest-items-font-size' => '13px',
    'wtdp-latest-icon-size' => '100px',
    'wtdp-latest-container-width' => '400px',
    'wtdp-latest-container-padding' => '20px',
    'wtdp-latest-items-padding' => '20px',

    'wtdp-latest-show-location' => 1,
    'wtdp-latest-show-timestamp' => 1,
    'wtdp-latest-show-temperature' => 1,
    'wtdp-latest-show-icon' => 1,
    'wtdp-latest-show-description' => 1,
    'wtdp-latest-show-humidity' => 1,
    'wtdp-latest-show-wind-speed' => 1,
    'wtdp-latest-show-pressure' => 1,
    'wtdp-latest-show-sunrise-sunset' => 1,
];


// Use the CSS options or fall back to the default values
$wtdp_latest_container_bg_gradient_start = esc_attr($css_options['wtdp-latest-container-bg-gradient-start'] ?? $default_css_values['wtdp-latest-container-bg-gradient-start']);
$wtdp_latest_container_bg_gradient_end = esc_attr($css_options['wtdp-latest-container-bg-gradient-end'] ?? $default_css_values['wtdp-latest-container-bg-gradient-end']);
$wtdp_latest_item_bg_gradient_start = esc_attr($css_options['wtdp-latest-items-bg-gradient-start'] ?? $default_css_values['wtdp-latest-items-bg-gradient-start']);
$wtdp_latest_item_bg_gradient_end = esc_attr($css_options['wtdp-latest-items-bg-gradient-end'] ?? $default_css_values['wtdp-latest-items-bg-gradient-end']);
$wtdp_latest_item_text_color = esc_attr($css_options['wtdp-latest-items-text-color'] ?? $default_css_values['wtdp-latest-items-text-color']);
$wtdp_latest_timestamp_text_color = esc_attr($css_options['wtdp-latest-timestamp-text-color'] ?? $default_css_values['wtdp-latest-timestamp-text-color']);
$wtdp_latest_description_text_color = esc_attr($css_options['wtdp-latest-description-text-color'] ?? $default_css_values['wtdp-latest-description-text-color']);
$wtdp_latest_location_text_color = esc_attr($css_options['wtdp-latest-location-text-color'] ?? $default_css_values['wtdp-latest-location-text-color']);
$wtdp_latest_temperature_text_color = esc_attr($css_options['wtdp-latest-temperature-text-color'] ?? $default_css_values['wtdp-latest-temperature-text-color']);


// Extract size and unit options with defaults
$wtdp_latest_timestamp_font_size = esc_attr($css_options['wtdp-latest-timestamp-font-size'] ?? $default_css_values['wtdp-latest-timestamp-font-size']);
$wtdp_latest_timestamp_font_size_unit = esc_attr($css_options['wtdp-latest-timestamp-font-size-unit'] ?? 'px'); // Default unit

$wtdp_latest_location_font_size = esc_attr($css_options['wtdp-latest-location-font-size'] ?? $default_css_values['wtdp-latest-location-font-size']);
$wtdp_latest_location_font_size_unit = esc_attr($css_options['wtdp-latest-location-font-size-unit'] ?? 'px');

$wtdp_latest_temp_font_size = esc_attr($css_options['wtdp-latest-temp-font-size'] ?? $default_css_values['wtdp-latest-temp-font-size']);
$wtdp_latest_temp_font_size_unit = esc_attr($css_options['wtdp-latest-temp-font-size-unit'] ?? 'px');

$wtdp_latest_unit_font_size = esc_attr($css_options['wtdp-latest-unit-font-size'] ?? $default_css_values['wtdp-latest-unit-font-size']);
$wtdp_latest_unit_font_size_unit = esc_attr($css_options['wtdp-latest-unit-font-size-unit'] ?? 'px');

$wtdp_latest_description_font_size = esc_attr($css_options['wtdp-latest-description-font-size'] ?? $default_css_values['wtdp-latest-description-font-size']);
$wtdp_latest_description_font_size_unit = esc_attr($css_options['wtdp-latest-description-font-size-unit'] ?? 'px');

$wtdp_latest_item_font_size = esc_attr($css_options['wtdp-latest-items-font-size'] ?? $default_css_values['wtdp-latest-items-font-size']);
$wtdp_latest_item_font_size_unit = esc_attr($css_options['wtdp-latest-items-font-size-unit'] ?? 'px');

$wtdp_latest_icon_size = esc_attr($css_options['wtdp-latest-icon-size'] ?? $default_css_values['wtdp-latest-icon-size']);
$wtdp_latest_icon_size_unit = esc_attr($css_options['wtdp-latest-icon-size-unit'] ?? 'px');

$wtdp_latest_container_width = esc_attr($css_options['wtdp-latest-container-width'] ?? $default_css_values['wtdp-latest-container-width']);
$wtdp_latest_container_width_unit = esc_attr($css_options['wtdp-latest-container-width-unit'] ?? 'px');

$wtdp_latest_container_padding = esc_attr($css_options['wtdp-latest-container-padding'] ?? $default_css_values['wtdp-latest-container-padding']);
$wtdp_latest_container_padding_unit = esc_attr($css_options['wtdp-latest-container-padding-unit'] ?? 'px');

$wtdp_latest_item_padding = esc_attr($css_options['wtdp-latest-items-padding'] ?? $default_css_values['wtdp-latest-items-padding']);
$wtdp_latest_item_padding_unit = esc_attr($css_options['wtdp-latest-items-padding-unit'] ?? 'px');


$wtdp_latest_show_location = esc_attr(checked(1, ($css_options['wtdp-latest-show-location'] ?? $default_css_values['wtdp-latest-show-location']), false));
$wtdp_latest_show_timestamp = esc_attr(checked(1, ($css_options['wtdp-latest-show-timestamp'] ?? $default_css_values['wtdp-latest-show-timestamp']), false));
$wtdp_latest_show_temperature = esc_attr(checked(1, ($css_options['wtdp-latest-show-temperature'] ?? $default_css_values['wtdp-latest-show-temperature']), false));
$wtdp_latest_show_icon = esc_attr(checked(1, ($css_options['wtdp-latest-show-icon'] ?? $default_css_values['wtdp-latest-show-icon']), false));
$wtdp_latest_show_description = esc_attr(checked(1, ($css_options['wtdp-latest-show-description'] ?? $default_css_values['wtdp-latest-show-description']), false));
$wtdp_latest_show_humidity = esc_attr(checked(1, ($css_options['wtdp-latest-show-humidity'] ?? $default_css_values['wtdp-latest-show-humidity']), false));
$wtdp_latest_show_wind_speed = esc_attr(checked(1, ($css_options['wtdp-latest-show-wind-speed'] ?? $default_css_values['wtdp-latest-show-wind-speed']), false));
$wtdp_latest_show_pressure = esc_attr(checked(1, ($css_options['wtdp-latest-show-pressure'] ?? $default_css_values['wtdp-latest-show-pressure']), false));
$wtdp_latest_show_sunrise_sunset = esc_attr(checked(1, ($css_options['wtdp-latest-show-sunrise-sunset'] ?? $default_css_values['wtdp-latest-show-sunrise-sunset']), false));












echo '
<!-- ************************* WEATHER latest ************************* -->
<!-- Shortcode Settings Group -->
<div class="wtdp-settings-group" style="flex: 1; ">
    <h3>' . esc_html__('Preview', 'extended-weather') . '</h3>
    <div class="wtdp-settings-frame">';
         echo do_shortcode('[wtdp_display_latest]');
echo '
    </div>
</div>

<!-- Colors Settings Group -->
<div class="wtdp-settings-group-color" style="flex: 1; ">
    <h3>' . esc_html__('Colors Settings', 'extended-weather') . '</h3>
    <div class="wtdp-settings-frame">

        <!-- Container Background Gradient Start -->
        <div class="wtdp-form-group">
            <div class="wtdp-form-label-container">
                <label for="wtdp-latest-container-bg-gradient-start">' . esc_html__('Container Background Gradient Start:', 'extended-weather') . '</label>
                <input type="text" id="wtdp-latest-container-bg-gradient-start" class="latest-color-picker" name="wtdp-latest-container-bg-gradient-start" value="' . esc_attr($wtdp_latest_container_bg_gradient_start) . '" data-alpha-enabled="true">
            </div>
        </div>

        <!-- Container Background Gradient End -->
        <div class="wtdp-form-group">
            <div class="wtdp-form-label-container">
                <label for="wtdp-latest-container-bg-gradient-end">' . esc_html__('Container Background Gradient End:', 'extended-weather') . '</label>
                <input type="text" id="wtdp-latest-container-bg-gradient-end" class="latest-color-picker" name="wtdp-latest-container-bg-gradient-end" value="' . esc_attr($wtdp_latest_container_bg_gradient_end) . '" data-alpha-enabled="true">
            </div>
        </div>

        <!-- Item Background Gradient Start -->
        <div class="wtdp-form-group">
            <div class="wtdp-form-label-container">
                <label for="wtdp-latest-items-bg-gradient-start">' . esc_html__('Items Background Gradient Start:', 'extended-weather') . '</label>
                <input type="text" id="wtdp-latest-items-bg-gradient-start" class="latest-color-picker" name="wtdp-latest-items-bg-gradient-start" value="' . esc_attr($wtdp_latest_item_bg_gradient_start) . '" data-alpha-enabled="true">
            </div>
        </div>

        <!-- Item Background Gradient End -->
        <div class="wtdp-form-group">
            <div class="wtdp-form-label-container">
                <label for="wtdp-latest-items-bg-gradient-end">' . esc_html__('Items Background Gradient End:', 'extended-weather') . '</label>
                <input type="text" id="wtdp-latest-items-bg-gradient-end" class="latest-color-picker" name="wtdp-latest-items-bg-gradient-end" value="' . esc_attr($wtdp_latest_item_bg_gradient_end) . '" data-alpha-enabled="true">
            </div>
        </div>

        <!-- Item Text Color -->
        <div class="wtdp-form-group">
            <div class="wtdp-form-label-container">
                <label for="wtdp-latest-items-text-color">' . esc_html__('Items Text Color:', 'extended-weather') . '</label>
                <input type="text" id="wtdp-latest-items-text-color" class="latest-color-picker" name="wtdp-latest-items-text-color" value="' . esc_attr($wtdp_latest_item_text_color) . '" data-alpha-enabled="true">
            </div>
        </div>

        <!-- Timestamp Text Color -->
        <div class="wtdp-form-group">
            <div class="wtdp-form-label-container">
                <label for="wtdp-latest-timestamp-text-color">' . esc_html__('Timestamp Text Color:', 'extended-weather') . '</label>
                <input type="text" id="wtdp-latest-timestamp-text-color" class="latest-color-picker" name="wtdp-latest-timestamp-text-color" value="' . esc_attr($wtdp_latest_timestamp_text_color) . '" data-alpha-enabled="true">
            </div>
        </div>

        <!-- Description Text Color -->
        <div class="wtdp-form-group">
            <div class="wtdp-form-label-container">
                <label for="wtdp-latest-description-text-color">' . esc_html__('Description Text Color:', 'extended-weather') . '</label>
                <input type="text" id="wtdp-latest-description-text-color" class="latest-color-picker" name="wtdp-latest-description-text-color" value="' . esc_attr($wtdp_latest_description_text_color) . '" data-alpha-enabled="true">
            </div>
        </div>

        <!-- Location Text Color -->
        <div class="wtdp-form-group">
            <div class="wtdp-form-label-container">
                <label for="wtdp-latest-location-text-color">' . esc_html__('Location Text Color:', 'extended-weather') . '</label>
                <input type="text" id="wtdp-latest-location-text-color" class="latest-color-picker" name="wtdp-latest-location-text-color" value="' . esc_attr($wtdp_latest_location_text_color) . '" data-alpha-enabled="true">
            </div>
        </div>

        <!-- Temperature Text Color -->
        <div class="wtdp-form-group">
            <div class="wtdp-form-label-container">
                <label for="wtdp-latest-temperature-text-color">' . esc_html__('Temperature Text Color:', 'extended-weather') . '</label>
                <input type="text" id="wtdp-latest-temperature-text-color" class="latest-color-picker" name="wtdp-latest-temperature-text-color" value="' . esc_attr($wtdp_latest_temperature_text_color) . '" data-alpha-enabled="true">
            </div>
        </div>

    </div>
</div>















<!-- Size Settings Group -->
<div class="wtdp-settings-group-size" style="flex: 1;">
    <h3>' . esc_html__('Size Settings', 'extended-weather') . '</h3>
    <div class="wtdp-settings-frame">

        <!-- Location Font Size -->
        <div class="wtdp-form-group">
            <div class="wtdp-form-label-container">
                <label for="wtdp-latest-location-font-size">' . esc_html__('Location Font Size:', 'extended-weather') . '</label>
                <div style="display: flex; align-items: center;">
                    <input type="number" id="wtdp-latest-location-font-size" name="wtdp-latest-location-font-size" value="' . floatval(esc_attr($wtdp_latest_location_font_size)) . '" min="1" step="1">
                    <select name="wtdp-latest-location-font-size-unit" id="wtdp-latest-location-font-size-unit">
                        <option value="px" ' . selected(esc_attr($wtdp_latest_location_font_size_unit), 'px', false) . '>px</option>
                        <option value="%" ' . selected(esc_attr($wtdp_latest_location_font_size_unit), '%', false) . '>%</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- Timestamp Font Size -->
        <div class="wtdp-form-group">
            <div class="wtdp-form-label-container">
                <label for="wtdp-latest-timestamp-font-size">' . esc_html__('Timestamp Font Size:', 'extended-weather') . '</label>
                <div style="display: flex; align-items: center;">
                    <input type="number" id="wtdp-latest-timestamp-font-size" name="wtdp-latest-timestamp-font-size" value="' . floatval(esc_attr($wtdp_latest_timestamp_font_size)) . '" min="1" step="1">
                    <select name="wtdp-latest-timestamp-font-size-unit" id="wtdp-latest-timestamp-font-size-unit">
                        <option value="px" ' . selected(esc_attr($wtdp_latest_timestamp_font_size_unit), 'px', false) . '>px</option>
                        <option value="%" ' . selected(esc_attr($wtdp_latest_timestamp_font_size_unit), '%', false) . '>%</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- Temperature Font Size -->
        <div class="wtdp-form-group">
            <div class="wtdp-form-label-container">
                <label for="wtdp-latest-temp-font-size">' . esc_html__('Temperature Font Size:', 'extended-weather') . '</label>
                <div style="display: flex; align-items: center;">
                    <input type="number" id="wtdp-latest-temp-font-size" name="wtdp-latest-temp-font-size" value="' . floatval(esc_attr($wtdp_latest_temp_font_size)) . '" min="1" step="1">
                    <select name="wtdp-latest-temp-font-size-unit" id="wtdp-latest-temp-font-size-unit">
                        <option value="px" ' . selected(esc_attr($wtdp_latest_temp_font_size_unit), 'px', false) . '>px</option>
                        <option value="%" ' . selected(esc_attr($wtdp_latest_temp_font_size_unit), '%', false) . '>%</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- Unit Font Size -->
        <div class="wtdp-form-group">
            <div class="wtdp-form-label-container">
                <label for="wtdp-latest-unit-font-size">' . esc_html__('Unit Font Size:', 'extended-weather') . '</label>
                <div style="display: flex; align-items: center;">
                    <input type="number" id="wtdp-latest-unit-font-size" name="wtdp-latest-unit-font-size" value="' . floatval(esc_attr($wtdp_latest_unit_font_size)) . '" min="1" step="1">
                    <select name="wtdp-latest-unit-font-size-unit" id="wtdp-latest-unit-font-size-unit">
                        <option value="px" ' . selected(esc_attr($wtdp_latest_unit_font_size_unit), 'px', false) . '>px</option>
                        <option value="%" ' . selected(esc_attr($wtdp_latest_unit_font_size_unit), '%', false) . '>%</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- Description Font Size -->
        <div class="wtdp-form-group">
            <div class="wtdp-form-label-container">
                <label for="wtdp-latest-description-font-size">' . esc_html__('Description Font Size:', 'extended-weather') . '</label>
                <div style="display: flex; align-items: center;">
                    <input type="number" id="wtdp-latest-description-font-size" name="wtdp-latest-description-font-size" value="' . floatval(esc_attr($wtdp_latest_description_font_size)) . '" min="1" step="1">
                    <select name="wtdp-latest-description-font-size-unit" id="wtdp-latest-description-font-size-unit">
                        <option value="px" ' . selected(esc_attr($wtdp_latest_description_font_size_unit), 'px', false) . '>px</option>
                        <option value="%" ' . selected(esc_attr($wtdp_latest_description_font_size_unit), '%', false) . '>%</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- Item Font Size -->
        <div class="wtdp-form-group">
            <div class="wtdp-form-label-container">
                <label for="wtdp-latest-items-font-size">' . esc_html__('Items Font Size:', 'extended-weather') . '</label>
                <div style="display: flex; align-items: center;">
                    <input type="number" id="wtdp-latest-items-font-size" name="wtdp-latest-items-font-size" value="' . floatval(esc_attr($wtdp_latest_item_font_size)) . '" min="1" step="1">
                    <select name="wtdp-latest-items-font-size-unit" id="wtdp-latest-items-font-size-unit">
                        <option value="px" ' . selected(esc_attr($wtdp_latest_item_font_size_unit), 'px', false) . '>px</option>
                        <option value="%" ' . selected(esc_attr($wtdp_latest_item_font_size_unit), '%', false) . '>%</option>
                    </select>
                </div>
            </div>
        </div>
<hr>
        <!-- Icon Size -->
        <div class="wtdp-form-group">
            <div class="wtdp-form-label-container">
                <label for="wtdp-latest-icon-size">' . esc_html__('Icon Size:', 'extended-weather') . '</label>
                <div style="display: flex; align-items: center;">
                    <input type="number" id="wtdp-latest-icon-size" name="wtdp-latest-icon-size" value="' . floatval(esc_attr($wtdp_latest_icon_size)) . '" min="1" step="1">
                    <select name="wtdp-latest-icon-size-unit" id="wtdp-latest-icon-size-unit">
                        <option value="px" ' . selected(esc_attr($wtdp_latest_icon_size_unit), 'px', false) . '>px</option>
                        <option value="%" ' . selected(esc_attr($wtdp_latest_icon_size_unit), '%', false) . '>%</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- Container Width -->
        <div class="wtdp-form-group">
            <div class="wtdp-form-label-container">
                <label for="wtdp-latest-container-width">' . esc_html__('Container Width:', 'extended-weather') . '</label>
                <div style="display: flex; align-items: center;">
                    <input type="number" id="wtdp-latest-container-width" name="wtdp-latest-container-width" value="' . floatval(esc_attr($wtdp_latest_container_width)) . '" min="1" step="1">
                    <select name="wtdp-latest-container-width-unit" id="wtdp-latest-container-width-unit">
                        <option value="px" ' . selected(esc_attr($wtdp_latest_container_width_unit), 'px', false) . '>px</option>
                        <option value="%" ' . selected(esc_attr($wtdp_latest_container_width_unit), '%', false) . '>%</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- Container Padding -->
        <div class="wtdp-form-group">
            <div class="wtdp-form-label-container">
                <label for="wtdp-latest-container-padding">' . esc_html__('Container Padding:', 'extended-weather') . '</label>
                <div style="display: flex; align-items: center;">
                    <input type="number" id="wtdp-latest-container-padding" name="wtdp-latest-container-padding" value="' . floatval(esc_attr($wtdp_latest_container_padding)) . '" min="0" step="1">
                    <select name="wtdp-latest-container-padding-unit" id="wtdp-latest-container-padding-unit">
                        <option value="px" ' . selected(esc_attr($wtdp_latest_container_padding_unit), 'px', false) . '>px</option>
                        <option value="%" ' . selected(esc_attr($wtdp_latest_container_padding_unit), '%', false) . '>%</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- Items Padding -->
        <div class="wtdp-form-group">
            <div class="wtdp-form-label-container">
                <label for="wtdp-latest-items-padding">' . esc_html__('Items Padding:', 'extended-weather') . '</label>
                <div style="display: flex; align-items: center;">
                    <input type="number" id="wtdp-latest-items-padding" name="wtdp-latest-items-padding" value="' . floatval(esc_attr($wtdp_latest_item_padding)) . '" min="0" step="1">
                    <select name="wtdp-latest-items-padding-unit" id="wtdp-latest-items-padding-unit">
                        <option value="px" ' . selected(esc_attr($wtdp_latest_item_padding_unit), 'px', false) . '>px</option>
                        <option value="%" ' . selected(esc_attr($wtdp_latest_item_padding_unit), '%', false) . '>%</option>
                    </select>
                </div>
            </div>
        </div>




    </div>
</div>





















<!-- Show/Hide Settings Group -->
<div class="wtdp-settings-group-show" style="flex: 1; ">
    <h3>' . esc_html__('Show/Hide Settings', 'extended-weather') . '</h3>
    <div class="wtdp-settings-frame">

        <!-- Show Location -->
        <div class="wtdp-form-group">
            <div class="wtdp-form-label-container">
                <label for="wtdp-latest-show-location">' . esc_html__('Show Location:', 'extended-weather') . '</label>
                <input type="checkbox" id="wtdp-latest-show-location" name="wtdp-latest-show-location" value="1" ' . esc_attr($wtdp_latest_show_location) . '>
            </div>
        </div>

        <!-- Show Timestamp -->
        <div class="wtdp-form-group">
            <div class="wtdp-form-label-container">
                <label for="wtdp-latest-show-timestamp">' . esc_html__('Show Timestamp:', 'extended-weather') . '</label>
                <input type="checkbox" id="wtdp-latest-show-timestamp" name="wtdp-latest-show-timestamp" value="1" ' . esc_attr($wtdp_latest_show_timestamp) . '>
            </div>
        </div>

        <!-- Show Temperature -->
        <div class="wtdp-form-group">
            <div class="wtdp-form-label-container">
                <label for="wtdp-latest-show-temperature">' . esc_html__('Show Temperature:', 'extended-weather') . '</label>
                <input type="checkbox" id="wtdp-latest-show-temperature" name="wtdp-latest-show-temperature" value="1" ' . esc_attr($wtdp_latest_show_temperature) . '>
            </div>
        </div>

        <!-- Show Icon -->
        <div class="wtdp-form-group">
            <div class="wtdp-form-label-container">
                <label for="wtdp-latest-show-icon">' . esc_html__('Show Icon:', 'extended-weather') . '</label>
                <input type="checkbox" id="wtdp-latest-show-icon" name="wtdp-latest-show-icon" value="1" ' . esc_attr($wtdp_latest_show_icon) . '>
            </div>
        </div>

        <!-- Show Description -->
        <div class="wtdp-form-group">
            <div class="wtdp-form-label-container">
                <label for="wtdp-latest-show-description">' . esc_html__('Show Description:', 'extended-weather') . '</label>
                <input type="checkbox" id="wtdp-latest-show-description" name="wtdp-latest-show-description" value="1" ' . esc_attr($wtdp_latest_show_description) . '>
            </div>
        </div>

        <!-- Show Humidity -->
        <div class="wtdp-form-group">
            <div class="wtdp-form-label-container">
                <label for="wtdp-latest-show-humidity">' . esc_html__('Show Humidity:', 'extended-weather') . '</label>
                <input type="checkbox" id="wtdp-latest-show-humidity" name="wtdp-latest-show-humidity" value="1" ' . esc_attr($wtdp_latest_show_humidity) . '>
            </div>
        </div>

        <!-- Show Wind Speed -->
        <div class="wtdp-form-group">
            <div class="wtdp-form-label-container">
                <label for="wtdp-latest-show-wind-speed">' . esc_html__('Show Wind Speed:', 'extended-weather') . '</label>
                <input type="checkbox" id="wtdp-latest-show-wind-speed" name="wtdp-latest-show-wind-speed" value="1" ' . esc_attr($wtdp_latest_show_wind_speed) . '>
            </div>
        </div>

        <!-- Show Pressure -->
        <div class="wtdp-form-group">
            <div class="wtdp-form-label-container">
                <label for="wtdp-latest-show-pressure">' . esc_html__('Show Pressure:', 'extended-weather') . '</label>
                <input type="checkbox" id="wtdp-latest-show-pressure" name="wtdp-latest-show-pressure" value="1" ' . esc_attr($wtdp_latest_show_pressure) . '>
            </div>
        </div>

        <!-- Show Sunrise-Sunset -->
        <div class="wtdp-form-group">
            <div class="wtdp-form-label-container">
                <label for="wtdp-latest-show-sunrise-sunset">' . esc_html__('Show Sunrise-Sunset:', 'extended-weather') . '</label>
                <input type="checkbox" id="wtdp-latest-show-sunrise-sunset" name="wtdp-latest-show-sunrise-sunset" value="1" ' . esc_attr($wtdp_latest_show_sunrise_sunset) . '>
            </div>
        </div>
    </div>
</div>








<!-- ************************* END WEATHER latest ************************* -->
';



function wtdp_get_unit($value_with_unit) {
    if (preg_match('/[\d.]+(px|%)/', $value_with_unit, $matches)) {
        $unit = $matches[1]; // Extract the unit
        return [
            'message' => "The extracted unit is: $unit",
            'unit' => $unit
        ]; // Return both message and unit
    }
    return [
        'message' => "No specific unit found. Defaulting to 'px'.",
        'unit' => 'px' // Default to 'px'
    ];
}
  