@extends('owner._layout')

@section('body')
<div class="row px-0 px-md-3 my-4">
	@if(session('message'))
	<div class="alert alert-success alert-dismissible fade show" role="alert">
		<strong>{{ session('message') }}</strong>
		<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
	</div>
	@endif
	<form method="POST" action="/maintenance/schedule" class="row">
		@csrf
		<div class="col-12 col-md-4 mb-3">
			<div class="blck-white">
				<h5 class="ms-2 mt-2 mb-3">Make Appointment:</h5>
				<div class="d-flex flex-row align-items-center mb-2">
					<div class="flex-fill">
						<label class="form-label">Driver<span class="fw-bold text-danger">*</span>:</label>
					</div>
					<div class="flex-fill">
						<select name="user_id" class="form-control" required>
							<option disabled selected>Select truck</option>
							@foreach($drivers as $driver)
							<option value="{{$driver->userData->id}}">{{$driver->truckData->number.' | '.$driver->userData->firstname.' '.$driver->userData->lastname}}</option>
							@endforeach
						</select>
						@error('user_id')
						<p class="mb-0 text-danger"><small>You have to select Driver</small></p>
						@enderror
					</div>
				</div>
				<div class="d-flex flex-row align-items-center mb-2">
					<div class="flex-fill"><label class="form-label">Date<span class="fw-bold text-danger">*</span>:</label></div>
					<div class="flex-fill"><input type="date" name="date" class="form-control" required>
						@error('date')
						<p class="mb-0 text-danger"><small>{{ $message }}</small></p>
						@enderror
					</div>
				</div>
			</div>
		</div>
		<div class="col-12 col-md-4 mb-3">
			<div class="blck-white h-100">
				<h5>Truck Repair:</h5>
				<input type="checkbox" class="btn-check" name="truck[]" value="engine" id="truckengine" autocomplete="off">
				<label class="btn mb-1" for="truckengine">Engine</label>
				<input type="checkbox" class="btn-check" name="truck[]" value="wheels" id="truckwheels" autocomplete="off">
				<label class="btn mb-1" for="truckwheels">Wheels</label>
				<input type="checkbox" class="btn-check" name="truck[]" value="break" id="truckbreak" autocomplete="off">
				<label class="btn mb-1" for="truckbreak">Brakes</label>
			</div>
		</div>
		<div class="col-12 col-md-4 mb-3">
			<div class="blck-white h-100">
				<h5>Trailer Repair:</h5>
				<input type="checkbox" class="btn-check" name="trailer[]" value="brake" id="trailerengine" autocomplete="off">
				<label class="btn btn-outline-secondary mb-1" for="trailerengine">Engine</label>
				<input type="checkbox" class="btn-check" name="trailer[]" value="engine" id="trailerwheels" autocomplete="off">
				<label class="btn btn-outline-secondary mb-1" for="trailerwheels">Wheels</label>
				<input type="checkbox" class="btn-check" name="trailer[]" value="wheels" id="trailerbreak" autocomplete="off">
				<label class="btn btn-outline-secondary mb-1" for="trailerbreak"><i class="bi bi-car-front-fill"></i> Brakes</label>
			</div>
		</div>
		<div class="col-12 col-md-3">
			<button class="btn btn-primary w-100">Make an appointment</button>
		</div>
	</form>
</div>
@endsection

@section('script')
<script>
</script>
@endsection