@extends('layouts.landing-page')

@section('content')
    <div class="mb-8" id="paymentContainer">
        <!-- 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-red-600 rounded-xl flex items-center justify-center">
                    <i class="ti ti-credit-card text-lg"></i>
                </div>
                Pembayaran
                {{-- <span class="text-sm bg-gray-800 text-gray-300 px-3 py-1 rounded-full">3 item</span> --}}
            </h1>

            {{-- <a href="{{ route('cart', ['idUser' => Auth::id()]) }}"
                class="flex items-center gap-2 px-4 py-2.5 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 group">
                <i class="ti ti-arrow-left text-sm group-hover:-translate-x-1 transition-transform"></i>
                Kembali ke Keranjang
            </a> --}}

        </div>

        <div class="flex flex-col lg:flex-row gap-8">
            <!-- Main Content -->
            <div class="flex-1 space-y-6">

                <!-- Customer Information -->
                <div class="bg-gray-900/50 backdrop-blur-sm rounded-2xl p-6 border border-gray-800/50">


                    <div class="flex justify-between items-center mb-6">
                        <h2 class="text-lg font-semibold text-white flex items-center gap-2">
                            <i class="ti ti-user text-blue-400"></i>
                            Informasi Pembeli
                        </h2>
                        {{-- <button
                            class="flex items-center gap-2 px-3 py-2 bg-gray-700/50 border border-gray-600/50 text-gray-300 rounded-lg hover:bg-gray-600 hover:text-white transition-all duration-200 text-sm">
                            <i class="ti ti-pencil text-xs"></i>
                            Ubah
                        </button> --}}
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="space-y-4">
                            <div class="flex flex-col">
                                <label class="text-sm text-gray-400 mb-1">Nama Lengkap</label>
                                <div class="text-white font-medium">{{ Auth::user()->name }}</div>
                            </div>
                            <div class="flex flex-col">
                                <label class="text-sm text-gray-400 mb-1">Email</label>
                                <div class="text-white">{{ Auth::user()->email }}</div>
                            </div>
                            <div class="flex flex-col">
                                <label class="text-sm text-gray-400 mb-1">No. Telepon</label>
                                <div class="text-white">{{ '+' . Auth::user()->phone ?? '' }}</div>
                            </div>
                        </div>
                        <div class="space-y-4">
                            <div class="flex flex-col">
                                <label class="text-sm text-gray-400 mb-1">Alamat</label>
                                <div class="text-white">{{ Auth::user()->profile->address ?? '-' }}</div>
                            </div>
                            <div class="flex flex-col">
                                <label class="text-sm text-gray-400 mb-1">Lokasi / Zona</label>
                                <div class="text-white">{{ Auth::user()->region }}</div>
                            </div>
                        </div>
                    </div>

                    <!-- Warning Alert -->
                    <div
                        class="mt-8 mb-4 flex items-center rounded-lg border border-yellow-500 bg-yellow-600/20 px-4 py-3 text-sm text-yellow-200">
                        <svg class="mr-2 h-5 w-5 flex-shrink-0 text-yellow-400" xmlns="http://www.w3.org/2000/svg"
                            fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M12 8v4m0 4h.01M12 2a10 10 0 100 20 10 10 0 000-20z" />
                        </svg>
                        <span class="ms-2">  Perhatian! harap lengkapi profil Anda terlebih dahulu sebelum melakukan
                            pembelian. Apabila terjadi kesalahan / kekurangan dalam pengisian data maka kami tidak
                            bertanggung jawab terhadap pembelian Anda. <br> Produk yang sudah dibeli tidak dapat dikembalikan. </span>
                    </div>

                </div>

                <!-- Payment Method -->
                <div class="bg-gray-900/50 backdrop-blur-sm rounded-2xl p-6 border border-gray-800/50">
                    <h2 class="text-lg font-semibold text-white mb-6 flex items-center gap-2">
                        <i class="ti ti-credit-card text-green-400"></i>
                        Metode Pembayaran <span class="paymentName"></span>
                    </h2>

                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 paymentMethodContainer">



                    </div>
                </div>

                <!-- Order Items -->
                <div class="bg-gray-900/50 backdrop-blur-sm rounded-2xl p-6 border border-gray-800/50">
                    <h2 class="text-lg font-semibold text-white mb-6 flex items-center gap-2">
                        <i class="ti ti-shopping-bag text-red-400"></i>
                        Item Pesanan
                    </h2>

                    <div class="space-y-4">


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

            <!-- Payment Summary -->
            <div class="w-full lg:w-96">
                <div class="bg-gray-900/50 backdrop-blur-sm rounded-2xl p-6 border border-gray-800/50 sticky top-8">
                    <h3 class="text-lg font-semibold text-white mb-6 flex items-center gap-2">
                        <i class="ti ti-receipt text-green-400"></i>
                        Detail Pembayaran
                    </h3>

                    <div class="space-y-4 mb-6">
                        <div class="flex justify-between items-center text-gray-300">
                            <span>Subtotal</span>
                            <span class="font-medium subtotal" data-subtotal="{{ $songLincese->amount }}">
                                Rp. {{ number_format($songLincese->amount) }}
                            </span>
                        </div>
                        <div class="flex justify-between items-center text-gray-300">
                            <span class="ppn-amount" data-ppn="{{ $ppnVal }}">PPN ({{ $ppnVal }}%)</span>
                            @php
                                $ppnPrice = ($songLincese->amount * $ppnVal) / 100;
                            @endphp
                            <span class="font-medium ppn-price" data-ppnprice="{{ $ppnPrice }}">Rp
                                {{ number_format($ppnPrice) }}</span>
                        </div>
                        <div class="flex justify-between items-center text-gray-300">
                            <span>Fee Va</span>
                            <span class="font-medium feeVa" data-fee="">Rp 0</span>
                        </div>
                        <div class="border-t border-gray-700 pt-4">
                            <div class="flex justify-between items-center text-white">
                                <span class="text-lg font-semibold">Total Pembayaran</span>
                                <span class="text-xl font-bold text-white totalBayar"
                                    data-totalbayar="{{ $songLincese->amount + $ppnPrice }}">
                                    Rp. {{ number_format($songLincese->amount + $ppnPrice) }}
                                </span>
                            </div>
                        </div>
                    </div>

                    <!-- Terms & Policy -->
                    <div class="mb-6">
                        <label class="flex items-start gap-3 cursor-pointer">
                            <input type="checkbox" id="approve"
                                class="mt-1 w-4 h-4 text-red-600 bg-gray-800 border-gray-600 rounded focus:ring-red-500 focus:ring-2">
                            <span class="text-sm text-gray-300">
                                Saya setuju dengan
                                <a href="{{ route('term') }}" target="_blank"
                                    class="text-red-400 hover:text-red-300 underline">syarat dan
                                    ketentuan</a>
                                serta
                                <a href="{{ route('privacy') }}" target="_blank"
                                    class="text-red-400 hover:text-red-300 underline">kebijakan
                                    privasi</a>
                            </span>
                        </label>
                    </div>

                    <!-- Payment Button -->
                    <button id="payButton" data-licenseid="{{ $songLincese->id }}" data-fee="" data-paymethod=""
                        data-payname=""
                        class="w-full bg-gradient-to-r from-red-600 to-red-700 hover:from-red-700 hover:to-red-800 disabled:from-gray-600 disabled:to-gray-700 disabled:cursor-not-allowed text-white font-semibold py-4 px-6 rounded-xl text-center transition-all duration-200 transform hover:scale-[1.02] active:scale-[0.98] shadow-lg hover:shadow-red-600/25 disabled:shadow-none disabled:hover:scale-100">
                        <span class="flex items-center justify-center gap-2">
                            <i class="ti ti-cash text-2xl"></i>
                            <span id="payButtonText">CHECKOUT</span>
                        </span>
                    </button>

                    <!-- Security Info -->
                    <div class="mt-4 flex items-center justify-center gap-2 text-xs text-gray-400">
                        <i class="ti ti-shield-check text-green-400"></i>
                        Transaksi dienkripsi dengan SSL 256-bit
                    </div>

                    <!-- Midtrans Badge -->
                    {{-- <div class="mt-4 flex items-center justify-center gap-2 text-xs text-gray-400">
                        <span>Powered by</span>
                        <span class="font-semibold text-blue-400">Midtrans</span>
                    </div> --}}
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <!-- Midtrans Script -->
    {{-- <script type="text/javascript" src="https://app.sandbox.midtrans.com/snap/snap.js"
        data-client-key="{{ config('midtrans.client_key') }}"></script> --}}

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const paymentMethods = document.querySelectorAll('input[name="payment_method"]');
            const termsCheckbox = document.querySelector('input[type="checkbox"]');
            const payButton = document.getElementById('payButton');
            const payButtonText = document.getElementById('payButtonText');

            let selectedPaymentMethod = null;
            let termsAccepted = false;

            // Payment method selection
            // paymentMethods.forEach(method => {
            //     method.addEventListener('change', function() {
            //         selectedPaymentMethod = this.value;
            //         updatePayButton();

            //         // Add visual feedback
            //         const methodName = this.parentElement.querySelector('span').textContent;
            //         showNotification(`Metode pembayaran ${methodName} dipilih`, 'info');
            //     });
            // });

            // Terms checkbox
            termsCheckbox.addEventListener('change', function() {
                termsAccepted = this.checked;
                updatePayButton();
            });

            // Update pay button state
            function updatePayButton() {
                // if (selectedPaymentMethod && termsAccepted) {
                //     payButton.disabled = false;
                //     payButton.classList.remove('disabled:from-gray-600', 'disabled:to-gray-700');
                //     payButtonText.textContent = 'Bayar Sekarang';
                //     payButton.querySelector('i').className = 'ti ti-credit-card';
                // } else if (selectedPaymentMethod && !termsAccepted) {
                //     payButton.disabled = true;
                //     payButtonText.textContent = 'Setujui Syarat & Ketentuan';
                //     payButton.querySelector('i').className = 'ti ti-alert-circle';
                // } else {
                //     payButton.disabled = true;
                //     payButtonText.textContent = 'Pilih Metode Pembayaran';
                //     payButton.querySelector('i').className = 'ti ti-lock';
                // }
            }

            // Payment button click
            payButton.addEventListener('click', function() {

                // if (!payButton.disabled) {
                //     processPayment();
                // }
                processOrder();

            });

            // Process payment with Midtrans
            function processPayment() {
                // Show loading state
                payButton.disabled = true;
                payButtonText.textContent = 'Memproses...';
                payButton.querySelector('i').className = 'ti ti-loader animate-spin';

                // Prepare payment data
                const paymentData = {
                    payment_method: selectedPaymentMethod,
                    customer_details: {
                        first_name: 'Alice',
                        last_name: 'Artist',
                        email: 'alice@email.com',
                        phone: '085736547889',
                        billing_address: {
                            first_name: 'Alice',
                            last_name: 'Artist',
                            address: 'Jl. Baurekso no. 20',
                            city: 'Surabaya',
                            postal_code: '60111',
                            phone: '085736547889',
                            country_code: 'IDN'
                        }
                    },
                    item_details: [{
                            id: 'song-1',
                            price: 50000,
                            quantity: 1,
                            name: 'Freedom Sound - Cover License',
                            category: 'Music License'
                        },
                        {
                            id: 'song-2',
                            price: 100000,
                            quantity: 1,
                            name: 'Summer Vibe - Remake License',
                            category: 'Music License'
                        },
                        {
                            id: 'song-3',
                            price: 75000,
                            quantity: 1,
                            name: 'Chill Beat - Exclusive License',
                            category: 'Music License'
                        }
                    ],
                    transaction_details: {
                        order_id: 'ORDER-' + Date.now(),
                        gross_amount: 257000
                    }
                };

                // Send to backend to get snap token
                fetch('/payment/create-transaction', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute(
                                'content')
                        },
                        body: JSON.stringify(paymentData)
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.snap_token) {
                            // Open Midtrans payment popup
                            window.snap.pay(data.snap_token, {
                                onSuccess: function(result) {
                                    showNotification('Pembayaran berhasil!', 'success');
                                    setTimeout(() => {
                                        window.location.href =
                                            '/payment/success?order_id=' + result.order_id;
                                    }, 2000);
                                },
                                onPending: function(result) {
                                    showNotification(
                                        'Pembayaran pending, silakan selesaikan pembayaran',
                                        'info');
                                    setTimeout(() => {
                                        window.location.href =
                                            '/payment/pending?order_id=' + result.order_id;
                                    }, 2000);
                                },
                                onError: function(result) {
                                    showNotification('Pembayaran gagal: ' + result.status_message,
                                        'error');
                                    resetPayButton();
                                },
                                onClose: function() {
                                    showNotification('Pembayaran dibatalkan', 'warning');
                                    resetPayButton();
                                }
                            });
                        } else {
                            throw new Error(data.message || 'Failed to create transaction');
                        }
                    })
                    .catch(error => {
                        console.error('Payment error:', error);
                        showNotification('Terjadi kesalahan, silakan coba lagi', 'error');
                        resetPayButton();
                    });
            }

            // Reset pay button to initial state
            function resetPayButton() {
                payButton.disabled = false;
                payButtonText.textContent = 'Bayar Sekarang';
                payButton.querySelector('i').className = 'ti ti-credit-card';
            }

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

            // Initialize main content width
            const elPayment = document.getElementById('paymentContainer');
            const elMain = document.getElementById('mainContent');

            if (elPayment) {
                elMain.classList.add('w-full');
            }
        });


        function processOrder() {
            const payButton = document.getElementById("payButton");
            const approve = document.getElementById('approve');

            if (!approve.checked) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Harap Centang',
                    text: 'Harap cek persyaratan dan persetujuan terlebih dahulu.',
                    confirmButtonColor: '#d33',
                });
                return;
            }


            // Ambil data attribute
            const licenseId = payButton.dataset.licenseid;
            const fee = payButton.dataset.fee;
            const payMethod = payButton.dataset.paymethod;
            const payName = payButton.dataset.payname;

            // Ambil CSRF token
            const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

            if (!payMethod) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Harap pilih Pembayaran',
                    text: 'Silakan pilih metode pembayaran terlebih dahulu.',
                    confirmButtonColor: '#d33',
                });
                return; // hentikan eksekusi fungsi
            }


            // Disable button dan ubah text
            payButton.disabled = true;
            payButton.querySelector("#payButtonText").textContent = "Memproses...";


            // Kirim POST pakai fetch
            fetch("/payment/order", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "X-CSRF-TOKEN": csrfToken
                    },
                    body: JSON.stringify({
                        license_id: licenseId,
                        fee: fee,
                        pay_method: payMethod,
                        pay_name: payName
                    })
                })
                .then(response => {
                    if (!response.status) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal Proses',
                            text: 'Terjadi kesalahan .' + response.message,
                            confirmButtonColor: '#d33',
                        });
                        return; // stop eksekusi
                    }
                    return response.json();
                })
                .then(data => {

                    localStorage.setItem('payment_status_done', 'false');

                    if (data.status) {

                        window.location.href = data.status_url;

                    } else {

                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal Proses',
                            text: data.message,
                            confirmButtonColor: '#d33',
                        });
                    }


                })
                .catch(error => {
                    // console.error("Error:", error);

                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal Proses',
                        text: 'Terjadi kesalahan .' + error,
                        confirmButtonColor: '#d33',
                    });

                    payButton.disabled = false;
                    payButton.querySelector("#payButtonText").textContent = "CHECKOUT";

                    return; // stop eksekusi
                });
        }
    </script>
@endsection
@push('script')
    <script>
        const elPayment = document.getElementById('paymentContainer');
        const elMain = document.getElementById('mainContent');

        if (elPayment) {
            elMain.classList.add('w-full');
        }

        document.addEventListener('DOMContentLoaded', function() {});
    </script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            function loadPaymentMethods() {
                fetch("/payment/method")
                    .then(response => response.json())
                    .then(data => {

                        const container = document.querySelector(".paymentMethodContainer");

                        if (data.status && data.data && data.data.paymentFee.length > 0) {



                            let html = "";

                            html += `
                            <label class="relative cursor-pointer block h-full">
                                <input type="radio" name="payment_method" data-fee="0" value="MANUAL" class="peer sr-only">
                                <div class="p-4 bg-white border-4 border-gray-700 rounded-xl hover:border-red-500 peer-checked:border-red-500 transition-all duration-200 h-full flex flex-col justify-center">
                                    <div class="flex flex-col items-center text-center">
                                        <img src="{{ asset('img/favicon.png') }}" style="height:50px;" alt="MANUAL" class="w-15 h-15 object-contain mb-2" />
                                        <span class="text-sm font-medium text-black">MANUAL</span>
                                        <span class="text-xs text-gray-400 feeVa" data-fee="0">Fee: Rp 0</span>
                                    </div>
                                </div>
                            </label>
                            `;

                            data.data.paymentFee.forEach(method => {
                                html += `
                                    <label class="relative cursor-pointer block h-full">
                                        <input type="radio" name="payment_method" data-fee="${method.totalFee}" value="${method.paymentMethod}" class="peer sr-only">
                                        <div class="p-4 bg-white border-4 border-gray-700 rounded-xl hover:border-red-500 peer-checked:border-red-500 transition-all duration-200 h-full flex flex-col justify-center">
                                            <div class="flex flex-col items-center text-center">
                                                <img src="${method.paymentImage}" alt="${method.paymentName}" class="w-15 h-15 object-contain mb-2" />
                                                <span class="text-sm font-medium text-black">${method.paymentName}</span>
                                                <span class="text-xs text-gray-400 feeVa" data-fee="${method.totalFee}">Fee: Rp ${method.totalFee}</span>
                                            </div>
                                        </div>
                                    </label>
                                    `;
                            });

                            container.innerHTML = html;
                        } else {
                            container.innerHTML =
                                `<div class="col-span-4 text-center text-red-500">Tidak ada metode pembayaran ditemukan.</div>`;
                        }
                    })
                    .catch(error => {
                        console.error("Fetch error:", error);
                        const container = document.querySelector(".paymentMethodContainer");
                        container.innerHTML =
                            `<div class="col-span-4 text-center text-red-500">Gagal memuat metode pembayaran.</div>`;
                    });
            }

            loadPaymentMethods();
        });
    </script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const paymentContainer = document.querySelector(".paymentMethodContainer");
            const paymentNameSpan = document.querySelector(".paymentName");
            const globalFeeSpan = document.querySelector(".feeVa");
            const payButton = document.getElementById("payButton");

            paymentContainer.addEventListener("change", function(e) {
                if (e.target.name === "payment_method" && e.target.checked) {
                    const card = e.target.closest("label");
                    if (card) {
                        const name = card.querySelector(".text-black")?.textContent || "";
                        paymentNameSpan.textContent = name;

                        // Ambil fee dari card
                        const cardFeeSpan = card.querySelector(".feeVa");
                        if (cardFeeSpan && globalFeeSpan) {
                            var feeValue = parseFloat(cardFeeSpan.dataset.fee || 0);

                            // feeValue = Math.floor(Math.random() * (40 - 10 + 1)) + 10;

                            globalFeeSpan.dataset.fee = feeValue;
                            globalFeeSpan.textContent = "Rp " + feeValue.toLocaleString();


                            // Update data attribute pada payButton
                            payButton.setAttribute("data-paymethod", e.target.value);
                            payButton.setAttribute("data-payname", name);
                            payButton.setAttribute("data-fee", feeValue);

                            // Hitung total baru
                            const subtotalEl = document.querySelector(".subtotal");
                            const ppnPriceEl = document.querySelector(".ppn-price");
                            const totalBayarEl = document.querySelector(".totalBayar");

                            const subtotal = parseFloat(subtotalEl.dataset.subtotal || 0);
                            const ppnPrice = parseFloat(ppnPriceEl.dataset.ppnprice || 0);

                            const total = subtotal + ppnPrice + feeValue;

                            // Update Total Pembayaran
                            totalBayarEl.dataset.totalbayar = total;
                            totalBayarEl.textContent = "Rp. " + total.toLocaleString();
                        }
                    }
                }
            });

        });
    </script>
@endpush