@use(App\Models\Charge)

<div class="card card-secondary card-outline card-outline-tabs">
	<div class="card-header p-0 border-bottom-0">
		<ul class="nav nav-tabs">
			<li class="nav-item"><a class="nav-link active" href="#charge_add" data-toggle="tab">Charge</a></li>
			<li class="nav-item"><a class="nav-link" href="#charge_pending" data-toggle="tab">Pending</a></li>
		</ul>
	</div>

	<div class="card-body">
		<div class="tab-content">
			<div class="tab-pane fade show active" id="charge_add">
				@include('theme.backend.adminlte.charge.widget.addedit',['o'=>NULL,'so'=>$o])
			</div>

			<div class="tab-pane fade" id="charge_pending">
				<table class="table table-sm" id="svc_bill_hist">
					<thead>
					<tr>
						<th>ID</th>
						<th>Created</th>
						<th>Charge</th>
						<th>Type</th>
						<th class="text-right">Q</th>
						<th class="text-right">Total</th>
						<th>Processed</th>
					</tr>
					</thead>

					<tbody>
					@forelse(Charge::where('service_id',$o->id)->active()->orderBy('charge_at','DESC')->with(['account'])->get() as $oo)
						<tr>
							<td>{{ $oo->id }}</td>
							<td>{{ $oo->created_at->format('Y-m-d') }}</td>
							<td>{{ $oo->charge_at?->format('Y-m-d') }}</td>
							<td>{{ $oo->type_name }}</td>
							<td class="text-right">{{ number_format($oo->quantity) }}</td>
							<td class="text-right">{{ number_format($oo->total,2) }}</td>
							<td>
								{{ $oo->processed ? 'YES' : 'NO' }}
								@if(! $oo->processed)
									<span class="float-right">
										<a class="charge_edit" data-id="{{ $oo->id }}" href="#"><i class="fas fa-fw fa-edit"></i></a>
										<a class="charge_delete" data-id="{{ $oo->id }}" href="{{ url('/r/charge/delete',$oo->id) }}"><i class="fas fa-fw fa-trash"></i></a>
									</span>
								@endif
							</td>
						</tr>
					@empty
						<tr>
							<td colspan="7">No Charges for this Service</td>
						</tr>
					@endforelse
					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>

<x-leenooks::modal.delete hide="row" trigger="charge_delete"/>

@section('page-scripts')
	<script type="text/javascript">
		function total() {
			$('#total').val(($('#quantity').val()*$('#amount').val()).toFixed(2));
		}

		$(document).ready(function() {
			var loaded = [];

			$('.charge_edit').on('click',function() {
				var that = $(this);

				if (loaded[that.data('id')])
					return false;

				// Prepopulate with the details of the charge
				$.ajax({
					url: '{{ url('r/charge/edit') }}',
					method: 'POST',
					data: { id: that.data('id') },
					dataType: 'html',

				}).done(function(html) {
					// Open our charge add tab aut1omatically
					$('.nav-item a[href="#charge_add"]').tab('show');
					$('div[id="charge_add"]').empty().append(html);
					loaded[that.data('id')] = true;

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

				return false;
			});
		});
	</script>
@append