@extends('layout.mainlayout')
@section('content')
@component('components.breadcrumb')
        @slot('title')
		Tour Booking Confirmation
        @endslot
        @slot('item1')
       index
        @endslot
        @slot('item3')
         Tour
         @endslot
        @slot('item2')
		Tour Booking
        @endslot
       @endcomponent

	<!-- Page Wrapper -->
	<div class="content">
		<div class="container">

			<!-- Booking Confirmation -->
			<div class="row justify-content-center">
				<div class="col-lg-10">
					<div class="card booking-confirmation mb-0">
						<div class="card-body">
							<div class="bg-light-200 border border-light p-3 rounded-2 mb-4">
								<div class="d-flex flex-wrap align-items-center justify-content-between ">
									<div class="d-flex flex-wrap align-items-center booking-hotels">
										<a href="{{url('tour-details')}}" class="avatar avatar-lg me-2">
											<img src="{{URL::asset('build/img/tours/tours-21.jpg')}}" alt="image" class="img-fluid  rounded-circle">
										</a>
										<div class="booking-details">
											<h6 class="mb-1"><a href="{{url('tour-details')}}">LaughFest Carnival</a></h6>
											<div class="d-flex flex-wrap align-items-center booking-items">
												<p class="fs-14 text-gray-6 pe-2 border-end border-light d-flex align-items-center me-2 ">
													<i class="isax isax-signpost5 me-2"></i>Sightseeing Tours
												</p>
												<p class="fs-14 text-gray-6 pe-2 border-end border-light d-flex align-items-center me-2 ">
													<i class="isax isax-location5 me-1"></i>15/C Prince Dareen Road, New
													York
												</p>
												<p class="fs-14 text-gray-6 pe-2 border-end border-light d-flex align-items-center me-2 ">
													<span class="badge badge-warning text-gray-9 me-1">5.0</span>(400
													Reviews)
												</p>
											</div>
										</div>
									</div>
									<div>
										<span class="badge badge-info status rounded-pill p-2 fs-10 d-flex align-items-center">Upcoming</span>
									</div>
								</div>
							</div>
							<div class="pb-4 border-bottom mb-4">
								<h6 class="mb-2">Booking Info</h6>
								<div class="row g-3">
									<div class="col-lg-3">
										<h6 class="fs-14">Destination</h6>
										<p class="text-gray-6 fs-16 ">Las Vegas</p>
									</div>
									<div class="col-lg-3">
										<h6 class="fs-14">No of Days</h6>
										<p class="text-gray-6 fs-16 ">4 Days, 5 Nights</p>
									</div>
									<div class="col-lg-3">
										<h6 class="fs-14">Booked On</h6>
										<p class="text-gray-6 fs-16 ">15 May 2024</p>
									</div>
									<div class="col-lg-3">
										<h6 class="fs-14">Check In Date & Time</h6>
										<p class="text-gray-6 fs-16 ">20 May 2024, 10:50 AM</p>
									</div>
									<div class="col-lg-3">
										<h6 class="fs-14">Return Date & Time</h6>
										<p class="text-gray-6 fs-16 ">25 May 2024, 10:50 AM</p>
									</div>
									<div class="col-lg-3">
										<h6 class="fs-14">Travellers</h6>
										<p class="text-gray-6 fs-16 ">4 Adults, 2 Child</p>
									</div>
								</div>
							</div>
							<div class="pb-4 border-bottom mb-4">
								<h6 class="mb-2">Extra Service Info</h6>
								<div class="d-flex flex-wrap align-items-center service-info gap-3">
									<span class="badge badge-light rounded-pill">Local Expert Guides</span>
									<span class="badge badge-light rounded-pill">Photography Services</span>
								</div>
							</div>
							<div class="pb-4 border-bottom mb-4">
								<h6 class="mb-2">Activities</h6>
								<div class="d-flex flex-wrap align-items-center service-info gap-3">
									<span class="badge badge-light rounded-pill">Sightseeing</span>
									<span class="badge badge-light rounded-pill">Boat Tours</span>
								</div>
							</div>
							<div class="pb-4 border-bottom mb-4">
								<h6 class="mb-2">Billing Info</h6>
								<div class="row g-3">
									<div class="col-lg-3">
										<h6 class="fs-14 mb-1">Name</h6>
										<p class="fs-16 text-gray-6">{{ $booking->customer_name ?? auth()->user()->name ?? 'Guest' }}</p>
									</div>
									<div class="col-lg-3">
										<h6 class="fs-14 mb-1">Email</h6>
										<p class="fs-16 text-gray-6">{{ $booking->customer_email ?? auth()->user()->email ?? 'Not Provided' }}</p>
									</div>
									<div class="col-lg-3">
										<h6 class="fs-14 mb-1">Phone</h6>
										<p class="fs-16 text-gray-6">{{ $booking->customer_phone ?? auth()->user()->phone ?? 'Not Provided' }}</p>
									</div>
									<div class="col-lg-3">
										<h6 class="fs-14 mb-1">Address</h6>
										<p class="fs-16 text-gray-6">{{ $booking->customer_address ?? 'Not Provided' }}</p>
									</div>
								</div>
							</div>
							<div>
								<h6 class="mb-2">Order Info</h6>
								<div class="row g-3">
									<div class="col-lg-3">
										<h6 class="fs-14 mb-1">Order Id</h6>
										<p class="fs-16 text-primary">#45669</p>
									</div>
									<div class="col-lg-3">
										<h6 class="fs-14 mb-1">Payment Method</h6>
										<p class="fs-16 text-gray-6">Credit Card (Visa)</p>
									</div>
									<div class="col-lg-3">
										<h6 class="fs-14 mb-1">Payment Status</h6>
										<p class="fs-16 text-success">Paid</p>
									</div>
									<div class="col-lg-3">
										<h6 class="fs-14 mb-1">Date of Payment</h6>
										<p class="fs-16 text-gray-6">20 May 2024, 10:50 AM</p>
									</div>
									<div class="col-lg-3">
										<h6 class="fs-14 mb-1">Tax</h6>
										<p class="fs-16 text-gray-6">15% ($60)</p>
									</div>
									<div class="col-lg-3">
										<h6 class="fs-14 mb-1">Discount</h6>
										<p class="fs-16 text-gray-6">20% ($15)</p>
									</div>
									<div class="col-lg-3">
										<h6 class="fs-14 mb-1">Booking Fees</h6>
										<p class="fs-16 text-gray-6">$25</p>
									</div>
									<div class="col-lg-3">
										<h6 class="fs-14 mb-1">Total Paid</h6>
										<p class="fs-16 text-gray-6">$6569</p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- / Booking Confirmation -->

		</div>
	</div>
	<!-- /Page Wrapper -->

       @component('components.modal-popup')
       @endcomponent
   @endsection