<?php
if(isset($_POST['submit'])){
	update_option("AppPostsList", $_REQUEST["postList"]);
}
?>
<h3 class="background-color-e5e5e5 padding-7px">
	<?php _e('Post List', 'woo2app'); ?>
</h3>
<form action="" method="post">
	<table class="form-table">
		<tbody>
		<tr>
			<th scope="row" class="titledesc">
				<label>
					<?php _e('Mode', 'woo2app'); ?>
				</label>
			</th>
			<td class="forminp">
				<?php $fill_state = get_option('AppPostsList');?>
				<select name="postList[state]" class="regular-text" onchange="change_mode(this)">
					<option value="2001" <?= selected($fill_state['state'],'2001')?> > <?php _e('Simple', 'woo2app'); ?> </option>
					<option value="2002" <?= selected($fill_state['state'],'2002')?>> <?php _e('Large Image', 'woo2app'); ?> </option>
					<option value="2003" <?= selected($fill_state['state'],'2003')?> > <?php _e('Large Image - 2 columns', 'woo2app'); ?> </option>
					<option value="2004" <?= selected($fill_state['state'],'2004')?>> <?php _e('Right Image', 'woo2app'); ?> </option>
				</select>
			</td>
		</tr>
		<tr>
			<th scope="row" class="titledesc">
				<label>
					<?php _e('Preview', 'woo2app'); ?>
				</label>
			</th>
			<td class="forminp">
				<img id="img_pr_mode_2001" style="height: 400px" class="img_prev_mode <?= ($fill_state['state'] == '2001') ? '' : 'hide'?>" src="<?= WOO2APP_URL .'/files/img/Pages/post-page-1.jpg'?>" />
				<img id="img_pr_mode_2002" style="height: 400px" class="img_prev_mode <?= ($fill_state['state'] == '2002') ? '' : 'hide'?>" src="<?= WOO2APP_URL .'/files/img/Pages/post-page-2.jpg'?>" />
				<img id="img_pr_mode_2003" style="height: 400px" class="img_prev_mode <?= ($fill_state['state'] == '2003') ? '' : 'hide'?>" src="<?= WOO2APP_URL .'/files/img/Pages/post-page-3.jpg'?>" />
				<img id="img_pr_mode_2004" style="height: 400px" class="img_prev_mode <?= ($fill_state['state'] == '2004') ? '' : 'hide'?>" src="<?= WOO2APP_URL .'/files/img/Pages/post-page-4.jpg'?>" />
			</td>
		</tr>
		<tr>
			<th scope="row" class="titledesc">
			</th>
			<td class="forminp">
				<input type="hidden" name="submit_banner" value="1">
				<input type="submit" class="button button-primary" value="<?php _e('Save', 'woo2app'); ?>"
				       name="submit">
			</td>
		</tbody>
	</table>
</form>
<script>
    function change_mode(e){
        //console.log(e.value)
        jQuery(".img_prev_mode").addClass('hide');
        jQuery("#img_pr_mode_" + e.value).removeClass('hide');
    }
</script>