@extends('layouts.app')
@section('content')
<style>
	.home_capital_direct-add input{
	padding: 13px 12px !important;
	}
.required{color:#f00}
.home_capital_direct-add span.invalid-feedback {
    position: absolute;
    bottom: 0px;
    font-size: 10px;
    font-weight: 400;
    white-space: initial;
    width: 250px;
    overflow: inherit;
    text-overflow: ellipsis;
    line-height: 12px;
}
.required_element{
    border: 1px solid red !important;
}
</style>

<div class="page-container">
   <div class="main-content">
      <div class="home_capital_direct-add p-5 ml-5 mr-4">
         <h3 class="text-center">Create User</h3>
         <div class="bg-white p-5 mt-5 rounded shadow-sm">
		<form method="POST" action="{{route('createuser')}}" id="payroll_form" enctype="multipart/form-data">
         {{ csrf_field() }}
            <div class="row">

               
               <div class="col-sm-6">
                  <label>First Name<span class="required"> * </span></label>
                  <input type="text" name="fname" id="fname" value="{{ old('fname') }}" required>
                  
               </div>
				<div class="col-sm-6">
                  <label>Last Name<span class="required"> * </span></label>
                  <input type="text" name="lname" id="lname" value="{{ old('lname') }}" required>
                  
               </div>
				<div class="col-sm-6">
                  <label>Email <span class="required"> * </span></label>
                  <input type="email" name="email" id="email" value="{{ old('email') }}" required>
                  
               </div>
				<div class="col-sm-6">
    <label>User Type <span class="required"> * </span></label>
    <select id="user-type" name="user" required>
        <option value="0" {{ old('user') == 0 ? 'selected' : '' }}>Site</option>
        <option value="2" {{ old('user') == 2 ? 'selected' : '' }}>Transport Hub</option>
        <option value="3" {{ old('user') == 3 ? 'selected' : '' }}>Accountant</option>
        <option value="1" {{ old('user') == 1 ? 'selected' : '' }}>Admin</option>
    </select>
</div>

<div class="col-sm-6" id="select1" style="display: none">
    <label>Sites <span class="required"> * </span></label>
    <select id="sitessss" name="sites" required>
		<option value=""></option>
        <option value="RR">Olympus–RR</option>
                                        <option value="CR">Creek Road–CR</option>
                                        <option value="TD">Tilbury–TD</option>
                                        <option value="WT">West Thurrock-WT</option>
                                        <option value="SH">London Gateway–SH</option>
                                        <option value="BG">Burton Gateway–BG</option>
                                        <option value="DS">Global Warehouse–DS</option>
                                        <option value="VT">Eton Park–VT</option>
                                        <option value="FP">Fradley Park–FP</option>
                                        <option value="MM">Melksham–MM</option>
                                        <option value="DT">Dinton–DT</option>
                                        <option value="EL">Leed–EL</option>
                                        <option value="HT">Hillington–HT</option>
                                        <option value="KD">Drakelow–KD</option>
                                        <option value="LT">Linton–LT</option>
                                        <option value="AW">Sawston-AW</option>
    </select>
</div>

<div class="col-sm-6" id="select2" style="display: none">
    <label>Transport Hub <span class="required"> * </span></label>
    <select id="reporting_depot" name="reporting_depot" required>
		 <option value=""></option>
       <option value="Melksham" >Melksham</option>
                                       
		 <option value="Fradley Park">Fradley Park</option>
                                        <option value="Leeds">Leeds</option>
    </select>
</div>
							<div class="col-sm-6">
								<label>Password <span class="required"> * </span></label>
								<input type="password" name="password" id="name" minlength="8" value="{{ old('password') }}" required>

							</div>
				


				   <div class="col-lg-12">
                      <button type="submit" id="submitbtn" class="btn mb-3 btn-block btn-primary btn-lg border-0 mt-3" style=" background-color: #243487!important; background-image: none !important;">
                         <!----> Submit
                      </button>
                   </div>
            </div>
			</form>
         </div>
      </div>
   </div>
</div>
<script>
  $(document).ready(function() {
    const userTypeSelect = document.getElementById('user-type');
    const select1 = document.getElementById('select1');
    const select2 = document.getElementById('select2');
    const sitesSelect = document.getElementById('sitessss');
    const depotSelect = document.getElementById('reporting_depot');

    userTypeSelect.addEventListener('change', function() {
        const selectedUserType = userTypeSelect.value;

        if (selectedUserType === '0') {
            select1.style.display = 'block';
            select2.style.display = 'none';
            
            // Make the "Sites" field required
            sitesSelect.required = true;
            depotSelect.required = false;
        } else if (selectedUserType === '2') {
            select1.style.display = 'none';
            select2.style.display = 'block';
            
            // Make the "Transport Hub" field required
            sitesSelect.required = false;
            depotSelect.required = true;
        } else {
            select1.style.display = 'none';
            select2.style.display = 'none';
            
            // Remove the "required" attribute from both fields
            sitesSelect.required = false;
            depotSelect.required = false;
        }
    });

    // Trigger the change event to set the initial display and validation based on the selected user type
    userTypeSelect.dispatchEvent(new Event('change'));
});


  </script>
@endsection