<?php
/**
 * Padding option view
 *
 * @package wp-viral-click
 * @author InstaProduct
 * @link http://insta-product.com/
 */

$setting    = $this->setting;
$dspPadding = '';
if ( isset( $this->hidePadding2 )) {
	$dspPadding = ' style="display:none"';
}
?>

<script>
var ipjck_padding_main_temp3_lbl = '<?php _e( 'Top Section Padding', IPJCK_SLUG ); ?>';
var ipjck_padding_main_temp6_lbl = '<?php _e( 'Left Section Padding', IPJCK_SLUG ); ?>';
var ipjck_padding_main_temp7_lbl = '<?php _e( 'Main Section Padding', IPJCK_SLUG ); ?>';
var ipjck_padd_main_sld3_lbl = '<?php _e( 'Header Section Background', IPJCK_SLUG ); ?>';
var ipjck_padd_main_sld4_lbl = '<?php _e( 'Main Section Background', IPJCK_SLUG ); ?>';
var ipjck_padd_main_sld5_lbl = '<?php _e( 'Main Section Background', IPJCK_SLUG ); ?>';

var ipjck_padding_sec_temp3_lbl = '<?php _e( 'Bottom Section Padding', IPJCK_SLUG ); ?>';
var ipjck_padding_sec_temp6_lbl = '<?php _e( 'Right Section Padding', IPJCK_SLUG ); ?>';
var ipjck_padding_sec_temp7_lbl = '<?php _e( 'Content Section Padding', IPJCK_SLUG ); ?>';
var ipjck_padd_sec_sld3_lbl  = '<?php _e( 'Content Section Background', IPJCK_SLUG ); ?>';
var ipjck_padd_sec_sld4_lbl  = '<?php _e( 'Bottom Section Background', IPJCK_SLUG ); ?>';
var ipjck_padd_sec_sld5_lbl  = '<?php _e( 'Content Section Background', IPJCK_SLUG ); ?>';
</script>

<div id="ipjck-field-padding2"<?php echo $dspPadding; ?>>
	<?php
	/*
	 * Bottom Section Padding
	 */
	?>
	<!-- start: .ipjck-field-row -->
	<div class="ipjck-field-row ipjck-field-x">
		<div class="ipjck-form-label col-lg-3 col-md-4 col-sm-12">
			<label for="input-box-main-padding">
				<?php echo $this->topPaddingLabel; ?>
			</label>
		</div>

		<!-- start: .ipjck-field -->
		<div class="ipjck-field col-lg-9 col-md-8 col-sm-12">

			<?php
			$padding = absint( $setting->getSetting( 'box_main_padding', '15' ) );
			?>
			<div class="ipjck-input-group mr5">
				<input type="text" id="input-box-main-padding" class="ipjck-input ipjck-input-xxs" name="box_main_padding" value="<?php echo $padding; ?>">
				<div class="ipjck-input-addon">px</div>
			</div>

			<div class="ipjck-help">
				<a class="ipjck-btn-help ipjck-btn ipjck-btn-default" href="#"><i class="ipjck-fa ipjck-fa-question"></i></a>
				<div class="ipjck-help-content ipjck-hide">
					<?php _e( 'Set the ' . strtolower( $this->topPaddingLabel ), IPJCK_SLUG ); ?>
				</div>
			</div>
		</div>
		<!-- end: .ipjck-field -->
	</div>
	<!-- end: .ipjck-field-row -->

	<?php
	/*
	 * Bottom Section Padding
	 */
	?>
	<!-- start: .ipjck-field-row -->
	<div class="ipjck-field-row ipjck-field-x" style="border-bottom:1px solid #ddd;">
		<div class="ipjck-form-label col-lg-3 col-md-4 col-sm-12">
			<label for="input-box-sec-padding">
				<?php echo $this->bottomPaddingLabel; ?>
			</label>
		</div>

		<!-- start: .ipjck-field -->
		<div class="ipjck-field col-lg-9 col-md-8 col-sm-12">

			<?php
			$padding = absint( $setting->getSetting( 'box_secondary_padding', '15' ) );
			?>
			<div class="ipjck-input-group mr5">
				<input type="text" id="input-box-sec-padding" class="ipjck-input ipjck-input-xxs" name="box_secondary_padding" value="<?php echo $padding; ?>">
				<div class="ipjck-input-addon">px</div>
			</div>

			<div class="ipjck-help">
				<a class="ipjck-btn-help ipjck-btn ipjck-btn-default" href="#"><i class="ipjck-fa ipjck-fa-question"></i></a>
				<div class="ipjck-help-content ipjck-hide">
					<?php _e( 'Set the ' . strtolower( $this->bottomPaddingLabel ), IPJCK_SLUG ); ?>
				</div>
			</div>
		</div>
		<!-- end: .ipjck-field -->
	</div>
	<!-- end: .ipjck-field-row -->
</div>