<?php
/**
 * Created by mr2app.
 * User: Hani
 * Date: 3/16/2019
 * Time: 11:04 AM
 */

wp_enqueue_script( 'jscolor_woo.js'.WOO2APP_FILES_VER , WOO2APP_JS_URL.'jscolor_woo.js', array('jquery'));
wp_register_style('select2.min.css', WOO2APP_CSS_URL . 'select2.min.css');
wp_enqueue_style('select2.min.css'.WOO2APP_FILES_VER);
//if(isset($_POST['submit'])){
if (isset($_POST['woo2app-admin']) && wp_verify_nonce($_POST['woo2app-admin'], 'woo2app-admin')) {
	$title = ($_POST['slider_list']['title']);
	$type = 0;
	$showtype = $_POST['slider_list']['mode'];
	$pic = "";
	$value = $_POST['slider_list'];
	$array = array();
	foreach ($value['items'] as $val){
		$val_val = stripslashes($val);
		$val_val = json_decode($val_val);
		$array[] = $val_val;
	}
	$value['items'] = $array;
	$value = json_encode($value);
	global $wpdb;
	$table_name = $wpdb->prefix . "woo2app_mainpage";
	$res = $wpdb->get_results("select MAX(mp_order) AS max_order from $table_name");
	if(!is_null($res[0]->max_order)){
		foreach ($res as $key) {
			$max = $key->max_order + 1;
		}
	}else{
		$max = 1;
	}
	$r = $wpdb->query( $wpdb->prepare("INSERT INTO $table_name
		( mp_title , mp_type , mp_value , mp_showtype , mp_pic , mp_order ,mp_sort)
		VALUES ( %s, %d, %s, %d, %s, %d, %s )", $title,$type,$value,$showtype,$pic,$max, 100) );
	if($r){
		echo "<p style='color:green'>". "Saved. Sort from the sort order." .'</p>';
	}
}

?>

<div class="">
    <h2>
		<?php _e('In this section, you can add a list of buttons to the home screen, each of which is linked somewhere.', 'woo2app'); ?>
    </h2>
    <form method="post" action="">
		<?php wp_nonce_field('woo2app-admin', 'woo2app-admin'); ?>
        <table class="form-table">
            <tr valign="top" class="" >
                <th scope="row" class="titledesc">
					<?php _e('Title', 'woo2app'); ?>
                </th>
                <td class="forminp">
                    <input type="text" class="regular-text" name="slider_list[title]"
                           placeholder="<?php _e('Title', 'woo2app'); ?>"/>
                </td>
            </tr>
            <tr valign="top" class="" >
                <th scope="row" class="titledesc">
					<?php _e('Mode', 'woo2app'); ?>
                </th>
                <td class="forminp">
                    <select name="slider_list[mode]" class="regular-text" onchange="change_mode(this)">
                        <option value="4001"> <?=_e('No image' , 'woo2app');?></option>
                        <option value="4002"> <?=_e('Left image' , 'woo2app');?></option>
                        <option value="4003"> <?=_e('Image only' , 'woo2app');?></option>
                        <option value="4004"> <?=_e('Picture top' , '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_4001" style="width: 400px" class="img_prev_mode " src="<?= WOO2APP_URL .'/files/img/SliderList/mp-btnslider-1.jpg'?>" />
                    <img id="img_pr_mode_4002" style="width: 400px" class="img_prev_mode hide" src="<?= WOO2APP_URL .'/files/img/SliderList/mp-btnslider-2.jpg'?>" />
                    <img id="img_pr_mode_4003" style="width: 400px" class="img_prev_mode hide" src="<?= WOO2APP_URL .'/files/img/SliderList/mp-btnslider-3.jpg'?>" />
                    <img id="img_pr_mode_4004" style="width: 400px" class="img_prev_mode hide" src="<?= WOO2APP_URL .'/files/img/SliderList/mp-btnslider-4.jpg'?>" />
                </td>
            </tr>
            <tr valign="top" class="" >
                <th scope="row" class="titledesc">
					<?php _e('Background Color', 'woo2app'); ?>
                </th>
                <td class="forminp">
                    <input type="text" class="regular-text jscolor" id="btn_color" name="slider_list[btn_color]"  value="f5363e" />
                </td>
            </tr>
            <tr valign="top" class="" >
                <th scope="row" class="titledesc">
					<?php _e('Text Color', 'woo2app'); ?>
                </th>
                <td class="forminp">
                    <input type="text" class="regular-text jscolor" id="text_color" name="slider_list[text_color]"  value="eeeeee" />
                </td>
            </tr>
            <tr valign="top" class="" >
                <th scope="row" class="titledesc">
                </th>
                <td class="forminp" >
                    <a  id="new_item" class="cursor-pointer button"><?php _e('+ New Item', 'woo2app'); ?></a>
                </td>
            </tr>
            <tr valign="top" class="" >
                <th scope="row" class="titledesc">
                </th>
                <td class="forminp" >
                    <ol id="list_items" class="font-size-15px width-300">

                    </ol>
                </td>
            </tr>
        </table>
        <div id="add_item_slider_list" class="display-none">
            <table class="form-table">
                <tr valign="top" class="" >
                    <th scope="row" class="titledesc">
						<?php _e('Item Title', 'woo2app'); ?>
                    </th>
                    <td class="forminp">
                        <input type="text" class="regular-text" id="item_title" placeholder="<?php _e('Item Title', 'woo2app'); ?>"/>
                    </td>
                </tr>
                <tr valign="top" class="" >
                    <th scope="row" class="titledesc">
						<?php _e('Type', 'woo2app'); ?>
                    </th>
                    <td class="forminp">
                        <select class="regular-text" id="item_type" onchange="change_cat_tag(this)" >
                            <option value="category"> <?php _e('Product Category ', 'woo2app'); ?></option>
                            <option value="sub_cat_product"> <?php _e('Product Sub Category', 'woo2app'); ?> </option>
                            <option value="tag"> <?php _e('Tag ', 'woo2app'); ?></option>
                            <option value="link"> <?php _e('Link ', 'woo2app'); ?></option>
                        </select>
                    </td>
                </tr>
                <tr valign="top" id="val_cat" class="type_value" >
                    <th scope="row" class="titledesc">
						<?php _e('Category', 'woo2app'); ?>
                    </th>
                    <td class="forminp">
                        <select name="cat" data-id="cat" data-placeholder="<?php _e('Please Select ...', 'woo2app'); ?>"
                                id="item_cat" class="regular-text js-data-example-ajax ">
                            <option class="text-right" value="all"> <?php _e('All Categories', 'woo2app'); ?> </option>
                        </select>
                    </td>
                </tr>
                <tr valign="top" id="val_tag" class="type_value display-none">
                    <th scope="row" class="titledesc">
						<?php _e('Tag', 'woo2app'); ?>
                    </th>
                    <td class="forminp">
                        <select name="tags" data-id="tags" data-placeholder="<?= _e('Please Select ...', 'woo2app'); ?>"
                                id="item_tag" class="regular-text  js-data-example-ajax ">

                        </select>
                    </td>
                </tr>
                <tr valign="top" id="val_link" class="type_value display-none">
                    <th scope="row" class="titledesc">
						<?php _e('Link', 'woo2app'); ?>
                    </th>
                    <td class="forminp">
                        <input type="text" class="regular-text" id="item_link" placeholder="<?= _e('Link (example : https://my-site.com)', 'woo2app'); ?>"/>
                    </td>
                </tr>
                <tr>
                    <th>
                       <?php _e('Image', 'woo2app'); ?>
                    </th>
                    <td class="forminp">
                        <input type="text" class="regular-text" id="ImageList" />
                        <button type="button"  class="button"
                                id="Sel_ImageList"> <?php _e('Select Image', 'woo2app'); ?> </button>

                    </td>
                </tr>
                <tr valign="top">
                    <th scope="row">
                    </th>
                    <td class="forminp">
                        <button type="button" onclick="add_item()"
                                class="button button-default"> <?php _e('Add New Item To List', 'woo2app'); ?> </button>
                    </td>
                </tr>
            </table>
        </div>
        <hr>
        <div class="padding-left-10px display-inline-block">
			<?php submit_button('+ Add To Page'); ?>
        </div>
    </form>
</div>
<?php
wp_enqueue_script( 'loadajax.js'.WOO2APP_FILES_VER , WOO2APP_JS_URL.'loadAjaxPosts.js', array('jquery'));
wp_enqueue_script('select2.min.js'.WOO2APP_FILES_VER, WOO2APP_JS_URL . 'select2.min.js');
?>

<script>
    jQuery(window).load(function(){
        jQuery('#new_item').click(function(){
            jQuery("#add_item_slider_list").slideDown();
            jQuery(this).hide()
        });
    });
</script>
<script>
    let id = 0;
    function add_item() {
        id ++;
        let  title = jQuery("#item_title").val();
        let  type =  jQuery("#item_type").val();
        let  val;
        let my_obj;
        let img;
        if(type == "category" || type == 'sub_cat_product'){
            val = jQuery("#item_cat").val();
            if(val == 'all') val = "";
        }
        else if(type == "tag"){
            val = jQuery("#item_tag").val();
        }
        else if(type == "link"){
            val = jQuery("#item_link").val();
        }
        img = jQuery("#ImageList").val();
        my_obj = {'title' : title , 'type' : type , 'val' : val , 'img' : img};
        console.log(JSON.stringify(my_obj))
        let value = JSON.stringify(my_obj);
        // #list_items
        let child = '<li id="li_' + id + '" style="display: flex;align-items: center">';
        if(img != ""){
            child += "<img  style='width: 50px' src='"+ img +"'  />";
        }
        child += "<input type='hidden' value='"+ value +"' name='slider_list[items][]' />";
        child += "<strong>" + title + "</strong>";
        child += "<button class='red marginLR-10px button button-small' onclick='delete_row(" + id + ")' > <?php _e('Remove', 'woo2app');?> </button>";
        child += "</li>";


        jQuery("#list_items").append(child);
        jQuery("#TB_closeWindowButton").click();
    }
    function delete_row(id) {
        console.log(id);
        jQuery("#li_"+ id).remove();
    }
    function change_cat_tag(e) {
        if(e.value == 'category' || e.value == 'sub_cat_product'){
            jQuery('.type_value').attr('style','display:none')
            jQuery('#val_cat').attr('style' , 'display:table-row')
        }
        else if(e.value == 'tag'){
            jQuery('.type_value').attr('style','display:none')
            jQuery('#val_tag').attr('style' , 'display:table-row')
        }
        else if(e.value == 'link'){
            jQuery('.type_value').attr('style','display:none')
            jQuery('#val_link').attr('style' , 'display:table-row')
        }
    }
    jQuery('#Sel_ImageList').click(function (e) {
        e.preventDefault();
        custom_uploader_hami = wp.media.frames.custom_uploader_hami = wp.media({
            title: '<?php _e('Select Image', 'woo2app'); ?>',
            library: {type: 'image'},
            button: {text: '<?php _e('Select', 'woo2app'); ?>'},
            multiple: false
        });
        custom_uploader_hami.on('select', function() {
            attachment = custom_uploader_hami.state().get('selection').first().toJSON();
            jQuery('#ImageList').val(attachment.url);
            url_image = attachment.url;
        });
        custom_uploader_hami.open();
    });

    function change_mode(e){
        //console.log(e.value)
        jQuery(".img_prev_mode").addClass('hide');
        jQuery("#img_pr_mode_" + e.value).removeClass('hide');
    }
</script>