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

<!-- $o=Service\Broadband::class -->
<div class="row">
	<div class="col-12 col-sm-9 col-md-6 col-xl-5">
		<x-leenooks::form.text id="service_number" name="broadband[service_number]" icon="fa-phone" label="Service Number" old="broadband.service_number" :value="$o->service_number"/>
	</div>

	<div class="col-12 col-sm-9 col-md-6 col-xl-7">
		<x-leenooks::form.text id="service_address" name="broadband[service_address]" icon="fa-map" label="Service Address" old="broadband.service_address" :value="$o->service_address"/>
	</div>
</div>

<div class="row">
	<div class="col">
		Connection Type
		<x-leenooks::form.toggle id="pppoe" name="broadband[pppoe]" label="PPPoE" old="broadband.pppoe" :value="$o->pppoe"/>
	</div>
</div>

<div class="row">
	<div class="col-12 col-sm-9 col-md-12 col-xl-7">
		<x-leenooks::form.text id="service_username" name="broadband[service_username]" icon="fa-user" label="Service Username" old="broadband.service_username" :value="$o->service_username"/>
	</div>

	<div class="col-12 col-sm-9 col-md-5 col-xl-5">
		<x-leenooks::form.text id="service_password" name="broadband[service_password]" icon="fa-lock" label="Service Password" old="broadband.service_password" :value="$o->service_password"/>
	</div>
</div>

<hr>
<p class="h6">Service Dates</p>

<div class="row">
	<div class="col-12 col-sm-9 col-md-6 col-xl-5">
		<x-leenooks::form.date id="connect_at" name="broadband[connect_at]" icon="fa-calendar" label="Connect Date" old="broadband.connect_at" :value="$o->connect_at?->format('Y-m-d')"/>
	</div>

	<div class="col-12 col-sm-9 col-md-6 col-xl-5">
		<x-leenooks::form.date id="expire_at" name="broadband[expire_at]" icon="fa-calendar" label="Contract End" old="broadband.expire_at" :value="$o->expire_at?->format('Y-m-d') ?: ($o->connect_at?->addMonths($o->contract_term)->format('Y-m-d'))"/>
	</div>
</div>

<hr>
<p class="h6">IP Address</p>
<div class="row">
	<div class="col-12 col-lg-5">
		<x-leenooks::form.text id="ipaddress" name="broadband[ipaddress]" icon="fa-map-marker" label="IPv4 Address" old="broadband.ipaddress" :value="$o->ipaddress"/>
	</div>

	<div class="col-12 col-lg-7">
		<div class="form-group">
			<x-leenooks::form.text id="ip6address" name="broadband[ip6address]" icon="fa-map-marker-alt" label="IPv6 Address" :value="$o->ip6address"/>
		</div>
	</div>
</div>

@section('page-scripts')
	<script type="text/javascript">
		function toggle_pppoe(item) {
			if (item.is(':checked')) {
				$('#service_username').closest('.form-group').parent().removeClass('d-none');
				$('#service_password').closest('.form-group').parent().removeClass('d-none');

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

			} else {
				$('#service_username').closest('.form-group').parent().addClass('d-none');
				$('#service_password').closest('.form-group').parent().addClass('d-none');

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

		$(document).ready(function() {
			toggle_pppoe($('#pppoe'));

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