@extends('tickets.layouts.public')

@section('title', $customer->name . ' - Loyaltiya Tickets')

@section('content')
	<div class="wrapper">
		<div class="profile-banner">
			<div class="hero-cover-block">
				<div class="hero-cover">
					<div class="hero-cover-img"></div>
				</div>
			</div>
			<div class="user-dt-block">
				<div class="container">
					<div class="row">
						<div class="col-xl-4 col-lg-5 col-md-12">
							<div class="main-card user-left-dt">
								<div class="user-avatar-img">
									<img src="{{ asset('tickets/images/profile-imgs/img-2.jpg') }}" alt="{{ $customer->name }}">
								</div>
								<div class="user-dts">
									<h4 class="user-name">
										{{ $customer->name }}
										@if (! $customer->is_guest)
											<span class="verify-badge"><i class="fa-solid fa-circle-check"></i></span>
										@endif
									</h4>
									<span class="user-email">{{ $customer->email }}</span>
								</div>
								<div class="user-description mt-3">
									<p>
										{{ $orders->count() }} {{ \Illuminate\Support\Str::plural('event', $orders->count()) }} attended
										&middot; Member since {{ $customer->created_at->format('M Y') }}
									</p>
								</div>
								@if ($customer->phone)
									<div class="user-description">
										<p><i class="fa-solid fa-phone me-2"></i>{{ $customer->phone }}</p>
									</div>
								@endif

								@unless ($customer->is_guest)
									<div class="mt-4 pt-3 border-top">
										<a href="#" class="text-danger small" data-bs-toggle="modal" data-bs-target="#deleteAccountModal">
											<i class="fa-solid fa-trash-can me-2"></i>Delete my account
										</a>
									</div>
								@endunless
							</div>
						</div>
						<div class="col-xl-8 col-lg-7 col-md-12">
							<div class="right-profile mt-2">
								<div class="user-events">
									<div class="row">
										<div class="col-md-12">
											<h5 class="mb-3">My Tickets</h5>
											@forelse ($orders as $order)
												<a href="{{ route('checkout.success', ['order_id' => $order->id]) }}" class="main-card mt-4 d-block text-decoration-none text-reset">
													<div class="card-top p-4 border-bottom-0">
														<div class="card-event-img">
															<img src="{{ $order->event->banner_image ? asset($order->event->banner_image) : asset('tickets/images/event-imgs/img-6.jpg') }}" alt="{{ $order->event->name }}">
														</div>
														<div class="card-event-dt">
															<h5>{{ $order->event->name }}</h5>
															<div class="evnt-time">{{ $order->event->event_starts_at->format('D, M d, Y h:i A') }}</div>
															<div class="evnt-time">
																{{ $order->quantity }} {{ \Illuminate\Support\Str::plural('ticket', $order->quantity) }}
																&middot; {{ $order->currency }} {{ number_format($order->total_amount, 2) }}
															</div>
															<div class="event-btn-group">
																<span class="esv-btn me-2">
																	<i class="fa-solid fa-ticket me-2"></i>View Ticket
																</span>
															</div>
														</div>
													</div>
												</a>
											@empty
												<div class="main-card mt-4 p-4">
													<p class="mb-0 text-muted">You haven't booked any events yet.</p>
													<a href="{{ route('events.explore') }}" class="main-btn btn-hover mt-3 d-inline-flex align-items-center justify-content-center">
														Explore Events
													</a>
												</div>
											@endforelse
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- Delete Account Confirmation Modal -->
	<div class="modal fade" id="deleteAccountModal" tabindex="-1" aria-labelledby="deleteAccountLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content p-3">
				<div class="modal-header">
					<h5 class="modal-title" id="deleteAccountLabel">Delete Your Account?</h5>
					<button type="button" class="close-model-btn" data-bs-dismiss="modal" aria-label="Close"><i class="uil uil-multiply"></i></button>
				</div>
				<div class="modal-body">
					<p class="mb-0">
						This will permanently delete your account and personal information. This cannot be undone.
					</p>
					<p class="mb-0 mt-3 text-muted small">
						Your past orders and tickets will remain on file for the event organiser's records, but will no longer be linked to your name or email.
					</p>
				</div>
				<div class="modal-footer">
					<button type="button" class="co-main-btn min-width btn-hover h_40" data-bs-dismiss="modal">Cancel</button>
					<form method="POST" action="{{ route('account.destroy') }}">
						@csrf
						@method('DELETE')
						<button type="submit" class="main-btn min-width btn-hover h_40 bg-danger border-danger">
							Yes, Delete My Account
						</button>
					</form>
				</div>
			</div>
		</div>
	</div>
@endsection