<?php
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals -- Variables are confined to this settings partial.

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

// Check if this is a text popup using multiple methods
$instant_popup_builder_is_text_popup = false;

// Method 1: Check global variable set by template
if (isset($GLOBALS['instant_popup_builder_ipb_current_popup_type']) && $GLOBALS['instant_popup_builder_ipb_current_popup_type'] === 'text') {
    $instant_popup_builder_is_text_popup = true;
}

// Method 2: Check URL parameter
// phpcs:ignore WordPress.Security.NonceVerification.Recommended -- GET parameter used for display logic only, value is sanitized
if (isset($_GET['type']) && sanitize_text_field(wp_unslash($_GET['type'])) === 'text') {
    $instant_popup_builder_is_text_popup = true;
}

// Method 3: Check POST data (for form submissions)
// phpcs:ignore WordPress.Security.NonceVerification.Missing -- Used for display logic only, not processing form data
if (isset($_POST['popup_temp_type']) && sanitize_text_field(wp_unslash($_POST['popup_temp_type'])) === 'popup_text') {
    $instant_popup_builder_is_text_popup = true;
}

// Method 4: Check if we're on a text popup page by looking at the current URL
$instant_popup_builder_current_url = isset($_SERVER['REQUEST_URI']) ? esc_url_raw(wp_unslash($_SERVER['REQUEST_URI'])) : '';
$safe_current_url = (string) ( $instant_popup_builder_current_url ?? '' );
if (strpos($safe_current_url, 'type=text') !== false) {
    $instant_popup_builder_is_text_popup = true;
}

// For text popups, set default values
$instant_popup_builder_default_background_color = $instant_popup_builder_is_text_popup ? '#ffffff' : '';
$instant_popup_builder_default_background_opacity = $instant_popup_builder_is_text_popup ? '1.0' : '0';

// Debug output (remove this later)
if ($instant_popup_builder_is_text_popup) {
    echo '<!-- DEBUG: Text popup detected via global variable -->';
} else {
    // phpcs:ignore WordPress.Security.NonceVerification.Missing,WordPress.Security.NonceVerification.Recommended -- Debug output only, values are sanitized
    $debug_get_type = isset($_GET['type']) ? sanitize_text_field(wp_unslash($_GET['type'])) : 'not set';
    // phpcs:ignore WordPress.Security.NonceVerification.Missing -- Debug output only, value is sanitized
    $debug_post_type = isset($_POST['popup_temp_type']) ? sanitize_text_field(wp_unslash($_POST['popup_temp_type'])) : 'not set';
    echo '<!-- DEBUG: Not a text popup - Global: ' . esc_html(isset($GLOBALS['instant_popup_builder_ipb_current_popup_type']) ? $GLOBALS['instant_popup_builder_ipb_current_popup_type'] : 'not set') . ', URL: ' . esc_html($debug_get_type) . ', POST: ' . esc_html($debug_post_type) . ' -->';
}

// phpcs:ignore WordPress.Security.NonceVerification.Recommended -- GET parameter used for layout mode detection only
$instant_popup_builder_is_edit_mode = isset($_GET['edit_id']) && !empty(sanitize_text_field(wp_unslash($_GET['edit_id'])));
$instant_popup_builder_background_section_classes = 'ipb-section ipb-background-settings';
if (! $instant_popup_builder_is_edit_mode) {
    $instant_popup_builder_background_section_classes .= ' ipb-background-settings-new';
}
?>
<div class="<?php echo esc_attr($instant_popup_builder_background_section_classes); ?>">
 <div class="ipb-section-header">
    <h3>Background</h3>
</div>
<div class="ipb-section-content" data-section="display">
    <?php
    // Default: background disabled for new popups
    $background_enabled = false;
    $background_selection = 'color';
    ?>
    <!-- Master Background Toggle Row -->
    <div class="ipb-background-row">
        <div class="ipb-background-label">
            <label for="background_enabled">Background</label>
        </div>
        <div class="ipb-background-control">
            <div class="input toggle switch">
                <input type="checkbox" name="background_enabled" id="background_enabled" value="yes" <?php echo $background_enabled ? 'checked' : ''; ?>>
                <span class="slider round"></span>
            </div>
            <p class="ipb-background-helper" style="display: <?php echo $background_enabled ? 'none' : 'block'; ?>; margin-top: 8px; color: #646970; font-size: 12px;">Enable to use a background.</p>
        </div>
    </div>

    <!-- Background Controls Wrapper -->
    <div class="ipb-background-content" id="ipb_background_content" style="display: <?php echo $background_enabled ? 'block' : 'none'; ?>;">
        
        <!-- Select Background Row -->
        <div class="ipb-background-row">
            <div class="ipb-background-label">
                <label for="background_selection">Select Background</label>
            </div>
            <div class="ipb-background-control">
                <select name="background_selection" id="background_selection" class="regular-text">
                    <option value="color" selected>Color</option>
                    <option value="image">Image</option>
                </select>
                <p class="ipb-background-helper">Choose a solid color or an image background.</p>
            </div>
        </div>

        <!-- Color Background Section -->
        <div class="ipb-background-color-section" id="ipb_background_color_section" style="display: block;">
            
            <!-- Background Color Row -->
            <div class="ipb-background-row">
                <div class="ipb-background-label">
                    <label for="background_color">Background Color</label>
                </div>
                <div class="ipb-background-control">
                    <input type="color" name="background_color" id="background_color" value="<?php echo esc_attr($instant_popup_builder_default_background_color); ?>" style="width: 80px; height: 40px; border: 1px solid #8c8f94; border-radius: 2px; cursor: pointer;">
                </div>
            </div>

            <!-- Background Color Opacity Row -->
            <div class="ipb-background-row">
                <div class="ipb-background-label">
                    <label for="backcolor_opacity">Opacity</label>
                </div>
                <div class="ipb-background-control">
                    <div style="display: flex; align-items: center; gap: 12px;">
                        <input type="range" name="backcolor_opacity" min="0" max="1" step="0.1" id="backcolor_opacity" value="<?php echo esc_attr($instant_popup_builder_default_background_opacity); ?>" style="flex: 1; min-width: 0;">
                        <input type="number" name="backcolor_opacity_value" id="backcolor_opacity_value" min="0" max="1" step="0.1" value="<?php echo esc_attr($instant_popup_builder_default_background_opacity); ?>" style="width: 80px; height: 40px; padding: 0 8px; border: 1px solid #8c8f94; border-radius: 2px; text-align: center;">
                    </div>
                </div>
            </div>
        </div>

        <!-- Image Background Section -->
        <div class="ipb-background-image-section" id="ipb_background_image_section" style="display: none;">
            
            <!-- Background Image Row -->
            <div class="ipb-background-row">
                <div class="ipb-background-label">
                    <label for="ipb_background_media_btn"><?php esc_html_e( 'Background Image', 'instant-popup-builder' ); ?></label>
                </div>
                <div class="ipb-background-control">
                    <div style="display: flex; flex-direction: column; gap: 8px;">
                        <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
                            <button type="button" class="button" id="ipb_background_media_btn">
                                <span class="dashicons dashicons-admin-media" style="vertical-align: middle; margin-top: 3px;"></span>
                                <?php esc_html_e( 'Select from Media Library', 'instant-popup-builder' ); ?>
                            </button>
                            <button type="button" class="button" id="ipb_background_remove_btn" style="display:none;">
                                <?php esc_html_e( 'Remove', 'instant-popup-builder' ); ?>
                            </button>
                            <input type="hidden" name="background_image_url" id="background_image_url" value="">
                        </div>
                        <p class="ipb-background-helper" style="margin: 0;"><?php esc_html_e( 'Choose an existing image or upload a new one from the Media Library.', 'instant-popup-builder' ); ?></p>
                        <p class="ipb-background-selected-summary is-empty" id="ipb_background_selected_summary"></p>
                        <img src="" alt="" class="ipb_back_img" style="display: none; max-width: 200px; height: auto; border: 1px solid #ddd; border-radius: 4px; margin-top: 8px;" />
                    </div>
                </div>
            </div>

            <!-- Background Image Opacity Row -->
            <div class="ipb-background-row">
                <div class="ipb-background-label">
                    <label for="backimage_opacity">Opacity</label>
                </div>
                <div class="ipb-background-control">
                    <div style="display: flex; align-items: center; gap: 12px;">
                        <input type="range" name="backimage_opacity" min="0" max="1" step="0.1" id="backimage_opacity" value="1.0" style="flex: 1; min-width: 0;">
                        <input type="number" name="backimage_opacity_value" id="backimage_opacity_value" min="0" max="1" step="0.1" value="1.0" style="width: 80px; height: 40px; padding: 0 8px; border: 1px solid #8c8f94; border-radius: 2px; text-align: center;">
                    </div>
                </div>
            </div>

            <!-- Background Image Size Row -->
            <div class="ipb-background-row">
                <div class="ipb-background-label">
                    <label for="back_image_size">Image Size</label>
                </div>
                <div class="ipb-background-control">
                    <select name="back_image_size" id="back_image_size" class="regular-text">
                        <option value="cover" selected>Cover</option>
                        <option value="contain">Contain</option>
                        <option value="none">None</option>
                        <option value="unset">Unset</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
