<x-admin-layout>
    <div class="mb-8">
        <div class="flex flex-col sm:flex-row sm:items-center justify-between w-full gap-4">
            <div class="flex items-center gap-4">
                <a href="{{ route('admin.orders.index') }}" class="p-2 text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 dark:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-900/30 dark:bg-indigo-900/30 rounded-full transition-colors bg-white dark:bg-slate-800 shadow-sm border border-gray-100 dark:border-slate-700">
                    <x-heroicon-o-arrow-left class="w-5 h-5" />
                </a>
                <h2 class="font-black text-2xl text-gray-900 dark:text-white leading-tight tracking-tight">
                    {{ __('Detail Pesanan') }} <span class="text-indigo-600 dark:text-indigo-400 font-mono text-xl ml-2 font-bold tracking-wide">#{{ $order->order_code }}</span>
                </h2>
            </div>
            
            @if($order->status === 'pending')
            <div class="flex flex-wrap items-center gap-3">
                <form action="{{ route('admin.orders.update', $order) }}" method="POST" data-confirm="Tolak pesanan ini?">
                    @csrf
                    @method('PUT')
                    <input type="hidden" name="status" value="cancelled">
                    <button type="submit" class="inline-flex items-center px-4 py-2 bg-white dark:bg-slate-800 border border-gray-300 dark:border-slate-600 rounded-lg shadow-sm text-sm font-bold text-gray-700 dark:text-gray-200 hover:bg-red-50 dark:hover:bg-red-900/30 dark:bg-red-900/30 hover:text-red-700 dark:text-red-400 hover:border-red-200 focus:outline-none transition-all">
                        <x-heroicon-o-x-mark class="-ml-1 mr-1.5 h-4 w-4" /> Tolak
                    </button>
                </form>
                <form action="{{ route('admin.orders.update', $order) }}" method="POST" data-confirm="Konfirmasi pembayaran dan akses produk?">
                    @csrf
                    @method('PUT')
                    <input type="hidden" name="status" value="paid">
                    <button type="submit" class="inline-flex items-center px-5 py-2 border border-transparent rounded-lg shadow-sm text-sm font-bold text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none transition-all hover:shadow-indigo-500/30 hover:-translate-y-0.5">
                        <x-heroicon-s-check-circle class="-ml-1 mr-2 h-5 w-5 opacity-80" />
                        Konfirmasi Lunas
                    </button>
                </form>
            </div>
            @endif
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Order Details Area -->
        <div class="col-span-1 lg:col-span-2 space-y-6">
            <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-gray-100 dark:border-slate-700 overflow-hidden">
                <div class="p-6 border-b border-gray-100 dark:border-slate-700">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Informasi Pemesan & Produk</h3>
                </div>
                <div class="p-6 space-y-6">
                    <div class="flex justify-between items-start">
                        <div>
                            <p class="text-sm text-gray-500 dark:text-gray-400 mb-1">Pelanggan</p>
                            <p class="font-medium text-gray-900 dark:text-white text-lg">{{ $order->user->name ?? 'User Terhapus' }}</p>
                            <p class="text-sm text-gray-500 dark:text-gray-400">{{ $order->user->email ?? '-' }}</p>
                            <p class="text-sm text-gray-500 dark:text-gray-400">{{ $order->user->phone ?? '-' }}</p>
                        </div>
                        <div class="text-right">
                            <p class="text-sm text-gray-500 dark:text-gray-400 mb-1">Waktu Pesanan</p>
                            <p class="font-medium text-gray-900 dark:text-white">{{ $order->created_at->format('d M Y, H:i') }}</p>
                            <p class="text-sm text-gray-500 dark:text-gray-400">{{ $order->created_at->diffForHumans() }}</p>
                        </div>
                    </div>

                    <div class="border-t border-gray-100 dark:border-slate-700 pt-6">
                        <p class="text-sm text-gray-500 dark:text-gray-400 mb-3">Item Pesanan</p>
                        <div class="flex items-center p-4 bg-gray-50 dark:bg-slate-700/50 border border-gray-100 dark:border-slate-700 rounded-lg">
                            <div class="flex-shrink-0 h-16 w-16 bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-md overflow-hidden mr-4">
                                @if(isset($order->product) && $order->product->thumbnail)
                                    <img src="{{ Storage::url($order->product->thumbnail) }}" alt="{{ $order->product->name }}" class="h-full w-full object-cover">
                                @else
                                    <div class="h-full w-full flex items-center justify-center bg-gray-100 dark:bg-slate-700 text-gray-400">
                                        <x-heroicon-o-cube class="w-8 h-8" />
                                    </div>
                                @endif
                            </div>
                            <div class="flex-1">
                                <h4 class="font-medium text-gray-900 dark:text-white">{{ $order->product->name ?? 'Produk Terhapus' }}</h4>
                                <p class="text-sm text-gray-500 dark:text-gray-400">{{ $order->product->category->name ?? '' }}</p>
                            </div>
                            <div class="text-right">
                                <p class="font-bold text-gray-900 dark:text-white text-lg">Rp {{ number_format($order->amount, 0, ',', '.') }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-gray-100 dark:border-slate-700 overflow-hidden">
                <div class="p-6 border-b border-gray-100 dark:border-slate-700">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Bukti Pembayaran</h3>
                </div>
                <div class="p-6">
                    @if($order->paymentProof)
                        <div class="mb-4 text-center">
                            <a href="{{ Storage::url($order->paymentProof->image_path) }}" target="_blank" class="inline-block relative rounded-lg border border-gray-200 dark:border-slate-700 p-2 hover:border-indigo-300 transition-colors">
                                <img src="{{ Storage::url($order->paymentProof->image_path) }}" alt="Bukti Transfer" class="max-w-full h-auto max-h-96 rounded-md object-contain">
                                <div class="absolute inset-0 bg-black bg-opacity-0 hover:bg-opacity-5 transition-opacity rounded-md flex items-center justify-center opacity-0 hover:opacity-100">
                                    <div class="bg-white dark:bg-slate-800 text-gray-900 dark:text-white px-3 py-1.5 rounded-full text-sm font-medium shadow-sm flex items-center">
                                        <x-heroicon-o-arrows-pointing-out class="w-4 h-4 mr-1"/> Perbesar
                                    </div>
                                </div>
                            </a>
                        </div>
                        @if($order->paymentProof->note)
                            <div class="bg-amber-50 border border-amber-100 rounded-lg p-4 mt-6">
                                <h4 class="text-sm font-medium text-amber-800 mb-1 flex items-center">
                                    <x-heroicon-o-chat-bubble-bottom-center-text class="w-4 h-4 mr-1" /> Catatan dari Pelanggan:
                                </h4>
                                <p class="text-sm text-amber-700 italic">"{{ $order->paymentProof->note }}"</p>
                            </div>
                        @endif
                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-4 text-center">Diunggah: {{ $order->paymentProof->created_at->format('d M Y, H:i') }}</p>
                    @else
                        <div class="text-center py-12">
                            <x-heroicon-o-document-text class="w-12 h-12 text-gray-300 mx-auto mb-3" />
                            <p class="text-gray-500 dark:text-gray-400 font-medium">Belum ada bukti pembayaran</p>
                            <p class="text-sm text-gray-400 mt-1">Pelanggan belum mengunggah bukti transfer.</p>
                        </div>
                    @endif
                </div>
            </div>
                
        </div>

        <!-- Sidebar Area -->
        <div class="col-span-1 space-y-6">
            <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-gray-100 dark:border-slate-700 overflow-hidden">
                <div class="p-6 border-b border-gray-100 dark:border-slate-700">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Status Pesanan</h3>
                </div>
                <div class="p-6 space-y-6">
                    <div>
                        <p class="text-sm text-gray-500 dark:text-gray-400 mb-2">Status Saat Ini</p>
                        @if($order->status === 'paid')
                            <div class="flex items-center gap-3 p-3 bg-emerald-50 dark:bg-emerald-900/30 border border-emerald-100 dark:border-emerald-800 rounded-lg w-full">
                                <div class="bg-emerald-100 p-2 rounded-full text-emerald-600"><x-heroicon-s-check-circle class="w-5 h-5"/></div>
                                <div>
                                    <p class="font-semibold text-emerald-800">Lunas / Sukses</p>
                                    <p class="text-xs text-emerald-600">{{ $order->paid_at ? $order->paid_at->format('d M Y, H:i') : '' }}</p>
                                </div>
                            </div>
                        @elseif($order->status === 'pending')
                            <div class="flex items-center gap-3 p-3 bg-amber-50 border border-amber-100 rounded-lg w-full">
                                <div class="bg-amber-100 p-2 rounded-full text-amber-600"><x-heroicon-s-clock class="w-5 h-5"/></div>
                                <div>
                                    <p class="font-semibold text-amber-800">Menunggu Pembayaran</p>
                                </div>
                            </div>
                        @else
                            <div class="flex items-center gap-3 p-3 bg-red-50 dark:bg-red-900/30 border border-red-100 dark:border-red-800 rounded-lg w-full">
                                <div class="bg-red-100 p-2 rounded-full text-red-600"><x-heroicon-s-x-circle class="w-5 h-5"/></div>
                                <div>
                                    <p class="font-semibold text-red-800">Dibatalkan</p>
                                </div>
                            </div>
                        @endif
                    </div>

                    <div class="border-t border-gray-100 dark:border-slate-700 pt-6">
                        <p class="text-sm text-gray-500 dark:text-gray-400 mb-2">Metode Pemesanan</p>
                        <p class="font-medium text-gray-900 dark:text-white">{{ $order->method == 'whatsapp' ? 'WhatsApp Redirect' : 'Transfer Bank (Panel)' }}</p>
                    </div>

                    @if($order->status === 'paid')
                        <form action="{{ route('admin.orders.update', $order) }}" method="POST" class="border-t border-gray-100 dark:border-slate-700 pt-6" data-confirm="Kembalikan pesanan ini ke status Pending?">
                            @csrf
                            @method('PUT')
                            <input type="hidden" name="status" value="pending">
                            <button type="submit" class="w-full justify-center inline-flex items-center px-4 py-2 bg-white dark:bg-slate-800 border border-gray-300 dark:border-slate-600 rounded-lg shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-slate-700/50 dark:bg-slate-700/50 focus:outline-none transition-colors">
                                <x-heroicon-o-arrow-left class="-ml-1 mr-2 h-4 w-4" /> Reset ke Pending
                            </button>
                        </form>
                    @endif
                </div>
            </div>
            
            <form action="{{ route('admin.orders.destroy', $order) }}" method="POST" data-confirm="Hapus permanen pesanan ini?">
                @csrf
                @method('DELETE')
                <button type="submit" class="w-full justify-center inline-flex items-center px-4 py-2 border border-transparent rounded-lg text-sm font-medium text-red-600 hover:bg-red-50 dark:hover:bg-red-900/30 dark:bg-red-900/30 focus:outline-none transition-colors" {{ $order->status === 'paid' ? 'disabled' : '' }}>
                    <x-heroicon-o-trash class="-ml-1 mr-2 h-4 w-4" /> Hapus Seluruh Data Pesanan
                </button>
            </form>
        </div>
    </div>
</x-admin-layout>
