@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 = '01';
                $reference = '';
            @endphp
    @endswitch

    <input type="hidden" name="_token" value="{{ csrf_token() }}">

    <div class="mb-8" id="paymentStatusContainer" data-userid="{{ Auth::id() }}"
        data-merchantOrderId="{{ $merchantOrderId }}" data-resultCode="{{ $resultCode }}"
        data-reference="{{ $reference }}">
        <!-- 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
                        <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
                @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
                                <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
                        @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->order_no ?? '-' }}</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-gray-300">Tanggal</span>
                                <span class="text-white">
                                    {{ $order->order_date ? \Carbon\Carbon::parse($order->order_date)->format('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">{{ $order->payment_method_name ?? '-' }}</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-gray-300">Status</span>

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

                                    @case('01')
                                        <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>
                                    @break

                                    @case('02')
                                        <span
                                            class="bg-red-600/20 text-red-400 px-3 py-1 rounded-full text-sm border border-red-600/30">
                                            <i class="ti ti-clock text-xs mr-1"></i>
                                            Gagal
                                        </span>
                                    @break

                                    @default
                                        <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>
                                    @break
                                @endswitch





                            </div>
                            @if ($resultCode == '01')
                                <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>
                            @endif
                            <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>

                                    @switch($resultCode)
                                        @case('00')
                                            <span class="text-xl font-bold text-green-400">Rp
                                                {{ number_format($order->order_total) }}</span>
                                        @break

                                        @case('01')
                                            <span class="text-xl font-bold text-yellow-400">Rp
                                                {{ number_format($order->order_total) }}</span>
                                        @break

                                        @case('02')
                                            <span class="text-xl font-bold text-red-400">Rp
                                                {{ number_format($order->order_total) }}</span>
                                        @break

                                        @default
                                            <span class="text-xl font-bold text-yellow-400">Rp
                                                {{ number_format($order->order_total) }}</span>
                                        @break
                                    @endswitch



                                </div>

                                @if ($resultCode == '01')
                                    <div class="container my-8">
                                        <a href="{{ $order->payment_url }}"
                                            class="block w-full text-lg font-bold text-center px-4 py-3 bg-red-600 text-white rounded-md">
                                            BAYAR
                                        </a>

                                        @if ($order->payment_method == 'MANUAL')
                                            @php
                                                $invoiceUrl = route('payment.confirm',$order->order_no);
                                            @endphp
                                            <p class="mt-4">
                                                sudah melakukan pembayaran ? silahkan kirim <a href="{{ $invoiceUrl }}" class="  text-yellow-300 hover:text-red-500 underline font-bold">konfirmasi
                                                    pembayaran </a>
                                            </p>
                                        @endif
                                    </div>
                                @endif



                            </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="  rounded-xl p-4">

                            <div
                                class="max-w-sm mx-auto rounded-xl shadow-lg p-6 relative overflow-hidden
                                     bg-gradient-to-br from-pink-600 via-purple-600 to-indigo-600">
                                <!-- Glass blur overlay -->
                                <div class="absolute inset-0 bg-white bg-opacity-10 backdrop-blur-md rounded-xl"></div>

                                <div class="relative z-10">
                                    <div class="flex items-center justify-between mb-4">
                                        <div class="flex items-center gap-3">

                                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                                fill="currentColor" class="bi bi-bookmark-star-fill" viewBox="0 0 16 16">
                                                <path fill-rule="evenodd"
                                                    d="M2 15.5V2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.74.439L8 13.069l-5.26 2.87A.5.5 0 0 1 2 15.5M8.16 4.1a.178.178 0 0 0-.32 0l-.634 1.285a.18.18 0 0 1-.134.098l-1.42.206a.178.178 0 0 0-.098.303L6.58 6.993c.042.041.061.1.051.158L6.39 8.565a.178.178 0 0 0 .258.187l1.27-.668a.18.18 0 0 1 .165 0l1.27.668a.178.178 0 0 0 .257-.187L9.368 7.15a.18.18 0 0 1 .05-.158l1.028-1.001a.178.178 0 0 0-.098-.303l-1.42-.206a.18.18 0 0 1-.134-.098z" />
                                            </svg>

                                            <h2 class="text-xl font-semibold text-white">
                                                {{ 'Lisensi ' . $songLincese->license_type }}</h2>
                                        </div>
                                        <span class="text-xs text-gray-100">{{ $songLincese->zone }}</span>
                                    </div>

                                    <div class="flex items-center gap-3 mb-4">
                                        @php
                                            $imgUrl = app(\App\Services\SongServices::class)->getCoverImageS3(
                                                $songLincese->song,
                                                'sm',
                                            );
                                        @endphp
                                        <img src="{{ $imgUrl }}" alt="Cover"
                                            class="w-8 h-8 rounded-lg object-cover shadow">
                                        <div class="flex flex-col">
                                            <h3 class="text-md font-bold text-white">{{ $songLincese->song->title }}</h3>
                                            <div class="text-xs">{{ $songLincese->song->labels }}</div>

                                        </div>
                                    </div>

                                    <div class="flex justify-between items-center mt-6">
                                        <div>
                                            <div>
                                                <div class="flex items-center gap-2 mb-1">
                                                    {{-- <div class="flex -space-x-3">
                                                        @foreach ($composerArray as $composer)
                                                            <img src="{{ $composer['avatar'] }}"
                                                                alt="{{ $composer['name'] }}"
                                                                class="w-6 h-6 rounded-full object-cover border-2 border-white">
                                                        @endforeach
                                                    </div> --}}
                                                    <h3 class=" text-xs text-white">
                                                        Cipt. {{ implode(', ', array_column($composerArray, 'name')) }}
                                                    </h3>
                                                </div>
                                            </div>
                                        </div>
                                        <div>
                                            {{-- <p class="text-xs text-gray-200">License Type</p> --}}
                                            <p class=" font-medium text-white">
                                                @if ($songLincese->payment_type == 'Beli Harga')
                                                    <span class="text-md font-semibold text-white">Rp
                                                        {{ number_format($songLincese->amount) }}</span>
                                                @else
                                                    <span
                                                        class="text-md font-semibold text-white">{{ number_format($songLincese->amount) }}%</span>
                                                @endif
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>

                        {{-- <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 src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>

    <script>
        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;
            if (countdownElement) {

                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);


        document.addEventListener('DOMContentLoaded', function() {
            // Countdown timer

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

    <script>
        const statusContainer = document.getElementById("paymentStatusContainer");

        const payload = {
            order_no: statusContainer.dataset.merchantorderid,
            result_code: statusContainer.dataset.resultcode,
            reference: statusContainer.dataset.reference
        };

        var csrfToken = getCsrfToken();

        // Cek jika sudah selesai sebelumnya
        if (localStorage.getItem('payment_status_done') === 'true') {
            // console.log("✅ Polling dihentikan karena sudah selesai sebelumnya.");
        } else {
            const intervalId = setInterval(() => {
                fetch("/payment/status", {
                        method: "POST",
                        headers: {
                            "Content-Type": "application/json",
                            "X-CSRF-TOKEN": csrfToken
                        },
                        body: JSON.stringify(payload)
                    })
                    .then(response => response.json())
                    .then(data => {
                        const status = data?.data?.payment_status?.toLowerCase();
                        const loadUrl = data?.data?.url;

                        if (status === "paid" || status === "failed") {
                            // Simpan ke localStorage agar tidak polling ulang saat reload
                            localStorage.setItem('payment_status_done', 'true');

                            clearInterval(countdownInterval);
                            clearInterval(intervalId);

                            window.location.href = loadUrl;
                        } else {
                            localStorage.setItem('payment_status_done', 'false');
                        }
                    })
                    .catch(error => {
                        console.error("❌ Error:", error);
                    });
            }, 2000);
        }
        // const intervalId = setInterval(() => {
        //     fetch("/payment/status", {
        //             method: "POST",
        //             headers: {
        //                 "Content-Type": "application/json",
        //                 "X-CSRF-TOKEN": csrfToken
        //             },
        //             body: JSON.stringify(payload)
        //         })
        //         .then(response => response.json())
        //         .then(data => {
        //             // console.log("🎯 Status payment:", data);

        //             // Jika respons mengandung data dan payment_status
        //             const status = data?.data?.payment_status?.toLowerCase(); // lowercase supaya lebih aman
        //             const loadUrl = data?.data?.url;
        //             if (status === "paid" || status === "failed") {
        //                 clearInterval(countdownInterval);
        //                 clearInterval(intervalId);
        //                 // console.log(`⛔ Polling dihentikan karena status: ${status}`);
        //                 window.location.href = loadUrl;
        //                 if (status === "paid") {
        //                     // showToast("Status: " + data.message, "Sukses", "success");
        //                 } else {
        //                     // showToast(data.message, "Gagal", "danger");
        //                 }
        //             }
        //         })
        //         .catch(error => {
        //             console.error("❌ Error:", error);
        //         });
        // }, 2000);
    </script>
@endsection

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

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