<?php

header("Access-Control-Allow-Origin: *");

header("Access-Control-Allow-Credentials: true ");

header("Access-Control-Allow-Methods: OPTIONS, GET, POST");

require "../config/config.php";

require "ajaxserver.php";

?>
<style>
header{
	margin: 20px 11px;
}
table, td, th {    
	border: 1px solid #ddd;
	text-align: left;
}
table {
	border-collapse: collapse;
	width: 98%;	
	margin: 20px 11px;
}
th, td {
	padding: 15px 10px;
	font-size: 14px;
 }
th {
	background-color: #f0f0f0;
	color: #555;
}
.loader {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgba(1,1,1,.7);
	display:none;
}
.loader span{
	position: relative;
    top: 50%;
    left: 42%;
    color: white;
    font-size: 15px;
}
</style>
<script>
$(document).ready(function(e) {
	
   $(".ranges").hide();
   
   $(".specific_date").hide();
   
   $(".select_time").change(function(){
	   
		if($(".select_time option:selected").val()=="cr"){
			
	       $(".ranges").show();
		   
		   $(".specific_date").hide();
		   
         } else if($(".select_time option:selected").val()=="sd"){
			 
			$(".specific_date").show();
			
			$(".ranges").hide();
			
		 }else{
			 
			$(".ranges").hide();
			
            $(".specific_date").hide();
		 }
	  })
	var ajax_url = <?php echo AJAX_URL ?>
	
	var BRAND_DATA = loadAJAX(ajax_url,"get_brands=true");
	
	    BRAND_DATA = JSON.parse(BRAND_DATA);
	
	if(BRAND_DATA.length>0){
		
		for (var key in BRAND_DATA) {
			
			var brand_id = BRAND_DATA[key]["id"];

			var brand_name = BRAND_DATA[key]["name"];

			  $("#brands_selection").append("<option value=" + brand_id + ">" + brand_name + "</option>");
			
		 }
	 } 
//here is the complete code for seraching the orders

$("input[type='submit']").click(function(event){
	
	console.log(ajax_url);
	
	var selected_time  = $(".select_time  option:selected").val();
	
	var selected_by    = $(".selected_by option:selected").val();
	
	var range1         = $("#range1").val();
	
	var range2         = $("#range2").val();
	
	var specific_date  = $("#specific_date").val();
	
	var data           = "selected_time="+selected_time+"&selected_by="+selected_by+"&specific_date="+specific_date+"&range1="+range1+"&range2="+range2+"&page=1&search_by_brand=true&limit=20";
	
	var REPORT_DATA    = loadAJAX(ajax_url,data);
	
	console.log(REPORT_DATA);
	
})

function show_data(BRAND_DATA){
		
	for (var key in BRAND_DATA) {
				
		var brand_id      = BRAND_DATA[key]["brand_id"];
		
		var brand_name    = BRAND_DATA[key]["brand_name"];
		
		var product_id    = BRAND_DATA[key]["product_id"];
		
		var product_sku   = BRAND_DATA[key]["product_sku"];
		
		var product_name  = BRAND_DATA[key]["product_name"];
		
		var product_quantities  = BRAND_DATA[key]["product_quantities"];
		
		var product_sale  = BRAND_DATA[key]["product_sale"];
		
		$("#show_record tbody").append("<tr><td>"+product_id+"</td><td>"+product_sku+"</td><td>"+product_name+"</td><td>"+brand_id+"</td><td>"+brand_name+"</td><td>"+product_quantities+"</td><td>"+product_sale+"</td></tr>");
				
			}
}
	
function loadAJAX(ajax_url,data) {
	
    var response_data = "";

    $.ajax({

        url: ajax_url,

        type: "POST",

        data: data,

        global: true,

        async: false,

        cache: false,

        success: function(response) {

            response_data = response;
			
			$("#show_record tbody").empty();
        }
    });

    return response_data;
}
	
});
</script>
<div class="loader"><span>Please wait  it's take time to load.....</span></div>
<div class="sub_conatiner">
  <header>
   <select id="brands_selection" class="selected_by">
    </select>
   <select class="select_time">
        <option value="d">Today</option>
        <option value="y">Yesterday</option>
        <option value="tw">This Week</option>
        <option value="lw">Last week</option>
        <option value="tm">This Month</option>
        <option value="lm">Last Month</option>
        <option value="ty">This Year</option>
        <option value="ly">Last Year</option>
        <option value="sd">Specific Date</option>
        <option value="cr">Date Range</option>
     </select>
        <input type="text" class="from ranges" id="range1">
        <input type="text" class="to ranges" id="range2">
        <input type="text" class="specific_date show_date" id="specific_date"  placeholder="Specific date">
        <input type="submit" name="submit" value="Generate Report" />
  </header>
   <table id="show_record">
    <thead>
      <tr>
        <th>Product Id</th>
        <th>Product Sku</th>
        <th>product Name</th>
        <th>Brand Id</th>
        <th>Brand Name</th>
        <th>Product Quntities</th>
        <th>Total  Sale</th>
       </tr>
    </thead>
    <tbody>
    </tbody>
    <tfoot>
      <tr>
       <td colspan="7" style="text-align:right;">
         <input type="submit" value="Prev" />
         <input type="submit" value="Next" />
       </td>
      </tr>
    </tfoot>
</table>
</div>
<script>
  $(document).ready(function(e) {
	   $("#specific_date").datepicker({dateFormat: 'dd-mm-yy'});
	   $("#range1").datepicker({dateFormat: 'dd-mm-yy'});
	   $("#range2").datepicker({dateFormat: 'dd-mm-yy'});
  });
</script>