<?php
/**
 * Sifency Addons Documentation & Help Center
 * 
 * Provides comprehensive documentation, feature guides, and FAQ for all plugin functionality.
 * 
 * @package Sifency_Addons
 * @subpackage Admin
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

class Sifency_Addons_Documentation {

	/**
	 * Render the documentation page
	 */
	public static function render_page() {
		?>
		<div class="sifency-documentation-wrapper">
			<div class="documentation-container">
				<!-- Header -->
				<div class="sifency-doc-header">
					<h1><?php esc_html_e( 'Sifency Addons Documentation & Help', 'sifency-addons' ); ?></h1>
					<p class="subtitle"><?php esc_html_e( 'Complete guides, tutorials, and FAQs for all plugin features', 'sifency-addons' ); ?></p>
				</div>

				<!-- Navigation Tabs -->
				<div class="doc-tabs-nav">
					<button class="doc-tab-btn active" data-tab="getting-started">
						<?php esc_html_e( 'Getting Started', 'sifency-addons' ); ?>
					</button>
					<button class="doc-tab-btn" data-tab="widgets-guide">
						<?php esc_html_e( 'Widgets Guide', 'sifency-addons' ); ?>
					</button>
					<button class="doc-tab-btn" data-tab="cpt-modules">
						<?php esc_html_e( 'CPT Modules', 'sifency-addons' ); ?>
					</button>
					<button class="doc-tab-btn" data-tab="theme-builder">
						<?php esc_html_e( 'Theme Builder', 'sifency-addons' ); ?>
					</button>
					<button class="doc-tab-btn" data-tab="faq">
						<?php esc_html_e( 'FAQ', 'sifency-addons' ); ?>
					</button>
				</div>

				<!-- Tab Content -->
				<div class="doc-tabs-content">

					<!-- Getting Started Tab -->
					<div class="doc-tab-pane active" id="getting-started">
						<h2><?php esc_html_e( 'Getting Started with Sifency Addons', 'sifency-addons' ); ?></h2>
						
						<div class="doc-section">
							<h3><?php esc_html_e( '1. Installation & Activation', 'sifency-addons' ); ?></h3>
							<ul>
								<li><?php esc_html_e( 'Upload the plugin ZIP file through WordPress Plugins > Add New', 'sifency-addons' ); ?></li>
								<li><?php esc_html_e( 'Click "Activate Plugin" to enable Sifency Addons', 'sifency-addons' ); ?></li>
								<li><?php esc_html_e( 'Ensure Elementor is installed and activated for widgets to work', 'sifency-addons' ); ?></li>
							</ul>
						</div>

						<div class="doc-section">
							<h3><?php esc_html_e( '2. Accessing Widgets in Elementor', 'sifency-addons' ); ?></h3>
							<ul>
								<li><?php esc_html_e( 'Open any page in Elementor editor', 'sifency-addons' ); ?></li>
								<li><?php esc_html_e( 'Look for "Sifency Addons" category in the widgets panel', 'sifency-addons' ); ?></li>
								<li><?php esc_html_e( 'Drag any widget onto your page to use it', 'sifency-addons' ); ?></li>
								<li><?php esc_html_e( 'Customize styling in the widget\'s Style tab', 'sifency-addons' ); ?></li>
							</ul>
						</div>

						<div class="doc-section">
							<h3><?php esc_html_e( '3. Key Features Overview', 'sifency-addons' ); ?></h3>
							<table class="doc-features-table">
								<tr>
									<td><strong><?php esc_html_e( '90+ Widgets', 'sifency-addons' ); ?></strong></td>
									<td><?php esc_html_e( 'Pre-built UI elements for every design need', 'sifency-addons' ); ?></td>
								</tr>
								<tr>
									<td><strong><?php esc_html_e( 'CPT Modules', 'sifency-addons' ); ?></strong></td>
									<td><?php esc_html_e( 'Custom post types for Team, Services, Portfolio, Events, etc.', 'sifency-addons' ); ?></td>
								</tr>
								<tr>
									<td><strong><?php esc_html_e( 'Theme Builder', 'sifency-addons' ); ?></strong></td>
									<td><?php esc_html_e( 'Create dynamic headers, footers, and custom templates', 'sifency-addons' ); ?></td>
								</tr>
								<tr>
									<td><strong><?php esc_html_e( 'WooCommerce Ready', 'sifency-addons' ); ?></strong></td>
									<td><?php esc_html_e( '17+ widgets for product pages and shopping experience', 'sifency-addons' ); ?></td>
								</tr>
							</table>
						</div>
					</div>

					<!-- Widgets Guide Tab -->
					<div class="doc-tab-pane" id="widgets-guide">
						<h2><?php esc_html_e( 'Widgets Guide', 'sifency-addons' ); ?></h2>
						
						<div class="doc-section">
							<h3><?php esc_html_e( 'Widget Categories', 'sifency-addons' ); ?></h3>
							
							<div class="widgets-list">
								<div class="widget-category">
									<h4><?php esc_html_e( 'Component Widgets (14)', 'sifency-addons' ); ?></h4>
									<p><?php esc_html_e( 'Basic UI building blocks for content', 'sifency-addons' ); ?></p>
									<ul>
										<li><?php esc_html_e( 'Title, Image, Button, Icon Box, Icon List', 'sifency-addons' ); ?></li>
										<li><?php esc_html_e( 'Accordion, Blockquote, Progress Bar, Fun Fact', 'sifency-addons' ); ?></li>
										<li><?php esc_html_e( 'Nested Slider, Marquee, Circle Text, Social Icons', 'sifency-addons' ); ?></li>
									</ul>
								</div>

								<div class="widget-category">
									<h4><?php esc_html_e( 'Loop / Grid Widgets (9)', 'sifency-addons' ); ?></h4>
									<p><?php esc_html_e( 'Display post types in grids and sliders', 'sifency-addons' ); ?></p>
									<ul>
										<li><?php esc_html_e( 'Blog, Projects, Services, Team, Testimonials', 'sifency-addons' ); ?></li>
										<li><?php esc_html_e( 'Clients, Awards, Career, Events', 'sifency-addons' ); ?></li>
									</ul>
								</div>

								<div class="widget-category">
									<h4><?php esc_html_e( 'Post / Page Widgets (9)', 'sifency-addons' ); ?></h4>
									<p><?php esc_html_e( 'Dynamic content for single posts', 'sifency-addons' ); ?></p>
									<ul>
										<li><?php esc_html_e( 'Post Title, Featured Image, Post Content, Meta', 'sifency-addons' ); ?></li>
										<li><?php esc_html_e( 'Author Box, Comments, Navigation', 'sifency-addons' ); ?></li>
									</ul>
								</div>

								<div class="widget-category">
									<h4><?php esc_html_e( 'WooCommerce Widgets (17)', 'sifency-addons' ); ?></h4>
									<p><?php esc_html_e( 'Complete product page and shop solutions', 'sifency-addons' ); ?></p>
									<ul>
										<li><?php esc_html_e( 'Products Grid, Slider, Product Image, Price, Rating', 'sifency-addons' ); ?></li>
										<li><?php esc_html_e( 'Add to Cart, Mini Cart, Checkout, Wishlist', 'sifency-addons' ); ?></li>
									</ul>
								</div>
							</div>
						</div>

						<div class="doc-section">
							<h3><?php esc_html_e( 'Widget Tips & Tricks', 'sifency-addons' ); ?></h3>
							<ul>
								<li><strong><?php esc_html_e( 'Responsive Design:', 'sifency-addons' ); ?></strong> <?php esc_html_e( 'Most widgets have responsive controls for mobile/tablet/desktop', 'sifency-addons' ); ?></li>
								<li><strong><?php esc_html_e( 'Styling:', 'sifency-addons' ); ?></strong> <?php esc_html_e( 'Use the Style tab for colors, typography, spacing, and borders', 'sifency-addons' ); ?></li>
								<li><strong><?php esc_html_e( 'Advanced:', 'sifency-addons' ); ?></strong> <?php esc_html_e( 'Enable animations in the Advanced tab (AOS, WOW, GSAP)', 'sifency-addons' ); ?></li>
								<li><strong><?php esc_html_e( 'Performance:', 'sifency-addons' ); ?></strong> <?php esc_html_e( 'Only required animation libraries are loaded automatically', 'sifency-addons' ); ?></li>
							</ul>
						</div>
					</div>

					<!-- CPT Modules Tab -->
					<div class="doc-tab-pane" id="cpt-modules">
						<h2><?php esc_html_e( 'CPT Modules', 'sifency-addons' ); ?></h2>
						
						<div class="doc-section">
							<h3><?php esc_html_e( 'What are CPT Modules?', 'sifency-addons' ); ?></h3>
							<p><?php esc_html_e( 'CPT (Custom Post Type) Modules are pre-configured post types and templates that let you organize different types of content beyond standard posts and pages.', 'sifency-addons' ); ?></p>
						</div>

						<div class="doc-section">
							<h3><?php esc_html_e( 'Available Modules', 'sifency-addons' ); ?></h3>
							<ul>
								<li><strong><?php esc_html_e( 'Team:', 'sifency-addons' ); ?></strong> <?php esc_html_e( 'Manage team member profiles with photos and details', 'sifency-addons' ); ?></li>
								<li><strong><?php esc_html_e( 'Services:', 'sifency-addons' ); ?></strong> <?php esc_html_e( 'Showcase your business services with descriptions', 'sifency-addons' ); ?></li>
								<li><strong><?php esc_html_e( 'Portfolio:', 'sifency-addons' ); ?></strong> <?php esc_html_e( 'Display your projects and creative work', 'sifency-addons' ); ?></li>
								<li><strong><?php esc_html_e( 'Events:', 'sifency-addons' ); ?></strong> <?php esc_html_e( 'Create and manage event listings with dates/times', 'sifency-addons' ); ?></li>
								<li><strong><?php esc_html_e( 'Career:', 'sifency-addons' ); ?></strong> <?php esc_html_e( 'Post job openings and career opportunities', 'sifency-addons' ); ?></li>
								<li><strong><?php esc_html_e( 'Testimonials:', 'sifency-addons' ); ?></strong> <?php esc_html_e( 'Collect and display customer reviews', 'sifency-addons' ); ?></li>
							</ul>
						</div>

						<div class="doc-section">
							<h3><?php esc_html_e( 'Enable/Disable Modules', 'sifency-addons' ); ?></h3>
							<ol>
								<li><?php esc_html_e( 'Go to Settings > Post Types', 'sifency-addons' ); ?></li>
								<li><?php esc_html_e( 'Toggle the switch for each module you want to enable', 'sifency-addons' ); ?></li>
								<li><?php esc_html_e( 'Enabled modules will appear in the WordPress admin sidebar', 'sifency-addons' ); ?></li>
								<li><?php esc_html_e( 'Corresponding grid widgets will appear in Elementor', 'sifency-addons' ); ?></li>
							</ol>
						</div>
					</div>

					<!-- Theme Builder Tab -->
					<div class="doc-tab-pane" id="theme-builder">
						<h2><?php esc_html_e( 'Theme Builder', 'sifency-addons' ); ?></h2>
						
						<div class="doc-section">
							<h3><?php esc_html_e( 'What is the Theme Builder?', 'sifency-addons' ); ?></h3>
							<p><?php esc_html_e( 'The Theme Builder lets you create custom headers, footers, post templates, and reusable sections without touching code.', 'sifency-addons' ); ?></p>
						</div>

						<div class="doc-section">
							<h3><?php esc_html_e( 'Creating Reusable Templates', 'sifency-addons' ); ?></h3>
							<ol>
								<li><?php esc_html_e( 'Go to Sifency Addons > Reusable Templates', 'sifency-addons' ); ?></li>
								<li><?php esc_html_e( 'Click "Add New Section"', 'sifency-addons' ); ?></li>
								<li><?php esc_html_e( 'Name your template and choose to save as draft or edit in Elementor', 'sifency-addons' ); ?></li>
								<li><?php esc_html_e( 'Design your template in Elementor', 'sifency-addons' ); ?></li>
								<li><?php esc_html_e( 'Publish the template when ready', 'sifency-addons' ); ?></li>
								<li><?php esc_html_e( 'Copy the shortcode and paste on any page/post', 'sifency-addons' ); ?></li>
							</ol>
						</div>

						<div class="doc-section">
							<h3><?php esc_html_e( 'Using Template Shortcodes', 'sifency-addons' ); ?></h3>
							<p><?php esc_html_e( 'After publishing a template, use the shortcode to display it anywhere:', 'sifency-addons' ); ?></p>
							<code>[section_template id="123"]</code>
							<p><?php esc_html_e( 'Replace "123" with your actual template ID.', 'sifency-addons' ); ?></p>
						</div>
					</div>

					<!-- FAQ Tab -->
					<div class="doc-tab-pane" id="faq">
						<h2><?php esc_html_e( 'Frequently Asked Questions', 'sifency-addons' ); ?></h2>
						
						<div class="faq-item">
							<h4><?php esc_html_e( 'Q: Do I need Elementor Pro?', 'sifency-addons' ); ?></h4>
							<p><?php esc_html_e( 'A: The free Elementor works for most widgets. Elementor Pro is required for dynamic post widgets and theme builder features.', 'sifency-addons' ); ?></p>
						</div>

						<div class="faq-item">
							<h4><?php esc_html_e( 'Q: Are widgets responsive?', 'sifency-addons' ); ?></h4>
							<p><?php esc_html_e( 'A: Yes! All widgets have responsive controls for mobile, tablet, and desktop devices.', 'sifency-addons' ); ?></p>
						</div>

						<div class="faq-item">
							<h4><?php esc_html_e( 'Q: How do I enable WooCommerce widgets?', 'sifency-addons' ); ?></h4>
							<p><?php esc_html_e( 'A: Install and activate WooCommerce plugin. WooCommerce widgets will automatically appear in Elementor.', 'sifency-addons' ); ?></p>
						</div>

						<div class="faq-item">
							<h4><?php esc_html_e( 'Q: Can I customize animations?', 'sifency-addons' ); ?></h4>
							<p><?php esc_html_e( 'A: Yes! Go to widget Advanced tab to choose animation type (AOS, WOW, GSAP) and customize duration/delay.', 'sifency-addons' ); ?></p>
						</div>

						<div class="faq-item">
							<h4><?php esc_html_e( 'Q: How do I disable a CPT module?', 'sifency-addons' ); ?></h4>
							<p><?php esc_html_e( 'A: Go to Settings > Post Types and toggle off the module you want to disable.', 'sifency-addons' ); ?></p>
						</div>

						<div class="faq-item">
							<h4><?php esc_html_e( 'Q: Will widgets slow down my site?', 'sifency-addons' ); ?></h4>
							<p><?php esc_html_e( 'A: No. Only required CSS/JS is loaded. The smart asset manager loads only what\'s needed for your page.', 'sifency-addons' ); ?></p>
						</div>

						<div class="faq-item">
							<h4><?php esc_html_e( 'Q: Are widgets compatible with all themes?', 'sifency-addons' ); ?></h4>
							<p><?php esc_html_e( 'A: Yes! Sifency Addons works with any theme that supports Elementor.', 'sifency-addons' ); ?></p>
						</div>
					</div>

				</div>

			</div>
		</div>

		<script type="text/javascript">
			jQuery(document).ready(function($) {
				// Tab switching
				$('.doc-tab-btn').on('click', function() {
					const tabName = $(this).data('tab');
					
					// Update active button
					$('.doc-tab-btn').removeClass('active');
					$(this).addClass('active');
					
					// Update active pane
					$('.doc-tab-pane').removeClass('active');
					$('#' + tabName).addClass('active');
				});
			});
		</script>
		<?php
	}
}
