<x-app-layout>
    <div class="space-y-6 max-w-5xl mx-auto py-4">
        
        <!-- Header & Back Button -->
        <div class="flex items-center justify-between mb-8">
            <a href="{{ route('dashboard') }}" class="inline-flex items-center text-sm font-bold text-gray-500 hover:text-orange-600 dark:text-gray-400 dark:hover:text-orange-400 transition-colors group">
                <x-heroicon-o-arrow-left class="w-5 h-5 mr-2 transform group-hover:-translate-x-1 transition-transform" />
                Kembali ke Dashboard
            </a>
            @if($order->status === 'paid')
                <span class="inline-flex items-center px-4 py-1.5 rounded-full text-xs font-black uppercase tracking-widest bg-emerald-100 text-emerald-800 border border-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-400 dark:border-emerald-800 shadow-sm">
                    <x-heroicon-s-check-badge class="w-4 h-4 mr-1.5" /> Pembayaran Sukses
                </span>
            @elseif($order->status === 'pending')
                <span class="inline-flex items-center px-4 py-1.5 rounded-full text-xs font-black uppercase tracking-widest bg-amber-100 text-amber-800 border border-amber-200 dark:bg-amber-900/30 dark:text-amber-400 dark:border-amber-800 shadow-sm">
                    <x-heroicon-s-clock class="w-4 h-4 mr-1.5" /> Menunggu Pembayaran
                </span>
            @else
                <span class="inline-flex items-center px-4 py-1.5 rounded-full text-xs font-black uppercase tracking-widest bg-red-100 text-red-800 border border-red-200 dark:bg-red-900/30 dark:text-red-400 dark:border-red-800 shadow-sm">
                    <x-heroicon-s-x-circle class="w-4 h-4 mr-1.5" /> Dibatalkan
                </span>
            @endif
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-start">
            <!-- Left Panel: Product & Instructions -->
            <div class="lg:col-span-2 space-y-8">
                
                <!-- Product Overview -->
                <div class="bg-white dark:bg-slate-800 rounded-3xl p-6 sm:p-8 shadow-sm border border-gray-100 dark:border-slate-700 flex flex-col sm:flex-row gap-8 items-start group">
                    <div class="w-full sm:w-48 sm:h-48 rounded-2xl bg-gray-100 dark:bg-slate-700/50 flex flex-shrink-0 items-center justify-center overflow-hidden border border-gray-200 dark:border-slate-600 shadow-inner">
                        @if($order->product && $order->product->thumbnail)
                            <img src="{{ Storage::url($order->product->thumbnail) }}" alt="{{ $order->product->name }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                        @else
                            <x-heroicon-o-cube class="w-16 h-16 text-gray-400" />
                        @endif
                    </div>
                    
                    <div class="flex-1 w-full space-y-4 pt-2">
                        <div>
                            <p class="text-xs font-black text-orange-600 dark:text-orange-400 mb-2 tracking-widest uppercase">{{ optional(optional($order->product)->category)->name ?? 'Digital Product' }}</p>
                            <h1 class="text-2xl sm:text-3xl font-black text-gray-900 dark:text-white leading-tight">
                                {{ optional($order->product)->name ?? 'Produk Tidak Tersedia' }}
                            </h1>
                        </div>
                        
                        <div class="prose prose-sm dark:prose-invert text-gray-600 dark:text-gray-300 line-clamp-4 leading-relaxed">
                            {!! strip_tags(optional($order->product)->description ?? 'Deskripsi tidak tersedia.') !!}
                        </div>
                    </div>
                </div>

                <!-- Usage Instructions Card -->
                <div class="bg-gradient-to-br from-orange-50 to-white dark:from-slate-800 dark:to-slate-800/80 rounded-3xl p-8 shadow-sm border border-orange-100 dark:border-orange-900/40 relative overflow-hidden">
                    <div class="absolute top-0 right-0 -mr-6 -mt-6 text-orange-100 dark:text-slate-700/50 transform rotate-12 transition-transform hover:rotate-6 duration-300">
                        <x-heroicon-s-book-open class="w-40 h-40" />
                    </div>
                    
                    <div class="relative z-10">
                        <h2 class="text-xl font-bold text-gray-900 dark:text-white flex items-center mb-8">
                            <div class="bg-amber-100 p-2 rounded-xl mr-3 text-amber-600 dark:bg-amber-900/30 dark:text-amber-500">
                                <x-heroicon-s-light-bulb class="w-5 h-5" />
                            </div>
                            Panduan Penggunaan
                        </h2>
                        
                        <div class="space-y-6">
                            <div class="flex items-start group/step">
                                <span class="flex items-center justify-center w-8 h-8 rounded-xl bg-orange-100 text-orange-600 dark:bg-orange-900/50 dark:text-orange-400 font-extrabold text-sm mr-4 flex-shrink-0 transform group-hover/step:scale-110 group-hover/step:bg-orange-600 group-hover/step:text-white transition-all shadow-sm">1</span>
                                <div class="pt-1">
                                    <h4 class="font-bold text-gray-900 dark:text-white mb-1">Unduh Berkas</h4>
                                    <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed">Download file produk digital Anda melalui tombol raksasa yang tersedia di panel sebelah kanan halaman ini.</p>
                                </div>
                            </div>
                            <div class="flex items-start group/step">
                                <span class="flex items-center justify-center w-8 h-8 rounded-xl bg-orange-100 text-orange-600 dark:bg-orange-900/50 dark:text-orange-400 font-extrabold text-sm mr-4 flex-shrink-0 transform group-hover/step:scale-110 group-hover/step:bg-orange-600 group-hover/step:text-white transition-all shadow-sm">2</span>
                                <div class="pt-1">
                                    <h4 class="font-bold text-gray-900 dark:text-white mb-1">Ekstrak & Persiapkan</h4>
                                    <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed">Gunakan aplikasi ekstraktor (seperti WinRAR, 7-zip, atau bawaan OS) untuk membuka file yang dikemas dalam format arsip(.zip/.rar).</p>
                                </div>
                            </div>
                            <div class="flex items-start group/step">
                                <span class="flex items-center justify-center w-8 h-8 rounded-xl bg-orange-100 text-orange-600 dark:bg-orange-900/50 dark:text-orange-400 font-extrabold text-sm mr-4 flex-shrink-0 transform group-hover/step:scale-110 group-hover/step:bg-orange-600 group-hover/step:text-white transition-all shadow-sm">3</span>
                                <div class="pt-1">
                                    <h4 class="font-bold text-gray-900 dark:text-white mb-1">Pelajari Dokumentasi</h4>
                                    <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed">Simpan di direktori yang aman. Jika ini merupakan aset atau template, baca file <code class="bg-gray-100 dark:bg-slate-700 px-1.5 py-0.5 rounded text-xs text-orange-600 dark:text-orange-400">README.txt</code> atau buka halaman dokumentasi untuk instruksi implementasi awal.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Panel: Actions & Details -->
            <div class="lg:col-span-1 space-y-6">
                
                <!-- Action Card -->
                <div class="bg-white dark:bg-slate-800 rounded-3xl p-6 sm:p-8 border border-gray-100 dark:border-slate-700 shadow-xl shadow-orange-100/30 dark:shadow-none sticky top-8">
                    <h3 class="text-xs font-black text-gray-400 dark:text-gray-500 uppercase tracking-widest mb-6">Akses File</h3>
                    
                    @if($order->status === 'paid' && $order->product)
                        <div class="p-5 bg-emerald-50 dark:bg-emerald-900/20 shadow-inner rounded-2xl mb-8 border border-emerald-100/50 dark:border-emerald-800/30">
                            <p class="text-xs text-emerald-700 dark:text-emerald-400 font-bold mb-3 flex items-center justify-center bg-emerald-100/50 dark:bg-emerald-800/20 py-1.5 rounded-lg w-fit px-3 mx-auto">
                                <x-heroicon-s-shield-check class="w-4 h-4 mr-1.5" /> Tersandikan & Aman
                            </p>
                            <a href="{{ route('download', $order) }}" target="_blank" class="w-full flex flex-col items-center justify-center px-6 py-5 bg-orange-600 hover:bg-orange-700 text-white font-extrabold rounded-xl transition-all shadow-lg hover:shadow-orange-600/40 hover:-translate-y-1 group">
                                <x-heroicon-s-cloud-arrow-down class="w-8 h-8 mb-2 group-hover:animate-bounce" /> 
                                <span class="text-base tracking-wide uppercase">Download File</span>
                            </a>
                        </div>
                    @elseif($order->status === 'pending')
                        <div class="p-6 bg-amber-50 dark:bg-amber-900/20 shadow-inner rounded-2xl mb-8 border border-amber-100/50 dark:border-amber-800/30 text-center">
                            <div class="w-14 h-14 bg-white dark:bg-amber-900/50 rounded-2xl flex items-center justify-center mx-auto mb-4 text-amber-500 shadow-sm border border-amber-100 dark:border-amber-800/50 transform rotate-3">
                                <x-heroicon-o-credit-card class="w-7 h-7 -rotate-3" />
                            </div>
                            <p class="text-base font-black text-amber-900 dark:text-amber-400 mb-2">Selesaikan Tagihan</p>
                            <p class="text-xs text-amber-700 dark:text-amber-500/80 mb-6 leading-relaxed">Selesaikan proses pembayaran sekarang untuk langsung bisa mengunduh file ini.</p>
                            <a href="{{ route('checkout.success', $order) }}" class="w-full inline-flex items-center justify-center px-4 py-3 bg-amber-500 hover:bg-amber-600 text-white text-sm font-bold rounded-xl transition-all shadow-md hover:-translate-y-0.5">
                                Cara Pembayaran <x-heroicon-o-arrow-right class="w-4 h-4 ml-1.5" />
                            </a>
                        </div>
                    @else
                        <div class="p-8 bg-gray-50 dark:bg-slate-700/30 rounded-2xl mb-8 text-center border border-gray-100 dark:border-slate-600/50 shadow-inner text-gray-500 dark:text-gray-400">
                            <x-heroicon-s-lock-closed class="w-10 h-10 mx-auto mb-3 opacity-30" />
                            <p class="text-sm font-black uppercase tracking-wide">Akses Terkunci</p>
                        </div>
                    @endif

                    <div class="space-y-5">
                        <div class="pb-5 border-b border-gray-100 dark:border-slate-700">
                            <p class="text-xs text-gray-500 dark:text-gray-400 mb-1.5 font-semibold uppercase tracking-wider">Total Harga</p>
                            <p class="text-3xl font-black text-gray-900 dark:text-white tracking-tight">Rp {{ number_format($order->amount, 0, ',', '.') }}</p>
                        </div>
                        <div class="flex justify-between items-center bg-gray-50 dark:bg-slate-700/30 p-4 rounded-xl border border-gray-100 dark:border-slate-700">
                            <p class="text-xs text-gray-500 dark:text-gray-400 uppercase font-bold tracking-wider">Order ID</p>
                            <p class="font-mono text-sm font-bold text-orange-600 dark:text-orange-400 select-all">{{ $order->order_code }}</p>
                        </div>
                        <p class="text-xs text-center text-gray-400 dark:text-gray-500 font-medium pt-2 flex items-center justify-center">
                            <x-heroicon-o-clock class="w-3 h-3 mr-1" /> Dipesan pada {{ $order->created_at->format('d M Y, H:i') }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>

