@forelse($serviceOrders as $serviceOrder)
       <tr class="hover:bg-gray-100 relative overflow-visible">
           <td class="border px-2 py-2 text-center w-[60px]">{{ $serviceOrder->id }}</td>
           <td class="border px-2 py-2 text-center w-[70px]">
               @if($serviceOrder->invoice_id)
                   <a href="{{ route('service-orders.show', $serviceOrder) }}" class="text-blue-500 hover:underline">{{ $serviceOrder->invoice_id }}</a>
               @else
                   N/A
               @endif
           </td>
           <td class="border px-2 py-2 text-center w-[100px]">{{ $serviceOrder->service->name ?? 'N/A' }}</td>
           @if (auth()->user()->role === 'super_admin' || auth()->user()->role === 'co_admin')
           <td class="border px-2 py-2 text-center w-[100px]">{{ $serviceOrder->customer->name ?? 'N/A' }}</td>
           <td class="border px-2 py-2 text-center w-[100px]">{{ $serviceOrder->customer->mobile_no ?? 'N/A' }}</td>
           @endif
           <td class="border px-2 py-2 text-center w-[100px]">{{ $serviceOrder->branch->name ?? 'N/A' }}</td>
           @if (auth()->user()->role === 'super_admin' || auth()->user()->role === 'co_admin')
           <td class="border px-2 py-2 text-center w-[140px]">
               <select class="agent-select border-gray-300 rounded-md shadow-sm focus:ring-2 focus:ring-indigo-400 focus:border-indigo-500 text-sm w-[130px] mx-auto" 
                       data-order-id="{{ $serviceOrder->id }}" 
                       data-original-value="{{ $serviceOrder->agent_id ?? '' }}"
                       aria-label="Select agent for service order {{ $serviceOrder->id }}">
                   <option value="">No Agent</option>
                   @foreach($agents as $agent)
                       <option value="{{ $agent->id }}" {{ $serviceOrder->agent_id == $agent->id ? 'selected' : '' }}>{{ $agent->name }}</option>
                   @endforeach
               </select>
           </td>
           <td class="border px-2 py-2 text-center w-[120px] {{ $serviceOrder->status === 'cancelled' ? 'text-red-500' : ($serviceOrder->status === 'completed' ? 'text-green-500' : ($serviceOrder->status === 'hold' ? 'text-yellow-500' : ($serviceOrder->status === 'moktob_amal' ? 'text-blue-500' : ''))) }}">
               <select class="status-select border-gray-300 rounded-md shadow-sm focus:ring-2 focus:ring-indigo-400 focus:border-indigo-500 text-sm w-[110px] mx-auto" 
                       data-order-id="{{ $serviceOrder->id }}" 
                       data-original-value="{{ $serviceOrder->status }}"
                       aria-label="Select status for service order {{ $serviceOrder->id }}">
                   <option value="">Select Status</option>
                   @foreach($statuses as $status)
                       <option value="{{ $status }}" {{ $serviceOrder->status == $status ? 'selected' : '' }}>{{ str_replace('_', ' ', ucfirst($status)) }}</option>
                   @endforeach
               </select>
           </td>
           <td class="border px-2 py-2 text-center w-[100px]">${{ number_format($serviceOrder->total_cost, 2) }}</td>
           <td class="border px-2 py-2 text-center w-[100px]">
               <button class="open-commission-modal bg-blue-500 text-white px-2 py-1 rounded-md hover:bg-blue-600 text-sm" 
                       data-order-id="{{ $serviceOrder->id }}" 
                       data-commission="{{ $serviceOrder->agent_commission }}"
                       aria-label="Set commission for service order {{ $serviceOrder->id }}">
                   Set
               </button>
           </td>           
           <td class="border px-2 py-2 text-center w-[100px]">{{ $serviceOrder->updated_at ? $serviceOrder->updated_at->format('Y-m-d') : 'N/A' }}</td>
           @endif
           <td class="border px-2 py-2 text-center w-[100px] {{ $serviceOrder->deadline && now()->gt($serviceOrder->deadline) && $serviceOrder->status !== 'completed' ? 'text-red-500' : '' }}">
               @if($serviceOrder->deadline)
                   @if($serviceOrder->status === 'completed' && now()->lte($serviceOrder->deadline))
                       <span class="text-green-600 font-bold">Delivered</span>
                   @else
                       @php
                           $daysDiff = floor(abs(now()->diffInDays($serviceOrder->deadline)));
                           $label = $daysDiff . ' days left';
                           $isUrgent = $daysDiff >= 0 && $daysDiff < 7 && now()->diffInDays($serviceOrder->deadline) <= 10;
                       @endphp
                       {{ $serviceOrder->deadline->format('d M Y') }}<br>
                       <span class="{{ $isUrgent ? 'text-red-500' : '' }}">{{ $label }}</span>
                   @endif
               @else
                   N/A
               @endif
           </td>
           <td class="border px-2 py-0 text-center w-[80px] overflow-visible relative">
               <button class="action-toggle text-gray-600 hover:text-gray-800 mx-auto focus:outline-none" aria-label="Toggle actions for service order {{ $serviceOrder->id }}">
                   <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                   </svg>
               </button>
               <div class="action-menu hidden absolute z-50 bg-white border border-gray-200 rounded-md shadow-lg mt-0 right-0 transition-opacity duration-200 min-w-[120px]" style="display: none;">
                   <a href="{{ route('service-orders.show', $serviceOrder) }}" class="px-3 py-2 text-blue-500 hover:bg-blue-100 hover:text-blue-700 text-sm">View</a>
                   <a href="{{ route('service-orders.edit', $serviceOrder) }}" class="px-3 py-2 text-green-500 hover:bg-green-100 hover:text-green-700 text-sm">Edit</a>
                   <form action="{{ route('service-orders.destroy', $serviceOrder) }}" method="POST" class="delete-action inline" data-order-id="{{ $serviceOrder->id }}">
                       @csrf
                       @method('DELETE')
                       <button type="submit" class="px-3 py-2 text-red-500 hover:bg-red-100 hover:text-red-700 text-sm">Delete</button>
                   </form>
               </div>
           </td>
       </tr>
   @empty
       <tr>
           <td colspan="13" class="border px-2 py-2 text-center text-gray-500">No service orders found.</td>
       </tr>
   @endforelse

   <!-- Commission Modal -->
   <div id="commission-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center hidden z-50">
       <div class="bg-white rounded-lg shadow-lg p-6 w-full max-w-md">
           <h2 class="text-lg font-bold text-gray-800 mb-4">Set Agent Commission</h2>
           <form id="commission-form" method="POST" action="">
               @csrf
               <input type="hidden" name="order_id" id="modal-order-id">
               <div class="mb-4">
                   <label for="agent_commission" class="block text-sm font-bold text-gray-600">Agent Commission ($)</label>
                   <input type="number" name="agent_commission" id="agent_commission" step="0.01" min="0" class="mt-1 block w-full border-gray-200 rounded-lg shadow-sm focus:ring-2 focus:ring-indigo-400 focus:border-indigo-500 text-sm" required>
               </div>
               <div class="flex justify-end space-x-2">
                   <button type="button" id="cancel-commission" class="bg-gray-300 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-400">Cancel</button>
                   <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600">Save</button>
               </div>
           </form>
       </div>
   </div>