@extends('layouts.horizontal', ['title' => 'Staff', 'topbarTitle' => 'Staff List View'])

@section('css')
@vite(['node_modules/dropzone/dist/dropzone.css'])
@vite(['node_modules/select2/dist/css/select2.min.css'])
@vite(['node_modules/flatpickr/dist/flatpickr.min.css'])

@endsection

@section('content')

<style>
     tr.strike-through > td {text-decoration:line-through !important; color:red;} 
     /* tr.pink > td {background-color: #FDEDEC !important;} */
</style>

<div class="container-fluid">
     <div class="row">
          <div class="col-12">
               <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                    <h4 class="mb-sm-0">Staff List View</h4>
                    <div class="page-title-right">
                         <ol class="breadcrumb m-0">
                         <li class="breadcrumb-item"><a href="javascript: void(0);">HRM</a></li>
                         <li class="breadcrumb-item active">Staff List View</li>
                         </ol>
                    </div>
               </div>
          </div>
     </div>

     <div class="row" >
          <div class="col-12"  >
               <div class="card">                    
                    <div class="card-body">
                         <div class="row mt-0">
                              <div class="col-md-4">
                                   <a href="javascript:void(0);" id="addStaffBtn" class="btn btn-success">
                                        <i class="ti ti-circle-plus fs-20 me-2"></i> Add New
                                   </a>
                              </div>
                              <div class="col-md-4">
                                   <form class="d-flex align-items-start flex-wrap justify-content-sm-end gap-2">
                                        <select class="form-select" id="filterStatus" name="status" onchange="this.form.submit()">
                                             <option {{ $selectedStatus === 'all' ? 'selected' : '' }} value="all">All Status</option>
                                             <option {{ $selectedStatus === 'Y' ? 'selected' : '' }} value="Y">Active</option>
                                             <option {{ $selectedStatus === 'N' ? 'selected' : '' }} value="N">Inactive</option>
                                        </select>
                                   </form>
                              </div>
                              <div class="col-md-4 text-end">
                                        <form class="d-flex align-items-start flex-wrap justify-content-sm-end gap-2">
                                             <!-- Search Input -->
                                             <div class="d-flex align-items-start flex-wrap">
                                             <label for="membersearch-input" class="visually-hidden">Search</label>
                                             <input type="search" class="form-control" id="membersearch-input"
                                                  placeholder="Search...">
                                             </div>

                                        </form>
                              </div>
                         </div>
                    </div>
               </div>
          </div>
     </div>
     <!-- end row -->     
     <div id="staff-list">    
          <!-- list container -->
          <div class="row drag-container list" id="simple-dragula" data-plugin="dragula">
               @php $counter = 1; @endphp
               @foreach($staffMembers as $staff)
               <div class="col-xl-3 col-sm-6">
                    <div class="card text-center">
                         <div class="card-body">
                              <div class="dropdown float-end">
                                   <a href="#" class="text-body" data-bs-toggle="dropdown" aria-expanded="false">
                                        <i class="ti ti-dots-vertical fs-22"></i>
                                   </a>
                                   <div class="dropdown-menu dropdown-menu-end">
                                        <a class="dropdown-item device-management" onclick="openDeviceModal({{ $staff->id_staff }}, '{{ $staff->staff_fullname }}');" id="faceRecognitionDeviceId{{ $staff->id_staff }}" href="#">Face Recognition Device ID</a>
                                        <a class="dropdown-item" href="#">Add Thumb Print</a>
                                   </div>
                              </div>
                              <input type="hidden" class="staff-id" value="{{ $staff->id_staff }}">
                              <img style="cursor:pointer;" data-bs-toggle="tooltip" data-bs-placement="top" title="Change Image" onclick="openImageModal({{ $staff->id_staff }});" 
                                   src="{{ asset('images/staff/' . $staff->staff_image) }}"
                                   class="rounded-circle img-thumbnail avatar-xl mt-1" alt="profile-image">
                              
                              <h4 class="mt-3 mb-1 staff-name">
                              <a data-bs-toggle="tooltip" data-bs-placement="top" title="Click To Edit" href="#" onclick="viewStaff({{ $staff->id_staff }});" 
                                   class="{{ $staff->staff_active == 'Y' ? 'text-success' : 'text-danger' }}">
                                   {{ $staff->id_staff . ' ' . $staff->staff_fullname }}
                              </a>
                              </h4>
                              
                              <p class="text-muted staff-designation">
                              {{ $staff->staff_designation }} <span> | </span>
                              <a href="#" class="text-danger staff-cell">{{ $staff->staff_cell }}</a>
                              </p>
                              
                              <ul class="list-inline mt-4 mb-2">
                              <li class="list-inline-item me-3">
                                   <h5 class="mb-1">{{ $staff->staff_order }}</h5>
                                   <p class="text-muted mb-0">Scheduler Order</p>
                              </li>
                              <li class="list-inline-item">
                                   <input {{ $staff->staff_scheduler == 'On' ? 'checked' : '' }} 
                                             type="checkbox" onclick="updateSchedulerStatus({{ $staff->id_staff }}, this.checked ? 'On' : 'Off');"
                                             data-switch="{{ $staff->staff_active == 'Y' ? 'success' : 'danger' }}"
                                             class="form-check-input switch"
                                             id="switch2{{ $staff->id_staff }}">
                                   <label data-bs-toggle="tooltip" data-bs-placement="top" title="Scheduler Status" for="switch2{{ $staff->id_staff }}" data-on-label="On" data-off-label="Off"></label>
                                   <p class="{{ $staff->staff_active == 'Y' ? 'text-success' : 'text-danger' }} mb-0">
                                        {{ $staff->staff_active == 'Y' ? 'Active' : 'Inactive' }}
                                   </p>
                              </li>
                              </ul>
                         </div>
                    </div>
               </div>
               @php $counter++; @endphp
               @endforeach
          </div>
          <!-- end row -->
     </div>
   
     {{-- Modal --}}
     <div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-lg">
               <div class="modal-content">
                    <div class="modal-header">
                         <h5 class="modal-title" id="imageModalLabel">Select or Upload Image</h5>
                         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form id="staffDropzone" class="dropzone"
                              data-action="{{ route('staff.uploadimage') }}"
                              data-preview-base="{{ asset('images/staff') }}">
                              @csrf
                         <div class="modal-body">
                              <h6>Choose Existing Image:</h6>
                                   <input type="hidden" id="image_staff_id" name="id_staff">
                                   <div id="existingImages" class="d-flex flex-wrap gap-2 mb-3" style="max-height: 300px; overflow-y: auto;">
                                        <!-- Existing images will be loaded here -->
                                   </div>
                                   
                                   <input type="hidden" id="existing_image" name="existing_image">
                                   <h6>Or Upload New Image:</h6>
                                   <div class="dropzone-previews" id="uploadPreviewTemplate"></div>
                                   <div class="dz-message needsclick">
                                        <i class="ti ti-cloud-upload h1 text-muted"></i>
                                        <h3>Drop files here or click to upload.</h3>
                                        <span class="text-muted fs-13">(This is your dropzone. Selected files are
                                             <strong>stored</strong> on the server.)</span>
                                   </div>
                                   <input type="hidden" name="staff_image" id="staff_image">
                                   <div id="selectedPreview" class="mt-3"></div>
                              
                         </div>
                         <div class="modal-footer">
                              <button type="submit" class="btn btn-secondary" data-bs-dismiss="modal">Done</button>
                         </div>
                    </form>
               </div>
          </div>
     </div>
     <!-- end modal -->

     {{-- Profile Modal --}}
     <div class="modal fade" id="profileModal" tabindex="-1" aria-labelledby="profileModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-fullscreen">
               <form id="staffProfileForm">
               <div class="modal-content">
                    <div class="modal-header">
                         <h5 class="modal-title" id="profileModalLabel">Staff Profile</h5>
                         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
               
                    <div class="modal-body">
                         <!-- Profile content goes here -->
                         <div class="row"> 
                              <div class="col-md-2">
                                   <img src="" id="profileStaffImage" 
                                        class="img-fluid rounded-circle mt-2" alt="profile-image">
                              </div> 
                              <div class="col-md-10 mb-3">
                                   <h5>Personal Information</h5>    
                                   <div class="row">
                                        <div class="col-md-3">
                                             <label for="profileStaffId" class="form-label">Staff ID</label>
                                             <input type="text" id="profileStaffId" name="id_staff" class="form-control" readonly>
                                        </div>
                                        <div class="col-md-3">
                                             <label for="profileStaffFirstName" class="form-label">First Name</label>
                                             <input type="text" id="profileStaffFirstName" name="staff_firstname" class="form-control">
                                        </div>
                                        <div class="col-md-3">
                                             <label for="profileStaffLastName" class="form-label">Last Name</label>
                                             <input type="text" id="profileStaffLastName" name="staff_lastname" class="form-control">                                   
                                        </div>
                                        <div class="col-md-3">
                                             <label for="profileStaffFullName" class="form-label">Full Name</label>
                                             <input type="text" id="profileStaffFullName" name="staff_fullname" class="form-control">                                   
                                        </div>
                                   </div>
                                   <div class="row">
                                        <div class="col-md-3">
                                             <label for="profileStaffDesignation" class="form-label">Designation</label>
                                             <input type="text" id="profileStaffDesignation" name="staff_designation" class="form-control">
                                        </div>
                                        <div class="col-md-3">
                                             <label for="profileStaffCell" class="form-label">Cell</label>
                                             <input type="text" id="profileStaffCell" name="staff_cell" class="form-control">
                                        </div>
                                        <div class="col-md-3">
                                             <label for="profileStaffPhone1" class="form-label">Phone 1</label>
                                             <input type="text" id="profileStaffPhone1" name="staff_phone1" class="form-control">
                                        </div>
                                        <div class="col-md-3">
                                             <label for="profileStaffPhone2" class="form-label">Phone 2</label>
                                             <input type="text" id="profileStaffPhone2" name="staff_phone2" class="form-control">
                                        </div>
                                   </div>
                                   <div class="row">
                                        <div class="col-md-3">
                                             <label for="profileStaffAddress" class="form-label">Address</label>
                                             <input type="text" id="profileStaffAddress" name="staff_address" class="form-control">
                                        </div>
                                        <div class="col-md-3">
                                             <label for="profileStaffEmail" class="form-label">Email</label>
                                             <input type="email" id="profileStaffEmail" name="staff_email" class="form-control">
                                        </div>
                                        <div class="col-md-3">
                                             <label for="profileStaffFloor" class="form-label">Floor</label>
                                             <select id="profileStaffFloor" name="staff_floor" class="form-select" >
                                             <option value="">Select Floor</option>
                                             @foreach($business_floors as $floor)
                                                  <option value="{{ $floor->id_business_floors }}">{{ $floor->floor_name }}</option>
                                             @endforeach
                                             </select>
                                        </div>
                                        <div class="col-md-3">
                                             <label for="profileStaffDepartment" class="form-label">Department</label>
                                             <input type="text" id="profileStaffDepartment" name="staff_department" class="form-control" >
                                        </div>
                                   </div>
                                   <div class="row">
                                        <div class="col-md-3">
                                             <label for="profileStaffDateOfBirth" class="form-label">Date of Birth</label>
                                             <input type="date" id="profileStaffDateOfBirth" name="date_of_birth" class="form-control">
                                        </div>
                                        <div class="col-md-3">
                                             <label for="profileStaffNIC" class="form-label">NIC</label>
                                             <input type="text" id="profileStaffNIC" name="staff_nic" class="form-control">
                                        </div>
                                   </div>
                         </div>
                         <div class="row mt-3 border-top pt-3">
                              <h5>Work Schedule</h5>
                              <div class="col-md-1">
                                   <label for="profileStaffEmployeeID" class="form-label">Employee ID</label>
                                   <input type="text" id="profileStaffEmployeeID" name="staff_edit" class="form-control">
                              </div>
                              <div class="col-md-1">
                                   <label for="profileStaffSchedulerOrder" class="form-label">Scheduler#</label>
                                   <input type="text" id="profileStaffSchedulerOrder" name="staff_order" class="form-control" readonly>
                              </div>
                              <div class="col-md-2">
                                   <label for="profileStaffWeeklyDayOff" class="form-label">Weekly Days Off</label>
                                   <select id="profileStaffWeeklyDayOff" name="week_days_off[]" multiple class="form-control">
                                        <option value="Sat">Saturday</option>
                                        <option value="Sun">Sunday</option>
                                        <option value="Mon">Monday</option>
                                        <option value="Tue">Tuesday</option>
                                        <option value="Wed">Wednesday</option>
                                        <option value="Thu">Thursday</option>
                                        <option value="Fri">Friday</option>
                                   </select>
                              </div>
                              <div class="col-md-1">
                                   <label for="profileStaffWorkMin" class="form-label">Minutes/Day</label>
                                   <input type="number" id="profileStaffWorkMin" name="staff_work_min" class="form-control numeric">
                              </div>
                              <div class="col-md-2">
                                   <label for="profileStaffDayStartTime" class="form-label">Day Start Time</label>
                                   <input type="time" id="profileStaffDayStartTime" name="day_start_time" class="form-control">
                              </div>
                              <div class="col-md-2">
                                   <label for="profileStaffDayEndTime" class="form-label">Day End Time</label>
                                   <input type="time" id="profileStaffDayEndTime" name="day_end_time" class="form-control">
                              </div>
                              <div class="col-md-2">
                                   <label for="profileStaffDeductionPolicy" class="form-label">Deduction Policy</label>
                                   <select id="profileStaffDeductionPolicy" name="deduction_policy" class="form-select">
                                        <option value="none">Select Policy</option>
                                        @foreach($deductionPolicies as $policy)
                                        <option value="{{ $policy->id_deduction_policy }}">{{ $policy->deduction_policy }}</option>
                                        @endforeach
                                   </select>
                              </div>
                              <div class="col-md-1">
                                   <label for="profileStaffScheduler" class="form-label">Time Out</label>
                                   <input type="time" id="profileStaffTimeOut" name="auto_time_out" class="form-control">
                              </div>
                         </div>
                         <div class="row mt-3 border-top pt-3">
                              <h5>Salary & Commissions</h5>
                              <div class="col-md-2">
                                   <label for="profileStaffSalaryType" class="form-label">Salary Type</label>
                                   <select id="profileStaffSalaryType" name="salary_type" class="form-select">
                                   <option value="monthly">Monthly</option>
                                   <option value="weekly">Weekly / Hourly</option>
                                   <option value="daily">Daily</option>
                                   </select>
                              </div>
                              <div class="col-md-1">
                                   <label for="profileStaffSalary" class="form-label">Salary</label>
                                   <input type="text" id="profileStaffSalary" name="staff_salary" class="form-control numeric">
                              </div>
                              <div class="col-md-1">
                                   <label for="profileStaffSalaryMonthlyTax" class="form-label decimal">Monthly Tax</label>
                                   <input type="text" id="profileStaffSalaryMonthlyTax" name="salary_monthly_tax" class="form-control numeric">
                              </div>
                              <div class="col-md-2">
                                   <label for="profileStaffSalaryProvidentFund" class="form-label decimal">Provident Fund (%)</label>
                                   <input type="text" id="profileStaffSalaryProvidentFund" name="provident_fund_rate" class="form-control decimal">
                                   <small class="form-text text-muted">Enter provident fund percentage</small>
                              </div>
                              <div class="col-md-2">
                                   <label for="profileStaffCommissionMode" class="form-label">Commission Mode</label>
                                   <select id="profileStaffCommissionMode" name="commission_mode" class="form-select">
                                        <option value="Services">Service Based</option>
                                        <option value="MinAmount">Min. Amount</option>
                                        <option value="Target">Fixed Target</option>
                                   </select>
                                   <small class="form-text text-muted">Min. Amount Removes Commission if Not Achieved.</small>
                              </div>
                              <div class="col-md-2">
                                   <label for="profileStaffCommissionTarget"  class="form-label">Commission Target</label>
                                   <input type="text" id="profileStaffCommissionTarget" name="commission_target" class="form-control numeric">
                                   <small class="form-text text-muted">Enter target / Min. Amount for commission</small>
                              </div>
                              <div class="col-md-2">
                                   <label for="profileStaffSalaryCommission" class="form-label">Commission (%)</label>
                                   <input type="text" id="profileStaffSalaryCommission" name="commission_percentage" class="form-control decimal">
                                   <small class="form-text text-muted">Commission percentage on Achieving Target</small>
                              </div>
                         </div>
                         <div class="row mt-3 border-top pt-3">
                              <h5>Contract Details</h5>
                              <div class="row">
                                   <div class="col-md-2">
                                        <label for="profileStaffContractType" class="form-label">Contract Type</label>
                                        <select id="profileStaffContractType" name="contract_type" class="form-select">
                                        <option value="Full Time">Full Time</option>
                                        <option value="Part Time">Part Time</option>
                                        <option value="Contractor">Contractor</option>
                                        </select>
                                   </div>
                                   <div class="col-md-2">
                                        <label for="profileStaffContractStart" class="form-label">Contract Start Date</label>
                                        <input type="date" id="profileStaffContractStart" name="staff_date_of_joining" class="form-control">
                                        <small class="form-text text-muted">Select the start date of the contract</small>
                                   </div>
                                   <div class="col-md-2">
                                        <label for="profileStaffContractEnd" class="form-label">Contract Validity</label>
                                        <input type="date" id="profileStaffContractEnd" name="contract_validity" class="form-control">
                                        <small class="form-text text-muted">Select the end date of the contract</small>
                                   </div>
                                   <div class="col-md-2">
                                        <label for="profileStaffNextOfKin" class="form-label">Next Of Kin</label>
                                        <input type="text" id="profileStaffNextOfKin" name="next_of_kin_name" class="form-control">
                                        <small class="form-text text-muted">Enter the name of the next of kin</small>
                                   </div>
                                   <div class="col-md-2">
                                        <label for="profileStaffNextOfKinContact" class="form-label">Next Of Kin Contact</label>
                                        <input type="text" id="profileStaffNextOfKinContact" name="next_of_kin_number" class="form-control">
                                        <small class="form-text text-muted">Enter the contact information of the next of kin</small>
                                   </div>
                              </div>
                              <div class="row">
                                   <div class="col-md-4">
                                        <label for="profileStaffBank" class="form-label">Bank Name</label>
                                        <input type="text" id="profileStaffBank" name="staff_bank" class="form-control">
                                        <small class="form-text text-muted">Enter the name of the bank</small>
                                   </div>
                                   <div class="col-md-4">
                                        <label for="profileStaffBankAccountNumber" class="form-label">Bank Account Number</label>
                                        <input type="text" id="profileStaffBankAccountNumber" name="staff_bank_account_number" class="form-control">
                                        <small class="form-text text-muted">Enter the bank account number</small>
                                   </div>
                                   <div class="col-md-4">
                                        <label for="profileStaffBankAccountTitle" class="form-label">Bank Account Title</label>
                                        <input type="text" id="profileStaffBankAccountTitle" name="staff_bank_account_title" class="form-control">
                                        <small class="form-text text-muted">Enter the name of the bank account title</small>
                                   </div>
                              </div>
                         </div>
                         <div class="row mt-3 mb-3 border-top pt-3">
                              <div class="col-md-8">
                                   
                              </div>
                              <div class="col-md-2">
                                   <label for="profileStaffScheduler" class="form-label">FCM ID</label>
                                   <input type="text" id="profileStaffFCMID" name="fcm_id" class="form-control" readonly>
                                   <small class="form-text text-muted">Firebase Cloud Messaging ID</small>
                              </div>
                              <div class="col-md-2 float-end">
                                   <label for="profileStaffActive" class="form-label">Active</label>
                                   <select id="profileStaffActive" name="staff_active" class="form-select">
                                   <option value="Y">Yes</option>
                                   <option value="N">No</option>
                                   </select>
                              </div>
                         </div>
                    </div>
                    <div class="modal-footer">
                         <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                         <button type="submit" class="btn btn-primary">Save changes</button>
                    </div>
               
               </div>
               </form>
          </div>
     </div>
     <!-- end modal -->

     
</div>
{{-- Device Modal --}}
     <div class="modal fade" id="deviceStaffModal" tabindex="-1" aria-hidden="true">>
          <div class="modal-dialog modal-lg">
               <div class="modal-content">
                    <div class="modal-header">
                         <h5 class="modal-title" id="deviceStaffModalLabel">Staff Device Management</h5>
                         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                         <!-- Device content goes here -->
                         <p>Device management functionality.</p>
                         <div class="row">
                              <div class="col-md-6">
                                   <input type="hidden" id="deviceAssignmentStaffID" name="id_staff">
                                   <input type="hidden" id="deviceAssignmentStaffName" name="staff_name">
                                   <input type="hidden" id="id_face_recognition_device_staff" name="id_face_recognition_device_staff">
                                   <label for="deviceSelect" class="form-label">Select Device</label>
                                   <select id="deviceSelect" name="device_id" class="form-select">
                                        <option value="">Select a device</option>
                                        @foreach($faceRecognitionDevices as $device)
                                             <option value="{{ $device->id_face_recognition_devices }}">{{ $device->device_name }} </option>
                                        @endforeach
                                   </select>
                              </div>
                              <div class="col-md-6">
                                   <label for="deviceStaffID" class="form-label">ID On Device</label>
                                   <input type="text" id="deviceStaffID" name="device_staff_id" class="form-control">
                              </div>
                         </div>
                    </div>
                    <div class="modal-footer">
                         <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                         <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
               </div>
          </div>
     </div>
     <!-- end modal -->
@endsection

@section('scripts')

<script>

     document.addEventListener("DOMContentLoaded", function () {
          
          //add search functionality to staff list using membersearch-input and list.js
          var options = {
               valueNames: [ 'staff-name', 'staff-designation', 'staff-cell' ]
          };

          var staffList = new List('staff-list', options);
          document.getElementById('membersearch-input').addEventListener('keyup', function() {
               var searchString = this.value.toLowerCase();
               staffList.search(searchString);
          });

          // Initialize Select2 for the day off dropdown
          $('#profileStaffWeeklyDayOff').select2({
               placeholder: "Select days off",
               allowClear: true
          });

          // Disable autoDiscover so Dropzone doesn’t try to bind twice
          Dropzone.autoDiscover = false;

          // Initialize Dropzone manually
          let staffDropzone = new Dropzone("#staffDropzone", {
               url: document.getElementById('staffDropzone').dataset.action, 
               paramName: "file", // field name sent to server
               maxFilesize: 2, // MB
               acceptedFiles: ".jpg,.jpeg,.png,.gif",
               addRemoveLinks: true,
               dictDefaultMessage: `
                    <i class="ti ti-cloud-upload h1 text-muted"></i>
                    <h3>Drop files here or click to upload.</h3>
               `,
               init: function () {
                    this.on("success", function (file, response) {
                         // Save filename into hidden input
                         document.getElementById('staff_image').value = response.filename;

                         // Show preview
                         document.getElementById('selectedPreview').innerHTML =
                              `<img src="${document.getElementById('staffDropzone').dataset.previewBase}/${response.filename}" width="120" class="border rounded">`;
                    });

                    this.on("error", function (file, errorMessage) {
                         console.error("Dropzone upload error:", errorMessage);
                    });
               }
          });
          //initialize tooltips
          var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
          var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl)
          })
     });

     // Load existing images when modal opens
    document.getElementById('imageModal').addEventListener('show.bs.modal', function () {
    fetch("{{ route('staff.existing_images') }}")
        .then(res => {
            if (!res.ok) throw new Error("Network response was not ok " + res.statusText);
            return res.json();
        })
        .then(images => {
            //console.log("Loaded images:", images);  // DEBUG
            let container = document.getElementById('existingImages');
            container.innerHTML = "";

            if (!images.length) {
                container.innerHTML = "<p class='text-muted'>No images found</p>";
                return;
            }

            images.forEach(url => {
                let filename = url.split('/').pop();
                let img = document.createElement('img');
                img.src = url;
                img.dataset.filename = filename;
                img.style.width = "100px";
                img.style.height = "100px";
                img.style.objectFit = "cover";
                img.style.cursor = "pointer";
                img.classList.add("border", "rounded", "m-1");

                img.addEventListener('click', function() {
                    document.querySelectorAll('#existingImages img').forEach(i => i.style.border = "1px solid #ddd");
                    this.style.border = "3px solid blue";

                    document.getElementById('existing_image').value = this.dataset.filename;
                    document.getElementById('selectedPreview').innerHTML = 
                        `<img src="${url}" width="120" class="border rounded">`;
                });

                container.appendChild(img);
            });
        })
        .catch(err => console.error("Image fetch error:", err));
     });


     // Submit form via AJAX
     document.getElementById('staffDropzone').addEventListener('submit', function(e) {
          e.preventDefault();
          let formData = new FormData(this);

          fetch("{{ route('staff.update_image') }}", {
               method: "POST",
               headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'},
               body: formData
          })
          .then(res => res.json())
          .then(data => {
               if(data.success) {
                    
                   window.location.reload();
               }
          });
     });

     function openImageModal(staffid) {
          document.getElementById('image_staff_id').value = staffid;
          document.getElementById('existing_image').value = "";
          document.getElementById('staff_image').value = "";
          document.getElementById('selectedPreview').innerHTML = "";
          var myModal = new bootstrap.Modal(document.getElementById('imageModal'));
          myModal.show();
     }

     document.addEventListener("DOMContentLoaded", function() {
          // Select all containers with the class
          var containers = Array.from(document.querySelectorAll('.drag-container'));
          //console.log('Found containers:', containers);
          
          // Init Dragula
          var drake = dragula(containers);

          drake.on('drop', function (el, target, source, sibling) {
              // console.log("Dropped:", el, "into:", target);
               // Your function here
               let order = Array.from(target.children).map((child, index) => ({
                    id_staff: child.querySelector('input.staff-id').value,
                    staff_order: index + 1
               }));
              // console.log("New order:", order); // DEBUG
               // Send order to server
               fetch("{{ route('staff.update_order') }}", {
                    method: "POST",
                    headers: {
                         'Content-Type': 'application/json',
                         'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({ order })
               })
               .then(res => res.json())
               .then(data => {
                    if (data.success) {
                        // console.log("Order updated successfully:", data);
                         toastr.success('Staff order updated successfully.');
                         window.location.reload();

                    } else {
                        // console.error("Error updating order:", data);
                         toastr.error('Error updating staff order.' + (data.message ? data.message : ''));
                    }
               });
          });
     });

     function viewStaff(staffId) {
          let id = parseInt(staffId);
          if (isNaN(id) || id <= 0) {
               toastr.error('Invalid staff ID.');
               return;
          } 
          // Fetch staff details via AJAX
          let url = `{{ route('staff.get_staff', ['id' => 'ID_PLACEHOLDER']) }}`;
          url = url.replace('ID_PLACEHOLDER', id);
          fetch(url)
            .then(res => res.json())
            .then(data => {
              // console.log("Fetched staff data:", data); // DEBUG
               if (!data.success) {
                    //console.error("Error fetching staff details:", data);
                    toastr.error('Error fetching staff details.');
                    return;
               }
               data = data.data; // Extract staff data
                // Populate modal fields
               document.getElementById('profileStaffId').value = data.id_staff;
               document.getElementById('profileStaffImage').src = `{{ asset('images/staff/') }}/${data.staff_image}`;
               document.getElementById('profileStaffFirstName').value = data.staff_firstname;
               document.getElementById('profileStaffLastName').value = data.staff_lastname;
               document.getElementById('profileStaffDesignation').value = data.staff_designation;
               document.getElementById('profileStaffCell').value = data.staff_cell;
               document.getElementById('profileStaffEmail').value = data.staff_email;
               document.getElementById('profileStaffPhone1').value = data.staff_phone1;
               document.getElementById('profileStaffPhone2').value = data.staff_phone2;
               document.getElementById('profileStaffFullName').value = data.staff_fullname;
               document.getElementById('profileStaffFloor').value = data.floor;
               document.getElementById('profileStaffDepartment').value = data.staff_department;
               document.getElementById('profileStaffAddress').value = data.staff_address;
               document.getElementById('profileStaffDateOfBirth').value = data.date_of_birth ? data.date_of_birth : '';
               document.getElementById('profileStaffNIC').value = data.staff_cnic;

               document.getElementById('profileStaffActive').value = data.staff_active;             
               document.getElementById('profileStaffEmployeeID').value = data.staff_eid;

               var offdays = data.week_day_off ? data.week_day_off.split(',') : [];
               //trim spaces
               offdays = offdays.map(day => day.trim());
              // console.log("Parsed off days:", offdays); // DEBUG
               //select multiple options in select2
               $('#profileStaffWeeklyDayOff').val(offdays).trigger('change');
               
               document.getElementById('profileStaffSchedulerOrder').value = data.staff_order;
               document.getElementById('profileStaffWorkMin').value = Math.floor(data.staff_work_min);
               document.getElementById('profileStaffDayStartTime').value = data.day_start_time;
               document.getElementById('profileStaffDayEndTime').value = data.day_end_time;
               document.getElementById('profileStaffDeductionPolicy').value = data.deduction_policy;
               document.getElementById('profileStaffTimeOut').value = data.auto_time_out;

               document.getElementById('profileStaffSalaryType').value = data.salary_type;
               document.getElementById('profileStaffSalary').value = data.staff_salary;
               document.getElementById('profileStaffSalaryMonthlyTax').value = data.salary_monthly_tax;
               document.getElementById('profileStaffSalaryProvidentFund').value = data.provident_fund_rate.toFixed(2);

               document.getElementById('profileStaffCommissionMode').value = data.commission_mode;
               document.getElementById('profileStaffSalaryCommission').value = data.staff_commission_perc;
               document.getElementById('profileStaffCommissionTarget').value = data.commission_target;

               document.getElementById('profileStaffContractType').value = data.contract_type;
               document.getElementById('profileStaffContractStart').value = data.join_date ? data.joining_date : '';
               document.getElementById('profileStaffContractEnd').value = data.contract_validity ? data.contract_validity : '';
               document.getElementById('profileStaffNextOfKin').value = data.next_of_kin_name;
               document.getElementById('profileStaffNextOfKinContact').value = data.next_of_kin_number;
               document.getElementById('profileStaffBank').value = data.staff_bank;
               document.getElementById('profileStaffBankAccountNumber').value = data.staff_bank_account;
               document.getElementById('profileStaffBankAccountTitle').value = data.staff_bank_account_title;
               document.getElementById('profileStaffFCMID').value = data.fcm_id;

                // Show modal
                var profileModal = new bootstrap.Modal(document.getElementById('profileModal'));
                profileModal.show();
          })
          .catch(err => console.error("Error fetching staff details:", err));
     }

     //update staff details
     document.getElementById('staffProfileForm').addEventListener('submit', function(e) {
          let id_staff = document.getElementById('profileStaffId').value;
          if(!id_staff) {
               // New staff
               saveNewStaff(e);
               return;
          }
          e.preventDefault();
          let formData = new FormData(this);

          fetch("{{ route('staff.update') }}", {
               method: "POST",
               headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'},
               body: formData
          })
          .then(res => res.json())
          .then(data => {
               if(data.success) {
                    //close modal
                    var profileModalEl = document.getElementById('profileModal');
                    var profileModal = bootstrap.Modal.getInstance(profileModalEl);
                    profileModal.hide();
                    toastr.success('Staff details updated successfully.');
                    window.location.reload();
               } else {
                    //close modal
                    var profileModalEl = document.getElementById('profileModal');
                    var profileModal = bootstrap.Modal.getInstance(profileModalEl);
                    profileModal.hide();
                    toastr.error('Error updating staff details! ' + (data.message ? data.message : ''));
               }
          });
     });

     //Add new staff
     document.getElementById('addStaffBtn').addEventListener('click', function() {
          // Clear form
          document.getElementById('staffProfileForm').reset();
          document.getElementById('profileStaffId').value = '';
          document.getElementById('profileStaffImage').src = '{{ asset('images/staff/nu.png') }}';
          document.getElementById('profileStaffSchedulerOrder').value = '0';
          document.getElementById('profileStaffWorkMin').value = '480';
          document.getElementById('profileStaffActive').value = 'Y';
          document.getElementById('profileStaffSalaryType').value = 'monthly';
          document.getElementById('profileStaffSalary').value = '0';
          document.getElementById('profileStaffCommissionMode').value = 'Services';
          document.getElementById('profileStaffDeductionPolicy').value = '1';
          document.getElementById('profileStaffCommissionTarget').value = '0';
          document.getElementById('profileStaffSalaryProvidentFund').value = '0.00';
          document.getElementById('profileStaffSalaryMonthlyTax').value = '0';
          document.getElementById('profileStaffSalaryCommission').value = '0.00';
          document.getElementById('profileStaffContractType').value = 'Full Time';
          document.getElementById('profileStaffTimeOut').value = '';
          
          $('#profileStaffWeeklyDayOff').val([]).trigger('change');

          // Show modal
          var profileModal = new bootstrap.Modal(document.getElementById('profileModal'));
          profileModal.show();
     });

     //Save New Staff
     function saveNewStaff(e) {
          e.preventDefault();
          let StaffForm = document.getElementById('staffProfileForm');
          let formData = new FormData(StaffForm);

          fetch("{{ route('staff.store') }}", {
               method: "POST",
               headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'},
               body: formData
          })
          .then(res => res.json())
          .then(data => {
               if(data.success) {
                    //close modal
                    var profileModalEl = document.getElementById('profileModal');
                    var profileModal = bootstrap.Modal.getInstance(profileModalEl);
                    profileModal.hide();
                    toastr.success('New staff added successfully.');
                    window.location.reload();
               } else {
                    //close modal
                    // var profileModalEl = document.getElementById('profileModal');
                    // var profileModal = bootstrap.Modal.getInstance(profileModalEl);
                    // profileModal.hide();
                    toastr.error('Error adding new staff! ' + (data.message ? data.message : ''));
               }
          });
     };

     function updateSchedulerStatus(staffId, status) {
          fetch("{{ route('staff.update_scheduler_status') }}", {
               method: "POST",
               headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
               },
               body: JSON.stringify({ id_staff: staffId, staff_scheduler: status })
          })
          .then(res => res.json())
          .then(data => {
               if(data.success) {
                    toastr.success('Staff schedule updated successfully.');
                    window.location.reload();
               } else {
                    toastr.error('Error updating staff schedule! ' + (data.message ? data.message : ''));
               }
          });
     }

     function openDeviceModal(id_staff, staff_name) {
          
          // Fetch existing device assignment
          fetch(`/staff/device_assignment/${id_staff}`)
               .then(res => res.json())
               .then(data => {
                    console.log("Fetched device assignment:", data); // DEBUG
                    if(data.success && data.data) {
                         document.getElementById('id_face_recognition_device_staff').value = data.data.id_face_recognition_device_staff;
                         // Populate fields
                         document.getElementById('deviceStaffID').value = data.data.device_staff_id;
                         document.getElementById('deviceSelect').value = data.data.device_id;
                    } else {
                         document.getElementById('id_face_recognition_device_staff').value = "";
                         document.getElementById('deviceStaffID').value = "";
                         document.getElementById('deviceSelect').value = "";
                    }
               });

          var currentModal = bootstrap.Modal.getInstance(document.getElementById('otherModal'));
          if (currentModal) currentModal.hide();
         
          document.getElementById('deviceAssignmentStaffID').value = id_staff;
          document.getElementById('deviceAssignmentStaffName').value = staff_name;
          
          // Close any open dropdowns
          document.querySelectorAll('.dropdown-menu.show').forEach(menu => {
               bootstrap.Dropdown.getInstance(menu)?.hide();
          });
          
          // Defer modal show until after Bootstrap dropdown closes
          setTimeout(function() {
               const el = document.getElementById("deviceStaffModal");
               const deviceModal = new bootstrap.Modal(el);
               deviceModal.show();
          }, 200); // 150–200ms works well
     }

     //Save the device assignment
     document.querySelector('#deviceStaffModal .btn-primary').addEventListener('click', function() {
          let id_face_recognition_device_staff = document.getElementById('id_face_recognition_device_staff').value;
          let id_staff = document.getElementById('deviceAssignmentStaffID').value;
          let device_id = document.getElementById('deviceSelect').value;
          let device_staff_id = document.getElementById('deviceStaffID').value;
          let s_name = document.getElementById('deviceAssignmentStaffName').value;

          fetch("{{ route('staff.save_device_assignment') }}", {
               method: "POST",
               headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
               },
               body: JSON.stringify({ id_face_recognition_device_staff, id_staff, device_id, device_staff_id, s_name })
          })
          .then(res => res.json())
          .then(data => {
               if(data.success) {
                    //close modal
                    var deviceModalEl = document.getElementById('deviceStaffModal');
                    var deviceModal = bootstrap.Modal.getInstance(deviceModalEl);
                    deviceModal.hide();
                    toastr.success('Device assignment updated successfully.');
                    window.location.reload();
               } else {
                    //close modal
                    var deviceModalEl = document.getElementById('deviceStaffModal');
                    var deviceModal = bootstrap.Modal.getInstance(deviceModalEl);
                    deviceModal.hide();
                    toastr.error('Error updating device assignment! ' + (data.message ? data.message : ''));
               }
          });
     });

</script>
@endsection