@extends('layouts.app')

@section('title') Orders @endsection

@section('content')
<div class="container py-5">
	<div>
		<p>Your Orders</p>
		<p class="grey-text">You have made {{ $orders->count() }} {{ str_plural('order', $orders->count()) }}.</p>
	</div>

	<div class="row">
		<div class="col-xl-3 col-lg-4 py-5" style="background: #fff8e8;">
			@include('partials.customer_sidebar')
		</div>

		<div class="col-lg-8 col-xl-9">
			@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>
						</tr>
					</thead>

					<tbody>
						@foreach ($orders as $order)
						<tr>
							<td class="text-center">
								<a href="{{ route('orders.show', ['id' => $order->number]) }}" class="font-weight-bold"># {{ $order->number }}</a>
								
								@if ($order->payment and $order->payment->method == 1 and $order->payment->billplz_signature_matched === 0)
								<i class="fas fa-exclamation text-red"></i>
								@endif
							</td>
							<td class="text-center">{{ $order->date_formatted }}</td>
							<td class="text-center">{{ $order->total }} Points</td>
						</tr>
						@endforeach
					</tbody>
				</table>
			</div>

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

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

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