@extends('layouts.app')

@section('content')
<nav aria-label="breadcrumb">
	<ol class="breadcrumb">
		<li class="breadcrumb-item">
			<a href="{{ route('orders.index') }}" class="text-decoration-none fw-bold">Orders</a>
		</li>
		<li class="breadcrumb-item active" aria-current="page">{{ $order->number }}</li>
	</ol>
</nav>

<div class="card mb-3">
    <div class="card-header py-3">
        <h5 class="mb-0">Order #{{ $order->number }}</h5>
    </div>

	@php 
		$shipping = $order->shipping;
		$payment  = $order->payment ?? null;
	@endphp

    <div class="card-body">
    	<div class="container-fluid">
			<div class="row mb-3">
				<label class="col-md-2 col-form-label fw-bold">Number</label>

				<div class="col-md-10">
					<div class="form-control-plaintext">{{ $order->number }}</div>
				</div>
			</div>

			<div class="row mb-3">
				<label class="col-md-2 col-form-label fw-bold">Placed At</label>

				<div class="col-md-10">
					<div class="form-control-plaintext">{{ $order->created_at->format('Y-m-d @ H:i') }}</div>
				</div>
			</div>

			@if ($order->deleted_at)
			<div class="row mb-3">
				<label class="col-md-2 col-form-label fw-bold">Canceled At</label>

				<div class="col-md-10">
					<div class="form-control-plaintext">{{ $order->deleted_at->format('Y-m-d @ H:i') }}</div>
				</div>
			</div>
			@endif

			<div class="row mb-3">
				<label class="col-md-2 col-form-label fw-bold">Total</label>

				<div class="col-md-10">
					<div class="form-control-plaintext">{{ $order->total }}</div>
				</div>
			</div>

			@if ($order->discount)
			<div class="row mb-3">
				<label class="col-md-2 col-form-label fw-bold">Discount Code</label>

				<div class="col-md-10">
					<div class="form-control-plaintext">{{ $order->discount->code }}</div>
				</div>
			</div>
			@endif

			<div class="row mb-3">
				<label class="col-md-2 col-form-label fw-bold">Status</label>

				<div class="col-md-10">
					<div class="form-control-plaintext">
						<span class="badge @if (in_array($order->status, ['PAID', 'CONFIRMED'])){{ 'bg-teal' }}@else{{ 'bg-blue' }}@endif">{{ $order->status }}</span>
					</div>
				</div>
			</div>

			<div class="row mb-3">
				<label class="col-md-2 col-form-label fw-bold">Customer</label>

				<div class="col-md-10">
					<div` class="form-control-plaintext">
						<div class="fw-bold">{{ ucwords(substr($order->user->getTable(), 0, -1)) }}</div>
						<div>{{ $order->user->first_name }} {{ $order->user->last_name }}</div>
						<div>{{ $order->user->email }}</div>
					</div>
				</div>
			</div>
		</div>
    </div>
</div>

<div class="card mb-3">
	<h6 class="card-header py-3">Items</h6>

	<div class="card-body">
		<div class="table-responsive">
			<table class="table table-borderless">
				<thead class="table-red">
					<th>Item</th>
					<th class="text-end">Unit Price</th>
					<th class="text-end">Quantity</th>
					<th class="text-end">Total</th>	
				</thead>

				<tbody>
					@foreach ($order->productVariations as $variation)
					@php 
						$product = $variation->product; 
					@endphp
					<tr>
						<td>
							<div>{{ $product->name }}</div>
							<div class="small text-muted">{{ $variation->name }}</div>
							<div class="small text-muted">{{ $variation->pivot->date }} {{ $variation->pivot->time }}</div>
						</td>
						<td class="text-end">{{ $variation->pivot->unit_price }}</td>
						<td class="text-end">{{ $variation->pivot->quantity }}</td>
						<td class="text-end">{{ $variation->pivot->price }}</td>
					</tr>
					@endforeach

					<tr>
						<td class="text-end" colspan="3">Subtotal</td>
						<td class="text-end">{{ $order->subtotal }}</td>
					</tr>

					<tr>
						<td class="text-end" colspan="3">Discount Amount</td>
						<td class="text-end">{{ $order->discount_amount }}</td>
					</tr>

					<tr>
						<td class="text-end" colspan="3">Tax</td>
						<td class="text-end">{{ $order->tax }}</td>
					</tr>

					<tr>
						<td class="text-end border-top border-bottom fw-bold" colspan="3">Total</td>
						<td class="text-end border-top border-bottom fw-bold">{{ $order->total }}</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>	
</div>

<div class="card mb-3">
	<h6 class="card-header py-3">Payments</h6>

	<div class="card-body">
		<div class="table-responsive">
			<table class="table table-borderless table-striped">
				<thead class="table-red">
					<th>Transaction Number</th>
					<th>Status</th>	
					<th>Transaction Message</th>
					<th>Created At</th>
					<th>Updated At</th>
					<th></th>
				</thead>

				<tbody>
				@if ($order->payments->count())
					@foreach ($order->payments as $payment)
					<tr class="align-middle">
						<td>{{ $payment->number }}</td>
						<td>{{ $payment->status }}</td>
						<td>{{ $payment->transaction_message ?? '-' }}</td>
						<td>{{ $payment->created_at->format('Y-m-d @ H:i') }}</td>
						<td>{{ $payment->updated_at->format('Y-m-d @ H:i') }}</td>
						<td>
							@if ($payment->status == 'PENDING')
							<button type="button" class="btn btn-sm btn-secondary btn-status-update text-white" data-id="{{ $payment->id }}" title="Update Payment">
								<i class="fas fa-check-circle"></i>
							</button>
							@endif
						</td>
					</tr>
					@endforeach
				@else
					<tr class="text-center">
						<td colspan="10">No record</td>
					</tr>
				@endif
				</tbody>
			</table>
		</div>
	</div>
</div>
@endsection

@section('js')
<script>
	$('.btn-status-update').click(function()
	{	
		const id = $(this).data('id');

		Swal.fire({
			icon: 'warning',
			title: 'Mark As Paid',
			html: `Make sure that you have double check with the payment gateway portal before proceeding. 
					<br><br>This will not affect the order.`,
			showCancelButton: true,
		})
		.then(function(result)
		{
			if (result.isConfirmed) 
			{
				$.ajax({
					url: `{{ route('orders.payments.status.update') }}`,
					type: 'POST',
					data: {
						id: id
					},
					dataType: 'json'
				})
				.done(function(res)
				{
					showNoty(res);

					if (res.status == 'success')
					{
						window.location.reload();
					}
				});
			}
		});
	});
</script>
@endsection