ꦫꦣꦺꦤ꧀ꦄꦤ꧀ꦠꦱꦺꦤ

PATH: home / lab2454c / tripvare.com / resources / views / booking

@extends('layouts.pages.page')

@section('content')

<div id="booking" class="section">
		<div class="section-center">
			<div class="container">
				<div class="row">
					<div class="col-md-4">
						<div class="booking-cta">
							<h1>Book your flight today</h1>
							<p>Book your flight from {{ env('APP_NAME') }} Flight Booking</p>
						</div>
					</div>
					<div class="col-md-7 col-md-offset-1">
						<div class="booking-form">
							<form action="{{ route('showOptions') }}" method="POST">
							     @csrf
								<div class="form-group">
									<div class="form-checkbox">
										<label for="one-way">
											<input type="radio" id="one-way" name="flight_type" value="ONE_WAY" checked>
											<span></span>One way
										</label>
										
										<label for="roundtrip">
											<input type="radio" id="roundtrip" name="flight_type" value="ROUNDTRIP">
											<span></span>Roundtrip
										</label>
										
										<label for="multi-city">
											<input type="radio" id="multi-city" name="flight_type" value="MULTICITY">
											<span></span>Multi-City
										</label>
									</div>
								</div>
								
								
								<div class="row">
									<div class="col-md-6">
										<div class="form-group">
											<span class="form-label">Flying from</span>
											<input class="form-control" type="text" placeholder="City or airport" name="origin" id="Origin" required>
											
											<div id="OriginList" style="height: 18rem;
    overflow-y: auto;
    z-index: 9;
    position: absolute;
    background-color: #fff;
    padding-top: 10px;"></div>
										</div>
									</div>
									
									<div class="col-md-6">
										<div class="form-group">
											<span class="form-label">Flyning to</span>
											<input class="form-control" type="text" placeholder="City or airport" name="destination" id="Destination" required>
											
											<div id="DestinationList" style="height: 18rem;
    overflow-y: auto;
    z-index: 9;
    position: absolute;
    background-color: #fff;
    padding-top: 10px;"></div>
											
										</div>
									</div>
								</div>
								
							
								
								<div class="row">
									<div class="col-md-12" id="DEPARTURE">
										<div class="form-group">
											<span class="form-label">Departing</span>
											<input class="form-control" type="text" required id="DEPART" placeholder="Departure Date" name="departure_date">
										</div>
									</div>
									
									<div class="col-md-6" id="RETURN_ROUNDTRIP" style="display:none;">
										<div class="form-group">
											<span class="form-label">Returning</span>
											<input class="form-control" type="text" id="RETURN" placeholder="Return Date" name="return_date">
										</div>
									</div>
								</div>
								
								
								<div class="row">
									<div class="col-md-4">
										<div class="form-group">
											<span class="form-label">Adults (18+)</span>
											<select class="form-control" name="passengers">
												<option>1</option>
												<option>2</option>
												<option>3</option>
											</select>
											<span class="select-arrow"></span>
										</div>
									</div>
									<div class="col-md-4">
										<div class="form-group">
											<span class="form-label">Children (0-17)</span>
											<select class="form-control">
												<option>0</option>
												<option>1</option>
												<option>2</option>
											</select>
											<span class="select-arrow"></span>
										</div>
									</div>
									
									
									<div class="col-md-4">
										<div class="form-group">
											<span class="form-label">Travel class</span>
											<select class="form-control" name="cabin_class">
												<option value="economy">Economy class</option>
												<option value="premium_economy">Premium Economy class</option>
												<option value="business">Business class</option>
												<option value="first">First class</option>
											</select>
											<span class="select-arrow"></span>
										</div>
									</div>
								</div>
								<div class="form-btn">
									<button class="submit-btn" id="SearchBtn" type="submit">Show flights</button>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

$('#DEPART').datepicker({
          format: "yyyy-mm-dd",
          todayHighlight: true,
          orientation: "auto",
          autoclose:true,
          clearBtn:true,
          startDate: new Date(),
          orientation: 'bottom'
        });
        
        
        $('#RETURN').datepicker({
          format: "yyyy-mm-dd",
          todayHighlight: true,
          orientation: "auto",
          autoclose:true,
          clearBtn:true,
          startDate: new Date(),
          orientation: 'bottom'
        });
     });

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

$('#Origin').keyup(function(){
                //Disable Button to prevent form submit 
                $("#SearchBtn").prop('disabled', true).addClass("disabled"); 
                
                //Clear the list of search when textbox is empty
                $('#OriginList').html('');

});

$(document).on('click', 'li.origin', function(){  
            $('#Origin').val($(this).data('iata'));
            $('#OriginList').fadeOut();
            $("#SearchBtn").prop('disabled', false).removeClass('disabled'); 
        
        });
        
        
        
        
        $('#Destination').keyup(function(){
                //Disable Button to prevent form submit 
                $("#SearchBtn").prop('disabled', true).addClass("disabled"); 
                
                //Clear the list of search when textbox is empty
                $('#DestinationList').html('');

});
            
            
            $(document).on('click', 'li.destination', function(){  
            $('#Destination').val($(this).data('iata'));
            $('#DestinationList').fadeOut();
            $("#SearchBtn").prop('disabled', false).removeClass('disabled'); 
        
        });

});
</script>

@endsection

[-] showOptions.blade.php [edit]
[-] orderList.blade.php [edit]
[+] ..
[-] booking.blade.php [edit]
[-] orderComplete.blade.php [edit]