@extends('partials.main')
@section('title')
{{ 'payment' }}
@endsection
@section('content')
<style>
.tg-description span {
    color: #ff7550;
}
</style>

<!--************************************
        Inner Banner Start
      *************************************-->
<section class="tg-parallax tg-innerbanner" data-appear-top-offset="600" data-parallax="scroll"
    data-image-src="images/Wannago-Sri-Lanka.jpg">
    <div class="tg-sectionspace tg-haslayout">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <h1>payment</h1>
                    <h2>Donec id elit non mi porta gravida at eget metus</h2>
                    <ol class="tg-breadcrumb">
                        <li><a href="javascript:void(0);">Home</a></li>
                        <li class="tg-active">payment</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
</section>
<!--************************************
        Inner Banner End
      *************************************-->
<!--************************************
        Main Start
      *************************************-->
<main id="" class="tg-main tg-haslayout">

    <form method="post" enctype="multipart/form-data" action="{{route('order')}}">
        @csrf

        <input type="text" name="mail" id="">
        <button type="submit">new btn</button>
    </form>
    <div class="tg-sectionspace tg-haslayout">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

                    <div id="" class="tg-content">
                        <div class="tg-billingdetail">
                            <form method="post" action="/paymentsubmit" class="tg-formtheme tg-formbillingdetail">
                                @csrf
                                <fieldset>
                                    <div class="tg-bookingdetail">
                                        <div class="tg-box">
                                            <div class="tg-heading">
                                                <h3>Billing Details</h3>
                                            </div>
                                            <div class="clearfix"></div>
                                            <div class="row">
                                                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                                                    <div class="form-group">
                                                        <label>First name <sup>*</sup></label>
                                                        <input type="text" name="firstname" class="form-control"
                                                            placeholder="">
                                                    </div>
                                                </div>
                                                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                                                    <div class="form-group">
                                                        <label>Last name <sup>*</sup></label>
                                                        <input type="text" name="lastname" class="form-control"
                                                            placeholder="">
                                                    </div>
                                                </div>
                                                {{-- <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
															<div class="form-group">
																<label>Company name <sup>*</sup></label>
																<input type="text" name="companyname" class="form-control" placeholder="">
															</div>
														</div> --}}
                                                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                                    <div class="form-group">
                                                        <label>Country<sup>*</sup></label>
                                                        <span class="tg-select">
                                                            <select name="country">
                                                                <option value="">Select Country</option>
                                                                <option value="aberdeen">Aberdeen</option>
                                                                <option value="aldershot">Aldershot</option>
                                                                <option value="altrincham">Altrincham</option>
                                                                <option value="aylesbury">Aylesbury</option>
                                                                <option value="bamber">Bamber</option>
                                                                <option value="bangor">Bangor</option>
                                                                <option value="batley">Batley</option>
                                                                <option value="bebingto">Bebingto</option>
                                                                <option value="bedford">Bedford</option>
                                                                <option value="birmingham">Birmingham</option>
                                                                <option value="blackpool">Blackpool</option>
                                                                <option value="brentwood">Brentwood</option>
                                                                <option value="bristol">Bristol</option>
                                                                <option value="cardiff">Cardiff</option>
                                                                <option value="carlisle">Carlisle</option>
                                                                <option value="crawley">Crawley</option>
                                                                <option value="darlington">Darlington</option>
                                                                <option value="eastleigh">Eastleigh</option>
                                                                <option value="edinburg">Edinburg</option>
                                                                <option value="esher">Esher</option>
                                                                <option value="glasgow-sco">Glasgow SCO</option>
                                                                <option value="guildford">Guildford</option>
                                                                <option value="halesowen">Halesowen</option>
                                                                <option value="halifax">Halifax</option>
                                                                <option value="hamilton">Hamilton</option>
                                                                <option value="leeds">Leeds</option>
                                                                <option value="leicester">Leicester</option>
                                                                <option value="liverpool">Liverpool</option>
                                                                <option value="london">London</option>
                                                                <option value="louisville">Louisville</option>
                                                                <option value="manchester">Manchester</option>
                                                                <option value="sheffield">Sheffield</option>
                                                            </select>
                                                        </span>
                                                    </div>
                                                </div>
                                                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                                    <div class="form-group">
                                                        <label>Address <sup>*</sup></label>
                                                        <input type="text" name="address" class="form-control"
                                                            placeholder="">
                                                    </div>
                                                </div>
                                                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                                                    <div class="form-group">
                                                        <label>Town / City <sup>*</sup></label>
                                                        <input type="text" name="towncity" class="form-control"
                                                            placeholder="">
                                                    </div>
                                                </div>
                                                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                                                    <div class="form-group">
                                                        <label>Postcode / ZIP <sup>*</sup></label>
                                                        <input type="text" name="postcode" class="form-control"
                                                            placeholder="">
                                                    </div>
                                                </div>
                                                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                                                    <div class="form-group">
                                                        <label>Email Address <sup>*</sup></label>
                                                        <input type="email" name="email" class="form-control"
                                                            placeholder="">
                                                    </div>
                                                </div>
                                                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                                                    <div class="form-group">
                                                        <label>Phone Number <sup>*</sup></label>
                                                        <input type="text" name="phone" class="form-control"
                                                            placeholder="">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tg-bookingdetail">
                                        <div class="tg-box tg-addtionalinfo">
                                            <div class="tg-heading">
                                                <h3>Additional Information</h3>
                                            </div>
                                            <div class="form-group">
                                                <label>Your Comment</label>
                                                <textarea placeholder="Notes about your order, e.g."></textarea>
                                            </div>
                                        </div>
                                        <div class="tg-box tg-yourorder">
                                            <div class="tg-heading">
                                                <h3>Your Order</h3>
                                            </div>
                                            <div class="tg-widgetpersonprice">
                                                <div class="tg-widgetcontent">
                                                    <ul>
                                                        <li class="tg-personprice">
                                                            <div class="tg-perperson"><span>Araliya 1 night</span><em>
                                                                    onword $3,000.00 </em></div>
                                                        </li>
                                                        <li>
                                                            <div class="form-group">
                                                                <label>Advance pay</label>
                                                                <input type="text" name="price" class="form-control"
                                                                    placeholder="">
                                                            </div>
                                                        </li>
                                                        <li></li>
                                                        {{-- <li><span>Tax Due</span><em>$300</em></li> --}}
                                                        <li class="tg-totalprice">
                                                            <div class="tg-totalpayment"><span>
                                                                    <button class="tg-btn" type="submit"><span>place
                                                                            order</span></button>

                                                            </div>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </fieldset>
                                {{-- <fieldset class="tg-paymentarea">
											<div id="tg-accordion" class="tg-accordion" role="tablist" aria-multiselectable="true">
												<div class="tg-panel">
													<h4 class="tg-radio active">
														<input type="radio" id="bank-transfer" name="paymenttype" checked="">
														<label for="bank-transfer">Direct Bank Transfer</label>
													</h4>
													<div class="tg-panelcontent" style="display: block;">
														<div class="tg-description">
															<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Vivamus sagittis lacus vel augue Sed non mauris vitae;erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo.</p>
														</div>
													</div>
												</div>
												<div class="tg-panel">
													<h4 class="tg-radio">
														<input type="radio" id="cash" name="paymenttype">
														<label for="cash">Cash On Delivery</label>
													</h4>
													<div class="tg-panelcontent" style="display: none;">
														<div class="tg-description">
															<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Vivamus sagittis lacus vel augue Sed non mauris vitae;erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo.</p>
														</div>
													</div>
												</div>
												<div class="tg-panel">
													<h4 class="tg-radio">
														<input type="radio" id="paypal" name="paymenttype">
														<label for="paypal">PayPal Express Checkout </label>
														<img src="images/paypal.jpg" alt="image description">
													</h4>
													<div class="tg-panelcontent" style="display: none;">
														<div class="tg-description">
															<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Vivamus sagittis lacus vel augue Sed non mauris vitae;erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo.</p>
														</div>
													</div>
												</div>
												<div class="tg-panel">
													<h4 class="tg-radio">
														<input type="radio" id="creditcard" name="paymenttype">
														<label for="creditcard"> Credit Card (Stripe)</label>
														<img src="images/visastrip.jpg" alt="image description">
													</h4>
													<div class="tg-panelcontent" style="display: none;">
														<div class="tg-description">
															<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Vivamus sagittis lacus vel augue Sed non mauris vitae;erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo.</p>
														</div>
													</div>
												</div>
											</div>
										</fieldset> --}}
                                {{-- <fieldset>
											<button class="tg-btn" type="submit"><span>place order</span></button>
										</fieldset> --}}
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
<!--************************************
        Main End
      *************************************-->
@endsection