osb/resources/views/theme/backend/adminlte/service/widget/update.blade.php

<!-- $o=Service::class -->
@use(App\Models\Invoice)

<div class="row">
	<div class="col-12">
		<h4>Update Service details <x-leenooks::button.success class="float-right"/></h4>
		<hr>

		<form method="POST" action="{{ url('a/service/update',[$o->id]) }}">
			@csrf

			<div class="row">
				<!-- External Billing -->
				<div class="col-2">
					<x-leenooks::form.toggle id="external_billing" name="external_billing" label="External Billing" :value="$o->external_billing"/>
					<x-leenooks::form.toggle id="suspend_billing" name="suspend_billing" label="Suspend Billing" :value="$o->suspend_billing"/>
				</div>

				<div class="col-1"></div>

				<div class="col-12 col-sm-9 col-md-6 col-xl-5">
					<x-leenooks::form.date id="invoice_next_at" name="invoice_next_at" icon="fa-calendar" label="Billing Start Date" :value="($o->getRawOriginal('invoice_next_at') ?: $o->getRawOriginal('connect_at'))"/>
				</div>

				<!-- Price -->
				<div class="col-12 col-sm-9 col-md-12 col-xl-3">
					<x-leenooks::form.text name="price" icon="fa-dollar-sign" label="Price" :value="$o->price"/>
				</div>
			</div>

			<div class="row">
				<div class="col-3"></div>

				<div class="col-12 col-sm-9 col-md-6 col-xl-5">
					<x-leenooks::form.select id="recur_schedule" name="recur_schedule" icon="fa-redo" label="Renew Term" :value="$o->recur_schedule" :options="collect(Invoice::billing_periods)->map(fn($item,$key)=>['id'=>$key,'value'=>$item['name']])"/>
				</div>
			</div>

			<hr>

			@includeIf('theme.backend.adminlte.service.widget.'.$o->product->category.'.update',['o'=>$o->type])

			<div class="row">
				<div class="col">
					@can('wholesaler')
						<x-leenooks::button.reset/>
						<x-leenooks::button.submit class="float-right">Save</x-leenooks::button.submit>
					@endcan
				</div>
			</div>
		</form>
	</div>
</div>

@section('page-scripts')
	<script type="text/javascript">
		function toggle_billing_external(item) {
			if (item.is(':checked')) {
				$('#suspend_billing').closest('.form-group').addClass('d-none');
				$('#invoice_next_at').closest('.form-group').parent().addClass('d-none');
				$('#price').closest('.form-group').parent().addClass('d-none');
				$('#recur_schedule').closest('.form-group').parent().addClass('d-none');

				item.closest('.form-group').addClass('mb-0');

			} else {
				$('#suspend_billing').closest('.form-group').removeClass('d-none');
				$('#invoice_next_at').closest('.form-group').parent().removeClass('d-none');
				$('#price').closest('.form-group').parent().removeClass('d-none');
				$('#recur_schedule').closest('.form-group').parent().removeClass('d-none');

				item.closest('.form-group').removeClass('mb-0');
			}
		}

		function toggle_billing_suspend(item) {
			if (item.is(':checked')) {
				$('#invoice_next_at').prop('readonly',true);
				$('#price').prop('readonly',true);

				recur_schedule_readonly(true);

			} else {
				$('#invoice_next_at').prop('readonly',false);
				$('#price').prop('readonly',false);

				recur_schedule_readonly(false);
			}
		}

		$(document).ready(function() {
			toggle_billing_external($('#external_billing'));
			toggle_billing_suspend($('#suspend_billing'));

			$('#external_billing').on('click',function(item) {
				toggle_billing_external($(this));
			});

			$('#suspend_billing').on('click',function(item) {
				toggle_billing_suspend($(this));
			});
		});
	</script>
@append