@extends('layouts.frontend')

@section('seo')

<title>
	@if(auth()->check()) 
		{{ auth()->user()->name }} 's Orders
	@endif
</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

@endsection

@section('content')

	<!-- cart section end -->
	<section class="order-datail-section">
		<div class="container">
			<div class="row">
				<div class="col-12">
					<div class="cart-table">
					<h3 class="h2 mb-4">Order {{ $order->order_number }} 
						<strong class="text-uppercase text-danger">{{ $order->status }}</strong>
					</h3>
					<div class="cart-table-warp cart-item table-responsive">
						<table class="table" cellpedding="0" cellspacing="0">
						<thead>
							<tr>
								<th class="product-th">Product</th>
								<th class="size-th">Quantity</th>
								<th class="total-th">Price</th>
							</tr>
						</thead>
						<tbody>
							@foreach($products as $p)
							<tr>
								<td class="product-col">
									{{-- @if($p->model->photos->count() > 0)
		                               <img src="/storage/{{ $p->pivot->photos->first()->images }}" alt="">
		                            @else --}}
		                             {{--    <img src="{{ asset('frontend/img/no-image.png') }}" alt="">
		                            @endif --}}
									<div class="pc-title">
										<a href="{{ route('single-product', $p->slug) }}"><h4>{{ $p->name }}</h4></a>
										<p>${{ $p->price }}</p>
									</div>
								</td>
								<td class="size-col"><h4>{{ $p->pivot->quantity }}</h4></td>
								<td class="total-col"><h4>${{ $p->price * $p->pivot->quantity }}</h4></td>
							</tr>
							@endforeach
						</tbody>
					</table>
					</div>
					<div class="total-cost">
						<h6 class="h3">Order Total <span>${{ $order->billing_total }}</span></h6>
					</div>
				</div>
				</div>
				<!-- <div class="col-lg-4 card-right">
					<a href="" class="site-btn">Profile Settings</a>
					<a href="" class="site-btn sb-dark">Continue shopping</a>
				</div> -->
			</div>
		</div>
	</section>
	<!-- cart section end -->
@endsection