<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cek Status Pesanan | Empal Gentong H. Apud</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        body { font-family: 'Plus Jakarta Sans', sans-serif; }
    </style>
</head>
<body class="bg-stone-100 text-gray-800 min-h-screen flex flex-col">

    <header class="bg-white shadow-sm border-b border-stone-200 py-4">
        <div class="max-w-6xl mx-auto px-4 flex justify-between items-center">
            <h1 class="text-2xl font-bold text-amber-700">Haji Apud.</h1>
            <a href="{{ url('/') }}" class="text-stone-500 hover:text-amber-600 text-sm font-medium">
                <i class="fas fa-home mr-1"></i> Beranda
            </a>
        </div>
    </header>

    <main class="flex-grow flex items-start justify-center p-4 pt-12">
        <div class="bg-white p-8 md:p-10 rounded-3xl border border-stone-200 shadow-xl max-w-xl w-full">
            
            <div class="text-center mb-8">
                <div class="w-16 h-16 bg-amber-100 text-amber-600 rounded-2xl flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-search text-2xl"></i>
                </div>
                <h2 class="text-2xl font-black text-gray-900 mb-2">Lacak Pesanan Anda</h2>
                <p class="text-stone-500 text-sm">Masukkan nomor invoice (Contoh: INV-HA-...) untuk melihat status terkini paket Anda.</p>
            </div>

            <form action="{{ route('order.track') }}" method="GET" class="mb-8">
                <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                        <i class="fas fa-receipt text-stone-400"></i>
                    </div>
                    <input type="text" name="order_number" value="{{ request('order_number') }}" required class="w-full bg-stone-50 border border-stone-300 rounded-xl pl-11 pr-32 py-4 focus:ring-2 focus:ring-amber-500 focus:outline-none transition-colors font-bold text-gray-900 uppercase" placeholder="Ketik Nomor Invoice...">
                    <button type="submit" class="absolute inset-y-2 right-2 bg-gray-900 hover:bg-amber-600 text-white px-5 rounded-lg text-sm font-bold transition-colors shadow-sm">
                        Cek Status
                    </button>
                </div>
            </form>

            @if($searched)
                @if($order)
                    <div class="bg-stone-50 rounded-2xl p-6 border border-stone-200 relative overflow-hidden">
                        <div class="absolute top-0 left-0 w-full h-1 bg-amber-500"></div>
                        
                        <div class="flex justify-between items-start mb-6">
                            <div>
                                <p class="text-xs text-stone-500 font-bold uppercase tracking-wider mb-1">Invoice Ditemukan</p>
                                <p class="text-lg font-black text-gray-900">{{ $order->order_number }}</p>
                            </div>
                            <div class="text-right">
                                <p class="text-xs text-stone-500 font-bold uppercase tracking-wider mb-1">Tanggal</p>
                                <p class="text-sm font-bold text-gray-900">{{ $order->created_at->format('d M Y') }}</p>
                            </div>
                        </div>

                        <div class="mb-6">
                            <p class="text-xs text-stone-500 font-bold uppercase tracking-wider mb-2">Status Pesanan</p>
                            @if($order->status == 'pending' || $order->status == 'waiting_confirmation')
                                <span class="inline-flex items-center gap-2 bg-blue-50 text-blue-600 px-4 py-2.5 rounded-xl text-sm font-bold border border-blue-200 w-full">
                                    <i class="fas fa-clock text-lg"></i> Menunggu Konfirmasi Pembayaran
                                </span>
                            @elseif($order->status == 'paid')
                                <span class="inline-flex items-center gap-2 bg-indigo-50 text-indigo-600 px-4 py-2.5 rounded-xl text-sm font-bold border border-indigo-200 w-full">
                                    <i class="fas fa-check-double text-lg"></i> Pembayaran Berhasil Diterima
                                </span>
                            @elseif($order->status == 'processing')
                                <span class="inline-flex items-center gap-2 bg-amber-50 text-amber-600 px-4 py-2.5 rounded-xl text-sm font-bold border border-amber-200 w-full">
                                    <i class="fas fa-box-open text-lg"></i> Sedang Diproses & Dikemas
                                </span>
                            @elseif($order->status == 'shipped')
                                <span class="inline-flex items-center gap-2 bg-teal-50 text-teal-600 px-4 py-2.5 rounded-xl text-sm font-bold border border-teal-200 w-full">
                                    <i class="fas fa-truck text-lg"></i> Paket Sedang Dalam Perjalanan
                                </span>
                            @elseif($order->status == 'delivered' || $order->status == 'completed')
                                <span class="inline-flex items-center gap-2 bg-green-50 text-green-600 px-4 py-2.5 rounded-xl text-sm font-bold border border-green-200 w-full">
                                    <i class="fas fa-home text-lg"></i> Paket Telah Diterima (Selesai)
                                </span>
                            @elseif($order->status == 'cancelled')
                                <span class="inline-flex items-center gap-2 bg-red-50 text-red-600 px-4 py-2.5 rounded-xl text-sm font-bold border border-red-200 w-full">
                                    <i class="fas fa-times-circle text-lg"></i> Pesanan Dibatalkan
                                </span>
                            @endif
                        </div>

                        <div class="border-t border-dashed border-stone-300 pt-4 mt-4 flex justify-between items-center">
                            <span class="text-sm font-bold text-stone-600">Total Pembelanjaan</span>
                            <span class="font-black text-lg text-amber-600">Rp {{ number_format($order->total_amount, 0, ',', '.') }}</span>
                        </div>
                    </div>
                @else
                    <div class="bg-red-50 text-red-800 p-4 rounded-xl border border-red-200 text-center flex flex-col items-center gap-2">
                        <i class="fas fa-exclamation-triangle text-red-500 text-2xl mb-1"></i>
                        <h3 class="font-bold">Pesanan Tidak Ditemukan</h3>
                        <p class="text-sm">Mohon periksa kembali penulisan nomor invoice Anda. Pastikan huruf besar/kecil dan angka sudah sesuai.</p>
                    </div>
                @endif
            @endif

        </div>
    </main>

</body>
</html>