@extends('tickets.layouts.public')

@section('title', 'Order Confirmation - Loyaltiya Tickets')

@section('content')
	<div class="wrapper p-80">
		<div class="container">
			<div class="row justify-content-center">
				<div class="col-lg-9">

					@if (session('status'))
						<div class="alert alert-success mb-4">{{ session('status') }}</div>
					@endif
					@if ($errors->any())
						<div class="alert alert-danger mb-4">
							@foreach ($errors->all() as $error)
								<p class="mb-0">{{ $error }}</p>
							@endforeach
						</div>
					@endif

					@if ($order->isPaid())
						@php $ticket = $order->tickets->first(); @endphp

						{{-- Event banner header --}}
						<div class="main-card overflow-hidden mb-4">
							<div style="height: 220px; position: relative; background-color:#1c1c28;">
								<img src="{{ $order->event->banner_image ? asset($order->event->banner_image) : asset('tickets/images/event-imgs/big-2.jpg') }}"
									 alt="{{ $order->event->name }}"
									 style="width:100%; height:100%; object-fit:cover; opacity:0.55;">
								<div style="position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:32px; color:#fff;">
									<span class="badge bg-success align-self-start mb-2">
										<i class="fa-solid fa-circle-check me-1"></i>Payment Successful
									</span>
									<h2 class="m-0 text-white">{{ $order->event->name }}</h2>
									<p class="mb-0">{{ $order->event->event_starts_at->format('D, M d, Y h:i A') }}</p>
								</div>
							</div>
						</div>

						<div class="row g-4">
							{{-- QR + action buttons --}}
							<div class="col-md-5">
								<div class="main-card p-4 text-center h-100">
									<h6 class="mb-3">Your Entry Pass</h6>
									@if ($ticket)
										<img src="{{ route('tickets.qr', $ticket) }}" alt="Ticket QR code" style="width: 220px; height: 220px;">
										<p class="mt-3 mb-1 text-muted" style="word-break: break-all; font-size: 13px;">{{ $ticket->ticket_number }}</p>
										<p class="mb-4">
											<span class="badge bg-secondary">{{ $order->quantity }} {{ \Illuminate\Support\Str::plural('person', $order->quantity) }} on this pass</span>
										</p>

										<div class="d-grid gap-2">
											<!-- <a href="{{ route('tickets.download_qr', $ticket) }}" class="co-main-btn btn-hover h_40 d-inline-flex align-items-center justify-content-center">
												<i class="fa-solid fa-download me-2"></i>Download QR
											</a> -->
											<a href="{{ route('tickets.receipt', $ticket) }}" class="co-main-btn btn-hover h_40 d-inline-flex align-items-center justify-content-center">
												<i class="fa-solid fa-file-invoice me-2"></i>Download Tickets & Receipt
											</a>
											<!-- <a href="{{ route('tickets.wallet', $ticket) }}" class="co-main-btn btn-hover h_40 d-inline-flex align-items-center justify-content-center">
												<i class="fa-brands fa-apple me-2"></i>Add to Wallet
											</a> -->
											<form method="POST" action="{{ route('tickets.resend_email', $ticket) }}">
												@csrf
												<button type="submit" class="co-main-btn btn-hover h_40 w-100">
													<i class="fa-solid fa-envelope me-2"></i>Resend Email
												</button>
											</form>
										</div>
									@else
										<p class="text-muted mb-0">Your ticket is still being generated - refresh in a moment.</p>
									@endif
								</div>
							</div>

							{{-- Order summary --}}
							<div class="col-md-7">
								<div class="main-card p-4 h-100">
									<h6 class="mb-3">Order Summary</h6>
									<p class="mb-1"><strong>Order #:</strong> {{ $order->id }}</p>
									<p class="mb-1"><strong>Name:</strong> {{ $order->customer->name }}</p>
									<p class="mb-3"><strong>Email:</strong> {{ $order->customer->email }}</p>

									<div class="table-responsive">
										<table class="table table-sm mb-0">
											<thead>
												<tr>
													<th>Ticket Type</th>
													<th class="text-center">Qty</th>
													<th class="text-end">Price</th>
													<th class="text-end">Subtotal</th>
												</tr>
											</thead>
											<tbody>
												@foreach ($order->items as $item)
													<tr>
														<td>{{ $item->ticket_type_name }}</td>
														<td class="text-center">{{ $item->quantity }}</td>
														<td class="text-end">{{ $order->currency }} {{ number_format($item->unit_price, 2) }}</td>
														<td class="text-end">{{ $order->currency }} {{ number_format($item->subtotal, 2) }}</td>
													</tr>
												@endforeach
											</tbody>
											<tfoot>
												@if ($order->discount_amount > 0)
													<tr>
														<td colspan="3" class="text-end text-muted">
															Discount @if($order->coupon)({{ $order->coupon->code }})@endif
														</td>
														<td class="text-end text-muted">-{{ $order->currency }} {{ number_format($order->discount_amount, 2) }}</td>
													</tr>
												@endif
												<tr>
													<td colspan="3">GST</td>
													<td class="text-end">{{ $order->currency }} {{ number_format($order->gst_amount, 2) }}</td>
												</tr>
												<tr>
													<td colspan="3" class="text-end"><strong>Total Paid</strong></td>
													<td class="text-end"><strong>{{ $order->currency }} {{ number_format($order->total_amount, 2) }}</strong></td>
												</tr>
											</tfoot>
										</table>
									</div>

									@if ($order->event->isOffline())
										<hr>
										<p class="mb-1"><i class="fa-solid fa-location-dot me-2"></i><strong>{{ $order->event->venue_name }}</strong></p>
										<p class="mb-0 text-muted">
											{{ collect([$order->event->address_1, $order->event->city, $order->event->state, $order->event->country])->filter()->implode(', ') }}
										</p>
									@else
										<hr>
										<p class="mb-0"><i class="fa-solid fa-video me-2"></i>Streaming link will be shared before the event starts.</p>
									@endif
								</div>
							</div>
						</div>
					@else
						<div class="main-card p-4 text-center">
							<h3 class="mb-3"><i class="fa-solid fa-clock text-warning me-2"></i>Processing Your Payment</h3>
							<p>We're confirming your payment with Stripe. This page will update shortly - refresh in a few seconds if your tickets don't appear yet.</p>
						</div>
					@endif
				</div>
			</div>
		</div>
	</div>
@endsection

@if (! $order->isPaid())
	@push('scripts')
		<script>
			setTimeout(() => window.location.reload(), 4000);
		</script>
	@endpush
@endif