@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="inline-block">
            {{-- Placeholder "button" --}}
            <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"
            >
                {{-- tiny icon --}}
                <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                    <path d="M3 5.25A2.25 2.25 0 0 1 5.25 3h13.5A2.25 2.25 0 0 1 21 5.25v13.5A2.25 2.25 0 0 1 18.75 21H5.25A2.25 2.25 0 0 1 3 18.75V5.25Z" />
                    <path d="M8.25 10.5h7.5M8.25 13.5h4.5" />
                </svg>

                <span>View receipt</span>
            </button>

            {{-- Fullscreen modal with actual image --}}
            <div
                x-show="open"
                x-cloak
                class="fixed inset-0 z-50 flex items-center justify-center bg-black/75"
                @click.self="open = false"
            >
                <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">No receipt</span>
    @endif
</x-dynamic-component>