@php
    /** @var \Filament\Infolists\Components\ImageEntry $entry */
    $url = $getState(); // receipt_url
@endphp

<x-dynamic-component :component="$getEntryWrapperView()" :entry="$entry">
    @if ($url)
        <div x-data="{ open: false }" class="space-y-2">
            {{-- Receipt thumbnail --}}
            <div class="inline-block cursor-pointer" @click="open = true">
                <img
                    src="{{ $url }}"
                    alt="Receipt"
                    class="max-h-48 rounded border border-gray-200 object-contain shadow-sm w-auto
                           hover:shadow-md transition-shadow duration-150
                           dark:border-gray-600"
                >
            </div>

            {{-- Action buttons --}}
            <div class="flex items-center gap-2">
                <button
                    type="button"
                    class="inline-flex items-center gap-1 rounded-md border px-2 py-1 text-xs font-medium
                           border-gray-300 bg-white text-gray-700 hover:bg-gray-50 hover:text-gray-900
                           dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700"
                    @click="open = true"
                >
                    <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                        <path d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
                        <path d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
                    </svg>
                    <span>{{ __('View') }}</span>
                </button>

                <a
                    href="{{ $url }}"
                    download
                    class="inline-flex items-center gap-1 rounded-md border px-2 py-1 text-xs font-medium
                           border-gray-300 bg-white text-gray-700 hover:bg-gray-50 hover:text-gray-900
                           dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700"
                >
                    <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                        <path d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
                    </svg>
                    <span>{{ __('Download') }}</span>
                </a>
            </div>

            {{-- Fullscreen modal --}}
            <div
                x-show="open"
                x-cloak
                x-transition:enter="transition ease-out duration-200"
                x-transition:enter-start="opacity-0"
                x-transition:enter-end="opacity-100"
                x-transition:leave="transition ease-in duration-150"
                x-transition:leave-start="opacity-100"
                x-transition:leave-end="opacity-0"
                class="fixed inset-0 z-50 flex items-center justify-center bg-black/75"
                @click.self="open = false"
                @keydown.escape.window="open = false"
            >
                {{-- Close button --}}
                <button
                    type="button"
                    class="absolute top-4 right-4 rounded-full bg-white/10 p-2 text-white hover:bg-white/20"
                    @click="open = false"
                >
                    <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M6 18 18 6M6 6l12 12" />
                    </svg>
                </button>

                <img
                    src="{{ $url }}"
                    alt="Receipt"
                    class="max-h-[90vh] max-w-[90vw] rounded shadow-lg object-contain bg-white"
                >
            </div>
        </div>
    @else
        <span class="text-sm text-gray-500 dark:text-gray-400">{{ __('No receipt uploaded') }}</span>
    @endif
</x-dynamic-component>