<x-app-layout>
    <x-slot name="header">
        <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
            <div class="flex items-center gap-2 min-w-0">
                <div class="w-8 h-8 sm:w-9 sm:h-9 md:w-10 md:h-10 gradient-primary rounded-lg sm:rounded-xl flex items-center justify-center shadow-lg flex-shrink-0">
                    <i class="fas fa-receipt text-amber-400 text-xs sm:text-sm"></i>
                </div>
                <div class="min-w-0">
                    <h1 class="text-base sm:text-lg md:text-xl font-bold text-slate-800 truncate">Detail Pesanan Admin</h1>
                    <p class="text-[10px] sm:text-xs text-slate-500 truncate">#{{ $order->order_id }}</p>
                </div>
            </div>
            <a href="{{ route('admin.order.index') }}"
                class="flex-shrink-0 inline-flex items-center gap-1.5 px-3 py-1.5 sm:px-4 sm:py-2 bg-white
                       hover:bg-slate-50 border border-slate-200 text-slate-700 text-xs sm:text-sm rounded-lg sm:rounded-xl transition shadow-sm">
                <i class="fas fa-arrow-left text-[10px] sm:text-xs"></i><span>Kembali</span>
            </a>
        </div>
    </x-slot>

    @php
    $statusColors = [
    'processing'=>'bg-amber-50 text-amber-700 border-amber-200',
    'shipped'=>'bg-blue-50 text-blue-700 border-blue-200',
    'delivered'=>'bg-purple-50 text-purple-700 border-purple-200',
    'completed'=>'bg-emerald-50 text-emerald-700 border-emerald-200',
    'cancelled'=>'bg-rose-50 text-rose-700 border-rose-200'
    ];
    $statusLabels = [
    'processing'=>'Sedang Dikemas',
    'shipped'=>'Dikirim',
    'delivered'=>'Hampir Tiba',
    'completed'=>'Selesai',
    'cancelled'=>'Dibatalkan'
    ];
    $statusClass = $statusColors[$order->status] ?? 'bg-slate-50 text-slate-700 border-slate-200';
    $statusLabel = $statusLabels[$order->status] ?? ucfirst($order->status);
    @endphp

    <div class="space-y-4 sm:space-y-6">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6">

            {{-- ── Left Column ── --}}
            <div class="lg:col-span-2 space-y-4 sm:space-y-6">

                {{-- Status Card --}}
                <div class="bg-white rounded-xl sm:rounded-2xl shadow-md border border-slate-200 overflow-hidden transition-all hover:shadow-lg">
                    <div class="p-4 sm:p-5 md:p-6">
                        <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 mb-4">
                            <div>
                                <h3 class="text-sm sm:text-base font-bold text-slate-800">Status Pesanan</h3>
                                <p class="text-[10px] sm:text-xs text-slate-500 mt-0.5">{{ $order->created_at->format('d M Y, H:i') }}</p>
                            </div>
                            <span class="px-3 sm:px-4 py-1.5 sm:py-2 text-xs sm:text-sm font-bold rounded-full {{ $statusClass }} border inline-flex items-center whitespace-nowrap">
                                <i class="fas fa-circle mr-1.5 text-[8px] sm:text-[10px]"></i>{{ $statusLabel }}
                            </span>
                        </div>

                        {{-- Update Status --}}
                        @if(!$order->isCancelled() && !$order->isCompleted())
                        <div class="border-t border-slate-200 pt-4 mb-6">
                            <h4 class="text-xs sm:text-sm font-semibold text-slate-800 mb-3">Ubah Status Pesanan</h4>
                            <form action="{{ route('admin.order.update-status', $order->order_id) }}" method="POST">
                                @csrf
                                @method('PUT')
                                <div class="flex flex-col xs:flex-row gap-3">
                                    <select name="status"
    class="flex-1 px-3 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-xs sm:text-sm focus:ring-2 focus:ring-amber-500 focus:border-amber-500">
    
    @php
    $nextSteps = [
        'processing' => ['shipped' => 'Dikirim'],
        'shipped'    => ['delivered' => 'Hampir Tiba'],
        'delivered'  => ['completed' => 'Selesai'],
    ];
    $allowed = $nextSteps[$order->status] ?? [];
    @endphp

    {{-- Current status (disabled, just for display) --}}
    <option disabled selected>{{ $statusLabel }} (saat ini)</option>

    {{-- Next step only --}}
    @foreach($allowed as $value => $label)
        <option value="{{ $value }}">{{ $label }}</option>
    @endforeach

    {{-- Cancel always available --}}
    <option value="cancelled">Dibatalkan</option>
</select>
                                    <button type="submit"
                                        class="px-4 py-2.5 bg-gradient-to-r from-amber-500 to-amber-600 hover:from-amber-600 hover:to-amber-700 text-white text-xs sm:text-sm font-medium rounded-xl shadow-md hover:shadow-lg transition-all duration-200 whitespace-nowrap">
                                        <i class="fas fa-sync-alt mr-1"></i>Update Status
                                    </button>
                                </div>
                                @if($order->payment && $order->payment->payment_method === 'cash' && !$order->payment->isPaid())
                                <p class="text-[10px] sm:text-xs text-amber-600 mt-2 flex items-center gap-1">
                                    <i class="fas fa-info-circle"></i>
                                    COD: Status pembayaran otomatis jadi <strong>Paid</strong> saat order <strong>Selesai</strong>
                                </p>
                                @endif
                            </form>
                        </div>
                        @endif

                        {{-- Timeline --}}
                        <div>
                            <h4 class="text-xs sm:text-sm font-semibold text-slate-800 mb-3 sm:mb-4 flex items-center">
                                <i class="fas fa-history mr-2 text-amber-600"></i>Riwayat Pesanan
                            </h4>
                            <div class="relative">
                                <div class="absolute left-3 top-0 bottom-0 w-0.5 bg-slate-200"></div>
                                <div class="space-y-4 sm:space-y-6">
                                    <div class="relative pl-8 sm:pl-10">
                                        <div class="absolute left-0 w-5 h-5 sm:w-6 sm:h-6 bg-gradient-to-br from-amber-500 to-amber-600 rounded-full flex items-center justify-center shadow-sm border-2 border-white">
                                            <i class="fas fa-box text-white text-[6px] sm:text-[8px]"></i>
                                        </div>
                                        <div class="bg-amber-50 rounded-lg sm:rounded-xl p-3 border border-amber-200">
                                            <h5 class="text-xs sm:text-sm font-bold text-amber-700">Pesanan Dibuat</h5>
                                            <p class="text-[10px] sm:text-xs text-slate-500 mt-0.5">{{ $order->created_at->format('d M Y, H:i') }}</p>
                                        </div>
                                    </div>

                                    @if($order->payment && $order->payment->isPaid())
                                    <div class="relative pl-8 sm:pl-10">
                                        <div class="absolute left-0 w-5 h-5 sm:w-6 sm:h-6 bg-gradient-to-br from-emerald-500 to-emerald-600 rounded-full flex items-center justify-center shadow-sm border-2 border-white">
                                            <i class="fas fa-credit-card text-white text-[6px] sm:text-[8px]"></i>
                                        </div>
                                        <div class="bg-slate-50 rounded-lg sm:rounded-xl p-3 border border-slate-200">
                                            <h5 class="text-xs sm:text-sm font-bold text-slate-800">Pembayaran Dikonfirmasi</h5>
                                            <p class="text-[10px] sm:text-xs text-slate-500 mt-0.5">{{ $order->payment->payment_date?->format('d M Y, H:i') }}</p>
                                        </div>
                                    </div>
                                    @endif

                                    @if($order->hasTrackingNumber())
                                    <div class="relative pl-8 sm:pl-10">
                                        <div class="absolute left-0 w-5 h-5 sm:w-6 sm:h-6 bg-gradient-to-br from-sky-500 to-sky-600 rounded-full flex items-center justify-center shadow-sm border-2 border-white">
                                            <i class="fas fa-barcode text-white text-[6px] sm:text-[8px]"></i>
                                        </div>
                                        <div class="bg-sky-50 rounded-lg sm:rounded-xl p-3 border border-sky-200">
                                            <h5 class="text-xs sm:text-sm font-bold text-sky-700">Resi Ditetapkan</h5>
                                            <p class="font-mono text-xs font-bold text-slate-800 mt-0.5 tracking-wider">{{ $order->tracking_number }}</p>
                                            <p class="text-[10px] text-slate-400 mt-0.5">{{ $order->courier_name }}</p>
                                        </div>
                                    </div>
                                    @endif

                                    @if(in_array($order->status, ['shipped','delivered','completed']))
                                    <div class="relative pl-8 sm:pl-10">
                                        <div class="absolute left-0 w-5 h-5 sm:w-6 sm:h-6 bg-gradient-to-br from-blue-500 to-blue-600 rounded-full flex items-center justify-center shadow-sm border-2 border-white">
                                            <i class="fas fa-truck text-white text-[6px] sm:text-[8px]"></i>
                                        </div>
                                        <div class="bg-blue-50 rounded-lg sm:rounded-xl p-3 border border-blue-200">
                                            <h5 class="text-xs sm:text-sm font-bold text-blue-700">Pesanan Dikirim</h5>
                                            <p class="text-[10px] sm:text-xs text-slate-500 mt-0.5">{{ $order->updated_at->format('d M Y, H:i') }}</p>
                                        </div>
                                    </div>
                                    @endif

                                    @if(in_array($order->status, ['delivered','completed']))
                                    <div class="relative pl-8 sm:pl-10">
                                        <div class="absolute left-0 w-5 h-5 sm:w-6 sm:h-6 bg-gradient-to-br from-purple-500 to-purple-600 rounded-full flex items-center justify-center shadow-sm border-2 border-white">
                                            <i class="fas fa-warehouse text-white text-[6px] sm:text-[8px]"></i>
                                        </div>
                                        <div class="bg-purple-50 rounded-lg sm:rounded-xl p-3 border border-purple-200">
                                            <h5 class="text-xs sm:text-sm font-bold text-purple-700">Hampir Tiba</h5>
                                            <p class="text-[10px] sm:text-xs text-slate-500 mt-0.5">{{ $order->updated_at->format('d M Y, H:i') }}</p>
                                        </div>
                                    </div>
                                    @endif

                                    @if($order->isCompleted())
                                    <div class="relative pl-8 sm:pl-10">
                                        <div class="absolute left-0 w-5 h-5 sm:w-6 sm:h-6 bg-gradient-to-br from-emerald-500 to-emerald-600 rounded-full flex items-center justify-center shadow-sm border-2 border-white">
                                            <i class="fas fa-check-double text-white text-[6px] sm:text-[8px]"></i>
                                        </div>
                                        <div class="bg-emerald-50 rounded-lg sm:rounded-xl p-3 border border-emerald-200">
                                            <h5 class="text-xs sm:text-sm font-bold text-emerald-700">Pesanan Selesai</h5>
                                            <p class="text-[10px] sm:text-xs text-slate-500 mt-0.5">{{ $order->updated_at->format('d M Y, H:i') }}</p>
                                        </div>
                                    </div>
                                    @endif

                                    @if($order->isCancelled())
                                    <div class="relative pl-8 sm:pl-10">
                                        <div class="absolute left-0 w-5 h-5 sm:w-6 sm:h-6 bg-gradient-to-br from-rose-500 to-rose-600 rounded-full flex items-center justify-center shadow-sm border-2 border-white">
                                            <i class="fas fa-times text-white text-[6px] sm:text-[8px]"></i>
                                        </div>
                                        <div class="bg-rose-50 rounded-lg sm:rounded-xl p-3 border border-rose-200">
                                            <h5 class="text-xs sm:text-sm font-bold text-rose-700">Pesanan Dibatalkan</h5>
                                            <p class="text-[10px] sm:text-xs text-rose-600 mt-0.5">{{ $order->updated_at->format('d M Y, H:i') }}</p>
                                        </div>
                                    </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Produk --}}
                <div class="bg-white rounded-xl sm:rounded-2xl shadow-md border border-slate-200 overflow-hidden transition-all hover:shadow-lg">
                    <div class="p-4 sm:p-5 md:p-6">
                        <h3 class="text-sm sm:text-base font-bold text-slate-800 mb-3 sm:mb-4 flex items-center">
                            <i class="fas fa-boxes mr-2 text-amber-600"></i>Produk yang Dibeli
                            <span class="ml-auto text-[10px] sm:text-xs font-normal text-slate-500">{{ $order->items->count() }} item</span>
                        </h3>
                        <div class="space-y-3 sm:space-y-4">
                            @foreach($order->items as $item)
                            <div class="flex flex-col xs:flex-row gap-3 p-3 {{ !$loop->last ? 'border-b border-slate-200' : '' }}">
                                @php
                                $productImage = $item->product->image ?? null;
                                $imageUrl = null;
                                if ($productImage) {
                                if (is_array($productImage) && count($productImage) > 0) { $imageUrl = asset('storage/'.$productImage[0]); }
                                elseif (is_string($productImage)) {
                                $decoded = json_decode($productImage, true);
                                $imageUrl = is_array($decoded) && count($decoded) > 0 ? asset('storage/'.$decoded[0]) : asset('storage/'.$productImage);
                                }
                                }
                                @endphp
                                <div class="flex-shrink-0 w-full xs:w-16 sm:w-20 h-16 sm:h-20 bg-gradient-to-br from-amber-100 to-slate-100 rounded-lg overflow-hidden border border-slate-200">
                                    @if($imageUrl) <img src="{{ $imageUrl }}" alt="{{ $item->product->product_name }}" class="w-full h-full object-cover">
                                    @else <div class="w-full h-full flex items-center justify-center"><i class="fas fa-box text-amber-400"></i></div>
                                    @endif
                                </div>
                                <div class="flex-1 min-w-0">
                                    <div class="flex flex-col xs:flex-row xs:items-start justify-between gap-2">
                                        <div>
                                            <h4 class="text-xs sm:text-sm font-semibold text-slate-800">{{ $item->product->product_name }}</h4>
                                            <p class="text-[10px] sm:text-xs text-slate-500 mt-0.5">{{ $item->product->category->category_name ?? '-' }}</p>
                                        </div>
                                        <div class="text-right">
                                            <p class="text-[10px] sm:text-xs text-slate-500">Harga Satuan</p>
                                            <p class="text-xs sm:text-sm font-semibold text-slate-800">Rp {{ number_format($item->subtotal / $item->quantity, 0, ',', '.') }}</p>
                                        </div>
                                    </div>
                                    <div class="flex items-center justify-between mt-2">
                                        <div class="flex items-center gap-2">
                                            <span class="text-[10px] sm:text-xs text-slate-500">Jumlah:</span>
                                            <span class="px-2 py-0.5 bg-amber-50 rounded-lg text-xs font-bold text-amber-700 border border-amber-200">{{ $item->quantity }}</span>
                                            @if($item->product->weight)
                                            <span class="text-[10px] text-slate-400">· {{ $item->product->weight >= 1000 ? round($item->product->weight/1000,1).'kg' : $item->product->weight.'g' }}</span>
                                            @endif
                                        </div>
                                        <p class="text-xs sm:text-sm font-bold text-amber-600">Rp {{ number_format($item->subtotal, 0, ',', '.') }}</p>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>

                {{-- Alamat --}}
                @if($order->address)
                <div class="bg-white rounded-xl sm:rounded-2xl shadow-md border border-slate-200 overflow-hidden transition-all hover:shadow-lg">
                    <div class="p-4 sm:p-5">
                        <h3 class="text-sm font-bold text-slate-800 mb-3 flex items-center">
                            <i class="fas fa-map-marker-alt mr-2 text-amber-600"></i>Alamat Pengiriman
                        </h3>
                        <div class="bg-slate-50 rounded-xl p-3 border border-slate-200">
                            <div class="flex items-center gap-2 mb-1">
                                <span class="font-bold text-slate-800 text-sm">{{ $order->address->recipient_name }}</span>
                                <span class="text-slate-400 text-xs">·</span>
                                <span class="text-slate-600 text-xs">{{ $order->address->phone }}</span>
                            </div>
                            <p class="text-xs text-slate-600 leading-relaxed">{{ $order->address->full_address }}</p>
                        </div>
                    </div>
                </div>
                @endif

            </div>

            {{-- ── Right Column ── --}}
            <div class="lg:col-span-1">
                <div class="bg-white rounded-xl sm:rounded-2xl shadow-md border border-slate-200 overflow-hidden sticky top-4 sm:top-6 transition-all hover:shadow-lg">
                    <div class="p-4 sm:p-5 md:p-6 space-y-4">

                        {{-- Ringkasan --}}
                        <div>
                            <h3 class="text-sm sm:text-base font-bold text-slate-800 mb-3 flex items-center">
                                <i class="fas fa-receipt mr-2 text-amber-600"></i>Ringkasan Pembayaran
                            </h3>
                            <div class="space-y-2 text-xs sm:text-sm bg-slate-50 rounded-xl p-3 sm:p-4 mb-3">
                                <div class="flex justify-between">
                                    <span class="text-slate-600">Subtotal Produk</span>
                                    <span class="font-semibold text-slate-800">Rp {{ number_format($order->product_subtotal, 0, ',', '.') }}</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-slate-600">Ongkos Kirim</span>
                                    @if((int)$order->shipping_cost === 0)
                                    <span class="inline-flex items-center px-2 py-0.5 bg-emerald-50 text-emerald-700 rounded-full text-[10px] sm:text-xs font-semibold border border-emerald-200">
                                        <i class="fas fa-check-circle mr-1"></i>GRATIS
                                    </span>
                                    @else
                                    <span class="font-semibold text-slate-800">Rp {{ number_format($order->shipping_cost, 0, ',', '.') }}</span>
                                    @endif
                                </div>
                            </div>
                            <div class="flex justify-between items-center p-3 sm:p-4 bg-gradient-to-r from-amber-50 to-slate-50 rounded-xl border border-amber-100">
                                <span class="font-bold text-slate-800 text-xs sm:text-sm">Total Pembayaran</span>
                                <span class="text-lg sm:text-xl font-extrabold text-amber-600">Rp {{ number_format($order->total_price, 0, ',', '.') }}</span>
                            </div>
                        </div>

                        {{-- Status Pembayaran --}}
                        @if($order->payment)
                        <div class="border-t border-slate-200 pt-4">
                            <h4 class="text-xs sm:text-sm font-bold text-slate-800 mb-2 sm:mb-3 flex items-center">
                                <i class="fas fa-credit-card mr-2 text-amber-600"></i>Status Pembayaran
                            </h4>
                            <div class="bg-slate-50 rounded-xl p-3 sm:p-4 space-y-2">
                                <div class="flex items-center justify-between">
                                    <span class="text-[10px] sm:text-xs text-slate-500">Metode</span>
                                    <span class="text-xs sm:text-sm font-semibold text-slate-800">{{ strtoupper($order->payment->payment_method) }}</span>
                                </div>
                                <div class="flex items-center justify-between">
                                    <span class="text-[10px] sm:text-xs text-slate-500">Status</span>
                                    @php
                                    $psc = ['paid'=>'bg-emerald-50 text-emerald-700 border-emerald-200','failed'=>'bg-rose-50 text-rose-700 border-rose-200'];
                                    $pClass = $psc[$order->payment->status] ?? 'bg-amber-50 text-amber-700 border-amber-200';
                                    @endphp
                                    <span class="px-2 py-0.5 text-[10px] sm:text-xs font-semibold rounded-full {{ $pClass }} border">
                                        {{ ucfirst($order->payment->status) }}
                                    </span>
                                </div>
                                @if($order->payment->isPaid())
                                <div class="mt-2 p-2 bg-emerald-50 rounded-lg border border-emerald-200">
                                    <p class="text-[8px] sm:text-xs text-emerald-700">
                                        <i class="fas fa-check-circle mr-1"></i>Dibayar {{ $order->payment->payment_date->format('d M Y, H:i') }}
                                    </p>
                                </div>
                                @elseif($order->payment->payment_method === 'cash')
                                <div class="mt-2 p-2 bg-amber-50 rounded-lg border border-amber-200">
                                    <p class="text-[8px] sm:text-xs text-amber-700">
                                        <i class="fas fa-info-circle mr-1"></i>COD: Bayar saat barang sampai
                                    </p>
                                </div>
                                @endif
                            </div>
                        </div>
                        @endif

                        {{-- Panel Resi (admin) --}}
                        @include('orders.admin._resi_panel', ['order' => $order])

                        {{-- Cancel button --}}
                        @if(!$order->isCancelled() && !$order->isCompleted())
                        <form action="{{ route('admin.order.cancel', $order->order_id) }}" method="POST" class="mt-2">
                            @csrf
                            <button type="submit"
                                onclick="return confirm('Yakin membatalkan order ini? Stok akan dikembalikan.')"
                                class="w-full inline-flex justify-center items-center px-4 py-2.5 sm:py-3
                                       bg-gradient-to-r from-rose-500 to-rose-600 hover:from-rose-600 hover:to-rose-700 text-white text-xs sm:text-sm font-medium
                                       rounded-lg sm:rounded-xl shadow-md hover:shadow-lg transition-all duration-200">
                                <i class="fas fa-times-circle mr-2"></i>Batalkan Order
                            </button>
                        </form>
                        @endif

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

        </div>
    </div>

    <style>
        @media (max-width: 480px) {
            .xs\:flex-row {
                flex-direction: row;
            }

            .xs\:w-16 {
                width: 4rem;
            }
        }

        button,
        a,
        [role="button"] {
            touch-action: manipulation;
            min-height: 40px;
        }

        input,
        select,
        textarea {
            font-size: 16px !important;
        }

        /* Smooth transitions */
        .transition-all {
            transition-property: all;
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            transition-duration: 200ms;
        }

        /* Card hover effect */
        .hover\:shadow-lg:hover {
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
    </style>
</x-app-layout>