<?php

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

// Get values from global variables if they exist (for edit mode)
// In add mode, these variables won't be set, so we use defaults
$instant_popup_builder_text_padding_top = isset($instant_popup_builder_text_padding_top) ? $instant_popup_builder_text_padding_top : 20;
$instant_popup_builder_text_padding_right = isset($instant_popup_builder_text_padding_right) ? $instant_popup_builder_text_padding_right : 25;
$instant_popup_builder_text_padding_bottom = isset($instant_popup_builder_text_padding_bottom) ? $instant_popup_builder_text_padding_bottom : 20;
$instant_popup_builder_text_padding_left = isset($instant_popup_builder_text_padding_left) ? $instant_popup_builder_text_padding_left : 25;
$instant_popup_builder_text_border_radius = isset($instant_popup_builder_text_border_radius) ? $instant_popup_builder_text_border_radius : 12;
$instant_popup_builder_text_color = isset($instant_popup_builder_text_color) ? $instant_popup_builder_text_color : '#333333';
$instant_popup_builder_text_font_size = isset($instant_popup_builder_text_font_size) ? $instant_popup_builder_text_font_size : 16;
$instant_popup_builder_text_line_height = isset($instant_popup_builder_text_line_height) ? $instant_popup_builder_text_line_height : 1.5;

?>
<div class="ipb-section">
 <div class="ipb-section-header">
    <h3>Text Popup</h3>
</div>
<div class="ipb-section-content" data-section="display">
<div class="design_text_styling">
    <div class="ipb_text_styling_wrapper">

        <!-- Padding Settings -->
        <div class="background_field">
            <div class="label">
                Content Padding:
                <div class="info">
                    <img src="<?php echo esc_url(plugin_dir_url(dirname(dirname(__FILE__))) . '/image/info.svg'); ?>" alt="">
                    <div class="detail" style="display: none;">Control the spacing around your text content</div>
                </div>
            </div>
            <div class="input_fields_group">
                <div class="field_l">
                    <label for="text_padding_top">Top:</label>
                    <input type="number" name="text_padding_top" id="text_padding_top" placeholder="20" min="0" max="100" value="<?php echo esc_attr($instant_popup_builder_text_padding_top); ?>">
                </div>
                <div class="field_l">
                    <label for="text_padding_right">Right:</label>
                    <input type="number" name="text_padding_right" id="text_padding_right" placeholder="25" min="0" max="100" value="<?php echo esc_attr($instant_popup_builder_text_padding_right); ?>">
                </div>
                <div class="field_l">
                    <label for="text_padding_bottom">Bottom:</label>
                    <input type="number" name="text_padding_bottom" id="text_padding_bottom" placeholder="20" min="0" max="100" value="<?php echo esc_attr($instant_popup_builder_text_padding_bottom); ?>">
                </div>
                <div class="field_l">
                    <label for="text_padding_left">Left:</label>
                    <input type="number" name="text_padding_left" id="text_padding_left" placeholder="25" min="0" max="100" value="<?php echo esc_attr($instant_popup_builder_text_padding_left); ?>">
                </div>
            </div>
        </div>

        <!-- Border Radius Settings -->
        <div class="background_field">
            <div class="label">
                Border Radius:
                <div class="info">
                    <img src="<?php echo esc_url(plugin_dir_url(dirname(dirname(__FILE__))) . '/image/info.svg'); ?>" alt="">
                    <div class="detail" style="display: none;">Round the corners of your text popup</div>
                </div>
            </div>
            <div class="input">
                <input type="range" name="text_border_radius" id="text_border_radius" min="0" max="30" value="<?php echo esc_attr($instant_popup_builder_text_border_radius); ?>" step="1">
                <span class="range_val"><?php echo esc_attr($instant_popup_builder_text_border_radius); ?>px</span>
            </div>
        </div>

        <!-- Text Color Settings -->
        <div class="background_field">
            <div class="label">
                Text Color:
                <div class="info">
                    <img src="<?php echo esc_url(plugin_dir_url(dirname(dirname(__FILE__))) . '/image/info.svg'); ?>" alt="">
                    <div class="detail" style="display: none;">Set the color for your text content</div>
                </div>
            </div>
            <div class="input">
                <input type="color" name="text_color" id="text_color" value="<?php echo esc_attr($instant_popup_builder_text_color); ?>">
            </div>
        </div>

        <!-- Font Size Settings -->
        <div class="background_field">
            <div class="label">
                Font Size:
                <div class="info">
                    <img src="<?php echo esc_url(plugin_dir_url(dirname(dirname(__FILE__))) . '/image/info.svg'); ?>" alt="">
                    <div class="detail" style="display: none;">Adjust the base font size for your text</div>
                </div>
            </div>
            <div class="input">
                <input type="range" name="text_font_size" id="text_font_size" min="12" max="24" value="<?php echo esc_attr($instant_popup_builder_text_font_size); ?>" step="1">
                <span class="range_val"><?php echo esc_attr($instant_popup_builder_text_font_size); ?>px</span>
            </div>
        </div>

        <!-- Line Height Settings -->
        <div class="background_field">
            <div class="label">
                Line Height:
                <div class="info">
                    <img src="<?php echo esc_url(plugin_dir_url(dirname(dirname(__FILE__))) . '/image/info.svg'); ?>" alt="">
                    <div class="detail" style="display: none;">Control the spacing between lines of text</div>
                </div>
            </div>
            <div class="input">
                <input type="range" name="text_line_height" id="text_line_height" min="1.2" max="2.0" value="<?php echo esc_attr($instant_popup_builder_text_line_height); ?>" step="0.1">
                <span class="range_val"><?php echo esc_attr($instant_popup_builder_text_line_height); ?></span>
            </div>
        </div>

    </div>
</div>
</div>
</div>
