<?php
require_once plugin_dir_path( __FILE__ ) .'header/header-main.php';
require_once plugin_dir_path( __FILE__ ) .'class/afe_blog.php';
require_once plugin_dir_path( __FILE__ ) .'API/google/Google_Client_v1.php';
require_once plugin_dir_path( __FILE__ ) .'API/google/contrib/Google_YouTubeService.php';

$afe_blog_main=new afeblogs();
$afe_catgories=$afe_blog_main->afe_article_category('main');

?>
<div class="container">
  <div class="row">
    <div class="col-md-12">

		<div class="tabbable-panel">
			<div class="tabbable-line">
                <h2 style="margin: 20px 0 20px;">Affi Search</h2>
				<ul class="nav nav-tabs ">
					<li class="active">
						<a href="#tab_default_1" data_id="1" data-toggle="tab"> Article Search </a>
					</li>
					<li>
						<a href="#tab_default_2" data_id="2" data-toggle="tab"> Video Search </a>
					</li>
					<li>
						<a href="#tab_default_3" data_id="3" data-toggle="tab"> Image Search </a>
					</li>
				</ul>
				<div class="tab-content"><div class="tab-pane active" id="tab_default_1">
                          <!-- Multiple Item Picker -->
                    <form id="form-article">      
                        <div class="jumbotron" style="padding:0;background-color:white;">
                            <select class="form-control " name="selectpicker" id="selectpicker" style="background-color: #e0e0e082;padding: 10px;height:auto;color: black;">
                                <option value="0">Choose one of the following category</option>
                                <?php
                                foreach($afe_catgories as $catgory)
                                {
                                    echo '<option value="'.$catgory->id.'">'.$catgory->cat_name.'</option>';
                                }
                                ?>
                            </select>
                            <div id="afe_subcat_loader" style="display: flex;justify-content: center;"><img src="<?php echo plugins_url('affiembed/includes/assets/images/loader_afe.gif'); ?>" id="afe_loader" style="display:none;"> </div>
                            <div id="afe_subcat_result"></div>
                        </div>  
                        <div style="display:flex;">
                            <input type="text" name="afe_keyword" class="afe_keyword" id="afe_keyword" placeholder="enter your keyword" value="" style="width:25%;"> 
                            <div class="wrapper article_submit_keyword">
                                <input type="button" class="button btnPush btnBlueGreen" value="Search Category" />
                            </div>
                        </div>
                    </form>
                    <form id="form-article-save">
                        <div id="afe_subcat_loader" style="display: flex;justify-content: center;"><img src="<?php echo plugins_url('affiembed/includes/assets/images/loader_afe.gif'); ?>" id="afe_search_loaders" style="display:none;"> </div>
                        <div id="afe_check_result"></div>
                        <div class="afe_search_main_div" style="display:none;">
                            <h2>Results <input type="button" name="afe_save" id="afe_save" style="background-color: #511fb4d1;box-shadow: none;border: none;text-shadow: none;" class="button button-primary alignright" value=" Save Results" /></h2>
                        </div>
                        <div id="afe_search_result"> 
                        </div>
                    </form>    
					</div>
					
					<div class="tab-pane" id="tab_default_2">
					    <h3>Video Search</h3>
					    <form id="form_video">
                            <div style="display:flex;" class="vid-search_cls">
                                <input type="text" name="afe_video_keyword" class="afe_cls_video_keyword" id="afe_id_video_keyword" placeholder="enter your keyword" value="" style="width:25%;"> 
                                <div class="wrapper video_submit_keyword">
                                    <input type="button" class="button btnPushVideo btnBlueGreen" value="Search" />
                                </div>
                            </div>
                        </form>    
					    <form id="form_video_save">
                            <div id="afe_video_subcat_loader" style="display: flex;justify-content: center;"><img src="<?php echo plugins_url('affiembed/includes/assets/images/loader_afe.gif'); ?>" id="afe_video_search_loaders" style="display:none;"> </div>
                            <div id="afe_video_check_result"></div>                        
                            <div class="afe_video_search_main_div" style="display:none;">
                                <h2>Results <input type="button" name="afe_video_save" id="afe_video_save" style="background-color: #511fb4d1;box-shadow: none;border: none;text-shadow: none;" class="button button-primary alignright" value=" Save Results" /></h2>
                            </div>
                            <div id="afe_video_search_result"> 
                            </div>
                        </form>    
					</div>

					<div class="tab-pane" id="tab_default_3">
					    <h3>Image Search</h3>
					    <form id="form_image" class="img-search-cls">
                            <div style="display:flex;">
                                <input type="text" name="afe_image" class="afe_img_cls" id="afe_img_id" placeholder="enter your keyword for image" value="" style="width:25%;"> 
                                <div class="wrapper submit_img_key">
                                    <input type="button" class="button btnPushImage btnBlueGreen" value="Search" />
                                </div>
                            </div>
                        </form>    
                        <div id="afe_img_subcat_loader" style="display: flex;justify-content: center;"><img src="<?php echo plugins_url('affiembed/includes/assets/images/loader_afe.gif'); ?>" id="afe_img_search_loaders" style="display:none;"> </div>
                        <div id="afe_img_check_result"></div>                        
                        <div class="afe_img_search_main_div" style="display:none;">
                            <h2>Results <input type="button" name="afe_img_save" id="afe_img_save" style="background-color: #511fb4d1;box-shadow: none;border: none;text-shadow: none;" class="button button-primary alignright" value=" Save Results" /></h2>
                        </div>
                        <div id="afe_img_search_result"> 
                        </div>
					</div>
				</div>
			</div>
		</div>

    </div>
  </div>
</div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.2/js/bootstrap-select.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
     /* Multiple Item Picker */
  jQuery('.selectpicker').selectpicker({
    style: 'btn-default'
  });
  

jQuery('#selectpicker').change(function () 
{
	var afe_category_id = jQuery(this).val();

	if(afe_category_id>0)
	{
		jQuery("#afe_loader").css("display","block");
		jQuery("#afe_loader").css("height","100px");
		jQuery("#afe_subcat_result").css("display","none");
		var data = {
			action: 'afe_get_subcat',
			afe_subcat_id : afe_category_id
		};
		jQuery.post(ajaxurl, data, function(response) {
			jQuery("#afe_subcat_result").html(response);
			jQuery("#afe_loader").css("display","none"); 
			jQuery("#afe_subcat_result").css("display","block");
			//requiredCheckboxes();
		});
		
	}
	else
	{
		jQuery("#afe_subcat_result").html(' ');	
		jQuery("#afe_subcat_result").hide();
	}
});

function requiredCheckboxes(){
	
	var requiredCheckboxes = jQuery('#afe_subcat_result ul li .afe_subcat_art');
    
        if(requiredCheckboxes.is(':checked')) {
            requiredCheckboxes.removeAttr('required');
        } else {
            requiredCheckboxes.attr('required', 'required');
        }
   
}
jQuery(document).ready(function() {
    jQuery("#form-article").validate({
        rules: {
            selectpicker: {
                    selectcheck: true
                }            
        }
    });
    jQuery('.btnPush').click(function () {
    
        if(jQuery("#form-article").valid())
        {
                var afe_selectcat_array = [];
                jQuery.each(jQuery(".afe_subcat_check:checked"), function(){            
                    afe_selectcat_array.push(jQuery(this).val());
                });
                var afe_array_val = afe_selectcat_array.join(", ")
                
                
                var afe_keyword = jQuery("#afe_keyword").val();
                
                jQuery("#afe_search_loaders").css("display","block");
        		jQuery("#afe_search_loaders").css("height","100px");
        		jQuery("#afe_search_result").css("display","none");
        		jQuery("#afe_check_result").css("display","none");
    
    		
        		var data_search = {
        			action: 'afe_get_search_result',
        			afe_ajax_array_val : afe_array_val,
        			afe_ajax_keyword : afe_keyword
        		};
        		jQuery.post(ajaxurl, data_search, function(response) 
        		{
        			jQuery("#afe_search_result").html(response);
        			jQuery("#afe_search_loaders").css("display","none"); 
            		jQuery("#afe_search_result").css("display","block");
            		jQuery(".afe_search_main_div").css("display","block");
        		});
        }        
    });
        jQuery.validator.addMethod('selectcheck', function (value) {
            return (value != '0');
        }, "Please Choose atleast one option");    
});

jQuery(document).ready(function() {
    jQuery("#form-article-save").validate({
        rules: {
            'afe_check_vals[]': {required: true}
        },
        messages: {
            'afe_check_vals[]': "You must check at least 1 box"
        }
    });
    jQuery('#afe_save').click(function()
    {
        if(jQuery("#form-article-save").valid())
        {
            var afe_array_check_result = [];
            jQuery.each(jQuery(".afe_check_val:checked"), function(){            
                afe_array_check_result.push(jQuery(this).val());
            });
            var afe_array_check_val = afe_array_check_result.join(",");
            
        	jQuery("#afe_check_result").css("display","none");
        	var check_data_search = {
                    			action: 'afe_get_check_result',
                    			afe_ajax_check_array_val : afe_array_check_val
                    		};
            jQuery.post(ajaxurl, check_data_search, function(check_response) 
            {
                jQuery("#afe_check_result").html(check_response);
        		jQuery("#afe_check_result").css("display","block");
            });
        }    
    });
});

jQuery(document).ready(function() {
    jQuery("#form_video").validate({
        rules: {
            afe_video_keyword: "required"
        },
        messages: {
            afe_video_keyword: "Please enter keyword"
        }
    });
    jQuery('.btnPushVideo').click(function ()
    {
        if(jQuery("#form_video").valid())
        {
            var afe_video_keyword = jQuery("#afe_id_video_keyword").val();
        
            jQuery("#afe_video_search_loaders").css("display","block");
        	jQuery("#afe_video_search_loaders").css("height","100px");
        	jQuery("#afe_video_search_result").css("display","none");
        	jQuery("#afe_video_check_result").css("display","none");
        
        
        	var vid_data_search = {
        		action: 'afe_search_video_result',
        		afe_ajax_vid_keyword : afe_video_keyword
        	};
        	jQuery.post(ajaxurl, vid_data_search, function(vid_response) 
        	{
        		jQuery("#afe_video_search_result").html(vid_response);
        		jQuery("#afe_video_search_loaders").css("display","none"); 
        		jQuery("#afe_video_search_result").css("display","block");
        		jQuery(".afe_video_search_main_div").css("display","block");
        	});
        }
    });
});

jQuery(document).ready(function() {
    jQuery("#form_video_save").validate({
        rules: {
            'afe_video_check_vals[]': {required: true}
        },
        messages: {
            'afe_video_check_vals[]': "You must check at least 1 box"
        }
    });
    jQuery('#afe_video_save').click(function()
    {
        if(jQuery("#form_video_save").valid())
        {
            var afe_video_array_check_result = [];
            jQuery.each(jQuery(".afe_video_check_val:checked"), function(){            
                afe_video_array_check_result.push(jQuery(this).val());
            });
            var afe_video_array_check_val = afe_video_array_check_result.join(",");
            
        	jQuery("#afe_video_check_result").css("display","none");
        	var video_check_data_search = {
                    			action: 'afe_video_check_results',
                    			afe_ajax_video_check_array_val : afe_video_array_check_val
                    		};
            jQuery.post(ajaxurl, video_check_data_search, function(video_check_response) 
            {
                jQuery("#afe_video_check_result").html(video_check_response);
        		jQuery("#afe_video_check_result").css("display","block");
            });
        }
    });
});

jQuery(document).ready(function() {
    jQuery("#form_image").validate({
        rules: {
            afe_image: "required"
        },
        messages: {
            afe_image: "Please enter keyword"
        }
    });
    jQuery('.btnPushImage').click(function ()
    {
        if(jQuery("#form_image").valid())
        {
            var API_KEY = '13567124-98ebe95018edbf2b8743e43d6';
            var afe_img_key = jQuery("#afe_img_id").val();
            var img_pixa_url = "https://pixabay.com/api/?key="+API_KEY+"&q="+encodeURIComponent(afe_img_key)+"&per_page=100";
        
        
            jQuery("#afe_img_search_loaders").css("display","block");
        	jQuery("#afe_img_search_loaders").css("height","100px");
        	jQuery("#afe_img_search_result").css("display","none");
        
        
        	var img_data_search = {
        		action: 'afe_search_img_result',
        		afe_ajax_img_keyword : img_pixa_url
        	};
        	jQuery.post(ajaxurl, img_data_search, function(img_response) 
        	{
                jQuery("#afe_img_search_result").html(img_response);
        		jQuery("#afe_img_search_loaders").css("display","none"); 
        		jQuery("#afe_img_search_result").css("display","block");
        		jQuery(".afe_img_search_main_div").css("display","block");
        	});
        }
    });
});

jQuery('#afe_img_save').click(function()
{
    var afe_img_array_check_result = [];
    jQuery.each(jQuery(".img_check_cls:checked"), function(){            
        afe_img_array_check_result.push(jQuery(this).val());
    });
    var afe_img_array_check_val = afe_img_array_check_result;
    //console.log(afe_img_array_check_val);
    
	jQuery("#afe_img_check_result").css("display","none");
	var img_check_data_search = {
            			action: 'afe_img_check_results',
            			afe_ajax_img_check_array_val : afe_img_array_check_val
            		};
    jQuery.post(ajaxurl, img_check_data_search, function(img_check_response) 
    {
        jQuery("#afe_img_check_result").html(img_check_response);
		jQuery("#afe_img_check_result").css("display","block");
    });
});
</script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js"></script>