<?php
/**
 * Palette Control for Customizer
 */

if (!defined('ABSPATH')) exit;

class Pawfect_Customize_Palette_Control extends WP_Customize_Control {
    
    public $type = 'pawfect-palette';

    public function render_content() {
        if (empty($this->choices)) return;
        ?>
        <label>
            <span class="customize-control-title"><?php echo esc_html($this->label); ?></span>
            <?php if (!empty($this->description)) : ?>
                <span class="description customize-control-description"><?php echo wp_kses_post($this->description); ?></span>
            <?php endif; ?>
        </label>

        <div class="pawfect-palette-wrapper" style="display: flex; flex-direction: column; gap: 8px; margin-top: 10px;">
            <?php foreach ($this->choices as $value => $palette) : 
                $is_selected = ($this->value() === $value);
            ?>
                <label class="pawfect-palette-option <?php echo $is_selected ? 'selected' : ''; ?>" style="position: relative; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border: 2px solid <?php echo $is_selected ? '#0D9488' : '#e2e8f0'; ?>; border-radius: 6px; background: #fff; transition: all 0.2s ease; box-shadow: <?php echo $is_selected ? '0 2px 4px -1px rgba(13, 148, 136, 0.1)' : '0 1px 2px 0 rgba(0, 0, 0, 0.05)'; ?>;">
                    
                    <div style="display: flex; align-items: center; gap: 8px;">
                        <!-- Hide native radio button safely without display:none to avoid WP core overrides -->
                        <input type="radio" value="<?php echo esc_attr($value); ?>" name="<?php echo esc_attr($this->id); ?>" <?php $this->link(); ?> <?php checked($this->value(), $value); ?> style="position: absolute; opacity: 0; width: 0; height: 0;" />
                        
                        <!-- Custom Radio indicator -->
                        <div class="pawfect-radio-indicator" style="width: 16px; height: 16px; border-radius: 50%; border: 2px solid <?php echo $is_selected ? '#0D9488' : '#cbd5e1'; ?>; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease;">
                            <div class="pawfect-radio-dot" style="width: 6px; height: 6px; border-radius: 50%; background: #0D9488; opacity: <?php echo $is_selected ? '1' : '0'; ?>; transition: all 0.2s ease; transform: <?php echo $is_selected ? 'scale(1)' : 'scale(0)'; ?>;"></div>
                        </div>

                        <span style="font-weight: 600; color: <?php echo $is_selected ? '#0f172a' : '#475569'; ?>; font-size: 13px;"><?php echo esc_html($palette['label']); ?></span>
                    </div>

                    <div class="pawfect-palette-colors" style="display: flex; align-items: center;">
                        <?php 
                        $z_index = 10;
                        foreach ($palette['colors'] as $color) : 
                        ?>
                            <div style="width: 20px; height: 20px; border-radius: 50%; background-color: <?php echo esc_attr($color); ?>; border: 2px solid #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.1); margin-left: -5px; position: relative; z-index: <?php echo $z_index--; ?>;"></div>
                        <?php endforeach; ?>
                    </div>
                </label>
            <?php endforeach; ?>
        </div>

        <style>
            /* Make customizer more compact */
            #customize-controls .customize-control {
                margin-bottom: 12px;
            }
            #customize-controls .customize-control-title {
                margin-bottom: 4px;
                font-size: 13px;
            }
            #customize-controls .customize-control-description {
                margin-bottom: 8px;
                font-size: 12px;
                line-height: 1.3;
            }
            #customize-controls .wp-picker-container .wp-color-result.button {
                min-height: 24px;
                padding: 0 0 0 24px;
                font-size: 11px;
            }

            /* Bulletproof CSS visibility toggle for colors — hide ALL individual color pickers when a preset is active */
            body.pawfect-palette-hide-colors #customize-control-pawfect_primary_color,
            body.pawfect-palette-hide-colors #customize-control-pawfect_secondary_color,
            body.pawfect-palette-hide-colors #customize-control-pawfect_background_color,
            body.pawfect-palette-hide-colors #customize-control-pawfect_text_color,
            body.pawfect-palette-hide-colors #customize-control-pawfect_header_colors_upgrade_notice,
            body.pawfect-palette-hide-colors #customize-control-pawfect_header_colors_heading,
            body.pawfect-palette-hide-colors #customize-control-pawfect_header_background_color,
            body.pawfect-palette-hide-colors #customize-control-pawfect_header_text_color,
            body.pawfect-palette-hide-colors #customize-control-pawfect_footer_colors_upgrade_notice,
            body.pawfect-palette-hide-colors #customize-control-pawfect_footer_colors_heading,
            body.pawfect-palette-hide-colors #customize-control-pawfect_footer_background_color,
            body.pawfect-palette-hide-colors #customize-control-pawfect_footer_text_color,
            body.pawfect-palette-hide-colors #customize-control-pawfect_blog_background_color,
            body.pawfect-palette-hide-colors #customize-control-pawfect_why_choose_bg_color,
            body.pawfect-palette-hide-colors #customize-control-pawfect_why_choose_text_color,
            body.pawfect-palette-hide-colors #customize-control-pawfect_testimonial_background_color,
            body.pawfect-palette-hide-colors #customize-control-pawfect_testimonial_accent_color,
            body.pawfect-palette-hide-colors #customize-control-pawfect_testimonial_heading_color,
            body.pawfect-palette-hide-colors #customize-control-pawfect_testimonial_description_color,
            body.pawfect-palette-hide-colors #customize-control-pawfect_testimonial_text_color,
            body.pawfect-palette-hide-colors #customize-control-pawfect_service_bg_color,
            body.pawfect-palette-hide-colors #customize-control-pawfect_service_text_color,
            body.pawfect-palette-hide-colors #customize-control-pawfect_portfolio_bg_color,
            body.pawfect-palette-hide-colors #customize-control-pawfect_press_mentions_background_color,
            body.pawfect-palette-hide-colors #customize-control-pawfect_mission_background_color,
            body.pawfect-palette-hide-colors #customize-control-pawfect_promo_banner_background_color,
            body.pawfect-palette-hide-colors #customize-control-pawfect_promo_banner_subtitle_color,
            body.pawfect-palette-hide-colors #customize-control-pawfect_promo_timer_desc_color,
            body.pawfect-palette-hide-colors #customize-control-pawfect_cta_background_color,
            body.pawfect-palette-hide-colors #customize-control-pawfect_cta_text_color,
            body.pawfect-palette-hide-colors #customize-control-pawfect_feature_highlight_bg_color,
            body.pawfect-palette-hide-colors #customize-control-pawfect_feature_highlight_text_color,
            body.pawfect-palette-hide-colors #customize-control-pawfect_featured_collection_bg_color,
            body.pawfect-palette-hide-colors #customize-control-pawfect_main_slider_caption_subtitle_title_color,
            body.pawfect-palette-hide-colors #customize-control-pawfect_topbar_bg_color,
            body.pawfect-palette-hide-colors #customize-control-pawfect_topbar_text_color,
            body.pawfect-palette-hide-colors #customize-control-pawfect_page_header_background_color,
            body.pawfect-palette-hide-colors #customize-control-pawfect_page_header_text_color {
                display: none !important;
            }
        </style>


        <?php
    }
}
