@extends('layouts.app')

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

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

	@if (Session::has('message'))
	<div class="alert bg-cyan text-white">
		{{ Session::get('message') }}
	</div>
	@endif

	@if ($order->status == 'PENDING')
    <div class="text-end pb-3">
		<a href="{{ route('orders.payments.create', ['number' => $order->number]) }}" class="btn btn-secondary text-white">
			Make Payment
		</a>

    	<button type="button" class="btn btn-dark" data-bs-target="#modal-delete" data-bs-toggle="modal">
			Cancel Order
		</button>
    </div>
	@endif
	
	<div class="card bg-light">
		<div class="card-header">
			<h6 class="card-title">Order Summary</h6>
		</div>

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

				<div>{{ $order->created_at->format('d F Y - H:i') }}</div>
			</div>

			@if ($order->deleted_at)
			<div class="mb-3">
				<label class="form-label">Cancelled At</label>

				<div>{{ $order->deleted_at->format('d F Y - H:i') }}</div>
			</div>	
			@endif			

			<div class="mb-3">
				<label class="form-label">Total</label>

				<div>{{ config('app.currency') }} {{ $order->total }}</p>
			</div>

			@if ($order->discount)
			<div class="mb-3">
				<label class="form-label">Discount Code</label>

				<div>{{ $order->discount->code }}</div>
			</div>
			@endif

			<div class="mb-3">
				<label class="form-label">Status</label>

				<div>
					<span class="badge @if (in_array($order->status, ['PAID', 'CONFIRMED']))
                                        {{ 'bg-teal' }}
                                        @elseif (in_array($order->status, ['CANCELLED', 'ADMIN_CANCELLED']))
										{{ 'bg-red' }}
                                        @else
                                        {{ 'bg-blue' }}
                                        @endif">
						{{ $order->status }}
					</span>
				</div>
			</div>
		</div>
	</div>

	<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>
                        <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="ms-2">
                                <a href="{{ route('products.show', ['slug' => $product->slug]) }}" class="product-name">{{ $product->name }}</a>
                                
								<div class="product-variation">{{ $variation->name }}</div>
								<div class="product-variation">{{ $variation->pivot->date }} {{ $variation->pivot->time }}</div>
                            </div>
                        </div>
					</td>
					<td class="text-center">{{ config('app.currency') }} {{ $variation->pivot->unit_price }}</td>
					<td class="text-center">{{ $variation->pivot->quantity }}</td>
					<td class="text-center">{{ config('app.currency') }} {{ $variation->pivot->price }}</td>
				</tr>
				@endforeach

				<tr>
					<td class="text-end" colspan="3">Subtotal</td>
					<td class="text-center">{{ config('app.currency') }} {{ $order->subtotal }}</td>
				</tr>

				<tr>
					<td class="text-end" colspan="3">Discount Amount</td>
					<td class="text-center">{{ config('app.currency') }} {{ $order->discount_amount }}</td>
				</tr>

				{{-- <tr>
					<td class="text-end" colspan="3">Tax</td>
					<td class="text-center">{{ config('app.currency') }} {{ $order->tax }}</td>
				</tr> --}}

				<tr>
					<td class="text-end border-top" colspan="3">Total</td>
					<td class="text-center border-top">
						{{ config('app.currency') }} {{ $order->total }} 
						<small class="d-block text-muted">Inclusive SST</small>
					</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="btn-close" data-dismiss="modal" aria-label="Close"></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" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-dark mx-2">Confirm</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
<script>
	$('#form-delete').submit(function(e)
	{
		e.preventDefault();

		const form = $(this);

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

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

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

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