@php
    $recordId = $getRecord()->id;
    $productId = $getRecord()->product_id_raw;
@endphp

<div 
    x-data="{ 
        editing: false,
        value: @js($productId),
        originalValue: @js($productId),
        recordId: @js($recordId),
        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: 'product_id_raw',
                    value: value.toUpperCase()
                })
            }).then(response => {
                if (response.ok) {
                    originalValue = value.toUpperCase();
                    value = value.toUpperCase();
                }
            });
        }
    }"
    x-init="
        window.addEventListener('start-editing-row-{{ $recordId }}', () => {
            editing = true;
            $nextTick(() => {
                if ($refs.input) $refs.input.focus();
            });
        });
        
        window.addEventListener('stop-editing-all', () => {
            if (editing && value !== originalValue) {
                saveValue();
            }
            editing = false;
        });
    "
    @dblclick="
        window.dispatchEvent(new CustomEvent('stop-editing-all'));
        window.dispatchEvent(new CustomEvent('start-editing-row-{{ $recordId }}'));
        editing = true;
    "
    class="font-bold cursor-pointer"
>
    <template x-if="!editing">
        <span x-text="value || '-'"></span>
    </template>
    
    <template x-if="editing">
        <input
            type="text"
            x-model="value"
            @keydown.enter="saveValue(); editing = false;"
            @keydown.escape="value = originalValue; editing = false;"
            @blur="saveValue(); editing = false;"
            @input="value = value.toUpperCase()"
            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="input"
        />
    </template>
</div>