<?php
if(isset($_POST['submit'])){
	update_option("AppProductList", $_REQUEST["productList"]);
}
?>
<h3 class="background-color-e5e5e5 padding-7px">
	<?php _e('Product List', 'woo2app'); ?>
</h3>
<form action="" method="post">
	<table class="form-table">
		<tbody>
		<tr>
			<th scope="row" class="titledesc">
				<label>
					<?php _e('Product List Mode', 'woo2app'); ?>
				</label>
			</th>
			<td class="forminp">
				<?php $fill_state = get_option('AppProductList');?>
				<select name="productList[state]" class="regular-text" onchange="change_mode(this)">
					<option value="1001" <?= selected($fill_state['state'],'1001')?> > <?php _e('Simple - 2 columns', 'woo2app'); ?> </option>
					<option value="1002" <?= selected($fill_state['state'],'1002')?> > <?php _e('Left square image', 'woo2app'); ?> </option>
					<option value="1003" <?= selected($fill_state['state'],'1003')?> > <?php _e('Left circle image', 'woo2app'); ?> </option>
					<option value="1004" <?= selected($fill_state['state'],'1004')?> > <?php _e('Top circle 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_1001" style="height: 350px" class="img_pr_prev_mode <?= ($fill_state['state'] == '1001') ? '' : 'hide'?>" src="<?= WOO2APP_URL .'/files/img/Pages/prd-page-1.jpg'?>" />
				<img id="img_pr_mode_1002" style="height: 350px" class="img_pr_prev_mode <?= ($fill_state['state'] == '1002') ? '' : 'hide'?>" src="<?= WOO2APP_URL .'/files/img/Pages/prd-page-2.jpg'?>" />
				<img id="img_pr_mode_1003" style="height: 350px" class="img_pr_prev_mode <?= ($fill_state['state'] == '1003') ? '' : 'hide'?>" src="<?= WOO2APP_URL .'/files/img/Pages/prd-page-3.jpg'?>" />
				<img id="img_pr_mode_1004" style="height: 350px" class="img_pr_prev_mode <?= ($fill_state['state'] == '1004') ? '' : 'hide'?>" src="<?= WOO2APP_URL .'/files/img/Pages/prd-page-4.jpg'?>" />
			</td>
		</tr>
        <tr>
            <th scope="row" class="titledesc">
                <label>
					<?php _e('Category list Mode', 'woo2app'); ?>
                </label>
            </th>
            <td class="forminp">
                <select name="productList[CategoryState]" class="regular-text" onchange="cat_change_mode(this)">
                    <option value="3001" <?= selected($fill_state['CategoryState'],'3001')?> > <?php _e('2 columns', 'woo2app'); ?> </option>
                    <option value="3002" <?= selected($fill_state['CategoryState'],'3002')?> > <?php _e('Linear', 'woo2app'); ?> </option>
                    <option value="3003" <?= selected($fill_state['CategoryState'],'3003')?> > <?php _e('Right square image', 'woo2app'); ?> </option>
                </select>
            </td>
        </tr>
        <tr>
            <th>
                <label>
					<?php _e('Preview', 'woo2app'); ?>
                </label>
            </th>
            <td>
                <img id="img_cat_mode_3001"  style="height: 350px" class="img_cat_prev_mode <?= ($fill_state['CategoryState'] == '3001') ? '' : 'hide'?>" src="<?= WOO2APP_URL .'/files/img/Pages/cat-page-1.jpg'?>" />
                <img id="img_cat_mode_3002"  style="height: 350px" class="img_cat_prev_mode <?= ($fill_state['CategoryState'] == '3002') ? '' : 'hide'?>" src="<?= WOO2APP_URL .'/files/img/Pages/cat-page-2.jpg'?>" />
                <img id="img_cat_mode_3003" style="height: 350px" class="img_cat_prev_mode <?= ($fill_state['CategoryState'] == '3003') ? '' : 'hide'?>" src="<?= WOO2APP_URL .'/files/img/Pages/cat-page-3.jpg'?>" />
            </td>
        </tr>
		<tr>
			<th>
			</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_pr_prev_mode").addClass('hide');
        jQuery("#img_pr_mode_" + e.value).removeClass('hide');

    }
    function cat_change_mode(e){
        //console.log(e.value)
        jQuery(".img_cat_prev_mode").addClass('hide');
        jQuery("#img_cat_mode_" + e.value).removeClass('hide');
    }
</script>