@extends('layouts.landing-page')

@section('content')
    <div class="mb-8" id="paymentSuccessContainer">
        <!-- Header -->
        <div class="flex flex-col md:flex-row md:justify-between md:items-center mb-8 gap-4">
            <h1 class="text-2xl md:text-3xl font-bold text-white flex items-center gap-3">
                <div class="w-10 h-10 bg-green-600 rounded-xl flex items-center justify-center">
                    <i class="ti ti-check text-lg"></i>
                </div>
                Pembayaran Berhasil
            </h1>
        </div>

        <div class="flex justify-center">
            <div class="max-w-2xl w-full">
                <!-- Success Card -->
                <div class="bg-gray-900/50 backdrop-blur-sm rounded-2xl p-8 border border-gray-800/50 text-center">

                    <!-- Success Icon Animation -->
                    <div class="mb-8">
                        <div
                            class="w-24 h-24 bg-green-600/20 rounded-full flex items-center justify-center mx-auto mb-4 animate-pulse">
                            <div class="w-16 h-16 bg-green-600 rounded-full flex items-center justify-center">
                                <i class="ti ti-check text-2xl text-white"></i>
                            </div>
                        </div>

                        <!-- Animated Success Message -->
                        <h2 class="text-3xl font-bold text-white mb-2">Pembayaran Berhasil!</h2>
                        <p class="text-gray-300 text-lg">Terima kasih atas pembelian Anda</p>
                    </div>

                    <!-- Transaction Details -->
                    <div class="bg-gray-800/30 rounded-xl p-6 mb-8 text-left">
                        <h3 class="text-lg font-semibold text-white mb-4 flex items-center gap-2">
                            <i class="ti ti-receipt text-green-400"></i>
                            Detail Transaksi
                        </h3>

                        <div class="space-y-3">
                            <div class="flex justify-between items-center">
                                <span class="text-gray-300">Order ID</span>
                                <span
                                    class="text-white font-mono text-sm bg-gray-700/50 px-2 py-1 rounded">ORDER-{{ date('YmdHis') }}</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-gray-300">Tanggal</span>
                                <span class="text-white">{{ date('d F Y, H:i') }}</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-gray-300">Metode Pembayaran</span>
                                <span class="text-white">QRIS</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-gray-300">Status</span>
                                <span
                                    class="bg-green-600/20 text-green-400 px-3 py-1 rounded-full text-sm border border-green-600/30">
                                    <i class="ti ti-check text-xs mr-1"></i>
                                    Berhasil
                                </span>
                            </div>
                            <div class="border-t border-gray-700 pt-3">
                                <div class="flex justify-between items-center">
                                    <span class="text-lg font-semibold text-white">Total Pembayaran</span>
                                    <span class="text-xl font-bold text-green-400">Rp 257.000</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Purchased Items -->
                    <div class="bg-gray-800/30 rounded-xl p-6 mb-8 text-left">
                        <h3 class="text-lg font-semibold text-white mb-4 flex items-center gap-2">
                            <i class="ti ti-music text-blue-400"></i>
                            Item yang Dibeli
                        </h3>

                        <div class="space-y-4">
                            <div class="flex items-center gap-4">
                                <img src="https://picsum.photos/48" alt="Song Cover"
                                    class="w-12 h-12 rounded-lg object-cover" />
                                <div class="flex-1">
                                    <div class="text-white font-medium">Freedom Sound</div>
                                    <div class="text-sm text-gray-400">John Music - Cover License</div>
                                </div>
                                <span class="text-green-400 font-semibold">Rp 50.000</span>
                            </div>

                            <div class="flex items-center gap-4">
                                <img src="https://picsum.photos/49" alt="Song Cover"
                                    class="w-12 h-12 rounded-lg object-cover" />
                                <div class="flex-1">
                                    <div class="text-white font-medium">Summer Vibe</div>
                                    <div class="text-sm text-gray-400">John Music - Remake License</div>
                                </div>
                                <span class="text-green-400 font-semibold">Rp 100.000</span>
                            </div>

                            <div class="flex items-center gap-4">
                                <img src="https://picsum.photos/50" alt="Song Cover"
                                    class="w-12 h-12 rounded-lg object-cover" />
                                <div class="flex-1">
                                    <div class="text-white font-medium">Chill Beat</div>
                                    <div class="text-sm text-gray-400">Musik Kita - Exclusive License</div>
                                </div>
                                <span class="text-green-400 font-semibold">Rp 75.000</span>
                            </div>
                        </div>
                    </div>

                    <!-- Next Steps -->
                    <div class="mt-8 p-4 bg-blue-600/10 border border-blue-600/20 rounded-xl">
                        <div class="flex items-start gap-3">
                            <i class="ti ti-info-circle text-blue-400 mt-1"></i>
                            <div class="text-left">
                                <h4 class="text-blue-400 font-semibold mb-1">Langkah Selanjutnya</h4>
                                <p class="text-sm text-gray-300">
                                    File musik dan lisensi sudah tersedia di halaman download.
                                    Invoice akan dikirim ke email Anda dalam 5 menit.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Show success animation
            const successIcon = document.querySelector('.animate-pulse');

            // Add confetti effect (optional)
            setTimeout(() => {
                // Simple celebration effect
                const celebration = document.createElement('div');
                celebration.className = 'fixed inset-0 pointer-events-none z-50';
                celebration.innerHTML = `
                    <div class="absolute top-1/4 left-1/4 w-2 h-2 bg-green-400 rounded-full animate-bounce"></div>
                    <div class="absolute top-1/3 right-1/4 w-2 h-2 bg-blue-400 rounded-full animate-bounce" style="animation-delay: 0.1s"></div>
                    <div class="absolute top-1/2 left-1/3 w-2 h-2 bg-yellow-400 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
                    <div class="absolute top-1/4 right-1/3 w-2 h-2 bg-red-400 rounded-full animate-bounce" style="animation-delay: 0.3s"></div>
                `;

                document.body.appendChild(celebration);

                // Remove after animation
                setTimeout(() => {
                    celebration.remove();
                }, 3000);
            }, 500);

            // Auto-redirect countdown (optional)
            // setTimeout(() => {
            //     window.location.href = '/downloads';
            // }, 10000);
        });
    </script>
@endsection

@push('script')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const elPaymentSuccess = document.getElementById('paymentSuccessContainer');
            const elMain = document.getElementById('mainContent');

            if (elPaymentSuccess) {
                elMain.classList.add('w-full');
            }
        });
    </script>
@endpush