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

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

$size_mode = 'yes'; // Default to Percentage
?>
<?php
// 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_size_section_classes = 'ipb-section ipb-size-layout';
if (! $instant_popup_builder_is_edit_mode) {
    $instant_popup_builder_size_section_classes .= ' ipb-new-popup-panel';
}
?>
<div class="<?php echo esc_attr($instant_popup_builder_size_section_classes); ?>">
 <div class="ipb-section-header">
    <h3>Size & Layout</h3>
</div>
<div class="ipb-section-content" data-section="display">
    <!-- Size Mode Row -->
    <div class="ipb-size-row">
        <div class="ipb-size-label">
            <label for="design_percentage_toggle">Size mode</label>
        </div>
        <div class="ipb-size-control">
            <select name="design_percentage_toggle" id="design_percentage_toggle" class="regular-text">
                <option value="yes" selected>Percentage (%)</option>
                <option value="no">Fixed Size (px)</option>
            </select>
            <p class="ipb-size-helper">Choose fixed dimensions or responsive percentage.</p>
        </div>
    </div>

    <!-- Fixed Size (px) Mode Section -->
    <div class="ipb-size-fixed-section" id="ipb_size_fixed_section" style="display: none;">
        
        <!-- Width Row -->
        <div class="ipb-size-row">
            <div class="ipb-size-label">
                <label for="design_width">Width</label>
            </div>
            <div class="ipb-size-control">
                <div style="display: flex; align-items: center; gap: 8px;">
                    <input type="number" name="design_width" id="design_width" class="regular-text" placeholder="Enter width" value="0" min="0" max="2000" step="1" style="flex: 1; min-width: 0;">
                    <span style="color: #646970; font-size: 14px; white-space: nowrap;">px</span>
                    <button type="button" id="lock_aspect_ratio_btn" class="button button-secondary" style="padding: 6px 10px; font-size: 14px; min-width: 36px; height: 36px; border: 1px solid #8c8f94; background: #f6f7f7; cursor: pointer; border-radius: 2px; display: flex; align-items: center; justify-content: center;" title="Lock aspect ratio">
                        <i class="fa-solid fa-lock-open" style="color: #646970;"></i>
                    </button>
                </div>
                <input type="hidden" id="aspect_ratio_locked" value="0">
                <input type="hidden" id="aspect_ratio_value" value="0">
                <p class="ipb-size-helper">Leave 0 for default popup size. Recommended: 400-800px (Max: 2000px)</p>
            </div>
        </div>

        <!-- Height Row -->
        <div class="ipb-size-row">
            <div class="ipb-size-label">
                <label for="design_height">Height</label>
            </div>
            <div class="ipb-size-control">
                <div style="display: flex; align-items: center; gap: 8px;">
                    <input type="number" name="design_height" id="design_height" class="regular-text" placeholder="Enter height" value="0" min="0" max="1500" step="1" style="flex: 1; min-width: 0;">
                    <span style="color: #646970; font-size: 14px; white-space: nowrap;">px</span>
                </div>
                <p class="ipb-size-helper">Text popups stay content-height. This value sets the maximum height before content scrolls. Leave 0 for the responsive default.</p>
            </div>
        </div>

        <!-- Detect Popup Size Button Row -->
        <div class="ipb-size-row">
            <div class="ipb-size-label">
                <!-- Empty label column -->
            </div>
            <div class="ipb-size-control">
                <button type="button" id="detect_popup_size_btn" class="button button-secondary" style="padding: 6px 12px; font-size: 13px;">
                    <i class="fa-solid fa-arrows-left-right-to-line"></i> Detect Popup Size
                </button>
                <span id="detect_size_status" style="margin-left: 10px; color: #10b981; display: none;">
                    <i class="fa-solid fa-circle-check"></i> Size detected!
                </span>
            </div>
        </div>
    </div>

    <!-- Percentage (%) Mode Section -->
    <div class="ipb-size-percentage-section" id="ipb_size_percentage_section" style="display: block;">
        <div class="ipb-size-row">
            <div class="ipb-size-label">
                <label for="design_percentage">Size</label>
            </div>
            <div class="ipb-size-control">
                <div style="display: flex; align-items: center; gap: 12px;">
                    <input type="range" id="design_percentage" name="design_percentage" min="0" max="100" value="50" step="10" style="flex: 1; min-width: 0;">
                    <input type="number" id="design_percentage_value" name="design_percentage_value" min="0" max="100" value="50" step="10" style="width: 80px; height: 40px; padding: 0 8px; border: 1px solid #8c8f94; border-radius: 2px; text-align: center;">
                    <span style="color: #646970; font-size: 14px; white-space: nowrap;">%</span>
                </div>
                <p class="ipb-size-helper">Set 0 for default size. Set popup width as percentage (10-100%) for responsive design.</p>
            </div>
        </div>
    </div>

    <!-- Border Row -->
    <div class="ipb-size-row ipb-border-settings">
        <div class="ipb-size-label">
            <label for="border_enabled"><?php esc_html_e( 'Border', 'instant-popup-builder' ); ?></label>
        </div>
        <div class="ipb-size-control">
            <div class="ipb-border-controls">
                <label class="ipb-border-toggle">
                    <input type="hidden" name="border_enabled" value="no">
                    <input type="checkbox" name="border_enabled" id="border_enabled" value="yes">
                    <?php esc_html_e( 'Enable border', 'instant-popup-builder' ); ?>
                </label>
                <div class="ipb-border-width-control">
                    <input type="number" name="border_width" id="border_width" min="0" max="40" step="1" value="1" style="width:90px;">
                    <span><?php esc_html_e( 'px', 'instant-popup-builder' ); ?></span>
                </div>
                <input type="color" name="border_color" id="border_color" value="#111827">
            </div>
            <p class="ipb-size-helper"><?php esc_html_e( 'Adds a border to the popup container. Choose width and color.', 'instant-popup-builder' ); ?></p>
        </div>
    </div>
</div>
</div>
