@extends('layout')

@section('body')
<div class="row px-0 px-md-3 my-4">
	@error('name')
	<div class="alert alert-danger alert-dismissible fade show" role="alert">
	  <strong>Company Name is required.</strong>
	  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
	</div>
	@enderror
	@error('user_id')
	<div class="alert alert-danger alert-dismissible fade show" role="alert">
	  <strong>Please fill Owner Name Field correctly.</strong>
	  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
	</div>
	@enderror
	<div class="col-12">
		<div class="blck-white">
			<h5 class="ms-2 my-2">Company Information:</h5>
			<form method="POST" action="/store/company" class="row g-3 px-2">
				@csrf
				<div class="col-12 col-xl-6">
					<label class="form-label">Company Name<span class="fw-medium text-danger">*</span>:</label>
					@error('name')
					<small class="text-danger">This field is required.</small>
					@enderror
					<input type="text" name="name" class="form-control" value="{{ old('name') }}" required><br>
					Company Status:
					<input class="form-check-input" type="radio" name="active" value="1" {{ old('active') == 1 ? 'checked':'' }}>
					<label class="form-check-label">Active</label>
					<input class="form-check-input" type="radio" name="active" value="0" {{ old('active') == 0 ? 'checked':'' }}>
					<label class="form-check-label">Disable</label>
				</div>
				<div class="col-12 col-xl-6">
					<label class="form-label">Owner Name<span class="fw-medium text-danger">*</span>:</label>
					<input type="hidden" class="userid" name="user_id" value="{{ old('user_id') }}">
					<input type="text" class="form-control userinput" list="list-users" name="ownername" value="{{ old('ownername') }}" required>
				    @if(!$userList->isEmpty())
				    <datalist id="list-users">
				    	@foreach($userList as $user)
				    	@if($user->fDriverData && $user->fDriverData->fTruckData)
				    	<option value="{{$user->firstname}} {{$user->lastname}} [id:{{$user->id}}]">Truck:{{$user->fDriverData->fTruckData->number}} [{{$user->role}}]</option>
				    	@else
				    	<option value="{{$user->firstname}} {{$user->lastname}} [id:{{$user->id}}]">[{{$user->role}}]</option>
				    	@endif
				    	@endforeach
				    </datalist>
				    @endif
				</div>
				<div class="col-12 col-xl-6">
					<label class="form-label">Address 1:</label>
					<input type="text" name="address1" class="form-control" value="{{ old('address1') }}">
				</div>
				<div class="clearfix mt-0"></div>
				<div class="col-12 col-xl-6">
					<label class="form-label">Address 2:</label>
					<input type="text" name="address2" class="form-control" value="{{ old('address2') }}">
				</div>
				<div class="clearfix mt-0"></div>
				<div class="col-12 col-xl-4">
					<label class="form-label">City:</label>
					<input type="text" name="city" class="form-control" value="{{ old('city') }}">
				</div>
				<div class="col-12 col-xl-4">
					<label class="form-label">State:</label>
					<select class="form-control" name="state">
						<option value="AL">Alabama</option>
						<option value="AK">Alaska</option>
						<option value="AZ">Arizona</option>
						<option value="AR">Arkansas</option>
						<option value="CA">California</option>
						<option value="CO">Colorado</option>
						<option value="CT">Connecticut</option>
						<option value="DE">Delaware</option>
						<option value="FL">Florida</option>
						<option value="GA">Georgia</option>
						<option value="HI">Hawaii</option>
						<option value="ID">Idaho</option>
						<option value="IL">Illinois</option>
						<option value="IN">Indiana</option>
						<option value="IA">Iowa</option>
						<option value="KS">Kansas</option>
						<option value="KY">Kentucky</option>
						<option value="LA">Louisiana</option>
						<option value="ME">Maine</option>
						<option value="MD">Maryland</option>
						<option value="MA">Massachusetts</option>
						<option value="MI">Michigan</option>
						<option value="MN">Minnesota</option>
						<option value="MS">Mississippi</option>
						<option value="MO">Missouri</option>
						<option value="MT">Montana</option>
						<option value="NE">Nebraska</option>
						<option value="NV">Nevada</option>
						<option value="NH">New Hampshire</option>
						<option value="NJ">New Jersey</option>
						<option value="NM">New Mexico</option>
						<option value="NY">New York</option>
						<option value="NC">North Carolina</option>
						<option value="ND">North Dakota</option>
						<option value="OH">Ohio</option>
						<option value="OK">Oklahoma</option>
						<option value="OR">Oregon</option>
						<option value="PA">Pennsylvania</option>
						<option value="RI">Rhode Island</option>
						<option value="SC">South Carolina</option>
						<option value="SD">South Dakota</option>
						<option value="TN">Tennessee</option>
						<option value="TX">Texas</option>
						<option value="UT">Utah</option>
						<option value="VT">Vermont</option>
						<option value="VA">Virginia</option>
						<option value="WA">Washington</option>
						<option value="WV">West Virginia</option>
						<option value="WI">Wisconsin</option>
						<option value="WY">Wyoming</option>
						<option value="DC">District of Columbia District</option>
						<option value="AS">American Samoa</option>
						<option value="GU">Guam</option>
						<option value="MP">Northern Mariana Islands</option>
						<option value="PR">Puerto Rico</option>
						<option value="UM">United States Minor Outlying Islands</option>
						<option value="VI">Virgin Islands, U.S.</option>
					</select>
				</div>
				<div class="col-12 col-xl-4">
					<label class="form-label">ZIP:</label>
					<input type="text" name="zip" class="form-control" value="{{ old('zip') }}">
				</div>
				<div class="col-12 col-xl-4">
					<label class="form-label"><i class="bi bi-bank2"></i> Company EIN:</label>
					<input type="text" name="ein" class="form-control" value="{{ old('ein') }}">
				</div>
				<div class="col-12 col-xl-4">
					<label class="form-label"><i class="bi bi-bank"></i> <strong>Bank account number</strong>:</label>
					<input type="text" name="accounting" class="form-control" value="{{ old('accounting') }}">
				</div>
				<div class="col-12 col-xl-4">
					<label class="form-label"><i class="bi bi-bank"></i> <strong>Bank routing number</strong>:</label>
					<input type="text" name="routing" class="form-control" value="{{ old('routing') }}">
				</div>
				<div class="col-12 offset-xl-10 col-xl-2">
					<button class="btn btn-success w-100">Save</button>
				</div>
			</form>
		</div>
	</div>
</div>
@endsection

@section('script')
<script>
document.addEventListener('DOMContentLoaded', function(){
	const userinput = document.querySelector('.userinput');
	const userid = document.querySelector('.userid');
	userinput.addEventListener('change',(e)=>{
		if(e.target.value!=''){
			userid.value = e.target.value.match(/\[id:(\d+)\]/)[1];
		} else {
			userid.value = '';
		}
		console.log(userid.value);
	})
});
</script>
@endsection