<?php

/**
 * Provide a admin area view for the plugin help
 *
 * This file is used to markup the admin-facing aspects of the plugin.
 *
 * @link       https://mediahubster.in
 * @since      1.0.0
 *
 * @package    Subs_Sys
 * @subpackage Subs_Sys/admin/partials
 */

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

<div class="wrap">
	<h1><?php echo esc_html( get_admin_page_title() ); ?></h1>
	
	<!-- Navigation Tabs -->
	<div class="nav-tab-wrapper" style="margin-bottom: 20px;">
		<a href="#original-docs" class="nav-tab nav-tab-active" onclick="showTab('original-docs', this)"><?php esc_html_e( 'Original Documentation', 'subscription-system' ); ?></a>
		<a href="#comprehensive-guide" class="nav-tab" onclick="showTab('comprehensive-guide', this)"><?php esc_html_e( 'Comprehensive Guide', 'subscription-system' ); ?></a>
	</div>

	<!-- Original Documentation Tab -->
	<div id="original-docs" class="tab-content">
		<?php include plugin_dir_path( __FILE__ ) . 'subscription-system-help-display.php'; ?>
	</div>

	<!-- Comprehensive Guide Tab -->
	<div id="comprehensive-guide" class="tab-content" style="display: none;">
		<?php include plugin_dir_path( __FILE__ ) . 'help-support-display.php'; ?>
	</div>
</div>

<script>
function showTab(tabName, element) {
    // Hide all tab contents
    var tabContents = document.querySelectorAll('.tab-content');
    tabContents.forEach(function(content) {
        content.style.display = 'none';
    });
    
    // Remove active class from all tabs
    var tabs = document.querySelectorAll('.nav-tab');
    tabs.forEach(function(tab) {
        tab.classList.remove('nav-tab-active');
    });
    
    // Show selected tab content
    document.getElementById(tabName).style.display = 'block';
    
    // Add active class to clicked tab
    element.classList.add('nav-tab-active');
}
</script>

<style>
.tab-content {
    background: #fff;
    border: 1px solid #ccd0d4;
    border-top: none;
    padding: 20px;
    border-radius: 0 0 4px 4px;
}

.nav-tab-wrapper {
    border-bottom: 1px solid #ccd0d4;
}

.nav-tab {
    position: relative;
    display: inline-block;
    padding: 8px 12px;
    margin: 0;
    text-decoration: none;
    border: 1px solid #ccd0d4;
    border-bottom: none;
    background: #f1f1f1;
    color: #555;
    cursor: pointer;
}

.nav-tab:hover {
    background: #fff;
    color: #444;
}

.nav-tab-active {
    background: #fff !important;
    color: #000 !important;
    border-bottom: 1px solid #fff !important;
    margin-bottom: -1px;
}
</style> 