<?php
include 'header.php';
include('xcrud/xcrud.php');
echo Xcrud::load_css();
$xcrud=Xcrud::get_instance();
$xcrud->table('compare_data');
$xcrud->fields('data',true);
$xcrud->columns('data',true);
$xcrud->relation('customer','customer','customer_id','name');
$xcrud->order_by('date','desc');
//$xcrud->set_attr('customer',array('data-value'=>'{data}'));
$xcrud->unset_title();
$xcrud->unset_add();
$xcrud->unset_edit();
$xcrud->unset_view();
$xcrud->button('javascript:;','Compare','fa fa-exchange','',array('onclick'=>'getCompareData(this)','data-value'=>'{data}'));
if($type!='admin'){
	$xcrud->where('user_id',$_SESSION['admin_id']);
	$xcrud->unset_remove();
}
?>
<style>
.mymodal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.mymodal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.myclose {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.myclose:hover,
.myclose:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

mytable {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {background-color: #f2f2f2;}
</style>
<div class="row">
	<div class="col-sm-12"><button class="btn btn-blue btn-block">Customer Compare Data</button></div>
	<div class="col-sm-12">&nbsp</div>
	<div class="col-sm-12">
<?php
echo $xcrud->render();
?>
	</div>
</div>
</div>
</div>
</div>

<!-- The Modal -->
<div id="custCompModal" class="mymodal">

  <!-- Modal content -->
  <div class="mymodal-content">
    <span class="myclose">&times;</span>
	<div id="temp_cust_compare_data_div" style="display:none"></div>
    <div id="cust_compare_data_div">Some text in the Modal..</div>
  </div>

</div>
<?php
include "footer.php";
echo Xcrud::load_js();
?>
<script>
var modal = document.getElementById("custCompModal");

var span = document.getElementsByClassName("myclose")[0];

/*btn.onclick = function() {
  modal.style.display = "block";
}*/
function getCompareData(button){
	//console.log(button.dataset.value);
	const json_value=button.dataset.value;
	const json_text=$("#cust_compare_data_div").html(json_value)[0].innerHTML;
	const plain_value=$("#cust_compare_data_div");
	value=JSON.parse(json_text);
	var data_str="<table  class='mytable'><tr><th></th><th>Name</th><th>Chassis</th><th>Engin</th><th>Sale Amount</th><th>Hypo</th></tr>";
	data_str+="<tr><td>DISCLAIMER</td><td>"+value.dname+"</td><td>"+value.dchassis+"</td><td>"+value.dengin+"</td><td>"+value.dsale_amount+"</td><td>"+value.dhypo+"</td></tr>"
	data_str+="<tr><td>TaxInvoice</td><td>"+value.iname+"</td><td>"+value.ichassis+"</td><td>"+value.iengin+"</td><td>"+value.isale_amount+"</td><td>"+value.ihypo+"</td></tr>"
	data_str+="<tr><td>Result</td><td>"+value.is_name+"</td><td>"+value.is_chassis+"</td><td>"+value.is_engin+"</td><td>"+value.is_sale_amount+"</td><td>"+value.is_hypo+"</td></tr>"
	data_str+="</table>";
	$("#cust_compare_data_div").html(data_str);
	//alert(data)
	modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
} 
</script>