@php
    $locations = \App\Models\Location::where('warehouse_id', $getRecord()->warehouse_id)
        ->pluck('location', 'id')
        ->toArray();
    $currentLocation = $locations[$getRecord()->location_id] ?? 'Default';
@endphp

<div 
    x-data="{ 
        editing: false,
        value: @js($getRecord()->location_id),
        originalValue: @js($getRecord()->location_id),
        locations: @js($locations)
    }"
    x-init="
        $watch('$root.editingRow', (row) => {
            if (row !== '{{ $getRecord()->id }}') {
                if (editing && value !== originalValue) {
                    saveValue();
                }
                editing = false;
            } else {
                editing = true;
            }
        })
    "
    @dblclick="$root.editingRow = '{{ $getRecord()->id }}'; editing = true"
    class="cursor-pointer"
>
    <template x-if="!editing">
        <span>{{ $currentLocation }}</span>
    </template>
    
    <template x-if="editing">
        <select
            x-model="value"
            @change="saveValue(); editing = false; $root.editingRow = null"
            @keydown.escape="value = originalValue; editing = false; $root.editingRow = null"
            class="w-full px-3 py-2 text-base border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500"
            x-ref="select"
            x-init="$nextTick(() => $refs.select.focus())"
        >
            <template x-for="(name, id) in locations" :key="id">
                <option :value="id" x-text="name"></option>
            </template>
        </select>
    </template>
    
    <script>
        function saveValue() {
            if (value === originalValue) return;
            
            fetch('/admin/purchase-orders/{{ $getRecord()->purchase_order_id }}/items/{{ $getRecord()->id }}/update-field', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({
                    field: 'location_id',
                    value: value
                })
            }).then(response => {
                if (response.ok) {
                    originalValue = value;
                    window.Livewire.dispatch('notificationSent', {
                        notification: {
                            title: 'Location updated',
                            style: 'success'
                        }
                    });
                    // Reload to update the display
                    window.location.reload();
                }
            });
        }
    </script>
</div>