@extends('layouts.admin')

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

@section('content')
    <div class="mb-8">
        <a href="{{ route('admin.orders.index') }}" class="text-xs font-bold text-slate-400 hover:text-amber-600 transition-base flex items-center">
            <i class="fas fa-arrow-left mr-2"></i>
            Kembali ke Daftar
        </a>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <!-- Left 2 Cols: Details and Products -->
        <div class="lg:col-span-2 space-y-8">
            
            <!-- Transaction Details Card -->
            <div class="glass-card pro-shadow p-10 rounded-[35px]">
                <h3 class="font-heading font-bold text-lg text-slate-800 mb-6 flex items-center gap-2">
                    <i class="fas fa-file-invoice text-amber-500"></i> Informasi Pengiriman & Penerima
                </h3>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div>
                        <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider block mb-1">Nama Penerima</span>
                        <p class="text-sm font-semibold text-slate-800">{{ $order->recipient_name }}</p>
                    </div>
                    <div>
                        <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider block mb-1">No. Telepon / WhatsApp</span>
                        <p class="text-sm font-semibold text-slate-800">{{ $order->recipient_phone }}</p>
                    </div>
                    <div class="md:col-span-2">
                        <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider block mb-1">Alamat Lengkap</span>
                        <p class="text-sm font-semibold text-slate-800 bg-slate-50 p-4 rounded-2xl border border-slate-100 leading-relaxed">
                            {{ $order->address_detail }}<br>
                            {{ $order->city }}, {{ $order->province }}<br>
                            Kode Pos: {{ $order->postal_code }}
                        </p>
                    </div>
                    <div>
                        <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider block mb-1">Jasa Ekspedisi</span>
                        <p class="text-sm font-bold text-slate-800">
                            {{ strtoupper($order->courier) }} <span class="text-xs font-normal text-slate-500">({{ $order->shipping_service }})</span>
                        </p>
                    </div>
                    <div>
                        <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider block mb-1">Catatan Belanja</span>
                        <p class="text-sm font-medium text-slate-600 italic">
                            {{ $order->notes ? '"' . $order->notes . '"' : 'Tidak ada catatan khusus' }}
                        </p>
                    </div>
                </div>
            </div>

            <!-- Items Purchased Card -->
            <div class="glass-card pro-shadow p-10 rounded-[35px]">
                <h3 class="font-heading font-bold text-lg text-slate-800 mb-6 flex items-center gap-2">
                    <i class="fas fa-boxes text-amber-500"></i> Detail Produk Dipesan
                </h3>

                <div class="divide-y divide-slate-100 border border-slate-100 rounded-3xl overflow-hidden mb-8">
                    @foreach ($order->items as $item)
                        <div class="p-6 bg-white flex items-center gap-6">
                            <img src="{{ $item->product && $item->product->main_image ? asset('uploads/' . $item->product->main_image) : 'https://placehold.co/100x100?text=Trisna+Monel' }}" 
                                 class="w-16 h-16 object-cover rounded-2xl border border-slate-100 flex-shrink-0" 
                                 alt="{{ $item->product_name }}"
                                 onerror="this.src='https://placehold.co/100x100?text=Trisna+Monel'">
                            
                            <div class="flex-grow">
                                <h4 class="font-heading font-bold text-sm text-slate-800">{{ $item->product_name }}</h4>
                                @if($item->variation)
                                    <span class="inline-block text-[10px] bg-slate-50 text-slate-500 border border-slate-200 px-2.5 py-0.5 rounded-md mt-1 font-medium">
                                        Ukuran/Variasi: {{ $item->variation }}
                                    </span>
                                @endif
                                <div class="text-xs text-slate-400 mt-2 font-medium">
                                    Rp {{ number_format($item->price, 0, ',', '.') }} x {{ $item->quantity }}
                                </div>
                            </div>

                            <div class="font-heading font-bold text-sm text-slate-800 text-right flex-shrink-0 whitespace-nowrap">
                                Rp {{ number_format($item->price * $item->quantity, 0, ',', '.') }}
                            </div>
                        </div>
                    @endforeach
                </div>

                <!-- Calculations Block -->
                <div class="max-w-sm ml-auto space-y-3">
                    <div class="flex justify-between text-xs text-slate-500">
                        <span>Subtotal Barang</span>
                        <span class="font-semibold text-slate-800">Rp {{ number_format($order->total_price, 0, ',', '.') }}</span>
                    </div>
                    <div class="flex justify-between text-xs text-slate-500">
                        <span>Biaya Pengiriman Ongkir</span>
                        <span class="font-semibold text-slate-800">Rp {{ number_format($order->shipping_cost, 0, ',', '.') }}</span>
                    </div>
                    <div class="flex justify-between text-base font-bold text-slate-800 border-t border-dashed border-slate-200 pt-4 mt-2">
                        <span class="font-heading">Total Pembayaran</span>
                        <span class="text-amber-600 font-heading">Rp {{ number_format($order->grand_total, 0, ',', '.') }}</span>
                    </div>
                </div>
            </div>

        </div>

        <!-- Right 1 Col: Control Panels -->
        <div class="space-y-8">
            
            <!-- Order & Payment Status Panel -->
            <div class="glass-card pro-shadow p-8 rounded-[35px] relative overflow-hidden">
                <h3 class="font-heading font-bold text-base text-slate-800 mb-6 border-b border-slate-100 pb-3">
                    Status Transaksi
                </h3>

                <div class="space-y-6">
                    <!-- Payment status -->
                    <div>
                        <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider block mb-2">Status Pembayaran Gateway</span>
                        @if ($order->payment_status === 'settlement')
                            <span class="inline-flex items-center space-x-2 font-bold text-emerald-700 bg-emerald-50 px-4 py-2 rounded-2xl border border-emerald-100 text-xs">
                                <i class="fas fa-check-circle"></i>
                                <span>LUNAS (Settlement)</span>
                            </span>
                        @elseif ($order->payment_status === 'pending')
                            <span class="inline-flex items-center space-x-2 font-bold text-amber-700 bg-amber-50 px-4 py-2 rounded-2xl border border-amber-100 text-xs">
                                <i class="fas fa-clock animate-pulse"></i>
                                <span>Menunggu Pembayaran</span>
                            </span>
                        @else
                            <span class="inline-flex items-center space-x-2 font-bold text-red-700 bg-red-50 px-4 py-2 rounded-2xl border border-red-100 text-xs">
                                <i class="fas fa-times-circle"></i>
                                <span>{{ strtoupper($order->payment_status) }}</span>
                            </span>
                        @endif
                    </div>

                    <!-- Order process status -->
                    <div>
                        <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider block mb-2">Status Alur Pesanan</span>
                        @if($order->status === 'menunggu_pembayaran')
                            <span class="inline-block text-[10px] font-bold uppercase tracking-widest px-4 py-2 rounded-2xl bg-amber-100 text-amber-800 border border-amber-200">
                                Menunggu Bayar
                            </span>
                        @elseif($order->status === 'diproses')
                            <span class="inline-block text-[10px] font-bold uppercase tracking-widest px-4 py-2 rounded-2xl bg-blue-100 text-blue-800 border border-blue-200">
                                Sedang Diproses
                            </span>
                        @elseif($order->status === 'dikirim')
                            <span class="inline-block text-[10px] font-bold uppercase tracking-widest px-4 py-2 rounded-2xl bg-purple-100 text-purple-800 border border-purple-200">
                                Dikirim (Dalam Perjalanan)
                            </span>
                        @elseif($order->status === 'selesai')
                            <span class="inline-block text-[10px] font-bold uppercase tracking-widest px-4 py-2 rounded-2xl bg-emerald-100 text-emerald-800 border border-emerald-200">
                                Selesai Diterima
                            </span>
                        @elseif($order->status === 'dibatalkan')
                            <span class="inline-block text-[10px] font-bold uppercase tracking-widest px-4 py-2 rounded-2xl bg-red-100 text-red-800 border border-red-200">
                                Dibatalkan
                            </span>
                        @else
                            <span class="inline-block text-[10px] font-bold uppercase tracking-widest px-4 py-2 rounded-2xl bg-slate-100 text-slate-800">
                                {{ $order->status }}
                            </span>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Logistics Resi Input Panel (Important for fulfillment!) -->
            <div class="glass-card pro-shadow p-8 rounded-[35px] border-l-4 border-purple-500">
                <h3 class="font-heading font-bold text-base text-slate-800 mb-2 flex items-center gap-2">
                    <i class="fas fa-truck text-purple-500"></i> Pengiriman Logistik
                </h3>
                <p class="text-xs text-slate-400 mb-6">Input nomor resi kurir untuk mengirim pesanan ini. Status akan berubah menjadi **DIKIRIM** secara otomatis.</p>

                @if ($order->tracking_number)
                    <div class="bg-purple-50 border border-purple-100 p-4 rounded-2xl mb-6 flex justify-between items-start">
                        <div>
                            <span class="text-[9px] font-bold text-purple-500 uppercase tracking-wider block">Nomor Resi Saat Ini</span>
                            <span class="text-sm font-bold text-purple-900 block mt-1 tracking-wider" id="resiNumberVal">{{ $order->tracking_number }}</span>
                        </div>
                        <div class="flex items-center gap-2 mt-1">
                            <button onclick="copyResi()" class="text-purple-600 hover:text-purple-800 transition-colors p-1" title="Salin Resi">
                                <i class="far fa-copy text-sm"></i>
                            </button>
                            <span id="copyTooltip" class="text-[9px] text-emerald-600 font-bold opacity-0 transition-opacity duration-300">Tersalin!</span>
                        </div>
                    </div>

                    <!-- Real-Time Tracking Timeline for Admin -->
                    <div id="trackingTimelineSection" class="mt-6 border-t border-dashed border-purple-200 pt-4">
                        <h4 class="text-xs font-bold text-purple-600 uppercase tracking-wider mb-4 flex items-center gap-2">
                            <i class="fas fa-route"></i> Pelacakan Paket Real-Time
                        </h4>
                        <div id="trackingTimelineContent">
                            <div class="tracking-skeleton-wrapper">
                                <div class="tracking-skeleton-item"></div>
                                <div class="tracking-skeleton-item"></div>
                                <div class="tracking-skeleton-item"></div>
                            </div>
                        </div>
                    </div>

                    <!-- Timeline Styles and JS inside Admin Card -->
                    <style>
                        .tracking-timeline-container {
                            display: flex;
                            flex-direction: column;
                            gap: 1.25rem;
                            position: relative;
                            padding-left: 1.25rem;
                            margin-left: 0.25rem;
                            border-left: 2px dashed rgba(147, 51, 234, 0.2);
                            margin-top: 1rem;
                        }

                        .tracking-timeline-item {
                            position: relative;
                        }

                        .tracking-timeline-item::before {
                            content: '';
                            position: absolute;
                            left: calc(-1.25rem - 6px);
                            top: 4px;
                            width: 10px;
                            height: 10px;
                            border-radius: 50%;
                            background: #cbd5e1;
                            border: 2px solid white;
                            box-shadow: 0 0 0 3px rgba(203, 213, 225, 0.2);
                            transition: all 0.3s ease;
                        }

                        .tracking-timeline-item.active::before {
                            background: #9333ea;
                            box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.3);
                            animation: pulse-dot-admin 1.5s infinite;
                        }

                        .tracking-timeline-item.delivered::before {
                            background: #10b981;
                            box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3);
                        }

                        @keyframes pulse-dot-admin {
                            0% { box-shadow: 0 0 0 0px rgba(147, 51, 234, 0.4); }
                            70% { box-shadow: 0 0 0 6px rgba(147, 51, 234, 0); }
                            100% { box-shadow: 0 0 0 0px rgba(147, 51, 234, 0); }
                        }

                        .tracking-time {
                            font-size: 0.65rem;
                            font-weight: 700;
                            color: #9333ea;
                            text-transform: uppercase;
                            letter-spacing: 0.05em;
                            margin-bottom: 0.15rem;
                        }

                        .tracking-desc {
                            font-size: 0.75rem;
                            font-weight: 600;
                            color: #1e293b;
                            line-height: 1.4;
                        }

                        .tracking-loc {
                            font-size: 0.7rem;
                            color: #64748b;
                            margin-top: 0.1rem;
                            font-weight: 500;
                            display: flex;
                            align-items: center;
                            gap: 0.25rem;
                        }

                        /* Skeleton Loader styles */
                        .tracking-skeleton-wrapper {
                            display: flex;
                            flex-direction: column;
                            gap: 1.25rem;
                            padding-left: 0.25rem;
                        }

                        .tracking-skeleton-item {
                            height: 45px;
                            background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
                            background-size: 200% 100%;
                            animation: loading-pulse 1.5s infinite;
                            border-radius: 8px;
                        }

                        @keyframes loading-pulse {
                            0% { background-position: 200% 0; }
                            100% { background-position: -200% 0; }
                        }
                    </style>

                    <script>
                        function copyResi() {
                            const resiText = document.getElementById('resiNumberVal').innerText;
                            navigator.clipboard.writeText(resiText).then(() => {
                                const tooltip = document.getElementById('copyTooltip');
                                tooltip.style.opacity = '1';
                                setTimeout(() => {
                                    tooltip.style.opacity = '0';
                                }, 2000);
                            });
                        }

                        document.addEventListener('DOMContentLoaded', function() {
                            const resi = '{{ $order->tracking_number }}';
                            const courier = '{{ strtolower($order->courier) }}';
                            const container = document.getElementById('trackingTimelineContent');

                            if (!resi || !container) return;

                            fetch(`{{ route('orders.track-resi') }}?resi=${resi}&courier=${courier}`)
                                .then(res => res.json())
                                .then(res => {
                                    if (res.status === 'success' && res.data && res.data.history && res.data.history.length > 0) {
                                        let html = '<div class="tracking-timeline-container">';
                                        res.data.history.forEach((item, index) => {
                                            let itemClass = '';
                                            if (index === 0) {
                                                itemClass = res.data.summary.status === 'DELIVERED' ? 'active delivered' : 'active';
                                            }
                                            
                                            html += `
                                                <div class="tracking-timeline-item ${itemClass}">
                                                    <div class="tracking-time">${item.date}</div>
                                                    <div class="tracking-desc">${item.desc}</div>
                                                    <div class="tracking-loc"><i class="fas fa-map-marker-alt"></i> ${item.location || 'Hub'}</div>
                                                </div>
                                            `;
                                        });
                                        html += '</div>';
                                        container.innerHTML = html;
                                    } else {
                                        container.innerHTML = `
                                            <div class="text-center py-4 text-slate-400">
                                                <i class="fas fa-exclamation-triangle text-amber-500 mb-1"></i>
                                                <p class="text-[10px] font-bold">Gagal memuat status pelacakan real-time.</p>
                                            </div>
                                        `;
                                    }
                                })
                                .catch(err => {
                                    console.error(err);
                                    container.innerHTML = `
                                        <div class="text-center py-4 text-slate-400">
                                            <i class="fas fa-wifi text-amber-500 mb-1"></i>
                                            <p class="text-[10px] font-bold">Koneksi gagal memuat pelacakan.</p>
                                        </div>
                                    `;
                                });
                        });
                    </script>
                @endif

                <form action="{{ route('admin.orders.resi', $order->id) }}" method="POST" class="space-y-4">
                    @csrf
                    <div>
                        <label for="tracking_number" class="text-[10px] font-bold text-slate-500 uppercase tracking-wider block mb-2">Input/Edit Resi Pengiriman</label>
                        <input type="text" name="tracking_number" id="tracking_number" required placeholder="Contoh: JNE123456789" value="{{ $order->tracking_number }}" 
                               class="w-full text-xs font-semibold px-4 py-3 rounded-2xl border border-slate-200 focus:outline-none focus:border-amber-500 focus:ring-1 focus:ring-amber-500 transition-all bg-slate-50/50">
                    </div>
                    
                    <button type="submit" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-2xl text-xs uppercase tracking-wider shadow-lg shadow-purple-600/20 transition-all flex items-center justify-center gap-2">
                        <i class="fas fa-paper-plane"></i>
                        <span>Simpan & Kirim Resi</span>
                    </button>
                </form>
            </div>

            <!-- Manual Status Override (Fallback Corrections) -->
            <div class="glass-card pro-shadow p-8 rounded-[35px] border-l-4 border-amber-500">
                <h3 class="font-heading font-bold text-base text-slate-800 mb-2 flex items-center gap-2">
                    <i class="fas fa-edit text-amber-500"></i> Koreksi Status Manual
                </h3>
                <p class="text-xs text-slate-400 mb-6">Gunakan menu ini jika status pesanan perlu disesuaikan atau dikoreksi secara manual diluar alur otomatis.</p>

                <form action="{{ route('admin.orders.status', $order->id) }}" id="statusForm" method="POST" class="space-y-4">
                    @csrf
                    <div>
                        <label for="status" class="text-[10px] font-bold text-slate-500 uppercase tracking-wider block mb-2">Pilih Status Baru</label>
                        <div class="relative">
                            <select name="status" id="status" class="w-full text-xs font-semibold px-4 py-3 rounded-2xl border border-slate-200 focus:outline-none focus:border-amber-500 focus:ring-1 focus:ring-amber-500 transition-all bg-slate-50/50 appearance-none">
                                <option value="menunggu_pembayaran" {{ $order->status === 'menunggu_pembayaran' ? 'selected' : '' }}>Menunggu Pembayaran</option>
                                <option value="diproses" {{ $order->status === 'diproses' ? 'selected' : '' }}>Diproses (Payment Settlement)</option>
                                <option value="dikirim" {{ $order->status === 'dikirim' ? 'selected' : '' }}>Dikirim (Dalam Perjalanan)</option>
                                <option value="selesai" {{ $order->status === 'selesai' ? 'selected' : '' }}>Selesai Diterima</option>
                                <option value="dibatalkan" {{ $order->status === 'dibatalkan' ? 'selected' : '' }}>Dibatalkan</option>
                            </select>
                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-4 text-slate-500">
                                <i class="fas fa-chevron-down text-xs"></i>
                            </div>
                        </div>
                    </div>
                    
                    <button type="button" id="btnUpdateStatus" class="w-full bg-slate-900 hover:bg-black text-white font-bold py-3 px-6 rounded-2xl text-xs uppercase tracking-wider shadow-lg transition-all flex items-center justify-center gap-2">
                        <i class="fas fa-save"></i>
                        <span>Perbarui Status</span>
                    </button>
                </form>
            </div>

        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const btnUpdate = document.getElementById('btnUpdateStatus');
            const formUpdate = document.getElementById('statusForm');
            if (btnUpdate && formUpdate) {
                btnUpdate.addEventListener('click', function(e) {
                    e.preventDefault();
                    Swal.fire({
                        title: 'Ubah Status Pesanan?',
                        text: 'Apakah Anda yakin ingin mengganti status pesanan ini secara manual?',
                        icon: 'question',
                        showCancelButton: true,
                        confirmButtonColor: '#111111',
                        cancelButtonColor: '#B08256',
                        confirmButtonText: 'Ya, Ubah!',
                        cancelButtonText: 'Batal',
                        background: '#ffffff',
                        customClass: {
                            popup: 'rounded-2xl',
                        }
                    }).then((result) => {
                        if (result.isConfirmed) {
                            formUpdate.submit();
                        }
                    });
                });
            }
        });
    </script>
@endsection