@extends('layouts.landing-page')

@section('content')
    @switch($vendor)
        @case('duitku')
            @php
                $merchantOrderId = request('merchantOrderId');
                $resultCode = request('resultCode');
                $reference = request('reference');
            @endphp
        @break

        @default
            @php
                $merchantOrderId = '';
                $resultCode = '';
                $reference = '';
            @endphp
    @endswitch

    <div class="mb-8" id="paymentPendingContainer">
        <!-- 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">

                @switch($resultCode)
                    @case('00')
                        <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 Sukses
                    @break

                    @case('01')
                        <div class="w-10 h-10 bg-yellow-600 rounded-xl flex items-center justify-center">
                            <i class="ti ti-clock text-lg"></i>
                        </div>
                        Pembayaran Pending
                    @break

                    @case('02')
                        <div class="w-10 h-10 bg-red-600 rounded-xl flex items-center justify-center">
                            <i class="ti ti-check text-lg"></i>
                        </div>
                        Pembayaran Gagal
                    @break

                    @default
                @endswitch




            </h1>
        </div>

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

                    <!-- Pending Icon Animation -->
                    <div class="mb-8">

                        @switch($resultCode)
                            @case('00')
                                <div class="w-24 h-24 bg-green-600/20 rounded-full flex items-center justify-center mx-auto mb-4">
                                    <div class="w-16 h-16 bg-green-600 rounded-full flex items-center justify-center animate-pulse">
                                        <i class="ti ti-clock text-2xl text-white"></i>
                                    </div>
                                </div>
                                <h2 class="text-3xl font-bold text-white mb-2">Pembayaran Berhasil</h2>
                                <p class="text-gray-300 text-lg">Silakan lihat item Anda di My Asset</p>

                                @break

                            @case('01')
                                <div class="w-24 h-24 bg-yellow-600/20 rounded-full flex items-center justify-center mx-auto mb-4">
                                    <div
                                        class="w-16 h-16 bg-yellow-600 rounded-full flex items-center justify-center animate-pulse">
                                        <i class="ti ti-clock text-2xl text-white"></i>
                                    </div>
                                </div>
                                <!-- Pending Message -->
                                <h2 class="text-3xl font-bold text-white mb-2">Menunggu Pembayaran</h2>
                                <p class="text-gray-300 text-lg">Silakan selesaikan pembayaran Anda</p>
                            @break

                            @case('02')
                                <div class="w-24 h-24 bg-red-600/20 rounded-full flex items-center justify-center mx-auto mb-4">
                                    <div class="w-16 h-16 bg-red-600 rounded-full flex items-center justify-center animate-pulse">
                                        <i class="ti ti-clock text-2xl text-white"></i>
                                    </div>
                                </div>
                                <h2 class="text-3xl font-bold text-white mb-2">Pembayaran Gagal</h2>
                                <p class="text-gray-300 text-lg">Silakan melakukan order ulang</p>
                            @break

                            @default
                        @endswitch




                    </div>

                    <!-- Payment Instructions -->
                    {{-- <div class="bg-yellow-600/10 border border-yellow-600/20 rounded-xl p-6 mb-8">
                        <div class="flex items-start gap-3">
                            <i class="ti ti-info-circle text-yellow-400 text-xl mt-1"></i>
                            <div class="text-left">
                                <h3 class="text-lg font-semibold text-yellow-400 mb-2">Instruksi Pembayaran</h3>
                                <div class="text-sm text-gray-300 space-y-2">
                                    <p>1. Buka aplikasi mobile banking atau e-wallet Anda</p>
                                    <p>2. Scan QR Code yang telah diberikan</p>
                                    <p>3. Konfirmasi pembayaran sebesar <strong class="text-yellow-400">Rp 257.000</strong>
                                    </p>
                                    <p>4. Simpan bukti pembayaran untuk referensi</p>
                                </div>
                            </div>
                        </div>
                    </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-yellow-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-yellow-600/20 text-yellow-400 px-3 py-1 rounded-full text-sm border border-yellow-600/30">
                                    <i class="ti ti-clock text-xs mr-1"></i>
                                    Pending
                                </span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-gray-300">Batas Waktu</span>
                                <span class="text-red-400 font-semibold" id="countdown">23:59:30</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-yellow-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 Pesanan
                        </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 opacity-50" />
                                <div class="flex-1">
                                    <div class="text-gray-300 font-medium">Freedom Sound</div>
                                    <div class="text-sm text-gray-500">John Music - Cover License</div>
                                </div>
                                <span class="text-gray-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 opacity-50" />
                                <div class="flex-1">
                                    <div class="text-gray-300 font-medium">Summer Vibe</div>
                                    <div class="text-sm text-gray-500">John Music - Remake License</div>
                                </div>
                                <span class="text-gray-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 opacity-50" />
                                <div class="flex-1">
                                    <div class="text-gray-300 font-medium">Chill Beat</div>
                                    <div class="text-sm text-gray-500">Musik Kita - Exclusive License</div>
                                </div>
                                <span class="text-gray-400 font-semibold">Rp 75.000</span>
                            </div>
                        </div>
                    </div>

                    <!-- Auto Check Status -->
                    <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">Status Otomatis</h4>
                                <p class="text-sm text-gray-300">
                                    Status pembayaran akan dicek otomatis setiap 30 detik.
                                    Anda akan diarahkan ke halaman sukses setelah pembayaran berhasil.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Countdown timer
            let timeLeft = 24 * 60 * 60; // 24 hours in seconds
            const countdownElement = document.getElementById('countdown');

            function updateCountdown() {
                const hours = Math.floor(timeLeft / 3600);
                const minutes = Math.floor((timeLeft % 3600) / 60);
                const seconds = timeLeft % 60;

                countdownElement.textContent =
                    `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;

                if (timeLeft <= 0) {
                    countdownElement.textContent = 'EXPIRED';
                    countdownElement.className = 'text-red-500 font-bold';
                    return;
                }

                timeLeft--;
            }

            // Update countdown every second
            updateCountdown();
            const countdownInterval = setInterval(updateCountdown, 1000);

            // Auto check payment status every 30 seconds
            const statusCheckInterval = setInterval(checkPaymentStatus, 30000);

            // Check payment status function
            window.checkPaymentStatus = function() {
                const button = event.target.closest('button');
                const originalText = button.innerHTML;

                button.innerHTML = '<i class="ti ti-loader animate-spin"></i> Mengecek...';
                button.disabled = true;

                // Simulate API call
                fetch('/payment/check-status', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute(
                                'content')
                        },
                        body: JSON.stringify({
                            order_id: 'ORDER-{{ date('YmdHis') }}'
                        })
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.status === 'success') {
                            showNotification('Pembayaran berhasil! Mengalihkan...', 'success');
                            clearInterval(countdownInterval);
                            clearInterval(statusCheckInterval);
                            setTimeout(() => {
                                window.location.href = '/payment/success?order_id=' + data.order_id;
                            }, 2000);
                        } else if (data.status === 'failed') {
                            showNotification('Pembayaran gagal', 'error');
                            clearInterval(countdownInterval);
                            clearInterval(statusCheckInterval);
                            setTimeout(() => {
                                window.location.href = '/payment/failed?order_id=' + data.order_id;
                            }, 2000);
                        } else {
                            showNotification('Pembayaran masih pending', 'info');
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        showNotification('Terjadi kesalahan saat mengecek status', 'error');
                    })
                    .finally(() => {
                        button.innerHTML = originalText;
                        button.disabled = false;
                    });
            };

            // Show notification function
            function showNotification(message, type = 'info') {
                const notification = document.createElement('div');
                const bgColor = {
                    'success': 'bg-green-600',
                    'error': 'bg-red-600',
                    'warning': 'bg-yellow-600',
                    'info': 'bg-blue-600'
                } [type] || 'bg-gray-600';

                notification.className =
                    `fixed top-4 right-4 px-6 py-3 rounded-xl shadow-lg z-50 transform translate-x-full transition-transform duration-300 ${bgColor} text-white`;
                notification.textContent = message;

                document.body.appendChild(notification);

                setTimeout(() => {
                    notification.style.transform = 'translateX(0)';
                }, 100);

                setTimeout(() => {
                    notification.style.transform = 'translateX(full)';
                    setTimeout(() => notification.remove(), 300);
                }, 4000);
            }
        });
    </script>
@endsection

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

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