<x-filament-panels::page>
    <div class="space-y-4">
        {{-- Form --}}
        <div class="space-y-4">
            {{ $this->filtersForm($this->form) }}
        </div>

        {{-- Preview Button --}}
        <div class="flex flex-row gap-2 mt-4">
            <button
                type="button"
                wire:click="showPreview"
                class="px-3 py-1 border border-primary-500 text-primary-600 rounded hover:bg-primary-50 hover:border-primary-700 transition text-sm"
            >
                Show Preview
            </button>
        </div>

        {{-- PDF Preview --}}
        {{-- @if($this->pdfPreview)
            <div class="mt-6">
                <h3 class="text-lg font-medium text-gray-900">Preview</h3>
                <div class="mt-2 border rounded overflow-hidden bg-white">
                    <embed
                        src="data:application/pdf;base64,{{ $this->pdfPreview }}"
                        type="application/pdf"
                        width="100%"
                        height="600px"
                        class="bg-gray-50"
                    />
                </div>
            </div>
        @endif --}}

        {{-- PDF Preview with Fallback --}}
        @if($this->pdfPreview)
            <div class="mt-6">
                {{-- <h3 class="text-lg font-medium text-gray-900">Sticker Preview</h3> --}}
                <div class="mt-2 border rounded overflow-hidden bg-gray-50">
                    <object
                        data="data:application/pdf;base64,{{ $this->pdfPreview }}"
                        type="application/pdf"
                        width="100%"
                        height="600"
                        style="min-height: 600px;"
                    >
                        <p class="p-4 text-red-600 bg-white border border-red-200 rounded">
                            <strong>⚠️ Your browser cannot display PDFs inline.</strong><br>
                            Don’t worry — you can still:
                        </p>
                        <div class="p-4 bg-white">
                            <!-- Fallback: Provide a download link -->
                            <a
                                href="data:application/pdf;base64,{{ $this->pdfPreview }}"
                                download="sticker_preview.pdf"
                                class="inline-flex items-center px-4 py-2 bg-primary-600 text-white text-sm font-medium rounded hover:bg-primary-700"
                            >
                                📥 Download PDF Preview
                            </a>
                            <p class="mt-2 text-sm text-gray-600">
                                Or try opening this page in Chrome, Edge, or Firefox.
                            </p>
                        </div>
                    </object>
                </div>
            </div>
        @endif
    </div>
</x-filament-panels::page>
