echo "var products=".json_encode($product_data).";";
?>


$(document).ready(function(){
	product_render(products)

	function priceSort(products){  // i need to send products to pricesort
		var product_sort = null;
		if($(this).val() === "1"){
			product_sort  = products.slice();
			product_sort.sort(function(a,b){
				return parseInt(a.product_price) > parseInt(b.product_price);
			});
			console.log(products);
		}else if($(this).val() === "2"){
			product_sort  = products.slice();
			product_sort.sort(function(a,b){
				return parseInt(a.product_price) < parseInt(b.product_price);
			});
			console.log(products);
		}else{
			product_sort = products;
		}
		product_render(product_sort);
	}
	$(document).on("change", "#productFilter1", priceSort);  // $(document).on("change", "#productFilter1", priceSort(products));
  	// onchange parameters will give value  ot text selected by user
  /*

  You can also pass a named function to $( document ).ready() instead of passing an anonymous function.
// Passing a named function instead of an anonymous function.

function readyFn( jQuery ) {
    // Code to run when the document is ready.
}

$( document ).ready( readyFn );

  What you are doing is perfectly fine, since the click event passes an event object as the first parameter, the variable word in your saySomething function will be that event object.
If you want to define yourself what word will be, there is no way around wrapping it in some other function and call it with the value you want.
  */



  function productsFilter(){
    filter_list = roofstyleFilter();  ///------>an array of roofstyle seleceted products will be in filter_list
    //products of array
    sorted_list = priceSort(filter_list);   //only selected roodstyle products need to be sended as prodcuts into priceSort()
  }



function roofstyleFilter(){
		var filter_option = $("#productFilter2 :selected").text();
		alert(filter_option);
		console.log(typeof filter_option);
		var product_filter = [];
		$.each(products, function(key,value){
			console.log(typeof value["roofstyle"]);
			if (value["roofstyle"] == filter_option){
				product_filter.push(value);
			}
		});
		console.log(product_filter);
		console.log(typeof product_filter);
	}
	$(document).on("change", "#productFilter2",roofstyleFilter);


function product_render(product_sort){
		$("#row_data").html("");
		$.each(product_sort, function(key,value){
			var data = `
			<div class="col-xs-12 col-md-6 col-lg-6 product">
			<div class="card">
			<a href="<?php echo get_page_link( get_page_by_title( productDetail )->ID ); ?>">
			<img class="card-img-top" src="<?php bloginfo('template_url'); ?>/images/carport/open_horizontal_carport.png" height="250px">
			<div class="card-block px-0">
			<h4 class="card-title">${value["title"]}</h4>
			<p class="card-text" >${value["dimension"]}</p>
			<p class="card-description mb-0" >${value["short_discription"]}</p>
			</div>
			</a>
			<div class="d-flex justify-content-between card-modify-build">
			<p class="text-danger mb-0 d-inline-flex align-items-end price" >${value["product_price"]}</p>
			<a class="btn btn-danger d-inline-flex text-white" data-toggle="modal" data-target="#requestQuoteModal">Request Quote</a>
			<a class="btn btn-danger d-inline-flex" href="#">Modify Build</a>
			</div>
			</div>
			</div>`
			$( "#row_data").append(data);
		});
	}