<!-- $o = Supplier{type}::class -->
<div class="row">
	<!-- Supplier Name -->
	<div class="col-3">
		<div class="form-group has-validation">
			<label for="product_id">Product ID</label>
			<input type="text" class="form-control form-control-border @error('product_id') is-invalid @enderror" id="product_id" name="product_id" placeholder="Product ID" value="{{ old('product_id',$o?->product_id) }}" required>
			<span class="invalid-feedback" role="alert">
				@error('product_id')
					{{ $message }}
				@else
					Supplier's Product ID
				@enderror
			</span>
			<span class="input-helper">Supplier's Product ID</span>
		</div>
	</div>

	<!-- Suppliers Description -->
	<div class="offset-1 col-8">
		<div class="form-group has-validation">
			<label for="product_desc">Product Description</label>
			<input type="text" class="form-control form-control-border @error('product_desc') is-invalid @enderror" id="product_desc" name="product_desc" placeholder="Product Description" value="{{ old('product_desc',$o?->product_desc) }}" required>
			<span class="invalid-feedback" role="alert">
				@error('product_desc')
					{{ $message }}
				@else
					Product Description is required
				@enderror
			</span>
			<span class="input-helper">Supplier's Product Description as it appears on Invoices</span>
		</div>
	</div>
</div>

<div class="row">
	<!-- Supplier Active -->
	<div class="col-1">
		<div class="form-group">
			<div class="custom-control custom-switch custom-switch-off-danger custom-switch-on-success">
				<input type="checkbox" class="custom-control-input" id="active" name="active" {{ old('active',$o?->active) ? 'checked' : '' }}>
				<label class="custom-control-label" for="active">Active</label>
			</div>
		</div>
	</div>

	<!-- Base Cost -->
	<div class="offset-1 col-2">
		<div class="form-group has-validation">
			<label for="base_cost">Base (ex)</label>
			<input type="number" class="form-control form-control-border @error('base_cost') is-invalid @enderror" id="base_cost" name="base_cost" placeholder="Cost" value="{{ old('base_cost',$o?->base_cost) }}">
			<span class="invalid-feedback" role="alert">
				@error('base_cost')
					{{ $message }}
				@enderror
			</span>
			<span class="input-helper">Monthly Cost</span>
		</div>
	</div>

	<!-- Setup Cost -->
	<div class="col-2">
		<div class="form-group has-validation">
			<label for="setup_cost">Setup (ex)</label>
			<input type="number" class="form-control form-control-border @error('setup_cost') is-invalid @enderror" id="setup_cost" name="setup_cost" placeholder="Setup" value="{{ old('setup_cost',$o?->setup_cost) }}">
			<span class="invalid-feedback" role="alert">
				@error('setup_cost')
					{{ $message }}
				@enderror
			</span>
			<span class="input-helper">Setup Cost</span>
		</div>
	</div>

	<!-- Contract Term -->
	<div class="col-2">
		<div class="form-group has-validation">
			<label for="contract_term">Contract Term</label>
			<input type="number" class="form-control form-control-border @error('contract_term') is-invalid @enderror" id="contract_term" name="contract_term" placeholder="Term" value="{{ old('contract_term',$o?->contract_term) }}">
			<span class="invalid-feedback" role="alert">
				@error('contract_term')
					{{ $message }}
				@enderror
			</span>
			<span class="input-helper">Term (mths)</span>
		</div>
	</div>

	<!-- Speed -->
	<div class="col-2">
		<div class="form-group has-validation">
			<label for="speed">Speed</label>
			<input type="text" class="form-control form-control-border @error('speed') is-invalid @enderror" id="speed" name="speed" placeholder="Speed" value="{{ old('speed',$o?->speed) }}">
			<span class="invalid-feedback" role="alert">
				@error('speed')
					{{ $message }}
				@enderror
			</span>
			<span class="input-helper">Speed</span>
		</div>
	</div>

	<!-- Technology -->
	<div class="col-2">
		<div class="form-group has-validation">
			<label for="technology">Technology</label>
			<input type="text" class="form-control form-control-border @error('technology') is-invalid @enderror" id="technology" name="technology" placeholder="Speed" value="{{ old('technology',$o?->technology) }}">
			<span class="invalid-feedback" role="alert">
				@error('technology')
					{{ $message }}
				@enderror
			</span>
			<span class="input-helper">Technology</span>
		</div>
	</div>
</div>

<div class="row">
	<!-- @todo Add javascript so these toggles cannot both be on -->
	<!-- Extra Charged -->
	<div class="col-1">
		<div class="form-group">
			<div class="custom-control custom-switch custom-switch-off-danger custom-switch-on-success">
				<input type="checkbox" class="custom-control-input" id="extra_charged" name="extra_charged" {{ old('extra_charged',$o?->extra_charged) ? 'checked' : '' }}>
				<label class="custom-control-label" for="extra_charged">Extra Charge</label>
			</div>
		</div>
	</div>

	<div class="offset-1 col-3">
		<div class="form-group has-validation">
			<label for="offpeak_start">OffPeak Start</label>
			<input type="time" class="form-control form-control-border @error('offpeak_start') is-invalid @enderror" id="offpeak_start" name="offpeak_start" value="{{ old('offpeak_start',($o && $o->offpeak_start) ? $o->offpeak_start->format('H:i') : '') }}">
			<span class="invalid-feedback" role="alert">
				@error('offpeak_start')
					{{ $message }}
				@enderror
			</span>
			<span class="input-helper">Offpeak Start</span>
		</div>
	</div>

	<div class="col-3">
		<div class="form-group has-validation">
			<label for="offpeak_end">OffPeak End</label>
			<input type="time" class="form-control form-control-border @error('offpeak_end') is-invalid @enderror" id="offpeak_end" name="offpeak_end" value="{{ old('offpeak_end',($o && $o->offpeak_end) ? $o->offpeak_end->format('H:i') : '') }}">
			<span class="invalid-feedback" role="alert">
				@error('offpeak_end')
					{{ $message }}
				@enderror
			</span>
			<span class="input-helper">Offpeak Ends</span>
		</div>
	</div>
</div>

<div class="row mt-3">
	<!-- Extra Shaped -->
	<div class="col-1">
		<div class="form-group">
			<div class="custom-control custom-switch custom-switch-off-danger custom-switch-on-success">
				<input type="checkbox" class="custom-control-input" id="extra_shaped" name="extra_shaped" {{ old('extra_shaped',$o?->extra_shaped) ? 'checked' : '' }}>
				<label class="custom-control-label" for="extra_shaped">Extra Shaped</label>
			</div>
		</div>
	</div>

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

<div class="row">
	<!-- Base Down Peak -->
	<div class="offset-2 col-2">
		<div class="form-group has-validation">
			<label for="base_down_peak">Down Peak</label>
			<input type="number" class="form-control form-control-border @error('base_down_peak') is-invalid @enderror" id="base_down_peak" name="base_down_peak" value="{{ old('base_down_peak',$o?->base_down_peak) }}">
			<span class="invalid-feedback" role="alert">
				@error('base_down_peak')
					{{ $message }}
				@enderror
			</span>
		</div>
	</div>

	<!-- Base Down Peak -->
	<div class="col-2">
		<div class="form-group has-validation">
			<label for="base_up_peak">Up Peak</label>
			<input type="number" class="form-control form-control-border @error('base_up_peak') is-invalid @enderror" id="base_up_peak" name="base_up_peak" value="{{ old('base_up_peak',$o?->base_up_peak) }}">
			<span class="invalid-feedback" role="alert">
				@error('base_up_peak')
					{{ $message }}
				@enderror
			</span>
		</div>
	</div>

	<!-- Base Down Offpeak -->
	<div class="col-2">
		<div class="form-group has-validation">
			<label for="base_down_offpeak">Down Offpeak</label>
			<input type="number" class="form-control form-control-border @error('base_down_offpeak') is-invalid @enderror" id="base_down_offpeak" name="base_down_offpeak" value="{{ old('base_down_offpeak',$o?->base_down_offpeak) }}">
			<span class="invalid-feedback" role="alert">
				@error('base_down_offpeak')
				{{ $message }}
				@enderror
			</span>
		</div>
	</div>

	<!-- Base Down Offpeak -->
	<div class="col-2">
		<div class="form-group has-validation">
			<label for="base_up_offpeak">Up Offpeak</label>
			<input type="number" class="form-control form-control-border @error('base_up_offpeak') is-invalid @enderror" id="base_up_offpeak" name="base_up_offpeak" value="{{ old('base_up_offpeak',$o?->base_up_offpeak) }}">
			<span class="invalid-feedback" role="alert">
				@error('base_up_offpeak')
				{{ $message }}
				@enderror
			</span>
		</div>
	</div>

	<!-- Metric Divider -->
	<div class="col-2">
		<div class="form-group has-validation">
			<label for="metric">Metric Divider</label>
			<input type="number" class="form-control form-control-border @error('metric') is-invalid @enderror" id="metric" name="metric" placeholder="1000" value="{{ old('metric',$o?->metric) }}">
			<span class="invalid-feedback" role="alert">
				@error('metric')
					{{ $message }}
				@enderror
			</span>
			<span class="input-helper">Metric</span>
		</div>
	</div>
</div>

<div class="row mt-3">
	<div class="offset-2 col-8">
		<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>

<hr>

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

<div class="row">
	<!-- Extra Down Peak -->
	<div class="offset-2 col-2">
		<div class="form-group has-validation">
			<label for="extra_down_peak">Down Peak</label>
			<input type="number" class="form-control form-control-border @error('extra_down_peak') is-invalid @enderror" id="extra_down_peak" name="extra_down_peak" value="{{ old('extra_down_peak',$o?->extra_down_peak) }}">
			<span class="invalid-feedback" role="alert">
				@error('extra_down_peak')
					{{ $message }}
				@enderror
			</span>
		</div>
	</div>

	<!-- Extra Down Peak -->
	<div class="col-2">
		<div class="form-group has-validation">
			<label for="extra_up_peak">Up Peak</label>
			<input type="number" class="form-control form-control-border @error('extra_up_peak') is-invalid @enderror" id="extra_up_peak" name="extra_up_peak" value="{{ old('extra_up_peak',$o?->extra_up_peak) }}">
			<span class="invalid-feedback" role="alert">
				@error('extra_up_peak')
					{{ $message }}
				@enderror
			</span>
		</div>
	</div>

	<!-- Extra Down Offpeak -->
	<div class="col-2">
		<div class="form-group has-validation">
			<label for="extra_down_offpeak">Down Offpeak</label>
			<input type="number" class="form-control form-control-border @error('extra_down_offpeak') is-invalid @enderror" id="extra_down_offpeak" name="extra_down_offpeak" value="{{ old('extra_down_offpeak',$o?->extra_down_offpeak) }}">
			<span class="invalid-feedback" role="alert">
				@error('extra_down_offpeak')
					{{ $message }}
				@enderror
			</span>
		</div>
	</div>

	<!-- Extra Down Offpeak -->
	<div class="col-2">
		<div class="form-group has-validation">
			<label for="extra_up_offpeak">Up Offpeak</label>
			<input type="number" class="form-control form-control-border @error('extra_up_offpeak') is-invalid @enderror" id="extra_up_offpeak" name="extra_up_offpeak" value="{{ old('extra_up_offpeak',$o?->extra_up_offpeak) }}">
			<span class="invalid-feedback" role="alert">
				@error('extra_up_offpeak')
					{{ $message }}
				@enderror
			</span>
		</div>
	</div>
</div>