@extends('frontend.layouts.app')
@section('content')
<style type="text/css">
	.Litheader {
		color: #18AA38;
		font-family: 'Roboto Condensed' ,Arial, sans-serif;
		font-weight: bold;
		font-size: 28px;
		border-bottom: 2px solid #2C6700;
		margin-bottom: 10px;
		letter-spacing: 1px;
	}
</style>

<!--page tile-->
<div class="Litheader">
	Guest Room Bookings Search
</div>



 <div class="card bg-light" style="width: ">
<article class="card-body mx-auto" style="">
	<h4 class="card-title mt-3 text-center">Enter Tracking No</h4>
	
	<form id="myForm">

    <div class="form-group input-group">
    	<div class="input-group-prepend">
		    <span class="input-group-text"> <i class="fa fa-search"></i> </span>
		 </div>
        <input id="cust_id" name="email" class="form-control" placeholder="Enter Tracking No" type="text"  required="required">      
    </div> <!-- form-group// -->                        
      <span id="alert_text3" style="color: red; font-size: 20px; font-weight: 900"></span>
                                               
</form>
</article>
<style type="text/css"> th{ background-color: #57B76C; }</style>

   <table class="table table-striped table-hover table-bordered" >
    <thead>
      <tr>
        <th>First name</th>
        <th>Email</th>
        <th>Phone</th>
        <th>Booking Date</th>
        <th>Booking From</th>
        <th>Booking To</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td id="invoice"></td>
        <td id="name"></td>
        <td id="email"></td>
        <td id="phone"></td>
        <td id="event"></td>
        <td id="book_date"></td>      
        <td id="status"></td>      
      </tr>    
    </tbody>
  </table>

</div> <!-- card.// -->


<input type="hidden" id="_token" value="{{ csrf_token() }}">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
      $(document).ready(function () {     
        $('#cust_id').on('blur',function(e){    
        event.preventDefault();
        submit();
        });
        
        $('#myForm').on('submit',function(e){    
        event.preventDefault();
        submit();
        });
      }); 


function submit(){
        var cust_id = $('#cust_id').val();           
        $("#loader").css('display', 'block');   
        $.ajax({
		type: 'get',	
		dataType: 'json',	
		url: "{{ url('facility/booking_guest_room_search_result') }}",					
		data: {cust_id: cust_id},
		success: function(data){
	      if (data.member_data != null){
	           $('#alert_text3').text(' ');
              $('.button_disable222').removeAttr('disabled','disabled');
              $("#loader").css('display', 'none');  
              
              $('#invoice').text(data.member_data.name);  
              $('#name').text(data.member_data.email);  
              $('#email').text(data.member_data.cell_no);  
              $('#phone').text(data.member_data.date); 
              $('#event').text(data.member_data.booking_from); 
              $('#book_date').text(data.member_data.booking_to); 
              if(data.member_data.status == 0){
                  $('#status').html('<span class="badge badge-secondary">Request</span>'); 
              }else{
               $('#status').html('<span class="badge badge-primary">Booked</span>');    
              }
		   } else {	
		       $('#alert_text3').text('Tracking number is wrong!');    
              $('.button_disable222').attr('disabled','disabled');              
              $("#loader").css('display', 'none');  
             $('#invoice').text('');  
              $('#name').text('');  
              $('#email').text('');  
              $('#phone').text(''); 
              $('#event').text(''); 
              $('#book_date').text(''); 
              $('#status').text(''); 				

		   }
		} 
	});
}



</script>

@endsection