@extends('frontend.header')
@section('content')


        <div class="container">
            <h1 style="text-align: center; margin:2% 0% 2% 0%;">Indigo Parking</h1>
            <div class="row" style="padding-top: 5%;">
                <p>You will recieve booking confirmation, parking procedure and other important car park details on below entered email address.</p>
            </div>
            <form action="add_booking" method="post">
                @csrf
                <div class="row">
                    <div class="col-sm-2">
                        <div class="form-group">
                            <label for="title">Title: *</label>
                            <select name="title" id="title" class="form-control" required>
                                <option value="1">Mr.</option>
                                <option value="2">Mrs.</option>
                                <option value="3">Miss.</option>
                                <option value="4">Ms.</option>
                                <option value="5">Dr.</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label for="fname">First Name: *</label>
                            <input type="text" class="form-control" name="fname" id="fname" required>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="lname">Last Name: *</label>
                            <input type="text" class="form-control" name="lname" id="lname" required>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="email">Email Address: *</label>
                            <input type="email" class="form-control" name="email" id="email" required>
                        </div>
                    </div> 
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="mobile">Mobile Number: *</label>
                            <input type="mobile" class="form-control" name="mobile" id="mobile" required>
                        </div>
                    </div> 
                </div>
                <div class="row">
                    <div class="col-sm-8">
                        <div class="form-group">
                            <label for="address">Address: *</label>
                            <input type="text" class="form-control" name="address" id="address" required>
                        </div>
                    </div> 
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label for="postalcode">PostCode: *</label>
                            <input type="number" class="form-control" name="postalcode" id="postalcode" required>
                        </div>
                    </div> 
                </div>
                <div class="row" style="padding: 3% 0% 3% 0%; ">
                    <hr>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <div class="col-sm-6 p-0">
                            <div class="form-group">
                                <div class="radios">
                                    <div class="radio-lable">
                                        <label for="">Do you have travel details?</label>
                                    </div>
                                    <div class="one">
                                        <input type="radio" id="no" name="travel"  value="NO" required>
                                        <label for="no">No</label>
                                    </div>
                                    <div class="two">
                                        <input type="radio" id="yes" name="travel" value="YES" required>
                                        <label for="yes">Yes</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> 
                </div>
                <div class="row">
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label for="terminal">Depart Terminal: *</label>
                            <select name="terminal" id="terminal" class="form-control" required>
                                <option value="">Select Terminal</option>
                                <option value="1">South Terminal</option>
                                <option value="2">North Terminal</option>
                                <option value="3">TBC</option> 
                            </select>
                        </div>
                    </div> 
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label for="return_terminal">Return Terminal: *</label>
                            <select name="return_terminal" id="return_terminal" class="form-control" required>
                                <option value="">Select Terminal</option>
                                <option value="1">South Terminal</option>
                                <option value="2">North Terminal</option>
                                <option value="3">TBC</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label for="return_flight">Return Flight:</label>
                            <input type="text" class="form-control" name="return_flight" id="return_flight" required>
                        </div>
                    </div>  
                </div>
                <div class="row" style="padding: 3% 0% 3% 0%; ">
                    <hr>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <div class="col-sm-6 p-0">
                            <div class="form-group">
                                <div class="radios">
                                    <div class="radio-lable">
                                        <label for="vehicle">Do you have vehicle details?</label>
                                    </div>
                                    <div class="one">
                                        <input type="radio" id="no" name="vehicle"  value="NO" required>
                                        <label for="no">No</label>
                                    </div>
                                    <div class="two">
                                        <input type="radio" id="yes" name="vehicle" value="YES" required>
                                        <label for="yes">Yes</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> 
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="vehicle_make">Vehicle Make: *</label>
                            <input type="text" class="form-control" name="vehicle_make" id="vehicle_make" required>
                        </div>
                    </div> 
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="vehicle_model">Vehicle Model: *</label>
                            <input type="number" class="form-control" name="vehicle_model" id="vehicle_model" required>
                        </div>
                    </div> 
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="vehicle_color">Vehicle Colour: *</label>
                            <input type="text" class="form-control" name="vehicle_color" id="vehicle_color" required>
                        </div>
                    </div> 
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="vehicle_reg">Vehicle Reg Number: *</label>
                            <input type="number" class="form-control" name="vehicle_reg" id="vehicle_reg" required>
                        </div>
                    </div> 
                </div>
                <div class="row" style="padding: 3% 0% 3% 0%; ">
                    <hr>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="cancel" name="cancel" value="1">
                            <label class="form-check-label">Add Cancellation Cover £ 2.50</label>
                        </div>
                        <p>The cancellation cover will protect you if you need to cancel or amend<br> 
                            your booking upto 36 hours before departure.</p>
                    </div> 
                    <div class="col-sm-6">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="sms_service" name="sms_service" value="1" >
                            <label class="form-check-label">Add SMS Service £ 0.70</label>
                          </div>
                          <p>You will receive your parking booking confirmation to your mobile for fast<br>
                            and easy check in.</p>
                    </div> 
                </div>
                
                <div class="row" style="padding: 2% 0% 3% 0%;">
                    <hr>
                </div>
                <div class="row">
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label for="card_name">Name on Card: *</label>
                            <input type="text" class="form-control" name="card_name" id="card_name" required>
                        </div>
                    </div> 
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label for="card_number">Card Number: *</label>
                            <input type="number" class="form-control" name="card_number" id="card_number" required>
                        </div>
                    </div>
                    <div class="col-sm-2">
                        <div class="form-group">
                            <label for="expiry_date">Expiry Date: *</label>
                            <input type="date" class="form-control" name="expiry_date" id="expiry_date" required>
                        </div>
                    </div>
                    <div class="col-sm-2">
                        <div class="form-group">
                            <label for="cvc">CVC: *</label>
                            <input type="number" class="form-control" name="cvc" id="cvc" required>
                        </div>
                    </div> 
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="making_payment" name="making_payment" value="1">
                            <label class="form-check-label">On making payment I agree to Compare Your Parking Terms and Conditions</label>
                          </div>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary" style="font-size:117%;">CONFIRM BOOKING</button>
                <div class="row" style="padding: 2% 0% 3% 0%;">
                    <hr>
                </div>
            </form>
        </div>
        
<style>
.radios {
    display: flex;

}
.radio-lable {
    margin: 0px !important;
    padding: 
}
.radios .one {
    padding-left: 0%;
}
.radios .two {
    padding-left: 0%;
}
</style>
@endsection