<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<?php
//error_reporting(0); //hide error
//Demo 4: GuessingA.php set cookies to avoid many submit times
header("Content-Type:text/html; charset=utf-8"); 
$servername = "localhost";
$username = "id21593489_id17615458_tangb";
$password = "c5t9QN19L(W6EPRq";
$database = "id21593489_id17615458_zadmin_website";

$conn = mysqli_connect($servername, $username, $password)or die("cannot connect to the db, please press 'F5' Key");//connect server
mysqli_select_db($conn,$database)or die("cannot open the selected db, please press 'F5' Key");//select db
mysqli_query($conn,"set names utf8");//utf8 to select data, allow show chinese
$data=mysqli_query($conn,"SELECT cName, nickName FROM `altar` WHERE id<2000") or die("no data");//all table in contact db
?>
  <title>e-Leave System</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="icon" type="image/png" href="/images/favicon/favicon-32x32.png" sizes="32x32">
        <link rel="icon" type="image/png" href="/images/favicon/favicon-16x16.png" sizes="16x16">
	<link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/w3.css">
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
	<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
	<script src="js/jquery-ui.multidatespicker.js"></script>
	
	<link rel="stylesheet" href="css/jquery-ui.css">
	<link rel="stylesheet" href="css/jquery-ui.multidatespicker.css">
	
 	<script>
 	var date = new Date();

    jQuery(document).ready(function($) {
    
         $('#mdp-date').multiDatesPicker({
       		     dateFormat:"yy-mm-dd",
       		     //beforeShowDay: disableSpecificWeekDays,
       		     minDate: 0  //select from today
       	});
    
        //avoid calendar redrawn after every selection
        $.datepicker._selectDateOverload = $.datepicker._selectDate;
        $.datepicker._selectDate = function (id, dateStr) {
    	var target = $(id);
    	var inst = this._getInst(target[0]);
    	if (target[0].multiDatesPicker != null) {
    		inst.inline = true;
    		$.datepicker._selectDateOverload(id, dateStr);
    		inst.inline = false;	        	
    		target[0].multiDatesPicker.changed = false;
    	} else {
    		$.datepicker._selectDateOverload(id, dateStr);
    		target.multiDatesPicker.changed = false;
    	}
    	this._updateDatepicker(inst);
    	//end avoidance
    }; 
    });
	function disableSpecificWeekDays(date) {
          var theday = date.getDate() + '/' +
             (date.getMonth() + 1) + '/' +date.getFullYear();
          var day = date.getDay();
          return [day == 0 || day == 6];
        }
 	 </script>
</head>

<body>
<div id="wrapper">
<div id="main" class="clearfix">
<div class="w3-center w3-blue w3-padding-48">
<h1>Online Leave System</h1>
</div>

<form name"absenseForm" method="post" action="absence_complete_jquery.php" onsubmit="return confirm('Are you sure to submit?\nName:'+document.getElementById('nickName').value+'\nDate:'+document.getElementById('mdp-date').value+'\nRemark:'+document.getElementById('remark').value+'\nPlease contact altar services committe as soon as possible. Thank you.');">
<div class="w3-content w3-container w3-padding-64">
    
      <p>Complete the form and contact altar services committe as soon as possible. Thank you.</p>
      <div class="w3-row-padding" style="margin:0 -16px 8px -16px">
        <div class="w3-half">
          <p>Name: 
		  <select class="w3-input w3-border w3-hover-light-grey" name="nickName" id="nickName" onchange="showAbsence(this.value)" required>
				<option disabled selected value> -- select an option -- </option>
		  <?php
				if (!$data)  die ("");
					else {
					while ($row=mysqli_fetch_array($data,MYSQLI_ASSOC))  {
						print("<option value=" . $row["nickName"] . ">" . $row["cName"] . "</option>");
					}
					}
					
					mysqli_close($conn);
					?>
			</select>		
			</p>
		  </div>
        <div class="w3-half">
		  <p>Absence Date: <input class="w3-input w3-border w3-hover-light-grey" name="mdp-date" id="mdp-date" required readonly>
		  </div>
      </div>
	  <p> Remarks:<input class="w3-input w3-border w3-hover-light-grey" type="text" placeholder="e.g. full day leave / (available) only 7:30am" name="remark" id="remark"> </p>
	  <p id="displayAbsence"></p>
	  <button class="w3-btn w3-section w3-blue w3-right">Send</button>
    
</div>
</form>
</div>
</div>

<script>
function showAbsence(str) {
	if (str.length == 0) { 
        document.getElementById("displayAbsence").innerHTML = "";
        return;
    } else {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("displayAbsence").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET", "absence_name.php?q=" + str, true);
        xmlhttp.send();
    }
}
</script>

<div id="footer" class="w3-center w3-dark-grey w3-padding-48 w3-hover-text-black">
	 &copy; 2016
	 <script>new Date().getFullYear()>2016&&document.write("-"+new Date().getFullYear()); </script>
	 , <a href="/">tangb.tk</a>, 
	 All Rights Reserved
     &middot; 
</div>


</body>
</html>