<!DOCTYPE html>
<html>
<head>
    <title>SMV Productivity</title>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">
<link rel="stylesheet" type="text/css" href="css/smvvalue.css">

<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
 <script src="js/jquery-ui.js"></script>
 <link rel="stylesheet" href="js/jquery-ui.css">
 <?php
$today2 = date("Y.m.d");
?>
<script>
    
    $(function() {
        ajaxLoadData();
    $( "#StartDate" ).datepicker({
        dateFormat : 'yy.mm.dd',
        maxDate: '0',
        defaultDate: '<?=$today2?>',
        onSelect: function() {   
  ajaxLoadData();
    },
    onClose: function( selectedDate ) {
	$( "#EndDate" ).datepicker( "option", "minDate", selectedDate );
			}
    });
        $( "#EndDate" ).datepicker({
        dateFormat : 'yy.mm.dd',
        maxDate: '0',
        defaultDate: '<?=$today2?>',
        onSelect: function() {   
        ajaxLoadData();
    },
    onClose: function( selectedDate ) {
	$( "#StartDate" ).datepicker( "option", "maxDate", selectedDate );
			}
    });  
    });  
function ajaxLoadData () {
          $.ajax({
                type: "POST",
                url: "wh_prc.php",
                cache : false,
                dataType: "html",
                data: { "StartDate": $("#StartDate").val(),"EndDate": $("#EndDate").val(), "Section": "1" },
                success: (function(data){
                   if( data.indexOf("<tr>") !=-1){
                    $("#Section1").html(data);   
                   }
                    })
            });
}
function launchIntoFullscreen(element) {
  if(element.requestFullscreen) {
    element.requestFullscreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if(element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}
function exitFullscreen() {
  if(document.exitFullscreen) {
    document.exitFullscreen();
  } else if(document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if(document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  }
}	      
        </script>

</head>
<body>
    
<div id="wrap">
    <div id="header">
        <p align="center">
            <label for="StartDate" style="font-size: 25px;">Date:&nbsp;</label> 
            <input type="text" id="StartDate" name="StartDate" style="width: 150px; font-size: 25px; height: 25px;" value="<?= $today2;?>"> 
             <label for="EndDate" style="font-size: 25px;">To:&nbsp;</label> 
            <input type="text" id="EndDate" name="EndDate" style="width: 150px; font-size: 25px; height: 25px;" value="<?= $today2;?>"> 
    </div>
	<div id="main2">      
<table class="data_table">
  <thead>
    <tr >
<!--        <th rowspan="2"><div align="center">Week No.</div></th>         -->
        <th><div align="center">Section </div></th> 
         <th><div align="center">Total Unit Qty.</div></th>
        <th><div align="center">Total Unit Value</div></th>
       
    </tr>
  </thead>
  <tbody id="Section1">
      <tr><td colspan="3"><div align="center"><img src="images/loading.gif" ></div></td></tr>
  </tbody>
</table >
	</div>
       
     <div id="footer">
	 <button onclick="launchIntoFullscreen(document.documentElement);">Full</button>
       <button onclick="exitFullscreen();" >Exit</button> 	
	</div>   
</div>
</body>
</html>