<!-- $o=Charge::class -->
@use(Carbon\Carbon)
@use(App\Models\Charge)
@use(App\Models\InvoiceItem)

<form method="POST" action="{{ url('r/charge/addedit') }}">
	@csrf
	<input type="hidden" name="account_id" value="{{ old('account_id',$so->account_id) }}">
	<input type="hidden" name="service_id" value="{{ old('service_id',$so->id) }}">
	<input type="hidden" name="site_id" value="{{ old('site_id',$so->site_id) }}">
	@if($id=old('id',isset($o) ? $o->id : FALSE))
		<input type="hidden" name="id" value="{{ $id }}">
	@endif

	<div class="row">
		<div class="col-12">
			<h3>Charge @if($id)Update #{{ $id }}@else Add @endif
				<x-leenooks::button.success class="float-right"/>
				@error('id')
					<x-leenooks::button.error class="float-right" name="id"/>
				@enderror
			</h3>
			<hr>
		</div>
	</div>

	<div class="row">
		<div class="col-12 col-lg-6">
			<div class="row">
				<!-- DATE CHARGE -->
				<div class="col-12 col-lg-10">
					<x-leenooks::form.date name="charge_at" icon="fa-calendar" label="Date Charge" feedback="Charge Date is required" :value="($o->charge_at ?? Carbon::now())->format('Y-m-d')"/>
				</div>
			</div>

			<div class="row">
				<!-- SWEEP TYPE -->
				<div class="col-12 col-lg-10">
					<x-leenooks::form.select name="sweep_type" icon="fa-clock" label="Sweep" feedback="Sweep Type is required" helper="When to add the charge to an invoice." :options="collect(Charge::sweep)->map(fn($item,$key)=>['id'=>$key,'value'=>$item])" :value="$o->sweep_type ?? NULL"/>
				</div>
			</div>

			<div class="row">
				<!-- CHARGE TYPE -->
				<div class="col-12 col-lg-10">
					<x-leenooks::form.select name="type" icon="fa-archive" label="Type" feedback="Charge Type is required" helper="Charge Type." :options="collect(InvoiceItem::type)->sort()->map(fn($item,$key)=>['id'=>$key,'value'=>$item])" :value="$o->type ?? NULL"/>
				</div>
			</div>
		</div>

		<div class="col-12 col-lg-6">
			<div class="row">
				<!-- QUANTITY -->
				<div class="col-12 offset-lg-6 col-lg-6">
					<x-leenooks::form.text class="float-right text-right" id="quantity" name="quantity" icon="fa-hashtag" label="Quantity" feedback="Quantity is required" :value="$o->quantity ?? 1"/>
				</div>
			</div>

			<div class="row">
				<!-- TAXABLE -->
				<div class="col-1 offset-lg-3 col-lg-1">
					<x-leenooks::form.checkbox name="taxable" label="Taxable" value="1" checked/>
				</div>

				<!-- AMOUNT -->
				<div class="col-11 col-lg-8">
					<x-leenooks::form.text class="float-right text-right" id="amount" name="amount" icon="fa-dollar-sign" label="Amount" feedback="Amount is required" helper="Amount (ex Tax)." :value="$o->amount ?? 0.00"/>
				</div>
			</div>

			<div class="row">
				<!-- TOTAL -->
				<div class="col-12 offset-lg-4 col-lg-8">
					<x-leenooks::form.text class="float-right text-right" id="total" name="total" icon="fa-dollar-sign" label="Total" helper="Total (ex Tax)." :value="$o->subtotal ?? 0.00" disabled/>
				</div>
			</div>

		</div>
	</div>

	<div class="row">
		<!-- DESCRIPTION -->
		<div class="col">
			<x-leenooks::form.text name="description" icon="fa-file-alt" label="Description" helper="Description for Invoice" :value="$o->description ?? NULL"/>
		</div>
	</div>

	<div class="row">
		<div class="col">
			<x-leenooks::button.reset/>
			<x-leenooks::button.submit class="float-right">@if($id)Update @else Add @endif</x-leenooks::button.submit>
		</div>
	</div>
</form>

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

		$(document).ready(function() {
			$(document).on('change','#quantity',function() { total(); });
			$(document).on('change','#amount',function() { total(); });
		});
	</script>
@append