<?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-design-tabs">
     <div class="row">
         <div class="col-lg-3 col-md-4 col-sm-12">
             <div class="accordion nav-design-setting" id="accordionPanelsStayOpenExample">

                 <!-- Template -->
                 <div class="accordion-item">
                     <h2 class="accordion-header" id="headingTemplate">
                         <button class="accordion-button" type="button" data-bs-toggle="collapse"
                             data-bs-target="#collapseTemplate" aria-expanded="true" aria-controls="collapseTemplate">
                             Template
                         </button>
                     </h2>
                     <div id="collapseTemplate" class="accordion-collapse collapse show"
                         aria-labelledby="headingTemplate" data-bs-parent="#accordionPanelsStayOpenExample">
                         <div class="accordion-body">
                             <div class="row template-setting">

                                <?php foreach ( $webequipe_sww_spin_templates as $webequipe_sww_value => $webequipe_sww_img ) : ?>
                                    <div class="col-6 p-2 mb-2">
                                        <label class="template-option w-100">
                                            <input
                                                type="radio"
                                                name="template_setting"
                                                value="<?php echo esc_attr( $webequipe_sww_value ); ?>"
                                                <?php checked( $spin->template_setting, $webequipe_sww_value ); ?>
                                                hidden
                                            >
                                            <img
                                                src="<?php echo esc_url( $webequipe_sww_img ); ?>"
                                                alt="<?php echo esc_attr( $webequipe_sww_value ); ?>"
                                                class="img-fluid"
                                            >
                                        </label>
                                    </div>
                                <?php endforeach; ?>
                             </div>
                         </div>
                     </div>
                 </div>

                 <!-- Card Setting -->
                 <div class="accordion-item">
                     <h2 class="accordion-header" id="headingCardSetting">
                         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                             data-bs-target="#collapseCardSetting" aria-expanded="false"
                             aria-controls="collapseCardSetting">
                             Card Setting
                         </button>
                     </h2>
                     <div id="collapseCardSetting" class="accordion-collapse collapse"
                         aria-labelledby="headingCardSetting" data-bs-parent="#accordionPanelsStayOpenExample">
                         <div class="accordion-body">
                             <div class="mb-3">
                                 <label class="form-label" for="cardBgColor">Background Color</label>
                                 <input name="card_background" type="color" class="form-control form-control-color"
                                     id="cardBgColor" value="<?php echo esc_attr( $spin->card_background); ?>"
                                     title="Choose your color">
                             </div>
                             <div class="mb-3">
                                 <label class="form-label" for="cardColor">Font Color</label>
                                 <input name="card_color" type="color" class="form-control form-control-color"
                                     id="cardColor" value="<?php echo esc_attr( $spin->card_color); ?>"
                                     title="Choose your color">
                             </div>
                             <div class="mb-3">
                                <label class="form-label" for="wsww-card-radius">Border Radius</label>
                                 <div class="input-group mb-3">
                                    <input type="text" class="form-control" id="wsww-card-radius" name="card_boder_radius"
                                         value="<?php echo esc_attr( $spin->card_boder_radius); ?>">
                                     <span class="input-group-text">px</span>
                                 </div>
                             </div>
                             <div class="mb-3">
                                <label class="form-label" for="wsww-card-padding">Padding</label>
                                 <div class="input-group mb-3">
                                    <input type="text" class="form-control" id="wsww-card-padding" name="card_boder_padding"
                                         value="<?php echo esc_attr( $spin->card_boder_padding); ?>">
                                     <span class="input-group-text">px</span>
                                 </div>
                             </div>

                         </div>
                     </div>
                 </div>

                 <!-- Wheel Center -->
                 <div class="accordion-item">
                    <h2 class="accordion-header" id="headingWheelCenterSetting">
                         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                            data-bs-target="#collapseWheelCenterSetting" aria-expanded="false"
                            aria-controls="collapseWheelCenterSetting">
                             Wheel Center
                         </button>
                     </h2>
                    <div id="collapseWheelCenterSetting" class="accordion-collapse collapse"
                        aria-labelledby="headingWheelCenterSetting" data-bs-parent="#accordionPanelsStayOpenExample">
                         <div class="accordion-body">
                             <div class="mb-3">
                                <label class="form-label" for="wsww-wheel-center-bg-color">Background Color</label>
                                 <input name="wheel_center_background" type="color"
                                    class="form-control form-control-color" id="wsww-wheel-center-bg-color"
                                     value="<?php echo esc_attr( $spin->wheel_center_background); ?>"
                                     title="Choose your color">
                             </div>
                             <div class="mb-3">
                                <label class="form-label" for="wsww-wheel-center-border-color">Border Color</label>
                                 <input name="wheel_center_boder_color" type="color"
                                    class="form-control form-control-color" id="wsww-wheel-center-border-color"
                                     value="<?php echo esc_attr( $spin->wheel_center_boder_color); ?>"
                                     title="Choose your color">
                             </div>
                             <div class="mb-3">
                                <label class="form-label" for="wsww-wheel-center-border-width">Border Width</label>
                                 <div class="input-group mb-3">
                                    <input type="text" class="form-control" id="wsww-wheel-center-border-width" name="wheel_center_boder_width"
                                         value="<?php echo esc_attr( $spin->wheel_center_boder_width); ?>">
                                     <span class="input-group-text">px</span>
                                 </div>
                             </div>

                             <div class="mb-3">
                                 <label class="form-label">Center Image</label>
                                 <select name="wheel_center_image_icon" id="centerImageOption" class="form-select">
                                     <option value="dot"
                                         data-img="<?php echo esc_url($webequipe_sww_spin_plugin_url . 'assets/img/dot.png'); ?>"
                                         <?php selected($webequipe_sww_spin_wheel_center_image_icon, 'dot'); ?>>
                                         dot
                                     </option>
                                     <option value="star"
                                         data-img="<?php echo esc_url($webequipe_sww_spin_plugin_url . 'assets/img/star.png'); ?>"
                                         <?php selected($webequipe_sww_spin_wheel_center_image_icon, 'star'); ?>>
                                         star
                                     </option>
                                     <option value="flim"
                                         data-img="<?php echo esc_url($webequipe_sww_spin_plugin_url . 'assets/img/flim.png'); ?>"
                                         <?php selected($webequipe_sww_spin_wheel_center_image_icon, 'flim'); ?>>
                                         flim
                                     </option>
                                    <option value="custom"
                                        data-img="<?php echo esc_url(!empty($spin->custom_wheel_center_image_icon) ? $spin->custom_wheel_center_image_icon : ($webequipe_sww_spin_plugin_url . 'assets/img/cbl_logo.png')); ?>"
                                         <?php selected($webequipe_sww_spin_wheel_center_image_icon, 'custom'); ?>>
                                         Custom Image
                                     </option>
                                 </select>
                                 <?php
                                 // Use a unique nonce field name to avoid clashing with other nonces in the same form
                                 wp_nonce_field( 'wsww_upload_wheel_image', 'wsww_upload_wheel_image_nonce' );
                                 ?>
                             </div>

                             <!-- Image Preview -->
                             <div class="mb-3" id="imagePreviewWrapper" style="display:block;">
                                <img id="imagePreview" src="<?php
                                       echo esc_url(
                                      $webequipe_sww_spin_wheel_center_image_icon === 'custom'
                                               ? (!empty($spin->custom_wheel_center_image_icon) ? $spin->custom_wheel_center_image_icon : ($webequipe_sww_spin_plugin_url . 'assets/img/cbl_logo.png'))
                                               : (
                                                   $webequipe_sww_spin_wheel_center_image_icon === 'dot'
                                                       ? $webequipe_sww_spin_plugin_url . 'assets/img/dot.png'
                                                       : (
                                                           $webequipe_sww_spin_wheel_center_image_icon === 'star'
                                                               ? $webequipe_sww_spin_plugin_url . 'assets/img/star.png'
                                                               : (
                                                                   $webequipe_sww_spin_wheel_center_image_icon === 'flim'
                                                                       ? $webequipe_sww_spin_plugin_url . 'assets/img/flim.png'
                                                                       : ($webequipe_sww_spin_plugin_url . 'assets/img/cbl_logo.png')
                                                               )
                                                       )
                                               )
                                       );

                                   ?>" alt="Preview" class="img-fluid" style="max-width:200px;border:2px solid #ddd;border-radius:8px;">
                             </div>

                             <!-- Custom Upload -->
                                 <div class="mb-3" id="customImageUpload"
                                 style="display: <?php echo ($webequipe_sww_spin_wheel_center_image_icon === 'custom') ? 'block' : 'none'; ?>;">
                                 <label class="form-label">Upload Custom Image</label>
                                 <input type="file" name="custom_wheel_center_image_icon" class="form-control"
                                     accept="image/*" onchange="previewCustomImage(event)">
                                 <input type="hidden" name="existing_custom_image" value="<?php echo esc_attr($spin->custom_wheel_center_image_icon ?? ''); ?>">
                             </div>




                         </div>
                     </div>
                 </div>

                 <!-- Wheel Stroke Setting -->
                 <div class="accordion-item">
                     <h2 class="accordion-header" id="headingWheelStroke">
                         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                             data-bs-target="#collapseWheelStroke" aria-expanded="false"
                             aria-controls="collapseWheelStroke">
                             Wheel Stroke Setting
                         </button>
                     </h2>
                     <div id="collapseWheelStroke" class="accordion-collapse collapse"
                         aria-labelledby="headingWheelStroke" data-bs-parent="#accordionPanelsStayOpenExample">
                         <div class="accordion-body">
                             <div class="mb-3">
                                 <label class="form-label" for="wheelBorderColor">Border Color</label>
                                 <input type="color" name="wheel_stroke_border_color"
                                     class="form-control form-control-color" id="wheelBorderColor"
                                     value="<?php echo esc_attr( $spin->wheel_stroke_border_color); ?>"
                                     title="Choose your color">
                             </div>
                             <div class="mb-3">
                                 <label class="form-label" for="wheelBorderSize">Border Size</label>
                                 <div class="input-group mb-3">
                                    <input type="text" class="form-control" id="wheelBorderSize" name="wheel_stroke_border_size"
                                         value="<?php echo esc_attr( $spin->wheel_stroke_border_size); ?>">
                                     <span class="input-group-text">px</span>
                                 </div>
                             </div>
                             <div class="mb-3">
                                 <label class="form-label" for="wheelFontSize">Font Size</label>
                                 <div class="input-group mb-3">
                                    <input type="number" class="form-control" id="wheelFontSize" name="wheel_stroke_font_size"
                                         value="<?php echo esc_attr( $spin->wheel_stroke_font_size); ?>" step="1" min="5" max="90">
                                     <span class="input-group-text">px</span>
                                 </div>
                             </div>
                             <div class="mb-3">
                                 <label class="form-label" for="wheelFontFamily">Font Family</label>
                                 <select id="wheelFontFamily" class="form-select" name="wheel_stroke_font_family">
                                     <option value="inherited"
                                         <?php echo $webequipe_sww_spin_wheel_stroke_font_family === 'inherited' ? 'selected' : ''; ?>>
                                         System Default</option>
                                     <option value="inter"
                                         <?php echo $webequipe_sww_spin_wheel_stroke_font_family === 'inter' ? 'selected' : ''; ?>>Inter
                                     </option>
                                     <option value="roboto"
                                         <?php echo $webequipe_sww_spin_wheel_stroke_font_family === 'roboto' ? 'selected' : ''; ?>>Roboto
                                     </option>
                                     <option value="poppins"
                                         <?php echo $webequipe_sww_spin_wheel_stroke_font_family === 'poppins' ? 'selected' : ''; ?>>
                                         Poppins</option>
                                 </select>
                             </div>
                             <div class="mb-3">
                                 <label class="form-label" for="wheelFontStyle">Font Style</label>
                                 <select name="wheel_stroke_font_style" id="wheelFontStyle" class="form-select">
                                     <option value="normal"
                                         <?php echo $webequipe_sww_spin_wheel_stroke_font_style === 'normal' ? 'selected' : ''; ?>>Normal
                                     </option>
                                     <option value="italic"
                                         <?php echo $webequipe_sww_spin_wheel_stroke_font_style === 'italic' ? 'selected' : ''; ?>>Italic
                                     </option>
                                     <option value="bold"
                                         <?php echo $webequipe_sww_spin_wheel_stroke_font_style === 'bold' ? 'selected' : ''; ?>>Bold
                                     </option>
                                 </select>
                             </div>
                         </div>
                     </div>
                 </div>

                 <!-- Form Design Setting -->
                 <div class="accordion-item">
                     <h2 class="accordion-header" id="headingFormDesign">
                         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                             data-bs-target="#collapseFormDesign" aria-expanded="false"
                             aria-controls="collapseFormDesign">
                             Form Design Setting
                         </button>
                     </h2>
                     <div id="collapseFormDesign" class="accordion-collapse collapse"
                         aria-labelledby="headingFormDesign" data-bs-parent="#accordionPanelsStayOpenExample">
                         <div class="accordion-body">
                             <div class="mb-3">
                                 <label class="form-label" for="hdrAlign">Header/Details Align</label>
                                 <select name="from_design_alinment" id="hdrAlign" class="form-select">
                                     <option value="left"
                                         <?php echo $webequipe_sww_spin_from_design_alignment === 'left' ? 'selected' : ''; ?>>Left</option>
                                     <option value="center"
                                         <?php echo $webequipe_sww_spin_from_design_alignment === 'center' ? 'selected' : ''; ?>>Center
                                     </option>
                                     <option value="right"
                                         <?php echo $webequipe_sww_spin_from_design_alignment === 'right' ? 'selected' : ''; ?>>Right
                                     </option>
                                 </select>
                             </div>
                             <div class="mb-3">
                                <label class="form-label" for="wsww-form-button-text">Button Text</label>
                                <input name="from_button_text" type="text" class="form-control" id="wsww-form-button-text"
                                     value="<?php echo esc_attr( $spin->from_button_text); ?>">
                             </div>
                             <div class="mb-3">
                                <label class="form-label" for="wsww-form-button-color">Button Color</label>
                                 <input name="from_button_color" type="color" class="form-control form-control-color"
                                    id="wsww-form-button-color" value="<?php echo esc_attr($spin->from_button_color); ?>"
                                     title="Choose your color">
                             </div>
                             <div class="mb-3">
                                <label class="form-label" for="wsww-form-button-bg-color">Background Color</label>
                                 <input name="from_button_background_color" type="color"
                                    class="form-control form-control-color" id="wsww-form-button-bg-color"
                                     value="<?php echo esc_attr($spin->from_button_background_color); ?>"
                                     title="Choose your color">
                             </div>
                         </div>
                     </div>
                 </div>

                 <!-- Initial Button Setting -->
                 <div class="accordion-item" id="initial_button_section">
                    <h2 class="accordion-header" id="headingInitialButtonSetting">
                         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                             data-bs-target="#InitialButtonSetting" aria-expanded="false"
                            aria-controls="InitialButtonSetting">
                             Initial Button Setting
                         </button>
                     </h2>
                     <div id="InitialButtonSetting" class="accordion-collapse collapse"
                        aria-labelledby="headingInitialButtonSetting" data-bs-parent="#accordionPanelsStayOpenExample">
                         <div class="accordion-body">
                             <div class="mb-3">
                                <label class="form-label" for="wsww-initial-button-text">Button Text</label>
                                <input name="initial_button_text" type="text" class="form-control" id="wsww-initial-button-text"
                                     value="<?php echo esc_attr( $spin->initial_button_text); ?>">
                             </div>
                             <div class="mb-3">
                                <label class="form-label" for="wsww-initial-button-color">Button Color</label>
                                 <input name="initial_button_color" type="color" class="form-control form-control-color"
                                    id="wsww-initial-button-color" value="<?php echo esc_attr($spin->initial_button_color); ?>"
                                     title="Choose your color">
                             </div>
                             <div class="mb-3">
                                <label class="form-label" for="wsww-initial-button-bg-color">Background Color</label>
                                 <input name="initial_button_background_color" type="color"
                                    class="form-control form-control-color" id="wsww-initial-button-bg-color"
                                     value="<?php echo esc_attr($spin->initial_button_background_color); ?>"
                                     title="Choose your color">
                             </div>
                         </div>
                     </div>
                 </div>

             </div>
         </div>




         <div class="col-lg-9 col-md-8 col-sm-12">
            <div class="mb-3">
               <button type="button" id="preview-spin-btn" class="btn btn-outline-primary wsww-tab-secondary-btn">
                    <i class="bi bi-arrow-clockwise"></i> <span id="preview-btn-text">Update Preview</span>
                </button>
                <small class="text-muted d-block mt-1">Click to see the preview with recent changes.</small>
            </div>
            <div id="design_preview" class="wsww-design-preview">
                <div class="card-body text-center text-muted" style="padding: 60px 20px;">
                    <div class="spinner-border text-primary" role="status" style="margin-bottom: 15px;">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <p class="mt-3 mb-0">Loading preview...</p>
                </div>
            </div>
         </div>
     </div>
 </div>


