<?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
 */

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

<!-- This file should primarily consist of HTML with a little bit of PHP. -->

<?php
// Display floating success message passed via query string.
$wsww_notice_message = '';
if ( isset( $_GET['spin-updated'] ) || isset( $_GET['spin-created'] ) ) {
	$webequipe_sww_nonce = isset( $_GET['_wpnonce'] ) ? sanitize_text_field( wp_unslash( $_GET['_wpnonce'] ) ) : '';
	if ( wp_verify_nonce( $webequipe_sww_nonce, 'wsww_spin_action' ) ) {
		$webequipe_sww_spin_created = isset( $_GET['spin-created'] ) ? sanitize_text_field( wp_unslash( $_GET['spin-created'] ) ) : 'false';
		$webequipe_sww_spin_updated = isset( $_GET['spin-updated'] ) ? sanitize_text_field( wp_unslash( $_GET['spin-updated'] ) ) : 'false';

		if ( 'true' === $webequipe_sww_spin_created ) {
			$wsww_notice_message = __( 'Wheel has been created successfully!', 'webequipe-spin-win-wheel' );
		} elseif ( 'true' === $webequipe_sww_spin_updated ) {
			$wsww_notice_message = __( 'Wheel has been updated successfully!', 'webequipe-spin-win-wheel' );
		}
	}
}
if ( '' !== $wsww_notice_message ) :
	?>
	<div class="notice notice-success is-dismissible wsww-floating-notice" role="status" aria-live="polite" data-auto-hide="1">
		<p><?php echo esc_html( $wsww_notice_message ); ?></p>
	</div>
	<?php
endif;
?>

<div class="wrap section-continer">
    <form action="" method="post" enctype="multipart/form-data">
        <div class="tdw-button-row d-flex justify-content-between align-items-center">
            <div class="wsww-button-inline">
                <h1 class="wp-heading-inline"><?php esc_html_e( 'Edit Wheel', 'webequipe-spin-win-wheel' ); ?></h1>
                <div class="shortcode-group d-flex align-items-center gap-2">
                    <input type="text" class="shortcode-clipboard form-control"
                           value='[wsww-spin id="<?php echo esc_attr( $spin->id ); ?>"]' readonly />
                    <button type="button"
                            class="btn btn-outline-secondary btn-sm wsww-copy-shortcode"
                            title="<?php echo esc_attr__( 'Copy shortcode', 'webequipe-spin-win-wheel' ); ?>"
                            aria-label="<?php echo esc_attr__( 'Copy shortcode', 'webequipe-spin-win-wheel' ); ?>">
                        <span class="dashicons dashicons-clipboard"></span>
                    </button>
                </div>
            </div>
            <div class="wsww-create-actions">
                <a href="<?php echo esc_url( admin_url( 'admin.php?page=wsww-spin' ) ); ?>" class="wsww-back-link">
                    <span class="dashicons dashicons-arrow-left-alt2" aria-hidden="true"></span>
                    <span class="wsww-back-link-text"><?php esc_html_e( 'Back to All Wheel', 'webequipe-spin-win-wheel' ); ?></span>
                </a>
                <button type="submit"
                        name="submit_spin_settings"
                        id="submit_spin_settings"
                        class="submit_spin_settings btn wsww-button-color">
                    <?php esc_html_e( 'Save Changes', 'webequipe-spin-win-wheel' ); ?>
                </button>
            </div>
        </div>

        <!-- Navigation Tabs -->
        <nav class="mt-4 tab-navigation-section">
            <div class="nav nav-tabs tab-navigation-inner" role="tablist">
                <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#General" type="button" role="tab">
                    <i class="bi bi-gear me-2"></i>General
                </button>
                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#Items" type="button" role="tab">
                    <i class="bi bi-palette me-2"></i>Items
                </button>
                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#Design" type="button" role="tab">
                    <i class="bi bi-ticket me-2"></i>Design
                </button>
                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#Finish" type="button" role="tab">
                    <i class="bi bi-file-text me-2"></i>Finish
                </button>
            </div>
        </nav>
    

        <div class="tab-content">
            <div class="tab-pane fade show active" id="General" role="tabpanel">
                <?php include __DIR__ . '/tabs/general.php'; ?>
            </div>

            <!-- Other tab panels would go here -->
            <div class="tab-pane fade" id="Items" role="tabpanel">
                <div class="p-4">
                    <?php include __DIR__ . '/tabs/items.php'; ?>
                </div>
            </div>

            <div class="tab-pane fade" id="Design" role="tabpanel">
                <div class="p-4">
                    <?php include __DIR__ . '/tabs/design.php'; ?>
                </div>
            </div>

            <div class="tab-pane fade" id="Finish" role="tabpanel">
                <div class="p-4">
                    <?php include __DIR__ . '/tabs/finish.php'; ?>
                </div>
            </div>
        </div>
        <div class="tdw-buttom-continer p-4">
            <input type="hidden" name="active_tab" id="active_tab" value="General">
            <input type="hidden" name="id" value="<?php echo esc_attr( $spin->id ); ?>">
            <?php wp_nonce_field( 'new-spin' ); ?>
            <button type="submit" name="submit_spin_settings" id="submit_spin_settings" class="submit_spin_settings btn wsww-button-color">Save Changes</button>
        </div>
    </form>
</div>

<?php
// Add JavaScript to restore active tab and track tab changes.
if ( class_exists( 'Webequipe_Spin_Win_Wheel_Admin' ) ) {
	ob_start();
	?>
	(function() {
		document.addEventListener('DOMContentLoaded', function() {
			// Map tab values to tab IDs
			var tabMap = {
				'General': 'General',
				'Items': 'Items',
				'Design': 'Design',
				'Finish': 'Finish',
				'general-tab': 'General',
				'items-tab': 'Items',
				'design-tab': 'Design',
				'finish-tab': 'Finish',
				'form-tab': 'General',
				'layout-settings-tab': 'General'
			};
			
			// Get active tab from URL parameter
			var urlParams = new URLSearchParams(window.location.search);
			var activeTabParam = urlParams.get('active_tab') || '';
			var tabIdToShow = tabMap[activeTabParam] || 'General';
			
			// Find and activate the tab
			var tabButton = document.querySelector('button[data-bs-target="#' + tabIdToShow + '"]');
			var tabPane = document.getElementById(tabIdToShow);
			
			if (tabButton && tabPane) {
				// Remove active class from all tabs
				document.querySelectorAll('.nav-link').forEach(function(btn) {
					btn.classList.remove('active');
				});
				document.querySelectorAll('.tab-pane').forEach(function(pane) {
					pane.classList.remove('show', 'active');
				});
				
				// Activate the selected tab
				tabButton.classList.add('active');
				tabPane.classList.add('show', 'active');
				
				// Update hidden field
				var hiddenField = document.getElementById('active_tab');
				if (hiddenField) {
					hiddenField.value = tabIdToShow;
				}
			}
			
			// Track tab changes and update hidden field
			document.querySelectorAll('.nav-link[data-bs-toggle="tab"]').forEach(function(btn) {
				btn.addEventListener('shown.bs.tab', function(e) {
					var targetId = e.target.getAttribute('data-bs-target');
					if (targetId) {
						var tabId = targetId.replace('#', '');
						var hiddenField = document.getElementById('active_tab');
						if (hiddenField) {
							hiddenField.value = tabId;
						}
					}
				});
			});

			// Auto-hide floating success notice.
			var floatingNotice = document.querySelector('.wsww-floating-notice[data-auto-hide="1"]');
			if (floatingNotice) {
				// Ensure notice is detached from layout flow and rendered as top-center toast.
				if (document.body && floatingNotice.parentNode !== document.body) {
					document.body.appendChild(floatingNotice);
				}

				window.setTimeout(function() {
					floatingNotice.classList.add('wsww-notice-fadeout');
					window.setTimeout(function() {
						if (floatingNotice && floatingNotice.parentNode) {
							floatingNotice.parentNode.removeChild(floatingNotice);
						}
					}, 350);
				}, 3000);
			}
		});
	})();
	<?php
	$webequipe_sww_tab_script = ob_get_clean();
	Webequipe_Spin_Win_Wheel_Admin::add_admin_inline_script_content( $webequipe_sww_tab_script );
}
?>
