@extends('layouts.app')
@push('css')
<link href="{{ asset('module/booking/css/checkout.css?_ver='.config('app.asset_version')) }}" rel="stylesheet">

<style>
    .box .col p {
        margin-top: 10px;
    }

    .box .row .col-12 {
        margin-top: 21px;
    }
</style>

@endpush
@section('content')
<div class="bravo-booking-page padding-content">
    <div class="container">
        <div id="bravo-checkout-page">
            <div class="row">
                <div class="col-md-8">
                    <h3 class="form-title">Booking Submission</h3>
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul style="margin: 1rem">
                                @foreach ($errors->all() as $error)
                                    <li style="margin: 12px">{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                    <div class="booking-form">
                        <form method="POST" action="{{ route('CityCityBooking') }}" id="form-checkout" class="form-checkout">
                            @method('POST')
                            @csrf
                            <input type="hidden" name="user_id" value="{{ Auth::user()->id??'' }}"/>
                            <input type="hidden" name="from_location" value="{{ (Request()->from_location) }}"/>
                            <input type="hidden" name="to_location" value="{{ (Request()->to_location) }}"/>
                            <input type="hidden" name="date" value="{{ Request()->date }}"/>
                            <input type="hidden" name="passengers" value="{{ (Request()->passengers) }}"/>
                            <input type="hidden" name="car_type_id" value="{{ (Request()->carType) }}"/>
                            <input type="hidden" name="price" value="{{ $CarTypes->price_city }}"/>
                            <input type="hidden" name="code" value="{{ mt_rand(1000000000,9999999999) }}"/>

                            <div class="form-section">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group"><label>First Name <span
                                                    class="required">*</span></label> <input type="text"
                                                placeholder="First Name" required value="{{ Auth::user()->first_name }}" name="first_name"
                                                class="form-control"></div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group"><label>Last Name <span class="required">*</span></label>
                                            <input type="text" required placeholder="Last Name" value="{{ Auth::user()->last_name }}" name="last_name"
                                                class="form-control"></div>
                                    </div>
                                    <div class="col-md-6 field-email">
                                        <div class="form-group"><label>Email <span class="required">*</span></label>
                                            <input type="email" required placeholder="email@domain.com"
                                                value="{{ Auth::user()->email }}" name="email" class="form-control"></div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group"><label>Phone <span class="required">*</span></label>
                                            <input type="text" required placeholder="Your Phone" value="{{ Auth::user()->phone??old('phone') }}" name="phone"
                                                class="form-control"></div>
                                    </div>
                                    <div class="col-md-6 field-address-line-1">
                                        <div class="form-group"><label>Address line 1 </label> <input type="text"
                                                placeholder="Address line 1" required value="{{ Auth::user()->address ?? old('address') }}" name="address"
                                                class="form-control"></div>
                                    </div>
                                    <div class="col-md-6 field-address-line-2">
                                        <div class="form-group"><label>Address line 2 </label> <input type="text"
                                                placeholder="Address line 2" required value="{{ Auth::user()->address2 ?? old('address2') }}" name="address2"
                                                class="form-control"></div>
                                    </div>
                                    <div class="col-md-6 field-city">
                                        <div class="form-group"><label>City </label> <input type="text" value="{{ Auth::user()->city??old('city') }}"
                                                name="city" placeholder="Your City" class="form-control"></div>
                                    </div>
                                    <div class="col-md-6 field-state">
                                        <div class="form-group"><label>State/Province/Region </label> <input type="text"
                                             required   value="{{ Auth::user()->state ?? old('state') }}" name="state" placeholder="State/Province/Region"
                                                class="form-control"></div>
                                    </div>
                                    <div class="col-md-6 field-zip-code">
                                        <div class="form-group"><label>ZIP code/Postal code </label> <input type="text"
                                              required  value="{{ Auth::user()->zip_code ?? old('zip_code') }}" name="zip_code" placeholder="ZIP code/Postal code"
                                                class="form-control"></div>
                                    </div>
                                    <div class="col-md-6 field-country">
                                        <div class="form-group">
                                            <label >{{__("Country")}} <span class="required">*</span> </label>
                                            <select name="country" required class="form-control">
                                                <option value="">{{__('-- Select --')}}</option>
                                                @foreach(get_country_lists() as $id=>$name)
                                                    <option {{ $id==Auth::user()->country?'selected':'' }}  value="{{$id}}">{{$name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-12"><label>Special Requirements </label> <textarea
                                            name="description"  value="{{ old('description') }}" cols="30" rows="6" placeholder="Special Requirements"
                                            class="form-control"></textarea></div>
                                </div>
                            </div>
                            <div class="form-section">
                                <h4 class="form-section-title">Select Payment Method</h4>
                                <div id="accordionExample" class="gateways-table accordion">
                                    <div class="card">
                                        <div class="card-header">
                                            <h4 class="mb-0"><label data-toggle="collapse"
                                                    data-target="#gateway_offline_payment"><input type="radio"
                                                        name="payment_gateway" value="offline_payment">
                                                    Offline Payment
                                                </label></h4>
                                        </div>
                                        <div id="gateway_offline_payment" aria-labelledby="headingOne"
                                            data-parent="#accordionExample" class="collapse">
                                            <div class="card-body">
                                                <div class="gateway_name">
                                                    Offline Payment
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group"><label class="term-conditions-checkbox"><input type="checkbox"
                                        name="term_conditions"> I have read and accept the <a target="_blank"
                                        href="">terms and conditions</a></label></div>
                            <div class="html_before_actions"></div>
                            <p class="alert-text mt10 danger" style="display: none;"></p>
                            <div class="form-actions"><button class="btn btn-danger">Submit
                                    <i class="fa fa-spin fa-spinner" style="display: none;"></i></button></div>
                        </form>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="booking-detail booking-form">
                        <div class="booking-review">
                            <h4 class="booking-review-title">Your Booking</h4>
                            <div class="booking-review-content">
                                <div class="review-section">
                                    <div class="service-info">
                                        <div>
                                            <h3 class="service-name"><a
                                                    href="http://127.0.0.1:8000/car/vinfast-lux-a20-plus">{{ $CarTypes->name }}</a></h3>
                                            <p class="address"><i class="fa fa-map-marker"></i>
                                                {{ Request()->from_location }}
                                            </p>
                                            <p class="address"><i class="fa fa-map-marker"></i>
                                                {{ Request()->to_location }}
                                            </p>
                                        </div>
                                        <div>
                                            @if(!empty($CarTypes->image_url))
                                                <img src="{{$CarTypes->image_url}}" class="img-responsive" alt="{{ $CarTypes->name }}">
                                                @else
                                                {!! get_image_tag($CarTypes->image_id,'medium',['class'=>'img-responsive','alt'=>$CarTypes->title]) !!}
                                            @endif
                                            </div>
                                    </div>
                                </div>
                                <div class="review-section">
                                {{-- ----start box---- --}}
                                <div class="box ">
                                    <div class="row">
                                        <div class="col">
                                            <div class="row">
                                                <div class="col-12">
                                                    <div class="row">
                                                        <div class="col-1">
                                                            <img src="https://alptransfer.com/images/icons/location.svg">
                                                        </div>
                                                        <div class="col-7">
                                                            <div>From:{{ ucfirst(Request()->from_location) }} </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-12">
                                                    <div class="row">
                                                        <div class="col-1">
                                                            <img src="https://alptransfer.com/images/icons/location.svg">
                                                        </div>
                                                        <div class="col-7">
                                                            <div>To:{{ ucfirst(Request()->to_location) }}</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <br />
                                            <div class="row">
                                                <div class="col-1">
                                                    <img src="{{ asset('images/passenger.svg?6f82f69') }}">
                                                </div>
                                                <div class="col-1">
                                                    <div>{{ Request()->passengers }}</div>
                                                </div>
                                                <br />
                                            </div>
                                            <br />
                                            <div class="row">
                                                <div class="col-1">
                                                    <img src="https://alptransfer.com/images/icons/date.svg">
                                                </div>
                                                <div class="col-9">
                                                    {{ date('m-d-Y', strtotime(Request()->date)) }}
                                                </div>
                                                <br />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {{-- ----end box---- --}}
                                </div>
                                <div class="review-section total-review">
                                    <ul class="review-list">
                                        <li>
                                            <div class="label">price
                                            </div>
                                            <div class="val">
                                                {{format_money_main($CarTypes->price_city)}}
                                            </div>
                                        </li>
                                        <li class="final-total d-block">
                                            <div class="d-flex justify-content-between">
                                                <div class="label">Total:</div>
                                                <div class="val">
                                                {{format_money_main($CarTypes->price_city)}}
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div id="detailBookingDatea6e3db811dc6ccac28875c16bd784bff" tabindex="-1" role="dialog"
                            aria-labelledby="modelTitleId" aria-hidden="true" class="modal fade">
                            <div role="document" class="modal-dialog modal-dialog-centered">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title text-center">Detail</h5> <button type="button"
                                            data-dismiss="modal" aria-label="Close" class="close"><span
                                                aria-hidden="true">×</span></button>
                                    </div>
                                    <div class="modal-body">
                                        <ul class="review-list list-unstyled">
                                            <li class="mb-3 pb-1 border-bottom">
                                                <h6 class="label text-center font-weight-bold mb-1"></h6>
                                                <div>
                                                    <div class="table-responsive">
                                                        <table class="table table-striped table-inverse mb-1">
                                                            <tbody>
                                                                <tr>
                                                                    <td>12/05/2023 <i
                                                                            class="fa fa-long-arrow-right"></i>
                                                                        20/05/2023</td>
                                                                    <td class="text-right">$350*9</td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                                <div class="d-flex justify-content-between font-weight-bold px-2">
                                                    <span>Total:</span> <span>$3.150</span></div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@push('js')
<script src="{{ asset('module/booking/js/checkout.js') }}"></script>
@endpush