<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Payment - {{ $transaction->invoice_number }}</title>
    <link rel="icon" type="image/webp" href="{{ 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; }
        
        /* Animated Copy Button */
        @keyframes ripple {
            0% {
                transform: translate(-50%, -50%) scale(0);
                opacity: 1;
            }
            100% {
                transform: translate(-50%, -50%) scale(4);
                opacity: 0;
            }
        }
        
        @keyframes checkmark {
            0% {
                transform: scale(0) rotate(0deg);
            }
            50% {
                transform: scale(1.2) rotate(180deg);
            }
            100% {
                transform: scale(1) rotate(360deg);
            }
        }
        
        @keyframes shine {
            0% {
                left: -100%;
            }
            100% {
                left: 100%;
            }
        }
        
        .copy-btn {
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        
        .copy-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 16px rgba(6, 182, 212, 0.3);
        }
        
        .copy-btn::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 20px;
            height: 20px;
            background: rgba(6, 182, 212, 0.5);
            border-radius: 50%;
            transform: translate(-50%, -50%) scale(0);
            opacity: 0;
        }
        
        .copy-btn.copied::before {
            animation: ripple 0.6s ease-out;
        }
        
        .copy-btn.copied i {
            animation: checkmark 0.5s ease-out;
        }
        
        .copy-btn::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 50%;
            height: 100%;
            background: linear-gradient(
                90deg,
                transparent,
                rgba(255, 255, 255, 0.2),
                transparent
            );
            transform: skewX(-25deg);
        }
        
        .copy-btn:hover::after {
            animation: shine 0.8s ease;
        }
        
        /* Tooltip */
        .copy-tooltip {
            position: absolute;
            bottom: 120%;
            left: 50%;
            transform: translateX(-50%) translateY(10px);
            background: rgba(6, 182, 212, 0.95);
            color: white;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: bold;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: all 0.3s ease;
            z-index: 100;
        }
        
        .copy-tooltip::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            border: 6px solid transparent;
            border-top-color: rgba(6, 182, 212, 0.95);
        }
        
        .copy-tooltip.show {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
        
        /* Fade in animation */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .fade-in-up {
            animation: fadeInUp 0.6s ease-out;
        }
        
        /* Pulse animation */
        @keyframes pulse {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.05);
            }
        }
        
        .pulse-animation {
            animation: pulse 2s ease-in-out infinite;
        }
        
        /* Glowing effect */
        @keyframes glow {
            0%, 100% {
                box-shadow: 0 0 10px rgba(6, 182, 212, 0.3);
            }
            50% {
                box-shadow: 0 0 20px rgba(6, 182, 212, 0.6), 0 0 30px rgba(6, 182, 212, 0.4);
            }
        }
        
        .glow-effect {
            animation: glow 2s ease-in-out infinite;
        }
    </style>
</head>
<body class="bg-gray-950 text-white">
    
    <div class="min-h-screen flex items-center justify-center p-4">
        <div class="max-w-2xl w-full">
            
            <!-- Back Button -->
            <a href="{{ url('/') }}" class="inline-flex items-center gap-2 px-4 py-2 bg-gray-800 text-gray-400 rounded-lg hover:bg-gray-700 hover:text-white transition mb-6 fade-in-up">
                <i class="fas fa-arrow-left"></i>
                <span>Kembali ke beranda</span>
            </a>
            
            <!-- Payment Card -->
            <div class="bg-gray-900 rounded-2xl border border-cyan-500/20 overflow-hidden fade-in-up" style="animation-delay: 0.1s;">
                
                <!-- Invoice Section with Animated Copy Button -->
               <!-- Invoice Section with Animated Copy Button -->
<div class="bg-gradient-to-r from-cyan-500 to-blue-600 p-8 relative overflow-hidden">
    <!-- Background Pattern -->
    <div class="absolute inset-0 opacity-10">
        <div class="absolute inset-0" style="background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,.1) 10px, rgba(255,255,255,.1) 20px);"></div>
    </div>
    
    <div class="relative z-10 text-center">
        <!-- Icon with Animation -->
        <div class="w-20 h-20 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4 pulse-animation backdrop-blur-sm">
            <i class="fas fa-receipt text-4xl text-white"></i>
        </div>
        
        <h1 class="text-3xl font-bold font-orbitron mb-2 text-white">INVOICE</h1>
        <p class="text-white/90 text-sm mb-6">{{ $transaction->invoice_number }}</p>
        
        <!-- Invoice Code with Animated Copy Button -->
        <div class="flex items-center justify-center gap-3 flex-wrap">
            <div class="bg-white/10 backdrop-blur-md rounded-xl p-4 border border-white/30 shadow-lg">
                <code id="invoice-number" class="text-xl font-mono font-bold tracking-wider text-white">
                    {{ $transaction->invoice_number }}
                </code>
            </div>
            
            <button onclick="copyInvoice()" 
                    class="copy-btn bg-white/20 hover:bg-white/30 p-4 rounded-xl transition relative group backdrop-blur-sm border border-white/20"
                    title="Salin Invoice">
                <i class="fas fa-copy text-xl text-white relative z-10"></i>
                <span class="copy-tooltip">Salin Invoice</span>
            </button>
        </div>
        
        <p class="text-white/80 text-sm mt-4 flex items-center justify-center gap-2">
            <i class="fas fa-tag"></i>
            Ref: <span class="font-mono">{{ $transaction->reference }}</span>
        </p>
    </div>
</div>
                
                <!-- Status Badge -->
                <div class="p-6 border-b border-gray-800 fade-in-up" style="animation-delay: 0.2s;">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm text-gray-400 mb-2">Status Pembayaran</p>
                            <span class="inline-block px-4 py-2 rounded-full text-sm font-bold {{ $transaction->payment_status === 'PAID' ? 'bg-green-500/20 text-green-400' : ($transaction->payment_status === 'UNPAID' ? 'bg-yellow-500/20 text-yellow-400' : 'bg-red-500/20 text-red-400') }}">
                                <i class="fas {{ $transaction->payment_status === 'PAID' ? 'fa-check-circle' : ($transaction->payment_status === 'UNPAID' ? 'fa-clock' : 'fa-times-circle') }} mr-2"></i>
                                {{ $transaction->payment_status }}
                            </span>
                        </div>
                        <div class="text-right">
                            <p class="text-sm text-gray-400 mb-2">Status Transaksi</p>
                            <span class="inline-block px-4 py-2 rounded-full text-sm font-bold {{ $transaction->status === 'success' ? 'bg-green-500/20 text-green-400' : ($transaction->status === 'processing' ? 'bg-blue-500/20 text-blue-400' : ($transaction->status === 'pending' ? 'bg-yellow-500/20 text-yellow-400' : 'bg-red-500/20 text-red-400')) }}">
                                <i class="fas {{ $transaction->status === 'success' ? 'fa-check-circle' : ($transaction->status === 'processing' ? 'fa-spinner fa-spin' : ($transaction->status === 'pending' ? 'fa-clock' : 'fa-times-circle')) }} mr-2"></i>
                                {{ strtoupper($transaction->status) }}
                            </span>
                        </div>
                    </div>
                </div>
                
                <!-- Product Info -->
<!-- Product Info -->
<div class="p-6 border-b border-gray-800 fade-in-up" style="animation-delay: 0.3s;">
    <h3 class="text-sm text-gray-400 mb-4 flex items-center gap-2">
        <i class="fas fa-box text-cyan-400"></i>
        Detail Produk
    </h3>
    <div class="bg-gray-800/50 rounded-lg p-4 hover:bg-gray-800/70 transition">
        <div class="flex items-center gap-4">
            <!-- Game Image/Icon -->
            @if($transaction->product && $transaction->product->category && $transaction->product->category->image)
                <img src="{{ asset('storage/' . $transaction->product->category->image) }}" 
                     alt="{{ $transaction->product->category->name }}"
                     class="w-16 h-16 rounded-lg object-cover shadow-lg flex-shrink-0">
            @elseif($transaction->product && $transaction->product->image)
                <img src="{{ asset('storage/' . $transaction->product->image) }}" 
                     alt="{{ $transaction->product_name }}"
                     class="w-16 h-16 rounded-lg object-cover shadow-lg flex-shrink-0">
            @else
                <div class="w-16 h-16 bg-gradient-to-br from-cyan-400 to-purple-600 rounded-lg flex items-center justify-center flex-shrink-0 shadow-lg">
                    <i class="fas fa-gamepad text-2xl text-white"></i>
                </div>
            @endif
            
            <div class="flex-1 min-w-0">
                <h4 class="font-bold text-white text-lg truncate">{{ $transaction->product_name }}</h4>
                <p class="text-sm text-gray-400 font-mono">{{ $transaction->product_code }}</p>
                
                <!-- Category Badge -->
                @if($transaction->product && $transaction->product->category)
                <span class="inline-block mt-1 px-2 py-1 bg-cyan-500/20 text-cyan-400 rounded text-xs">
                    {{ $transaction->product->category->name }}
                </span>
                @endif
                
                <p class="text-xs text-cyan-400 mt-2 flex items-center gap-1">
                    <i class="fas fa-user"></i>
                    <span class="font-mono">{{ $transaction->customer_data }}</span>
                </p>
            </div>
            
            <div class="text-right flex-shrink-0">
                <p class="text-2xl font-bold text-cyan-400">
                    Rp {{ number_format($transaction->product_price, 0, ',', '.') }}
                </p>
                <p class="text-xs text-gray-500 mt-1">Harga Produk</p>
            </div>
        </div>
    </div>
</div>
                
                <!-- Pricing Breakdown -->
                <div class="p-6 border-b border-gray-800 fade-in-up" style="animation-delay: 0.4s;">
                    <h3 class="text-sm text-gray-400 mb-4 flex items-center gap-2">
                        <i class="fas fa-receipt text-cyan-400"></i>
                        Rincian Harga
                    </h3>
                    <div class="space-y-3">
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-400">Harga Dasar</span>
                            <span class="font-bold text-gray-300">Rp {{ number_format($transaction->base_price, 0, ',', '.') }}</span>
                        </div>
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-400">Margin (10%)</span>
                            <span class="font-bold text-green-400">+ Rp {{ number_format($transaction->margin_amount, 0, ',', '.') }}</span>
                        </div>
                        <div class="flex justify-between text-sm pt-2 border-t border-gray-700">
                            <span class="text-gray-300">Harga Produk</span>
                            <span class="font-bold text-white">Rp {{ number_format($transaction->product_price, 0, ',', '.') }}</span>
                        </div>
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-400">Biaya Payment Gateway</span>
                            <span class="font-bold text-yellow-400">+ Rp {{ number_format($transaction->payment_fee, 0, ',', '.') }}</span>
                        </div>
                        <div class="flex justify-between pt-3 border-t-2 border-cyan-500/30">
                            <span class="text-lg font-bold text-cyan-400">Total Bayar</span>
                            <span class="text-2xl font-bold text-cyan-400">
                                Rp {{ number_format($transaction->total_amount, 0, ',', '.') }}
                            </span>
                        </div>
                    </div>
                    
                    <div class="mt-4 p-3 bg-blue-500/10 border border-blue-500/20 rounded-lg">
                        <p class="text-xs text-blue-400">
                            <i class="fas fa-info-circle mr-1"></i>
                            Biaya payment gateway ditanggung pembeli untuk transparansi harga.
                        </p>
                    </div>
                </div>
                
                <!-- Payment Action -->
                <div class="p-6 fade-in-up" style="animation-delay: 0.5s;">
                    @if($transaction->payment_status === 'UNPAID' && !$transaction->isExpired())
                        @if($transaction->checkout_url)
                        <a href="{{ $transaction->checkout_url }}" target="_blank"
                           class="block w-full px-6 py-4 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-xl font-bold text-xl text-center hover:scale-105 transition shadow-lg shadow-cyan-500/20 glow-effect pulse-animation">
                            <i class="fas fa-credit-card mr-2"></i>
                            BAYAR SEKARANG
                        </a>
                        @else
                        <button onclick="alert('Checkout URL tidak tersedia')"
                                class="w-full px-6 py-4 bg-gray-700 rounded-xl font-bold text-lg">
                            <i class="fas fa-spinner fa-spin mr-2"></i>
                            Menunggu Checkout URL...
                        </button>
                        @endif
                        
                        <p class="text-center text-sm text-gray-400 mt-4">
                            <i class="fas fa-clock mr-2"></i>
                            Bayar sebelum <span class="text-yellow-400 font-bold">{{ \Carbon\Carbon::parse($transaction->expired_at)->format('d M Y H:i') }} WIB</span>
                        </p>
                        
                        <button onclick="checkStatus()" 
                                class="w-full px-6 py-3 bg-gray-700 text-white rounded-lg font-bold hover:bg-gray-600 transition mt-3">
                            <i class="fas fa-sync-alt mr-2"></i>
                            Cek Status Pembayaran
                        </button>
                        
                    @elseif($transaction->payment_status === 'PAID')
                        <div class="text-center">
                            <div class="inline-block px-8 py-6 bg-green-500/20 text-green-400 rounded-2xl mb-4 border border-green-500/30">
                                <i class="fas fa-check-circle text-5xl mb-3 pulse-animation"></i>
                                <p class="font-bold text-xl">Pembayaran Berhasil!</p>
                                <p class="text-sm text-gray-300 mt-2">Pesanan sedang diproses</p>
                            </div>
                            
                            @if($transaction->status === 'success' && $transaction->provider_sn)
                            <div class="bg-gray-800 rounded-xl p-6 mt-4 border border-cyan-500/20">
                                <p class="text-sm text-gray-400 mb-3">Kode Voucher / Serial Number:</p>
                                <p class="text-2xl font-bold text-cyan-400 font-mono mb-4">{{ $transaction->provider_sn }}</p>
                                <button onclick="copyToClipboard('{{ $transaction->provider_sn }}')"
                                        class="copy-btn px-6 py-3 bg-cyan-500/20 text-cyan-400 rounded-lg font-bold hover:bg-cyan-500/30 transition">
                                    <i class="fas fa-copy mr-2"></i>Copy Kode
                                </button>
                            </div>
                            @endif
                            
                            <button onclick="checkStatus()" 
                                    class="w-full px-6 py-4 bg-cyan-500 text-white rounded-xl font-bold hover:bg-cyan-600 transition mt-4">
                                <i class="fas fa-sync-alt mr-2"></i>
                                Cek Status Pesanan
                            </button>
                        </div>
                        
                    @else
                        <div class="text-center py-8">
                            <i class="fas fa-clock text-6xl text-red-500 mb-4 pulse-animation"></i>
                            <p class="text-red-400 font-bold text-2xl mb-2">Transaksi Kadaluarsa</p>
                            <p class="text-sm text-gray-400 mb-6">Silakan buat transaksi baru</p>
                            <a href="{{ url('/') }}" 
                               class="inline-block px-8 py-4 bg-gradient-to-r from-cyan-500 to-blue-600 text-white rounded-xl font-bold hover:scale-105 transition">
                                <i class="fas fa-home mr-2"></i>
                                Kembali ke Store
                            </a>
                        </div>
                    @endif
                </div>
                
            </div>
            
        </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="{{ 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-sm mb-6">Top Up Game Termurah & Tercepat di Indonesia</p>
            
            <div class="flex flex-wrap items-center justify-center gap-6 text-sm text-gray-500 mb-8">
                <span><i class="fas fa-bolt text-green-400 mr-2"></i>Proses Instan</span>
                <span><i class="fas fa-shield-alt text-blue-400 mr-2"></i>100% Aman</span>
                <span><i class="fas fa-headset text-purple-400 mr-2"></i>24/7 Support</span>
            </div>
            
            <div class="mb-6">
                <p class="text-gray-400 text-sm mb-3">Follow Us</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">© {{ date('Y') }} Ryll Store. All rights reserved.</p>
        </div>
    </div>
</footer>
    
    <script>
        // Animated Copy Invoice
        function copyInvoice() {
            const invoice = document.getElementById('invoice-number').innerText;
            const btn = event.target.closest('button');
            const icon = btn.querySelector('i');
            const tooltip = btn.querySelector('.copy-tooltip');
            
            navigator.clipboard.writeText(invoice).then(() => {
                // Add copied class for ripple animation
                btn.classList.add('copied');
                
                // Change icon to checkmark
                icon.className = 'fas fa-check text-xl text-green-400 relative z-10';
                
                // Show tooltip
                tooltip.textContent = 'Tersalin!';
                tooltip.classList.add('show');
                
                // Add glow effect
                btn.style.background = 'rgba(34, 197, 94, 0.3)';
                
                setTimeout(() => {
                    btn.classList.remove('copied');
                    icon.className = 'fas fa-copy text-xl relative z-10';
                    tooltip.textContent = 'Salin Invoice';
                    tooltip.classList.remove('show');
                    btn.style.background = '';
                }, 2000);
            }).catch(() => {
                tooltip.textContent = 'Gagal menyalin!';
                tooltip.classList.add('show');
                setTimeout(() => {
                    tooltip.classList.remove('show');
                }, 2000);
            });
        }
        
        // Check transaction status with animation
        function checkStatus() {
            const btn = event.target;
            const originalHTML = btn.innerHTML;
            btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Mengecek...';
            btn.disabled = true;
            btn.classList.add('opacity-50');
            
            fetch('/transactions/{{ $transaction->invoice_number }}/status')
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        if (data.data.payment_status === 'PAID' || data.data.status === 'success') {
                            btn.innerHTML = '<i class="fas fa-check-circle mr-2 text-green-400"></i>Status Updated!';
                            setTimeout(() => location.reload(), 1000);
                        } else {
                            btn.innerHTML = '<i class="fas fa-info-circle mr-2"></i>Status: ' + data.data.payment_status;
                            setTimeout(() => {
                                btn.innerHTML = originalHTML;
                                btn.disabled = false;
                                btn.classList.remove('opacity-50');
                            }, 2000);
                        }
                    }
                })
                .catch(error => {
                    btn.innerHTML = '<i class="fas fa-times-circle mr-2 text-red-400"></i>Gagal mengecek';
                    setTimeout(() => {
                        btn.innerHTML = originalHTML;
                        btn.disabled = false;
                        btn.classList.remove('opacity-50');
                    }, 2000);
                });
        }
        
        // Copy to clipboard with animation
        function copyToClipboard(text) {
            const btn = event.target;
            const originalHTML = btn.innerHTML;
            
            navigator.clipboard.writeText(text).then(() => {
                btn.innerHTML = '<i class="fas fa-check mr-2"></i>Tersalin!';
                btn.classList.add('bg-green-500/30', 'text-green-400');
                
                setTimeout(() => {
                    btn.innerHTML = originalHTML;
                    btn.classList.remove('bg-green-500/30', 'text-green-400');
                }, 2000);
            });
        }
        
        // Auto refresh for processing transactions
// ✅ IMPROVED: Auto refresh for BOTH payment AND order status
@if($transaction->payment_status === 'UNPAID' && !$transaction->isExpired())
// Check payment status every 10 seconds
setInterval(function() {
    fetch('/transactions/{{ $transaction->invoice_number }}/status')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Reload if payment status changed
                if (data.data.payment_status !== '{{ $transaction->payment_status }}') {
                    console.log('Payment status changed, reloading...');
                    location.reload();
                }
            }
        })
        .catch(error => console.error('Status check error:', error));
}, 10000);

@elseif($transaction->payment_status === 'PAID' && in_array($transaction->status, ['paid', 'processing']))
// Check order fulfillment status every 15 seconds
setInterval(function() {
    fetch('/transactions/{{ $transaction->invoice_number }}/status')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Reload if order completed
                if (data.data.status === 'success' && data.data.provider_sn) {
                    console.log('Order completed, reloading...');
                    location.reload();
                }
                
                // Update status badge without reload
                if (data.data.status !== '{{ $transaction->status }}') {
                    console.log('Status updated:', data.data.status);
                    // Optional: Update UI dynamically without reload
                }
            }
        })
        .catch(error => console.error('Status check error:', error));
}, 15000);
@endif
    </script>
    <!-- ✅ CONNECTION ERROR HANDLER -->
<div x-data="{ 
    showError: false, 
    errorMsg: '',
    showConnectionError() {
        this.errorMsg = 'Koneksi bermasalah. Coba refresh halaman.';
        this.showError = true;
        setTimeout(() => this.showError = false, 5000);
    }
}" x-cloak>
    
    <div x-show="showError" 
         x-transition
         class="fixed top-4 right-4 z-[200] max-w-md">
        <div class="bg-red-500 text-white px-6 py-4 rounded-xl shadow-2xl flex items-center gap-3">
            <i class="fas fa-exclamation-triangle text-xl"></i>
            <p class="font-bold text-sm" x-text="errorMsg"></p>
            <button @click="showError = false" class="ml-auto">
                <i class="fas fa-times"></i>
            </button>
        </div>
    </div>
</div>

<script>
// ✅ GLOBAL ERROR HANDLER
window.addEventListener('unhandledrejection', function(event) {
    console.error('Unhandled promise rejection:', event.reason);
    
    // Show user-friendly error
    if (event.reason && event.reason.message) {
        Alpine.store('notifications').showError('Terjadi kesalahan: ' + event.reason.message);
    }
});
</script>
</body>

</html>