<?php
session_start();
include('includes/functions.php');

// INCLUDE THE PAGE NAME FOR TRACKING
$pagename = 'hero';

get_header($pagename);

get_navbar($pagename);
?>

<div id='content'>
	
	<div class='panel panel-default'>
		<div class='panel-heading'>
			<i class='fa fa-pencil icon-large'></i> Hero / Slider Settings
		</div>
		<div class='panel-body'>
		
			<?php if( isset($_GET['action']) && $_GET['action'] == 'hero_updated' ) { ?>
			
				<div class="alert alert-success">
					<h4><strong>Hero/Slider</strong> Successfuly updated!</h4>
					<p><i class="fa fa-check"></i> The Hero/Slider settings have been successfuly stored in the database.</p>
					
					<p><br/><a href="hero.php" class="btn btn-success">Return to Hero/Slider Settings</a></p>
				</div>
			
			<?php } else { ?>
			
			<?php checkDatabase(); ?>
			
			<?php $options = get_theme_options('HERO_OPTIONS'); ?>
			
			<form enctype="multipart/form-data" action="hero.php" method="POST">
				<script>
					jQuery(function($) {
						//on change:
						$('select#hero_slideshow').change(function() {
							var select_val = $(this).val();
							display_related_fields(select_val);
						});
						
						//onload
						var select_val = $('select#hero_slideshow').val();
						display_related_fields(select_val);
						
						function display_related_fields( select_val ){
							if( select_val == 0 ) {
								$('.display_if_hero').hide();
								$('.display_if_slideshow').hide();
								$('.display_if_videobg').hide();
							}
							if( select_val == 'hero' ) {
								$('.display_if_hero').show();
								$('.display_if_slideshow').hide();
								$('.display_if_videobg').hide();
							}
							if( select_val == 'slideshow' ) {
								$('.display_if_hero').hide();
								$('.display_if_slideshow').show();
								$('.display_if_videobg').hide();
							}
							if( select_val == 'videobg' ) {
								$('.display_if_hero').hide();
								$('.display_if_slideshow').hide();
								$('.display_if_videobg').show();
							}
						}
					});
				</script>
				
				<fieldset>									
					<legend>Hero / Slider</legend>
					
					<div class="col-md-6">
						<div class="form-group">
							<label class="control-label">Static Image or Slideshow?</label>
							<select class="form-control" id="hero_slideshow" name="hero_slideshow">
								<option value="0" disabled="disabled" <?php if($options['hero_slideshow'] != '' && $options['hero_slideshow'] == 0){ echo 'selected="selected"'; } ?>>- Select an Option -</option>
								<option value="hero" <?php if($options['hero_slideshow'] != '' && $options['hero_slideshow'] == 'hero'){ echo 'selected="selected"'; } ?>>Static Image</option>
								<option value="slideshow" <?php if($options['hero_slideshow'] != '' && $options['hero_slideshow'] == 'slideshow'){ echo 'selected="selected"'; } ?>>Slideshow</option>
								<option value="videobg" <?php if($options['hero_slideshow'] != '' && $options['hero_slideshow'] == 'videobg'){ echo 'selected="selected"'; } ?>>Video Background (loop)</option>
							</select>
						</div>
						
						<span class="display_if_hero">
							<legend>Static Image</legend>
							<div class="form-group">
								<label class="control-label">Static Image (recommended minimum: 1920x1080)</label>
								<input type="file" class="form-control" name="static_image">
							</div>
							
							<div class="form-group">
								<label class="control-label">Current Static Image:</label>
								<br/>
								<input class="form-control" readonly name="static_image_current" value="<?php if($options['static_image'] != ''){ echo $options['static_image']; } else { echo TOURURL.'/custom_assets/images/banner.jpg'; } ?>">
								<span style="display:inline-block; margin-top:10px;">
									<img src="<?php if($options['static_image'] != ''){ echo $options['static_image']; } else { echo TOURURL.'/custom_assets/images/banner.jpg'; } ?>" alt="" style="max-width:100%;" />
								</span>
								<span class="help-block">the image above has been resized for better display</span>
							</div>
							
							<hr/>
						</span><!--//display_if_hero-->
						
						<span class="display_if_videobg">
							<legend>Video Background</legend>
							<div class="form-group">
								<label class="control-label">Video Background URL (recommended at least 720p, short, because it loops)</label>
								<input type="text" class="form-control" name="videobg_url" placeholder="/trailers/trailer.mp4" value="<?php if(isset($options['videobg_url']) && $options['videobg_url'] != ''){ echo $options['videobg_url']; } else { echo ''; } ?>">
							</div>
							
							<?php if(isset($options['videobg_url']) && $options['videobg_url'] != ''){ ?>
							<div class="form-group">
								<label class="control-label">Current Video Background:</label>
								<br/>
								<span style="display:inline-block; margin-top:10px;">
									<a href="<?php echo $options['videobg_url']; ?>" class="btn btn-default" target="_blank">Open In New Window</a>
								</span>
							</div>
							<?php } ?>
							
							<hr/>
							
							<legend>Video Poster Image</legend>
							<div class="form-group">
								<label class="control-label">Video Poster Image (recommended: 1920x1080)</label>
								<input type="file" class="form-control" name="video_poster_image">
								<span class="help-block">It's highly recommend you upload an image, specially so it's displayed on mobile devices. Mobile devices aren't able to AUTOPLAY the video on pageload.</span>
							</div>
							
							<div class="form-group">
								<label class="control-label">Current Video Poster Image:</label>
								<br/>
								<input class="form-control" readonly name="video_poster_image_current" value="<?php if(isset($options['video_poster_image']) && $options['video_poster_image'] != ''){ echo $options['video_poster_image']; } else { echo TOURURL.'/custom_assets/images/banner.jpg'; } ?>">
								<span style="display:inline-block; margin-top:10px;">
									<img src="<?php if(isset($options['video_poster_image']) && $options['video_poster_image'] != ''){ echo $options['video_poster_image']; } else { echo TOURURL.'/custom_assets/images/banner.jpg'; } ?>" alt="" style="max-width:100%;" />
								</span>
								<span class="help-block">the image above has been resized for better display</span>
							</div>
							
							<hr/>
						</span><!--//display_if_videobg-->
					
						<span class="display_if_slideshow">
							<legend>Slideshow Setup</legend>
							<p>We recommend using a maximum of 5 slides. More than that will just slow down your site.</p>
						</span><!--//display_if_hero-->
					
					</div><!--//col-md-6-->
					
					<span class="display_if_slideshow">
						<table class="table table-bordered">
							<thead>
								<tr>
									<th>Show/Hide</th>
									<th>Slide Image</th>
									<th>Link</th>
									<th>Target</th>
								</tr>
							</thead>
							<tbody>
								<?php for ($x = 1; $x <= 5; $x++) { ?>
								<tr>
									<td>
										<div class="form-group">
											<select class="form-control" name="slideshow_0<?php echo $x; ?>_display">
												<option value="0" <?php if($options['slideshow_0'.$x.'_display'] != '' && $options['slideshow_0'.$x.'_display'] == 0){ echo 'selected="selected"'; } ?>>Hide</option>
												<option value="1" <?php if($options['slideshow_0'.$x.'_display'] != '' && $options['slideshow_0'.$x.'_display'] == 1){ echo 'selected="selected"'; } ?>>Show</option>
											</select>
										</div>
									</td>
									<td>
										<div class="form-group">
											<input type="file" class="form-control" name="slideshow_0<?php echo $x; ?>_image">
											<br/>
											<input class="form-control" readonly name="slideshow_0<?php echo $x; ?>_image_current" value="<?php if($options['slideshow_0'.$x.'_image'] != ''){ echo $options['slideshow_0'.$x.'_image']; } ?>">
											<?php if($options['slideshow_0'.$x.'_image'] != ''){ ?>
											<span style="display:inline-block; margin-top:10px;">
												<img src="<?php if($options['slideshow_0'.$x.'_image'] != ''){ echo $options['slideshow_0'.$x.'_image']; } ?>" alt="" style="max-width:300px;" />
											</span>
											<?php } ?>
										</div>
									</td>
									<td>
										<div class="form-group">
											<input type="text" class="form-control" placeholder="http://www.zuzanadesigns.com/" name="slideshow_0<?php echo $x; ?>_link" value="<?php if($options['slideshow_0'.$x.'_link'] != ''){ echo $options['slideshow_0'.$x.'_link']; } ?>" />
										</div>
									</td>
									<td>
										<div class="form-group">
											<select class="form-control" name="slideshow_0<?php echo $x; ?>_target">
												<option value="_blank" <?php if($options['slideshow_0'.$x.'_target'] != '' && $options['slideshow_0'.$x.'_target'] == '_blank'){ echo 'selected="selected"'; } ?>>New Window</option>
												<option value="_self" <?php if($options['slideshow_0'.$x.'_target'] != '' && $options['slideshow_0'.$x.'_target'] == '_self'){ echo 'selected="selected"'; } ?>>Same Window</option>
											</select>
										</div>
									</td>
								</tr>
								<?php }//for loop ?>
							</tbody>
						</table>
					</span><!--//display_if_slideshow-->
					
					<div class="col-md-6">
					
						<hr/>
						
						<legend>Overlay Box</legend>
						<div class="form-group">
							<label class="control-label">Display Overlay Box</label>
							<select class="form-control" name="display_overlay_box">
								<option value="1" <?php if($options['display_overlay_box'] != '' && $options['display_overlay_box'] == 1){ echo 'selected="selected"'; } ?>>Yes</option>
								<option value="0" <?php if($options['display_overlay_box'] != '' && $options['display_overlay_box'] == 0){ echo 'selected="selected"'; } ?>>No</option>
							</select>
						</div>
						
						<div class="form-group">
							<label class="control-label">Overlay Text</label>
							<textarea class="form-control" rows="6" name="overlay_text"><?php if($options['overlay_text'] != ''){ echo $options['overlay_text']; } else { echo '<h3>Welcome to SiteName.com!</h3>'.PHP_EOL.'<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pellentesque ligula non eros fermentum iaculis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed feugiat elit at massa maximus interdum. Praesent a mollis enim. Mauris nec tempus metus, hendrerit placerat nunc. Cras at justo vitae orci tristique feugiat id vel sem. Aenean turpis enim, aliquam quis lectus vel, euismod malesuada ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pellentesque ligula non eros fermentum iaculis. Cum sociis natoque penatibus et</p>'; } ?></textarea>
							<span class="help-block">html code can be used.</span>
						</div>
						
						<hr/>
						
						<legend>Trailer / Join Buttons</legend>
						<div class="form-group">
							<label class="control-label">Display "View Trailer" and "Sign Up Now" Buttons?</label>
							<select class="form-control" name="display_overlay_buttons">
								<option value="1_both" <?php if($options['display_overlay_buttons'] != '' && $options['display_overlay_buttons'] == '1_both'){ echo 'selected="selected"'; } ?>>Yes, both Buttons</option>
								<option value="1_trailer" <?php if($options['display_overlay_buttons'] != '' && $options['display_overlay_buttons'] == '1_trailer'){ echo 'selected="selected"'; } ?>>Yes, "View Trailer" only</option>
								<option value="1_signup" <?php if($options['display_overlay_buttons'] != '' && $options['display_overlay_buttons'] == '1_signup'){ echo 'selected="selected"'; } ?>>Yes, "Sign Up Now" only</option>
								<option value="0" <?php if($options['display_overlay_buttons'] != '' && $options['display_overlay_buttons'] == 0){ echo 'selected="selected"'; } ?>>No</option>
							</select>
						</div>
						
						<div class="form-group">
							<label class="control-label">Trailer URL (must be .MP4 file)</label>
							<input type="text" class="form-control" placeholder="http://yoursite.com/trailers/homepage_trailer.mp4" name="trailer_url" value="<?php if($options['trailer_url'] != ''){ echo $options['trailer_url']; } ?>" />
						</div>
					
					</div><!--//col-md-6-->
					
				</fieldset>
				
				<div class="clearfix"></div>
				<div class='form-actions'>
					<input type="submit" class="btn btn-default" value="Save Settings" name="hero_save">
				</div>
			</form>
			
			<?php } ?>
			
		</div>
	</div><!--//panel-->
	
</div>