@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>

                    <!-- Action Buttons -->
                    <div class="flex flex-col md:flex-row gap-4 justify-center">
                        <a href="/downloads"
                            class="flex items-center justify-center gap-2 px-6 py-3 bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 text-white font-semibold rounded-xl transition-all duration-200 transform hover:scale-[1.02] active:scale-[0.98] shadow-lg hover:shadow-green-600/25">
                            <i class="ti ti-download"></i>
                            Download File
                        </a>

                        <a href="/invoice/ORDER-{{ date('YmdHis') }}"
                            class="flex items-center justify-center gap-2 px-6 py-3 bg-gray-700/50 border border-gray-600/50 text-gray-300 rounded-xl hover:bg-gray-600 hover:text-white transition-all duration-200">
                            <i class="ti ti-file-invoice"></i>
                            Unduh Invoice
                        </a>

                        <a href="/"
                            class="flex items-center justify-center gap-2 px-6 py-3 bg-gray-700/50 border border-gray-600/50 text-gray-300 rounded-xl hover:bg-gray-600 hover:text-white transition-all duration-200">
                            <i class="ti ti-home"></i>
                            Kembali ke Beranda
                        </a>
                    </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>


    <svg xmlns="http://www.w3.org/2000/svg" width="300" height="200" viewBox="0 0 618.52428 508.67873"
    xmlns:xlink="http://www.w3.org/1999/xlink" role="img" artist="Katerina Limpitsouni" source="https://undraw.co/">
    <path
        d="M784.78215,248.59063c-1.34,4.96.2,12.77.78,17.4.62,4.95-7.96,9.38-12.87,9.66a6.98926,6.98926,0,0,0-1.3-4.6,11.96718,11.96718,0,0,1-.96,4.61h-40.97c-5.16-9.71-9.55-22.98005-4.81-36.7a14.03972,14.03972,0,0,1,9.7-12.15l22.34-7.15c8.81,0,19.62,1.25,24.49,7.81A24.57543,24.57543,0,0,1,784.78215,248.59063Z"
        transform="translate(-290.73786 -195.66064)" fill="#2f2e41" />
    <path
        d="M824.0092,677.67074a3.56386,3.56386,0,0,0,2.52393-6.20136c-.09328-.3563-.16019-.61213-.25341-.96849a9.57475,9.57475,0,0,1,17.74853-.33645c4.31772,9.84579,9.88142,20.02805,7.26662,30.94266,17.594-38.22733,11.03666-85.50773-15.81029-117.80021-7.37364-3.97084-13.38731-11.09311-15.01444-19.41415,3.642,1.19546,8.14-1.80049,5.37411-5.59841-1.197-1.45023-2.40544-2.88879-3.60237-4.33908,13.65013-14.81753,30.30051,8.10753,15.31045,28.074a114.26437,114.26437,0,0,1,13.024,19.95056,48.04323,48.04323,0,0,1,2.65566-22.34156c2.68221-6.64886,7.77473-12.27553,12.25157-18.044,5.443-7.0286,16.81306-3.91814,17.63871,4.92756-5.06868,1.71964-5.65929,9.07054.16646,10.02035-1.36655,16.4835-11.98173,31.72083-26.73178,39.08465a114.70951,114.70951,0,0,1,6.72483,47.88518c2.43494-19.011,22.77131-23.8125,36.94436-31.49418a5.54912,5.54912,0,0,1,8.516,5.53976,32.05159,32.05159,0,0,0-5.58949,3.01718,4.84411,4.84411,0,0,0,2.33454,8.8211c-7.0111,17.83933-25.46154,29.94946-44.52854,30.06385a117.92916,117.92916,0,0,1-7.70134,23.201l-28.29843.26947c-.10449-.31345-.19884-.63723-.29316-.95077a32.15326,32.15326,0,0,0,7.82585-.5411c-7.00816-8.139-12.40748-12.27407-8.48327-23.76707Z"
        transform="translate(-290.73786 -195.66064)" fill="#f2f2f2" />
    <polygon points="474.867 487.701 463.829 487.701 458.576 445.127 474.867 445.127 474.867 487.701" fill="#ffb6b6" />
    <path
        d="M771.43015,702.486h-7.91553l-1.41289-7.47321-3.61861,7.47321-20.99389,0a4.71923,4.71923,0,0,1-2.68162-8.60272l16.76509-11.57858v-7.55515l17.634,1.05251Z"
        transform="translate(-290.73786 -195.66064)" fill="#2f2e41" />
    <polygon points="492.193 410.591 484.443 418.451 450.438 392.302 461.875 380.702 492.193 410.591" fill="#ffb6b6" />
    <path
        d="M800.63888,615.53l-5.55726,5.63671-6.31367-4.24058,2.7812,7.82355L776.81,639.69954a4.71923,4.71923,0,0,1-8.00875-4.13011l3.52509-20.06752-5.38008-5.30425L780.076,598.37932Z"
        transform="translate(-290.73786 -195.66064)" fill="#2f2e41" />
    <path
        d="M694.636,375.9278l33.38671-53.1188a10.12679,10.12679,0,0,0-3.09126-13.86751l0,0a10.12679,10.12679,0,0,0-14.28216,3.46412l-32.989,56.24062-21.48594,33.3289a8.83709,8.83709,0,1,0,7.3168,8.66579Z"
        transform="translate(-290.73786 -195.66064)" fill="#ffb6b6" />
    <path
        d="M726.10039,336.70089l2.81462-.5309a3.85609,3.85609,0,0,1,4.74089-5.463c-3.39164-3.53724-1.74447-9.36107.43722-13.74923,1.577-3.17173,3.34948-6.30568,4.12136-9.76274,1.17168-5.24812-.33914-11.60017-7.33822-12.85677a12.11,12.11,0,0,0-8.25051,1.67064c-4.39918,2.59925-5.38844,1.46763-8.1636,5.65172l-1.582,2.93957a44.93107,44.93107,0,0,1-7.21582,8.67234,22.452,22.452,0,0,0-4.691,6.82909,2.26023,2.26023,0,0,1-.63944.809c-1.08245.83692-2.55365.87857-3.91019,1.05693-1.70988.22482-3.66628.94893-3.62213,3.07a3.68182,3.68182,0,0,0,1.31244,2.6419,69.58148,69.58148,0,0,0,24.816,13.97217c2.0319.64216,4.31506,1.17373,6.22644.23164S727.88783,337.86105,726.10039,336.70089Z"
        transform="translate(-290.73786 -195.66064)" fill="#F50057" />
    <polygon points="477.724 242 412.724 241 410.724 226 416.724 192 467.724 192 477.724 242" fill="#ffb6b6" />
    <path
        d="M629.46215,477.66064h-253a23.02589,23.02589,0,0,1-23-23v-145a23.02619,23.02619,0,0,1,23-23h253a23.02619,23.02619,0,0,1,23,23v145A23.02589,23.02589,0,0,1,629.46215,477.66064Z"
        transform="translate(-290.73786 -195.66064)" fill="#fff" />
    <path
        d="M629.46215,477.66064h-253a23.02589,23.02589,0,0,1-23-23v-145a23.02619,23.02619,0,0,1,23-23h253a23.02619,23.02619,0,0,1,23,23v145A23.02589,23.02589,0,0,1,629.46215,477.66064Zm-253-189a21.02359,21.02359,0,0,0-21,21v145a21.0239,21.0239,0,0,0,21,21h253a21.0239,21.0239,0,0,0,21-21v-145a21.02359,21.02359,0,0,0-21-21Z"
        transform="translate(-290.73786 -195.66064)" fill="#e6e6e6" />
    <path d="M650.463,392H354.46133a1,1,0,0,1,0-2H650.463a1,1,0,0,1,0,2Z" transform="translate(-290.73786 -195.66064)"
        fill="#e6e6e6" />
    <circle cx="337.72429" cy="38" r="9" fill="#f2f2f2" />
    <circle cx="9" cy="181.29999" r="9" fill="#f2f2f2" />
    <circle cx="194" cy="335.29999" r="9" fill="#f2f2f2" />
    <path d="M430.38344,435.96063H399.1393a1,1,0,0,1,0-2h31.24414a1,1,0,0,1,0,2Z"
        transform="translate(-290.73786 -195.66064)" fill="#ccc" />
    <path d="M430.38344,451.96063H399.1393a1,1,0,0,1,0-2h31.24414a1,1,0,0,1,0,2Z"
        transform="translate(-290.73786 -195.66064)" fill="#ccc" />
    <path d="M601.38344,435.96063H570.1393a1,1,0,0,1,0-2h31.24414a1,1,0,0,1,0,2Z"
        transform="translate(-290.73786 -195.66064)" fill="#ccc" />
    <path d="M601.38344,451.96063H570.1393a1,1,0,0,1,0-2h31.24414a1,1,0,0,1,0,2Z"
        transform="translate(-290.73786 -195.66064)" fill="#ccc" />
    <path d="M544.38344,435.96063H513.1393a1,1,0,0,1,0-2h31.24414a1,1,0,0,1,0,2Z"
        transform="translate(-290.73786 -195.66064)" fill="#ccc" />
    <path d="M544.38344,451.96063H513.1393a1,1,0,0,1,0-2h31.24414a1,1,0,0,1,0,2Z"
        transform="translate(-290.73786 -195.66064)" fill="#ccc" />
    <path d="M487.38344,435.96063H456.1393a1,1,0,0,1,0-2h31.24414a1,1,0,0,1,0,2Z"
        transform="translate(-290.73786 -195.66064)" fill="#ccc" />
    <path d="M487.38344,451.96063H456.1393a1,1,0,0,1,0-2h31.24414a1,1,0,0,1,0,2Z"
        transform="translate(-290.73786 -195.66064)" fill="#ccc" />
    <path
        d="M701.46215,420.66064l-2,27-37.73272,67.59183a16.35473,16.35473,0,0,0,1.88759,19.4141l59.17215,53.61693s11.63235.38113,10.65266,5.87913S738.67915,599.4,738.67915,599.4l6.99669,5.05513,3.78631-28.79444c-12.72193-28.40607-31.58734-37.07154-48-50.17518,0,0,6.9208-2.05748,5.4604-4.44115s3.1255-2.5421,3.1255-2.5421,3.04314-.41035,3.22862-2.626,3.13612-2.55073,3.13612-2.55073l16.55494-16.66488,43.49442-2s18.40552-46.11024-12-76Z"
        transform="translate(-290.73786 -195.66064)" fill="#2f2e41" />
    <polygon points="442.327 288.478 456.724 460 477.929 458.716 485.724 299 442.327 288.478" fill="#2f2e41" />
    <path
        d="M734.09874,279.55635l24.27341-1.25042,11.27436,17.81485s21.213,3.54654,19.74258,28.54341-25.80987,46.93175-25.80987,46.93175l1.04043,13.01727-1.807,5.16317.23172,2.89913,2.46505,3.07029.25379,3.17524-2.184,5.0238.88293,6.7158s-21.96233,4.3597-33.48116-4.32015-28.51884-3.67985-28.51884-3.67985l-.63992-8.27343,3.331-4.46673-1.86059-5.8261,2.79715-5.60375,1.45853-17.8s-15.957-23.97307,2.36114-42.02923l7.352-12.49844,8.22628-10.03645Z"
        transform="translate(-290.73786 -195.66064)" fill="#F50057" />
    <path
        d="M793.62052,387.96519l-1.78631-62.71433a10.1268,10.1268,0,0,0-10.28016-9.80725h0a10.12681,10.12681,0,0,0-9.94457,10.82063l3.8527,65.088.67384,39.64855A8.83709,8.83709,0,1,0,787.0359,434.135Z"
        transform="translate(-290.73786 -195.66064)" fill="#ffb6b6" />
    <path
        d="M797.96087,337.86608h0a2.98618,2.98618,0,0,0,.45665-3.59088,3.874,3.874,0,0,1-.45977-2.31806,3.56228,3.56228,0,0,1,.08892-.45908,5.84263,5.84263,0,0,0-1.06983-5.29511c-1.98065-2.37893-2.93671-5.98032-3.35063-9.19075-.45288-3.51306-.72223-7.10346-2.00293-10.406-1.8475-4.76393-6.26235-9.00956-12.28793-6.97759a11.761,11.761,0,0,0-6.11573,4.96966c-3.0048,4.79168-3.03725,10.58532-3.01529,16.12823l-1.08068-2.19024a44.96669,44.96669,0,0,1-3.21772,17.69146c1.3432-.26062,2.29328,1.54383,1.85895,2.84125-.43432,1.29749-1.634,2.15015-2.66229,3.05267-1.29618,1.13762-2.51962,2.8273-1.30354,4.5657a3.68181,3.68181,0,0,0,2.55983,1.46607,69.58136,69.58136,0,0,0,28.39508-2.18551c2.04589-.59607,4.23913-1.42377,5.30395-3.2696S800.0916,337.83648,797.96087,337.86608Z"
        transform="translate(-290.73786 -195.66064)" fill="#F50057" />
    <circle cx="456.72429" cy="56" r="23" fill="#ffb6b6" />
    <circle cx="218.31484" cy="26.8189" r="26.8189" fill="#F50057" />
    <path
        d="M508.1096,233.2377a2.31789,2.31789,0,0,1-1.85465-.9276l-5.6864-7.582a2.31849,2.31849,0,1,1,3.70967-2.78206l3.72024,4.95994,9.555-14.33225a2.31859,2.31859,0,0,1,3.85836,2.57224L510.039,232.20518a2.31951,2.31951,0,0,1-1.86483,1.03177Z"
        transform="translate(-290.73786 -195.66064)" fill="#fff" />
    <path
        d="M560.40892,299.08508H445.51537a10.55322,10.55322,0,0,1,0-21.10645H560.40892a10.55323,10.55323,0,1,1,0,21.10645Z"
        transform="translate(-290.73786 -195.66064)" fill="#F50057" />
    <path
        d="M908.07768,704.03205l-255.3575.30731a1.19069,1.19069,0,0,1,0-2.38134l255.3575-.30732a1.19069,1.19069,0,0,1,0,2.38135Z"
        transform="translate(-290.73786 -195.66064)" fill="#cacaca" />
    <path
        d="M776.46215,245.66064v5h-19.9a7.1559,7.1559,0,0,0-1.17-5.61,12.19187,12.19187,0,0,1-1.42,5.61c-11.50684,3.40264-21.1651,3.33743-29.07917,0a4.43085,4.43085,0,0,1-4.43084-4.43084v0c0-15.32986,12.08374-28.24713,27.41035-28.56306a27.99694,27.99694,0,0,1,28.58965,27.99392Z"
        transform="translate(-290.73786 -195.66064)" fill="#2f2e41" />
    <path d="M512.46215,331.66064h-40a4,4,0,0,1,0-8h40a4,4,0,0,1,0,8Z" transform="translate(-290.73786 -195.66064)"
        fill="#ccc" />
    <path d="M522.46215,416.96063h-40a4,4,0,0,1,0-8h40a4,4,0,0,1,0,8Z" transform="translate(-290.73786 -195.66064)"
        fill="#ccc" />
    <path d="M598.46215,353.66064h-127a4,4,0,0,1,0-8h127a4,4,0,0,1,0,8Z" transform="translate(-290.73786 -195.66064)"
        fill="#ccc" />
    <circle cx="134.22035" cy="143" r="26.8189" fill="#e6e6e6" />
</svg>

</div>


<!-- Pesan -->
<h1 class="text-2xl font-bold text-white mb-2">Pembayaran Berhasil!</h1>
<p class="text-gray-300 mb-6">
    Terima kasih, pembayaran Anda telah diproses. Silakan cek email atau dashboard Anda untuk detail
    lebih lanjut.
</p>

<!-- Tombol kembali -->
<a href="{{ route('welcome') }}"
    class="inline-block bg-red-600 hover:bg-red-700 text-white px-6 py-2 rounded-lg font-semibold transition">
    Kembali ke Beranda
</a>
</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