<div class="px-4 pt-3">

    {{-- Subtitle tanggal (judul order number sudah di header layout) --}}
    <p class="text-xs text-slate-400 mb-4">{{ $order->created_at->translatedFormat('d M Y, H:i') }}</p>

    {{-- ══ STATUS BADGE ═══════════════════════════════════════════════════ --}}
    @php
        // Status Pesanan — warna biru/slate
        $statusColors = [
            'pending'    => 'bg-slate-50 text-slate-600 border-slate-200',
            'paid'       => 'bg-blue-50 text-blue-700 border-blue-200',
            'processing' => 'bg-indigo-50 text-indigo-700 border-indigo-200',
            'delivering' => 'bg-cyan-50 text-cyan-700 border-cyan-200',
            'completed'  => 'bg-teal-50 text-teal-700 border-teal-200',
            'cancelled'  => 'bg-slate-100 text-slate-500 border-slate-200',
        ];
        $statusClass = $statusColors[$order->status->value] ?? 'bg-slate-50 text-slate-600 border-slate-200';
    @endphp

    <div class="bg-white rounded-xl border border-slate-100 shadow-sm p-4 mb-4">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-xs text-slate-400 mb-0.5">Status Pesanan</p>
                <span class="text-sm font-bold px-2.5 py-1 rounded-full border {{ $statusClass }}">
                    {{ $order->status->label() }}
                </span>
            </div>
            @if ($order->payment)
                <div class="text-right">
                    <p class="text-xs text-slate-400 mb-0.5">Status Pembayaran</p>
                    <span @class([
                        'text-sm font-semibold',
                        'text-amber-600'  => $order->payment->status->value === 'pending',
                        'text-green-600'  => $order->payment->status->value === 'verified',
                        'text-red-600'    => $order->payment->status->value === 'rejected',
                    ])>
                        {{ $order->payment->status->label() }}
                    </span>
                </div>
            @endif
        </div>

        {{-- Informasi deadline jika pending dan bukan COD --}}
        @if ($order->isPending() && $order->payment_deadline && $order->payment_method !== \App\Enums\PaymentMethod::Cod)
            <div class="mt-3 p-2.5 bg-yellow-50 rounded-lg border border-yellow-200">
                <p class="text-xs text-yellow-700 font-medium">
                    ⏰ Hubungi admin untuk konfirmasi pembayaran sebelum
                    {{ $order->payment_deadline->translatedFormat('d M Y, H:i') }}
                </p>
            </div>
        @endif

        {{-- Alasan pembayaran ditolak --}}
        @if ($order->payment && $order->payment->status->value === 'rejected')
            <div class="mt-3 p-3 bg-red-50 rounded-lg border border-red-200">
                <p class="text-xs font-semibold text-red-700 mb-1">⚠️ Pembayaran Ditolak</p>
                @if ($order->payment->rejection_notes)
                    <p class="text-xs text-red-600 leading-relaxed">{{ $order->payment->rejection_notes }}</p>
                @else
                    <p class="text-xs text-red-500">Hubungi admin untuk informasi lebih lanjut.</p>
                @endif
            </div>
        @endif

        {{-- Alasan pesanan dibatalkan --}}
        @if ($order->status->value === 'cancelled')
            @php
                // admin_notes format: "Dibatalkan: <alasan>" atau bisa multi-baris
                $cancelNote = null;
                if ($order->admin_notes) {
                    // Ambil baris yang mengandung "Dibatalkan:"
                    $lines = explode("\n", $order->admin_notes);
                    foreach ($lines as $line) {
                        if (str_starts_with(trim($line), 'Dibatalkan:')) {
                            $cancelNote = trim(substr(trim($line), strlen('Dibatalkan:')));
                            break;
                        }
                    }
                    // Jika tidak ada prefix, tampilkan seluruh admin_notes
                    if (! $cancelNote) {
                        $cancelNote = $order->admin_notes;
                    }
                }
            @endphp
            <div class="mt-3 p-3 bg-red-50 rounded-lg border border-red-200">
                <p class="text-xs font-semibold text-red-700 mb-1">❌ Pesanan Dibatalkan</p>
                @if ($cancelNote)
                    <p class="text-xs text-red-600 leading-relaxed">{{ $cancelNote }}</p>
                @else
                    <p class="text-xs text-red-500">Hubungi admin untuk informasi lebih lanjut.</p>
                @endif
            </div>
        @endif
    </div>

    {{-- ══ PRODUK ══════════════════════════════════════════════════════════ --}}
    <div class="bg-white rounded-xl border border-slate-100 shadow-sm overflow-hidden mb-4">
        <div class="px-4 py-3 border-b border-slate-100">
            <h2 class="text-sm font-semibold text-slate-700">Produk ({{ $order->items->count() }})</h2>
        </div>
        <div class="divide-y divide-slate-50">
            @foreach ($order->items as $item)
                <div class="px-4 py-3 flex items-center gap-3">
                    @if ($item->product_image)
                        <img src="{{ Storage::url($item->product_image) }}"
                             alt="{{ $item->product_name }}"
                             class="w-12 h-12 rounded-xl object-cover shrink-0" />
                    @else
                        <div class="w-12 h-12 rounded-xl bg-orange-50 flex items-center justify-center shrink-0">
                            <svg class="w-6 h-6 text-orange-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                      d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0H3"/>
                            </svg>
                        </div>
                    @endif
                    <div class="flex-1 min-w-0">
                        <p class="text-sm font-medium text-slate-800 line-clamp-1">{{ $item->product_name }}</p>
                        <p class="text-xs text-slate-400 mt-0.5">
                            {{ $item->quantity }} × Rp {{ number_format($item->sell_price, 0, ',', '.') }}
                        </p>
                        @if ($item->notes)
                            <p class="text-xs text-orange-600 mt-0.5 italic">📝 {{ $item->notes }}</p>
                        @endif
                    </div>
                    <p class="text-sm font-bold text-slate-700 shrink-0">
                        Rp {{ number_format($item->subtotal, 0, ',', '.') }}
                    </p>
                </div>
            @endforeach
        </div>
    </div>

    {{-- ══ INFO PENGIRIMAN ═════════════════════════════════════════════════ --}}
    <div class="bg-white rounded-xl border border-slate-100 shadow-sm p-4 mb-4">
        <h2 class="text-sm font-semibold text-slate-700 mb-3">Info Pengiriman</h2>
        <div class="space-y-2">
            <div class="flex gap-3">
                <svg class="w-4 h-4 text-slate-400 mt-0.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"/>
                </svg>
                <div>
                    <p class="text-xs text-slate-400">Penerima</p>
                    <p class="text-sm text-slate-800">{{ $order->customer_name }} · {{ $order->customer_phone }}</p>
                </div>
            </div>
            <div class="flex gap-3">
                <svg class="w-4 h-4 text-slate-400 mt-0.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"/>
                </svg>
                <div>
                    <p class="text-xs text-slate-400">Alamat</p>
                    <p class="text-sm text-slate-800 leading-relaxed">{{ $order->delivery_address_snapshot }}</p>
                </div>
            </div>
            @if ($order->deliveryArea)
                <div class="flex gap-3">
                    <svg class="w-4 h-4 text-slate-400 mt-0.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M8.25 18.75a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 01-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h1.125c.621 0 1.129-.504 1.09-1.124a17.902 17.902 0 00-3.213-9.193 2.056 2.056 0 00-1.58-.86H14.25M16.5 18.75h-2.25m0-11.177v-.958c0-.568-.422-1.048-.987-1.106a48.554 48.554 0 00-10.026 0 1.106 1.106 0 00-.987 1.106v7.635m12-6.677v6.677m0 4.5v-4.5m0 0h-12"/>
                    </svg>
                    <div>
                        <p class="text-xs text-slate-400">Area Pengiriman</p>
                        <p class="text-sm text-slate-800">{{ $order->deliveryArea->name }}</p>
                    </div>
                </div>
            @endif
            @if ($order->customer_notes)
                <div class="flex gap-3">
                    <svg class="w-4 h-4 text-slate-400 mt-0.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"/>
                    </svg>
                    <div>
                        <p class="text-xs text-slate-400">Catatan</p>
                        <p class="text-sm text-slate-800">{{ $order->customer_notes }}</p>
                    </div>
                </div>
            @endif
        </div>
    </div>

    {{-- ══ RINGKASAN HARGA ═════════════════════════════════════════════════ --}}
    <div class="bg-white rounded-xl border border-slate-100 shadow-sm p-4 mb-4">
        <h2 class="text-sm font-semibold text-slate-700 mb-3">Rincian Pembayaran</h2>
        <div class="space-y-2">
            <div class="flex justify-between text-sm">
                <span class="text-slate-600">Subtotal</span>
                <span class="text-slate-800">Rp {{ number_format($order->subtotal, 0, ',', '.') }}</span>
            </div>
            <div class="flex justify-between text-sm">
                <span class="text-slate-600">Ongkos Kirim</span>
                <span class="text-slate-800">
                    @if ($order->delivery_cost == 0)
                        <span class="text-green-600 font-medium">Gratis</span>
                    @else
                        Rp {{ number_format($order->delivery_cost, 0, ',', '.') }}
                    @endif
                </span>
            </div>
            @if ($order->discount_amount > 0)
                <div class="flex justify-between text-sm">
                    <span class="text-slate-600">Diskon</span>
                    <span class="text-green-600">- Rp {{ number_format($order->discount_amount, 0, ',', '.') }}</span>
                </div>
            @endif
        </div>
        <div class="border-t border-slate-100 mt-3 pt-3 flex justify-between">
            <span class="text-sm font-bold text-slate-800">Total</span>
            <span class="text-base font-black text-orange-500">
                Rp {{ number_format($order->grand_total, 0, ',', '.') }}
            </span>
        </div>
        <div class="mt-2 pt-2 border-t border-slate-50">
            <p class="text-xs text-slate-500">
                Metode Bayar:
                <span class="font-medium text-slate-700">{{ $order->payment_method->label() }}</span>
            </p>
        </div>
    </div>

    {{-- ══ TIMELINE STATUS ═════════════════════════════════════════════════ --}}
    <div class="bg-white rounded-xl border border-slate-100 shadow-sm p-4 mb-4">
        <h2 class="text-sm font-semibold text-slate-700 mb-4">Riwayat Status</h2>
        <div class="space-y-0">
            @foreach ($timeline as $i => $step)
                <div class="flex gap-3 pb-4 relative" wire:key="step-{{ $i }}">
                    @if (!$loop->last)
                        <div class="absolute left-[7px] top-4 bottom-0 w-px
                            {{ $step['done'] || $step['active'] ? 'bg-orange-200' : 'bg-slate-100' }}">
                        </div>
                    @endif

                    @if ($step['active'])
                        <div class="w-4 h-4 rounded-full bg-orange-500 ring-4 ring-orange-100 shrink-0 mt-0.5 z-10"></div>
                    @elseif ($step['done'])
                        <div class="w-4 h-4 rounded-full bg-orange-400 shrink-0 mt-0.5 z-10"></div>
                    @else
                        <div class="w-4 h-4 rounded-full border-2 border-slate-200 bg-white shrink-0 mt-0.5 z-10"></div>
                    @endif

                    <div class="flex-1 -mt-0.5">
                        <p @class([
                            'text-sm font-medium',
                            'text-orange-600' => $step['active'],
                            'text-slate-700'  => $step['done'],
                            'text-slate-400'  => !$step['done'] && !$step['active'],
                        ])>
                            {{ $step['label'] }}
                            @if ($step['active'])
                                <span class="ml-1.5 text-[10px] font-semibold bg-orange-100 text-orange-700 px-1.5 py-0.5 rounded">
                                    Saat ini
                                </span>
                            @endif
                        </p>
                        @if ($step['time'])
                            <p class="text-xs text-slate-400 mt-0.5">
                                {{ $step['time']->translatedFormat('d M Y, H:i') }}
                            </p>
                        @elseif (!$step['done'] && !$step['active'])
                            <p class="text-xs text-slate-300">Belum terjadi</p>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    {{-- ══ TOMBOL CHAT ADMIN WHATSAPP ══════════════════════════════════════ --}}
    @php
        $waAdmin   = \App\Models\Setting::get('wa_admin');
        $waNumber  = $waAdmin ? preg_replace('/^0/', '62', preg_replace('/[^0-9]/', '', $waAdmin)) : null;
        $waMessage = urlencode('Halo Admin, saya ingin menanyakan pesanan saya dengan nomor ' . $order->order_number);
    @endphp

    @if ($waNumber)
        <div class="mb-4">
            <a href="https://wa.me/{{ $waNumber }}?text={{ $waMessage }}"
               target="_blank" rel="noopener"
               class="w-full h-12 flex items-center justify-center gap-2.5 bg-green-500 hover:bg-green-600
                      text-white text-sm font-semibold rounded-xl shadow-sm
                      active:scale-[0.98] transition-all">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
                </svg>
                Chat Admin WhatsApp
            </a>
            <p class="text-center text-[10px] text-slate-400 mt-1.5">
                Tanyakan status pesanan, pembayaran, atau pengiriman
            </p>
        </div>
    @endif

</div>
