<?php
/**
* Template Name: Vega Search
*/
?>
<title>Vega Search</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
	table
	{width:400px;}
	.procat
	{width:400px;}
	.pa
	{width:170px;}
	.imglink:hover
	{text-decoration: underline;cursor:pointer;}
	.sglink
	{text-decoration: underline;cursor:pointer;}
@media only screen and (max-width: 767px)
{
	.procat
	{width:100%;}

	table{
		width:100%;
	}
}
</style>
<script src='<?php echo get_stylesheet_directory_uri();?>/select2/dist/js/jquery.min.js' type='text/javascript'></script>
<script src='<?php echo get_stylesheet_directory_uri();?>/select2/dist/js/select2.min.js' type='text/javascript'></script>
<link href='<?php echo get_stylesheet_directory_uri();?>/select2/dist/css/select2.min.css' rel='stylesheet' type='text/css'>

<div id="cats" align="center">
	<?php display_categories(); ?>
</div>
<br>
<div id="products" align="center">
	<?php display_products(); ?>
</div>
<table align="center">
	<tr>
		<td valign="top">
			<div align="center">
				<?php displat_color_attributes(); ?>
			</div>
		</td>
		<td valign="top">
			<div align="center">
				<?php displat_size_attributes(); ?>
			</div>
		</td>		
	</tr>
</table>
<br>
<div id='result' style="text-align: center;"></div>
<?php
function displat_color_attributes(){
	$terms = get_terms( 'pa_color' ); ?>
	<select class="pa" id='selColor' onChange="javasxcript:getproductdata();" >
	<option value='null'>Color: Any</option> <?php
	if ( ! empty( $terms ) && ! is_wp_error( $terms ) ){
	foreach ( $terms as $term ) { ?>
		<option value='<?php echo $term->slug;?>'><?php echo $term->name; ?></option><?php
								}
	}
}

function displat_size_attributes(){
		$terms = get_terms( 'pa_size' ); ?>
	<select class="pa" id='selSize' onChange="javasxcript:getproductdata();" >
	<option value='null'>Size: Any</option> <?php
	if ( ! empty( $terms ) && ! is_wp_error( $terms ) ){
	foreach ( $terms as $term ) { ?>
		<option value='<?php echo $term->slug;?>'><?php echo $term->name; ?></option><?php
								}
	}

}

function display_products(){
    $args = array(
        'post_type'      => 'product',
        'posts_per_page' => 1000,
//        'product_cat'    => 'men',
		'orderby' => 'title',
		'order' => 'ASC'
    );

    $loop = new WP_Query( $args );
?>
<select class="procat" id='selProduct' onChange="javasxcript:getproductdata();">
	<option value='0'>Select Product</option>
<?php
    while ( $loop->have_posts() ) : $loop->the_post();
        global $product;?>
		 <option value='<?php echo get_the_id();?>'><?php echo get_the_title();?></option>
		<?php
    endwhile;

    wp_reset_query();
?>
</select>
<br>
<br/>
<?php
}

function display_categories(){	
	$orderby = 'name';
	$order = 'asc';
	$hide_empty = true ;
	$cat_args = array(
		'orderby'    => $orderby,
		'order'      => $order,
		'hide_empty' => $hide_empty,
	);

	$product_categories = get_terms( 'product_cat', $cat_args );

	if( !empty($product_categories) ){?>
		<select class="procat" id='selCategory' onChange="javasxcript:getproductsbycat(); ">
		<option value='null' >Select Category</option>
		<?php
		foreach ($product_categories as $key => $category) { 
			//echo '<a href="'.get_term_link($category).'" >';?>
			 <option value='<?php echo $category->slug;?>'><?php echo $category->name.' ( '.$category->slug.' )'; ?></option>
			<?php        
		}?>
		</select>
		<?php
		}	
}
?>
<script>
function sizeguide(id){

	var	sg_status = document.getElementById("sg"+id).style.display;

	if (sg_status == "none")
		document.getElementById("sg"+id).style.display = "block";
	else
		document.getElementById("sg"+id).style.display = "none";
}
	
function varimg(image_id){
	
	var	varimg_status = document.getElementById("varimg"+image_id).style.display;

	if (varimg_status == "none")
		document.getElementById("varimg"+image_id).style.display = "block";
	else
		document.getElementById("varimg"+image_id).style.display = "none";
}

$(document).ready(function(){
  	$("#selProduct").select2();
	$("#selCategory").select2();
	$("#selColor").select2();
	$("#selSize").select2();
});

function getproductsbycat(){
	
	var category = $('#selCategory').val();
	var loader = "<img  style='text-align: center;' src='<?php echo get_stylesheet_directory_uri();?>/img/loader4.gif' />";
	// alert(product_id);
	loader = loader + "<br /><br />";
	document.getElementById("products").innerHTML	 = loader;

	const xhr = new XMLHttpRequest ();

	xhr.onload = function () {
	const serverResponse = document.getElementById("products");
	serverResponse.innerHTML = this.responseText;
	$("#selProduct").select2();
		
	}

	xhr.open("POST", "<?php echo get_stylesheet_directory_uri();?>/do/get-products-do.php"); 
	xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	xhr.send("category="+category);
}	
	
	
function getproductdata(){
	
//	var instock = document.querySelector('#instock').checked;
	// alert(instock);
	
	var category = $('#selCategory').val();
	var product_id = $('#selProduct').val();
	var pa_color = $('#selColor').val();
	var pa_size = $('#selSize').val();
	
	var loader = "<img style='text-align: center;' src='<?php echo get_stylesheet_directory_uri();?>/img/loader3.gif' />";
	// alert(product_id);
	
	document.getElementById("result").innerHTML	 = loader;		

	const xhr = new XMLHttpRequest ();

	xhr.onload = function () {
	const serverResponse = document.getElementById("result");
	serverResponse.innerHTML = this.responseText;	
		
	}

	xhr.open("POST", "<?php echo get_stylesheet_directory_uri();?>/do/vs-do.php"); 
	xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	xhr.send("product_id="+product_id+"&pa_color="+pa_color+"&pa_size="+pa_size+"&category="+category);
}
</script>