@extends('layouts.app')
@section('content')
<style>
.required{color:#f00}
	.home_capital_direct-add input{
	padding: 13px 12px !important;
	}
.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">Edit User</h3>
         <div class="bg-white p-5 mt-5 rounded shadow-sm">
		<form method="POST" action="{{route('updateuser',$user->id)}}" 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="{{ $user->fname }}" required>
                  
               </div>
				<div class="col-sm-6">
                  <label>Last Name<span class="required"> * </span></label>
                  <input type="text" name="lname" id="lname" value="{{ $user->lname }}" required>
                  
               </div>
				<div class="col-sm-6">
                  <label>Email <span class="required"> * </span></label>
                  <input type="email" name="email" id="email" value="{{ $user->email }}" required>
                  
               </div>
				<div class="col-sm-6">
    <label>User Type <span class="required"> * </span></label>
    <select id="user-type" name="roll_id" required>
        <option value="0" @if ($user->roll_id == '0') {{ 'selected' }} @endif>Site</option>
        <option value="2" @if ($user->roll_id == '2') {{ 'selected' }} @endif>Transport Hub</option>
        <option value="3" @if ($user->roll_id == '3') {{ 'selected' }} @endif>Accountant</option>
        <option value="1" @if ($user->roll_id == '1') {{ 'selected' }} @endif>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" @if ($user->sites == 'RR') {{ 'selected' }} @endif>Olympus–RR</option>
                                        <option value="CR" @if ($user->sites == 'CR') {{ 'selected' }} @endif>Creek Road–CR</option>
                                        <option value="TD" @if ($user->sites == 'TD') {{ 'selected' }} @endif>Tilbury–TD</option>
                                        <option value="WT" @if ($user->sites == 'WT') {{ 'selected' }} @endif>West Thurrock-WT</option>
                                        <option value="SH" @if ($user->sites == 'SH') {{ 'selected' }} @endif>London Gateway–SH</option>
                                        <option value="BG" @if ($user->sites == 'BG') {{ 'selected' }} @endif>Burton Gateway–BG</option>
                                        <option value="DS" @if ($user->sites == 'DS') {{ 'selected' }} @endif>Global Warehouse–DS</option>
                                        <option value="VT" @if ($user->sites == 'VT') {{ 'selected' }} @endif>Eton Park–VT</option>
                                        <option value="FP" @if ($user->sites == 'FP') {{ 'selected' }} @endif>Fradley Park–FP</option>
                                        <option value="MM" @if ($user->sites == 'MM') {{ 'selected' }} @endif>Melksham–MM</option>
                                        <option value="DT" @if ($user->sites == 'DT') {{ 'selected' }} @endif>Dinton–DT</option>
                                        <option value="EL" @if ($user->sites == 'EL') {{ 'selected' }} @endif>Leed–EL</option>
                                        <option value="HT" @if ($user->sites == 'HT') {{ 'selected' }} @endif>Hillington–HT</option>
                                        <option value="KD" @if ($user->sites == 'KD') {{ 'selected' }} @endif>Drakelow–KD</option>
                                        <option value="LT" @if ($user->sites == 'LT') {{ 'selected' }} @endif>Linton–LT</option>
                                        <option value="AW" @if ($user->sites == 'AW') {{ 'selected' }} @endif>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" @if ($user->reporting_depot == 'Melksham') {{ 'selected' }} @endif>Melksham</option>
                                       
		 <option value="Fradley Park" @if ($user->reporting_depot == 'Fradley Park') {{ 'selected' }} @endif>Fradley Park</option>
                                        <option value="Leeds" @if ($user->reporting_depot == 'Leeds') {{ 'selected' }} @endif>Leeds</option>
    </select>
</div>
				<div class="col-sm-6">
                  <label>Password <span class="required"> * </span></label>
                  <input type="password" name="password" id="password">
                  
               </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;">
                         <!----> Update
                      </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