<?php

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

/**
 * Provide a admin area view for the plugin
 *
 * This file is used to markup the admin-facing aspects of the plugin.
 *
 * @link       https://webequipe.com
 * @since      1.0.0
 *
 * @package    Webequipe_Spin_Win_Wheel
 * @subpackage Webequipe_Spin_Win_Wheel/admin/partials/tabs
 */

// If this file is called directly, abort.
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

require __DIR__ . '/data-process.php'; ?>
<div class="wsww-item-tabs">
    <div class="table-responsive">
                <table class="table table-borderless mb-0 wsww-spin-table">
                    <thead class="bg-light">
                        <tr>
                            <th class="fw-semibold text-dark ps-3 w-10">Win?</th>
                            <th class="fw-semibold text-dark w-25">Label</th>
                            <th class="fw-semibold text-dark w-25">Value</th>
                            <th class="fw-semibold text-dark ps-3 w-20">Winning Probability (%)</th>
                            <th class="fw-semibold text-dark w-5 wsww-color-col-header">BG Color</th>
                            <th class="fw-semibold text-dark w-5 wsww-color-col-header">Text Color</th>
                            <th class="fw-semibold text-dark pe-3 w-5 wsww-action-col-header">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php if (!empty($webequipe_sww_spin_spins_items) && is_array($webequipe_sww_spin_spins_items)): ?>
                            <?php foreach ($webequipe_sww_spin_spins_items as $webequipe_sww_index => $webequipe_sww_item): ?>


                                <tr>
                                    <td class="ps-3 w-10">
                                        <input type="hidden" name="spins[<?php echo esc_attr($webequipe_sww_index + 1); ?>][spin_item_unique_id]" value="<?php echo esc_attr( isset( $webequipe_sww_item['spin_item_unique_id'] ) ? (string) $webequipe_sww_item['spin_item_unique_id'] : '' ); ?>">
                                        <select class="form-select"
                                            name="spins[<?php echo esc_attr($webequipe_sww_index + 1); ?>][is_win]">
                                            <option value="yes" <?php selected($webequipe_sww_item['is_win'] ?? '', 'yes'); ?>>Yes</option>
                                            <option value="no" <?php selected($webequipe_sww_item['is_win'] ?? '', 'no'); ?>>
                                                No</option>
                                        </select>
                                    </td>

                                    <td class="w-25">
                                        <input type="text" class="form-control"
                                            name="spins[<?php echo esc_attr($webequipe_sww_index + 1); ?>][spin_label]"
                                            value="<?php echo esc_attr(webequipe_sww_normalize_spin_text($webequipe_sww_item['spin_label'] ?? '')); ?>">
                                    </td>

                                    <td class="w-25">
                                        <input type="text" class="form-control"
                                            name="spins[<?php echo esc_attr($webequipe_sww_index + 1); ?>][spin_value]"
                                            value="<?php echo esc_attr(webequipe_sww_normalize_spin_text($webequipe_sww_item['spin_value'] ?? '')); ?>">
                                    </td>

                                    <td class="ps-3 w-20">
                                        <input type="number" min="0" max="100" step="1" class="form-control"
                                            name="spins[<?php echo esc_attr($webequipe_sww_index + 1); ?>][spin_probability]"
                                            value="<?php echo esc_attr($webequipe_sww_item['spin_probability'] ?? ''); ?>"
                                            data-name="spin_probability">
                                    </td>

                                    <td class="w-5 wsww-color-col-cell">
                                        <input type="color" class="form-control form-control-color"
                                            name="spins[<?php echo esc_attr($webequipe_sww_index + 1); ?>][spin_bgcolor]"
                                            value="<?php echo esc_attr(webequipe_sww_normalize_hex_for_color_input($webequipe_sww_item['spin_bgcolor'] ?? '')); ?>">
                                    </td>

                                    <td class="w-5 wsww-color-col-cell">
                                        <input type="color" class="form-control form-control-color"
                                            name="spins[<?php echo esc_attr($webequipe_sww_index + 1); ?>][spin_textcolor]"
                                            value="<?php echo esc_attr(webequipe_sww_normalize_hex_for_color_input($webequipe_sww_item['spin_textcolor'] ?? '')); ?>">
                                    </td>

                                    <td class="pe-3 w-5 wsww-action-col-cell">
                                        <button type="button" class="btn-delete" data-bs-toggle="tooltip" title="Delete row" aria-label="Delete row">
                                            <span class="dashicons dashicons-trash" aria-hidden="true"></span>
                                        </button>
                                    </td>
                                </tr>
                            <?php endforeach; ?>
                        <?php else: ?>
                            <!-- Default empty row if no spins exist -->
                            <tr>
                                <td class="ps-3 w-10">
                                    <input type="hidden" name="spins[1][spin_item_unique_id]" value="">
                                    <select class="form-select" name="spins[1][is_win]">
                                        <option value="yes">Yes</option>
                                        <option value="no">No</option>
                                    </select>
                                </td>

                                <td class="w-25">
                                    <input type="text" class="form-control" name="spins[1][spin_label]" value="">
                                </td>
                                <td class="w-25">
                                    <input type="text" class="form-control" name="spins[1][spin_value]" value="">
                                </td>
                                <td class="ps-3 w-20">
                                    <input type="number" min="0" max="100" step="1" class="form-control" name="spins[1][spin_probability]" value=""
                                        data-name="spin_probability">
                                </td>
                                <td class="w-5 wsww-color-col-cell">
                                    <input type="color" class="form-control form-control-color"
                                        name="spins[1][spin_bgcolor]" value="#ffffff">
                                </td>
                                <td class="w-5 wsww-color-col-cell">
                                    <input type="color" class="form-control form-control-color"
                                        name="spins[1][spin_textcolor]" value="#000000">
                                </td>
                                <td class="pe-3 w-5 wsww-action-col-cell">
                                    <button type="button" class="btn-delete" title="Delete row" aria-label="Delete row">
                                        <span class="dashicons dashicons-trash" aria-hidden="true"></span>
                                    </button>
                                </td>
                            </tr>
                        <?php endif; ?>

                    </tbody>
                    <tfoot>
                        <tr>
                            <td class="ps-3 w-10"></td>
                            <td class="w-25"></td>
                            <td class="w-25">
                                <div class="wsww-probability-summary">
                                    <span class="wsww-probability-label">Total Probability</span>
                                    <span class="wsww-probability-value"><span id="probability-total-value">0</span>/100</span>
                                </div>
                            </td>
                            <td class="ps-3 w-20">
                                <div id="probability-total-container" class="wsww-probability-meter" aria-live="polite">
                                    <div class="wsww-probability-progress-track">
                                        <div id="probability-progress-bar" class="wsww-probability-progress-fill"></div>
                                    </div>
                                    <span id="probability-progress-message" class="wsww-probability-progress-message"></span>
                                </div>
                            </td>
                            <td class="w-5 wsww-color-col-cell"></td>
                            <td class="w-5 wsww-color-col-cell"></td>
                            <td class="pe-3 w-5 wsww-action-col-cell"></td>
                        </tr>
                    </tfoot>
                </table>
                <div class="wsww-items-action-bar">
                    <button type="button" class="btn btn-outline-primary wsww-tab-secondary-btn btn-add-spin-row" id="add-spin-td-row">
                        <i class="bi bi-plus"></i> Add New Row
                    </button>

                    <div class="wsww-template-picker">
                        <span class="wsww-template-picker-label">Choose Template</span>
                        <button type="button" id="btn-theme-1" class="btn wsww-theme-swatch wsww-theme-swatch-1" aria-label="Template 1"></button>
                        <button type="button" id="btn-theme-2" class="btn wsww-theme-swatch wsww-theme-swatch-2" aria-label="Template 2"></button>
                        <button type="button" id="btn-theme-3" class="btn wsww-theme-swatch wsww-theme-swatch-3" aria-label="Template 3"></button>
                        <button type="button" id="btn-theme-4" class="btn wsww-theme-swatch wsww-theme-swatch-4" aria-label="Template 4"></button>
                        <button type="button" id="btn-theme-5" class="btn wsww-theme-swatch wsww-theme-swatch-5" aria-label="Template 5"></button>
                        <button type="button" id="btn-theme-6" class="btn wsww-theme-swatch wsww-theme-swatch-6" aria-label="Template 6"></button>
                        <button type="button" id="btn-theme-7" class="btn wsww-theme-swatch wsww-theme-swatch-7" aria-label="Template 7"></button>
                        <button type="button" id="btn-theme-8" class="btn wsww-theme-swatch wsww-theme-swatch-8" aria-label="Template 8"></button>
                    </div>
                </div>


            </div>

</div>
