    @extends('layouts.app')
    @section('title', 'Detail Pesanan #' . $order->order_number)

    @section('content')
    <div class="max-w-3xl mx-auto p-6 md:p-10" style="font-family: 'Plus Jakarta Sans', sans-serif;">
        <div class="bg-white rounded-[40px] shadow-2xl border border-pink-50 overflow-hidden">

            {{-- Header --}}
            <div class="p-8 {{ in_array($order->status, ['pending', 'cancelled']) ? 'bg-rose-950' : ($order->status == 'completed' ? 'bg-emerald-950' : ($order->status == 'shipping' ? 'bg-pink-900' : 'bg-slate-900')) }} text-white flex justify-between items-center transition-colors">
                <div>
                    <p class="text-[10px] font-black text-pink-400 uppercase tracking-widest">Order Detail</p>
                    <h2 class="text-2xl font-black italic">#{{ $order->order_number }}</h2>
                </div>
                <div class="text-right">
                    <p class="text-[10px] font-bold text-slate-400 uppercase mb-1 italic">Status</p>
                    @php
                        $statusConfig = match($order->status) {
                            'pending'    => ['label' => 'BELUM BAYAR',       'class' => 'text-rose-400 border-rose-400/30'],
                            'paid'       => ['label' => 'SUDAH DIBAYAR',     'class' => 'text-green-400 border-green-400/30'],
                            'packaging'  => ['label' => 'DIKEMAS',           'class' => 'text-blue-400 border-blue-400/30'],
                            'picking_up' => ['label' => 'KURIR MENUJU TOKO', 'class' => 'text-amber-400 border-amber-400/30'],
                            'shipping'   => ['label' => 'DALAM PERJALANAN',  'class' => 'text-pink-400 border-pink-400/30'],
                            'completed'  => ['label' => 'SELESAI',           'class' => 'text-emerald-400 border-emerald-400/30'],
                            'cancelled'  => ['label' => 'DIBATALKAN',        'class' => 'text-slate-400 border-slate-400/30'],
                            default      => ['label' => strtoupper($order->status), 'class' => 'text-white border-white/30']
                        };
                    @endphp
                    <span class="px-4 py-1 {{ $statusConfig['class'] }} rounded-full text-xs font-black uppercase italic border bg-white/5">
                        {{ $statusConfig['label'] }}
                    </span>
                </div>
            </div>

            <div class="p-8 space-y-8">

                {{-- ✅ BUKTI PENGIRIMAN (user + admin lihat ini) --}}
                @if($order->status == 'completed' && $order->proof_image)
                <div class="p-6 bg-emerald-50 rounded-[30px] border border-emerald-100">
                    <p class="text-[10px] font-black text-emerald-600 uppercase mb-4 flex items-center gap-2">
                        <i data-lucide="camera" class="w-3 h-3"></i> Bukti Pengiriman Selesai
                    </p>
                    <div class="flex flex-col md:flex-row gap-6 items-start">
                        <div class="w-full md:w-40 h-40 bg-white p-2 rounded-[24px] shadow-sm border border-emerald-100 overflow-hidden">
                            <img src="{{ asset('storage/' . $order->proof_image) }}"
                                class="w-full h-full object-cover rounded-[18px] cursor-zoom-in hover:scale-110 transition-transform duration-500"
                                onclick="window.open(this.src)">
                        </div>
                        <div class="flex-1">
                            <div class="mb-3">
                                <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest">Diterima Oleh</p>
                                <p class="text-sm font-black text-slate-800 italic uppercase">{{ $order->actual_receiver ?? $order->receiver_name ?? 'Pembeli' }}</p>
                            </div>
                            <div class="mb-3">
                                <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest">Kurir</p>
                                <p class="text-sm font-bold text-slate-700">{{ $order->courier->name ?? '-' }}</p>
                            </div>
                            <div class="mb-4">
                                <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest">Waktu Sampai</p>
                                <p class="text-xs font-bold text-slate-600">
                                    {{ $order->delivered_at ? \Carbon\Carbon::parse($order->delivered_at)->format('d M Y, H:i') : $order->updated_at->format('d M Y, H:i') }} WIB
                                </p>
                            </div>
                            <div class="inline-flex items-center gap-2 text-emerald-600 bg-white px-4 py-2 rounded-full border border-emerald-100 shadow-sm">
                                <i data-lucide="check-circle" class="w-3 h-3"></i>
                                <span class="text-[9px] font-black uppercase tracking-tighter italic">Paket Telah Diterima</span>
                            </div>
                        </div>
                    </div>
                </div>
                @endif

                {{-- ⭐ PROMPT RATING — hanya untuk USER --}}
                @if(Auth::user()->role === 'user' && $order->status === 'completed')
                    @php
                        $reviewedCount = \App\Models\Review::where('order_id', $order->id)
                            ->where('user_id', Auth::id())
                            ->count();
                        $allReviewed = $reviewedCount >= $order->items->count();
                    @endphp

                    @if(!$allReviewed)
                    <div class="p-6 bg-amber-50 rounded-[30px] border border-amber-100">
                        <div class="flex items-center gap-4 mb-4">
                            <div class="w-12 h-12 bg-amber-100 rounded-2xl flex items-center justify-center text-2xl">⭐</div>
                            <div>
                                <p class="text-sm font-black text-slate-800">Gimana pesanannya?</p>
                                <p class="text-[10px] text-slate-400 font-bold">Bantu pembeli lain dengan kasih review produknya!</p>
                            </div>
                        </div>
                        <a href="{{ route('user.reviews.create', $order->id) }}"
                        class="block w-full text-center py-4 bg-amber-400 hover:bg-amber-500 text-white rounded-2xl font-black text-xs uppercase tracking-widest transition-all shadow-lg shadow-amber-100">
                            Kasih Rating Sekarang ⭐
                        </a>
                    </div>
                    @else
                    <div class="p-4 bg-emerald-50 rounded-[24px] border border-emerald-100 flex items-center gap-3">
                        <span class="text-2xl">✅</span>
                        <p class="text-sm font-black text-emerald-600">Kamu sudah kasih review untuk semua produk di pesanan ini!</p>
                    </div>
                    @endif
                @endif

                {{-- Status Timeline --}}
                <div class="p-6 bg-slate-50 rounded-[30px] border border-slate-100">
                    <p class="text-[10px] font-black text-slate-400 uppercase mb-4 tracking-widest">Tracking Pesanan</p>
                    @php
                        $steps = [
                            ['status' => ['paid', 'packaging', 'picking_up', 'shipping', 'completed'], 'label' => 'Pembayaran Diterima', 'icon' => 'circle-check-big'],
                            ['status' => ['packaging', 'picking_up', 'shipping', 'completed'],          'label' => 'Pesanan Dikemas',     'icon' => 'package'],
                            ['status' => ['picking_up', 'shipping', 'completed'],                       'label' => 'Kurir Menuju Toko',  'icon' => 'store'],
                            ['status' => ['shipping', 'completed'],                                     'label' => 'Dalam Perjalanan',   'icon' => 'truck'],
                            ['status' => ['completed'],                                                 'label' => 'Pesanan Diterima',   'icon' => 'check-circle'],
                        ];
                    @endphp
                    <div class="space-y-3">
                        @foreach($steps as $step)
                        @php $active = in_array($order->status, $step['status']); @endphp
                        <div class="flex items-center gap-3">
                            <div class="w-8 h-8 rounded-full flex items-center justify-center {{ $active ? 'bg-emerald-500 text-white' : 'bg-slate-200 text-slate-400' }} transition-all">
                                <i data-lucide="{{ $step['icon'] }}" class="w-4 h-4"></i>
                            </div>
                            <span class="text-xs font-bold {{ $active ? 'text-slate-800' : 'text-slate-400' }}">{{ $step['label'] }}</span>
                        </div>
                        @endforeach
                    </div>
                </div>

                {{-- Alamat Pengiriman --}}
                <div class="p-6 bg-slate-50 rounded-[30px] border border-slate-100">
                    <p class="text-[10px] font-black text-slate-400 uppercase mb-3 flex items-center gap-2">
                        <i data-lucide="map-pin" class="w-3 h-3 text-pink-500"></i> Alamat Tujuan
                    </p>
                    <p class="text-sm font-bold text-slate-700 leading-relaxed">{{ $order->full_address }}</p>
                    <p class="text-xs text-slate-400 font-bold mt-2 italic">{{ $order->phone }}</p>
                </div>

                {{-- List Produk --}}
                <div class="space-y-4">
                    <p class="text-[10px] font-black text-slate-400 uppercase px-2 tracking-widest">Daftar Produk</p>
                    @foreach($order->items as $item)
                    <div class="flex items-center gap-4 p-4 rounded-3xl bg-white border border-slate-100 shadow-sm group">
                        <img src="{{ asset('storage/' . $item->product->image) }}" class="w-16 h-16 rounded-2xl object-cover shadow-sm group-hover:scale-110 transition-transform">
                        <div class="flex-1">
                            <h4 class="font-black text-slate-800">{{ $item->product->name }}</h4>
                            <p class="text-[10px] text-slate-400 font-bold uppercase italic">{{ $item->quantity }}x @ Rp {{ number_format($item->price, 0, ',', '.') }}</p>
                        </div>
                        <p class="font-black text-slate-900 italic">Rp {{ number_format($item->price * $item->quantity, 0, ',', '.') }}</p>
                    </div>
                    @endforeach
                </div>

                <hr class="border-dashed border-slate-200">

                {{-- Info Pembayaran --}}
                <div class="grid grid-cols-2 gap-4 text-sm bg-slate-50 p-6 rounded-[30px] border border-slate-100">
                    <div>
                        <p class="text-[10px] font-black text-slate-400 uppercase mb-1">Metode Bayar</p>
                        <p class="font-bold text-slate-700 italic flex items-center gap-2 uppercase">
                            {{ $order->payment_method }}
                            @if(!in_array($order->status, ['pending', 'cancelled']))
                                <i data-lucide="check-circle-2" class="w-4 h-4 text-emerald-500"></i>
                            @endif
                        </p>
                    </div>
                    <div class="text-right">
                        <p class="text-[10px] font-black text-slate-400 uppercase mb-1 italic">Total Tagihan</p>
                        <p class="text-2xl font-black text-rose-500 italic">Rp {{ number_format($order->total_price, 0, ',', '.') }}</p>
                    </div>
                </div>

                {{-- Action Buttons --}}
                <div class="space-y-4">

                    {{-- Aksi Kurir --}}
                    @if(Auth::user()->role === 'courier')
                        @if($order->status === 'packaging')
                            <form action="{{ route('courier.orders.pickup', $order) }}" method="POST">
                                @csrf
                                <button type="submit" class="w-full py-4 bg-amber-500 text-white rounded-2xl font-black text-xs uppercase tracking-widest hover:bg-amber-600 transition-all shadow-xl">
                                    Ambil Pesanan ke Toko 🏪
                                </button>
                            </form>
                        @elseif($order->status === 'picking_up' && $order->courier_id == Auth::id())
                            <form action="{{ route('courier.orders.start', $order) }}" method="POST">
                                @csrf
                                <button type="submit" class="w-full py-4 bg-slate-900 text-white rounded-2xl font-black text-xs uppercase tracking-widest hover:bg-pink-600 transition-all shadow-xl">
                                    Sudah Ambil, Mulai Antar 🚚
                                </button>
                            </form>
                        @elseif($order->status === 'shipping' && $order->courier_id == Auth::id())
                            <button onclick="document.getElementById('modalSelesai').classList.remove('hidden')"
                                    class="w-full py-4 bg-emerald-500 text-white rounded-2xl font-black text-xs uppercase tracking-widest hover:bg-emerald-600 transition-all shadow-xl shadow-emerald-500/20">
                                Selesaikan Pengiriman (Upload Bukti) ✅
                            </button>
                        @endif
                    @endif

                    {{-- Tombol Umum --}}
                    <div class="flex gap-4">
                        <a href="{{ route('user.orders.index') }}" class="flex-1 text-center py-4 bg-slate-100 text-slate-600 rounded-2xl font-black text-[10px] uppercase tracking-widest hover:bg-slate-200 transition-all">
                            Kembali
                        </a>
                        @if(Auth::user()->role == 'user' && $order->status == 'pending' && $order->payment_method == 'midtrans')
                        <button onclick="payOrder('{{ $order->snap_token }}')" class="flex-1 text-center py-4 bg-rose-500 text-white rounded-2xl font-black text-[10px] uppercase tracking-widest hover:bg-rose-600 transition-all shadow-lg shadow-rose-500/20">
                            Bayar Sekarang
                        </button>
                        @endif
                    </div>
                </div>

            </div>
        </div>
    </div>

    {{-- Modal Kurir Selesaikan Pesanan --}}
    @if(Auth::user()->role === 'courier')
    <div id="modalSelesai" class="fixed inset-0 bg-slate-900/80 backdrop-blur-sm z-[99] hidden flex items-center justify-center p-4">
        <div class="bg-white rounded-[40px] w-full max-w-md overflow-hidden shadow-2xl">
            <div class="p-8 bg-slate-900 text-white flex justify-between items-center">
                <h3 class="font-black italic uppercase tracking-widest text-sm">Konfirmasi Selesai</h3>
                <button onclick="document.getElementById('modalSelesai').classList.add('hidden')" class="text-slate-400 hover:text-white">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>
            <form action="{{ route('courier.orders.complete', $order) }}" method="POST" enctype="multipart/form-data" class="p-8 space-y-6">
                @csrf
                <div>
                    <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 block italic">Nama Penerima</label>
                    <input type="text" name="receiver_name" required placeholder="Contoh: Budi (Satpam)"
                        class="w-full px-5 py-4 bg-slate-50 border-2 border-slate-100 rounded-2xl focus:border-pink-500 outline-none font-bold text-sm transition-all">
                </div>
                <div>
                    <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 block italic">Foto Bukti (JPG/PNG)</label>
                    <input type="file" name="proof_image" required accept="image/*"
                        class="w-full text-xs font-bold text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-[10px] file:font-black file:bg-pink-50 file:text-pink-600 hover:file:bg-pink-100">
                </div>
                <button type="submit" class="w-full py-4 bg-emerald-500 text-white rounded-2xl font-black text-xs uppercase tracking-widest hover:bg-emerald-600 transition-all">
                    Kirim Bukti & Selesaikan
                </button>
            </form>
        </div>
    </div>
    @endif

    <script type="text/javascript" src="https://app.sandbox.midtrans.com/snap/snap.js" data-client-key="{{ env('MIDTRANS_CLIENT_KEY') }}"></script>
    <script>
        lucide.createIcons();
        function payOrder(token) {
            window.snap.pay(token, {
                onSuccess: function(result) { window.location.reload(); },
                onPending: function(result) { window.location.reload(); },
                onClose: function() { alert('Selesaikan pembayaranmu agar barang segera diproses! ✨'); }
            });
        }
    </script>
    @endsection