@extends('layouts.app')

@section('css')
<link rel="stylesheet" href="{{ asset('css/bootstrap-datetimepicker.min.css') }}">
@endsection

@section('content')
<div class="card">
    <div class="card-header">
        <h5 class="card-title">Order #{{ $order->number }}</h5>
    </div>

    <div class="card-body">
    	<div class="container-fluid">
			<div class="form-group row">
				<label class="col-md-2 col-form-label font-weight-bold">Number</label>

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

			<div class="form-group row">
				<label class="col-md-2 col-form-label font-weight-bold">Placed At</label>

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

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

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

			<div class="form-group row">
				<label class="col-md-2 col-form-label font-weight-bold">Total</label>

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

			<!-- <div class="form-group row">
				<label class="col-md-2 col-form-label font-weight-bold">Point Use</label>

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

			<div class="form-group row">
				<label class="col-md-2 col-form-label font-weight-bold">Point Use</label>

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

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

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

			<!-- <div class="form-group row">
				<label class="col-md-2 col-form-label font-weight-bold">Payment Status</label>

				<div class="col-md-10">
					<p class="form-control-plaintext">{!! $order->payment_status_badge !!}</p>
					
					@if ($order->payment_status == 0)
					<button type="button" class="btn btn-link p-0" data-target="#modal-paid" data-toggle="modal">
						<span>Mark as Paid</span>
					</button>
					@endif
				</div>
			</div> -->

			<div class="form-group row">
				<label class="col-md-2 col-form-label font-weight-bold">Shipping Status</label>

				<div class="col-md-10">
					<span class="form-control-plaintext">{!! $order->shipping_status_badge !!}</span>
		
					@if (!$order->deleted_at)
					<button type="button" class="btn btn-link p-0" data-target="#modal-shipping" data-status="{{ $order->shipping_status }}">
						<span>Change Status</span>
					</button>
					@endif
				</div>
			</div>

			@if ($order->tracking_link)
			<div class="form-group row">
				<label class="col-md-2 col-form-label font-weight-bold">Tracking</label>

				<div class="col-md-10">
					<span><a href="{!! $order->tracking_link !!}" target="_blank">{!! $order->tracking_link !!}</a></span>
					<span class="form-control-plaintext">{!! $order->tracking_number !!}</span>
				</div>
			</div>
			@endif

			<div class="form-group row">
				<label class="col-md-2 col-form-label font-weight-bold">Customer</label>

				<div class="col-md-10">
					<p class="form-control-plaintext">
						<span>{{ $order->user->first_name }} {{ $order->user->last_name }}</span><br>
						<span>{{ $order->user->email }}</span><br>
						<span>{{ $order->user->phone_number }}</span><br>
						<a href="{{ route('users.edit', ['id' => $order->user_id]) }}">View User</a>
					</p>
				</div>
			</div>
		</div>
    </div>
</div>

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

	<div class="card-body">
		<div class="table-responsive">
			<table class="table table-borderless">
				<thead class="thead-light">
					<th>Item</th>
					<th>Unit Price (Points)</th>
					<th class="text-center">Quantity</th>
					<th class="text-right">Total</th>	
				</thead>

				<tbody>
					@foreach ($order->productVariations as $variation)
					@php 
						$product = $variation->product; 
					@endphp
					<tr>
						<td>{{ $product->name }} <small>({{ $variation->title }})</small></td>
						<td>{{ $variation->pivot->unit_price }}</td>
						<td class="text-center">{{ $variation->pivot->quantity }}</td>
						<td class="text-right">{{ $variation->pivot->price }} Points</td>
					</tr>
					@endforeach

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

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

					<tr>
						<td class="text-right" colspan="3">Shipping Fee</td>
						<td class="text-right">MYR {{ $order->shipping_fee }}</td>
					</tr>

					<tr>
						<td class="text-right" colspan="3">Tax</td>
						<td class="text-right">MYR {{ $order->tax }}</td>
					</tr>
 -->
					<tr>
						<td class="text-right border-top" colspan="3">Total</td>
						<td class="text-right border-top">{{ $order->total }} Points</td>
					</tr>

					<!-- <tr>
						<td class="text-right" colspan="3">Point Use</td>
						<td class="text-right">{{ $order->point_use }}</td>
					</tr> -->

					<tr>
						<td class="text-right font-weight-bold border-top border-bottom" colspan="3">Point Use</td>
						<td class="text-right font-weight-bold border-top border-bottom">{{ $order->amount_to_pay }} Points</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>	
</div>
<!-- shipping -->
<div class="card">
	<h6 class="card-header">Shipping Details</h6>

	<div class="card-body">
		@php
			$shipping = $order->shipping
		@endphp

		<div class="form-group row">
			<label class="col-md-2 col-form-label font-weight-bold">First Name</label>

			<div class="col-md-10">
				<p class="form-control-plaintext">{{ $shipping->first_name }}</p>
			</div>
		</div>

		<div class="form-group row">
			<label class="col-md-2 col-form-label font-weight-bold">Last Name</label>

			<div class="col-md-10">
				<p class="form-control-plaintext">{{ $shipping->last_name }}</p>
			</div>
		</div>

		<div class="form-group row">
			<label class="col-md-2 col-form-label font-weight-bold">Street</label>

			<div class="col-md-10">
				<p class="form-control-plaintext">{{ $shipping->street }}</p>
			</div>
		</div>

		<div class="form-group row">
			<label class="col-md-2 col-form-label font-weight-bold">Postcode</label>

			<div class="col-md-10">
				<p class="form-control-plaintext">{{ $shipping->postcode }}</p>
			</div>
		</div>

		<div class="form-group row">
			<label class="col-md-2 col-form-label font-weight-bold">City</label>

			<div class="col-md-10">
				<p class="form-control-plaintext">{{ $shipping->city }}</p>
			</div>
		</div>

		<div class="form-group row">
			<label class="col-md-2 col-form-label font-weight-bold">State</label>

			<div class="col-md-10">
				<p class="form-control-plaintext">{{ $shipping->state }}</p>
			</div>
		</div>

		<div class="form-group row">
			<label class="col-md-2 col-form-label font-weight-bold">Phone Number</label>

			<div class="col-md-10">
				<p class="form-control-plaintext">{{ $shipping->phone_number }}</p>
			</div>
		</div>

		<div class="form-group row">
			<label class="col-md-2 col-form-label font-weight-bold">Remark</label>

			<div class="col-md-10">
				<p class="form-control-plaintext">{{ $shipping->remark ?? '-' }}</p>
			</div>
		</div>
	</div>
</div>
<!-- shipping -->

<!-- modal order shipping -->
<div id="modal-shipping" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">Edit Shipping Status</h5>

				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
		  			<span aria-hidden="true">&times;</span>
				</button>
			</div>

			<form id="form-shipping" action="{{ route('orders.shipping_status.update') }}" method="POST">
				<div class="modal-body">
					<div class="form-group">
						<label>Shipping Status</label>

						<select class="form-control" name="shipping_status">
							<option value="0">Pending</option>
							<option value="1">Being Prepared</option>
							<option value="2">Being Shipped</option>
							<option value="3">Received</option>
						</select>
					</div>

					<div class="form-group">
						<label>Tracking Link</label>
						<input type="text" class="form-control" name="tracking_link" value="">

						<label>Tracking Number</label>
						<input type="text" class="form-control" name="tracking_number" value="">
					</div>

					<div class="form-group">
					  	<div class="custom-control custom-checkbox">
					    	<input type="checkbox" id="shipping_notify" class="custom-control-input" name="send_email" value="1" checked>
					    	<label for="shipping_notify" class="custom-control-label">Send email to inform user.</label>
					  	</div>
					</div>
				</div>

				<div class="modal-footer">
					<input type="hidden" name="id" value="{{ $order->id }}">
					<button type="submit" class="btn btn-dark">Save</button>
				</div>
			</form>
		</div>
	</div>
</div>
<!-- modal order shipping -->
@endsection

@section('js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.min.js" type="text/javascript"></script>
<script src="{{ asset('js/bootstrap-datetimepicker.js') }}"></script>
<script type="text/javascript">
	$('[data-target="#modal-shipping"]').click(function(e)
	{
		$.Event(e).preventDefault();

		let modal  = $($(this).data('target'));
		let status = $(this).data('status');

		modal.find('[name="shipping_status"]').val(status).end()
			 .modal('show');
	});

	$('#form-paid, #form-shipping, #form-payment-create, #form-payment-edit').submit(function(e)
	{
		$.Event(e).preventDefault();

		const form = $(this);

		$.ajax({
			url: $(this).attr('action'),
			type: $(this).attr('method'),
			data: $(this).serialize(),
			dataType: 'json'

		}).done(function(data)
		{
			showNoty(data);

			if (data.status == 'success')
			{
				form.closest('.modal').modal('hide');

				setTimeout(function()
				{
					location.reload();
				}, 1000);
			}
		});
	});
</script>
@endsection