<x-admin-layout>
    <x-slot name="header">
        <h2 class="font-bold text-2xl text-gray-900 dark:text-white leading-tight">
            {{ __('Manajemen Pesanan') }}
        </h2>
    </x-slot>

    <!-- Table Section -->
    <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-gray-100 dark:border-slate-700 overflow-hidden">
        <div class="px-6 py-5 border-b border-gray-100 dark:border-slate-700 flex flex-col sm:flex-row justify-between items-center gap-4">
            <h3 class="font-semibold text-gray-800 dark:text-gray-100">Daftar Pesanan</h3>
        </div>
        
        <div class="overflow-x-auto">
            <table class="w-full text-sm text-left whitespace-nowrap">
                <thead class="text-xs text-gray-500 dark:text-gray-400 uppercase bg-gray-50 dark:bg-slate-700/50 border-b border-gray-100 dark:border-slate-700">
                    <tr>
                        <th scope="col" class="px-6 py-4 font-medium tracking-wider">Order ID</th>
                        <th scope="col" class="px-6 py-4 font-medium tracking-wider">Pelanggan</th>
                        <th scope="col" class="px-6 py-4 font-medium tracking-wider">Produk</th>
                        <th scope="col" class="px-6 py-4 font-medium tracking-wider">Total</th>
                        <th scope="col" class="px-6 py-4 font-medium tracking-wider">Status</th>
                        <th scope="col" class="px-6 py-4 font-medium tracking-wider text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100 dark:divide-slate-700 bg-white dark:bg-slate-800">
                    @forelse ($orders as $order)
                    <tr class="hover:bg-gray-50 dark:hover:bg-slate-700/50 dark:bg-slate-700/50 transition-colors">
                        <td class="px-6 py-4">
                            <div class="font-mono font-medium text-indigo-600 dark:text-indigo-400">{{ $order->order_code }}</div>
                            <div class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{{ $order->created_at->format('d M Y, H:i') }}</div>
                        </td>
                        <td class="px-6 py-4">
                            <div class="font-medium text-gray-900 dark:text-white">{{ $order->user->name ?? 'User Terhapus' }}</div>
                            <div class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{{ $order->user->email ?? '-' }}</div>
                        </td>
                        <td class="px-6 py-4 text-gray-700 dark:text-gray-200">
                            {{ Str::limit($order->product->name ?? 'Produk Terhapus', 30) }}
                        </td>
                        <td class="px-6 py-4">
                            <div class="font-medium text-gray-900 dark:text-white">Rp {{ number_format($order->amount, 0, ',', '.') }}</div>
                            <div class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{{ $order->method == 'whatsapp' ? 'WhatsApp' : 'Transfer Bank' }}</div>
                        </td>
                        <td class="px-6 py-4">
                            @if($order->status === 'paid')
                                <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-semibold bg-emerald-50 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400 border border-emerald-100 dark:border-emerald-800">
                                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-50 dark:bg-emerald-900/300"></span> Lunas
                                </span>
                            @elseif($order->status === 'pending')
                                <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-semibold bg-amber-50 text-amber-700 border border-amber-100">
                                    <span class="w-1.5 h-1.5 rounded-full bg-amber-500"></span> Menunggu
                                </span>
                            @else
                                <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-semibold bg-red-50 dark:bg-red-900/30 text-red-700 dark:text-red-400 border border-red-100 dark:border-red-800">
                                    <span class="w-1.5 h-1.5 rounded-full bg-red-50 dark:bg-red-900/300"></span> Dibatalkan
                                </span>
                            @endif
                        </td>
                        <td class="px-6 py-4 text-right">
                            <a href="{{ route('admin.orders.show', $order) }}" class="inline-flex items-center px-3 py-1.5 bg-white dark:bg-slate-800 border border-gray-300 dark:border-slate-600 rounded-md font-medium text-xs text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-slate-700/50 dark:bg-slate-700/50 transition-colors">
                                Detail
                            </a>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="px-6 py-12 text-center text-gray-500 dark:text-gray-400">
                            <div class="flex flex-col items-center justify-center">
                                <div class="w-16 h-16 rounded-full bg-gray-100 dark:bg-slate-700 flex items-center justify-center mb-4 text-gray-400">
                                    <x-heroicon-o-inbox class="w-8 h-8" />
                                </div>
                                <h4 class="text-base font-medium text-gray-900 dark:text-white mb-1">Tidak ada pesanan</h4>
                                <p class="text-sm">Belum ada pesanan yang masuk ke sistem.</p>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        <!-- Pagination -->
        @if($orders->hasPages())
        <div class="px-6 py-4 border-t border-gray-100 dark:border-slate-700 bg-gray-50 dark:bg-slate-700/50">
            {{ $orders->links() }}
        </div>
        @endif
    </div>
</x-admin-layout>
