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


// Retrieve the JSON string from `wtdp_latest_2_css`
$json_data = get_option('wtdp_latest_2_css');

// Decode JSON data into an associative array
$css_options = json_decode($json_data, true);

// Set variables based on decoded JSON or defaults
// Default values and units
$container_bg_gradient_start = esc_attr(isset($css_options['wtdp-latest-2-container-bg-gradient-start']) ? $css_options['wtdp-latest-2-container-bg-gradient-start'] : '#ffffff');
$container_bg_gradient_end = esc_attr(isset($css_options['wtdp-latest-2-container-bg-gradient-end']) ? $css_options['wtdp-latest-2-container-bg-gradient-end'] : '#ededed');
$description_text_color = esc_attr(isset($css_options['wtdp-latest-2-description-text-color']) ? $css_options['wtdp-latest-2-description-text-color'] : '#000000');
$items_text_color = esc_attr(isset($css_options['wtdp-latest-2-items-text-color']) ? $css_options['wtdp-latest-2-items-text-color'] : '#000000');
$temp_text_color = esc_attr(isset($css_options['wtdp-latest-2-temp-text-color']) ? $css_options['wtdp-latest-2-temp-text-color'] : '#274a7f');

// Font sizes and icon size with default units
$temp_font_size = esc_attr(isset($css_options['wtdp-latest-2-temp-font-size']) ? $css_options['wtdp-latest-2-temp-font-size'] : '23');
$temp_font_size_unit = esc_attr(isset($css_options['wtdp-latest-2-temp-font-size-unit']) ? $css_options['wtdp-latest-2-temp-font-size-unit'] : 'px');

$unit_font_size = esc_attr(isset($css_options['wtdp-latest-2-unit-font-size']) ? $css_options['wtdp-latest-2-unit-font-size'] : '15');
$unit_font_size_unit = esc_attr(isset($css_options['wtdp-latest-2-unit-font-size-unit']) ? $css_options['wtdp-latest-2-unit-font-size-unit'] : 'px');

$description_font_size = esc_attr(isset($css_options['wtdp-latest-2-description-font-size']) ? $css_options['wtdp-latest-2-description-font-size'] : '10');
$description_font_size_unit = esc_attr(isset($css_options['wtdp-latest-2-description-font-size-unit']) ? $css_options['wtdp-latest-2-description-font-size-unit'] : 'px');

$items_font_size = esc_attr(isset($css_options['wtdp-latest-2-items-font-size']) ? $css_options['wtdp-latest-2-items-font-size'] : '10');
$items_font_size_unit = esc_attr(isset($css_options['wtdp-latest-2-items-font-size-unit']) ? $css_options['wtdp-latest-2-items-font-size-unit'] : 'px');

$icon_size = esc_attr(isset($css_options['wtdp-latest-2-icon-size']) ? $css_options['wtdp-latest-2-icon-size'] : '40');
$icon_size_unit = esc_attr(isset($css_options['wtdp-latest-2-icon-size-unit']) ? $css_options['wtdp-latest-2-icon-size-unit'] : 'px');

$container_width = esc_attr(isset($css_options['wtdp-latest-2-container-width']) ? $css_options['wtdp-latest-2-container-width'] : '230');
$container_width_unit = esc_attr(isset($css_options['wtdp-latest-2-container-width-unit']) ? $css_options['wtdp-latest-2-container-width-unit'] : 'px');

$container_padding = esc_attr(isset($css_options['wtdp-latest-2-container-padding']) ? $css_options['wtdp-latest-2-container-padding'] : '3');
$container_padding_unit = esc_attr(isset($css_options['wtdp-latest-2-container-padding-unit']) ? $css_options['wtdp-latest-2-container-padding-unit'] : 'px');

// Handle checkbox options with default to true
$show_icon = isset($css_options['wtdp-latest-2-show-icon']) ? checked(1, $css_options['wtdp-latest-2-show-icon'], false) : 'checked';
$show_temperature = isset($css_options['wtdp-latest-2-show-temperature']) ? checked(1, $css_options['wtdp-latest-2-show-temperature'], false) : 'checked';
$show_description = isset($css_options['wtdp-latest-2-show-description']) ? checked(1, $css_options['wtdp-latest-2-show-description'], false) : 'checked';
$show_city = isset($css_options['wtdp-latest-2-show-city']) ? checked(1, $css_options['wtdp-latest-2-show-city'], false) : 'checked';
$show_sunrise_sunset = isset($css_options['wtdp-latest-2-show-sunrise-sunset']) ? checked(1, $css_options['wtdp-latest-2-show-sunrise-sunset'], false) : 'checked';


// Output the settings form
echo '
<!-- ************************* WEATHER latest 2 ************************* -->
<!-- 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_2]');
echo '
    </div>
</div>

<!-- Colors Settings Group -->
<div class="wtdp-settings-group-color" style="flex: 1; min-width: 300px;">
    <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-2-container-bg-gradient-start">' . esc_html__('Background Gradient Start:', 'extended-weather') . '</label>
                <input type="text" id="wtdp-latest-2-container-bg-gradient-start" class="my-color-picker" name="wtdp-latest-2-container-bg-gradient-start" value="' . esc_attr($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-2-container-bg-gradient-end">' . esc_html__('Background Gradient End:', 'extended-weather') . '</label>
                <input type="text" id="wtdp-latest-2-container-bg-gradient-end" class="my-color-picker" name="wtdp-latest-2-container-bg-gradient-end" value="' . esc_attr($container_bg_gradient_end) . '" data-alpha-enabled="true">
            </div>
        </div>
        
        <!-- Temperature Text Color -->
        <div class="wtdp-form-group">
            <div class="wtdp-form-label-container">
                <label for="wtdp-latest-2-temp-text-color">' . esc_html__('Temperature Color:', 'extended-weather') . '</label>
                <input type="text" id="wtdp-latest-2-temp-text-color" class="my-color-picker" name="wtdp-latest-2-temp-text-color" value="' . esc_attr($temp_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-2-description-text-color">' . esc_html__('Description Color:', 'extended-weather') . '</label>
                <input type="text" id="wtdp-latest-2-description-text-color" class="my-color-picker" name="wtdp-latest-2-description-text-color" value="' . esc_attr($description_text_color) . '" data-alpha-enabled="true">
            </div>
        </div>
        <!-- Items Text Color -->
        <div class="wtdp-form-group">
            <div class="wtdp-form-label-container">
                <label for="wtdp-latest-2-items-text-color">' . esc_html__('Items Color:', 'extended-weather') . '</label>
                <input type="text" id="wtdp-latest-2-items-text-color" class="my-color-picker" name="wtdp-latest-2-items-text-color" value="' . esc_attr($items_text_color) . '" data-alpha-enabled="true">
            </div>
        </div>

    </div>                
</div>




<!-- Size Settings Group -->
<div class="wtdp-settings-group-size">
    <h3>' . esc_html__('Size Settings', 'extended-weather') . '</h3>
    <div class="wtdp-settings-frame">
        <div class="wtdp-settings-frame">
            <!-- Font Size for Temperature -->
            <div class="wtdp-form-group">
                <div class="wtdp-form-label-container">
                    <label for="wtdp-latest-2-temp-font-size">' . esc_html__('Temperature Font Size:', 'extended-weather') . '</label>
                    <div style="display: flex; align-items: center;">
                        <input type="number" id="wtdp-latest-2-temp-font-size" name="wtdp-latest-2-temp-font-size" value="' . floatval(esc_attr($temp_font_size)) . '" min="0" style="width: 60px;">
                        <select name="wtdp-latest-2-temp-font-size-unit" id="wtdp-latest-2-temp-font-size-unit">
                            <option value="px" ' . selected(esc_attr($temp_font_size_unit), 'px', false) . '>px</option>
                            <option value="%" ' . selected(esc_attr($temp_font_size_unit), '%', false) . '>%</option>
                        </select>
                    </div>
                </div>
            </div>
            <!-- Font Size Unit -->
            <div class="wtdp-form-group">
                <div class="wtdp-form-label-container">
                    <label for="wtdp-latest-2-unit-font-size">' . esc_html__('Unit Font Size:', 'extended-weather') . '</label>
                    <div style="display: flex; align-items: center;">
                        <input type="number" id="wtdp-latest-2-unit-font-size" name="wtdp-latest-2-unit-font-size" value="' . floatval(esc_attr($unit_font_size)) . '" min="0" style="width: 60px;">
                        <select name="wtdp-latest-2-unit-font-size-unit" id="wtdp-latest-2-unit-font-size-unit">
                            <option value="px" ' . selected(esc_attr($unit_font_size_unit), 'px', false) . '>px</option>
                            <option value="%" ' . selected(esc_attr($unit_font_size_unit), '%', false) . '>%</option>
                        </select>
                    </div>
                </div>
            </div>
            <!-- Font Size for Description -->
            <div class="wtdp-form-group">
                <div class="wtdp-form-label-container">
                    <label for="wtdp-latest-2-description-font-size">' . esc_html__('Description Font Size:', 'extended-weather') . '</label>
                    <div style="display: flex; align-items: center;">
                        <input type="number" id="wtdp-latest-2-description-font-size" name="wtdp-latest-2-description-font-size" value="' . floatval(esc_attr($description_font_size)) . '" min="0" style="width: 60px;">
                        <select name="wtdp-latest-2-description-font-size-unit" id="wtdp-latest-2-description-font-size-unit">
                            <option value="px" ' . selected(esc_attr($description_font_size_unit), 'px', false) . '>px</option>
                            <option value="%" ' . selected(esc_attr($description_font_size_unit), '%', false) . '>%</option>
                        </select>
                    </div>
                </div>
            </div>
            <!-- Font Size for Items -->
            <div class="wtdp-form-group">
                <div class="wtdp-form-label-container">
                    <label for="wtdp-latest-2-description-font-size">' . esc_html__('Items Font Size:', 'extended-weather') . '</label>
                    <div style="display: flex; align-items: center;">
                        <input type="number" id="wtdp-latest-2-items-font-size" name="wtdp-latest-2-items-font-size" value="' . floatval(esc_attr($items_font_size)) . '" min="0" style="width: 60px;">
                        <select name="wtdp-latest-2-items-font-size-unit" id="wtdp-latest-2-items-font-size-unit">
                            <option value="px" ' . selected(esc_attr($items_font_size_unit), 'px', false) . '>px</option>
                            <option value="%" ' . selected(esc_attr($items_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-2-icon-size">' . esc_html__('Icon Size:', 'extended-weather') . '</label>
                    <div style="display: flex; align-items: center;">
                        <input type="number" id="wtdp-latest-2-icon-size" name="wtdp-latest-2-icon-size" value="' . floatval(esc_attr($icon_size)) . '" min="0" style="width: 60px;">
                        <select name="wtdp-latest-2-icon-size-unit" id="wtdp-latest-2-icon-size-unit">
                            <option value="px" ' . selected(esc_attr($icon_size_unit), 'px', false) . '>px</option>
                            <option value="%" ' . selected(esc_attr($icon_size_unit), '%', false) . '>%</option>
                        </select>
                    </div>
                </div>
            </div>
            <!-- Width -->
            <div class="wtdp-form-group">
                <div class="wtdp-form-label-container">
                    <label for="wtdp-latest-2-container-width">' . esc_html__('Width:', 'extended-weather') . '</label>
                    <div style="display: flex; align-items: center;">
                        <input type="number" id="wtdp-latest-2-container-width" name="wtdp-latest-2-container-width" value="' . floatval(esc_attr($container_width)) . '" min="0" style="width: 60px;">
                        <select name="wtdp-latest-2-container-width-unit" id="wtdp-latest-2-container-width-unit">
                            <option value="px" ' . selected(esc_attr($container_width_unit), 'px', false) . '>px</option>
                            <option value="%" ' . selected(esc_attr($container_width_unit), '%', false) . '>%</option>
                        </select>
                    </div>
                </div>
            </div>
            <!-- Padding -->
            <div class="wtdp-form-group">
                <div class="wtdp-form-label-container">
                    <label for="wtdp-latest-2-container-padding">' . esc_html__('Padding:', 'extended-weather') . '</label>
                    <div style="display: flex; align-items: center;">
                        <input type="number" id="wtdp-latest-2-container-padding" name="wtdp-latest-2-container-padding" value="' . floatval(esc_attr($container_padding)) . '" min="0" style="width: 60px;">
                        <select name="wtdp-latest-2-container-padding-unit" id="wtdp-latest-2-container-padding-unit">
                            <option value="px" ' . selected(esc_attr($container_padding_unit), 'px', false) . '>px</option>
                            <option value="%" ' . selected(esc_attr($container_padding_unit), '%', false) . '>%</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End of Settings -->





<!-- Show Group -->
<div class="wtdp-settings-group-show">
    <h3>' . esc_html__('Show Elements', 'extended-weather') . '</h3>
    <div class="wtdp-settings-frame">
        <!-- Show Icon -->
        <div class="wtdp-form-group">
            <input type="checkbox" id="wtdp-latest-2-show-icon" name="wtdp-latest-2-show-icon" value="1" ' . esc_attr($show_icon) . '>
            <label for="wtdp-latest-2-show-icon">' . esc_html__('Show Icon', 'extended-weather') . '</label>
        </div>
        <!-- Show Temperature -->
        <div class="wtdp-form-group">
            <input type="checkbox" id="wtdp-latest-2-show-temperature" name="wtdp-latest-2-show-temperature" value="1" ' . esc_attr($show_temperature) . '>
            <label for="wtdp-latest-2-show-temperature">' . esc_html__('Show Temperature', 'extended-weather') . '</label>
        </div>
        <!-- Show Description -->
        <div class="wtdp-form-group">
            <input type="checkbox" id="wtdp-latest-2-show-description" name="wtdp-latest-2-show-description" value="1" ' . esc_attr($show_description) . '>
            <label for="wtdp-latest-2-show-description">' . esc_html__('Show Description', 'extended-weather') . '</label>
        </div>
        <!-- Show City -->
        <div class="wtdp-form-group">
            <input type="checkbox" id="wtdp-latest-2-show-city" name="wtdp-latest-2-show-city" value="1" ' . esc_attr($show_city) . '>
            <label for="wtdp-latest-2-show-city">' . esc_html__('Show City', 'extended-weather') . '</label>
        </div>
        <!-- Show Sunrise/Sunset -->
        <div class="wtdp-form-group">
            <input type="checkbox" id="wtdp-latest-2-show-sunrise-sunset" name="wtdp-latest-2-show-sunrise-sunset" value="1" ' . esc_attr($show_sunrise_sunset) . '>
            <label for="wtdp-latest-2-show-sunrise-sunset">' . esc_html__('Show Sunrise/Sunset', 'extended-weather') . '</label>
        </div>
    </div>
</div>

';

