<x-app-layout>
    <div class="py-12 bg-gray-50 min-h-screen">
        <div class="max-w-3xl mx-auto sm:px-6 lg:px-8 space-y-6">
            
            <!-- Navigation -->
            <a href="{{ url()->previous() }}" class="inline-flex items-center text-[10px] font-black text-gray-400 hover:text-green-700 uppercase tracking-widest transition-all">
                Kembali
            </a>
            
            <!-- Detail Card -->
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-8">
                <div class="flex justify-between items-start mb-8">
                    <div>
                        <h2 class="text-2xl font-black text-gray-800 uppercase tracking-tight">Pesanan #{{ $pesanan->kode_pesanan }}</h2>
                        <p class="text-xs font-bold text-gray-400 mt-1 uppercase tracking-widest">Mitra: <span class="text-gray-700">{{ $pesanan->user->name }}</span></p>
                        
                        <!-- Dates -->
                        <div class="mt-4 flex gap-6">
                            <div>
                                <p class="text-[9px] font-black text-gray-400 uppercase tracking-widest">Pesan</p>
                                <p class="text-xs font-bold text-gray-600">{{ $pesanan->created_at->format('d M Y') }}</p>
                            </div>
                            <div>
                                <p class="text-[9px] font-black text-gray-400 uppercase tracking-widest">Kirim</p>
                                <p class="text-xs font-black text-green-700">
                                    {{ $pesanan->tanggal_kirim ? \Carbon\Carbon::parse($pesanan->tanggal_kirim)->format('d M Y') : 'Belum Dijadwalkan' }}
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- Status Badge -->
                    <span class="px-4 py-1.5 rounded-lg text-[10px] font-black uppercase tracking-widest border
                        {{ $pesanan->status == 'pending' ? 'bg-red-50 text-red-600 border-red-100' : '' }}
                        {{ $pesanan->status == 'dijadwalkan' ? 'bg-blue-50 text-blue-600 border-blue-100' : '' }}
                        {{ $pesanan->status == 'dikirim' ? 'bg-yellow-50 text-yellow-600 border-yellow-100' : '' }}
                        {{ $pesanan->status == 'selesai' ? 'bg-green-50 text-green-600 border-green-100' : '' }}">
                        {{ $pesanan->status }}
                    </span>
                </div>

                <!-- Products Table -->
                <div class="border-t border-gray-100 pt-6">
                    <h3 class="font-black text-gray-800 mb-6 uppercase text-[10px] tracking-widest">Rincian Produk</h3>
                    <div class="overflow-x-auto">
                        <table class="w-full text-left">
                            <thead class="text-gray-400 text-[10px] font-black uppercase tracking-widest border-b border-gray-50">
                                <tr>
                                    <th class="pb-3">Nama Produk</th>
                                    <th class="pb-3 text-center">Berat</th>
                                    <th class="pb-3 text-center">Satuan</th>
                                    <th class="pb-3 text-center">Jumlah</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-50">
                                @foreach($pesanan->detailPesanan as $item)
                                <tr class="hover:bg-gray-50/50">
                                    <td class="py-4 font-bold text-gray-700 text-sm">{{ $item->produk->nama_produk }}</td>
                                    <td class="py-4 text-center text-xs font-bold text-gray-500">{{ $item->produk->berat }}</td>
                                    <td class="py-4 text-center text-xs font-bold text-gray-500">{{ $item->produk->satuan }}</td>
                                    <td class="py-4 text-center font-black text-gray-800 text-sm">{{ $item->qty }} pcs</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                
                <!-- Footer Summary -->
                <div class="mt-8 p-6 bg-gray-50 rounded-xl border border-gray-100">
                    <h4 class="font-black text-gray-400 text-[9px] uppercase mb-2 tracking-widest">Catatan Pesanan</h4>
                    <p class="text-gray-600 text-sm font-medium">
                        {{ $pesanan->catatan ?? 'Tidak ada catatan tambahan.' }}
                    </p>
                </div>
                
                <div class="mt-8 pt-6 border-t border-gray-100 text-right">
                    <p class="text-xs font-black text-gray-400 uppercase tracking-widest">Total Item: 
                        <span class="text-gray-800 text-lg">{{ $pesanan->detailPesanan->sum('qty') }} pcs</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>