<?php
require_once("lib/dbconn.php");
require_once("lib/form.php");
require_once("lib/functions.php");
?>
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
   $('#konten').load('service.php');
}, 100000); // refresh every 10000 milliseconds
</script>
<style>
	#feedback { font-size: 15px; }
	#selectable .ui-selecting { background: #FECA40; }
	#selectable .ui-selected { background: #F39814; color: white; }
	#selectable { list-style-type: none; margin: 0; padding: 0; width: 100%; }
	#selectable li { 
	margin: 3px; 
	padding: 1px; 
	float: left; 
	width: 100px; 
	height: 80px; 
	font-size: 2em; 
	text-align: center; }
	
*, *::before, *::after {
    box-sizing: inherit;
}
*, *::before, *::after {
    box-sizing: inherit;
}
#selectable li {
    float: left;
    font-size: 1em;
    height: 100px;
    margin: 3px;
    padding: 1px;
    text-align: center;
    width: 100px;
}

</style>

<script type="text/javascript">
function UpdateKamar(tag,tag1) {
	
  $('#refresh').load('includes/update_service.php?no_kmr=' + tag +'&stat='+tag1);
  
}
function UpdateKamar2(no_room) {
var tag = no_room;
var tag1 = $("#room_"+no_room).val();

  $.get('includes/update_service.php?no_kmr=' + tag +'&stat='+tag1,function(data){
	document.location.reload();
  
  });
  
}

$(document).ready(function(){
		
 
});
</script>  

<div id="konten">
<ol id="selectable">

	<?php 
	
	$sql = "select * from tbl_room ";
	$r = mysql_query($sql);
	$n = mysql_num_rows($r);	
	$no = 1;
while ($row = mysql_fetch_array($r)) {  
	if  ($row[status_kmr] == "isi"){
		$class = "info";
		$status ="occupied";
	} elseif ($row[status_kmr] == "kotor"){
		$class = "warning";
		$status ="vacant dirty";
	} elseif ($row[status_kmr] == "dibersihkan"){
		$class = "important";
		$status ="vacant cleaning";
	} elseif ($row[status_kmr] == "bersih"){
		$class = "warning";
		$status ="occupied clean";
	} elseif ($row[status_kmr] == "kotor2"){
		$class = "error";
		$status ="occupied dirty";
	} else {
		$class = "";
		$status ="vacant ready";
	}
	
  ?>
  		<li class='ui-state-default <?php echo $class; ?>' style="line-height:22px;"><?php echo $row[no_room];?>
  			<br>
			<a href="#"><?=($row[status_kmr]=="isi")?'OCCUPIED':'&nbsp;';?></a>
			<br>
			<select onChange="UpdateKamar2(<?php echo $row[no_room];?>)" id="room_<?php echo $row[no_room];?>" >
				<!--<option value="isi" <?=($row[status_kmr]=="isi")?'selected="selected"':'';?>>OC</option>-->
				<option value="kosong" <?=($row[status_kmr]=="kosong")?'selected="selected"':'';?>>VR</option>
				<option value="kotor" <?=($row[status_kmr]=="kotor")?'selected="selected"':'';?>>VD</option>
				<option value="dibersihkan" <?=($row[status_kmr]=="dibersihkan")?'selected="selected"':'';?>>VC</option>
				<option value="rusak" <?=($row[status_kmr]=="rusak")?'selected="selected"':'';?>>OO</option>
				<option value="bersih" <?=($row[status_kmr]=="bersih")?'selected="selected"':'';?>>OC</option>
				<option value="kotor2" <?=($row[status_kmr]=="kotor2")?'selected="selected"':'';?>>OD</option>
			</select>

			<!--<a href='#' id="refresh" onClick="UpdateKamar('<?php echo $row[no_room];?>','<?php echo $row[status_kmr];?>')"><?php echo strtoupper($status);?></a> -->
		</li>
	
  <?php } ?>
</ol>
</div>