@extends('layouts.app')

@section('title', 'Edit Staff - ' . $staff->name)

@push('styles')
<link rel="stylesheet" type="text/css" href="{{asset('plugins/bootstrap4-duallistbox/bootstrap-duallistbox.min.css')}}">
<style>
   .viewPageTabs .tab-content-box {
   height: calc(100vh - 100px);
   overflow: hidden!important;
   }
   .mail-view.personal-div01 {
      overflow: hidden!important;
      overflow-y: auto!important;
      border-bottom: 0!important;
   }
   .message-body {
    height: 34rem!important;
}
   .home_1 { border-bottom: 0!important; }
</style>
@endpush

@section('content')
<div class="loadPages01">
   <div class="card card-body card-dashboard-twentyfive border-left-0 border-right-0 p-0 viewPage">
      <div class="align-items-stretch">
         <div class="card bd-0 navtab-card01 viewPageTabs">
            <form method="POST" action="{{ route('organization.staff.update', crypt_encrypt($staff->id)) }}" id="staffForm" enctype="multipart/form-data">
               @csrf
               @method('PUT')
               <div class="az-tab-content tab-content-box tab-content-box-view viewPaneTab overflow-auto">
                  <div id="azTab1" class="az-tab-pane active">
                     <div class="mail-view personal-div01 mx-2 bg-white">
                        <div class="message-body py-3 px-2">
                           <div class="item-details-page">
                              <div class="row">
                                 <!-- Left Side - Staff Details -->
                                 <div class="col-lg-6 col-md-6 col-sm-6 col-6">
                                    <h5 class="mb-2 mt-2 groupTitle">Edit Staff - {{ $staff->name }}
                                       <a href="{{ route('organization.staff.show', crypt_encrypt($staff->id)) }}" class="addNewBtn" style="background-color:#17a2b8;">
                                          <i class="las la-eye"></i> View Details
                                       </a>
                                    </h5>
                                    <div class="group">
                                       <!-- Full Name -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">Full Name<span class="asterisk "> *</span> <span class="dot-input01">:</span></label> 
                                          <label class="col-lg-8">
                                             <input type="text" class="form-control form-control-sm" value="{{ old('name', $staff->name) }}" required name="name" placeholder="Full Name" minlength="4">
                                             @if ($errors->has('name')) 
                                             <p class="help-block">{{ $errors->first('name') }}</p>
                                             @endif
                                          </label>
                                       </div>
                                       
                                       <!-- Username -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">Username<span class="asterisk "> *</span> <span class="dot-input01">:</span></label> 
                                          <label class="col-lg-8">
                                             <input type="text" class="form-control form-control-sm" value="{{ old('username', $staff->username) }}" required name="username" placeholder="Username" minlength="4">
                                             @if ($errors->has('username')) 
                                             <p class="help-block">{{ $errors->first('username') }}</p>
                                             @endif
                                          </label>
                                       </div>
                                       
                                       <!-- Email -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">Email<span class="asterisk "> *</span><span class="dot-input01">:</span></label>
                                          <label class="col-lg-8">
                                             <input type="email" name="email" class="form-control form-control-sm" value="{{ old('email', $staff->email) }}" placeholder="Email" required>
                                             @if ($errors->has('email')) 
                                             <p class="help-block">{{ $errors->first('email') }}</p>
                                             @endif
                                          </label>
                                       </div>
                                       
                                       <!-- Phone -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">Phone<span class="asterisk "> *</span> <span class="dot-input01">:</span></label>
                                          <label class="col-lg-8">
                                             <input type="text" class="form-control form-control-sm" value="{{ old('phone', $staff->phone) }}" name="phone" placeholder="Phone number" required>
                                             @if ($errors->has('phone')) 
                                             <p class="help-block">{{ $errors->first('phone') }}</p>
                                             @endif
                                          </label>
                                       </div>
                                       
                                       <!-- Address -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">Address<span class="dot-input01">:</span></label>
                                          <label class="col-lg-8">
                                             <textarea class="form-control form-control-sm" rows="2" placeholder="Address" name="address">{{ old('address', $staff->address) }}</textarea>
                                             @if ($errors->has('address')) 
                                             <p class="help-block">{{ $errors->first('address') }}</p>
                                             @endif
                                          </label>
                                       </div>
                                       
                                       <!-- Current Profile Image -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">Current Image<span class="dot-input01">:</span></label>
                                          <label class="col-lg-8">
                                             <img src="{{ $staff->getImage() }}" style="width:100px;height:100px;border-radius:4px;" class="mb-2" />
                                          </label>
                                       </div>
                                       
                                       <!-- New Profile Image -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">New Image<span class="dot-input01">:</span></label>
                                          <label class="col-lg-8">
                                             <input type="file" name="file" class="form-control form-control-sm imgInp valid" data-id="imagePreview" accept="image/jpeg,image/jpg,image/png,image/gif">
                                             <img id="imagePreview" src="#" style="width:100px;height:100px" class="d-none mt-2" />
                                             <small class="form-text text-muted">Leave empty to keep current image</small>
                                             @if ($errors->has('file')) 
                                             <p class="help-block">{{ $errors->first('file') }}</p>
                                             @endif
                                          </label>
                                       </div>
                                    </div>
                                 </div>

                                 <!-- Right Side - Professional Information -->
                                 <div class="col-lg-6 col-md-6 col-sm-6 col-6">
                                    <h5 class="mb-2 mt-2 groupTitle">Professional Information</h5>
                                    <div class="group">
                                       <!-- Designation -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">Designation<span class="dot-input01">:</span></label>
                                          <label class="col-lg-8">
                                             <select class="form-control form-control-sm select2" name="designation_id">
                                                <option value="">Select Designation</option>
                                                @foreach($designations as $designation)
                                                   <option value="{{ $designation->id }}" {{ old('designation_id', $staff->designation_id) == $designation->id ? 'selected' : '' }}>
                                                      {{ $designation->name }}
                                                   </option>
                                                @endforeach
                                             </select>
                                             @if ($errors->has('designation_id')) 
                                             <p class="help-block">{{ $errors->first('designation_id') }}</p>
                                             @endif
                                          </label>
                                       </div>
                                       
                                       <!-- Status -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">Status<span class="asterisk "> *</span><span class="dot-input01">:</span></label>
                                          <label class="col-lg-8">
                                             <select class="form-control form-control-sm" name="status" required>
                                                <option value="1" {{ old('status', $staff->status) == 1 ? 'selected' : '' }}>Active</option>
                                                <option value="0" {{ old('status', $staff->status) == 0 ? 'selected' : '' }}>Inactive</option>
                                             </select>
                                             @if ($errors->has('status')) 
                                             <p class="help-block">{{ $errors->first('status') }}</p>
                                             @endif
                                          </label>
                                       </div>

                                       <!-- Role -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">Role<span class="dot-input01">:</span></label> 
                                          <label class="col-lg-8">
                                             <select class="form-control form-control-sm select2" name="reporting_role" id="reporting_role">
                                                <option value="">Select Role</option>
                                                @foreach($roles as $role)
                                                   <option value="{{ $role->id }}" {{ old('reporting_role', $staff->reporting_role) == $role->id ? 'selected' : '' }}>
                                                      {{ $role->name }}
                                                   </option>
                                                @endforeach
                                             </select>
                                             @if ($errors->has('reporting_role')) 
                                             <p class="help-block">{{ $errors->first('reporting_role') }}</p>
                                             @endif
                                          </label>
                                       </div>

                                       <!-- Reporting To -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">Reporting To<span class="dot-input01">:</span></label> 
                                          <label class="col-lg-8">
                                             <select class="form-control form-control-sm select2-ajax" name="reporting_to_id" id="reporting_to_id"
                                                     data-url="{{ route('organization.staff.get-reporting-staff') }}">
                                                <option value="">Select Manager</option>
                                                @if($staff->reporting_to_id)
                                                   <option value="{{ crypt_encrypt($staff->reporting_to_id) }}" selected>
                                                      {{ $staff->reportingManager->name ?? 'Not Found' }}
                                                   </option>
                                                @endif
                                             </select>
                                             <small class="form-text text-muted mt-1">Start typing to search for staff members</small>
                                             @if ($errors->has('reporting_to_id')) 
                                             <p class="help-block">{{ $errors->first('reporting_to_id') }}</p>
                                             @endif
                                          </label>
                                       </div>

                                       <!-- Password Update (Optional) -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">New Password<span class="dot-input01">:</span></label>
                                          <label class="col-lg-8">
                                             <input type="password" class="form-control form-control-sm" value="{{old('password')}}" name="password" placeholder="New Password (leave empty to keep current)" minlength="7">
                                             @if ($errors->has('password')) 
                                             <p class="help-block">{{ $errors->first('password') }}</p>
                                             @endif
                                          </label>
                                       </div>
                                       
                                       <!-- Confirm Password -->
                                       <div class="row">
                                          <label class="col-lg-4 items-label">Confirm Password<span class="dot-input01">:</span></label>
                                          <label class="col-lg-8">
                                             <input type="password" class="form-control form-control-sm" value="{{old('password_confirmation')}}" name="password_confirmation" placeholder="Confirm New Password" minlength="7">
                                             @if ($errors->has('password_confirmation')) 
                                             <p class="help-block">{{ $errors->first('password_confirmation') }}</p>
                                             @endif
                                          </label>
                                       </div>
                                       
                                       <!-- Form Actions -->
                                       <div class="row">
                                          <div class="col-lg-12 text-right">
                                             <a href="{{ route('organization.staff.index') }}" class="btn btn-sm btn-secondary mr-2">
                                                <i class="las la-arrow-left"></i> Back
                                             </a>
                                             <button type="reset" class="btn btn-sm btn-dark mr-2 cancel01">Reset</button>
                                             <button type="submit" class="btn btn-sm btn-primary submit01">Update</button>
                                          </div>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </form>
         </div>
      </div>
   </div>
</div>
@endsection

@push('scripts')
<script src="{{asset('modules/service-engineer/js/lz-string.min.js')}}"></script>
<script src="{!!asset('plugins/bootstrap4-duallistbox/jquery.bootstrap-duallistbox.min.js')!!}"></script>

<script>
   $.ajaxSetup({
     headers: {
         'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
     }
   });

   $(document).ready(function() {
      // Initialize Select2
      $('.select2').select2({ 
         width: '100%', 
         placeholder: "Select an option", 
         allowClear: true 
      });

      // AJAX Select2 for Reporting To
      $('#reporting_to_id').select2({
         width: '100%',
         placeholder: "Search for staff...",
         allowClear: true,
         ajax: {
            url: () => $('#reporting_to_id').data('url'),
            dataType: 'json',
            delay: 250,
            data: params => ({
               search: params.term,
               page: params.page || 1,
               role_id: $('#reporting_role').val()
            }),
            processResults: (data, params) => ({
               results: data.data,
               pagination: { more: !!data.next_page_url }
            }),
            cache: true
         }
      });

      // Image Preview
      $(".imgInp").change(function() {
         $('#'+$(this).data('id')).removeClass('d-none');
         readURL(this);
      });

      // Form Submit
      $('#staffForm').on('submit', function(e) {
         e.preventDefault();
         let formData = new FormData(this);
         let submitBtn = $('.submit01');
         let originalText = submitBtn.html();

         submitBtn.prop('disabled', true).html('<i class="las la-spinner la-spin"></i> Updating...');

         $.ajax({
            url: "{{ route('organization.staff.update', crypt_encrypt($staff->id)) }}",
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
               if (response.status) {
                  toastr.success(response.message, 'Success');
                  setTimeout(() => window.location.href = response.redirect, 1000);
               }
            },
            error: function(xhr) {
               submitBtn.prop('disabled', false).html(originalText);
               if (xhr.status === 422) {
                  let errors = xhr.responseJSON.errors;
                  $('#staffForm .form-control, #staffForm .select2-hidden-accessible').removeClass('is-invalid');
                  $('#staffForm .help-block').text('');
                  $.each(errors, (field, messages) => {
                     let input = $('[name="' + field + '"]');
                     input.addClass('is-invalid');
                     input.closest('.row').find('.help-block').text(messages[0]);
                  });
                  let firstError = $('.is-invalid').first();
                  if (firstError.length) {
                     $('.viewPaneTab').animate({
                        scrollTop: firstError.offset().top - 100
                     }, 500);
                  }
               } else {
                  toastr.error(xhr.responseJSON.message || 'Something went wrong!', 'Error');
               }
            }
         });
      });

      // Reset
      $('.cancel01').on('click', function() {
         $('#staffForm')[0].reset();
         $('#staffForm .form-control, #staffForm .select2-hidden-accessible').removeClass('is-invalid');
         $('#staffForm .help-block').text('');
         $('#imagePreview').addClass('d-none');
         $('.select2').val(null).trigger('change');
         
         // Reset to original values
         $('[name="name"]').val("{{ $staff->name }}");
         $('[name="username"]').val("{{ $staff->username }}");
         $('[name="email"]').val("{{ $staff->email }}");
         $('[name="phone"]').val("{{ $staff->phone }}");
         $('[name="address"]').val("{{ $staff->address }}");
         $('[name="designation_id"]').val("{{ $staff->designation_id }}").trigger('change');
         $('[name="status"]').val("{{ $staff->status }}");
         $('[name="reporting_role"]').val("{{ $staff->reporting_role }}").trigger('change');
         
         @if($staff->reporting_to_id)
            $('#reporting_to_id').html('<option value="{{ crypt_encrypt($staff->reporting_to_id) }}" selected>{{ $staff->reportingManager->name ?? "Not Found" }}</option>').trigger('change');
         @else
            $('#reporting_to_id').val(null).trigger('change');
         @endif
      });
   });

   function readURL(input) {
      if (input.files && input.files[0]) {
         var reader = new FileReader();
         reader.onload = function(e) {
            $('#' + $(input).data('id')).attr('src', e.target.result);
         }
         reader.readAsDataURL(input.files[0]);
      }
   }
</script>
@endpush