<?php
/**
 * Help Page Functions
 *
 * @author 		Nathan Onn
 * @package 	includes
 * @version 	1.2.5
 *
 */


/* ------------------------------------------------------------------------------- */

if ( ! function_exists('lgmj_add_help_page') ) :
/**
 * Add Help page
 *
 */
function lgmj_add_help_page() {

	add_submenu_page( 	
		'lgmj-builder', // parent slug		        	
		__( 'Gallery Mojo - Help & Support' , LGMJ_SLUG ) , // page_title
		__( 'Help' , LGMJ_SLUG ) , // menu_title
		'manage_options' , // capability
		'lgmj-help', // menu_slug
		'lgmj_render_help_page' // callback function
	);

}
add_action( 'admin_menu', 'lgmj_add_help_page', 20 );

endif;


/* ------------------------------------------------------------------------------- */

if ( ! function_exists('lgmj_render_help_page') ) :
/**
 * Render shortcode generator page
 *
 * @return string
 */
function lgmj_render_help_page() {

$version = LGMJ_VERSION;
$active_tab = 'tutorials';

// get current tab
if ( isset( $_GET['tab'] ) ) {
	switch ($_GET['tab']) {
		case 'resources':
			$active_tab = 'resources';
			break;
	}
}


ob_start();
?>
<div id="lgmj-help-page" class="wrap about-wrap">

	<h1>Welcome to Gallery Mojo <?php echo $version; ?></h1>

	<div class="about-text">
		Congratulations! Now you can showcase your images in the most fancy way.
	</div>

	<div class="wp-badge lgmj-help-logo">Version <?php echo $version; ?></div>

	<h2 class="nav-tab-wrapper">
		<a href="<?php echo esc_url( admin_url( 'admin.php' ) . '?page=lgmj-builder&page=lgmj-help' ); ?>" class="nav-tab<?php echo ( $active_tab == 'tutorials' ? ' nav-tab-active' : '' ); ?>">Tutorials</a>
		<a href="<?php echo esc_url( admin_url( 'admin.php' ) . '?page=lgmj-builder&page=lgmj-help&tab=resources' ); ?>" class="nav-tab<?php echo ( $active_tab == 'resources' ? ' nav-tab-active' : '' ); ?>">Resources</a>
	</h2>

	<?php switch ( $active_tab ) {
		case 'resources':
			?>
			<div class="lgmj-help-tab">

				<h3>Resources</h3>

				<p>Here are a few resources available that we believe would help you to get around this plugin:</p>

				<ul>
					<li><a href="http://www.smashingadvantage.com/" target="_blank" rel="nofollow">Official Website</a></li>
					<li><a href="https://goo.gl/ap1SBd" target="_blank" rel="nofollow">Official sales point on CodeCanyon</a></li>
					<li><a href="http://gallerymojo.smashingadvantage.com/" target="_blank" rel="nofollow">Gallery Mojo Demo Page</a></li>
					<li><a href="http://www.smashingadvantage.com/gallery-mojo-user-guide/#sast-lgmj-intro" target="_blank" rel="nofollow">How to ask for support</a></li>
					<li><a href="https://www.facebook.com/smashingadvantage" target="_blank" rel="nofollow">Facebook Page</a></li>
				</ul>
				
			</div><!-- .lgmj-help-tab -->
			<?php
			break;
		
		case 'tutorials':
		default:
			?>
			<div class="lgmj-help-tab">

				<h3>Tutorials</h3>

				<p>Thank you so much for purchasing <strong>Gallery Mojo</strong>. Before you begin setting up and running this plugin, I would highly recommend you to spend some time go through all the tutorials listed below.</p>
				<p>Each tutorials comes with illustrative screenshots and comprehensive explanations, and is designed to be read "step-by-step", from start to finish.</p>

				<ul class="lgmj-help-tutorials">
					<li>
						<div class="lgmj-help-tutorial">
							<div class="lgmj-help-tutorial-icon">
								<i class="dashicons dashicons-format-gallery"></i>
							</div><!-- .lgmj-help-tutorial-icon -->
							<div class="lgmj-help-tutorial-content">
								<h4>1. Setup Your First Gallery</h4>
								<p>Here you'll learn how to setup your first gallery</p>
							</div>
							<a href="http://www.smashingadvantage.com/gallery-mojo-user-guide/#sast-lgmj-setup" class="button button-primary button-large" target="_blank" rel="nofollow">View Tutorial</a>
						</div><!-- .lgmj-help-tutorial -->
					</li>
					<li>
						<div class="lgmj-help-tutorial">
							<div class="lgmj-help-tutorial-icon">
								<i class="fa fa-chain-broken"></i>
							</div><!-- .lgmj-help-tutorial-icon -->
							<div class="lgmj-help-tutorial-content">
								<h4>2. Fixing Image Size Issues</h4>
								<p>If you're having problems with your images in Gallery Mojo being too small, blurry, or uneven, here's a step-by-step instructions on how to fix this problem.</p>
							</div>
							<a href="http://www.smashingadvantage.com/gallery-mojo-user-guide/#sast-lgmj-imagesize" class="button button-primary button-large" target="_blank" rel="nofollow">View Tutorial</a>
						</div><!-- .lgmj-help-tutorial -->
					</li>
					<li>
						<div class="lgmj-help-tutorial">
							<div class="lgmj-help-tutorial-icon">
								<i class="fa fa-support"></i>
							</div><!-- .lgmj-help-tutorial-icon -->
							<div class="lgmj-help-tutorial-content">
								<h4>3. Help & Support</h4>
								<p>I'd be glad to help you if you have any questions relating to this product. No guarantees, but I'll do my best to assist.</p>
							</div>
							<a href="http://www.smashingadvantage.com/gallery-mojo-user-guide/#sast-lgmj-intro" class="button button-primary button-large" target="_blank" rel="nofollow">Get Help</a>
						</div><!-- .lgmj-help-tutorial -->
					</li>
				</ul><!-- ul.lgmj-help-tutorials -->

				<script type="text/javascript">

				jQuery(document).ready(function(){ 
					var lgmjHelpBoxResize = function() {
						var boxMinHeight = 0;

						jQuery("ul.lgmj-help-tutorials .lgmj-help-tutorial .lgmj-help-tutorial-content").each(function() {
							jQuery(this).css("minHeight", 0);
						});

						jQuery("ul.lgmj-help-tutorials .lgmj-help-tutorial .lgmj-help-tutorial-content").each(function() {
							var currentHeight = jQuery(this).height();
							if ( currentHeight > boxMinHeight )
								boxMinHeight = currentHeight;
						});

						jQuery("ul.lgmj-help-tutorials .lgmj-help-tutorial .lgmj-help-tutorial-content").each(function() {
							jQuery(this).css("minHeight", boxMinHeight);
						});

					}

					lgmjHelpBoxResize();

					jQuery( window ).resize(function() {
						lgmjHelpBoxResize();
					});
				});
				</script>

			</div><!-- .lgmj-help-tab -->
			<?php
			break;
	} ?>

</div><!-- .lgmj-about-page -->
<?php
$html = ob_get_clean();
	
	echo apply_filters( 'lgmj_render_help_page' , ( !empty( $html ) ? $html : '' ) );
}

endif;