<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<?php 
	session_start(); 
	include('conn/connect.php'); // ติดต่อฐานข้อมูล 
?>
<html>
	<head> 
		<meta charset="UTF-8">
		<title>ระบบแจ้งปัญหาห้องน้ำ อหท.</title>
		<link rel="stylesheet" type="text/css" href="<?=$IP_SERVER?>css/style.css">
		<script type="text/javascript" src="<?=$IP_SERVER?>js/jquery-3.4.1.min.js"></script>
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
    	<meta name='apple-mobile-web-app-capable' content='yes' />
		
	</head>

	<body>

		<div class="header">
			<div class="logo">
				<center> 
					<table border="0" cellspacing="0" cellpadding="0" >
						<tr>
							<td height="40">
								<img src="img/fmd.png">	
							</td>
							<td>
								ระบบแจ้งปัญหาห้องน้ำ 
								<b><font color="red">อหท.</font></b>
							</td>
						</tr>
					</table>
				     
					
				</center>
			</div>
			<div class="location">
<?php
				if($_GET['id']){
					$sql_place = "SELECT * FROM place,worker WHERE 
						place.workerID = worker.IDworker and place.ID_place = '".$_GET['id']."'";
				}else{
					$sql_place = "SELECT * FROM place,worker WHERE 
						place.workerID = worker.IDworker and place.building = '".$_GET['building']."' and 
						place.floors = '".$_GET['floors']."' and 
						place.gender = '".$_GET['gender']."' and 
						place.remark = '".$_GET['remark']."' 
					";
				}
				$query_place = mysqli_query($conn,$sql_place);
				$result_place=mysqli_fetch_array($query_place);
				if($result_place){}else{header('Location: no_url.php');}
				//-----------------------request-------------------------------------
				$sql_request = "SELECT * FROM request WHERE placeID = '".$result_place['ID_place']."' and (status = '1' or status = '2' or status = '3') ";
				$query_request = mysqli_query($conn,$sql_request);
				$result_request_num = 0;
				while ($result_request=mysqli_fetch_array($query_request)) {
				 	$result_request_array[$result_request_num] = $result_request['request_typeID'];
				 	$result_request_num++;
				}

?>	
				<center>
					<table  border="0" cellspacing="0" cellpadding="0">
						<tr >
							<td rowspan="2" align="center" >
								
									<img src="img/maid/<?=$result_place['workerID']?>.jpg">&nbsp;&nbsp;

							</td>
							<td height="50" align="center">
								ห้องน้ำ<?php if($result_place['gender']=="f"){ echo"หญิง"; }else if($result_place['gender']=="m"){echo"ชาย";}else{echo"รวม";} ?> <?=$result_place['remark']?> ชั้น <?=$result_place['floors']?> ตึก <?=$result_place['building']?>
							</td>
						</tr>
						
						<tr>
							<td valign="top" align="center" >
								<?=$result_place['title']?><?=$result_place['Fname']?> <?=$result_place['Lname']?>
							</td>
						</tr>
					</table>
				</center>
			</div>

		</div>
		<div style="width: auto; height: 160px;">
			
		</div>
		<div class="data">
			<div class="rate">
				<center>
					<h3>
						กรุณาให้คะแนนความพึงพอใจ
					</h3>
					<div class="vote" onclick="javascript:vote(1);">
						<img src="img/vote5.png"><br />
						<font color="#2b4d7d">แย่มาก</font>
					</div>
					<div class="vote" onclick="javascript:vote(2);">
						<img src="img/vote4.png"><br />
						<font color="#2b4d7d">แย่</font>
					</div>
					<div class="vote" onclick="javascript:vote(3);">
						<img src="img/vote3.png"><br />
						<font color="#2b4d7d">พอใช้</font>
					</div>
					<div class="vote" onclick="javascript:vote(4);">
						<img src="img/vote2.png"><br />
						<font color="#2b4d7d">ดี</font>
					</div>
					<div class="vote" onclick="javascript:vote(5);">
						<img src="img/vote1.png"><br />
						<font color="#2b4d7d">ดีมาก</font>
					</div>
				</center>
			</div>	
			<br />
			<div class="inform">	
				<center>
					<h3>
						แจ้งปัญหา
					</h3>
					
						<div class="vote_data_div">
							<div class="vote_data" onclick="javascript:btn(1,2,'ขยะล้นถัง',<?php if(in_array(strtolower("2"),$result_request_array)) {echo '\'yes\'';}else{echo '\'no\'';} ?>);"  <?php if(in_array(strtolower("2"),$result_request_array)) {echo 'style="background-color: #b2b2b2;"';} ?>>
								<img src="img/2.png"><br />
								<table width="100%" border="0">
									<tr>
										<td height="60"><font>ขยะล้นถัง</font></td>
									</tr>
								</table>
							</div>
							<div class="vote_data" onclick="javascript:btn(2,3,'กระดาษเช็ดมือ กระดาษชำระหมด',<?php if(in_array(strtolower("3"),$result_request_array)) {echo '\'yes\'';}else{echo '\'no\'';} ?>);"  <?php if(in_array(strtolower("3"),$result_request_array)) {echo 'style="background-color: #b2b2b2;"';} ?>>
								<img src="img/3.png"><br />
								<table width="100%" border="0">
									<tr>
										<td height="60"><font>กระดาษเช็ดมือ กระดาษชำระหมด</font></td>
									</tr>
								</table>
							</div>
							<div class="vote_data" onclick="javascript:btn(3,4,'สบู่เจลล้างมือหมด',<?php if(in_array(strtolower("4"),$result_request_array)) {echo '\'yes\'';}else{echo '\'no\'';} ?>);"  <?php if(in_array(strtolower("4"),$result_request_array)) {echo 'style="background-color: #b2b2b2;"';} ?>>
								<img src="img/4.png"><br />
								<table width="100%" border="0">
									<tr>
										<td height="60"><font>สบู่เจลล้างมือหมด</font></td>
									</tr>
								</table>
							</div>
							<div class="vote_data" onclick="javascript:btn(4,5,'แอลกอฮอล์เช็ดฝารองนั่งหมด',<?php if(in_array(strtolower("5"),$result_request_array)) {echo '\'yes\'';}else{echo '\'no\'';} ?>);"  <?php if(in_array(strtolower("5"),$result_request_array)) {echo 'style="background-color: #b2b2b2;"';} ?>>
								<img src="img/5.png"><br />
								<table width="100%" border="0">
									<tr>
										<td height="60"><font>แอลกอฮอล์เช็ดฝารองนั่งหมด</font></td>
									</tr>
								</table>
							</div>
							<div class="vote_data" onclick="javascript:btn(5,6,'กระจกไม่สะอาด',<?php if(in_array(strtolower("6"),$result_request_array)) {echo '\'yes\'';}else{echo '\'no\'';} ?>);"  <?php if(in_array(strtolower("6"),$result_request_array)) {echo 'style="background-color: #b2b2b2;"';} ?>>
								<img src="img/6.png"><br />
								<table width="100%" border="0">
									<tr>
										<td height="60"><font>กระจกไม่สะอาด</font></td>
									</tr>
								</table>
							</div>
							<div class="vote_data" onclick="javascript:btn(6,7,'อ่างล้างมือ/พื้นห้องน้ำเปียก',<?php if(in_array(strtolower("7"),$result_request_array)) {echo '\'yes\'';}else{echo '\'no\'';} ?>);"  <?php if(in_array(strtolower("7"),$result_request_array)) {echo 'style="background-color: #b2b2b2;"';} ?>>
								<img src="img/7.png"><br />
								<table width="100%" border="0">
									<tr>
										<td height="60"><font>อ่างล้างมือ/พื้นห้องน้ำเปียก</font></td>
									</tr>
								</table>
							</div>
							<div class="vote_data" onclick="javascript:btn(7,8,'แม่บ้านไม่อยู่ประจำจุด',<?php if(in_array(strtolower("8"),$result_request_array)) {echo '\'yes\'';}else{echo '\'no\'';} ?>);"  <?php if(in_array(strtolower("8"),$result_request_array)) {echo 'style="background-color: #b2b2b2;"';} ?>>
								<img src="img/8.png"><br />
								<table width="100%" border="0">
									<tr>
										<td height="60"><font>แม่บ้านไม่อยู่ประจำจุด</font></td>
									</tr>
								</table>
							</div>
							<div class="vote_data" onclick="javascript:btn(8,9,'ห้องน้ำมีกลิ่นเหม็น',<?php if(in_array(strtolower("9"),$result_request_array)) {echo '\'yes\'';}else{echo '\'no\'';} ?>);"  <?php if(in_array(strtolower("9"),$result_request_array)) {echo 'style="background-color: #b2b2b2;"';} ?>>
								<img src="img/9.png"><br />
								<table width="100%" border="0">
									<tr>
										<td height="60"><font>ห้องน้ำมีกลิ่นเหม็น</font></td>
									</tr>
								</table>
							</div>
							<div class="vote_data" onclick="javascript:btn(9,10,'ชักโครกอุดตัน',<?php if(in_array(strtolower("10"),$result_request_array)) {echo '\'yes\'';}else{echo '\'no\'';} ?>);"  <?php if(in_array(strtolower("10"),$result_request_array)) {echo 'style="background-color: #b2b2b2;"';} ?>>
								<img src="img/10.png"><br />
								<table width="100%" border="0">
									<tr>
										<td height="60"><font>ชักโครกอุดตัน</font></td>
									</tr>
								</table>
							</div>
							<div class="vote_data" onclick="javascript:btn(10,11,'ท่อตันน้ำไม่ระบาย',<?php if(in_array(strtolower("11"),$result_request_array)) {echo '\'yes\'';}else{echo '\'no\'';} ?>);"  <?php if(in_array(strtolower("11"),$result_request_array)) {echo 'style="background-color: #b2b2b2;"';} ?>>
								<img src="img/11.png"><br />
								<table width="100%" border="0">
									<tr>
										<td height="60"><font>ท่อตันน้ำไม่ระบาย</font></td>
									</tr>
								</table>
							</div>
							<div class="vote_data" onclick="javascript:btn(11,12,'น้ำไม่ไหล',<?php if(in_array(strtolower("12"),$result_request_array)) {echo '\'yes\'';}else{echo '\'no\'';} ?>);"  <?php if(in_array(strtolower("12"),$result_request_array)) {echo 'style="background-color: #b2b2b2;"';} ?>>
								<img src="img/12.png"><br />
								<table width="100%" border="0">
									<tr>
										<td height="60"><font>น้ำไม่ไหล</font></td>
									</tr>
								</table>
							</div>
							<div class="vote_data" onclick="javascript:btn(12,13,'น้ำซึ่ม/น้ำรั่วจากท่อ',<?php if(in_array(strtolower("13"),$result_request_array)) {echo '\'yes\'';}else{echo '\'no\'';} ?>);"  <?php if(in_array(strtolower("13"),$result_request_array)) {echo 'style="background-color: #b2b2b2;"';} ?>>
								<img src="img/13.png"><br />
								<table width="100%" border="0">
									<tr>
										<td height="60"><font>น้ำซึ่ม/น้ำรั่วจากท่อ</font></td>
									</tr>
								</table>
							</div>
							<div class="vote_data" onclick="javascript:btn(13,14,'ไฟไม่สว่าง/ชำรุด',<?php if(in_array(strtolower("14"),$result_request_array)) {echo '\'yes\'';}else{echo '\'no\'';} ?>);"  <?php if(in_array(strtolower("14"),$result_request_array)) {echo 'style="background-color: #b2b2b2;"';} ?>>
								<img src="img/14.png"><br />
								<table width="100%" border="0">
									<tr>
										<td height="60"><font>ไฟไม่สว่าง/ชำรุด</font></td>
									</tr>
								</table>
							</div>
							<div class="vote_data" onclick="javascript:btn(14,15,'เซ็นเซอร์ชำรุด',<?php if(in_array(strtolower("15"),$result_request_array)) {echo '\'yes\'';}else{echo '\'no\'';} ?>);"  <?php if(in_array(strtolower("15"),$result_request_array)) {echo 'style="background-color: #b2b2b2;"';} ?>>
								<img src="img/15.png"><br />
								<table width="100%" border="0">
									<tr>
										<td height="60"><font>เซ็นเซอร์ชำรุด</font></td>
									</tr>
								</table>
							</div>
							<div class="vote_data" onclick="javascript:btn(15,16,'สายฉีดชำระชำรุด',<?php if(in_array(strtolower("16"),$result_request_array)) {echo '\'yes\'';}else{echo '\'no\'';} ?>);"  <?php if(in_array(strtolower("16"),$result_request_array)) {echo 'style="background-color: #b2b2b2;"';} ?>>
								<img src="img/16.png"><br />
								<table width="100%" border="0">
									<tr>
										<td height="60"><font>สายฉีดชำระชำรุด</font></td>
									</tr>
								</table>
							</div>
						</div>

				</center> 
			</div>	
			<br />	
			<div class="CONTACT">	
				<h3>
					<center>แจ้งปัญหาเพิ่มเติม</center> 
				</h3>
				<div class="CONTACT_from">
					<textarea placeholder="แจ้งปัญหาเพิ่มเติม" id="CONTACT_from_txt"></textarea>
					<br />
					<center>
						<div id="image_file" style="display : none; width: 100%;">
							<div class="btn-file">
							    <div class="btn-file-button"><span>รูปภาพ</span></div>
							    <div class="btn-file-name" id="btn-file-name"></div>
							    <div class="btn-file-close" onclick="javascript:close_load_image();"><span>X</span></div>
							</div>
							<br />
						</div>
						<table border="0" width="90%" cellpadding="0" cellspacing="0">
							<tr>
								<td align="left" width="100">
									<div class="load_image" id="load_image" style="display : block;" onclick="javascript:load_image();" >
										<center>
											<img src="img/Upload.png"><span>เพิ่มรูปภาพ</span>
											<!--<input name="image_file" id="imageInput" type="file" onchange="javascript:ChangeText(this, 'btn-file-name');" accept=".png, .jpg, .jpeg, .gif" />-->
											<input name="image_file" id="imageInput" type="file" onchange="javascript:ChangeText(this, 'btn-file-name');" accept=".jpg, .jpeg" />
										</center>
									</div>
									
								</td>
								<td align="center">
									<button class="send_data" style="color: #ffffff;font-size: 20px;" onclick="javascript:upload_send_data();">ส่งความคิดเห็น</button>
								</td>
							</tr>
						</table>
					</center>
					<br />
				</div>
			</div>				
		</div>
		<!---------------------popup---------------------------->
		<div id="myModal" class="modal" onclick="javascript:close_popup();" >
			<div class="modal-content">
				<span class="close"></span>

				<div id="popup"></div>
			</div>
		</div>
		<div id="no_close_pop" class="no_close" ></div>
		<div id="url_upload_ok" style="display: none;"><div id="url_ok">no_img</div><div id="url_error">error</div></div>
		<!---------------------popup---------------------------->
		<script type="text/javascript">
			var placeID = '<?=$result_place['ID_place']?>';
			var modal = document.getElementById("myModal");
			var span = document.getElementsByClassName("close")[0];
			var reload_ok = 0;
			
			function vote(vote){
				var html_code = '<br /><button class="send_data" onclick="javascript:send_data_vote(\'vote\','+vote+',\'ไม่มีข้อมูล\');">ยืนยัน</button> | <button class="send_data" onclick="javascript:popup_close();">ยกเลิก</button>';

 				modal.style.display = "block";
 				document.getElementById("popup").innerHTML = '<br />'+document.getElementsByClassName("vote")[vote-1].innerHTML+html_code;
			}
			function btn(No,id,detail,bruised){
				var html_code_bruised = '';
				if(bruised == 'yes'){
					html_code_bruised = '<center><font style="font-size: 18px;"  color="red">* ปัญหานี้ได้รับแจ้งแล้ว คุณต้องการแจ้งปัญหาอีกครั้ง</font></center>'
				}else{
					html_code_bruised = '<br />';
				}
				var html_code = '<button class="send_data" onclick="javascript:send_data_vote(\'Inform\','+id+',\''+detail+'\');">ยืนยัน</button> | <button class="send_data" onclick="javascript:popup_close();">ยกเลิก</button>';

 				modal.style.display = "block";
 				document.getElementById("popup").innerHTML = html_code_bruised+document.getElementsByClassName("vote_data")[No-1].innerHTML+html_code;
			}
			span.onclick = function() {
  				modal.style.display = "none";
			}
			window.onclick = function(event) {
  				if (event.target == modal) {
    				modal.style.display = "none";
    				if(reload_ok == 1){
    					reload_ok = 0;
    					location.reload();
    				}
    				
  				}
			}
			function close_popup(){
 				
			}
			function popup_close(){
 				modal.style.display = "none";
 				//location.reload();
			}
			function popup_close_ok(){
 				modal.style.display = "none";
 				location.reload();
			}
			//----------------------------------------------------------
			var noclose = document.getElementById("no_close_pop");
			function send_data_vote(type,work,detail){
				noclose.style.display = "block";
				document.getElementById("popup").innerHTML = '<img src="img/load.gif"><br />กำลังบันทึกข้อมูล';

				$.ajax({
					type: "POST",
					url: "save.php",
					data: {
						type : type,
						work : work,
						placeID : placeID,
						detail : detail
					},
					success: function(result) {
						reload_ok = 1;
						noclose.style.display = "none";
						if(result=='ok'){
							document.getElementById("popup").innerHTML = '<img src="img/save.png" onclick="javascript:popup_close_ok();"><br />บันทึกข้อมูลเรียบร้อย';
						}else{
							var html_code = '<br /><img src="img/error.png"><br />ระบบขัดข้องกรุณาแจ้งภายหลัง<br /><br /><button class="send_data" onclick="javascript:popup_close();" >ตกลง</button>';
							document.getElementById("popup").innerHTML = html_code;
						}
						
					}
				});
			}

			function ChangeText(oFileInput, sTargetID) {
				document.getElementById("load_image").style.display = "none";
				document.getElementById("image_file").style.display = "block";
				document.getElementById(sTargetID).innerHTML = '<span>'+oFileInput.value.replace(/.*(\/|\\)/, '')+'</span>';

			}

			//---------------------updload----------------------------------------
			function load_image(){
				//document.getElementById("load_image").style.display = "none";
				//document.getElementById("image_file").style.display = "block";
			}
			function close_load_image(){
				document.getElementById("load_image").style.display = "block";
				document.getElementById("image_file").style.display = "none";
				document.getElementById("btn-file-name").innerHTML = "";
				document.getElementById("imageInput").value = "";	
			}
			function upload_send_data(){
				modal.style.display = "block";
				var html_code = '<br /><img src="img/warning.png"><br />คุณต้องการ<br />ส่งความคิดเห็นเพิ่มเติม<br /><br /><button class="send_data" onclick="javascript:start_upload();" >ยืนยัน</button> | <button class="send_data" onclick="javascript:popup_close();" >ยกเลิก</button>';
				document.getElementById("popup").innerHTML = html_code;
			}
			
			function start_upload(){
				if(document.getElementById("CONTACT_from_txt").value!=""){
					var html_code = '<center><div id="loading"><div id="loadingup"></div></div></center><br />'
					document.getElementById("popup").innerHTML = '<img src="img/load.gif"><br />กำลังบันทึกข้อมูล'+html_code;
					document.getElementById("no_close_pop").style.display = "block";
					if(document.getElementById("imageInput").value!=""){
						var fsize = $('#imageInput')[0].files[0].size; //get file size
	 					var ftype = $('#imageInput')[0].files[0].type;// get file type
	 					//ftype=='image/png' || ftype=='image/gif' ||
						if(  ftype=='image/jpeg' || ftype=='image/pjpeg'){
							if(fsize > (5*1048576)){
								var html_code = '<br /><img src="img/warning2.png"><br />ไฟล์รูปภาพขนาดเกิน 5 MB<br /><br /><button class="send_data" onclick="javascript:popup_close();" >ตกลง</button>';
								document.getElementById("popup").innerHTML = html_code;	
							}else{
								document.getElementById("no_close_pop").style.display = "block";
								document.getElementById("loading").style.display = "block";

								var fd = new FormData();
						        var files = $('#imageInput')[0].files[0];
						        fd.append('file',files);
						        $.ajax({
						            url: 'upload.php',
						            type: 'post',
						            data: fd,
						            contentType: false,
						            processData: false,
						            xhr: function () {
						            	var xhr = new window.XMLHttpRequest();
										xhr.upload.addEventListener("progress", function(evt){
											if (evt.lengthComputable) {
										 		var percentComplete = evt.loaded / evt.total;
												document.getElementById("loadingup").style.width = (Math.round((percentComplete * 100)-10) + "%");
											}
										}, false);
										xhr.addEventListener("progress", function(evt){
											if (evt.lengthComputable) {
												var percentComplete = evt.loaded / evt.total;
												document.getElementById("loadingup").style.width = (Math.round((percentComplete * 100)-10) + "%");
											}
										}, false);
										return xhr;
									},
						            success: function(result){						            	
						            		document.getElementById("loadingup").style.width = "98%";
						            		document.getElementById("url_upload_ok").innerHTML= result;
						            		var url_ok = document.getElementById("url_ok").innerHTML;
						            		var url_error = document.getElementById("url_error").innerHTML;
						            		if(url_error=="no_error"){
						            			start_send_data(url_ok);
						            		}else{
						            			document.getElementById("no_close_pop").style.display = "none";
						            			var html_code = '<br /><img src="img/error.png"><br />ระบบขัดข้องกรุณาแจ้งภายหลัง<br /><br /><button class="send_data" onclick="javascript:popup_close();">ตกลง</button>';
												document.getElementById("popup").innerHTML = html_code;
						            		}
						            }
						        });
							}
						}else{
							var html_code = '<br /><img src="img/warning2.png"><br />กรุณาเลือกไฟล์ชนิดรูปภาพ<br /><br /><button class="send_data" onclick="javascript:popup_close();" >ตกลง</button>';
							document.getElementById("popup").innerHTML = html_code;	
						}
					}else{

						start_send_data('no_img');
					}
				}else{
					var html_code = '<br /><img src="img/warning2.png"><br />คุณยังไม่ได้ใส่ข้อความ<br /><br /><button class="send_data" onclick="javascript:popup_close();">ตกลง</button>';
					document.getElementById("popup").innerHTML = html_code;
				}
				
			}
			function start_send_data(url_img){

				if(url_img!='no_img'){
					document.getElementById("loadingup").style.width = "99%";
				}
				var contact_txt = document.getElementById("CONTACT_from_txt").value;
				
				contact_txt = escapeHtml(contact_txt);
				$.ajax({
					type: "POST",
					url: "save.php",
					data: {
						type : '1',
						work : contact_txt,
						url_img : url_img,
						placeID : placeID,
						detail : 'แจ้งปัญหาเพิ่มเติม'
					},
					success: function(result) {
						reload_ok = 1;
						document.getElementById("no_close_pop").style.display = "none";
						if(url_img!='no_img'){
							document.getElementById("loadingup").style.width = "100%";
						}
						if(result=='ok'){
							document.getElementById("popup").innerHTML = '<img src="img/save.png" onclick="javascript:popup_close_ok();"><br />บันทึกข้อมูลเรียบร้อย';
						}else{
							var html_code = '<br /><img src="img/error.png"><br />ระบบขัดข้องกรุณาแจ้งภายหลัง<br /><br /><button class="send_data" onclick="javascript:popup_close();" >ตกลง</button>';
							document.getElementById("popup").innerHTML = html_code;
						}
					}
				});



				function escapeHtml (string) {
					var entityMap = {
						'&': '&amp;',
						'<': '&lt;',
						'>': '&gt;',
						'"': '&quot;',
						"'": '&#39;',
						'/': '&#x2F;',
						'`': '&#x60;',
						'=': '&#x3D;',
						'\\': '&#92;'
					};
					return String(string).replace(/[&<>"'`=\/\\]/g, function (s) {
						return entityMap[s];
					});
				}
			}
			//---------------------updload----------------------------------------
			
		</script>

		<?php include('footer.php'); ?>