<?php
if (!defined('ABSPATH')) exit;

class pawfect_Radio_Switch_Control extends WP_Customize_Control {
    
    public $type = 'radio-switch';
    
    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="radio-switch-control">
            <?php 
            $values = array_keys($this->choices);
            $labels = array_values($this->choices);
            ?>
            <div class="switch-container">
                <input type="radio" 
                       id="<?php echo esc_attr( $this->id ); ?>_<?php echo esc_attr( $values[0] ); ?>" 
                       name="<?php echo esc_attr( $this->id ); ?>" 
                       value="<?php echo esc_attr($values[0]); ?>" 
                       <?php $this->link(); ?> 
                       <?php checked($this->value(), $values[0]); ?> />
                <input type="radio" 
                       id="<?php echo esc_attr( $this->id ); ?>_<?php echo esc_attr( $values[1] ); ?>" 
                       name="<?php echo esc_attr( $this->id ); ?>" 
                       value="<?php echo esc_attr($values[1]); ?>" 
                       <?php $this->link(); ?> 
                       <?php checked($this->value(), $values[1]); ?> />
                
                <div class="switch-wrapper">
                    <label for="<?php echo esc_attr( $this->id ); ?>_<?php echo esc_attr( $values[0] ); ?>" class="switch-label">
                        <?php echo esc_html($labels[0]); ?>
                    </label>
                    <label for="<?php echo esc_attr( $this->id ); ?>_<?php echo esc_attr( $values[1] ); ?>" class="switch-label">
                        <?php echo esc_html($labels[1]); ?>
                    </label>
                    <div class="switch-slider"></div>
                </div>
            </div>
        </div>
        
        <style>
        .radio-switch-control {
            margin-top: 8px;
        }
        
        .switch-container input[type="radio"] {
            display: none;
        }
        
        .switch-wrapper {
            position: relative;
            display: flex;
            background: #e5e7eb;
            border-radius: 6px;
            padding: 2px;
            width: 200px;
        }
        
        .switch-label {
            flex: 1;
            text-align: center;
            padding: 8px 12px;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            z-index: 2;
            position: relative;
            transition: color 0.2s ease;
            color: #6b7280;
        }
        
        .switch-slider {
            position: absolute;
            top: 2px;
            left: 2px;
            width: calc(50% - 2px);
            height: calc(100% - 4px);
            background: #fff;
            border-radius: 4px;
            transition: transform 0.2s ease;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }
        
        /* First radio checked - slider stays left */
        .switch-container input[type="radio"]:first-child:checked ~ .switch-wrapper .switch-slider {
            transform: translateX(0%);
        }

        /* Second radio checked - slider moves right */
        .switch-container input[type="radio"]:nth-child(2):checked ~ .switch-wrapper .switch-slider {
            transform: translateX(100%);
        }

        /* Label colors */
        .switch-container input[type="radio"]:first-child:checked ~ .switch-wrapper .switch-label:first-child {
            color: #374151;
        }

        .switch-container input[type="radio"]:nth-child(2):checked ~ .switch-wrapper .switch-label:nth-child(2) {
            color: #374151;
        }
        </style>
        <?php
    }
}

