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

@section('htmlheader_title')
	Change Service #{{ $o->id }}
@endsection
@section('page_title')
	{{ $o->sid }}
@endsection

@section('contentheader_title')
	Change Service #{{ $o->id }} - WARNING - this is only for Broadband for now
@endsection
@section('contentheader_description')
	{{ $o->sid }}
@endsection

<!-- $o = App\Models\Service::class -->
@section('main-content')
	<div class="row">
		<div class="col-8">
			<form role="form" method="POST" enctype="multipart/form-data">
				<div class="card card-dark">
					{{ csrf_field() }}

					<div class="card-header">
						<h3 class="card-title">Service Information</h3>
					</div>

					<div class="card-body">
						<div class="row">
							<div class="col-12">
								<!-- SERVICE NUMBER -->
								<div class="form-group">
									<label for="service_number" class="col-form-label text-right">Service Number</label>

									<div class="input-group">
										<div class="input-group-prepend">
											<span class="input-group-text"><i class="fa fa-fw fa-phone"></i></span>
										</div>
										<input type="text" class="form-control" name="broadband[service_number]" value="{{ $o->name_short ?? '' }}" disabled>
									</div>
								</div>
							</div>
						</div>

						<div class="row">
							<div class="col-12">
								<!-- PRODUCT -->
								<div class="form-group has-validation">
									<label for="product_id">Type</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>
										<select class="form-control @error('broadband.product_id') is-invalid @enderror" id="product_id" name="broadband[product_id]" required>
											<!-- @todo TO DO LIMIT THIS TO OF THE SAME OFFERING TYPE AND SORT BY NAME -->
											@foreach (\App\Models\Product::get() as $po)
												@if ($po->category !== $o->product->category) @continue @endif
												<option value="{{ $po->id }}" {{ $po->id == old('broadband.product_id',$po->exists ? \Illuminate\Support\Arr::get($o->order_info,'change_product_id') : NULL) ? 'selected' : '' }}>{{ $po->name }}</option>
											@endforeach
										</select>
										<span class="invalid-feedback" role="alert">
											@error('broadband.product_id')
												{{ $message }}
											@else
												Type is required.
											@enderror
										</span>
									</div>
									<span class="input-helper">Product - {{ $o->product->category_name }}.</span>
								</div>
							</div>
						</div>

						<div class="row">
							<div class="col-12">
								<!-- CHANGE DATE -->
								<div class="form-group has-validation">
									<label for="start_at" class="col-form-label text-right">Change Date</label>
									<div class="input-group">
										<div class="input-group-prepend">
											<span class="input-group-text"><i class="fa fa-fw fa-calendar"></i></span>
										</div>
										<input type="date" class="form-control @error('broadband.start_at') is-invalid @enderror" id="start_at" name="broadband[start_at]" value="{{ \Illuminate\Support\Arr::get($o->order_info,'change_date') ?? '' }}" required>
										<span class="invalid-feedback" role="alert">
											@error('broadband.start_at')
												{{ $message }}
											@else
												Type is required.
											@enderror
										</span>
									</div>
								</div>
							</div>
						</div>

						<div class="row">
							<div class="col-6">
								<!-- CHANGE FEE -->
								<div class="form-group has-validation">
									<label for="change_fee" class="col-form-label text-right">Change Fee</label>
									<div class="input-group">
										<div class="input-group-prepend">
											<span class="input-group-text"><i class="fa fa-fw fa-dollar-sign"></i></span>
										</div>
										<input type="text" class="form-control @error('broadband.change_fee') is-invalid @enderror" id="change_fee" name="broadband[change_fee]" value="0">
										<span class="invalid-feedback" role="alert">
											@error('broadband.change_fee')
												{{ $message }}
											@enderror
										</span>
									</div>
								</div>
							</div>
						</div>

						<div class="row">
							<div class="col-12">
								<a href="{{ url('u/service',[$o->id]) }}" 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>
					</div>
				</div>
			</form>
		</div>
		<div class="col-4">
			@include('service.widget.internal')
		</div>
	</div>
	<div id="transactions"></div>
@endsection

@section('page-scripts')
	@css(select2)
	@js(select2,autofocus)

	<script type="text/javascript">
		function pendingtrans() {
			var pid = $('#product_id').val();
			var start = $('#start_at').val();
			var fee = $('#change_fee').val();

			$("div[id=transactions]").empty();

			$.ajax({
				type: 'POST',
				dataType: 'html',
				data: {broadband: {product_id: pid,start_at: start,change_fee: fee}},
				cache: false,
				url: '{{ url('r/service_change_charges',[$o->id]) }}',
				timeout: 2000,
				error: function(x) {
					spinner.toggleClass('d-none').toggleClass('fa-spin');
					alert('Failed to submit');
				},
				success: function(data) {
					$("div[id=transactions]").append(data);
				}
			});
		}

		$(document).ready(function() {
			$('#product_id')
				.select2()
				.on('change',function() {
					pendingtrans();
				});

			$('#start_at').on('change',function() {
				pendingtrans();
			});

			$('#change_fee').on('change',function() {
				pendingtrans();
			});

			pendingtrans();
		});
	</script>
@append