@php
    $items = $getRecord()->items()->whereIn('current_status', [1, 2, 3])->get();
@endphp

<div class="space-y-1">
    @foreach($items as $item)
        <div class="flex items-center gap-2 text-sm">
            {{-- Status Badge --}}
            <span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset
                @if($item->current_status == 1)
                    bg-red-50 text-red-700 ring-red-600/20 dark:bg-red-500/10 dark:text-red-400 dark:ring-red-500/20
                @elseif($item->current_status == 2)
                    bg-yellow-50 text-yellow-700 ring-yellow-600/20 dark:bg-yellow-500/10 dark:text-yellow-400 dark:ring-yellow-500/20
                @else
                    bg-blue-50 text-blue-700 ring-blue-600/20 dark:bg-blue-500/10 dark:text-blue-400 dark:ring-blue-500/20
                @endif">
                @if($item->current_status == 1)
                    Needs Order
                @elseif($item->current_status == 2)
                    Ordered
                @else
                    Sent to SS
                @endif
                @if($item->supplier)
                    {{ $item->supplier->code }}
                @endif
            </span>

            {{-- B2B Local Delivered Badge --}}
            @if($item->b2b_delivery_model_id > 1)
                <span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset
                    bg-green-50 text-green-700 ring-green-600/20 dark:bg-green-500/10 dark:text-green-400 dark:ring-green-500/20">
                    🚚 B2B Local
                </span>
            @endif

            {{-- Will Call / In Stock GA Badge --}}
            @if($item->b2b_delivery_model_id > 1 && $item->wc_supplier)
                @php
                    $supplierMapWc = [
                        "GALTL01" => "In Stock - GA",
                        "GALTL02" => "KSI Will Call",
                        "GALTL03" => "TYC Will Call",
                        "GALTL04" => "DEPO Will Call"
                    ];
                    $wcLabel = $supplierMapWc[$item->wc_supplier] ?? null;
                @endphp
                @if($wcLabel)
                    <span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset
                        bg-blue-50 text-blue-700 ring-blue-600/20 dark:bg-blue-500/10 dark:text-blue-400 dark:ring-blue-500/20">
                        {{ $wcLabel }}
                    </span>
                @endif
            @endif

            {{-- Part Number --}}
            <span class="text-gray-700 dark:text-gray-300">
                {{ $item->ordered_part ?? 'N/A' }}
            </span>
            
            {{-- Quantity --}}
            <span class="text-gray-500 dark:text-gray-400">
                x{{ $item->qty }}
            </span>
            
            {{-- Auto Fulfill Toggle --}}
            <button 
                onclick="toggleAutoFulfill({{ $item->order_item_id }})"
                data-item-id="{{ $item->order_item_id }}"
                data-auto-fulfill="{{ $item->auto_fulfill_enabled ? 'true' : 'false' }}"
                class="ml-auto px-2 py-1 text-xs rounded transition-colors
                    @if($item->auto_fulfill_enabled)
                        bg-green-600 text-white hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-600
                    @else
                        bg-gray-400 text-white hover:bg-gray-500 dark:bg-gray-600 dark:hover:bg-gray-700
                    @endif">
                Auto
            </button>
            
            {{-- Supplier Dropdown --}}
            <select 
                onchange="updateSupplier({{ $item->order_item_id }}, this.value)"
                class="text-xs rounded border-gray-300 dark:border-gray-700 dark:bg-gray-800 py-1 px-2">
                <option value="">Select...</option>
                @foreach(\App\Models\Supplier::where('is_active', 1)->orderBy('code')->get() as $supplier)
                    <option value="{{ $supplier->supplier_id }}" 
                        {{ $item->supplier_id == $supplier->supplier_id ? 'selected' : '' }}>
                        {{ $supplier->code }}
                    </option>
                @endforeach
            </select>
        </div>
    @endforeach
    
    @if($items->isEmpty())
        <span class="text-gray-500 dark:text-gray-400 text-sm">
            No items pending fulfillment
        </span>
    @endif
</div>

<script>
    function toggleAutoFulfill(itemId) {
        const button = event.target;
        const currentState = button.getAttribute('data-auto-fulfill') === 'true';
        const newState = !currentState;
        
        fetch('/api/items/toggle-auto-fulfill', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || ''
            },
            body: JSON.stringify({
                item_id: itemId,
                enabled: newState
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                button.setAttribute('data-auto-fulfill', newState ? 'true' : 'false');
                if (newState) {
                    button.classList.remove('bg-gray-400', 'hover:bg-gray-500', 'dark:bg-gray-600', 'dark:hover:bg-gray-700');
                    button.classList.add('bg-green-600', 'hover:bg-green-700', 'dark:bg-green-500', 'dark:hover:bg-green-600');
                } else {
                    button.classList.remove('bg-green-600', 'hover:bg-green-700', 'dark:bg-green-500', 'dark:hover:bg-green-600');
                    button.classList.add('bg-gray-400', 'hover:bg-gray-500', 'dark:bg-gray-600', 'dark:hover:bg-gray-700');
                }
            }
        });
    }
    
    function updateSupplier(itemId, supplierId) {
        if (!supplierId) return;
        
        fetch('/api/items/update-supplier', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || ''
            },
            body: JSON.stringify({
                item_id: itemId,
                supplier_id: supplierId
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Update status badge if needed
                window.Livewire.emit('refresh');
            }
        });
    }
</script>