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

@section('htmlheader_title')
	Charge {{ $o->id ? '#'. $o->id : '' }}
@endsection
@section('page_title')
	Charge
@endsection

@section('contentheader_title')
	Record Charge
@endsection
@section('contentheader_description')
@endsection

@section('main-content')
	<div class="row">
		<div class="col-6">
			<div class="card card-dark">
				<div class="card-header">
					<h1 class="card-title">Record Charge {{ $o->id ? '#'. $o->id : '' }}</h1>
					@if(session()->has('success'))
						<span class="ml-3 pt-0 pb-0 pr-1 pl-1 btn btn-outline-success"><small>{{ session()->get('success') }}</small></span>
					@endif
				</div>

				<div class="card-body">
					<form class="g-0 needs-validation" method="POST" role="form">
						@csrf

						<div class="row">
							<!-- DATE CHARGE -->
							<div class="col-4">
								<div class="form-group has-validation">
									<label for="charge_date">Date Charge</label>
									<div class="input-group">
										<div class="input-group-prepend">
											<span class="input-group-text"><i class="fas fa-fw fa-calendar"></i></span>
										</div>
										<input type="date" class="form-control @error('charge_date') is-invalid @enderror" id="charge_date" name="charge_date" value="{{ old('charge_date',($o->exists ? $o->charge_date : \Carbon\Carbon::now())->format('Y-m-d')) }}" required>
										<span class="invalid-feedback" role="alert">
											@error('charge_date')
												{{ $message }}
											@else
												Charge Date is required.
											@enderror
										</span>
									</div>
									<span class="input-helper">Date Payment Received.</span>
								</div>
							</div>

							<!-- QUANTITY -->
							<div class="offset-6 col-2">
								<div class="form-group has-validation">
									<label class="float-right" for="quantity">Quantity</label>
									<div class="input-group">
										<div class="input-group-prepend">
											<span class="input-group-text"><i class="fas fa-fw fa-hashtag"></i></span>
										</div>
										<input type="text" class="text-right form-control @error('quantity') is-invalid @enderror" id="quantity" name="quantity" value="{{ old('quantity',$o->exists ? $o->quantity : 1) }}" required>
										<span class="invalid-feedback" role="alert">
											@error('quantity')
												{{ $message }}
											@else
												Quantity is required.
											@enderror
										</span>
									</div>
								</div>
							</div>
						</div>

						<div class="row">
							<!-- ACCOUNTS -->
							<div class="col-4">
								<div class="form-group has-validation">
									<label for="account_id">Account</label>
									<div class="input-group">
										<div class="input-group-prepend">
											<span class="input-group-text"><i class="fas fa-fw fa-user"></i></span>
										</div>
										<select class="form-control @error('account_id') is-invalid @enderror" id="account_id" name="account_id" required>
											<option value=""></option>
											@foreach (\App\Models\Account::active()->with(['user'])->get()->sortBy('name') as $ao)
												<option value="{{ $ao->id }}" {{ $ao->id == old('account_id',$o->exists ? $o->account_id : NULL) ? 'selected' : '' }}>{{ $ao->name }}</option>
											@endforeach
										</select>

										<span class="invalid-feedback" role="alert">
											@error('account_id')
											{{ $message }}
											@else
												Account is required.
												@enderror
										</span>
									</div>
									<span class="input-helper">Account to add charge to.</span>
								</div>
							</div>

							<!-- SWEEP TYPE -->
							<div class="offset-1 col-4">
								<div class="form-group has-validation">
									<label for="sweep_type">Sweep</label>
									<div class="input-group">
										<div class="input-group-prepend">
											<span class="input-group-text"><i class="fas fa-fw fa-dollar-sign"></i></span>
										</div>
										<select class="form-control @error('sweep_type') is-invalid @enderror" id="sweep_type" name="sweep_type" required>
											@foreach (\App\Models\Charge::sweep as $k=>$v)
												<option value="{{ $k }}" {{ $k == old('sweep_type',$o->exists ? $o->sweep_type : NULL) ? 'selected' : '' }}>{{ $v }}</option>
											@endforeach
										</select>
										<span class="invalid-feedback" role="alert">
											@error('sweep_type')
											{{ $message }}
											@else
												Sweep Type is required.
												@enderror
										</span>
									</div>
									<span class="input-helper">When to add the charge to an invoice.</span>
								</div>
							</div>

							<!-- TAXABLE -->
							<div class="col-1">
								<div class="form-check has-validation">
									<label for="taxable">Taxable</label>
									<div class="form-check text-right">
										<input type="checkbox" class="form-check-input @error('taxable') is-invalid @enderror" id="taxable" name="taxable" value="1" {{ old('taxable',$o->exists ? $o->taxable : 1) ? 'checked' : '' }}>
									</div>
								</div>
							</div>

							<!-- AMOUNT -->
							<div class="col-2">
								<div class="form-group has-validation">
									<label class="float-right" for="amount">Amount</label>
									<div class="input-group">
										<div class="input-group-prepend">
											<span class="input-group-text"><i class="fas fa-fw fa-dollar-sign"></i></span>
										</div>
										<input type="text" class="text-right form-control @error('amount') is-invalid @enderror" id="amount" name="amount" value="{{ number_format(old('amount',$o->exists ? $o->amount : 0),2) }}">
										<span class="invalid-feedback" role="alert">
											@error('amount')
												{{ $message }}
											@else
												Amount is required.
											@enderror
										</span>
									</div>
									<span class="input-helper">Amount (ex Tax).</span>
								</div>
							</div>
						</div>

						<div class="row">
							<!-- SERVICES -->
							<div class="col-4">
								<div class="form-group has-validation">
									<label for="service_id">Services</label>
									<div class="input-group">
										<div class="input-group-prepend">
											<span class="input-group-text"><i class="fas fa-fw fa-bolt"></i></span>
										</div>
										<select class="form-control @error('service_id') is-invalid @enderror" id="service_id" name="service_id" required>
										</select>
										<span class="ml-2 pt-2"><i class="fas fa-spinner d-none"></i></span>

										<span class="invalid-feedback" role="alert">
											@error('service_id')
											{{ $message }}
											@else
												Service is required.
												@enderror
										</span>
									</div>
									<span class="input-helper"><sup>**</sup>Service inactive.</span>
								</div>
							</div>

							<!-- CHARGE TYPE -->
							<div class="offset-1 col-4">
								<div class="form-group has-validation">
									<label for="type">Type</label>
									<div class="input-group">
										<div class="input-group-prepend">
											<span class="input-group-text"><i class="fas fa-fw fa-dollar-sign"></i></span>
										</div>
										<select class="form-control @error('type') is-invalid @enderror" id="type" name="type" required>
											@foreach (collect(\App\Models\InvoiceItem::type)->sort() as $k=>$v)
												<option value="{{ $k }}" {{ $k == old('type',$o->exists ? $o->type : NULL) ? 'selected' : '' }}>{{ $v }}</option>
											@endforeach
										</select>
										<span class="invalid-feedback" role="alert">
											@error('type')
												{{ $message }}
											@else
												Type is required.
											@enderror
										</span>
									</div>
									<span class="input-helper">Charge type.</span>
								</div>
							</div>

							<!-- TOTAL -->
							<div class="offset-1 col-2">
								<label class="float-right" for="fees_amt">Total</label>
								<div class="input-group">
									<div class="input-group-prepend">
										<span class="input-group-text"><i class="fas fa-fw fa-dollar-sign"></i></span>
									</div>
									<input type="text" class="text-right form-control" id="total" value="{{ number_format($o->exists ? $o->quantity*$o->amount : 0,2) }}" disabled>
								</div>
								<span class="input-helper">Total (ex Tax).</span>
							</div>
						</div>

						<div class="row">
							<!-- DESCRIPTION -->
							<div class="col-12">
								<div class="form-group has-validation">
									<label for="description">Description</label>
									<div class="input-group">
										<div class="input-group-prepend">
											<span class="input-group-text"><i class="fas fa-fw fa-file-alt"></i></span>
										</div>
										<input type="text" class="form-control @error('description') is-invalid @enderror" id="description" name="description" value="{{ old('description',$o->exists ? $o->description : '') }}">

										<span class="invalid-feedback" role="alert">
											@error('description')
												{{ $message }}
											@enderror
										</span>
									</div>
								</div>
							</div>
						</div>

						<div class="row">
							<div class="col-12">
								<a href="{{ url('/home') }}" class="btn btn-danger">Cancel</a>
								@can('wholesaler')
									<button type="submit" name="submit" class="btn btn-success mr-0 float-right">@if ($site->exists)Save @else Add @endif</button>
								@endcan
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>

		<div class="col-5">
			<div id="pending"></div>
		</div>
	</div>
@endsection

@section('page-scripts')
	@css('//cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css','select-css')
	@js('//cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js','select-js')
	@js('/select2/fix-autofocus.js','select-fix-js','select-js')
	@css('/select2/fix-select-height.css','select-fix-css','select-css')

	<script type="text/javascript">
		function populate(account,spinner) {
			spinner.toggleClass('d-none').toggleClass('fa-spin');

			$.ajax({
				type: 'GET',
				dataType: 'json',
				cache: false,
				url: '{{ url('api/r/services') }}'+'/'+account,
				data: {include: {{ $o->service_id ?: 'null' }} },
				timeout: 2000,
				error: function(x) {
					spinner.toggleClass('d-none').toggleClass('fa-spin');
					alert('Failed to submit');
				},
				success: function(data) {
					$("select[name=service_id]").empty();
					$.each(data,function(i,j) {
						var row = '<option value="' + j.id + '" '+(j.id == {{ $o->service_id ?: 'null' }} ? 'selected' : '')+'>' + j.id + ': ' + j.product_name + ' ' + j.name_short + ((! j.active) ? ' **' : '') +'</option>';
						$(row).appendTo("select[name=service_id]");
					});

					spinner.toggleClass('d-none').toggleClass('fa-spin');
				}
			});

			$.ajax({
				type: 'GET',
				dataType: 'html',
				data: {exclude: {{ $o->id ?: 'null' }}},
				cache: false,
				url: '{{ url('r/charges') }}'+'/'+account,
				timeout: 2000,
				error: function(x) {
					spinner.toggleClass('d-none').toggleClass('fa-spin');
					alert('Failed to submit');
				},
				success: function(data) {
					$("div[id=pending]").empty().append(data);
				}
			});
		}

		function total() {
			$('#total').val(($('#quantity').val()*$('#amount').val()).toFixed(2));
		}

		$(document).ready(function() {
			var spinner = $('#service_id').parent().find('i.fas.fa-spinner');

			if ($('#account_id').val()) {
				populate($('#account_id').val(),spinner);
			}

			$('#account_id').select2({
				sorter: data => data.sort((a, b) => a.text.localeCompare(b.text)),
			})
				.on('change',function(e) {
					$("select[id=service_id]").empty();

					if (! $(this).val()) {
						return;
					}

					populate($(this).val(),spinner);
				});

			$('#service_id').select2();

			if ($('#quantity').val() && $('#amount').val()) {
				total();
			}

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