<?php
if (!defined('ABSPATH')) {
    exit; // Exit if accessed directly
}
/**
 * @var array $data
 *
 */
$post = $data['post'] ?? null;
if (!$post) {
    return;
}
$develuxsct_legend = $data['legend'] ?? '';
$develuxsct_tooltip = $data['tooltip'] ?? '';
$develuxsct_data_tooltip = '';
if ($develuxsct_tooltip) {
    $develuxsct_data_tooltip =  $develuxsct_tooltip;
}
$develuxsct_key = $data['key'] ?? '';
$develuxsct_global_key = $develuxsct_key . '_global';
$develuxsct_global_settings = wp_load_alloptions();
$develuxsct_global_value = $develuxsct_global_settings[$develuxsct_global_key] ?? '';
$develuxsct_ignore_global_settings = $data['ignore_global_settings'] ?? 1;


$id = $data['id'] ?? '';
$develuxsct_class_name = $data['class_name'] ?? '';
$develuxsct_flex_direction = $data['flex_direction'] ?? 'col';
$develuxsct_data_property = $data['data_property'] ?? '';
$develuxsct_data_dimension_unit_type = $data['data_dimension_unit_type'] ?? '';
$develuxsct_data_target = $data['data_target'] ?? '';
$develuxsct_data_target_color_a = $data['data_target_color_a'] ?? '';
$develuxsct_items = $data['items'] ?? 'items-start';
$develuxsct_default_value = $data['default_value'] ?? '';
if ($develuxsct_ignore_global_settings) {
    $develuxsct_value = esc_attr(get_post_meta($post->ID, $develuxsct_key, true));
} else {
    $develuxsct_value = $develuxsct_global_value;
}
if ($develuxsct_value === '') {
    $develuxsct_value = $develuxsct_default_value;
}
?>
<div class="label-style flex flex-row items-center gap-5 <?php echo esc_attr($develuxsct_items); ?>">
        <label class="flex items-center justify-between" for="<?php echo esc_attr($id); ?>">
            <?php echo esc_html($develuxsct_legend); ?>
            <?php if($develuxsct_data_tooltip): ?>
                <span data-develux-tooltip="<?php echo esc_attr($develuxsct_data_tooltip); ?>">
                    <i class="woocommerce-help-tip"></i>
                </span>
            <?php endif; ?>
        </label>
    <div class="flex flex-1 flex-row gap-5 items-center color-picker-wrapper color-picker-wrapper-js">
        <input data-default-value="<?php echo esc_attr($develuxsct_default_value); ?>"
               data-target-color-a="<?php echo esc_attr($develuxsct_data_target_color_a); ?>"
               data-target="<?php echo esc_attr($develuxsct_data_target); ?>"
               data-property="<?php echo esc_attr($develuxsct_data_property); ?>"
               data-unit="<?php echo esc_attr($develuxsct_data_dimension_unit_type); ?>"
               type="color"
               id="<?php echo esc_attr($id); ?>"
               name="<?php echo esc_attr($develuxsct_key); ?>"
               class="<?php echo esc_attr($develuxsct_class_name); ?> widefat color-picker develux-color-picker-js"
               value="<?php echo esc_attr($develuxsct_value); ?>">
        <input data-default-value="<?php echo esc_attr($develuxsct_default_value); ?>"
               data-target-color-a="<?php echo esc_attr($develuxsct_data_target_color_a); ?>"
               data-target="<?php echo esc_attr($develuxsct_data_target); ?>"
               data-property="<?php echo esc_attr($develuxsct_data_property); ?>"
               data-unit="<?php echo esc_attr($develuxsct_data_dimension_unit_type); ?>"
               class="<?php echo esc_attr($develuxsct_class_name); ?> color-hex color-hex-js"
               type="text"
               value="<?php echo esc_attr($develuxsct_value); ?>">

    </div>

</div>
