
<?php
wp_enqueue_script( 'jscolor_woo.js'.WOO2APP_FILES_VER , WOO2APP_JS_URL.'jscolor_woo.js', array('jquery'));
wp_enqueue_script('jscolor_woo.js'.WOO2APP_FILES_VER, WOO2APP_JS_URL . 'custom.min.js', array('jquery'));

$intro = get_option('mr2app_intro');
if(!is_array($intro)){
	$intro = array(
		'next_before' => false,
		'end_btn' => array(
			'text' => '',
			'txt_color' => '000000',
			'bg_color' => 'FFFFFF',
		),
		'display' => false,
		'images' => array()
	);
}
if(isset($_POST['end_btn'])){
// if (isset($_POST['woo2app-admin']) && wp_verify_nonce($_POST['woo2app-admin'], 'woo2app-admin') && isset($_POST['end_btn'])) {
	$next_before = isset($_POST['next_before']) ? true : false;
	$end_btn = $_POST['end_btn'];
	$display = isset($_POST['display']) ? true : false;
	$intro['next_before'] = $next_before;
	$intro['end_btn'] = $end_btn;
	$intro['display'] = $display;
	if(!empty($_POST['src_val'])){
        $images = ($_POST['src_val']);
		$intro['images'][] = $images;
	}
	$r = update_option('mr2app_intro', $intro);
	if($r){
        echo "<p style='color:green'>" . _e('Settings saved successfully.', 'woo2app') . '</p>';
	}
}
if(isset($_POST['sort'])){
// if (isset($_POST['woo2app-admin']) && wp_verify_nonce($_POST['woo2app-admin'], 'woo2app-admin') && isset($_POST['sort'])) {
    $array = array();
	foreach ($_POST['sort_src'] as $s){
		$array[] = $s;
	}
	$intro['images'] = $array;
	$r = update_option('mr2app_intro', $intro);
	if($r){
        echo "<p style='color:green'>" . _e('Settings saved successfully.' . 'woo2app') . '</p>';
	}
}

?>
<div class="width-100">
    <h3 class="background-color-e5e5e5 padding-7px">
        <?php _e('Intro settings for the app', 'woo2app'); ?>
    </h3>
    <p>
        <?php _e('Intro Slider is the first screen in an APP that is used to display the highlights of application during the first launch of the app.', 'woo2app'); ?>
    </p>

    <form action="" id="update_form" method="post">
        <?php wp_nonce_field('woo2app-admin', 'woo2app-admin'); ?>
        <table class="form-table">
            <tbody>
            <tr>
                <th>
                    <?php _e('Enable', 'woo2app'); ?>
                </th>
                <td>
                    <input type="checkbox" name="display" <?= checked($intro['display']) ?> />
                </td>
            </tr>
            <tr>
                <th>
                    <?php _e('Show Navigation Buttons', 'woo2app'); ?>
                </th>
                <td>
                    <input type="checkbox" name="next_before" <?= checked($intro['next_before']) ?> />
                </td>
            </tr>
            <tr>
                <th class="vertical-align-middle">
                    <?php _e('Finish Button', 'woo2app'); ?>
                </th>
                <td>
                    <input type="text" name="end_btn[text]" value="<?= $intro['end_btn']['text']?>"/>
                    <span> <?php _e('Text Button', 'woo2app'); ?> </span>
                    <br>
                    <input type="text" name="end_btn[txt_color]" class="jscolor" value="<?= $intro['end_btn']['txt_color']?>"/>
                    <span> <?php _e('Text Color', 'woo2app'); ?>  </span>
                    <br>
                    <input type="text" name="end_btn[bg_color]" class="jscolor" value="<?= $intro['end_btn']['bg_color']?>"/>
                    <span> <?php _e('Background Color ', 'woo2app'); ?> </span>
                    <input type="hidden" id="txt_url_item_hami" value="" name="src_val">
                </td>
            </tr>
            <tr>
                <td class="forminp">
                    <input type="submit" value="<?php _e('Save', 'woo2app'); ?>" class="button button-primary"
                           name="submit_banner">
                </td>
            </tbody>
        </table>
    </form>

</div>
<div class="clear-both"></div>
<hr>
<div class="width-100">
    <div class="width-200px">
        <p>
            <?php _e('Recommended Resolution ', 'woo2app'); ?>: 750x1334
            <hr>
            <?php _e('Max Size', 'woo2app'); ?> : 150KB
            <hr>
            <?php _e('Format', 'woo2app'); ?> : PNG - JPG - JPEG - GIF
        </p>
    </div>
    <form method="post" id="sort_form">
        <!--        --><?php //wp_nonce_field('woo2app-admin', 'woo2app-admin'); ?>
        <div>
            <ul class="ui-sortable grid sortable">
				<?php
				$i = 0;
				foreach ($intro['images'] as $img) {
					$i++;
					?>
                    <li class="li-intro" id="li_<?= $i ?>">
                        <img id="img_<?= $i ?>" class="red cursor-move width-200 height-356px" src="<?= $img ?>"/>
                        <img class="display-none img-li-intro"
                             src="<?php echo WP_PLUGIN_URL . "/" . dirname(plugin_basename(__FILE__)) . "/../files/img/load.gif" ?>"/>
                        <input type="hidden"  value="<?= $img?>" name="sort_src[]">
                        <a class="button btn-link-intro"
                           onclick="delete_image('<?= $i ?>')"> <?php _e('Delete', 'woo2app'); ?> </a>
                    </li>
					<?php
				}
				?>
                <li class="intro-li float-right">
					<?php
					if($i == 0){
						?>
                        <button id="div_image_item_hami" type="button"
                                class="button"><?php _e('New Photo', 'woo2app'); ?></button>
                        <img class="width-height-25px display-none" id="img_load1"
                             src="<?php echo WP_PLUGIN_URL . "/" . dirname(plugin_basename(__FILE__)) . '/../files/img/load.gif' ?>">
						<?php
					}
					else{
						?>
                        <button id="div_image_item_hami" type="button"

                                class="button btn-item"><?php _e('New Photo', 'woo2app'); ?> </button>
                        <img class="intro-img" id="img_load1"
                             src="<?php echo WP_PLUGIN_URL . "/" . dirname(plugin_basename(__FILE__)) . '/../files/img/load.gif' ?>">
						<?php
					}
					?>
                </li>
            </ul>

        </div>
		<?php
		if(!empty($intro['images'])){
			?>
            <div class="clear-both"></div>
            <p>
                <input type="submit" name="sort" id="sort_btn" class="button button-default"
                       value="<?php _e('Sort', 'woo2app'); ?>">
                <?php _e('Drag&Drop To Sort', 'woo2app'); ?>
            </p>
			<?php
		}
		?>
    </form>
</div>

<?php
wp_enqueue_media();
?>
<script>
    jQuery(function() {
        //jQuery( "#sortable" ).sortable();
        jQuery( ".sortable" ).sortable();
        jQuery( "#sortable" ).disableSelection();
    });
    var custom_uploader_hami;
    jQuery('#div_image_item_hami').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() {
            jQuery("#img_load1").attr('style' , 'position: absolute;  left: 30%;  top: 50%;width:25px;height:25px;display: block')
            attachment = custom_uploader_hami.state().get('selection').first().toJSON();
            jQuery('#txt_url_item_hami').val(attachment.url);
            url_image = attachment.url;
            //jQuery('#div_image_item_hami').attr("src",url_image);

            jQuery("#update_form").submit();
        });
        custom_uploader_hami.open();
    })
    function delete_image(id){
        if(confirm("Are you sure delete?")){
            jQuery("#li_" + id + ' #img_'+id).remove();
            jQuery("#li_" + id + ' input').remove();
            jQuery("#li_" + id + ' img').attr('style' , 'display: block;position:absolute;left: 40%;top: 50%;width:25px;height:25px');
            jQuery("#sort_btn").click();
        }
    }
</script>