<!-- $o=Supplier/Broadband::class -->

<div class="row">
	<!-- Supplier Name -->
	<div class="col-4">
		<x-leenooks::form.text name="product_id" label="Product ID" icon="fa-tag" helper="Supplier's Product ID" :value="$o?->product_id"/>
	</div>

	<!-- Suppliers Description -->
	<div class="col-8">
		<x-leenooks::form.text name="product_desc" label="Product Description" icon="fa-file-alt" helper="Supplier's Product Description as it appears on Invoices" :value="$o?->product_desc"/>
	</div>
</div>

<div class="row">
	<!-- Supplier Active -->
	<div class="col-1">
		<x-leenooks::form.toggle name="active" label="Active" :value="$o?->active"/>
	</div>

	<div class="offset-1 col-10">
		<div class="row">
			<!-- Base Cost -->
			<div class="col-12 col-sm-2">
				<x-leenooks::form.text class="text-right" name="base_cost" label="Base" helper="Monthly Cost (ex)" :value="$o?->base_cost"/>
			</div>

			<!-- Setup Cost -->
			<div class="col-2">
				<x-leenooks::form.text class="text-right" name="setup_cost" label="Setup" helper="Setup Cost (ex)" :value="$o?->setup_cost"/>
			</div>

			<!-- Contract Term -->
			<div class="col-2">
				<x-leenooks::form.number class="text-right" name="contract_term" label="Contract Term" helper="Term (mths)" :value="$o?->contract_term"/>
			</div>

			<!-- Speed -->
			<div class="col-2">
				<x-leenooks::form.text class="text-right" name="speed" label="Speed" :value="$o?->speed"/>
			</div>

			<!-- Technology -->
			<div class="col-2">
				<x-leenooks::form.text class="text-right" name="technology" label="Technology" :value="$o?->technology"/>
			</div>
		</div>

		<div class="row">
			<div class="col-2">
				<x-leenooks::form.time class="text-right" name="offpeak_start" label="OffPeak Start" :value="($o && $o->offpeak_start) ? $o->offpeak_start->format('H:i') : ''"/>
			</div>

			<div class="col-2">
				<x-leenooks::form.time class="text-right" name="offpeak_end" label="OffPeak End" :value="($o && $o->offpeak_end) ? $o->offpeak_end->format('H:i') : ''"/>
			</div>
		</div>
	</div>
</div>

<hr>

<div class="row">
	<div class="col-1">
		<x-leenooks::form.toggle name="extra_shaped" label="Extra Shaped" :value="$o?->extra_shaped"/>
	</div>

	<div class="offset-1 col-10">
		<div class="row">
			<div class="col">
				<h3 class="text-md">Included Traffic in MB</h3>
			</div>
		</div>

		<div class="row">
			<!-- Base Down Peak -->
			<div class="col-2">
				<x-leenooks::form.text class="text-right" name="base_down_peak" label="Down Peak" helper="Download Peak (mb)" :value="$o?->base_down_peak"/>
			</div>

			<!-- Base Up Peak -->
			<div class="col-2">
				<x-leenooks::form.text class="text-right" name="base_up_peak" label="Up Peak" helper="Upload Peak (mb)" :value="$o?->base_up_peak"/>
			</div>

			<!-- Base Down Offpeak -->
			<div class="col-2">
				<x-leenooks::form.text class="text-right" name="base_down_offpeak" label="Down OffPeak" helper="Download OffPeak (mb)" :value="$o?->base_down_offpeak"/>
			</div>

			<!-- Base Up Offpeak -->
			<div class="col-2">
				<x-leenooks::form.text class="text-right" name="base_up_offpeak" label="Up OffPeak" helper="Upload OffPeak (mb)" :value="$o?->base_up_offpeak"/>
			</div>

			<!-- Metric Divider -->
			<div class="col-2">
				<x-leenooks::form.text class="text-right" name="metric" label="Divider" helper="Traffic Divider to get MB" :value="$o?->metric"/>
			</div>
		</div>

		<div class="row mt-3">
			<div class="col">
				<p class="text-small">Values determine the included traffic. A value of <strong>0</strong> means no traffic is included and charged at the Extra Traffic rates. An empty value means the traffic is not counted in this category.</p>
				<p class="text-small">Any values charged at extra rates, the rate determines the value charged, and if the value is empty it will roll up to the <strong>Peak</strong> category or <strong>Down Peak</strong> if the Peak category is null.</p>
			</div>
		</div>
	</div>
</div>

<hr>

<div class="row">
	<!-- @todo Add javascript so these toggles cannot both be on -->
	<!-- Extra Charged -->
	<div class="col-1">
		<x-leenooks::form.toggle name="extra_charged" label="Extra Charged" :value="$o?->extra_charged"/>
	</div>

	<div class="offset-1 col-10">
		<div class="row">
			<div class="col-8">
				<h3 class="text-md">Extra Traffic in $/mb</h3>
			</div>
		</div>

		<div class="row">
			<!-- Extra Down Peak -->
			<div class="col-2">
				<x-leenooks::form.text class="text-right" name="extra_down_peak" label="Extra Down Peak" helper="Extra Download Peak ($/mb)" :value="$o?->extra_down_peak"/>
			</div>

			<!-- Extra Up Peak -->
			<div class="col-2">
				<x-leenooks::form.text class="text-right" name="extra_up_peak" label="Up Peak" helper="Extra Upload Peak ($/mb)" :value="$o?->extra_up_peak"/>
			</div>

			<!-- Extra Down Offpeak -->
			<div class="col-2">
				<x-leenooks::form.text class="text-right" name="extra_down_offpeak" label="Down OffPeak" helper="Extra Download OffPeak ($/mb)" :value="$o?->extra_down_offpeak"/>
			</div>

			<!-- Extra Up Offpeak -->
			<div class="col-2">
				<x-leenooks::form.text class="text-right" name="extra_up_offpeak" label="Up OffPeak" helper="Extra Upload OffPeak ($/mb)" :value="$o?->extra_up_offpeak"/>
			</div>
		</div>
	</div>
</div>