@extends('layouts.app')

@section('title') Order #{{ $order->number }} @endsection

@section('content')
<div class="container py-5">
	<div>
		<p>Order #{{ $order->number }}</p>
    	<p class="text-muted">If you have any questions, please feel free to <a href="{{ route('contact') }}" class="text-primary"><u>contact us</u></a>, our customer service center is working for you 24/7.</p>
    </div>    

	<div class="grid gap-3 xlarge-2">
		<div class="card bg-light">
            <div class="card-header">
                <h6 class="card-title">Order Summary</h6>
            </div>

            <div class="card-body">
				<div class="form-group">
					<label class="form-label">Placed At</label>

					<p>{{ $order->datetime_formatted }}</p>
				</div>

				@if ($order->deleted_at)
				<div class="form-group">
					<label class="form-label">Canceled At</label>

					<p>{{ $order->deleted_at_formatted }}</p>
				</div>	
				@endif			

				<div class="form-group">
					<label class="form-label">Total</label>

					<p>{{ $order->total }} Points</p>
				</div>

				<div class="form-group">
					<label class="form-label">Shipping Status</label>

					<p>{!! $order->shipping_status_badge !!}</p>
				</div>

				@if ($order->tracking_link)
				<div class="form-group">
					<label class="form-label">Tracking Link</label>
					<p><a href="{!! $order->tracking_link !!}" target="_blank">{!! $order->tracking_link !!}</a></p>

					<label class="form-label">Tracking Number</label>
					<p>{!! $order->tracking_number !!}</p>
				</div>
				@endif
            </div>
        </div>

        <div class="card bg-light">
            <div class="card-header">
                <h6 class="card-title">Shipping Details</h6>
            </div>

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

				<div class="form-group">
					<label class="form-label">Method</label>

					<p>{{ $shipping->method_text }}</p>
				</div>

				@if ($shipping->method == 1)
				<div class="form-group">
					<label class="form-label">Full Name</label>

					<p>{{ $shipping->first_name }} {{ $shipping->last_name }}</p>
				</div>

				<div class="form-group">
					<label class="form-label">Address</label>
					
					<p>
						<span>{{ $shipping->street }}</span><br>
						<span>{{ $shipping->postcode }} {{ $shipping->city }}</span><br>
						<span>{{ $shipping->state }}, Malaysia</span>
					</p>
				</div>

				<div class="form-group">
					<label class="form-label">Phone Number</label>

					<p>{{ $shipping->phone_number }}</p>
				</div>	
				@endif
			</div>
		</div>
    </div>

	<h5 class="mt-4">Ordered Items</h5>

	<div class="table-responsive mt-3">
		<table class="table-cart table table-borderless">
			<thead>
				<tr>
					<th>Item</th>
					<th>Price</th>
					<th>Quantity</th>
					<th>Total</th>
				</tr>
			</thead>

			<tbody>
				@foreach ($order->productVariations as $variation)
				@php
					$product = $variation->product;
				@endphp
				<tr>
					<td>
						@if ($product)
                        <div class="d-flex align-items-center">
	                        	@if ($product->images->count())
	                            <a href="{{ route('products.show', ['slug' => $product->slug]) }}">
	                                <img src="{{ $product->images->first()->image }}" class="img-fluid product-image" alt="{{ $product->name }}">
	                            </a>
	                            @endif
	                        
                            
                            <div class="ml-2">
                                <a href="{{ route('products.show', ['slug' => $product->slug]) }}" class="product-name">{{ $product->name }}</a>
                                <span class="product-variation">Variation: {{ $variation->title }}</span>
                            </div>
                        </div>
                        @endif
					</td>
					<td class="text-center">{{ $variation->pivot->unit_price }} Points</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 py-3" colspan="3">Subtotal</td>
					<td class="text-right py-3">{{ $order->subtotal }} Points</td>
				</tr>

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

				<tr>
					<td class="text-right font-weight-bold border-top border-bottom py-3" colspan="3">Point Used</td>
					<td class="text-right font-weight-bold border-top border-bottom py-3">{{ $order->amount_to_pay }} Points</td>
				</tr>
			</tbody>
		</table>
	</div>
</div> 

<div id="modal-delete" 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">Cancel Order</h5>

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

            <div class="modal-body">
                <p class="text-center lead">Are you sure you want to cancel this order?</p>

                <form id="form-delete" action="{{ route('orders.destroy') }}" method="POST">
                    <input type="hidden" name="id" value="{{ $order->id }}">

                    <div class="text-center mt-5">
                        <button type="button" class="btn btn-light mx-2">Cancel</button>
                        <button type="submit" class="btn btn-primary mx-2">Confirm</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
<script>
	$('#btn-pay').click(function()
	{
		$('#form-pay').submit();
	});

	$('#form-pay').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-payment-wrapper').html(data.data.payment_form);

                setTimeout(function()
                {
                    $('#form-payment').submit();
                }, 1000);
			}
		});
	});

	$('#form-delete').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);

			form.closest('.modal').modal('hide');

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