@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->created_at }}</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>
        @if (auth()->user()->role === 'super_admin' || auth()->user()->role === 'co_admin')
            <td class="border px-2 py-2 text-center w-[100px]">{{ $serviceOrder->branch->name ?? 'N/A' }}</td>
        @endif
        <td class="border px-2 py-2 text-center w-[100px]">{{ $serviceOrder->customer->identity_no ?? 'N/A' }}</td>
        <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>
        <td class="border px-2 py-2 text-center w-[100px]">{{ $serviceOrder->service->name ?? 'N/A' }}</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]">
            {{ number_format((float)($serviceOrder->total_cost - $serviceOrder->invoice->payments->sum('amount')), 2) }}
        </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="">None</option>
                    @foreach($agents as $agent)
                        <option value="{{ $agent->id }}" {{ $serviceOrder->agent_id == $agent->id ? 'selected' : '' }}>{{ $agent->name }}</option>
                    @endforeach
                </select>
            </td>
        @endif
        @php
            $statusColors = [
                'cancelled' => 'text-red-500',
                'completed' => 'text-green-500',
                'hold' => 'text-yellow-500',
                'moktob_amal' => 'text-blue-500',
                'pending' => 'text-gray-500'
            ];
        @endphp
        @if (auth()->user()->role === 'super_admin' || auth()->user()->role === 'co_admin')
            <td class="border px-2 py-2 text-center w-[120px] {{ $statusColors[$serviceOrder->status] ?? '' }}">
                @if ($serviceOrder->is_cancel === false && $serviceOrder->status !== 'cancelled')
                    <span class="text-orange-500">Cancellation Processing</span>
                @elseif (in_array($serviceOrder->status, ['cancelled', 'completed']))
                    <span class="{{ $statusColors[$serviceOrder->status] ?? '' }}">{{ str_replace('_', ' ', ucfirst($serviceOrder->status)) }}</span>
                @else
                    <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 }}"
                            title="Change order status">
                        <option value="">None</option>
                        @foreach($statuses as $status)
                            <option value="{{ $status }}" {{ $serviceOrder->status == $status ? 'selected' : '' }}>
                                {{ str_replace('_', ' ', ucfirst($status)) }}
                            </option>
                        @endforeach
                    </select>
                @endif
            </td>
        @else
            <td class="border px-2 py-2 text-center w-[120px] {{ $statusColors[$serviceOrder->status] ?? '' }}">
                @if ($serviceOrder->is_cancel === false && $serviceOrder->status !== 'cancelled')
                    <span class="text-orange-500">Cancellation Processing</span>
                @elseif (in_array($serviceOrder->status, ['cancelled', 'completed']))
                    <span class="{{ $statusColors[$serviceOrder->status] ?? '' }}">{{ str_replace('_', ' ', ucfirst($serviceOrder->status)) }}</span>
                @else
                    {{ str_replace('_', ' ', ucfirst($serviceOrder->status ?? 'N/A')) }}
                @endif
            </td>
        @endif
        @if (auth()->user()->role === 'super_admin' || auth()->user()->role === 'co_admin')
            <td class="border px-2 py-2 text-center w-[100px] relative">
                <div class="relative">
                <input type="number"
                class="commission-input no-spinner border-gray-300 rounded-md shadow-sm focus:ring-2 focus:ring-indigo-400 focus:border-indigo-500 text-sm w-[80px] text-right mx-auto"
                value="{{ $serviceOrder->agent_commission ? rtrim(rtrim(number_format($serviceOrder->agent_commission, 2, '.', ''), '0'), '.') : '' }}"
                step="0.01"
                min="0"
                max="99999999.99"
                data-order-id="{{ $serviceOrder->id }}"
                data-original-value="{{ $serviceOrder->agent_commission ? rtrim(rtrim(number_format($serviceOrder->agent_commission, 2, '.', ''), '0'), '.') : '' }}"
                aria-label="Agent commission for service order {{ $serviceOrder->id }}"
                placeholder="0">
                    <span class="commission-status hidden absolute right-0 top-1/2 transform -translate-y-1/2 mr-2" aria-live="polite"></span>
                </div>
            </td>
        @endif
        <td class="border px-2 py-2 text-center w-[100px]">{{ $serviceOrder->updated_at ? $serviceOrder->updated_at->format('Y-m-d') : 'N/A' }}</td>
        <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-2 text-center w-[150px]">
            <div class="flex flex-col items-center">
                <input type="text"
                       class="remarks-input border-gray-300 rounded-md shadow-sm focus:ring-2 focus:ring-indigo-400 focus:border-indigo-500 text-sm w-[140px] mx-auto mb-1"
                       value="{{ $serviceOrder->remarks ?? '' }}"
                       data-order-id="{{ $serviceOrder->id }}"
                       aria-label="Remarks for service order {{ $serviceOrder->id }}"
                       placeholder="Enter remarks">
                @if($serviceOrder->remarks_updated_by)
                    <span class="text-xs text-gray-400 font-light">
                        - {{ str_replace('_', ' ', ucfirst($serviceOrder->remarksUpdatedBy->role ?? 'Unknown')) }}
                    </span>
                @endif
            </div>
        </td>
        <td class="border 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>
                @if (auth()->user()->role === 'super_admin')
                    <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>
                @endif
            </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

<style type="text/css">
.no-spinner::-webkit-outer-spin-button,
.no-spinner::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.no-spinner {
    -moz-appearance: textfield;
}
.commission-status.loading {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #4f46e5;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
.commission-status.success::before {
    content: '\2713'; /* Checkmark */
    color: #10b981;
    font-size: 16px;
}
.commission-status.error::before {
    content: '\2717'; /* Cross */
    color: #ef4444;
    font-size: 16px;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Handle remarks updates (unchanged)
    document.querySelectorAll('.remarks-input').forEach(input => {
        input.addEventListener('keyup', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                const orderId = this.dataset.orderId;
                const remarksValue = this.value.trim();
                const submitUrl = `/service-orders/${orderId}/remarks`;
                const formData = new FormData();
                formData.append('_token', document.querySelector('meta[name="csrf-token"]').getAttribute('content'));
                formData.append('remarks', remarksValue);
                fetch(submitUrl, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.message) {
                        this.classList.add('bg-green-100');
                        setTimeout(() => this.classList.remove('bg-green-100'), 2000);
                        console.log(data.message);
                    } else {
                        alert(data.error || 'An error occurred');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Failed to update remarks. Please try again.');
                });
            }
        });
    });
});
</script>