<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Track Order - Ryll Store</title>
    <link rel="icon" type="image/webp" href="<?php echo e(asset('images/ryll.webp')); ?>">
    
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        .font-orbitron { font-family: 'Orbitron', sans-serif; }
        
        [x-cloak] { display: none !important; }
        
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #1f2937; }
        ::-webkit-scrollbar-thumb { background: #06b6d4; border-radius: 4px; }

        /* Timeline styles */
        .timeline-step {
            position: relative;
            padding-left: 3rem;
        }

        .timeline-step::before {
            content: '';
            position: absolute;
            left: 0.75rem;
            top: 2.5rem;
            bottom: -1rem;
            width: 2px;
            background: linear-gradient(180deg, rgba(6, 182, 212, 0.5) 0%, rgba(6, 182, 212, 0) 100%);
        }

        .timeline-step:last-child::before {
            display: none;
        }

        .timeline-dot {
            position: absolute;
            left: 0;
            top: 0.5rem;
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Pulse animation for active status */
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        .pulse-animation {
            animation: pulse 2s ease-in-out infinite;
        }

        /* Shimmer effect for loading */
        @keyframes shimmer {
            0% { background-position: -1000px 0; }
            100% { background-position: 1000px 0; }
        }

        .shimmer {
            background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.1), transparent);
            background-size: 1000px 100%;
            animation: shimmer 2s infinite;
        }
    </style>
</head>
<body class="bg-gray-950 text-white" x-data="trackOrderManager()">

<!-- NAVBAR -->
<nav class="bg-gray-900 border-b border-gray-800 sticky top-0 z-50 backdrop-blur-md bg-opacity-90">
    <div class="max-w-7xl mx-auto px-4 py-4">
        <div class="flex items-center justify-between">
            <a href="/" class="relative flex items-center group z-[60]">
                <img src="<?php echo e(asset('images/ryll.webp')); ?>" 
                     alt="RYLL STORE" 
                     class="h-16 md:h-24 w-auto object-contain transition-transform duration-300 group-hover:scale-105"
                     style="filter: drop-shadow(0 0 12px rgba(34, 211, 238, 0.2));"
                     fetchpriority="high">
            </a>
            
            <a href="/" class="px-4 py-2 hover:bg-gray-800 rounded-lg transition flex items-center gap-2">
                <i class="fas fa-home"></i>
                <span class="hidden md:inline">Beranda</span>
            </a>
        </div>
    </div>
</nav>

<div class="min-h-screen py-8 md:py-12 px-4">
    <div class="max-w-4xl mx-auto">
        
        <?php if(!$found): ?>
        <!-- ✅ NOT FOUND (Enhanced) -->
        <div class="bg-gray-900 rounded-2xl border border-red-500/30 p-8 text-center" x-data="{ show: false }" x-init="setTimeout(() => show = true, 100)">
            <div class="w-20 h-20 bg-red-500/20 rounded-full flex items-center justify-center mx-auto mb-6"
                 x-show="show"
                 x-transition:enter="transition ease-out duration-500"
                 x-transition:enter-start="opacity-0 scale-50"
                 x-transition:enter-end="opacity-100 scale-100">
                <i class="fas fa-exclamation-triangle text-4xl text-red-400"></i>
            </div>
            <h1 class="text-2xl md:text-3xl font-bold font-orbitron text-red-400 mb-4">Pesanan Tidak Ditemukan</h1>
            <p class="text-gray-400 mb-2">Order ID tidak ditemukan di sistem:</p>
            <p class="text-cyan-400 font-mono font-bold text-lg md:text-xl mb-8"><?php echo e($order_id); ?></p>
            
            <div class="bg-yellow-500/10 border border-yellow-500/30 rounded-lg p-4 mb-8">
                <p class="text-yellow-400 text-sm">
                    <i class="fas fa-info-circle mr-2"></i>
                    Pastikan Order ID yang Anda masukkan sudah benar atau hubungi customer service kami.
                </p>
            </div>
            
            <div class="flex flex-col md:flex-row gap-4 justify-center">
                <a href="/" class="px-6 py-3 bg-cyan-500 hover:bg-cyan-600 rounded-lg font-bold transition">
                    <i class="fas fa-home mr-2"></i>Kembali ke Beranda
                </a>
                <a href="https://wa.me/6281234567890" class="px-6 py-3 bg-green-500 hover:bg-green-600 rounded-lg font-bold transition">
                    <i class="fab fa-whatsapp mr-2"></i>Hubungi CS
                </a>
            </div>
        </div>
        <?php else: ?>
        <!-- ✅ TRANSACTION FOUND (Enhanced) -->
        <div class="space-y-6">
            
            <!-- ✅ Auto-Refresh Notice for Pending/Processing (Fixed: stops on print) -->
            <?php if(in_array($transaction->status, ['pending', 'processing']) || $transaction->payment_status === 'UNPAID'): ?>
            <div class="bg-blue-500/10 border border-blue-500/30 rounded-xl p-4 flex items-center gap-3 print:hidden" 
                 x-data="autoRefresh()" 
                 x-init="startCountdown()">
                <i class="fas fa-sync-alt fa-spin text-blue-400"></i>
                <div class="flex-1">
                    <p class="text-blue-400 font-bold text-sm">Auto-refresh aktif</p>
                    <p class="text-xs text-gray-400">Halaman akan refresh otomatis dalam <span x-text="countdown"></span> detik</p>
                </div>
                <button @click="window.location.reload()" class="px-4 py-2 bg-blue-500 hover:bg-blue-600 rounded-lg text-sm font-bold transition">
                    <i class="fas fa-sync mr-1"></i>Refresh Now
                </button>
            </div>
            <?php endif; ?>
            
            <!-- ✅ Header (Enhanced) -->
            <div class="bg-gradient-to-r from-cyan-500 to-blue-600 rounded-2xl p-6 md:p-8 text-center relative overflow-hidden print-invoice-header">
                <div class="absolute inset-0 opacity-10">
                    <div class="shimmer absolute inset-0"></div>
                </div>
                <div class="relative z-10">
                    <div class="w-16 h-16 md:w-20 md:h-20 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4 backdrop-blur-sm">
                        <i class="fas fa-receipt text-3xl md:text-4xl"></i>
                    </div>
                    <h1 class="text-2xl md:text-3xl font-bold font-orbitron mb-2">INVOICE TRANSAKSI</h1>
                    <p class="text-white/80 text-sm md:text-base">Invoice: <span class="font-mono font-bold"><?php echo e($transaction->invoice_number); ?></span></p>
                    <p class="text-white/60 text-xs md:text-sm mt-2"><?php echo e(\Carbon\Carbon::parse($transaction->created_at)->timezone('Asia/Jakarta')->format('d F Y, H:i')); ?> WIB</p>
                </div>
            </div>
            
            <!-- ✅ STATUS TIMELINE -->
            <div class="bg-gray-900 rounded-2xl border border-cyan-500/20 p-6">
                <h3 class="text-lg md:text-xl font-bold mb-6 flex items-center gap-2">
                    <i class="fas fa-stream text-cyan-400"></i>
                    Progress Timeline
                </h3>

                <div class="space-y-6">
                    <!-- Step 1: Order Created -->
                    <div class="timeline-step">
                        <div class="timeline-dot bg-green-500/20 border-2 border-green-500">
                            <i class="fas fa-check text-green-400"></i>
                        </div>
                        <div>
                            <p class="font-bold text-green-400">Pesanan Dibuat</p>
                            <p class="text-xs text-gray-400"><?php echo e(\Carbon\Carbon::parse($transaction->created_at)->timezone('Asia/Jakarta')->format('d M Y, H:i')); ?> WIB</p>
                        </div>
                    </div>

                    <!-- Step 2: Payment -->
                    <div class="timeline-step">
                        <?php if($transaction->payment_status === 'PAID'): ?>
                        <div class="timeline-dot bg-green-500/20 border-2 border-green-500">
                            <i class="fas fa-check text-green-400"></i>
                        </div>
                        <div>
                            <p class="font-bold text-green-400">Pembayaran Diterima</p>
                            <p class="text-xs text-gray-400">
                                <?php if($transaction->paid_at): ?>
                                <?php echo e(\Carbon\Carbon::parse($transaction->paid_at)->timezone('Asia/Jakarta')->format('d M Y, H:i')); ?> WIB
                                <?php else: ?>
                                Completed
                                <?php endif; ?>
                            </p>
                        </div>
                        <?php elseif($transaction->payment_status === 'UNPAID'): ?>
                        <div class="timeline-dot bg-yellow-500/20 border-2 border-yellow-500 pulse-animation">
                            <i class="fas fa-clock text-yellow-400"></i>
                        </div>
                        <div>
                            <p class="font-bold text-yellow-400">Menunggu Pembayaran</p>
                            <p class="text-xs text-gray-400">
                                <?php if($transaction->expired_at): ?>
                                Expired: <?php echo e(\Carbon\Carbon::parse($transaction->expired_at)->timezone('Asia/Jakarta')->format('d M Y, H:i')); ?> WIB
                                <?php else: ?>
                                Pending
                                <?php endif; ?>
                            </p>
                        </div>
                        <?php else: ?>
                        <div class="timeline-dot bg-red-500/20 border-2 border-red-500">
                            <i class="fas fa-times text-red-400"></i>
                        </div>
                        <div>
                            <p class="font-bold text-red-400">Pembayaran <?php echo e(ucfirst($transaction->payment_status)); ?></p>
                            <p class="text-xs text-gray-400">Payment failed or expired</p>
                        </div>
                        <?php endif; ?>
                    </div>

                    <!-- Step 3: Processing -->
                    <?php if($transaction->status === 'processing' || $transaction->status === 'success'): ?>
                    <div class="timeline-step">
                        <div class="timeline-dot <?php echo e($transaction->status === 'processing' ? 'bg-blue-500/20 border-2 border-blue-500 pulse-animation' : 'bg-green-500/20 border-2 border-green-500'); ?>">
                            <i class="fas <?php echo e($transaction->status === 'processing' ? 'fa-spinner fa-spin text-blue-400' : 'fa-check text-green-400'); ?>"></i>
                        </div>
                        <div>
                            <p class="font-bold <?php echo e($transaction->status === 'processing' ? 'text-blue-400' : 'text-green-400'); ?>">
                                <?php echo e($transaction->status === 'processing' ? 'Sedang Diproses' : 'Pesanan Selesai'); ?>

                            </p>
                            <p class="text-xs text-gray-400">
                                <?php echo e($transaction->status === 'processing' ? 'Mohon tunggu beberapa saat' : 'Order completed successfully'); ?>

                            </p>
                        </div>
                    </div>
                    <?php endif; ?>

                    <!-- Step 4: Delivery (Success) -->
                    <?php if($transaction->status === 'success'): ?>
                    <div class="timeline-step">
                        <div class="timeline-dot bg-gradient-to-br from-green-500 to-cyan-500 border-2 border-green-400">
                            <i class="fas fa-gift text-white"></i>
                        </div>
                        <div>
                            <p class="font-bold text-green-400">Produk Terkirim</p>
                            <p class="text-xs text-gray-400">Cek email atau di bawah untuk detail</p>
                        </div>
                    </div>
                    <?php endif; ?>

                    <!-- Step Failed -->
                    <?php if($transaction->status === 'failed'): ?>
                    <div class="timeline-step">
                        <div class="timeline-dot bg-red-500/20 border-2 border-red-500">
                            <i class="fas fa-exclamation-triangle text-red-400"></i>
                        </div>
                        <div>
                            <p class="font-bold text-red-400">Pesanan Gagal</p>
                            <p class="text-xs text-gray-400">Silakan hubungi customer service</p>
                        </div>
                    </div>
                    <?php endif; ?>
                </div>
            </div>

            <!-- ✅ Status Badges (Compact) -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="bg-gray-900 rounded-xl border border-cyan-500/20 p-4">
                    <p class="text-gray-400 text-xs mb-2">Status Pembayaran</p>
                    <?php if($transaction->payment_status === 'PAID'): ?>
                    <span class="px-4 py-2 bg-green-500/20 text-green-400 rounded-lg font-bold flex items-center gap-2 w-fit">
                        <i class="fas fa-check-circle"></i> PAID
                    </span>
                    <?php elseif($transaction->payment_status === 'UNPAID'): ?>
                    <span class="px-4 py-2 bg-yellow-500/20 text-yellow-400 rounded-lg font-bold flex items-center gap-2 w-fit">
                        <i class="fas fa-clock"></i> UNPAID
                    </span>
                    <?php elseif($transaction->payment_status === 'EXPIRED'): ?>
                    <span class="px-4 py-2 bg-red-500/20 text-red-400 rounded-lg font-bold flex items-center gap-2 w-fit">
                        <i class="fas fa-times-circle"></i> EXPIRED
                    </span>
                    <?php else: ?>
                    <span class="px-4 py-2 bg-gray-500/20 text-gray-400 rounded-lg font-bold w-fit">
                        <?php echo e(strtoupper($transaction->payment_status)); ?>

                    </span>
                    <?php endif; ?>
                </div>

                <div class="bg-gray-900 rounded-xl border border-cyan-500/20 p-4">
                    <p class="text-gray-400 text-xs mb-2">Status Pesanan</p>
                    <?php if($transaction->status === 'success'): ?>
                    <span class="px-4 py-2 bg-green-500/20 text-green-400 rounded-lg font-bold flex items-center gap-2 w-fit">
                        <i class="fas fa-check-circle"></i> SUCCESS
                    </span>
                    <?php elseif($transaction->status === 'processing'): ?>
                    <span class="px-4 py-2 bg-blue-500/20 text-blue-400 rounded-lg font-bold flex items-center gap-2 w-fit">
                        <i class="fas fa-spinner fa-spin"></i> PROCESSING
                    </span>
                    <?php elseif($transaction->status === 'pending'): ?>
                    <span class="px-4 py-2 bg-yellow-500/20 text-yellow-400 rounded-lg font-bold flex items-center gap-2 w-fit">
                        <i class="fas fa-clock"></i> PENDING
                    </span>
                    <?php elseif($transaction->status === 'failed'): ?>
                    <span class="px-4 py-2 bg-red-500/20 text-red-400 rounded-lg font-bold flex items-center gap-2 w-fit">
                        <i class="fas fa-times-circle"></i> FAILED
                    </span>
                    <?php else: ?>
                    <span class="px-4 py-2 bg-gray-500/20 text-gray-400 rounded-lg font-bold w-fit">
                        <?php echo e(strtoupper($transaction->status)); ?>

                    </span>
                    <?php endif; ?>
                </div>
            </div>
            
            <!-- ✅ Order Details (Collapsible on mobile) -->
            <div class="bg-gray-900 rounded-2xl border border-cyan-500/20 overflow-hidden" x-data="{ expanded: true }">
                <div class="p-6 cursor-pointer md:cursor-default" @click="$root.classList.contains('md:hidden') && (expanded = !expanded)">
                    <h3 class="text-lg md:text-xl font-bold flex items-center justify-between">
                        <span class="flex items-center gap-2">
                            <i class="fas fa-box text-cyan-400"></i>
                            Detail Pesanan
                        </span>
                        <i class="fas md:hidden" :class="expanded ? 'fa-chevron-up' : 'fa-chevron-down'"></i>
                    </h3>
                </div>
                
                <div class="px-6 pb-6 space-y-4" x-show="expanded" x-collapse>
                    <div class="flex justify-between py-3 border-b border-gray-800">
                        <span class="text-gray-400 text-sm">Produk</span>
                        <span class="font-bold text-white text-sm md:text-base text-right"><?php echo e($transaction->product_name); ?></span>
                    </div>
                    
                    <div class="flex justify-between py-3 border-b border-gray-800">
                        <span class="text-gray-400 text-sm">Kategori</span>
                        <span class="font-bold text-cyan-400 text-sm md:text-base"><?php echo e($transaction->category_name); ?></span>
                    </div>
                    
                    <div class="flex justify-between py-3 border-b border-gray-800">
                        <span class="text-gray-400 text-sm">Customer Data</span>
                        <span class="font-bold text-white font-mono text-sm md:text-base"><?php echo e($transaction->customer_data); ?></span>
                    </div>
                    
                    <div class="flex justify-between py-3 border-b border-gray-800">
                        <span class="text-gray-400 text-sm">Harga Produk</span>
                        <span class="font-bold text-white text-sm md:text-base">Rp <?php echo e(number_format($transaction->product_price, 0, ',', '.')); ?></span>
                    </div>
                    
                    <div class="flex justify-between py-3 border-b border-gray-800">
                        <span class="text-gray-400 text-sm">Biaya Payment</span>
                        <span class="font-bold text-white text-sm md:text-base">Rp <?php echo e(number_format($transaction->payment_fee, 0, ',', '.')); ?></span>
                    </div>
                    
                    <?php if($transaction->voucher_code): ?>
                    <div class="flex justify-between py-3 border-b border-gray-800">
                        <span class="text-gray-400 text-sm">Voucher</span>
                        <span class="font-bold text-purple-400 font-mono text-sm md:text-base"><?php echo e($transaction->voucher_code); ?> (-Rp <?php echo e(number_format($transaction->discount_amount ?? 0, 0, ',', '.')); ?>)</span>
                    </div>
                    <?php endif; ?>
                    
                    <div class="flex justify-between py-3 bg-cyan-500/10 rounded-lg px-4">
                        <span class="text-white font-bold text-base md:text-lg">Total</span>
                        <span class="font-bold text-cyan-400 text-xl md:text-2xl">Rp <?php echo e(number_format($transaction->total_amount, 0, ',', '.')); ?></span>
                    </div>
                </div>
            </div>
            
            <!-- ✅ Customer Info (Collapsible) -->
            <div class="bg-gray-900 rounded-2xl border border-cyan-500/20 overflow-hidden" x-data="{ expanded: false }">
                <div class="p-6 cursor-pointer" @click="expanded = !expanded">
                    <h3 class="text-lg md:text-xl font-bold flex items-center justify-between">
                        <span class="flex items-center gap-2">
                            <i class="fas fa-user text-cyan-400"></i>
                            Informasi Customer
                        </span>
                        <i class="fas" :class="expanded ? 'fa-chevron-up' : 'fa-chevron-down'"></i>
                    </h3>
                </div>
                
                <div class="px-6 pb-6 space-y-4" x-show="expanded" x-collapse>
                    <div class="flex justify-between py-3 border-b border-gray-800">
                        <span class="text-gray-400 text-sm">Nama</span>
                        <span class="font-bold text-white text-sm md:text-base"><?php echo e($transaction->customer_name); ?></span>
                    </div>
                    
                    <div class="flex justify-between py-3 border-b border-gray-800">
                        <span class="text-gray-400 text-sm">Email</span>
                        <span class="font-bold text-white text-sm md:text-base break-all"><?php echo e($transaction->customer_email); ?></span>
                    </div>
                    
                    <?php if($transaction->customer_phone): ?>
                    <div class="flex justify-between py-3 border-b border-gray-800">
                        <span class="text-gray-400 text-sm">No. HP</span>
                        <span class="font-bold text-white text-sm md:text-base"><?php echo e($transaction->customer_phone); ?></span>
                    </div>
                    <?php endif; ?>
                </div>
            </div>
            
            <!-- ✅ Payment Info (Collapsible) -->
            <div class="bg-gray-900 rounded-2xl border border-cyan-500/20 overflow-hidden" x-data="{ expanded: false }">
                <div class="p-6 cursor-pointer" @click="expanded = !expanded">
                    <h3 class="text-lg md:text-xl font-bold flex items-center justify-between">
                        <span class="flex items-center gap-2">
                            <i class="fas fa-credit-card text-cyan-400"></i>
                            Informasi Pembayaran
                        </span>
                        <i class="fas" :class="expanded ? 'fa-chevron-up' : 'fa-chevron-down'"></i>
                    </h3>
                </div>
                
                <div class="px-6 pb-6 space-y-4" x-show="expanded" x-collapse>
                    <div class="flex justify-between py-3 border-b border-gray-800">
                        <span class="text-gray-400 text-sm">Metode Pembayaran</span>
                        <span class="font-bold text-white text-sm md:text-base"><?php echo e($transaction->payment_method); ?></span>
                    </div>
                    
                    <?php if($transaction->reference): ?>
                    <div class="flex justify-between py-3 border-b border-gray-800">
                        <span class="text-gray-400 text-sm">Reference</span>
                        <span class="font-bold text-cyan-400 font-mono text-sm md:text-base"><?php echo e($transaction->reference); ?></span>
                    </div>
                    <?php endif; ?>
                    
                    <div class="flex justify-between py-3 border-b border-gray-800">
                        <span class="text-gray-400 text-sm">Tanggal Pesanan</span>
                        <span class="font-bold text-white text-sm md:text-base"><?php echo e(\Carbon\Carbon::parse($transaction->created_at)->timezone('Asia/Jakarta')->format('d M Y, H:i')); ?> WIB</span>
                    </div>
                    
                    <?php if($transaction->paid_at): ?>
                    <div class="flex justify-between py-3 border-b border-gray-800">
                        <span class="text-gray-400 text-sm">Tanggal Bayar</span>
                        <span class="font-bold text-green-400 text-sm md:text-base"><?php echo e(\Carbon\Carbon::parse($transaction->paid_at)->timezone('Asia/Jakarta')->format('d M Y, H:i')); ?> WIB</span>
                    </div>
                    <?php endif; ?>
                    
                    <?php if($transaction->expired_at && $transaction->payment_status === 'UNPAID'): ?>
                    <div class="flex justify-between py-3 bg-yellow-500/10 rounded-lg px-4">
                        <span class="text-yellow-400 font-bold text-sm">Expired</span>
                        <span class="font-bold text-yellow-400 text-sm md:text-base"><?php echo e(\Carbon\Carbon::parse($transaction->expired_at)->timezone('Asia/Jakarta')->format('d M Y, H:i')); ?> WIB</span>
                    </div>
                    <?php endif; ?>
                </div>
            </div>
            
            <!-- ✅ Serial Number / Result (Enhanced) -->
            <?php if($transaction->status === 'success' && $transaction->provider_sn): ?>
            <div class="bg-gradient-to-r from-green-500/20 to-cyan-500/20 rounded-2xl border border-green-500/30 p-6">
                <h3 class="text-lg md:text-xl font-bold mb-4 flex items-center gap-2 text-green-400">
                    <i class="fas fa-gift"></i>
                    Kode / Serial Number
                </h3>
                <div class="bg-gray-900 rounded-lg p-4 mb-4 relative">
                    <pre class="text-cyan-400 font-mono text-xs md:text-sm whitespace-pre-wrap"><?php echo e($transaction->provider_sn); ?></pre>
                    <button @click="copyToClipboard('<?php echo e($transaction->provider_sn); ?>')" 
                            class="absolute top-2 right-2 px-3 py-1 bg-cyan-500 hover:bg-cyan-600 rounded text-xs font-bold transition">
                        <i class="fas fa-copy mr-1"></i>Copy
                    </button>
                </div>
                <div class="bg-blue-500/10 border border-blue-500/30 rounded-lg p-3">
                    <p class="text-gray-300 text-xs md:text-sm">
                        <i class="fas fa-info-circle text-blue-400 mr-2"></i>
                        Simpan kode ini dengan baik. Kode sudah dikirim ke email <strong class="text-white"><?php echo e($transaction->customer_email); ?></strong>
                    </p>
                </div>
            </div>
            <?php endif; ?>
            
            <!-- ✅ PRINT ONLY: Company Footer Info -->
            <div class="print-only-footer" style="display: none;">
                <div style="margin-top: 2rem; padding-top: 1rem; border-top: 2px solid #ddd; text-align: center;">
                    <p style="font-weight: bold; font-size: 16px; margin-bottom: 0.5rem;">RYLL STORE</p>
                    <p style="font-size: 12px; color: #666; margin-bottom: 0.25rem;">Top Up Game Termurah & Tercepat di Indonesia</p>
                    <p style="font-size: 11px; color: #999;">Email: support@ryllstore.com | WA: +62 812-3456-7890</p>
                    <p style="font-size: 10px; color: #999; margin-top: 1rem;">Invoice ini dicetak pada: <?php echo e(\Carbon\Carbon::now()->timezone('Asia/Jakarta')->format('d F Y, H:i')); ?> WIB</p>
                </div>
            </div>
            
            <!-- ✅ Actions (Enhanced) -->
            <div class="flex flex-col md:flex-row gap-4 print-actions-hide">
                <a href="/" class="flex-1 px-6 py-4 bg-cyan-500 hover:bg-cyan-600 rounded-xl font-bold text-center transition">
                    <i class="fas fa-home mr-2"></i>Kembali ke Beranda
                </a>
                
                <?php if($transaction->payment_status === 'UNPAID' && $transaction->checkout_url): ?>
                <a href="<?php echo e($transaction->checkout_url); ?>" class="flex-1 px-6 py-4 bg-gradient-to-r from-cyan-500 to-blue-600 hover:opacity-90 rounded-xl font-bold text-center transition">
                    <i class="fas fa-credit-card mr-2"></i>Bayar Sekarang
                </a>
                <?php endif; ?>

                <button @click="printInvoice()" class="md:w-auto px-6 py-4 bg-gray-800 hover:bg-gray-700 rounded-xl font-bold transition">
                    <i class="fas fa-print mr-2"></i>Print Invoice
                </button>
            </div>

            <!-- ✅ Need Help Section -->
            <div class="bg-gray-900 rounded-xl border border-gray-800 p-6 print-help-hide">
                <h3 class="text-lg font-bold mb-4 flex items-center gap-2">
                    <i class="fas fa-question-circle text-cyan-400"></i>
                    Butuh Bantuan?
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <a href="https://wa.me/6281234567890" class="flex items-center gap-3 p-4 bg-green-500/10 hover:bg-green-500/20 border border-green-500/30 rounded-lg transition">
                        <i class="fab fa-whatsapp text-2xl text-green-400"></i>
                        <div>
                            <p class="font-bold text-sm">WhatsApp</p>
                            <p class="text-xs text-gray-400">Chat dengan CS</p>
                        </div>
                    </a>

                    <a href="https://t.me/ryllstore" class="flex items-center gap-3 p-4 bg-blue-500/10 hover:bg-blue-500/20 border border-blue-500/30 rounded-lg transition">
                        <i class="fab fa-telegram text-2xl text-blue-400"></i>
                        <div>
                            <p class="font-bold text-sm">Telegram</p>
                            <p class="text-xs text-gray-400">Support 24/7</p>
                        </div>
                    </a>

                    <a href="mailto:support@ryllstore.com" class="flex items-center gap-3 p-4 bg-purple-500/10 hover:bg-purple-500/20 border border-purple-500/30 rounded-lg transition">
                        <i class="fas fa-envelope text-2xl text-purple-400"></i>
                        <div>
                            <p class="font-bold text-sm">Email</p>
                            <p class="text-xs text-gray-400">support@ryllstore.com</p>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <?php endif; ?>
        
    </div>
</div>

<!-- FOOTER -->
<footer class="bg-gray-900 border-t border-gray-800 mt-20">
    <div class="max-w-7xl mx-auto px-4 py-12">
        <div class="flex flex-col items-center justify-center">
            
            <a href="/" class="relative flex items-center justify-center group z-[60] w-full max-w-[240px]">
                <img src="<?php echo e(asset('images/ryll.webp')); ?>" 
                     alt="RYLL STORE" 
                     class="h-20 md:h-32 w-auto object-contain transition-transform duration-300 group-hover:scale-105"
                     style="
                        /* Cabut position absolute améh nuturkeun alur flex */
                        filter: drop-shadow(0 0 12px rgba(34, 211, 238, 0.2));
                     "
                     fetchpriority="high">
            </a>
<p class="text-gray-400 text-xs md:text-sm mb-8 font-medium tracking-widest uppercase opacity-80 text-center">
    <span class="inline-block border-b border-cyan-500/30 pb-2">
        Top Up Game <span class="text-cyan-400">Termurah</span> & <span class="text-cyan-400">Tercepat</span> di Indonesia
    </span>
</p>

<div class="flex flex-wrap items-center justify-center gap-4 md:gap-8 text-[11px] md:text-xs font-bold uppercase tracking-wider mb-10">
    <div class="flex items-center gap-2 px-4 py-2 bg-gray-900/50 border border-gray-800 rounded-full hover:border-green-400/50 transition-all duration-300 group">
        <i class="fas fa-bolt text-green-400 group-hover:scale-125 transition-transform"></i>
        <span class="text-gray-400 group-hover:text-gray-200">Proses Instan</span>
    </div>
    
    <div class="flex items-center gap-2 px-4 py-2 bg-gray-900/50 border border-gray-800 rounded-full hover:border-blue-400/50 transition-all duration-300 group">
        <i class="fas fa-shield-alt text-blue-400 group-hover:scale-125 transition-transform"></i>
        <span class="text-gray-400 group-hover:text-gray-200">100% Aman</span>
    </div>
    
    <div class="flex items-center gap-2 px-4 py-2 bg-gray-900/50 border border-gray-800 rounded-full hover:border-purple-400/50 transition-all duration-300 group">
        <i class="fas fa-headset text-purple-400 group-hover:scale-125 transition-transform"></i>
        <span class="text-gray-400 group-hover:text-gray-200">24/7 Support</span>
    </div>
</div>
            
            <div class="mb-6">
<p class="w-full max-w-[240px] mx-auto text-center font-orbitron text-xs md:text-sm tracking-[0.2em] uppercase text-cyan-400/80 font-bold py-4 relative group z-[60]">
    <span class="relative z-10">Follow Us</span>
    
    <span class="absolute left-0 top-1/2 w-8 h-[1px] bg-gradient-to-r from-transparent to-cyan-500/50"></span>
    <span class="absolute right-0 top-1/2 w-8 h-[1px] bg-gradient-to-l from-transparent to-cyan-500/50"></span>
</p>                <div class="flex items-center justify-center gap-4">
                    <a href="https://www.instagram.com/ryll_storeee?igsh=MTF4NndsMnJmeTJpZA==" 
                       target="_blank"
                       class="w-12 h-12 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center hover:scale-110 transition shadow-lg">
                        <i class="fab fa-instagram text-xl"></i>
                    </a>
                    <a href="https://tiktok.com/@ryllstore" 
                       target="_blank"
                       class="w-12 h-12 rounded-full bg-black flex items-center justify-center hover:scale-110 transition shadow-lg border border-white/20">
                        <i class="fab fa-tiktok text-xl"></i>
                    </a>
                    <a href="https://wa.me/6281234567890" 
                       target="_blank"
                       class="w-12 h-12 rounded-full bg-gradient-to-br from-green-500 to-green-600 flex items-center justify-center hover:scale-110 transition shadow-lg">
                        <i class="fab fa-whatsapp text-xl"></i>
                    </a>
                    <a href="https://discord.gg/ryllstore" 
                       target="_blank"
                       class="w-12 h-12 rounded-full bg-gradient-to-br from-indigo-500 to-blue-600 flex items-center justify-center hover:scale-110 transition shadow-lg">
                        <i class="fab fa-discord text-xl"></i>
                    </a>
                    <a href="https://t.me/ryllstore" 
                       target="_blank"
                       class="w-12 h-12 rounded-full bg-gradient-to-br from-cyan-500 to-blue-500 flex items-center justify-center hover:scale-110 transition shadow-lg">
                        <i class="fab fa-telegram text-xl"></i>
                    </a>
                </div>
            </div>
            
            <p class="text-xs text-gray-600">© <?php echo e(date('Y')); ?> Ryll Store. All rights reserved.</p>
        </div>
    </div>
</footer>

<script>
function trackOrderManager() {
    return {
        copyToClipboard(text) {
            navigator.clipboard.writeText(text).then(() => {
                alert('✅ Kode berhasil dicopy ke clipboard!');
            }).catch(() => {
                alert('❌ Gagal copy kode');
            });
        },

        printInvoice() {
            window.print();
        }
    }
}

// ✅ FIX: Auto-refresh component that stops on print
function autoRefresh() {
    return {
        countdown: 30,
        interval: null,
        
        startCountdown() {
            this.interval = setInterval(() => {
                this.countdown--;
                
                if (this.countdown <= 0) {
                    window.location.reload();
                }
            }, 1000);
            
            // ✅ PAUSE countdown when printing
            window.addEventListener('beforeprint', () => {
                if (this.interval) {
                    clearInterval(this.interval);
                }
            });
            
            // ✅ RESUME countdown after printing
            window.addEventListener('afterprint', () => {
                this.startCountdown();
            });
        }
    }
}
</script>

<!-- ✅ ULTRA CLEAN PRINT INVOICE STYLES -->
<style media="print">
    /* Reset page margins for better print layout */
    @page {
        margin: 1cm;
        size: A4;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
    
    /* Hide EVERYTHING by default */
    body * {
        visibility: hidden;
    }
    
    /* Show ONLY invoice container */
    .max-w-4xl, 
    .max-w-4xl * {
        visibility: visible;
    }
    
    .max-w-4xl {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        padding: 0 !important;
    }
    
    /* ✅ SHOW: Print-only company footer */
    .print-only-footer {
        display: block !important;
        visibility: visible !important;
    }
    
    /* ✅ HIDE: Specific action and help sections with dedicated classes */
    .print-actions-hide,
    .print-help-hide {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* ✅ HIDE: Nav, Footer, Auto-refresh, Timeline visual, Buttons, Help Section */
    nav, 
    footer, 
    button,
    a[href]:not(.print-keep),
    .print\\:hidden,
    .bg-blue-500\/10,
    .timeline-step,
    h3:has(i.fa-stream),
    .space-y-6 > .bg-gray-900:has(.timeline-step),
    [class*="Need Help"],
    [class*="Butuh Bantuan"],
    .flex.gap-4:has(a[href="/"]),
    .flex.gap-4:has(button),
    .grid.gap-4:has(a[href*="wa.me"]),
    /* ✅ Hide ALL action links/buttons */
    a.flex-1,
    a[class*="bg-cyan"],
    a[class*="bg-gradient"],
    a[href="/"],
    a[href*="checkout"],
    /* ✅ Hide button container */
    div.flex.flex-col:has(a[href="/"]),
    div.flex:has(a.bg-cyan-500) {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* ✅ Hide collapsible icons */
    .fa-chevron-up,
    .fa-chevron-down {
        display: none !important;
    }
    
    /* ✅ Auto-expand all collapsible sections for print */
    [x-show] {
        display: block !important;
    }
    
    /* ✅ Clean backgrounds - white with subtle borders */
    .bg-gray-900,
    .bg-gradient-to-r,
    .bg-gradient-to-br,
    [class*="bg-gray"],
    [class*="bg-cyan"],
    [class*="bg-green"] {
        background: white !important;
        border: 1px solid #ddd !important;
        box-shadow: none !important;
    }
    
    /* ✅ Header - clean white with border */
    .print-invoice-header {
        background: white !important;
        border: 2px solid #000 !important;
        padding: 1.5rem !important;
    }
    
    .print-invoice-header h1 {
        color: #000 !important;
        font-size: 24px !important;
    }
    
    .print-invoice-header p {
        color: #333 !important;
    }
    
    /* ✅ Clean text colors - all black */
    .text-cyan-400,
    .text-green-400,
    .text-yellow-400,
    .text-blue-400,
    .text-purple-400,
    .text-white,
    [class*="text-"] {
        color: #000 !important;
    }
    
    /* ✅ Status badges - simple outline style */
    [class*="px-4"][class*="py-2"][class*="rounded"]:not(button) {
        background: white !important;
        border: 2px solid #333 !important;
        color: #000 !important;
        font-weight: bold !important;
    }
    
    /* ✅ Header styling */
    .font-orbitron {
        font-weight: bold !important;
        color: #000 !important;
    }
    
    /* ✅ Section headers */
    h3 {
        color: #000 !important;
        font-weight: bold !important;
        border-bottom: 2px solid #ddd !important;
        padding-bottom: 0.5rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* ✅ Table/list spacing */
    .space-y-4 > * {
        margin-bottom: 0.5rem !important;
    }
    
    /* ✅ Border styling */
    .border-cyan-500\/20,
    .border-gray-800,
    .border-green-500\/30,
    [class*="border-"] {
        border-color: #ddd !important;
    }
    
    /* ✅ Icons - keep but make black */
    i {
        color: #333 !important;
    }
    
    /* ✅ Serial Number box - highlight but clean */
    .bg-gray-900.rounded-lg.p-4:has(pre) {
        background: #f9f9f9 !important;
        border: 2px dashed #333 !important;
        padding: 1rem !important;
    }
    
    pre {
        color: #000 !important;
        font-weight: bold !important;
        font-size: 14px !important;
    }
    
    /* ✅ Total amount highlight */
    .bg-cyan-500\/10 {
        background: #f0f0f0 !important;
        border: 2px solid #000 !important;
    }
    
    /* ✅ Page breaks - avoid breaking inside important sections */
    .bg-gray-900.rounded-2xl,
    .bg-gray-900.rounded-xl {
        page-break-inside: avoid;
        margin-bottom: 1rem !important;
    }
    
    /* ✅ Hide specific help text that's not needed */
    .text-xs.text-gray-400:has(i.fa-info-circle),
    .bg-blue-500\/10.border {
        display: none !important;
    }
    
    /* ✅ Compact spacing for print */
    .space-y-6 {
        gap: 1rem !important;
    }
    
    .p-6,
    .p-4 {
        padding: 1rem !important;
    }
</style>

</body>
</html><?php /**PATH /home/instinct/Documents/belajar/php/ryll-topup/resources/views/track-order.blade.php ENDPATH**/ ?>