@php
    $recordId = $getRecord()->id;
    $isReturn = $getRecord()->is_return ? true : false;
@endphp

<div 
    x-data="{ 
        value: @js($isReturn),
        recordId: @js($recordId),
        saveValue() {
            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: 'is_return',
                    value: this.value
                })
            });
        }
    }"
>
    <!-- Always show Apple-style toggle switch -->
    <div class="flex items-center">
        <button
            @click.stop="value = !value; saveValue();"
            type="button"
            :class="{
                'bg-green-600': !value,
                'bg-yellow-600': value,
                'cursor-pointer': true
            }"
            class="relative inline-flex h-6 w-11 flex-shrink-0 rounded-full border-2 border-transparent transition-all duration-200 ease-in-out focus:outline-none hover:opacity-80"
            :aria-pressed="value.toString()"
            role="switch"
        >
            <span class="sr-only">Toggle purchase/return</span>
            <span
                :class="{
                    'translate-x-5': value,
                    'translate-x-0': !value,
                    'bg-white': true
                }"
                class="pointer-events-none inline-block h-5 w-5 transform rounded-full shadow-lg ring-0 transition-transform duration-200 ease-in-out"
            ></span>
        </button>
        <span 
            class="ml-3 text-sm font-medium"
            :class="{
                'text-green-700': !value,
                'text-yellow-700': value
            }"
            x-text="value ? 'Return' : 'Purchase'"
        ></span>
    </div>
</div>