@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">
	Search Bookings
</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>Invoice No</th>
        <th>First name</th>
        <th>Email</th>
        <th>Phone</th>
        <th>Booking Date</th>
        <th>Event</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){    
        e.preventDefault();   
        var _token    = $('#_token').val();
        var cust_id = $('#cust_id').val();           
        $("#loader").css('display', 'block');   
        $this = this;     
        $.ajax({
          type: 'post', 
          dataType: 'json', 
          url: "{{ url('facility/booking-search-result') }}",         
          data: {cust_id: cust_id, _token: _token},
          success: function(data){                
             if (data.id != null){                
              $('#alert_text3').text(' ');
              $('.button_disable222').removeAttr('disabled','disabled');
              $("#loader").css('display', 'none');  
           //   $("#result_table").css('display', 'block');  
              
              $('#invoice').text(data.invoice);  
              $('#name').text(data.name);  
              $('#email').text(data.email);  
              $('#phone').text(data.phone); 
              $('#event').text(data.event); 
              $('#book_date').text(data.book_date); 
              $('#status').text(data.status); 


             } else {                 
              $('#alert_text3').text('Tracking number is wrong!');    
              $('.button_disable222').attr('disabled','disabled');              
              $("#loader").css('display', 'none');  
             // $("#result_table").css('display', 'none');  
              
             $('#invoice').text('');  
              $('#name').text('');  
              $('#email').text('');  
              $('#phone').text(''); 
              $('#event').text(''); 
              $('#book_date').text(''); 
              $('#status').text(''); 


             }
          } 
        });
        });
      }); 






</script>

@endsection