Check Reservation

//-------HTML ------//

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="imgLogo" align="center">
	<img src="http://appgen.gamma.malaysia.gov.my/uploads/5749/media/170613/50872374.png" width="200">
</div>
<div class="page-check">
	<h4 class="center">Check Reservation</h4>
	<div class="form-group">
		<label for="bookingNo">Booking Number:</label>
		<input type="text" name="bookingNo" class="form-control" id="bookingNo">
	</div>

	<br>

	<button class="btn btn-block btn-primary" id="buttonCheck">Check Reservation</button>
</div>

<div class="spinner" align="center">
	<img src="http://appgen.gamma.malaysia.gov.my/uploads/5749/media/170616/37920446.gif" width="50">
</div>
<br>
<div class="keputusan">

	<div class="list-group">
	  <a href="#" class="list-group-item active">
	    Booking ID: <span id="bookingId"></span>
	  </a>

	  <div class="list-group-item list-group-item-success">
	    <p><b></b></p>
	    <p><b>From Date:</b> <span id="fromDate"></span> </p>
	    <p><b>To Date:</b> <span id="toDate"></span></p>
	 </div>

	</div>
</div>

//-------END HTML ------//

//------- JS ------//

var API_KEY = "65d8bb1a8902df3bc4e3e4f0af71a909f0a00d57";
var API_CHECK = 6463;

var spinner = $(".spinner");
var page_keputusan = $(".keputusan");

$("#buttonCheck").tap(function(){


	spinner.show();

	var booking_id = $("#bookingNo").val();

	var configObj = {};
	var checkObj = {};

	checkObj.reservation_no = booking_id;

	configObj = {
		bodyParams: checkObj
	}

	callApi(API_CHECK, API_KEY, "post", configObj)
	.then(function(result){

		spinner.hide();

		if(result.data.result == "post API"){
			page_keputusan.show();

			var from_date = result.data.start_date;
			var to_date = result.data.end_date;

			$("#bookingId").text(booking_id);
			$("#fromDate").text(from_date);
			$("#toDate").text(to_date);
		} else {
			alert('Booking ID not found. Please try again');
		}

	})

})

//-------END JS ------//

//------- CSS ------//

.titleTxt{
	height: auto !important;
}

.center{
	text-align: center;
}

.spinner {
	display: none;
}

.keputusan{
	display: none;
}

#pluginView .dev {
        background-image: url('http://appgen.gamma.malaysia.gov.my/uploads/5749/media/170616/13886783.png');
        background-size: cover;
}


//-------END CSS ------//