@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;
    }
    .booking-review .booking-review-content .review-list li.final-total{
        border-top: 0px solid #eaeef3;
    }
</style>

@endpush
@section('content')
<div class="bravo-booking-page padding-content">
    <div class="container">
        <div class="row booking-success-notice">
            <div class="col-lg-8 col-md-8">
                <div class="d-flex align-items-center">
                    <img src="{{ asset('images/ico_success.svg') }}" alt="Payment Success">
                    <div class="notice-success">
                        <p class="line1"><span>{{ $AirboatBooking->first_name ?? '' }},</span>
                            your booking was submitted successfully!
                        </p>
                        <p class="line2">Booking details has been sent to: <span>{{ $AirboatBooking->email ?? ''
                                }}</span></p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-4">
                <ul class="booking-info-detail">
                    <li><span>Booking Date:</span> {{ date('m-d-Y', strtotime($AirboatBooking->date)) }} </li>
                    <li><span>Payment Method:</span> {{ $AirboatBooking->payment_gateway=='offline_payment'?'Offline Payment':$AirboatBooking->payment_gateway }} </li>
                    <li><span>Booking Status:</span> {{ ucfirst($AirboatBooking->status_payment) }}</li>
                </ul>
            </div>
        </div>
        <div class="row booking-success-detail">
            <div class="col-md-8">
                <div class="booking-review">
                    <h4 class="booking-review-title">Your Information</h4>
                    <div class="booking-review-content">
                        <div class="review-section">
                            <div class="info-form">
                                <ul>
                                    <li class="info-first-name">
                                        <div class="label">First name</div>
                                        <div class="val">{{ $AirboatBooking->first_name ?? '' }}</div>
                                    </li>
                                    <li class="info-last-name">
                                        <div class="label">Last name</div>
                                        <div class="val">{{ $AirboatBooking->last_name ?? '' }}</div>
                                    </li>
                                    <li class="info-email">
                                        <div class="label">Email</div>
                                        <div class="val">{{ $AirboatBooking->email ?? '' }}</div>
                                    </li>
                                    <li class="info-phone">
                                        <div class="label">Phone</div>
                                        <div class="val">{{ $AirboatBooking->phone ?? '' }}</div>
                                    </li>
                                    <li class="info-address">
                                        <div class="label">Address line 1</div>
                                        <div class="val">{{ $AirboatBooking->address ?? '' }}</div>
                                    </li>
                                    <li class="info-address2">
                                        <div class="label">Address line 2</div>
                                        <div class="val">{{ $AirboatBooking->address2 ?? '' }}</div>
                                    </li>
                                    <li class="info-city">
                                        <div class="label">City</div>
                                        <div class="val">{{ $AirboatBooking->city ?? '' }}</div>
                                    </li>
                                    <li class="info-state">
                                        <div class="label">State/Province/Region</div>
                                        <div class="val">{{ $AirboatBooking->state ?? '' }}</div>
                                    </li>
                                    <li class="info-zip-code">
                                        <div class="label">ZIP code/Postal code</div>
                                        <div class="val">{{ $AirboatBooking->zip_code ?? '' }}</div>
                                    </li>
                                    <li class="info-country">
                                        <div class="label">Country</div>
                                        <div class="val">{{get_country_name($AirboatBooking->country)}}</div>
                                    </li>
                                    <li class="info-notes">
                                        <div class="label">Special Requirements</div>
                                        <div class="val">{{$AirboatBooking->customer_notes}}</div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <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">{{ $AirboatBooking->CarType->name ?? '' }}</h3>
                                    <p class="address"><i class="fa fa-map-marker"></i>
                                        {{ $AirboatBooking->airports }}
                                    </p>
                                </div>
                                <div>
                                        @if(!empty($AirboatBooking->CarType->image_id))
                                            {!! get_image_tag($AirboatBooking->CarType->image_id,'medium',['class'=>'img-responsive','alt'=>$AirboatBooking->CarType->name ??'']) !!}
                                            @else
                                            {!! get_image_tag($AirboatBooking->CarType->image_id,'medium',['class'=>'img-responsive','alt'=>$AirboatBooking->CarType->name ??'']) !!}
                                        @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>Destination:{{ ucfirst($AirboatBooking->destination) }}</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-12">
                                                    <div class="row">
                                                        <div class="col-1">
                                                            <i
                                                                class="d-block rotate-90 icofont-airplane-alt font-size-30  mr-3"></i>
                                                        </div>
                                                        <div class="col-7">
                                                            <div>{{ $AirboatBooking->airports }}</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>{{ $AirboatBooking->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($AirboatBooking->date)) }}
                                                </div>
                                                <br />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {{-- ----end box---- --}}
                        </div>
                        <div class="review-section total-review">
                            <ul class="review-list">
                                <li class="final-total d-block">
                                    <div class="d-flex justify-content-between">
                                        <div class="label">Total:</div>
                                        <div class="val">{{ format_money($AirboatBooking->price) }}</div>
                                    </div>
                                    <div class="d-flex justify-content-between">
                                        <div class="label">Paid:</div>
                                        <div class="val">$0</div>
                                    </div>
                                    <div class="d-flex justify-content-between">
                                        <div class="label">Remain:</div>
                                        <div class="val">{{ format_money($AirboatBooking->price) }}</div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="modal fade" id="detailBookingDatebb75e7b8204ec5e038fadaabc2a9631b" tabindex="-1"
                    role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title text-center">Detail</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="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>01/05/2023 <i class="fa fa-long-arrow-right"></i>
                                                                25/05/2023</td>
                                                            <td class="text-right">$350*25</td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                        <div class="d-flex justify-content-between font-weight-bold px-2">
                                            <span>Total:</span>
                                            <span>$8.750</span>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@push('js')
<script src="{{ asset('module/booking/js/checkout.js') }}"></script>
@endpush