<?php
if(isset($_POST['submit'])){
	update_option("AppOrder", $_REQUEST["postList"]);
}
?>
<h3 class="background-color-e5e5e5 padding-7px">
	<?php _e('Order Setting', 'woo2app'); ?>
</h3>
<form action="" method="post">
	<table class="form-table">
		<tbody>
		<tr>
			<th scope="row" class="titledesc">
				<label>
					<?php _e('Cart Mode', 'woo2app'); ?>
				</label>
			</th>
			<td class="forminp">
				<?php $fill_state = get_option('AppOrder');?>
				<select name="postList[state]" class="regular-text" onchange="change_mode(this)">
					<option value="mode1" <?= selected($fill_state['cartState'],'mode1')?> > <?php _e('Mode 1', 'woo2app'); ?> </option>
					<option value="mode2" <?= selected($fill_state['cartState'],'mode2')?>> <?php _e('Mode 2', 'woo2app'); ?> </option>
					<option value="mode3" <?= selected($fill_state['cartState'],'mode3')?> > <?php _e('Mode 3', 'woo2app'); ?> </option>
					<option value="mode4" <?= selected($fill_state['cartState'],'mode4')?>> <?php _e('Mode 4', '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_1" class="img_prev_mode <?= ($fill_state['state'] == 'mode1') ? '' : 'hide'?>" src="https://via.placeholder.com/400x200?text=Mode 1" />
				<img id="img_pr_mode_2" class="img_prev_mode <?= ($fill_state['state'] == 'mode2') ? '' : 'hide'?>" src="https://via.placeholder.com/400x200?text=Mode 2" />
				<img id="img_pr_mode_3" class="img_prev_mode <?= ($fill_state['state'] == 'mode3') ? '' : 'hide'?>" src="https://via.placeholder.com/400x200?text=Mode 3" />
				<img id="img_pr_mode_4" class="img_prev_mode <?= ($fill_state['state'] == 'mode4') ? '' : 'hide'?>" src="https://via.placeholder.com/400x200?text=Mode 4" />
			</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');
        if(e.value == 'mode1'){
            jQuery("#img_pr_mode_1").removeClass('hide');
        }
        else if(e.value == 'mode2'){
            jQuery("#img_pr_mode_2").removeClass('hide');
        }
        else if(e.value == 'mode3'){
            jQuery("#img_pr_mode_3").removeClass('hide');
        }
        else if(e.value == 'mode4'){
            jQuery("#img_pr_mode_4").removeClass('hide');
        }
    }
</script>