<x-app-layout>
    {{-- Google Font & Custom Styles --}}
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap');
        .font-jakarta { font-family: 'Plus Jakarta Sans', sans-serif; }
        .animate-in { animation: fadeIn 0.3s ease-out; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        @media print {
            .no-print { display: none !important; }
            body { background: white; }
            .max-w-5xl { max-width: 100% !important; padding: 0 !important; }
        }
    </style>

    {{-- Definisi Variabel Review --}}
    @php
        // Hapus atau kosongkan ini agar tidak bentrok
        $review = null; 
    @endphp

    <div class="max-w-5xl mx-auto px-4 sm:px-6 py-8 font-jakarta bg-[#FAF7F2] min-h-screen">
        
        {{-- HEADER SECTION --}}
        <div class="flex flex-col md:flex-row md:items-center justify-between mb-6 gap-4">
            <div class="flex items-center gap-3">
                <div class="w-12 h-12 bg-[#fef3c7] rounded-xl flex items-center justify-center">
                    <i class="fas fa-receipt text-[#d97706] text-xl"></i>
                </div>
                <div>
                    <h1 class="text-2xl md:text-3xl font-bold text-[#2c1a0e] tracking-tight">
                        Order <span class="text-[#f59e0b]">#{{ $order->order_number }}</span>
                    </h1>
                    <p class="text-xs text-[#8c6a4a] mt-0.5">Detail lengkap pesanan Anda</p>
                </div>
            </div>

            <div class="flex items-center gap-3">
                <a href="{{ route('orders.print', $order->id) }}" 
                   class="no-print inline-flex items-center gap-2 px-4 py-2.5 bg-white border border-[#e0d3c2] rounded-xl text-[#8c6a4a] hover:text-[#d97706] hover:border-[#f59e0b] transition shadow-sm">
                    <i class="fas fa-print text-sm"></i>
                    <span class="text-xs font-semibold">Cetak</span>
                </a>

                <a href="{{ route('orders.index') }}" 
                   class="no-print inline-flex items-center gap-2 text-sm font-semibold text-[#8c6a4a] hover:text-[#d97706] transition">
                    <i class="fas fa-arrow-left text-xs"></i>
                    Kembali
                </a>
            </div>
        </div>

       {{-- STATUS TRACKER --}}
        <div class="bg-white rounded-xl shadow-sm border border-[#e0d3c2] mb-6 p-6">
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-6 text-center sm:text-left">
                <div>
                    <p class="text-[10px] font-bold text-[#8c6a4a] uppercase tracking-wider mb-1">
                        <i class="fas fa-info-circle mr-1"></i> Status Pesanan
                    </p>
                    <span class="inline-flex items-center gap-1.5 px-4 py-1.5 text-xs font-bold rounded-full
                        {{ $order->status === 'completed' ? 'bg-emerald-100 text-emerald-700' : '' }}
                        {{ $order->status === 'cancelled' ? 'bg-red-100 text-red-700' : '' }}
                        {{ $order->status === 'waiting_payment' ? 'bg-amber-100 text-amber-700' : '' }}
                        {{ in_array($order->status, ['shipping', 'on_delivery']) ? 'bg-amber-100 text-amber-700' : '' }}
                        {{ in_array($order->status, ['paid', 'confirmed']) ? 'bg-blue-100 text-blue-700' : '' }}">
                        <i class="fas 
                            {{ $order->status === 'completed' ? 'fa-check-circle' : '' }}
                            {{ $order->status === 'cancelled' ? 'fa-times-circle' : '' }}
                            {{ $order->status === 'waiting_payment' ? 'fa-wallet' : '' }}
                            {{ in_array($order->status, ['shipping', 'on_delivery']) ? 'fa-truck' : '' }}
                            {{ in_array($order->status, ['paid', 'confirmed']) ? 'fa-clock' : '' }} 
                            text-[10px]"></i>
                        {{ str_replace('_', ' ', ucfirst($order->status)) }}
                    </span>
                </div>

                <div>
                    <p class="text-[10px] font-bold text-[#8c6a4a] uppercase tracking-wider mb-1">
                        <i class="fas fa-calendar-alt mr-1"></i> Waktu Transaksi
                    </p>
                    <p class="text-sm font-semibold text-[#2c1a0e]">
                        {{ $order->created_at->timezone('Asia/Jakarta')->translatedFormat('d M Y, H:i') }} WIB
                    </p>
                </div>

                <div>
                    <p class="text-[10px] font-bold text-[#8c6a4a] uppercase tracking-wider mb-1">
                        <i class="fas fa-truck mr-1"></i> Metode Pengiriman
                    </p>
                    <p class="text-sm font-semibold text-[#2c1a0e] uppercase">
                        {{ strtoupper($order->shipping_method ?? 'Reguler') }}
                    </p>
                </div>
            </div>

            {{-- TOMBOL BAYAR SEKARANG (Diletakkan di luar Grid agar lebar penuh/Full Width) --}}
            @if($order->status == 'waiting_payment' && $order->snap_token && Auth::user()->role === 'customer')
                <div class="mt-6 pt-6 border-t border-[#f0e7dc] text-center">
                    <div class="bg-amber-50 border-2 border-dashed border-amber-200 rounded-2xl p-6">
                        <p class="text-sm text-amber-800 font-semibold mb-4">
                            <i class="fas fa-clock mr-1 animate-pulse"></i> Pesanan ini menunggu pembayaran
                        </p>
                        <button id="pay-button" class="w-full md:w-auto px-12 py-4 bg-[#f59e0b] hover:bg-[#d97706] text-white font-bold rounded-xl transition shadow-lg flex items-center justify-center gap-2 mx-auto transform hover:scale-105">
                            <i class="fas fa-credit-card"></i> Bayar Sekarang via Midtrans
                        </button>
                    </div>
                </div>

                <script src="https://app.sandbox.midtrans.com/snap/snap.js" data-client-key="{{ config('midtrans.client_key') }}"></script>
                <script type="text/javascript">
                    var payButton = document.getElementById('pay-button');
                    payButton.addEventListener('click', function () {
                        window.snap.pay('{{ $order->snap_token }}', {
                            onSuccess: function(result) { window.location.reload(); },
                            onPending: function(result) { window.location.reload(); },
                            onError: function(result) { alert("Pembayaran gagal!"); }
                        });
                    });
                </script>
            @endif
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            
            {{-- KOLOM KIRI: Produk & Bukti --}}
            <div class="lg:col-span-2 space-y-6">
                {{-- Daftar Item --}}
                <div class="bg-white shadow-sm border border-[#e0d3c2] rounded-xl overflow-hidden">
                    <div class="px-6 py-4 bg-[#fef9f0] border-b border-[#e0d3c2]">
                        <h3 class="text-xs font-bold uppercase tracking-wider text-[#8c6a4a]">
                            <i class="fas fa-box-open mr-2 text-[#d97706]"></i> Rincian Item
                        </h3>
                    </div>
                    
                    <div class="divide-y divide-[#f0e7dc]">
                        @foreach($order->items as $item)
                            <div class="p-5 flex items-center gap-4 hover:bg-[#fef9f0] transition">
                                <div class="w-16 h-16 bg-[#fef9f0] rounded-xl overflow-hidden flex-shrink-0 border border-[#e0d3c2]">
                                    @php 
                                        $displayPath = null;
                                        if ($item->variant && $item->variant->images && $item->variant->images->count() > 0) {
                                            $displayPath = $item->variant->images->first()->image;
                                        } elseif ($item->product && $item->product->images && $item->product->images->count() > 0) {
                                            $displayPath = $item->product->images->first()->image;
                                        }
                                    @endphp
                                    <img src="{{ $displayPath ? asset('storage/' . str_replace('public/', '', $displayPath)) : 'https://placehold.co/200x200?text=No+Photo' }}" 
                                         class="w-full h-full object-cover" 
                                         onerror="this.src='https://placehold.co/200x200?text=No+Photo'">
                                </div>

                                <div class="flex-1">
                                    <p class="font-bold text-[#2c1a0e] text-sm">{{ $item->product->name }}</p>
                                    <div class="flex flex-wrap gap-2 mt-1.5">
                                        @if($item->variant)
                                            <span class="inline-flex items-center gap-1 px-2 py-0.5 bg-[#fef3c7] text-[#d97706] rounded-full text-[9px] font-semibold">
                                                <i class="fas fa-palette text-[8px]"></i> {{ $item->variant->color }}
                                            </span>
                                        @endif
                                        <span class="inline-flex items-center gap-1 px-2 py-0.5 bg-blue-50 text-blue-600 rounded-full text-[9px] font-semibold">
                                            <i class="fas fa-cube text-[8px]"></i> QTY: {{ $item->quantity }}
                                        </span>
                                    </div>
                                </div>

                                <div class="text-right">
                                    <p class="font-bold text-[#2c1a0e] text-sm">
                                        Rp {{ number_format($item->price * $item->quantity, 0, ',', '.') }}
                                    </p>
                                    <p class="text-[10px] text-[#c9b59b]">
                                        @ Rp {{ number_format($item->price, 0, ',', '.') }}
                                    </p>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    {{-- TOTALS --}}
                    <div class="p-5 bg-[#fef9f0] border-t border-[#e0d3c2] space-y-2">
                        <div class="flex justify-between text-sm">
                            <span class="text-[#8c6a4a]">Subtotal</span>
                            <span class="font-semibold text-[#2c1a0e]">Rp {{ number_format($order->subtotal ?? $order->total_price - ($order->shipping_cost ?? 0), 0, ',', '.') }}</span>
                        </div>
                        <div class="flex justify-between text-sm">
                            <span class="text-[#8c6a4a]">Ongkos Kirim</span>
                            <span class="font-semibold text-[#2c1a0e]">Rp {{ number_format($order->shipping_cost ?? 0, 0, ',', '.') }}</span>
                        </div>
                        <div class="flex justify-between text-base pt-3 border-t border-[#e0d3c2]">
                            <span class="font-bold text-[#2c1a0e]">Total Bayar</span>
                            <span class="font-bold text-[#f59e0b] text-lg">Rp {{ number_format($order->total_price, 0, ',', '.') }}</span>
                        </div>
                    </div>
                </div>

                {{-- TAMPILAN BUKTI PENGIRIMAN --}}
                @if($order->status === 'completed' && $order->proof_of_delivery)
                    <div class="bg-white p-5 rounded-xl shadow-sm border border-[#e0d3c2]">
                        <h3 class="text-xs font-bold uppercase tracking-wider text-[#8c6a4a] mb-4 flex items-center gap-2">
                            <i class="fas fa-truck-loading text-[#d97706]"></i> Konfirmasi Pengiriman Kurir
                        </h3>
                        
                        <div class="flex flex-col md:flex-row gap-6 items-start">
                            <div class="w-full md:w-1/3">
                                <a href="{{ asset('storage/' . $order->proof_of_delivery) }}" target="_blank" class="block group relative">
                                    <img src="{{ asset('storage/' . $order->proof_of_delivery) }}" 
                                        class="w-full h-48 object-cover rounded-xl border-2 border-[#fef9f0] shadow-md group-hover:opacity-90 transition">
                                    <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition">
                                        <span class="bg-black/50 text-white px-3 py-1 rounded-full text-[10px] font-bold uppercase">Perbesar Foto</span>
                                    </div>
                                </a>
                            </div>
                            
                            <div class="flex-1 space-y-4">
                                <div>
                                    <p class="text-[10px] font-bold text-[#8c6a4a] uppercase tracking-widest mb-1">Diterima Oleh:</p>
                                    <p class="text-xl font-black text-[#2c1a0e] capitalize">{{ $order->receiver_name ?? 'N/A' }}</p>
                                </div>

                                <div class="bg-[#fef9f0] border-l-4 border-[#f59e0b] p-3 rounded-r-xl inline-block">
                                    <p class="text-[10px] font-bold text-[#8c6a4a] uppercase mb-1">Waktu Sampai di Tujuan:</p>
                                    <div class="flex items-center gap-2 text-[#d97706]">
                                        <i class="fas fa-calendar-check"></i>
                                        <span class="text-sm font-bold">
                                            {{-- UPDATE: WIB Date --}}
                                            {{ $order->updated_at->timezone('Asia/Jakarta')->translatedFormat('d F Y') }}
                                        </span>
                                        <span class="text-[#e0d3c2]">|</span>
                                        <i class="fas fa-clock"></i>
                                        <span class="text-sm font-bold">
                                            {{-- UPDATE: WIB Time --}}
                                            {{ $order->updated_at->timezone('Asia/Jakarta')->format('H:i') }} WIB
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif

                {{-- BAGIAN ULASAN --}}
<div class=\"bg-white p-5 rounded-xl shadow-sm border border-[#e0d3c2] animate-in\">
    <h3 class=\"text-xs font-bold uppercase tracking-wider text-[#8c6a4a] mb-3 flex items-center gap-2\">
        <i class=\"fas fa-comment-dots text-[#d97706]\"></i> Ulasan Pembeli
    </h3>
    
    @php
        // JANGAN pakai $order->review karena bentrok dengan kolom database
        // Kita cari manual ke tabel Review berdasarkan order_id
        $reviewData = \App\Models\Review::where('order_id', $order->id)->first();
    @endphp

    @if($reviewData)
        <div class=\"space-y-4\">
            {{-- Rating Bintang --}}
            <div class=\"flex items-center gap-1\">
                @for($i=1; $i<=5; $i++)
                    <i class=\"fas fa-star {{ $i <= $reviewData->rating ? 'text-[#f59e0b]' : 'text-[#e0d3c2]' }} text-lg\"></i>
                @endfor
                <span class=\"ml-2 text-sm font-bold text-[#2c1a0e]\">{{ $reviewData->rating }}/5</span>
            </div>
            
            {{-- Teks Ulasan --}}
            <div class=\"bg-[#fef9f0] p-4 rounded-xl border border-[#e0d3c2] relative\">
                <i class=\"fas fa-quote-left text-[#e0d3c2] absolute top-2 left-2 text-xl opacity-50\"></i>
                <p class=\"text-sm text-[#2c1a0e]/80 italic leading-relaxed relative z-10 pl-4\">
                    {{-- Cek kolom 'comment' (seperti di Product Show Anda) --}}
                    \"{{ $reviewData->comment ?? $reviewData->review ?? 'Tidak ada komentar.' }}\"
                </p>
            </div>

            {{-- Bagian Foto (Disamakan logikanya dengan Product Show Anda) --}}
            @php
                $ulasanPhotos = [];
                if ($reviewData->photos) {
                    $decoded = json_decode($reviewData->photos, true);
                    $ulasanPhotos = is_array($decoded) ? $decoded : [$reviewData->photos];
                }
            @endphp

            @if(count($ulasanPhotos) > 0)
                <div class=\"mt-3\">
                    <p class=\"text-[10px] font-bold text-[#8c6a4a] uppercase tracking-wider mb-2\">Foto dari Customer:</p>
                    <div class=\"flex flex-wrap gap-2\">
                        @foreach($ulasanPhotos as $p)
                            @if(!empty($p))
                                <a href=\"{{ asset('storage/' . $p) }}\" target=\"_blank\" class=\"block\">
                                    <img src=\"{{ asset('storage/' . $p) }}\" 
                                         class=\"w-24 h-24 object-cover rounded-lg border border-[#e0d3c2] hover:ring-2 hover:ring-[#f59e0b] transition shadow-sm\"
                                         onerror=\"this.src='https://placehold.co/200x200?text=Error'\">
                                </a>
                            @endif
                        @endforeach
                    </div>
                </div>
            @endif
        </div>
    @else
        <div class=\"text-center py-10\">
            <div class=\"w-16 h-16 bg-[#fef9f0] rounded-full flex items-center justify-center mx-auto mb-4\">
                <i class=\"fas fa-comment-slash text-[#c9b59b] text-xl\"></i>
            </div>
            <p class=\"text-sm text-[#8c6a4a] italic\">Belum ada ulasan untuk pesanan ini.</p>
        </div>
    @endif
</div>
            </div>

            {{-- KOLOM KANAN: Alamat & Info Kurir --}}
            <div class="space-y-5">
                {{-- Alamat Pengiriman --}}
                <div class="bg-gradient-to-br from-[#fef9f0] to-white p-6 rounded-xl border border-[#e0d3c2] shadow-sm">
                    <div class="flex items-start gap-3">
                        <div class="w-10 h-10 bg-[#fef3c7] rounded-xl flex items-center justify-center flex-shrink-0">
                            <i class="fas fa-map-marker-alt text-[#d97706]"></i>
                        </div>
                        <div class="flex-1">
                            <h3 class="text-[10px] font-bold uppercase tracking-wider text-[#8c6a4a] mb-2">Alamat Pengiriman</h3>
                            <p class="font-bold text-[#2c1a0e] text-sm mb-1">{{ $order->customer->name ?? 'Guest' }}</p>
                            <p class="text-sm text-[#2c1a0e]/80 leading-relaxed">{{ $order->shipping_address }}</p>
                        </div>
                    </div>
                </div>

                {{-- INFO PEMBAYARAN --}}
                <div class="bg-white p-6 rounded-xl border border-[#e0d3c2] shadow-sm">
                    <div class="flex items-center gap-3 mb-4">
                        <div class="w-10 h-10 bg-emerald-100 rounded-xl flex items-center justify-center">
                            <i class="fas fa-credit-card text-emerald-600"></i>
                        </div>
                        <div class="flex-1">
                            <h3 class="text-[10px] font-bold uppercase tracking-wider text-[#8c6a4a]">Metode Pembayaran</h3>
                            <p class="text-sm font-bold text-[#2c1a0e] uppercase">{{ $order->payment_method ?? 'Belum ditentukan' }}</p>
                        </div>
                    </div>
                </div>

                {{-- INFO KURIR --}}
                <div class="bg-white p-6 rounded-xl border border-[#e0d3c2] shadow-sm">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center">
                            <i class="fas fa-truck text-blue-600"></i>
                        </div>
                        <div class="flex-1">
                            <h3 class="text-[10px] font-bold uppercase tracking-wider text-[#8c6a4a]">Kurir Pengirim</h3>
                            @if($order->kurir)
                                <p class="text-sm font-bold text-[#2c1a0e]">{{ $order->kurir->name }}</p>
                            @else
                                <p class="text-sm text-[#8c6a4a] italic">Belum ditugaskan</p>
                            @endif
                        </div>
                    </div>
                </div>

                {{-- Assign Kurir (Admin) --}}
                @if(Auth::user()->role === 'admin' && in_array($order->status, ['paid', 'confirmed']))
                    <div class="no-print bg-white p-5 rounded-xl border-2 border-dashed border-[#f59e0b]/50 animate-in">
                        <h4 class="text-xs font-bold uppercase mb-3 text-[#d97706] flex items-center gap-2">
                            <i class="fas fa-user-plus"></i> Tugaskan Kurir
                        </h4>
                        <form action="{{ route('orders.assign', $order->id) }}" method="POST" class="space-y-3">
                            @csrf
                            <select name="kurir_id" required class="w-full text-sm border border-[#e0d3c2] rounded-xl p-3 bg-[#fef9f0]">
                                <option value="">-- Pilih Kurir --</option>
                                @foreach(\App\Models\User::where('role', 'kurir')->get() as $kurir)
                                    <option value="{{ $kurir->id }}">{{ $kurir->name }}</option>
                                @endforeach
                            </select>
                            <button type="submit" class="w-full bg-[#f59e0b] text-white font-semibold py-3 rounded-xl uppercase text-[11px] tracking-wider">
                                Kirim ke Kurir
                            </button>
                        </form>
                    </div>
                @endif
                
                {{-- Tracking Info --}}
                @if($order->tracking_number)
                <div class="bg-white p-5 rounded-xl border border-[#e0d3c2]">
                    <div class="flex items-center gap-2 mb-2">
                        <i class="fas fa-qrcode text-[#d97706]"></i>
                        <h3 class="text-[10px] font-bold uppercase tracking-wider text-[#8c6a4a]">Nomor Resi</h3>
                    </div>
                    <p class="text-sm font-mono font-bold text-[#2c1a0e]">{{ $order->tracking_number }}</p>
                </div>
                @endif
            </div>
        </div>
    </div>
</x-app-layout>