@use(App\Models\Checkout)
@use(App\Models\Invoice)

@extends('adminlte::layouts.app')

@section('htmlheader_title')
	Payment Cart
@endsection
@section('page_title')
	Payments
@endsection

@section('contentheader_title')
	Payment Cart
@endsection
@section('contentheader_description')
@endsection

@section('main-content')
	<div class="row">
		<div class="col-4">
			<div class="card card-dark">
				<div class="card-header p-2">
					<span class="card-title">Invoices to Pay</span>
				</div>

				<div class="card-body">
					<form method="POST" action="{{ url('u/checkout/pay') }}">
						@csrf

						<input type="hidden" name="type" value="invoice">

						<!-- @todo This is currently forcing only paypal -->
						<x-leenooks::form.select id="checkout_id" name="checkout_id" icon="fa-credit-card" label="Payment Method" feedback="Payment Method is required" choose="true" :options="Checkout::active()->where('name','ilike','paypal')->orderBy('name')->get()->map(fn($item)=>['id'=>$item->id,'value'=>$item->name])"/>

						<table id="invoices" class="table table-sm w-100">
							<tr>
								<th>Invoice</th>
								<th class="text-right">Balance Due</th>
							</tr>

							@foreach (($invoices=Invoice::whereIn('id',session('invoice.cart',[]))->get()) as $io)
								<input type="hidden" name="invoice_id[]" value="{{ $io->id }}">
								<tr>
									<td><a class="cart_delete text-dark" data-id="{{ $io->id }}" data-value="{{ $io->due }}" href="{{ url('/u/cart/delete',$io->id) }}"><i class="fas fa-trash-alt"></i></a> {{ $io->sid }}</td>
									<td class="text-right">{{ number_format($io->due,2) }}</td>
								</tr>
							@endforeach

							<tfoot>
							<tr>
								<th class="text-right">Sub Total</th>
								<td class="text-right"><span id="subtotal">{{ number_format($invoices->sum('due'),2) }}</span></td>
							</tr>
							<tr>
								<th class="text-right">Payment Fees</th>
								<td class="text-right"><span id="payfee">TBA</span></td>
							</tr>
							<tr>
								<th class="text-right">Payment Total</th>
								<th class="text-right"><span id="paytotal">TBA</span></th>
							</tr>
							<tr>
								<th colspan="2">
									<!-- Buttons -->
									<x-leenooks::button.cancel/>
									<x-leenooks::button.submit class="float-right" disabled>Pay</x-leenooks::button.submit>
									<a href="{{ url('/home') }}" class="mt-4 btn btn-sm btn-primary">Add Invoice</a>
								</th>
							</tr>
							</tfoot>
						</table>
					</form>
				</div>
			</div>
		</div>
	</div>

	<x-leenooks::errors/>
@endsection

@section('page-scripts')
	<script type="text/javascript">
		var subtotal = {{ $invoices->sum('due')	}};

		function fee_total() {
			$.ajax({
				type: 'POST',
				data: {
					total: subtotal,
					checkout_id: $('#checkout_id').val()
				},
				dataType: 'json',
				url: '{{ url('u/checkout/fee') }}',
				timeout: 5000,
				error: function() {
					alert('Failed to submit, please try again...');
				},
				success: function(data) {
					$('span[id=payfee]').html(data.toFixed(2));
					$('span[id=paytotal]').html((subtotal+data).toFixed(2));
					$('button[type=submit]').prop('disabled',false);
				}
			});
		}

		$(document).ready(function() {
			if ($('#checkout_id').val())
				fee_total();

			$('#checkout_id').on('change',fee_total);

			$('.cart_delete').click(function(item) {
				var that = $(this);

				// Delete
				$.ajax({
					url: '{{ url('u/checkout/cart/remove') }}',
					method: 'POST',
					data: {id: that.data('id')},

				}).done(function(data) {
					that.closest('tr').hide();
					that.closest('tr').parent().find('input').attr('disabled',true);
					subtotal -= that.data('value');
					$('span[id=subtotal]').html(subtotal.toFixed(2));
					if ($('#checkout_id').val())
						fee_total();

				}).fail(function(data) {
					alert('Hmm, that didnt work?');
				});

				// Clear the data cache
				that.removeData();
				return false;
			});
		});
	</script>
@append