@extends('layouts.app')

@section('title') Orders @endsection

@section('content')
<div class="container py-5">
	<div class="heading-box">
		<h1 class="heading display-4">Your Orders</h1>
		<p class="lead">You have made {{ $orders->count() }} {{ Str::plural('order', $orders->count()) }}.</p>
	</div>

	<div class="row">
		<div class="col-lg-8 col-xl-9">
			@if (Session::has('message'))
			<div class="alert bg-cyan text-white">
				{{ Session::get('message') }}
			</div>
			@endif

			@if ($orders->count() > 0)
			<div class="table-responsive">
				<table class="table table-borderless table-hover">
					<thead>
						<tr>
							<th>Order #</th>
							<th>Date</th>
							<th>Total</th>
							<th>Status</th>
						</tr>
					</thead>

					<tbody>
						@foreach ($orders as $order)
						<tr>
							<td class="text-center">
								<a href="{{ route('orders.show', ['number' => $order->number]) }}" class="fw-bold"># {{ $order->number }}</a>
							</td>
							<td class="text-center">{{ $order->created_at->format('d F Y') }}</td>
							<td class="text-center">{{ config('app.currency') }} {{ $order->total }}</td>
							<td class="text-center">
								<span class="badge  @if (in_array($order->status, ['PAID', 'CONFIRMED']))
													{{ 'bg-teal' }}
													@elseif (in_array($order->status, ['CANCELLED', 'ADMIN_CANCELLED']))
													{{ 'bg-red' }}
													@else
													{{ 'bg-blue' }}
													@endif">
									{{ $order->status }}
								</span>
							</td>
						</tr>
						@endforeach
					</tbody>
				</table>
			</div>

			{{ $orders->links() }}
			@endif
		</div>

		<div class="col-xl-3 col-lg-4">
			@include('partials.customer_sidebar')
		</div>
	</div>
</div>
@endsection

@section('js')
<script>
	$('tbody tr').click(function()
	{
		const href = $(this).find('a').attr('href');

		window.location = href;
	});
</script>
@endsection