@extends('backend.partials.master')
@section('title')
User Create
@endsection
@section('maincontent')
<main class="content">
   <div class="container-fluid p-0">
      <div class="mb-3">
         <h1 class="h3 d-inline align-middle">Create User</h1>
      </div>
      <div class="row">
         <div class="col-md-12">
            <div class="card">
               <div class="card-body">
                  <form action="@if(!empty($user)){{ route('users.update') }}@else{{ route('users.store') }}@endif" method="POST" enctype="multipart/form-data">
                     @csrf
                     @if(!empty($user))
                     @method('PUT')
                     <input type="hidden" name="id" id="id" value="{{ $user->id }}" />
                     @endif
                     <div class="row">
                        <div class="mb-3 col-md-4">
                           <label class="form-label" for="name">Name <small class="text-danger">*</small></label>
                           <input type="text" required class="form-control @error('name') is-invalid @enderror"
                              name="name" id="name" placeholder="Name"
                              value="{{ old('name', !empty($user) ? $user->name : '') }}">
                           @error('name')
                           <small class="text-danger">{{ $message }}</small>
                           @enderror
                        </div>
                        <div class="mb-3 col-md-4">
                           <label class="form-label" for="username">Username</label>
                           <input type="text" class="form-control @error('username') is-invalid @enderror"
                              name="username" id="username" placeholder="Username"
                              value="{{ old('username', !empty($user) ? $user->username : '') }}">
                           @error('username')
                           <small class="text-danger">{{ $message }}</small>
                           @enderror
                        </div>
                        <div class="mb-3 col-md-4">
                           <label class="form-label" for="email">Email <small class="text-danger">*</small></label>
                           <input type="email" class="form-control @error('email') is-invalid @enderror"
                              id="email" name="email" placeholder="Email"
                              value="{{ old('email', !empty($user) ? $user->email : '') }}"
                              oninput="this.value = this.value.toLowerCase().replace(/[^a-z0-9@.]/g, '');">
                           @error('email')
                           <small class="text-danger">{{ $message }}</small>
                           @enderror
                        </div>
                        <div class="mb-3 col-md-4">
                           <label class="form-label">Password
                           @if(!empty($user))
                           <small class="text-danger">If you don't want to change, leave blank</small>
                           @else
                           <small class="text-danger">*</small>
                           @endif
                           </label>
                           <input type="password" id="password" class="form-control @error('password') is-invalid @enderror"
                              name="password" placeholder="Password">
                           @error('password')
                           <small class="text-danger">{{ $message }}</small>
                           @enderror
                        </div>
                        <div class="mb-3 col-md-4">
                           <label class="form-label">Confirm Password @if(empty($user))<small class="text-danger">*</small>@endif</label>
                           <input type="password" id="password_confirmation" class="form-control @error('password_confirmation') is-invalid @enderror"
                              name="password_confirmation" placeholder="Confirm Password">
                           <small id="password-match-error" class="text-danger" style="display:none;">Passwords do not match!</small>
                           @error('password_confirmation')
                           <small class="text-danger">{{ $message }}</small>
                           @enderror
                        </div>
                        <div class="mb-3 col-md-4">
                           <label class="form-label" for="role_id">Role <small class="text-danger">*</small></label>
                           <select class="form-control choices-single" name="role_id">
                              <optgroup label="Select Role">
                                 @foreach($roles as $rl)
                                 <option value="{{ $rl->id }}"
                                 {{ (string) old('role_id', !empty($user) ? $user->role_id : '') === (string) $rl->id ? 'selected' : '' }}>
                                 {{ $rl->name }}
                                 </option>
                                 @endforeach
                              </optgroup>
                           </select>
                           @error('role_id')
                           <small class="text-danger">{{ $message }}</small>
                           @enderror
                        </div>
                        <div class="mb-3 col-md-4">
                           <label class="form-label" for="status">Status <small class="text-danger">*</small></label>
                           <select id="status" name="status" class="form-control choices-single">
                           <option value="1" {{ (string) old('status', !empty($user) ? $user->status : '') === '1' ? 'selected' : '' }}>Active</option>
                           <option value="0" {{ (string) old('status', !empty($user) ? $user->status : '') === '0' ? 'selected' : '' }}>Inactive</option>
                           </select>
                           @error('status')
                           <small class="text-danger">{{ $message }}</small>
                           @enderror
                        </div>
                        <div class="mb-3 col-md-4">
                           <label class="form-label" for="mobile">Mobile No <small class="text-danger">*</small></label>
                           <input type="text" class="form-control @error('mobile') is-invalid @enderror"
                              id="mobile" name="mobile" placeholder="Mobile"
                              maxlength="10"
                              oninput="this.value = this.value.replace(/[^0-9]/g,'');"
                              value="{{ old('mobile', !empty($user) ? $user->mobile : '') }}">
                           @error('mobile')
                           <small class="text-danger">{{ $message }}</small>
                           @enderror
                        </div>
                        <div class="mb-3 col-md-4">
                           <label class="form-label" for="address">Address</label>
                           <textarea class="form-control @error('address') is-invalid @enderror"
                              name="address" placeholder="1234 Main St"
                              rows="2">{{ old('address', !empty($user) ? $user->address : '') }}</textarea>
                           @error('address')
                           <small class="text-danger">{{ $message }}</small>
                           @enderror
                        </div>
                        <div class="mb-3 col-md-4">
                           <label class="form-label" for="education_details">Education Details</label>
                           <textarea class="form-control @error('education_details') is-invalid @enderror"
                              name="education_details" placeholder="Education Details"
                              rows="2">{{ old('education_details', !empty($user) ? $user->education_details : '') }}</textarea>
                           @error('education_details')
                           <small class="text-danger">{{ $message }}</small>
                           @enderror
                        </div>
                        <div class="mb-3 col-md-4">
                           <label class="form-label" for="aadhar_no">Aadhar No <small class="text-danger">*</small></label>
                           <input type="text" class="form-control @error('aadhar_no') is-invalid @enderror"
                              name="aadhar_no" id="aadhar_no" placeholder="Aadhar No"
                              value="{{ old('aadhar_no', !empty($user) ? $user->aadhar_no : '') }}">
                           @error('aadhar_no')
                           <small class="text-danger">{{ $message }}</small>
                           @enderror
                        </div>
                        <div class="mb-3 col-md-4">
                           <label class="form-label" for="maritial">Maritial Status <small class="text-danger">*</small></label>
                           <select id="maritial " name="maritial" class="form-control choices-single">
                           <option value="Married" {{ (string) old('maritial', !empty($user) ? $user->maritial : '') === 'Married' ? 'selected' : '' }}>Married</option>
                           <option value="Unmarried" {{ (string) old('maritial', !empty($user) ? $user->maritial : '') === 'Unmarried' ? 'selected' : '' }}>Unmarried</option>
                           </select>
                           @error('maritial')
                           <small class="text-danger">{{ $message }}</small>
                           @enderror
                        </div>
                        <div class="mb-3 col-md-4">
                           <label class="form-label" for="opening_debit">Opening Debit<small class="text-danger">*</small></label>
                           <input type="number" class="form-control @error('opening_debit') is-invalid @enderror"
                              name="opening_debit" id="opening_debit" placeholder="Opening Debit"
                              value="{{ old('opening_debit', !empty($user) ? $user->opening_debit : '') }}">
                           @error('opening_debit')
                           <small class="text-danger">{{ $message }}</small>
                           @enderror
                        </div>
                        <div class="mb-3 col-md-4">
                           <label class="form-label" for="date_joining">Date Of Joining<small class="text-danger">*</small></label>
                           <input type="date" class="form-control @error('date_joining') is-invalid @enderror"
                              name="date_joining" id="date_joining" placeholder="Date Of Joining"
                              value="{{ old('date_joining', !empty($user) ? $user->date_joining : '') }}">
                           @error('date_joining')
                           <small class="text-danger">{{ $message }}</small>
                           @enderror
                        </div>
                        <div class="mb-3 col-md-4">
                           <label class="form-label" for="date_leaving">Date Of Leaving<small class="text-danger">*</small></label>
                           <input type="date" class="form-control @error('date_leaving') is-invalid @enderror"
                              name="date_leaving" id="date_leaving" placeholder="Date Of Leaving"
                              value="{{ old('date_leaving', !empty($user) ? $user->date_leaving : '') }}">
                           @error('date_leaving')
                           <small class="text-danger">{{ $message }}</small>
                           @enderror
                        </div>
                     </div>
                     <button type="submit" class="btn btn-primary">{{ !empty($user) ? 'Update' : 'Create' }}</button>
                     <a href="{{ route('users') }}" class="btn btn-secondary">Cancel</a>
                  </form>
               </div>
            </div>
         </div>
      </div>
   </div>
</main>
@endsection
<script>
   document.addEventListener("DOMContentLoaded", function() {
       const password = document.getElementById('password');
       const confirmPassword = document.getElementById('password_confirmation');
       const errorMsg = document.getElementById('password-match-error');

       function checkPasswordMatch() {
           if (password.value !== confirmPassword.value) {
               errorMsg.style.display = 'block';
           } else {
               errorMsg.style.display = 'none';
           }
       }

       password.addEventListener('input', checkPasswordMatch);
       confirmPassword.addEventListener('input', checkPasswordMatch);

       const form = password.closest('form');
       form.addEventListener('submit', function(e) {
           if (password.value !== confirmPassword.value) {
               e.preventDefault();
               alert("Passwords do not match!");
           }
       });
   });
</script>
<script>
   function togglePFNo() {
       const pfValue = document.getElementById('PF').value;
       const pfNoField = document.getElementById('pf_no_field');
       if(pfValue === 'Yes'){
           pfNoField.style.display = 'block';
       } else {
           pfNoField.style.display = 'none';
       }
   }

   // Run on page load
   document.addEventListener('DOMContentLoaded', function() {
       togglePFNo();
       document.getElementById('PF').addEventListener('change', togglePFNo);
   });
</script>