<script type="text/javascript"><!--
//issue,issue_staff,cid,dob,gender,issue_no,enname,expire,address,thname,issue_card,picture_no
function processdata(data){
  var tagID  = document.getElementById("context");
  var status = document.getElementById("status");
  var thname = data.thname.split("#");
  data.thnamep = thname[0];
  data.thnamef = thname[1];
  data.thnamem = thname[2];
  data.thnamel = thname[3];
  var enname = data.enname.split("#");
  data.ennamep = enname[0];
  data.ennamef = enname[1];
  data.ennamem = enname[2];
  data.ennamel = enname[3];
  var address = data.address.split("#");
  data.addressn = address[0];  
  data.addressm = address[1];  
  data.address2 = address[2];  
  data.address3 = address[3];  
  data.address4 = address[4];  
  data.addresst = address[5];  
  data.addressa = address[6];  
  data.addressp = address[7];  
  data.thname=data.thname.replace(/#/g,' ');
  data.enname=data.enname.replace(/#/g,' ');
  data.address=data.address.replace(/#/g,' ');

  for(k in data){
    var el = document.getElementById(k);
    if(el)  el.value = data[k];
    tagID.innerHTML = tagID.innerHTML + k +":"+data[k]+"<br>";
    status.innerHTML = status.innerHTML+ k +","; 
  }
}
// sends command to a XMLhttpsmartcard file, via GET, and displays the received answer
function ajaxrequest(cmd, tagID) {
    var request = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');  // XMLHttpRequest object
  // create the URL with data that will be sent to the server (a pair index=value)
  var  url = "http://127.0.0.1:8000" + cmd ;
  request.open("GET", url, true);      // define the request
  request.send(null);    // sends data
  // Check request status
  // If the response is received completely, will be transferred to the HTML tag with tagID
  request.onreadystatechange = function() {
    if (request.readyState == 1){
      clearTimeout(xmlHttpTimeout); 
    }else if (request.readyState == 4 && request.status == 200) {
        clearTimeout(xmlHttpTimeout); 
        try {
          var myObj = JSON.parse(this.responseText);
          processdata(myObj);
        }
        catch(err) {
          var myObj = "text"+ request.responseText;
          document.getElementById(tagID).innerHTML = myObj;
        }


    }
    else if (request.readyState == 4){ 
          clearTimeout(xmlHttpTimeout); 
        document.getElementById("status").innerHTML ="ERROR: " + request.status ;
    }
  }
  //request.timeout = 4000; // time in milliseconds  
    request.ontimeout = function (e) {      // XMLHttpRequest timed out. Do something here.
        clearTimeout(xmlHttpTimeout); 
        document.getElementById("status").innerHTML += "<br>" +"Timeout" ;
    };
    var xmlHttpTimeout=setTimeout(ajaxTimeout,20000);
      function ajaxTimeout(){
          request.abort();
         document.getElementById("status").innerHTML += "<br>" +"[set time out] Timeout" ;
      }

}
--></script>

	<div class="row">
		<div class="col-xl-12">
			<div class="breadcrumb-holder">
				<h1 class="main-title float-left">นักเรียนลาออก</h1>
					<ol class="breadcrumb float-right">
					<li class="breadcrumb-item">Home</li>
					<li class="breadcrumb-item active">Blank Page</li>
                    </ol>
                    <div class="clearfix"></div>
            </div>
		</div>
	</div>
    <!-- end row --> <!--
    <h5 style="cursor:pointer;" onclick="ajaxrequest('/status', 'context')"><u>get status</u></h5>
    <h5 style="cursor:pointer;" onclick="ajaxrequest('/connect', 'context')"><u>Connect Device</u></h5>
    <h5 style="cursor:pointer;" onclick="ajaxrequest('/checkcard', 'context')"><u>checkcard</u></h5>
    <h5 style="cursor:pointer;" onclick="ajaxrequest('/readcard', 'context')"><u>readcard</u></h5>
    <h5 style="cursor:pointer;" onclick="ajaxrequest('/readimage', 'context')"><u>readimage</u></h5>
-->       
    <div id="context" style="border:1px;border-style:solid;display:none">Here will be displayed the response from the php script.</div>
  <div id="status" style="border:1px;border-style:solid;display:none">status:</div>
  
<div class="row">
			
	<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">						


					
		<div class="card mb-3">
			
			<div class="card-header">
			<h3><i class="fa fa-file-text-o"></i> ผู้ยื่นคำร้อง</h3>								
			</div>
			<!-- end card-header -->	
			<form action="core/test.php" method="post" enctype="multipart/form-data">	
			<div class="card-body">
					<div class="row">
						<div class="form-inline col-md-6">
						<label>เลขบัตรประชาชน</label> &nbsp; &nbsp;
						<input type="text" class="form-control" name="idcard" id="cid" value="" style="color:red;"> &nbsp; &nbsp;
						<button class="btn btn-outline-danger" type="button" onclick="ajaxrequest('/readcard', 'context')"> อ่านข้อมูลบัตร</button>
						</div>			
					</div>
						<br>
					<div class="row">
						<div class="form-group col-md-4">
						<label>คำนำชื่อ</label>
						<input type="text" class="form-control" name="prefix" id="thnamep" value="" style="color:red;">    
						</div>
						<div class="form-group col-md-4">
						<label>ชื่อ</label>
						<input type="text" class="form-control" name="name" id="thnamef" value="" style="color:red;">    
						</div>
						<div class="form-group col-md-4">
						<label>นามสกุล</label>
						<input type="text" class="form-control" name="sname" id="thnamel" value="" style="color:red;">    
						</div>						
					</div>
					<div class="row">
						<div class="form-group col-md-4">
						<label>บ้านเลขที่</label>
						<input type="text" class="form-control" name="no" id="addressn" value="" style="color:red;">    
						</div>
						<div class="form-group col-md-4">
						<label>หมู่ที่</label>
						<input type="text" class="form-control" name="moo" id="addressm" value="" style="color:red;">    
						</div>
						<div class="form-group col-md-4">
						<label>ตำบล</label>
						<input type="text" class="form-control" name="tambol" id="addresst" value="" style="color:red;">    
						</div>						
					</div>
					<div class="row">
						<div class="form-group col-md-4">
						<label>อำเภอ</label>
						<input type="text" class="form-control" name="ampher" id="addressa" value="" style="color:red;">    
						</div>
						<div class="form-group col-md-4">
						<label>จังหวัด</label>
						<input type="text" class="form-control" name="province" id="addressp" value="" style="color:red;">    
						</div>
					</div>	
					<div class="row">
						<div class="form-group col-md-12">
						<label>เหตุผลการย้าย (*)</label>
						<input type="text" class="form-control" name="detail" value="" required> 						
						</div>
					</div>	
<div class="row">

    <div class="form-group text-right m-b-0">
        <button class="btn btn-primary" type="submit"> บันทึก</button>
            <button type="reset" onclick="goBack()" class="btn btn-secondary m-l-5">ยกเลิก</button>
			<script>
				function goBack() {
				window.history.back();
				}
			</script>			
    </div>
	
</div>									
				
		</div>


		
		</form>
		
		
	

		
	</div>
	<!-- end col -->	
										
</div>