@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-8">
    <h1 class="text-3xl font-bold mb-6">QR Sticker Preview</h1>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <!-- Order Info -->
        <div class="md:col-span-1 bg-white rounded-lg shadow-md p-6">
            <h2 class="text-xl font-semibold mb-4">Order Details</h2>
            
            <div class="space-y-3 text-sm">
                <div>
                    <p class="text-gray-600">Order Number</p>
                    <p class="font-semibold">{{ $order->order_number }}</p>
                </div>
                
                <div>
                    <p class="text-gray-600">UUID</p>
                    <p class="font-mono text-xs">{{ $order->uuid }}</p>
                </div>
                
                <div>
                    <p class="text-gray-600">Status</p>
                    <p class="font-semibold capitalize">{{ str_replace('_', ' ', $order->status) }}</p>
                </div>
                
                <div>
                    <p class="text-gray-600">Customer</p>
                    <p class="font-semibold">{{ $order->user?->name ?? 'N/A' }}</p>
                </div>
                
                <div>
                    <p class="text-gray-600">Created</p>
                    <p class="font-semibold">{{ $order->created_at->format('M d, Y H:i') }}</p>
                </div>

                @if($order->items->count() > 0)
                    <div>
                        <p class="text-gray-600">Design</p>
                        <p class="font-semibold text-sm">{{ $order->items->first()?->product?->name ?? 'Custom' }}</p>
                    </div>
                @endif
                
                <div class="pt-4 border-t">
                    <p class="text-gray-600 text-xs">Sticker Path</p>
                    <p class="font-mono text-xs break-all">{{ $stickerPath }}</p>
                </div>
            </div>

            <!-- Download Link -->
            <a href="{{ route('ops.order.sticker.download', $order) }}" class="mt-6 inline-block w-full text-center bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
                📥 Download PDF
            </a>
        </div>

        <!-- PDF Preview -->
        <div class="md:col-span-2 bg-white rounded-lg shadow-md p-6">
            <h2 class="text-xl font-semibold mb-4">PDF Preview (A6 Sticker)</h2>
            
            <div class="bg-gray-100 rounded border-2 border-gray-300 p-4" style="min-height: 400px;">
                <iframe 
                    src="{{ $pdfUrl }}" 
                    class="w-full h-full border-0"
                    style="min-height: 500px;"
                    title="Sticker PDF">
                </iframe>
            </div>
            
            <p class="text-xs text-gray-500 mt-4">
                If the PDF doesn't display above, it may be loading. Try refreshing or downloading the PDF directly.
            </p>
        </div>
    </div>

    <!-- Back Link -->
    <div class="mt-8">
        <a href="/" class="text-blue-600 hover:text-blue-800">← Back to Home</a>
    </div>
</div>
@endsection