@use(App\Models\Product)

@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 }} - <small><strong>WARNING - this is only for Broadband for now</strong></small>
@endsection
@section('contentheader_description')
	{{ $o->sid }}
@endsection

<!-- $o=Service::class, $np=Product::class -->
@section('main-content')
	<div class="row">
		<div class="col-12 col-lg-4">
			<form method="POST">
				@csrf

				<div class="card card-dark">
					<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 -->
								<x-leenooks::form.text id="service_number" name="broadband[service_number]" icon="fa-phone" label="Service Number" old="broadband.service_number" :value="$o->name_short" disabled/>
							</div>
						</div>

						<div class="row">
							<div class="col-12">
								<!-- PRODUCT -->
								<x-leenooks::form.select id="product_id" name="broadband[product_id]" icon="fa-list" label="Product" :helper="$o->product->category_name" groupby="active"
									 :value="$np->id"
									 :options="Product::get()->filter(fn($item)=>$item->category === $np->category)->sortBy('name')->sortByDesc('active')->transform(fn($item)=>['id'=>$item->id,'active'=>$item->active,'value'=>$item->name])" required/>
							</div>
						</div>

						<div class="row">
							<div class="col-12">
								<!-- CHANGE DATE -->
								<x-leenooks::form.date id="start_at" name="broadband[start_at]" icon="fa-calendar" label="Change Date" old="broadband.start_at" :value="$np->pivot->effective_at ?? $np->pivot->ordered_at" required/>
							</div>
						</div>

						<div class="row">
							<div class="col-6">
								<!-- CHANGE FEE -->
								<x-leenooks::form.text id="change_fee" name="broadband[change_fee]" icon="fa-dollar-sign" label="Change Fee" old="broadband.change_fee" value="0"/>
							</div>

							<div class="col-6">
								<!-- NEW PRICE -->
								<x-leenooks::form.text id="price" name="broadband[price]" icon="fa-dollar-sign" label="New Price" helper="Price Override" old="broadband.price" value=""/>
							</div>
						</div>

						<div class="row">
							<div class="col-12">
								<x-leenooks::button.reset/>
								<x-leenooks::button.submit class="float-right">Save</x-leenooks::button.submit>
							</div>
						</div>
					</div>
				</div>
			</form>
		</div>

		<!-- Current Plan -->
		<!-- @todo Refresh the Plan Information with the new plan -->
		<div class="col-12 col-lg-8">
			<div class="row">
				<div class="col">
					<div class="card card-dark">
						<div class="card-header">
							<h3 class="card-title">Plan Information</h3>
						</div>

						<div class="card-body">
							@include('theme.backend.adminlte.service.widget.internal',['o'=>$o,'p'=>$np])
						</div>
					</div>
				</div>
			</div>

			<div class="row">
				<div class="col">
					<div id="transactions"></div>
				</div>
			</div>
		</div>
	</div>
@endsection

@pa(select2,autofocus)

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

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

			$.ajax({
				type: 'POST',
				dataType: 'html',
				data: {broadband: {product_id: pid,start_at: start,change_fee: fee,price: price}},
				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();
			});

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

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