@php
    $state = $getState();
    $recordKey = $getRecord()->getKey();
@endphp

<div
    x-data="{
        state: @js($state),
        isLoading: false,
        toggle() {
            if (this.isLoading) return;
            
            this.isLoading = true;
            const newState = !this.state;
            
            $wire.call('updateToggleState', '{{ $recordKey }}', 'is_return', newState)
                .then(() => {
                    this.state = newState;
                    this.isLoading = false;
                })
                .catch(() => {
                    this.isLoading = false;
                    new FilamentNotification()
                        .title('Failed to update')
                        .danger()
                        .send();
                });
        }
    }"
    class="flex items-center"
>
    {{-- Apple-style Toggle Switch --}}
    <button
        @click="toggle"
        :disabled="isLoading"
        type="button"
        role="switch"
        :aria-checked="state.toString()"
        style="position: relative; display: inline-flex; height: 28px; width: 56px; flex-shrink: 0; cursor: pointer; border-radius: 9999px; border: 2px solid transparent; transition: all 200ms ease-in-out;"
        :style="{
            'background-color': state ? '#f59e0b' : '#10b981',
            'opacity': isLoading ? '0.5' : '1',
            'cursor': isLoading ? 'not-allowed' : 'pointer'
        }"
    >
        <span
            aria-hidden="true"
            style="pointer-events: none; display: inline-flex; align-items: center; justify-content: center; height: 24px; width: 24px; border-radius: 9999px; background-color: white; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); transition: transform 200ms ease-in-out;"
            :style="{
                'transform': state ? 'translateX(28px)' : 'translateX(0)'
            }"
        >
            {{-- Shopping Cart Icon for Purchase --}}
            <svg x-show="!state && !isLoading" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" style="width: 14px; height: 14px; color: #10b981;">
                <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
            </svg>
            
            {{-- Return Arrow Icon for Return --}}
            <svg x-show="state && !isLoading" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" style="width: 14px; height: 14px; color: #f59e0b;">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3" />
            </svg>
            
            {{-- Loading indicator --}}
            <svg x-show="isLoading" x-cloak class="animate-spin" style="width: 14px; height: 14px; color: #9ca3af;" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
        </span>
    </button>
</div>