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

class pawfect_Simple_Radio_Image_Control extends WP_Customize_Control {
    
    public $type = 'simple-radio-image';
    
    public function render_content() {
        if (empty($this->choices)) return;

        // Get choice labels for hover text
        $choice_labels = array();
        if (isset($this->input_attrs['choice_labels'])) {
            $choice_labels = $this->input_attrs['choice_labels'];
        } else {
            // Generate labels from values if not provided
            foreach ($this->choices as $value => $image_url) {
                $choice_labels[$value] = ucfirst(str_replace(array('-', '_'), ' ', $value));
            }
        }
        ?>
        <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-radio-image-control" style="display: flex; gap: 10px; margin-top: 10px;">
            <?php foreach ($this->choices as $value => $image_url) : ?>
                <label class="pawfect-radio-image-option" data-label="<?php echo esc_attr($choice_labels[$value]); ?>" style="position: relative; cursor: pointer; border-radius: 6px; overflow: hidden; transition: all 0.3s ease;">
                    <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="display: none;" />
                    <img src="<?php echo esc_url($image_url); ?>"
                         alt="<?php echo esc_attr($value); ?>"
                         style="width: 80px; height: auto; display: block; transition: all 0.3s ease;" />

                    <!-- SVG Checkmark for selected state -->
                    <svg class="pawfect-checkmark" width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="position: absolute; top: 4px; right: 4px; z-index: 10; opacity: 0; transition: all 0.3s ease;">
                        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                        <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                        <g id="SVGRepo_iconCarrier">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM16.0303 8.96967C16.3232 9.26256 16.3232 9.73744 16.0303 10.0303L11.0303 15.0303C10.7374 15.3232 10.2626 15.3232 9.96967 15.0303L7.96967 13.0303C7.67678 12.7374 7.67678 12.2626 7.96967 11.9697C8.26256 11.6768 8.73744 11.6768 9.03033 11.9697L10.5 13.4393L12.7348 11.2045L14.9697 8.96967C15.2626 8.67678 15.7374 8.67678 16.0303 8.96967Z" fill="#4f66d8"></path>
                        </g>
                    </svg>

                    <!-- Hover text label -->
                    <div class="pawfect-hover-label" style="position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.8); color: white; text-align: center; padding: 4px 8px; font-size: 12px; font-weight: 500; opacity: 0; transition: all 0.3s ease; transform: translateY(100%);">
                        <?php echo esc_html($choice_labels[$value]); ?>
                    </div>
                </label>
            <?php endforeach; ?>
        </div>

        <style>
        /* Remove borders and add hover effects */
        .pawfect-radio-image-control .pawfect-radio-image-option {
            border: none !important;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .pawfect-radio-image-control .pawfect-radio-image-option:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 16px rgba(0,0,0,0.15);
        }

        .pawfect-radio-image-control .pawfect-radio-image-option:hover .pawfect-hover-label {
            opacity: 1;
            transform: translateY(0);
        }

        /* Selected state - show checkmark */
        .pawfect-radio-image-control input[type="radio"]:checked + img + .pawfect-checkmark {
            opacity: 1;
        }

        /* Selected state - add subtle glow */
        /*.pawfect-radio-image-control input[type="radio"]:checked ~ .pawfect-radio-image-option,
        .pawfect-radio-image-control .pawfect-radio-image-option:has(input[type="radio"]:checked) {
            box-shadow: 0 0 0 2px #4f66d8, 0 4px 16px rgba(79, 102, 216, 0.3) !important;
        }*/

        /* Image opacity adjustments */
        .pawfect-radio-image-control img {
            opacity: 0.7;
        }

        .pawfect-radio-image-control input[type="radio"]:checked + img {
            opacity: 1 !important;
        }

        .pawfect-radio-image-control .pawfect-radio-image-option:hover img {
            opacity: 0.9;
        }
        </style>
        <?php
    }
}