<?php
if (!defined('ABSPATH')) {
	exit; // Exit if accessed directly
}

// load settings
$post_id = esc_attr($post->ID);

?>
<style>
	div.add-text {
		font-size: 25px !important;
	}

	.setting-toggle-div {
		background-color: #FFFFFF;
		padding: 10px;
		margin-bottom: 15px;
		border: 2px solid #CCCCCC;
		border-radius: 3px;
	}

	.slider-settings {
		padding: 8px 0px 8px 8px !important;
		margin: 10px 10px 5px 0px !important;
	}

	.slider-settings label {
		font-size: 13px !important;
		font-weight: bold;
	}

	.ms_comment_settings {
		font-size: 16px !important;
		font-family: Geneva;
		padding-left: 4px;
		font: initial;
		margin-top: 5px;
		padding-left: 14px;
	}

	.tps input,
	.cps input,
	.bps input {
		display: none !important;
	}

	.btn_st {
		border-radius: 5px !important;
	}

	h4>a {
		color: #ea0000 !important;
		margin-left: 45px;
		font-family: Geneva;
	}

	h4>a:hover {
		color: #000 !important;
	}

	.panel .panel-heading .panel-title a .fa {
		color: #ef3e36 !important;

	}

	.panel-default>.panel-heading {
		background-color: #f4f0ef !important;
	}

	.lower-title {
		background-color: #F4F0EF;
		color: #23282d;
		font-family: icon;
		font-size: 20px;
		font-weight: 500;
		margin-left: 10px;
		padding-left: 10px;
	}
</style>
<!-- Return to Top -->
<a href="javascript:" id="return-to-top"><i class="fa fa-chevron-up"></i></a>

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
	<!--Slider Settings-->
	<div class="panel panel-default">
		<div class="panel-heading panel-heading-theme-1 icon-right" role="tab" id="heading1" data-toggle="collapse"
			data-parent="#accordion" href="#collapse1" aria-controls="collapse1">
			<h4 class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="true"
					aria-controls="collapse1"><i class="fa fa-chevron-down"></i><span class="pe-7s-monitor"></span>
					<?php esc_html_e('Slider Settings', 'media-slider'); ?>
				</a>
			</h4>
		</div>
		<div id="collapse1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1">
			<div class="panel-body">
				<p class="slider-settings">
				<p class="ms-title">
					<?php esc_html_e('Width', 'media-slider'); ?>
				</p></br>
				<?php
				if (isset($slider_settings['width'])) {
					$width = $slider_settings['width'];
				} else {
					$width = 960;
				}
				?>

				<input type="text" class="form-control" id="width" name="width"
					value="<?php echo esc_attr($width); ?>" style="margin-left:25px;"></br></br>
				<p class="ms_comment_settings">
					<?php esc_html_e('Set the slider frame preview width(Default is 960)', 'media-slider'); ?>
				</p>
				</p>

				<p class="slider-settings">
				<p class="ms-title">
					<?php esc_html_e('Height', 'media-slider'); ?>
				</p></br>
				<?php
				if (isset($slider_settings['height'])) {
					$height = $slider_settings['height'];
				} else {
					$height = 540;
				}
				?>
				<input type="text" class="form-control" id="height" name="height"
					value="<?php echo esc_attr($height); ?>" style="margin-left:25px;"></br></br>
				<p class="ms_comment_settings">
					<?php esc_html_e('Set the slider frame preview height(Default is 540)', 'media-slider'); ?>
				</p>
				</p>

				<p class="slider-settings">
				<p class="ms-title">
					<?php esc_html_e('Auto Height', 'media-slider'); ?>
				</p></br>
				<p class="switch-field em_size_field">
					<?php
					if (isset($slider_settings['slide_autoheight'])) {
						$slide_autoheight = $slider_settings['slide_autoheight'];
					} else {
						$slide_autoheight = 'true';
					}
					?>
					<input type="radio" class="form-control" id="slide_autoheight1" name="slide_autoheight" value="true"
						<?php
						if ($slide_autoheight == 'true') {
							echo 'checked';
						}
						?>>
					<label for="slide_autoheight1">
						<?php esc_html_e('On', 'media-slider'); ?>
					</label>
					<input type="radio" class="form-control" id="slide_autoheight2" name="slide_autoheight"
						value="false" <?php
						if ($slide_autoheight == 'false') {
							echo 'checked';
						}
						?>>
					<label for="slide_autoheight2">
						<?php esc_html_e('Off', 'media-slider'); ?>
					</label></br></br></br>
				<p class="ms_comment_settings">
					<?php esc_html_e('Select if the image can be scaled up more than its original size', 'media-slider'); ?>
				</p>
				</p>
				</p>

				<p class="slider-settings">
				<p class="ms-title">
					<?php esc_html_e('Image Scale Mode', 'media-slider'); ?>
				</p></br>
				<p class="switch-field em_size_field">
					<?php
					if (isset($slider_settings['slide_imagescalemode'])) {
						$slide_imagescalemode = $slider_settings['slide_imagescalemode'];
					} else {
						$slide_imagescalemode = 'cover';
					}
					?>
					<input type="radio" class="form-control" id="slide_imagescalemode1" name="slide_imagescalemode"
						value="cover" <?php
						if ($slide_imagescalemode == 'cover') {
							echo 'checked';
						}
						?>>
					<label for="slide_imagescalemode1">
						<?php esc_html_e('Cover', 'media-slider'); ?>
					</label>
					<input type="radio" class="form-control" id="slide_imagescalemode4" name="slide_imagescalemode"
						value="none" <?php
						if ($slide_imagescalemode == 'none') {
							echo 'checked';
						}
						?>>
					<label for="slide_imagescalemode4">
						<?php esc_html_e('None', 'media-slider'); ?>
					</label></br></br></br>
				<p class="ms_comment_settings">
					<?php esc_html_e('Sets the scale mode of the main slide images (images added as background)', 'media-slider'); ?>
				</p>
				</p>
				</p>

				<p class="slider-settings">

				<p class="ms-title">
					<?php esc_html_e('Image Centered', 'media-slider'); ?>
				</p></br>
				<p class="switch-field em_size_field">
					<?php
					if (isset($slider_settings['slide_imagecenter'])) {
						$slide_imagecenter = $slider_settings['slide_imagecenter'];
					} else {
						$slide_imagecenter = 'true';
					}
					?>
					<input type="radio" class="form-control" id="slide_imagecenter1" name="slide_imagecenter"
						value="true" <?php
						if ($slide_imagecenter == 'true') {
							echo 'checked';
						}
						?>>
					<label for="slide_imagecenter1">
						<?php esc_html_e('On', 'media-slider'); ?>
					</label>
					<input type="radio" class="form-control" id="slide_imagecenter2" name="slide_imagecenter"
						value="false" <?php
						if ($slide_imagecenter == 'false') {
							echo 'checked';
						}
						?>>
					<label for="slide_imagecenter2">
						<?php esc_html_e('Off', 'media-slider'); ?>
					</label></br></br></br>
				<p class="ms_comment_settings">
					<?php esc_html_e('Select if the image will be centered', 'media-slider'); ?>
				</p>
				</p>
				</p>

				<p class="slider-settings">
				<p class="ms-title">
					<?php esc_html_e('ScaleUp', 'media-slider'); ?>
				</p></br>
				<p class="switch-field em_size_field">
					<?php
					if (isset($slider_settings['slide_scaleup'])) {
						$slide_scaleup = $slider_settings['slide_scaleup'];
					} else {
						$slide_scaleup = 'true';
					}
					?>
					<input type="radio" class="form-control" id="slide_scaleup1" name="slide_scaleup" value="true" <?php
					if ($slide_scaleup == 'true') {
						echo 'checked';
					}
					?>>
					<label for="slide_scaleup1">
						<?php esc_html_e('Yes', 'media-slider'); ?>
					</label>
					<input type="radio" class="form-control" id="slide_scaleup2" name="slide_scaleup" value="false"
						<?php
						if ($slide_scaleup == 'false') {
							echo 'checked';
						}
						?>>
					<label for="slide_scaleup2">
						<?php esc_html_e('No', 'media-slider'); ?>
					</label></br></br></br>
				<p class="ms_comment_settings">
					<?php esc_html_e('Select if the image can be scaled up more than its original size', 'media-slider'); ?>
				</p>
				</p>
				</p>

				<p class="slider-settings">
				<p class="ms-title">
					<?php esc_html_e('Auto Slide Size', 'media-slider'); ?>
				</p></br>
				<p class="switch-field em_size_field">
					<?php
					if (isset($slider_settings['slide_autoslidesize'])) {
						$slide_autoslidesize = $slider_settings['slide_autoslidesize'];
					} else {
						$slide_autoslidesize = 'false';
					}
					?>
					<input type="radio" class="form-control" id="slide_autoslidesize1" name="slide_autoslidesize"
						value="true" <?php
						if ($slide_autoslidesize == 'true') {
							echo 'checked';
						}
						?>>
					<label for="slide_autoslidesize1">
						<?php esc_html_e('Yes', 'media-slider'); ?>
					</label>
					<input type="radio" class="form-control" id="slide_autoslidesize2" name="slide_autoslidesize"
						value="false" <?php
						if ($slide_autoslidesize == 'false') {
							echo 'checked';
						}
						?>>
					<label for="slide_autoslidesize2">
						<?php esc_html_e('No', 'media-slider'); ?>
					</label></br></br></br>
				<p class="ms_comment_settings">
					<?php esc_html_e('Select if all the slides are at the same height but will allow the width of the slides to be variable', 'media-slider'); ?>
				</p>
				</p>
				</p>

				<p class="slider-settings">
				<p class="ms-title">
					<?php esc_html_e('Shuffle', 'media-slider'); ?>
				</p></br>
				<p class="switch-field em_size_field">
					<?php
					if (isset($slider_settings['shuffle_slide'])) {
						$shuffle_slide = $slider_settings['shuffle_slide'];
					} else {
						$shuffle_slide = 'false';
					}
					?>
					<input type="radio" class="form-control" id="shuffle_slide1" name="shuffle_slide" value="true" <?php
					if ($shuffle_slide == 'true') {
						echo 'checked';
					}
					?>>
					<label for="shuffle_slide1">
						<?php esc_html_e('On', 'media-slider'); ?>
					</label>
					<input type="radio" class="form-control" id="shuffle_slide2" name="shuffle_slide" value="false"
						<?php
						if ($shuffle_slide == 'false') {
							echo 'checked';
						}
						?>>
					<label for="shuffle_slide2">
						<?php esc_html_e('Off', 'media-slider'); ?>
					</label></br></br></br>
				<p class="ms_comment_settings">
					<?php esc_html_e('Select if the slides will be shuffled', 'media-slider'); ?>
				</p>
				</p>
				</p>

				<p class="slider-settings">
				<p class="ms-title">
					<?php esc_html_e('Slide Caption', 'media-slider'); ?>
				</p></br>
				<p class="switch-field em_size_field">
					<?php
					if (isset($slider_settings['slide_caption'])) {
						$slide_caption = $slider_settings['slide_caption'];
					} else {
						$slide_caption = 'true';
					}
					?>
					<input type="radio" class="form-control" id="slide_caption1" name="slide_caption" value="true" <?php
					if ($slide_caption == 'true') {
						echo 'checked';
					}
					?>>
					<label for="slide_caption1">
						<?php esc_html_e('Show', 'media-slider'); ?>
					</label>
					<input type="radio" class="form-control" id="slide_caption2" name="slide_caption" value="false"
						<?php
						if ($slide_caption == 'false') {
							echo 'checked';
						}
						?>>
					<label for="slide_caption2">
						<?php esc_html_e('Hide', 'media-slider'); ?>
					</label></br></br></br>
				<p class="ms_comment_settings">
					<?php esc_html_e('Select if the slide caption will be displayed', 'media-slider'); ?>
				</p>
				</p>
				</p>

				<p class="slider-settings">
				<p class="ms-title">
					<?php esc_html_e('Slider loop', 'media-slider'); ?>
				</p></br>
				<p class="switch-field em_size_field">
					<?php
					if (isset($slider_settings['slide_loop'])) {
						$slide_loop = $slider_settings['slide_loop'];
					} else {
						$slide_loop = 'true';
					}
					?>
					<input type="radio" class="form-control" id="slide_loop1" name="slide_loop" value="true" <?php
					if ($slide_loop == 'true') {
						echo 'checked';
					}
					?>>
					<label for="slide_loop1">
						<?php esc_html_e('On', 'media-slider'); ?>
					</label>
					<input type="radio" class="form-control" id="slide_loop2" name="slide_loop" value="false" <?php
					if ($slide_loop == 'false') {
						echo 'checked';
					}
					?>>
					<label for="slide_loop2">
						<?php esc_html_e('Off', 'media-slider'); ?>
					</label></br></br></br>
				<p class="ms_comment_settings">
					<?php esc_html_e('Select if the slider will be loopable', 'media-slider'); ?>
				</p>
				</p>
				</p>

				<p class="slider-settings">
				<p class="ms-title">
					<?php esc_html_e('Slide Visible Size (in %)', 'media-slider'); ?>
				</p></br>
				<?php
				if (isset($slider_settings['slide_visiblesize'])) {
					$slide_visiblesize = $slider_settings['slide_visiblesize'];
				} else {
					$slide_visiblesize = 'auto';
				}
				?>

				<input type="text" class="form-control" id="slide_visiblesize" name="slide_visiblesize" placeholder=""
					value="<?php echo esc_attr($slide_visiblesize); ?>" style="margin-left:25px;"></br></br>
				<p class="ms_comment_settings">
					<?php esc_html_e('Select if the size of the visible area, allowing for more slides to become visible near the selected slide (Default is auto)', 'media-slider'); ?>
				</p>
				</p>

				<p class="slider-settings">
				<p class="ms-title">
					<?php esc_html_e('Wait For Layers', 'media-slider'); ?>
				</p></br>
				<p class="switch-field em_size_field">
					<?php
					if (isset($slider_settings['slide_waitforlayers'])) {
						$slide_waitforlayers = $slider_settings['slide_waitforlayers'];
					} else {
						$slide_waitforlayers = 'false';
					}
					?>
					<input type="radio" class="form-control" id="slide_waitforlayers1" name="slide_waitforlayers"
						value="true" <?php
						if ($slide_waitforlayers == 'true') {
							echo 'checked';
						}
						?>>
					<label for="slide_waitforlayers1">
						<?php esc_html_e('Yes', 'media-slider'); ?>
					</label>
					<input type="radio" class="form-control" id="slide_waitforlayers2" name="slide_waitforlayers"
						value="false" <?php
						if ($slide_waitforlayers == 'false') {
							echo 'checked';
						}
						?>>
					<label for="slide_waitforlayers2">
						<?php esc_html_e('No', 'media-slider'); ?>
					</label></br></br></br>
				<p class="ms_comment_settings">
					<?php esc_html_e('Select if the slider will wait for the layers to disappear before going to a new slide', 'media-slider'); ?>
				</p>
				</p>
				</p>

				<p class="slider-settings">
				<p class="ms-title">
					<?php esc_html_e('Auto Scale Layers', 'media-slider'); ?>
				</p></br>
				<p class="switch-field em_size_field">
					<?php
					if (isset($slider_settings['slide_autoscalelayers'])) {
						$slide_autoscalelayers = $slider_settings['slide_autoscalelayers'];
					} else {
						$slide_autoscalelayers = 'true';
					}
					?>
					<input type="radio" class="form-control" id="slide_autoscalelayers1" name="slide_autoscalelayers"
						value="true" <?php
						if ($slide_autoscalelayers == 'true') {
							echo 'checked';
						}
						?>>
					<label for="slide_autoscalelayers1">
						<?php esc_html_e('Yes', 'media-slider'); ?>
					</label>
					<input type="radio" class="form-control" id="slide_autoscalelayers2" name="slide_autoscalelayers"
						value="false" <?php
						if ($slide_autoscalelayers == 'false') {
							echo 'checked';
						}
						?>>
					<label for="slide_autoscalelayers2">
						<?php esc_html_e('No', 'media-slider'); ?>
					</label></br></br></br>
				<p class="ms_comment_settings">
					<?php esc_html_e('Select if the slider layers will be scaled automatically', 'media-slider'); ?>
				</p>
				</p>
				</p>

				<p class="slider-settings">
				<p class="ms-title">
					<?php esc_html_e('Custom CSS', 'media-slider'); ?>
				</p></br>
				<p class="switch-field em_size_field">
					<?php
					if (isset($slider_settings['custom_css'])) {
						$custom_css = $slider_settings['custom_css'];
					} else {
						$custom_css = '';
					}
					?>
					<textarea name="custom_css" id="custom_css" style="width: 98%; height: 120px;"
						placeholder="Type direct CSS code here. Don't use <style>...</style> tag."><?php echo esc_textarea($custom_css); ?></textarea><br>
				</p>
				</p>
			</div>
		</div>
	</div>
	<div class="panel panel-default">
		<div class="panel-heading panel-heading-theme-1 icon-right" role="tab" id="heading3" data-toggle="collapse"
			data-parent="#accordion" href="#collapse3" aria-controls="collapse3">
			<h4 class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="true"
					aria-controls="collapse3"><i class="fa fa-chevron-down"></i>
					<span class="pe-7s-next"></span>
					<?php esc_html_e('Autoplay Settings', 'media-slider'); ?>
				</a>
			</h4>
		</div>
		<div id="collapse3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading3">
			<div class="panel-body">
				<p class="slider-settings">
				<p class="ms-title">
					<?php esc_html_e('Autoplay', 'media-slider'); ?>
				</p></br>
				<p class="switch-field em_size_field">
					<?php
					if (isset($slider_settings['slide_autoplay'])) {
						$slide_autoplay = $slider_settings['slide_autoplay'];
					} else {
						$slide_autoplay = 'true';
					}
					?>
					<input type="radio" class="form-control" id="slide_autoplay1" name="slide_autoplay" value="true"
						<?php
						if ($slide_autoplay == 'true') {
							echo 'checked';
						}
						?>>
					<label for="slide_autoplay1">
						<?php esc_html_e('On', 'media-slider'); ?>
					</label>
					<input type="radio" class="form-control" id="slide_autoplay2" name="slide_autoplay" value="false"
						<?php
						if ($slide_autoplay == 'false') {
							echo 'checked';
						}
						?>>
					<label for="slide_autoplay2">
						<?php esc_html_e('Off', 'media-slider'); ?>
					</label></br></br></br>
				<p class="ms_comment_settings">
					<?php esc_html_e('Select if or not slide autoplay will be enabled', 'media-slider'); ?>
				</p>
				</p>
				</p>
				<div class="autoplay_settings">
					<p class="slider-settings range-slider">
					<p class="lower-title">
						<?php esc_html_e('Autoplay Delay', 'media-slider'); ?>
					</p></br>
					<p class="switch-field em_size_field">
						<?php
						if (isset($slider_settings['slide_autoplay_delay'])) {
							$slide_autoplay_delay = $slider_settings['slide_autoplay_delay'];
						} else {
							$slide_autoplay_delay = 5000;
						}
						?>

						<input type="range" class="range-slider__range" id="slide_autoplay_delay"
							name="slide_autoplay_delay" value="<?php echo esc_attr($slide_autoplay_delay); ?>" min="0"
							max="10000" step="100" style="width: 300px !important; margin-left: 10px;">
						<span class="range-slider__value">5000</span>
					<p class="ms_comment_settings">
						<?php esc_html_e('Sets the delay/interval (in milliseconds) at which the slide autoplay will run (Default is 5000)', 'media-slider'); ?>
					</p>
					</p>
					</p>

					<p class="slider-settings">
					<p class="lower-title">
						<?php esc_html_e('Autoplay OnHover', 'media-slider'); ?>
					</p></br>
					<p class="switch-field em_size_field">
						<?php
						if (isset($slider_settings['slide_autoplay_hover'])) {
							$slide_autoplay_hover = $slider_settings['slide_autoplay_hover'];
						} else {
							$slide_autoplay_hover = 'pause';
						}
						?>
						<input type="radio" class="form-control" id="slide_autoplay_hover1" name="slide_autoplay_hover"
							value="pause" <?php
							if ($slide_autoplay_hover == 'pause') {
								echo 'checked';
							}
							?>>
						<label for="slide_autoplay_hover1">
							<?php esc_html_e('Pause', 'media-slider'); ?>
						</label>
						<input type="radio" class="form-control" id="slide_autoplay_hover2" name="slide_autoplay_hover"
							value="stop" <?php
							if ($slide_autoplay_hover == 'stop') {
								echo 'checked';
							}
							?>>
						<label for="slide_autoplay_hover2">
							<?php esc_html_e('Stop', 'media-slider'); ?>
						</label>
						<input type="radio" class="form-control" id="slide_autoplay_hover3" name="slide_autoplay_hover"
							value="none" <?php
							if ($slide_autoplay_hover == 'none') {
								echo 'checked';
							}
							?>>
						<label for="slide_autoplay_hover3">
							<?php esc_html_e('None', 'media-slider'); ?>
						</label></br></br></br>
					<p class="ms_comment_settings">
						<?php esc_html_e('Select if the slide autoplay will be paused or stopped when the slider is hovered', 'media-slider'); ?>
					</p>
					</p>
					</p>
				</div>
			</div>
		</div>
	</div>
	<div class="panel panel-default">
		<div class="panel-heading panel-heading-theme-1 icon-right" role="tab" id="heading4" data-toggle="collapse"
			data-parent="#accordion" href="#collapse4" aria-controls="collapse4">
			<h4 class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion" href="#collapse4" aria-expanded="true"
					aria-controls="collapse4"><i class="fa fa-chevron-down"></i>
					<span class="pe-7s-paper-plane"></span>
					<?php esc_html_e('Navigation Settings', 'media-slider'); ?>
				</a>
			</h4>
		</div>
		<div id="collapse4" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading4">
			<div class="panel-body">
				<p class="slider-settings">
				<p class="ms-title">
					<?php esc_html_e('Arrows', 'media-slider'); ?>
				</p></br>
				<p class="switch-field em_size_field">
					<?php
					if (isset($slider_settings['slide_arrows'])) {
						$slide_arrows = $slider_settings['slide_arrows'];
					} else {
						$slide_arrows = 'true';
					}
					?>
					<input type="radio" class="form-control" id="slide_arrows1" name="slide_arrows" value="true" <?php
					if ($slide_arrows == 'true') {
						echo 'checked';
					}
					?>>
					<label for="slide_arrows1">
						<?php esc_html_e('Show', 'media-slider'); ?>
					</label>
					<input type="radio" class="form-control" id="slide_arrows2" name="slide_arrows" value="false" <?php
					if ($slide_arrows == 'false') {
						echo 'checked';
					}
					?>>
					<label for="slide_arrows2">
						<?php esc_html_e('Hide', 'media-slider'); ?>
					</label></br></br></br>
				<p class="ms_comment_settings">
					<?php esc_html_e('Select if the slider arrow buttons will be created', 'media-slider'); ?>
				</p>
				</p>
				</p>

				<p class="slider-settings">
				<p class="ms-title">
					<?php esc_html_e('FullScreen Button', 'media-slider'); ?>
				</p></br>
				<p class="switch-field em_size_field">
					<?php
					if (isset($slider_settings['slide_fullscreen_btn'])) {
						$slide_fullscreen_btn = $slider_settings['slide_fullscreen_btn'];
					} else {
						$slide_fullscreen_btn = 'false';
					}
					?>
					<input type="radio" class="form-control" id="slide_fullscreen_btn1" name="slide_fullscreen_btn"
						value="true" <?php
						if ($slide_fullscreen_btn == 'true') {
							echo 'checked';
						}
						?>>
					<label for="slide_fullscreen_btn1">
						<?php esc_html_e('Show', 'media-slider'); ?>
					</label>
					<input type="radio" class="form-control" id="slide_fullscreen_btn2" name="slide_fullscreen_btn"
						value="false" <?php
						if ($slide_fullscreen_btn == 'false') {
							echo 'checked';
						}
						?>>
					<label for="slide_fullscreen_btn2">
						<?php esc_html_e('Hide', 'media-slider'); ?>
					</label></br></br></br>
				<p class="ms_comment_settings">
					<?php esc_html_e('Select if the slider full-screen button is enabled', 'media-slider'); ?>
				</p>
				</p>
				</p>
			</div>
		</div>
	</div>
	<div class="panel panel-default">
		<div class="panel-heading panel-heading-theme-1 icon-right" role="tab" id="heading5" data-toggle="collapse"
			data-parent="#accordion" href="#collapse5" aria-controls="collapse5">
			<h4 class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion" href="#collapse5" aria-expanded="true"
					aria-controls="collapse5"><i class="fa fa-chevron-down"></i>
					<span class="pe-7s-photo"></span>
					<?php esc_html_e('Thumbnail Settings', 'media-slider'); ?>
				</a>
			</h4>
		</div>
		<div id="collapse5" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading5">
			<div class="panel-body">
				<p class="slider-settings">
				<p class="ms-title">
					<?php esc_html_e('Thumbnails', 'media-slider'); ?>
				</p></br>
				<p class="switch-field em_size_field">
					<?php
					if (isset($slider_settings['slide_thumb'])) {
						$slide_thumb = $slider_settings['slide_thumb'];
					} else {
						$slide_thumb = 'true';
					}
					?>
					<input type="radio" class="form-control" id="slide_thumb1" name="slide_thumb" value="true" <?php
					if ($slide_thumb == 'true') {
						echo 'checked';
					}
					?>>
					<label for="slide_thumb1">
						<?php esc_html_e('Show', 'media-slider'); ?>
					</label>
					<input type="radio" class="form-control" id="slide_thumb2" name="slide_thumb" value="false" <?php
					if ($slide_thumb == 'false') {
						echo 'checked';
					}
					?>>
					<label for="slide_thumb2">
						<?php esc_html_e('Hide', 'media-slider'); ?>
					</label></br></br></br>
				<p class="ms_comment_settings">
					<?php esc_html_e('Select if the thumbnails are displayed', 'media-slider'); ?>
				</p>
				</p>
				</p>

				<div class="thumb_settings">

					<p class="slider-settings">
					<p class="lower-title">
						<?php esc_html_e('Thumbnail Width', 'media-slider'); ?>
					</p></br>
					<?php
					if (isset($slider_settings['slide_thumb_width'])) {
						$slide_thumb_width = $slider_settings['slide_thumb_width'];
					} else {
						$slide_thumb_width = 200;
					}
					?>

					<input type="text" class="form-control" id="slide_thumb_width" name="slide_thumb_width"
						value="<?php echo esc_attr($slide_thumb_width); ?>" style="margin-left:25px;"></br></br>
					<p class="ms_comment_settings">
						<?php esc_html_e('Sets the width of the thumbnail(Default is 100)', 'media-slider'); ?>
					</p>

					</p>

					<p class="slider-settings">
					<p class="lower-title">
						<?php esc_html_e('Thumbnail Height', 'media-slider'); ?>
					</p></br>
					<?php
					if (isset($slider_settings['slide_thumb_height'])) {
						$slide_thumb_height = $slider_settings['slide_thumb_height'];
					} else {
						$slide_thumb_height = 100;
					}
					?>

					<input type="text" class="form-control" id="slide_thumb_height" name="slide_thumb_height"
						value="<?php echo esc_attr($slide_thumb_height); ?>" style="margin-left:25px;"></br></br>
					<p class="ms_comment_settings">
						<?php esc_html_e('Sets the height of the thumbnail(Default is 80)', 'media-slider'); ?>
					</p>
					</p>

					<p class="slider-settings">
					<p class="lower-title">
						<?php esc_html_e('Thumbnail Position', 'media-slider'); ?>
					</p></br>
					<p class="switch-field em_size_field">
						<?php
						if (isset($slider_settings['slide_thumb_pos'])) {
							$slide_thumb_pos = $slider_settings['slide_thumb_pos'];
						} else {
							$slide_thumb_pos = 'top';
						}
						?>
						<input type="radio" class="form-control" id="slide_thumb_pos1" name="slide_thumb_pos"
							value="top" <?php
							if ($slide_thumb_pos == 'top') {
								echo 'checked';
							}
							?>>
						<label class="btn_st" for="slide_thumb_pos1" style="margin-left:20px;">
							<?php esc_html_e('Top', 'media-slider'); ?>
						</label></br></br></br>
						<input type="radio" class="form-control" id="slide_thumb_pos5" name="slide_thumb_pos"
							value="bottom" <?php
							if ($slide_thumb_pos == 'bottom') {
								echo 'checked';
							}
							?>>
						<label class="btn_st" for="slide_thumb_pos5" style="margin-left:20px;">
							<?php esc_html_e('bottom', 'media-slider'); ?>
						</label></br></br></br>
					<p class="ms_comment_settings">
						<?php esc_html_e('Sets the position of the thumbnail scroller', 'media-slider'); ?>
					</p>
					</p>
					</p>

					<p class="slider-settings">
					<p class="lower-title">
						<?php esc_html_e('Thumbnail Arrows', 'media-slider'); ?>
					</p></br>
					<p class="switch-field em_size_field">
						<?php
						if (isset($slider_settings['slide_thumb_arrows'])) {
							$slide_thumb_arrows = $slider_settings['slide_thumb_arrows'];
						} else {
							$slide_thumb_arrows = 'true';
						}
						?>
						<input type="radio" class="form-control" id="slide_thumb_arrows1" name="slide_thumb_arrows"
							value="true" <?php
							if ($slide_thumb_arrows == 'true') {
								echo 'checked';
							}
							?>>
						<label for="slide_thumb_arrows1">
							<?php esc_html_e('Show', 'media-slider'); ?>
						</label>
						<input type="radio" class="form-control" id="slide_thumb_arrows2" name="slide_thumb_arrows"
							value="false" <?php
							if ($slide_thumb_arrows == 'false') {
								echo 'checked';
							}
							?>>
						<label for="slide_thumb_arrows2">
							<?php esc_html_e('Hide', 'media-slider'); ?>
						</label></br></br></br>
					<p class="ms_comment_settings">
						<?php esc_html_e('Select if the thumbnail arrows will be enabled', 'media-slider'); ?>
					</p>
					</p>
					</p>

					<p class="slider-settings">
					<p class="lower-title">
						<?php esc_html_e('Thumbnail TouchSwipe', 'media-slider'); ?>
					</p></br>
					<p class="switch-field em_size_field">
						<?php
						if (isset($slider_settings['slide_thumb_touchswipe'])) {
							$slide_thumb_touchswipe = $slider_settings['slide_thumb_touchswipe'];
						} else {
							$slide_thumb_touchswipe = 'true';
						}
						?>
						<input type="radio" class="form-control" id="slide_thumb_touchswipe1"
							name="slide_thumb_touchswipe" value="true" <?php
							if ($slide_thumb_touchswipe == 'true') {
								echo 'checked';
							}
							?>>
						<label for="slide_thumb_touchswipe1">
							<?php esc_html_e('Enable', 'media-slider'); ?>
						</label>
						<input type="radio" class="form-control" id="slide_thumb_touchswipe2"
							name="slide_thumb_touchswipe" value="false" <?php
							if ($slide_thumb_touchswipe == 'false') {
								echo 'checked';
							}
							?>>
						<label for="slide_thumb_touchswipe2">
							<?php esc_html_e('Disable', 'media-slider'); ?>
						</label></br></br></br>
					<p class="ms_comment_settings">
						<?php esc_html_e('Select if the touch swipe will be enabled for thumbnails', 'media-slider'); ?>
					</p>
					</p>
					</p>
				</div>
			</div>
		</div>
	</div>
	<div class="panel panel-default">
		<div class="panel-heading panel-heading-theme-1 icon-right" role="tab" id="heading6" data-toggle="collapse"
			data-parent="#accordion" href="#collapse6" aria-controls="collapse6">
			<h4 class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion" href="#collapse6" aria-expanded="true"
					aria-controls="collapse6"><i class="fa fa-chevron-down"></i>
					<span class="pe-7s-video"></span>
					<?php esc_html_e('Video Settings', 'media-slider'); ?>
				</a>
			</h4>
		</div>
		<div id="collapse6" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading6">
			<div class="panel-body">
				<p class="slider-settings">
				<p class="ms-title">
					<?php esc_html_e('Video Action - Play', 'media-slider'); ?>
				</p></br>
				<p class="switch-field em_size_field">
					<?php
					if (isset($slider_settings['videoaction_play'])) {
						$videoaction_play = $slider_settings['videoaction_play'];
					} else {
						$videoaction_play = 'stopAutoplay';
					}
					?>
					<input type="radio" class="form-control" id="videoaction_play1" name="videoaction_play"
						value="stopAutoplay" <?php
						if ($videoaction_play == 'stopAutoplay') {
							echo 'checked';
						}
						?>>
					<label for="videoaction_play1">
						<?php esc_html_e('Stop Autoplay', 'media-slider'); ?>
					</label>
					<input type="radio" class="form-control" id="videoaction_play2" name="videoaction_play" value="none"
						<?php
						if ($videoaction_play == 'none') {
							echo 'checked';
						}
						?>>
					<label for="videoaction_play2">
						<?php esc_html_e('None', 'media-slider'); ?>
					</label></br></br></br>
				<p class="ms_comment_settings">
					<?php esc_html_e('Sets the action that the slider will perform when the video starts playing', 'media-slider'); ?>
				</p>
				</p>
				</p>

				<p class="slider-settings">
				<p class="ms-title">
					<?php esc_html_e('Video Action - Pause', 'media-slider'); ?>
				</p></br>
				<p class="switch-field em_size_field">
					<?php
					if (isset($slider_settings['videoaction_pause'])) {
						$videoaction_pause = $slider_settings['videoaction_pause'];
					} else {
						$videoaction_pause = 'none';
					}
					?>
					<input type="radio" class="form-control" id="videoaction_pause1" name="videoaction_pause"
						value="startAutoplay" <?php
						if ($videoaction_pause == 'startAutoplay') {
							echo 'checked';
						}
						?>>
					<label for="videoaction_pause1">
						<?php esc_html_e('Start Autoplay', 'media-slider'); ?>
					</label>
					<input type="radio" class="form-control" id="videoaction_pause2" name="videoaction_pause"
						value="none" <?php
						if ($videoaction_pause == 'none') {
							echo 'checked';
						}
						?>>
					<label for="videoaction_pause2">
						<?php esc_html_e('None', 'media-slider'); ?>
					</label></br></br></br>
				<p class="ms_comment_settings">
					<?php esc_html_e('Sets the action that the slider will perform when the video is paused', 'media-slider'); ?>
				</p>
				</p>
				</p>
			</div>
		</div>
	</div>
	<div class="panel panel-default">
		<div class="panel-heading panel-heading-theme-1 icon-right" role="tab" id="heading7" data-toggle="collapse"
			data-parent="#accordion" href="#collapse7" aria-controls="collapse7">
			<h4 class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion" href="#collapse7" aria-expanded="true"
					aria-controls="collapse7"><i class="fa fa-chevron-down"></i>
					<span class="pe-7s-note2"></span>
					<?php esc_html_e('Textarea Settings', 'media-slider'); ?>
				</a>
			</h4>
		</div>
		<div id="collapse7" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading7">
			<div class="panel-body">
				<p class="slider-settings">
				<p class="ms-title">
					<?php esc_html_e('Title / Description', 'media-slider'); ?>
				</p></br>
				<p class="switch-field em_size_field">
					<?php
					if (isset($slider_settings['slide_text'])) {
						$slide_text = $slider_settings['slide_text'];
					} else {
						$slide_text = 'true';
					}
					?>
					<input type="radio" class="form-control" id="slide_text1" name="slide_text" value="true" <?php
					if ($slide_text == 'true') {
						echo 'checked';
					}
					?>>
					<label for="slide_text1">
						<?php esc_html_e('Show', 'media-slider'); ?>
					</label>
					<input type="radio" class="form-control" id="slide_text2" name="slide_text" value="false" <?php
					if ($slide_text == 'false') {
						echo 'checked';
					}
					?>>
					<label for="slide_text2">
						<?php esc_html_e('Hide', 'media-slider'); ?>
					</label></br></br></br>
				<p class="ms_comment_settings">
					<?php esc_html_e('Select if the Title / Description are displayed', 'media-slider'); ?>
				</p>
				</p>
				</p>
				<div class="textarea_settings">
					<p class="slider-settings">
					<p class="lower-title">
						<?php esc_html_e('Title / Description Position', 'media-slider'); ?>
					</p></br>
					<p class="switch-field em_size_field">
						<?php
						if (isset($slider_settings['slide_text_pos'])) {
							$slide_text_pos = $slider_settings['slide_text_pos'];
						} else {
							$slide_text_pos = 'bottom';
						}
						?>

						<input type="radio" class="form-control" id="slide_text_pos2" name="slide_text_pos" value="top"
							<?php
							if ($slide_text_pos == 'top') {
								echo 'checked';
							}
							?>>
						<label class="btn_st" for="slide_text_pos2" style="border-radius:5px;">
							<?php esc_html_e('Top', 'media-slider'); ?>
						</label>

						<input type="radio" class="form-control" id="slide_text_pos6" name="slide_text_pos"
							value="right" <?php
							if ($slide_text_pos == 'right') {
								echo 'checked';
							}
							?>>
						<label class="btn_st" for="slide_text_pos6" style="margin-left:5px;">
							<?php esc_html_e('Right', 'media-slider'); ?>
						</label>

						<input type="radio" class="form-control" id="slide_text_pos8" name="slide_text_pos"
							value="bottom" <?php
							if ($slide_text_pos == 'bottom') {
								echo 'checked';
							}
							?>>
						<label class="btn_st" for="slide_text_pos8" style="border-radius:5px; margin-left:5px;">
							<?php esc_html_e('Bottom', 'media-slider'); ?>
						</label></br></br></br>
					<p class="ms_comment_settings">
						<?php esc_html_e('Select the position where the title / description will be displayed', 'media-slider'); ?>
					</p>
					</p>
					</p>
				</div>
			</div>
		</div>
	</div>
</div>
<p class="text-center" style="text-align: center;">
	<br>
	<a href="https://awplife.com/wordpress-plugins/media-slider-premium/" target="_blank"
		class="button button-primary button-hero"><?php esc_html_e('Buy Premium Version', 'media-slider'); ?></a>
	<a href="https://awplife.com/demo/media-slider-premium/" target="_blank"
		class="button button-primary button-hero" style="margin-left: 10px;"><?php esc_html_e('Check Live Demo', 'media-slider'); ?></a>
</p>
<?php
// syntax: wp_nonce_field( 'name_of_my_action', 'name_of_nonce_field' );
wp_nonce_field('ms_save_settings', 'ms_save_nonce');
?>
<script>
	//dropdown toggle on change effect
	jQuery(document).ready(function () {
		//accordion icon
		jQuery(function () {
			function toggleSign(e) {
				jQuery(e.target)
					.prev('.panel-heading')
					.find('i')
					.toggleClass('fa fa-chevron-down fa fa-chevron-up');
			}
			jQuery('#accordion').on('hidden.bs.collapse', toggleSign);
			jQuery('#accordion').on('shown.bs.collapse', toggleSign);

		});
	});

	// start pulse on page load
	function pulseEff() {
		jQuery('#shortcode').fadeOut(600).fadeIn(600);
	};
	var Interval;
	Interval = setInterval(pulseEff, 1500);

	// stop pulse
	function pulseOff() {
		clearInterval(Interval);
	}
	// start pulse
	function pulseStart() {
		Interval = setInterval(pulseEff, 2000);
	}

	//range slider
	var rangeSlider = function () {
		var slider = jQuery('.range-slider'),
			range = jQuery('.range-slider__range'),
			value = jQuery('.range-slider__value');

		slider.each(function () {

			value.each(function () {
				var value = jQuery(this).prev().attr('value');
				jQuery(this).html(value);
			});

			range.on('input', function () {
				jQuery(this).next(value).html(this.value);
			});
		});
	};
	rangeSlider();

	//on load 
	var slide_fade = jQuery('input[name="slide_fade"]:checked').val();
	var slide_autoplay = jQuery('input[name="slide_autoplay"]:checked').val();
	var slider_breakpoints = jQuery('input[name="slider_breakpoints"]:checked').val();
	var slide_thumb = jQuery('input[name="slide_thumb"]:checked').val();
	var slide_text = jQuery('input[name="slide_text"]:checked').val();

	if (slide_fade == "true") {
		jQuery('.fade_settings').show();
	}
	if (slide_fade == "false") {
		jQuery('.fade_settings').hide();
	}
	if (slide_autoplay == "true") {
		jQuery('.autoplay_settings').show();
	}
	if (slide_autoplay == "false") {
		jQuery('.autoplay_settings').hide();
	}
	if (slider_breakpoints == "true") {
		jQuery('.breakpoints_settings').show();
	}
	if (slider_breakpoints == "false") {
		jQuery('.breakpoints_settings').hide();
	}
	if (slide_thumb == "true") {
		jQuery('.thumb_settings').show();
	}
	if (slide_thumb == "false") {
		jQuery('.thumb_settings').hide();
	}
	if (slide_text == "true") {
		jQuery('.textarea_settings').show();
	}
	if (slide_text == "false") {
		jQuery('.textarea_settings').hide();
	}
	//on change
	jQuery(document).ready(function () {
		jQuery('input[name="slide_fade"]').change(function () {
			var slide_fade = jQuery('input[name="slide_fade"]:checked').val();
			if (slide_fade == "true") {
				jQuery('.fade_settings').show();
			}
			if (slide_fade == "false") {
				jQuery('.fade_settings').hide();
			}
		});
		jQuery('input[name="slide_autoplay"]').change(function () {
			var slide_autoplay = jQuery('input[name="slide_autoplay"]:checked').val();
			if (slide_autoplay == "true") {
				jQuery('.autoplay_settings').show();
			}
			if (slide_autoplay == "false") {
				jQuery('.autoplay_settings').hide();
			}
		});
		jQuery('input[name="slider_breakpoints"]').change(function () {
			var slider_breakpoints = jQuery('input[name="slider_breakpoints"]:checked').val();
			if (slider_breakpoints == "true") {
				jQuery('.breakpoints_settings').show();
			}
			if (slider_breakpoints == "false") {
				jQuery('.breakpoints_settings').hide();
			}
		});
		jQuery('input[name="slide_text"]').change(function () {
			var slide_text = jQuery('input[name="slide_text"]:checked').val();
			if (slide_text == "true") {
				jQuery('.textarea_settings').show();
			}
			if (slide_text == "false") {
				jQuery('.textarea_settings').hide();
			}
		});
		jQuery('input[name="slide_thumb"]').change(function () {
			var slide_thumb = jQuery('input[name="slide_thumb"]:checked').val();
			if (slide_thumb == "true") {
				jQuery('.thumb_settings').show();
			}
			if (slide_thumb == "false") {
				jQuery('.thumb_settings').hide();
			}
		});
	});
</script>