@extends('tickets.layouts.admin_layout')

@section('title', 'Orders - Loyaltiya Tickets')

@section('content')
	<div class="col-md-12">
		<div class="d-main-title">
			<h3><i class="fa-solid fa-receipt me-3"></i>Orders</h3>
		</div>
	</div>

	{{-- Summary cards --}}
	<div class="col-md-12">
		<div class="row g-3 mt-2">
			<div class="col-md-4">
				<div class="main-card p-4">
					<p class="text-muted mb-1">Orders</p>
					<h3 class="m-0">{{ $summary['total_orders'] }}</h3>
				</div>
			</div>
			<div class="col-md-4">
				<div class="main-card p-4">
					<p class="text-muted mb-1">Revenue</p>
					<h3 class="m-0">{{ number_format($summary['total_revenue'], 2) }}</h3>
				</div>
			</div>
			<div class="col-md-4">
				<div class="main-card p-4">
					<p class="text-muted mb-1">Tickets Sold</p>
					<h3 class="m-0">{{ $summary['total_tickets'] }}</h3>
				</div>
			</div>
		</div>
	</div>

	{{-- Date filter --}}
	<div class="col-md-12">
		<div class="main-card mt-4 p-4">
			<form method="GET" action="{{ route('tickets.orders') }}" class="row g-3 align-items-end" id="order_filter_form">
				<div class="col-md-3">
					<label class="form-label fs-16">Date Range</label>
					<select class="selectpicker w-100" name="range" id="range_select" title="Select range">
						<option value="today" {{ $range === 'today' ? 'selected' : '' }}>Today</option>
						<option value="this_week" {{ $range === 'this_week' ? 'selected' : '' }}>This Week</option>
						<option value="this_month" {{ $range === 'this_month' ? 'selected' : '' }}>This Month</option>
						<option value="last_30" {{ $range === 'last_30' ? 'selected' : '' }}>Last 30 Days</option>
						<option value="all" {{ $range === 'all' ? 'selected' : '' }}>All Time</option>
						<option value="custom" {{ $range === 'custom' ? 'selected' : '' }}>Custom Range</option>
					</select>
				</div>

				<div class="col-md-3 custom-range-field" style="display: {{ $range === 'custom' ? 'block' : 'none' }};">
					<label class="form-label fs-16">From</label>
					<input class="form-control h_50" type="date" name="from" value="{{ $from }}">
				</div>
				<div class="col-md-3 custom-range-field" style="display: {{ $range === 'custom' ? 'block' : 'none' }};">
					<label class="form-label fs-16">To</label>
					<input class="form-control h_50" type="date" name="to" value="{{ $to }}">
				</div>

				<div class="col-md-3">
					<button type="submit" class="main-btn btn-hover h_50 w-100">Apply</button>
				</div>
			</form>
		</div>
	</div>

	{{-- Orders table --}}
	<div class="col-md-12">
		<div class="main-card mt-4 p-4">
			@if ($orders->isEmpty())
				<p class="text-muted mb-0">No orders found for this range.</p>
			@else
				<div class="table-responsive">
					<table class="table align-middle">
						<thead>
							<tr>
								<th style="width: 40px;"></th>
								<th>Order #</th>
								<th>Event</th>
								<th>Customer</th>
								<th>Qty</th>
								<th>Total</th>
								<th>Coupon</th>
								<th>Status</th>
								<th>Date</th>
							</tr>
						</thead>
						<tbody>
							@foreach ($orders as $order)
								<tr class="order-row" data-bs-toggle="collapse" data-bs-target="#order-detail-{{ $order->id }}" style="cursor: pointer;">
									<td><i class="fa-solid fa-chevron-right toggle-icon"></i></td>
									<td>#{{ $order->id }}</td>
									<td>{{ $order->event->name }}</td>
									<td>{{ $order->customer->name }}</td>
									<td>{{ $order->quantity }}</td>
									<td>{{ $order->currency }} {{ number_format($order->total_amount, 2) }}</td>
									<td>
										@if ($order->coupon)
											<span class="badge bg-info-subtle text-info">{{ $order->coupon->code }}</span>
										@else
											<span class="text-muted">—</span>
										@endif
									</td>
									<td>
										<span class="badge {{ match($order->status) {
											'paid' => 'bg-success',
											'pending' => 'bg-warning',
											'failed', 'cancelled' => 'bg-danger',
											'refunded' => 'bg-secondary',
											default => 'bg-secondary',
										} }}">
											{{ ucfirst($order->status) }}
										</span>
									</td>
									<td>{{ $order->created_at->format('M d, Y h:i A') }}</td>
								</tr>
								<tr class="collapse" id="order-detail-{{ $order->id }}">
									<td colspan="9" class="p-0">
										<div class="order-detail-panel p-4">
											<div class="row g-4">
												{{-- Customer details --}}
												<div class="col-md-4">
													<h6 class="mb-3"><i class="fa-solid fa-user me-2"></i>Customer</h6>
													<p class="mb-1"><strong>Name:</strong> {{ $order->customer->name }}</p>
													<p class="mb-1"><strong>Email:</strong> {{ $order->customer->email }}</p>
													@if ($order->customer->phone)
														<p class="mb-1"><strong>Phone:</strong> {{ $order->customer->phone }}</p>
													@endif
													<p class="mb-0">
														<strong>Type:</strong>
														{{ $order->customer->is_guest ? 'Guest checkout' : 'Registered account' }}
													</p>
												</div>

												{{-- Order / payment details --}}
												<div class="col-md-4">
													<h6 class="mb-3"><i class="fa-solid fa-receipt me-2"></i>Order</h6>
													<p class="mb-1"><strong>Unit Price:</strong> {{ $order->currency }} {{ number_format($order->unit_price, 2) }}</p>
													<p class="mb-1"><strong>Quantity:</strong> {{ $order->quantity }}</p>
													@if ($order->discount_amount > 0)
														<p class="mb-1"><strong>Discount:</strong> -{{ $order->currency }} {{ number_format($order->discount_amount, 2) }}</p>
													@endif
													<p class="mb-1"><strong>Total Paid:</strong> {{ $order->currency }} {{ number_format($order->total_amount, 2) }}</p>
													<p class="mb-0">
														<strong>Paid At:</strong>
														{{ $order->paid_at ? $order->paid_at->format('M d, Y h:i A') : 'Not paid yet' }}
													</p>
												</div>

												{{-- Coupon details --}}
												<div class="col-md-4">
													<h6 class="mb-3"><i class="fa-solid fa-tags me-2"></i>Coupon</h6>
													@if ($order->coupon)
														<p class="mb-1"><strong>Code:</strong> {{ $order->coupon->code }}</p>
														<p class="mb-1">
															<strong>Type:</strong>
															{{ $order->coupon->type === 'percentage' ? $order->coupon->value . '% off' : $order->currency . ' ' . number_format($order->coupon->value, 2) . ' off' }}
														</p>
														<p class="mb-0"><strong>Amount Saved:</strong> {{ $order->currency }} {{ number_format($order->discount_amount, 2) }}</p>
													@else
														<p class="text-muted mb-0">No coupon applied.</p>
													@endif
												</div>
											</div>

											{{-- Tickets / check-in status --}}
											@if ($order->tickets->isNotEmpty())
												<hr class="my-4">
												<h6 class="mb-3"><i class="fa-solid fa-ticket me-2"></i>Tickets</h6>
												<div class="table-responsive">
													<table class="table table-sm mb-0">
														<thead>
															<tr>
																<th>Ticket #</th>
																<th>Status</th>
																<th>Checked In</th>
																<th>Last Check-in</th>
															</tr>
														</thead>
														<tbody>
															@foreach ($order->tickets as $ticket)
																<tr>
																	<td><code>{{ $ticket->ticket_number }}</code></td>
																	<td>
																		<span class="badge {{ $ticket->status === 'used' ? 'bg-success' : ($ticket->status === 'cancelled' ? 'bg-danger' : 'bg-secondary') }}">
																			{{ ucfirst($ticket->status) }}
																		</span>
																	</td>
																	<td>{{ $ticket->checked_in_count }} / {{ $order->quantity }}</td>
																	<td>{{ $ticket->checked_in_at ? $ticket->checked_in_at->format('M d, Y h:i A') : '—' }}</td>
																</tr>
															@endforeach
														</tbody>
													</table>
												</div>
											@endif
										</div>
									</td>
								</tr>
							@endforeach
						</tbody>
					</table>
				</div>

				<div class="mt-3">
					{{ $orders->links() }}
				</div>
			@endif
		</div>
	</div>
@endsection

@push('styles')
	<style>
		.order-detail-panel {
			background-color: #f9f9fb;
		}
		.order-row.collapsed .toggle-icon,
		.order-row:not(.collapsed) .toggle-icon {
			transition: transform 0.2s ease;
		}
		.order-row:not(.collapsed) .toggle-icon {
			transform: rotate(90deg);
		}
	</style>
@endpush

@push('scripts')
	<script>
		document.addEventListener('DOMContentLoaded', function () {
			const rangeSelect = document.getElementById('range_select');
			const customFields = document.querySelectorAll('.custom-range-field');

			function toggleCustomFields() {
				const isCustom = rangeSelect.value === 'custom';
				customFields.forEach(el => el.style.display = isCustom ? 'block' : 'none');
			}
			if (rangeSelect) {
				toggleCustomFields();
				rangeSelect.addEventListener('change', toggleCustomFields);
				$(rangeSelect).on('changed.bs.select', toggleCustomFields);
			}

			// Bootstrap's collapse toggles the "collapsed" class on the
			// trigger only if it IS the trigger element with data-bs-toggle;
			// since our trigger is the whole <tr>, add it manually so the
			// chevron rotation CSS above has something to key off.
			document.querySelectorAll('.order-row').forEach(function (row) {
				row.classList.add('collapsed');
				row.addEventListener('click', function () {
					row.classList.toggle('collapsed');
				});
			});
		});
	</script>
@endpush