<?php
	require_once 'validate.php';
	require 'name.php';
?>
<?php 
include('header.php');
?>
<?php 
include('sidebar.php');
?>

<!--app content-->
				<div class="app-content">
					<div class="side-app">
						
					
						<div class="page-header">
							<h4 class="page-title">Add Room</h4>
							<ol class="breadcrumb">
								<li class="breadcrumb-item"><a href="#"><i class="fe   fe-home mr-1"></i> Admin</a></li>
								<li class="breadcrumb-item active" aria-current="page">Add Room</li>
							</ol>
						</div>	
<div class = "container-fluid">
		<div class = "panel panel-default">
			<div class = "panel-body">
				
				<br />
				<div class = "col-md-4">	
					<form method = "POST" enctype = "multipart/form-data">
						<div class = "form-group">
							<label>Room Type </label>
							<select class = "form-control" required = required name = "room_type">
								<option value = "">Choose an option</option>
								<option value = "Classic Room">Classic Room</option>
								<option value = "Deluxe Room">Deluxe Room</option>
								<option value = "Saver Single Room">Saver Single Room</option>
								
							</select>
						</div>
						<div class = "form-group">
							<label>Price </label>
							<input type = "number" min = "0" max = "999999999" class = "form-control" name = "price" />
						</div>
						<div class = "form-group">
							<label>Photo </label>
							<div id = "preview" style = "width:150px; height :150px; border:1px solid #000;">
								<center id = "lbl">[Photo]</center>
							</div>
							<input type = "file" required = "required" id = "photo" name = "photo" />
						</div>
						<br />
						<div class = "form-group">
							<button name = "add_room" class = "btn btn-info form-control"><i class = "glyphicon glyphicon-save"></i> Saved</button>
						</div>
					</form>
					<?php require_once 'add_query_room.php'?>
				</div>
			</div>
		</div>
	</div>
						
					</div>
				</div>
				<!--app content-->
				<script src = "../js/jquery.js"></script>

				<script type = "text/javascript">
	$(document).ready(function(){
		$pic = $('<img id = "image" width = "100%" height = "100%"/>');
		$lbl = $('<center id = "lbl">[Photo]</center>');
		$("#photo").change(function(){
			$("#lbl").remove();
			var files = !!this.files ? this.files : [];
			if(!files.length || !window.FileReader){
				$("#image").remove();
				$lbl.appendTo("#preview");
			}
			if(/^image/.test(files[0].type)){
				var reader = new FileReader();
				reader.readAsDataURL(files[0]);
				reader.onloadend = function(){
					$pic.appendTo("#preview");
					$("#image").attr("src", this.result);
				}
			}
		});
	});
</script>
				<?php 
include('footer.php');
?>