<x-app-layout>
    <x-slot name="header">
        {{ __('Pesanan Saya') }}
    </x-slot>

    <div class="space-y-6">
        
        <!-- Welcome Banner -->
        <div class="relative overflow-hidden bg-gradient-to-r from-orange-500 to-purple-600 dark:from-orange-600 dark:to-purple-800 rounded-2xl p-6 sm:p-8 flex flex-col items-start justify-center shadow-lg">
            <!-- Decorative Abstract Shapes -->
            <div class="absolute top-0 right-0 -mr-16 -mt-16 w-64 h-64 rounded-full bg-white opacity-10 mix-blend-overlay filter blur-2xl"></div>
            <div class="absolute bottom-0 right-20 -mb-16 w-40 h-40 rounded-full bg-orange-300 opacity-20 mix-blend-overlay filter blur-xl"></div>
            
            <div class="relative z-10 w-full flex flex-col md:flex-row md:items-center md:justify-between gap-6">
                <div>
                    <h3 class="text-2xl font-extrabold text-white mb-2 tracking-tight">Halo, {{ Auth::user()->name }}! 👋</h3>
                    <p class="text-orange-100 max-w-xl text-sm leading-relaxed font-medium">
                        Selamat datang di ruang personal Anda. Di sini Anda dapat memantau seluruh histori pesanan dan mengunduh produk digital premium yang telah Anda dapatkan.
                    </p>
                </div>
                <div class="hidden md:flex items-center justify-center p-4 bg-white/10 backdrop-blur-sm rounded-xl border border-white/20 shadow-inner">
                    <x-heroicon-s-sparkles class="w-10 h-10 text-orange-100" />
                </div>
            </div>
        </div>

        <!-- Orders Section -->
        <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-gray-100 dark:border-slate-700 overflow-hidden transition-colors duration-300">
            <div class="p-6 border-b border-gray-100 dark:border-slate-700 flex items-center justify-between">
                <h3 class="text-lg font-bold text-gray-900 dark:text-gray-100 flex items-center gap-2">
                    <x-heroicon-s-shopping-bag class="w-5 h-5 text-orange-500" />
                    Produk Anda
                </h3>
            </div>
            
            @if($orders->count() > 0)
            <div class="overflow-x-auto">
                <table class="w-full text-sm text-left">
                    <thead class="text-xs text-gray-500 dark:text-gray-400 uppercase bg-gray-50 dark:bg-slate-800/50 border-b border-gray-100 dark:border-slate-700">
                        <tr>
                            <th class="px-6 py-4 font-semibold tracking-wider">Order ID</th>
                            <th class="px-6 py-4 font-semibold tracking-wider">Produk Digital</th>
                            <th class="px-6 py-4 font-semibold tracking-wider">Total Harga</th>
                            <th class="px-6 py-4 font-semibold tracking-wider">Status</th>
                            <th class="px-6 py-4 font-semibold tracking-wider text-right">Aksi</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100 dark:divide-slate-700">
                        @foreach($orders as $order)
                        <tr class="hover:bg-gray-50 dark:hover:bg-slate-700/50 transition-colors group">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="font-mono font-bold text-orange-600 dark:text-orange-400">#{{ $order->order_code }}</div>
                                <div class="text-xs text-gray-500 dark:text-gray-400 mt-1 font-medium">{{ $order->created_at->format('d M Y, H:i') }}</div>
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex items-center">
                                    <div class="flex-shrink-0 h-12 w-16 bg-gray-100 dark:bg-slate-800 border border-gray-200 dark:border-slate-600 rounded-lg overflow-hidden mr-4 shadow-sm group-hover:shadow transition-shadow">
                                        @if($order->product && $order->product->thumbnail)
                                            <img src="{{ Storage::url($order->product->thumbnail) }}" alt="" class="h-full w-full object-cover">
                                        @else
                                            <div class="h-full w-full flex justify-center items-center text-gray-400 dark:text-gray-500">
                                                <x-heroicon-o-cube class="w-6 h-6" />
                                            </div>
                                        @endif
                                    </div>
                                    <div>
                                        <div class="font-bold text-gray-900 dark:text-gray-100 mb-0.5">{{ $order->product->name ?? 'Produk Dihapus' }}</div>
                                        @if(!$order->product)
                                            <span class="text-xs font-semibold text-red-500 dark:text-red-400 bg-red-50 dark:bg-red-900/30 px-2 py-0.5 rounded-md">Item tidak tersedia</span>
                                        @endif
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 font-bold text-gray-900 dark:text-gray-100 whitespace-nowrap">
                                Rp {{ number_format($order->amount, 0, ',', '.') }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                @if($order->status === 'paid')
                                    <span class="inline-flex items-center px-2.5 py-1 rounded-md text-[0.7rem] font-extrabold uppercase tracking-widest bg-emerald-50 text-emerald-700 border border-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-400 dark:border-emerald-800/50 shadow-sm">
                                        Sukses
                                    </span>
                                @elseif($order->status === 'pending')
                                    <span class="inline-flex items-center px-2.5 py-1 rounded-md text-[0.7rem] font-extrabold uppercase tracking-widest bg-amber-50 text-amber-700 border border-amber-200 dark:bg-amber-900/30 dark:text-amber-400 dark:border-amber-800/50 shadow-sm">
                                        Menunggu
                                    </span>
                                @else
                                    <span class="inline-flex items-center px-2.5 py-1 rounded-md text-[0.7rem] font-extrabold uppercase tracking-widest bg-red-50 text-red-700 border border-red-200 dark:bg-red-900/30 dark:text-red-400 dark:border-red-800/50 shadow-sm">
                                        Dibatalkan
                                    </span>
                                @endif
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-right">
                                <a href="{{ route('dashboard.order.show', $order) }}" class="inline-flex items-center px-3 py-1.5 bg-white border border-gray-200 text-gray-700 text-xs font-bold rounded-lg hover:bg-gray-50 hover:text-orange-600 hover:border-orange-200 transition-all dark:bg-slate-800 dark:border-slate-600 dark:text-gray-300 dark:hover:bg-slate-700 dark:hover:text-orange-400 dark:hover:border-orange-500/50 focus:ring-2 focus:ring-offset-1 focus:ring-orange-500 shadow-sm group">
                                    <x-heroicon-o-eye class="w-4 h-4 mr-1.5 text-gray-400 group-hover:text-orange-500 transition-colors" /> Lihat Detail
                                </a>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            
            @if($orders->hasPages())
            <div class="px-6 py-4 border-t border-gray-100 dark:border-slate-700 bg-gray-50 dark:bg-slate-800/50">
                {{ $orders->links() }}
            </div>
            @endif
            
            @else
            <div class="p-12 text-center flex flex-col items-center justify-center">
                <div class="w-24 h-24 rounded-2xl bg-orange-50 dark:bg-orange-900/20 flex items-center justify-center mb-6 text-orange-300 dark:text-orange-500 border border-orange-100 dark:border-orange-800/30 transform rotate-3">
                    <x-heroicon-o-shopping-bag class="w-12 h-12 -rotate-3" />
                </div>
                <h4 class="text-xl font-extrabold text-gray-900 dark:text-gray-100 mb-2">Belum ada pesanan nih</h4>
                <p class="mb-8 text-gray-500 dark:text-gray-400 max-w-md mx-auto text-sm leading-relaxed">Sepertinya Anda belum pernah melakukan pembelian produk digital apa pun. Yuk, temukan produk menarik untuk Anda!</p>
                <a href="{{ url('/') }}" class="inline-flex items-center px-6 py-3 border border-transparent text-sm font-bold rounded-xl shadow-sm text-white bg-orange-600 hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-600 transition-all hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 dark:focus:ring-offset-slate-900">
                    <x-heroicon-o-sparkles class="w-5 h-5 mr-2" />
                    Eksplorasi Produk Sekarang
                </a>
            </div>
            @endif
        </div>
        
    </div>
</x-app-layout>

