<?php
/**
 * Wheel Container Template
 *
 * @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
?>

<?php
$display_mode = isset($settings['display_mode']) ? $settings['display_mode'] : 'popup';
$container_class = 'swp-wheel-container';
if ($display_mode === 'popup') {
    $container_class .= ' swp-wheel-popup';
}

// Check participant limit
$participant_limit = isset($settings['participant_limit']) ? intval($settings['participant_limit']) : 0;
$current_count = 0;
$is_limit_reached = false;

if ($participant_limit > 0) {
    $db = SWP_Database::instance();
    $current_count = $db->count_entries($wheel_id);
    $is_limit_reached = $current_count >= $participant_limit;
}

$enable_utm_capture = class_exists('SWP_Pro_Helper')
    && SWP_Pro_Helper::is_feature_enabled('utm_tracking')
    && !empty($form_settings['enable_utm_capture']);

$swp_radial_ring = false;
$swp_is_grid2x3 = false;
if ('nine_squares' === $wheel_type && is_array($styles)) {
    $swp_preset = isset($styles['active_preset']) ? (string) $styles['active_preset'] : '';
    $swp_gbr = isset($styles['grid_border_radius']) ? (int) $styles['grid_border_radius'] : 0;
    $swp_doc_blocks_ring = in_array($swp_preset, array('ringGrid', 'grid2x3'), true);
    $swp_radial_ring = ('circleStyle' === $swp_preset || ($swp_gbr >= 48 && ! $swp_doc_blocks_ring));
    $swp_is_grid2x3 = ('grid2x3' === $swp_preset);
}
?>

<div class="<?php echo esc_attr($container_class); ?>" 
     data-wheel-id="<?php echo esc_attr($wheel_id); ?>"
     data-wheel-type="<?php echo esc_attr($wheel_type); ?>"
     data-radial-ring="<?php echo $swp_radial_ring ? '1' : '0'; ?>"
     data-active-preset="<?php echo esc_attr(is_array($styles) ? ($styles['active_preset'] ?? 'default') : 'default'); ?>"
     data-wheel-mode="<?php echo esc_attr($settings['wheel_mode'] ?? 'instant'); ?>"
     data-display-mode="<?php echo esc_attr($display_mode); ?>"
     data-display-trigger="<?php echo esc_attr($settings['display_trigger'] ?? 'page_load'); ?>"
     data-time-delay="<?php echo esc_attr($settings['time_delay'] ?? 0); ?>"
     data-reappear-delay="<?php echo esc_attr($settings['reappear_delay'] ?? 0); ?>"
     style="display: none;">
    
    <?php if ($display_mode === 'popup') : ?>
    <!-- Modal Overlay -->
    <div class="swp-modal-overlay"></div>
    
    <!-- Modal Content -->
    <div class="swp-modal-content">
        <button type="button" class="swp-modal-close" aria-label="Close">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16">
            <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/>
            </svg>
        </button>
        
        <!-- Two Column Layout -->
        <div class="swp-wheel-wrapper swp-wheel-wrapper-popup">
            <?php else : ?>
                <!-- Two Column Layout -->
                <div class="swp-wheel-wrapper">
            <?php endif; ?>
                
                <!-- Left Column: Wheel Section -->
                <div class="swp-wheel-column">
                    <div class="swp-form-header swp-mobile-header-wheel">
                        <h3 class="swp-form-title"><?php echo esc_html($form_settings['title'] ?? 'Spin to Win!'); ?></h3>
                        <?php if (!empty($form_settings['description'])) : ?>
                            <p class="swp-form-description"><?php echo wp_kses_post($form_settings['description']); ?></p>
                        <?php endif; ?>
                    </div>
                    <div class="swp-wheel-section" id="swp-wheel-section-<?php echo esc_attr( $wheel_id ); ?>">
                        <div id="swp-canvas-<?php echo esc_attr( $wheel_id ); ?>"
                            class="swp-canvas"
                            data-max-width="<?php echo esc_attr($styles['width'] ?? 460); ?>">
                        </div>
                        <?php if ($wheel_type === 'nine_squares' && $swp_is_grid2x3) : ?>
                        <button type="button" class="swp-grid-external-spin" style="<?php
                            $spin_mid = !empty($styles['button_color']) ? sanitize_hex_color($styles['button_color']) : '';
                            if (!$spin_mid) {
                                $spin_mid = '#e45912';
                            }
                            $spin_text = !empty($styles['button_text_color']) ? sanitize_hex_color($styles['button_text_color']) : '';
                            if (!$spin_text) {
                                $spin_text = '#ffffff';
                            }
                            echo '--swp-external-spin-mid:' . esc_attr($spin_mid) . ';';
                            echo 'color:' . esc_attr($spin_text) . ';';
                        ?>">
                            <?php echo esc_html($styles['button_text'] ?? 'SPIN'); ?>
                        </button>
                        <?php endif; ?>
                        <?php if ($wheel_type === 'nine_squares') : ?>
                        <p class="swp-grid-play-hint" <?php echo $swp_is_grid2x3 ? ' data-swp-grid2x3-hint="1"' : ''; ?>>
                            <?php
                            if ($swp_is_grid2x3) {
                                esc_html_e('Tap the button under the grid to spin. Complete any required fields in the form first.', 'spin-wheel');
                            } else {
                                esc_html_e('Tap the center to spin. Complete any required fields in the form first.', 'spin-wheel');
                            }
                            ?>
                        </p>
                        <?php endif; ?>
                    </div>
                </div>
                
                <!-- Right Column: Form Section -->
                <div class="swp-form-column">
                    <div class="swp-form-section" id="swp-form-<?php echo esc_attr( $wheel_id ); ?>">
                        
                        <div class="swp-form-header swp-desktop-header-form">
                            <h3 class="swp-form-title"><?php echo esc_html($form_settings['title'] ?? 'Spin to Win!'); ?></h3>
                            <?php if (!empty($form_settings['description'])) : ?>
                                <p class="swp-form-description"><?php echo wp_kses_post($form_settings['description']); ?></p>
                            <?php endif; ?>
                        </div>
                        
                        <form class="swp-entry-form" id="swp-entry-form-<?php echo esc_attr( $wheel_id ); ?>" 
                              data-participant-limit="<?php echo esc_attr($participant_limit); ?>"
                              data-current-count="<?php echo esc_attr($current_count); ?>">
                            
                            <!-- Alert Container (at top inside form) -->
                            <div class="swp-alert-container" id="swp-alert-<?php echo esc_attr( $wheel_id ); ?>" style="display: none;"></div>
                            
                            <!-- Participant Limit Message -->
                            <?php if ($is_limit_reached): ?>
                            <div class="swp-limit-reached-message">
                                <div class="swp-limit-icon">
                                    <span class="dashicons dashicons-warning"></span>
                                </div>
                                <div class="swp-limit-content">
                                    <h4><?php esc_html_e('Registration Full', 'spin-wheel'); ?></h4>
                                    <p><?php /* translators: %d: maximum number of participants */ printf(esc_html__('Sorry, this wheel has reached its maximum limit of %d participants.', 'spin-wheel'), (int) $participant_limit); ?></p>
                                    <div class="swp-limit-stats">
                                        <span class="swp-current-participants"><?php /* translators: %d: current number of participants */ printf(esc_html__('%d participants', 'spin-wheel'), (int) $current_count); ?></span>
                                        <span class="swp-limit-info"><?php /* translators: %d: maximum number of participants */ printf(esc_html__('Limit: %d', 'spin-wheel'), (int) $participant_limit); ?></span>
                                    </div>
                                </div>
                            </div>
                            <?php else: ?>
                            <!-- Participant Counter (when limit is set but not reached) -->
                            <?php if ($participant_limit > 0): ?>
                            <div class="swp-participant-counter">
                                <div class="swp-counter-info">
                                    <span class="swp-counter-label"><?php esc_html_e('Participants:', 'spin-wheel'); ?></span>
                                    <span class="swp-counter-current"><?php echo esc_html( $current_count ); ?></span>
                                    <span class="swp-counter-separator">/</span>
                                    <span class="swp-counter-limit"><?php echo esc_html( $participant_limit ); ?></span>
                                </div>
                                <div class="swp-counter-progress">
                                    <div class="swp-progress-bar">
                                        <div class="swp-progress-fill" style="width: <?php echo esc_attr( min(100, ($current_count / $participant_limit) * 100) ); ?>%"></div>
                                    </div>
                                </div>
                            </div>
                            <?php endif; ?>
                            <?php endif; ?>
                            
                            <?php if (!empty($form_settings['show_name'])) : ?>
                            <div class="swp-form-group">
                                <label for="swp-user-name-<?php echo esc_attr( $wheel_id ); ?>">
                                    <?php echo esc_html($form_settings['name_label'] ?? 'Your Name'); ?>
                                    <?php echo !empty($form_settings['require_name']) ? ' *' : ''; ?>
                                </label>
                                <input type="text" 
                                    id="swp-user-name-<?php echo esc_attr( $wheel_id ); ?>" 
                                    name="user_name" 
                                    class="swp-form-control" 
                                    <?php echo !empty($form_settings['require_name']) ? 'required' : ''; ?>>
                            </div>
                            <?php endif; ?>
                            
                            <?php if (!empty($form_settings['show_email'])) : ?>
                            <div class="swp-form-group">
                                <label for="swp-user-email-<?php echo esc_attr( $wheel_id ); ?>">
                                    <?php echo esc_html($form_settings['email_label'] ?? 'Your Email'); ?>
                                    <?php echo !empty($form_settings['require_email']) ? ' *' : ''; ?>
                                </label>
                                <input type="email" 
                                    id="swp-user-email-<?php echo esc_attr( $wheel_id ); ?>" 
                                    name="user_email" 
                                    class="swp-form-control" 
                                    <?php echo !empty($form_settings['require_email']) ? 'required' : ''; ?>>
                            </div>
                            <?php endif; ?>
                            
                            <?php if (SWP_Pro_Helper::is_feature_enabled('form_advanced') && !empty($form_settings['show_phone'])) : ?>
                            <div class="swp-form-group">
                                <label for="swp-user-phone-<?php echo esc_attr( $wheel_id ); ?>">
                                    <?php echo esc_html($form_settings['phone_label'] ?? 'Phone Number'); ?>
                                    <?php echo !empty($form_settings['require_phone']) ? '*' : ' (' . esc_html__('Optional', 'spin-wheel') . ')'; ?>
                                </label>
                                <input type="tel" 
                                    id="swp-user-phone-<?php echo esc_attr( $wheel_id ); ?>" 
                                    name="user_phone" 
                                    class="swp-form-control" 
                                    <?php echo !empty($form_settings['require_phone']) ? 'required' : ''; ?>>
                            </div>
                            <?php endif; ?>
                            
                            <?php if (!empty($form_settings['enable_otp'])) : ?>
                            <!-- OTP Verification Section -->
                            <div class="swp-otp-section">
                                
                                <?php if ($form_settings['otp_method'] === 'both') : ?>
                                <!-- OTP Method Selection -->
                                <div class="swp-otp-method-selector">
                                    <label class="swp-otp-label">
                                        <?php esc_html_e('Verify via:', 'spin-wheel'); ?>
                                    </label>
                                    <div class="swp-otp-methods">
                                        <label class="swp-otp-method-option">
                                            <input type="radio" name="otp_method" value="email" checked>
                                            <span class="swp-otp-method-btn">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                                    <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z"/>
                                                </svg>
                                                <?php esc_html_e('Email', 'spin-wheel'); ?>
                                            </span>
                                        </label>
                                        <label class="swp-otp-method-option">
                                            <input type="radio" name="otp_method" value="sms">
                                            <span class="swp-otp-method-btn">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                                    <path d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.745 1.745 0 0 1-1.657-.459L5.482 8.062a1.745 1.745 0 0 1-.46-1.657l.548-2.19a.678.678 0 0 0-.122-.58L3.654 1.328zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z"/>
                                                </svg>
                                                <?php esc_html_e('SMS', 'spin-wheel'); ?>
                                            </span>
                                        </label>
                                    </div>
                                </div>
                                <?php endif; ?>
                                
                                <!-- Send OTP Button -->
                                <div class="swp-otp-send-wrapper">
                                    <button type="button" class="swp-btn-send-otp">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
                                            <path d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576zm6.787-8.201L1.591 6.602l4.339 2.76z"/>
                                        </svg>
                                        <?php esc_html_e('Send Verification Code', 'spin-wheel'); ?>
                                    </button>
                                </div>
                                
                                <!-- OTP Input & Verify (hidden initially) -->
                                <div class="swp-otp-verify-wrapper" style="display: none;">
                                    <div class="swp-otp-input-group">
                                        <input type="text" 
                                               class="swp-otp-input" 
                                               placeholder="000000" 
                                               maxlength="6" 
                                               pattern="[0-9]{6}">
                                        <button type="button" class="swp-btn-verify-otp">
                                            <?php esc_html_e('Verify', 'spin-wheel'); ?>
                                        </button>
                                    </div>
                                    <div class="swp-otp-timer"></div>
                                    <button type="button" class="swp-btn-resend-otp" style="display: none;">
                                        <?php esc_html_e('Resend Code', 'spin-wheel'); ?>
                                    </button>
                                </div>
                                
                                <!-- OTP Status Messages -->
                                <div class="swp-otp-status"></div>
                                
                            </div>
                            <?php endif; ?>

                            <?php if (!empty($enable_utm_capture)) : ?>
                            <p class="swp-form-hint swp-utm-hint" style="font-size:12px;line-height:1.45;opacity:.88;margin:0 0 10px;">
                                <?php esc_html_e('Campaign parameters from the page address (such as utm_source) may be saved with your entry when you submit this form.', 'spin-wheel'); ?>
                            </p>
                            <?php endif; ?>
                            
                            <?php if (!empty($form_settings['enable_terms_checkbox'])) : ?>
                            <div class="swp-form-group swp-terms-group">
                                <label class="swp-terms-label">
                                    <input type="checkbox" name="swp_accept_terms" value="1" class="swp-accept-terms" required>
                                    <span class="swp-terms-text"><?php echo wp_kses_post($form_settings['terms_label'] ?? ''); ?></span>
                                </label>
                            </div>
                            <?php endif; ?>
                            
                            <!-- Submit Button -->
                            <?php if (!empty($form_settings['show_submit_button'])) : ?>
                                <div class="swp-form-group swp-submit-group">
                                    <button type="submit" class="swp-btn-submit">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814z"/>
                                        </svg>
                                        <span class="swp-btn-text"><?php echo esc_html($form_settings['button_text'] ?? 'SPIN NOW!'); ?></span>
                                        <span class="swp-btn-loader" style="display: none;">
                                            <svg class="swp-spinner" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                                <circle class="swp-spinner-track" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                                <path class="swp-spinner-fill" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                            </svg>
                                        </span>
                                    </button>
                                </div>
                            <?php endif; ?>
                        </form>
                        
                    </div>
                </div>
                
            </div> <!-- Close .swp-wheel-wrapper or .swp-wheel-wrapper-popup -->
            
            <?php if ($display_mode === 'popup') : ?>
         </div> <!-- Close .swp-modal-content -->
    <?php endif; ?>
                         
    <!-- Result Section (Overlay Modal) - Available for both inline and popup -->
    <div class="swp-result-section" id="swp-result-<?php echo esc_attr( $wheel_id ); ?>" style="display: none;">
        <div class="swp-result-content">
            <div class="swp-result-icon"></div>
            <h3 class="swp-result-title"></h3>
            <p class="swp-result-message"></p>
            <div class="swp-result-prize"></div>
            <div class="swp-participant-info"></div>
            <button type="button" class="swp-close-btn">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16">
                <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/>
            </svg>
            </button>
        </div>
    </div>
    
    <!-- Hidden Data -->
    <script type="application/json" class="swp-wheel-data">
    <?php
    echo wp_json_encode([
        'wheelId'   => $wheel_id,
        'wheelType' => $wheel_type,
        'prizes'    => $prizes,
        'settings'  => $settings,
        'styles'    => $styles,
        'formSettings' => $form_settings ?? [],
        'enableUtmCapture' => (bool) $enable_utm_capture,
    ]);
    ?>
    </script>
</div>

<!-- Confetti Canvas (if enabled) -->
<?php if (!empty($settings['enable_confetti'])) : ?>
<canvas id="swp-confetti-<?php echo esc_attr( $wheel_id ); ?>" class="swp-confetti-canvas"></canvas>
<?php endif; ?>
