<?php
/**
 * Prizes Configuration Tab
 *
 * @package Spin_Wheel
 */

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

// Variables in this template are scoped to the including render method (not truly
// global); the plugin's established "swp" prefix is part of its data schema and hook API.
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals
?>

<div class="swp-settings-section">
    <div class="swp-section-header">
        <h2 class="swp-section-title">
            <span class="dashicons dashicons-awards"></span>
            <?php esc_html_e('Prizes Configuration', 'spin-wheel'); ?>
        </h2>
        <button type="button" id="swp-add-prize" class="button button-primary">
            <span class="dashicons dashicons-plus-alt"></span>
            <?php esc_html_e('Add Prize', 'spin-wheel'); ?>
        </button>
    </div>

    <div class="swp-probability-info">
        <div class="swp-probability-total">
            <strong><?php esc_html_e('Total:', 'spin-wheel'); ?></strong>
            <span id="swp-total-probability">0</span>%
        </div>
    </div>

    <div id="swp-prizes-list" class="swp-prizes-list">
        <?php foreach ($prizes as $index => $prize): ?>
            <div class="swp-prize-row" data-index="<?php echo esc_attr( $index ); ?>">
                <div class="swp-prize-drag" style="display: none;">
                    <span class="dashicons dashicons-menu"></span>
                </div>

                <div class="swp-prize-fields-inline">
                    <div class="swp-prize-field swp-prize-field-label">
                        <label><?php esc_html_e('Prize Label', 'spin-wheel'); ?> <span class="swp-required">*</span></label>
                        <input type="text" name="swp_prizes[<?php echo esc_attr( $index ); ?>][label]"
                            value="<?php echo esc_attr($prize['label']); ?>"
                            class="swp-input swp-prize-label-input swp-trigger-preview" placeholder="e.g., 10% Discount"
                            required>
                    </div>

                    <div class="swp-prize-field swp-prize-field-code">
                        <label><?php esc_html_e('Coupon Code', 'spin-wheel'); ?></label>
                        <input type="text" name="swp_prizes[<?php echo esc_attr( $index ); ?>][code]"
                            value="<?php echo esc_attr($prize['code']); ?>" class="swp-input" placeholder="SAVE10">
                    </div>

                    <div class="swp-prize-field swp-prize-field-image">
                        <label><?php esc_html_e('Prize Image', 'spin-wheel'); ?></label>
                        <div class="swp-image-upload-wrapper">
                            <!-- Hidden input to store image URL -->
                            <input type="hidden" name="swp_prizes[<?php echo esc_attr( $index ); ?>][image]"
                                value="<?php echo esc_attr($prize['image'] ?? ''); ?>" class="swp-image-url">

                            <!-- Upload button (hide if image exists) -->
                            <button type="button" class="button swp-upload-image" data-index="<?php echo esc_attr( $index ); ?>"
                                title="<?php esc_html_e('Upload Image', 'spin-wheel'); ?>"
                                style="<?php echo !empty($prize['image']) ? 'display:none;' : ''; ?>">
                                <span class="dashicons dashicons-upload"></span>
                            </button>

                            <!-- Image preview (show if image exists) -->
                            <?php if (!empty($prize['image'])): ?>
                                <div class="swp-image-preview-wrapper">
                                    <img src="<?php echo esc_url($prize['image']); ?>" class="swp-prize-image">
                                    <button type="button" class="swp-remove-image"
                                        title="<?php esc_html_e('Remove Image', 'spin-wheel'); ?>">
                                        <span class="dashicons dashicons-no-alt"></span>
                                    </button>
                                </div>
                            <?php else: ?>
                                <div class="swp-image-preview-wrapper" style="display:none;">
                                    <img src="" class="swp-prize-image">
                                    <button type="button" class="swp-remove-image"
                                        title="<?php esc_html_e('Remove Image', 'spin-wheel'); ?>">
                                        <span class="dashicons dashicons-no-alt"></span>
                                    </button>
                                </div>
                            <?php endif; ?>
                        </div>
                    </div>

                    <div class="swp-prize-field swp-prize-field-probability">
                        <label><?php esc_html_e('Probability (%)', 'spin-wheel'); ?> <span class="swp-required">*</span></label>
                        <input type="number" name="swp_prizes[<?php echo esc_attr( $index ); ?>][probability]"
                            value="<?php echo esc_attr($prize['probability']); ?>"
                            class="swp-input swp-probability-input swp-trigger-preview" min="0" max="100" step="0.1"
                            required>
                    </div>

                    <div class="swp-prize-field swp-prize-field-color">
                        <label><?php esc_html_e('Color', 'spin-wheel'); ?></label>
                        <input type="text" name="swp_prizes[<?php echo esc_attr( $index ); ?>][color]"
                            value="<?php echo esc_attr($prize['color']); ?>"
                            class="swp-color-picker swp-prize-color-input swp-trigger-preview">
                    </div>

                    <div class="swp-prize-field swp-prize-field-winning">
                        <label><?php esc_html_e('Winning?', 'spin-wheel'); ?></label>
                        <label class="swp-toggle-label">
                            <input type="checkbox" name="swp_prizes[<?php echo esc_attr( $index ); ?>][is_winning]" value="1"
                                class="swp-toggle-input" <?php checked($prize['is_winning'], 1); ?>>
                            <span class="swp-toggle-switch"></span>
                            <span class="swp-toggle-text"><?php esc_html_e('Yes', 'spin-wheel'); ?></span>
                        </label>
                    </div>
                </div>

                <div class="swp-prize-actions">
                    <button type="button" class="swp-remove-prize" title="<?php esc_html_e('Remove Prize', 'spin-wheel'); ?>">
                        <span class="dashicons dashicons-trash"></span>
                    </button>
                </div>
            </div>
        <?php endforeach; ?>
    </div>

    <div class="swp-info-box" style="margin-top: 20px;">
        <span class="dashicons dashicons-info"></span>
        <div>
            <strong><?php esc_html_e('Probability Tips:', 'spin-wheel'); ?></strong>
            <p><?php esc_html_e('Total probability should equal 100%. Higher percentages mean better chances of winning that prize.', 'spin-wheel'); ?>
            </p>
        </div>
    </div>
</div>

<!-- Prize Template -->
<script type="text/template" id="swp-prize-template">
    <div class="swp-prize-row" data-index="{{index}}">
        <div class="swp-prize-drag" style="display: none;">
            <span class="dashicons dashicons-menu"></span>
        </div>
        
        <div class="swp-prize-fields-inline">
            <div class="swp-prize-field swp-prize-field-label">
                <label><?php esc_html_e('Prize Label', 'spin-wheel'); ?> <span class="swp-required">*</span></label>
                <input type="text" 
                       name="swp_prizes[{{index}}][label]" 
                       value="New Prize" 
                       class="swp-input swp-prize-label-input swp-trigger-preview" 
                       placeholder="e.g., 10% Discount" 
                       required>
            </div>
            
            <div class="swp-prize-field swp-prize-field-code">
                <label><?php esc_html_e('Coupon Code', 'spin-wheel'); ?></label>
                <input type="text" 
                       name="swp_prizes[{{index}}][code]" 
                       value="" 
                       class="swp-input" 
                       placeholder="SAVE10">
            </div>
            
            <div class="swp-prize-field swp-prize-field-image">
                <label><?php esc_html_e('Prize Image', 'spin-wheel'); ?></label>
                <div class="swp-image-upload-wrapper">
                    <!-- Hidden input to store image URL -->
                    <input type="hidden" 
                           name="swp_prizes[{{index}}][image]" 
                           value="" 
                           class="swp-image-url">
                    
                    <!-- Upload button -->
                    <button type="button" 
                            class="button swp-upload-image" 
                            data-index="{{index}}"
                            title="<?php esc_html_e('Upload Image', 'spin-wheel'); ?>">
                        <span class="dashicons dashicons-upload"></span>
                    </button>
                    
                    <!-- Image preview (initially hidden) -->
                    <div class="swp-image-preview-wrapper" style="display:none;">
                        <img src="" class="swp-prize-image">
                        <button type="button" class="swp-remove-image" title="<?php esc_html_e('Remove Image', 'spin-wheel'); ?>">
                            <span class="dashicons dashicons-no-alt"></span>
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="swp-prize-field swp-prize-field-probability">
                <label><?php esc_html_e('Probability (%)', 'spin-wheel'); ?> <span class="swp-required">*</span></label>
                <input type="number" 
                       name="swp_prizes[{{index}}][probability]" 
                       value="10" 
                       class="swp-input swp-probability-input swp-trigger-preview" 
                       min="0" max="100" step="0.1" 
                       required>
            </div>
            
            <div class="swp-prize-field swp-prize-field-color">
                <label><?php esc_html_e('Color', 'spin-wheel'); ?></label>
                <input type="text" 
                       name="swp_prizes[{{index}}][color]" 
                       value="#ff6b6b" 
                       class="swp-color-picker swp-prize-color-input swp-trigger-preview">
            </div>
            
            <div class="swp-prize-field swp-prize-field-winning">
                <label><?php esc_html_e('Winning?', 'spin-wheel'); ?></label>
                <label class="swp-toggle-label">
                    <input type="checkbox" 
                           name="swp_prizes[{{index}}][is_winning]" 
                           value="1" 
                           class="swp-toggle-input"
                           checked>
                    <span class="swp-toggle-switch"></span>
                    <span class="swp-toggle-text"><?php esc_html_e('Yes', 'spin-wheel'); ?></span>
                </label>
            </div>
        </div>
        
        <div class="swp-prize-actions">
            <button type="button" class="swp-remove-prize" title="<?php esc_html_e('Remove Prize', 'spin-wheel'); ?>">
                <span class="dashicons dashicons-trash"></span>
            </button>
        </div>
    </div>
</script>

<script>
    jQuery(document).ready(function ($) {
        // Function to toggle prize image fields based on representation setting
        function togglePrizeImageFields() {
            var representation = $('#swp_prize_representation').val();

            if (representation === 'image' || representation === 'both') {
                $('.swp-prize-field-image').show();
            } else {
                $('.swp-prize-field-image').hide();
            }
        }

        // Run on page load
        togglePrizeImageFields();

        // Run when prize representation changes
        $(document).on('change', '#swp_prize_representation', function () {
            togglePrizeImageFields();
        });

        // Run when tab is switched to prizes tab (to ensure it runs when prizes become visible)
        $(document).on('click', '[href="#tab-prizes"]', function () {
            setTimeout(togglePrizeImageFields, 100);
        });

        // Run when new prize is added
        $(document).on('click', '#swp-add-prize', function () {
            setTimeout(togglePrizeImageFields, 100);
        });
    });
</script>