<!DOCTYPE html><html lang="id" style=""><head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>{{ config('app.name', 'Nusa OTP') }}</title>

    <link rel="icon" type="image/png" href="{{ asset('public/assets/icon-nusaotp.ico') }}">
    <link rel="apple-touch-icon" href="{{ asset('public/assets/icon-nusaotp.ico') }}">

    <meta property="og:title" content="{{ config('app.name', 'Nusa OTP') }}">
    <meta property="og:description" content="Nusa OTP Adalah Platform Layanan Nomor Virtual Dengan OTP Otomatis Tercepat Dan Termurah Di Indonesia. Beli Nomor Virtual Sekarang, Instan, Terpercaya, Dan Aktif 24 Jam.">
    <meta property="og:image" content="{{ asset('public/assets/og-nusaotp.webp') }}">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://nusaotp.com">

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="{{ config('app.name', 'Nusa OTP') }}">
    <meta name="twitter:description" content="Nusa OTP Adalah Platform Layanan Nomor Virtual Dengan OTP Otomatis Tercepat Dan Termurah Di Indonesia. Beli Nomor Virtual Sekarang, Instan, Terpercaya, Dan Aktif 24 Jam.">
    <meta name="twitter:image" content="{{ asset('public/assets/og-nusaotp.webp') }}">
     <meta name="keywords" content="Nusa OTP, nomor virtual murah, Nusa OTP nokos, Nokos, beli nomor virtual, OTP murah, Nokos Indonesia, OTP Wa, nomor virtual, nomor WhatsApp, nomor Telegram, nomor Gmail, nomor registrasi, layanan verifikasi akun, platform nomor virtual, nomor online, nomor SMS verifikasi, nokos wa, nokos indonesia, nomor kosong, nomor virtual murah, otp murah, nokos wa murah, nokos wa, nomor kosong murah, nomor murah, beli nomor kosong, jasa nomor kosong murah, jasa nomor kosong, jasa otp murah, beli nomor kosong wa, nomor kosong">
    
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&amp;family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&amp;display=swap" rel="stylesheet">
<script id="tailwind-config">
      tailwind.config = {
        darkMode: "class",
        theme: {
          extend: {
            "colors": {
                    "surface-container-low": "#eff4ff",
                    "on-tertiary": "#ffffff",
                    "on-tertiary-fixed-variant": "#005236",
                    "inverse-surface": "#213145",
                    "inverse-primary": "#b8c4ff",
                    "surface-container": "#e5eeff",
                    "surface-container-high": "#dce9ff",
                    "on-surface-variant": "#444653",
                    "on-primary-fixed": "#001453",
                    "surface-container-lowest": "#ffffff",
                    "tertiary-fixed": "#6ffbbe",
                    "tertiary": "#003d27",
                    "on-error-container": "#93000a",
                    "on-primary-container": "#a8b8ff",
                    "surface-container-highest": "#d3e4fe",
                    "on-primary": "#ffffff",
                    "tertiary-fixed-dim": "#4edea3",
                    "tertiary-container": "#00563a",
                    "on-secondary-fixed": "#001f26",
                    "on-error": "#ffffff",
                    "surface-bright": "#f8f9ff",
                    "secondary-container": "#57dffe",
                    "secondary": "#3755c3",
                    "secondary2": "#df1212",
                    "background": "#f8f9ff",
                    "primary-fixed-dim": "#b8c4ff",
                    "surface-dim": "#cbdbf5",
                    "on-tertiary-container": "#3fd298",
                    "surface-tint": "#3755c3",
                    "on-secondary-fixed-variant": "#004e5c",
                    "inverse-on-surface": "#eaf1ff",
                    "surface": "#f8f9ff",
                    "error-container": "#ffdad6",
                    "error": "#ba1a1a",
                    "secondary-fixed": "#acedff",
                    "outline-variant": "#c4c5d5",
                    "on-background": "#0b1c30",
                    "surface-variant": "#d3e4fe",
                    "primary-fixed": "#dde1ff",
                    "on-surface": "#0b1c30",
                    "on-secondary-container": "#006172",
                    "primary": "#00288e",
                    "outline": "#757684",
                    "on-secondary": "#ffffff",
                    "secondary-fixed-dim": "#4cd7f6",
                    "on-primary-fixed-variant": "#173bab",
                    "primary-container": "#1e40af",
                    "on-tertiary-fixed": "#002113"
            },
            "borderRadius": {
                    "DEFAULT": "0.25rem",
                    "lg": "0.5rem",
                    "xl": "0.75rem",
                    "full": "9999px"
            },
            "spacing": {
                    "stack-sm": "0.5rem",
                    "gutter": "1rem",
                    "container-margin": "1rem",
                    "section-gap": "2rem",
                    "stack-lg": "1.5rem",
                    "stack-md": "1rem"
            },
            "fontFamily": {
                    "headline-lg-mobile": ["Inter"],
                    "body-lg": ["Inter"],
                    "number-display": ["Inter"],
                    "body-md": ["Inter"],
                    "headline-md": ["Inter"],
                    "headline-lg": ["Inter"],
                    "label-md": ["Inter"]
            },
            "fontSize": {
                    "headline-lg-mobile": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "700"}],
                    "body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
                    "number-display": ["24px", {"lineHeight": "32px", "letterSpacing": "0.1em", "fontWeight": "700"}],
                    "body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
                    "headline-md": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
                    "headline-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
                    "label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600"}]
            }
          },
        },
      }
    </script>
<style>
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        .glass-effect {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
        @keyframes modalPop {
            from { opacity: 0; transform: scale(0.95) translateY(10px); }
            to { opacity: 1; transform: scale(1) translateY(0); }
        }
        .modal-active {
            animation: modalPop 0.3s ease-out forwards;
        }
        .live-card{
    background:#fff;
    border:1px solid #eef2ff;
    border-radius:14px;
    padding:10px 12px;
    box-shadow:0 2px 6px rgba(0,0,0,.04);
    animation:slideUp .35s ease;
}

@keyframes slideUp{
    from{
        opacity:0;
        transform:translateY(12px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

.live-status{
    width:8px;
    height:8px;
    border-radius:999px;
    background:#22c55e;
    animation:pulse 1.5s infinite;
    flex-shrink:0;
}

@keyframes pulse{
    0%{transform:scale(1);opacity:1;}
    70%{transform:scale(2);opacity:.25;}
    100%{transform:scale(1);opacity:1;}
}
#liveDeposits::-webkit-scrollbar{
    display:none;
}

#liveDeposits{
    -ms-overflow-style:none;
    scrollbar-width:none;
}

.live-card{
    min-width:260px;
    max-width:260px;
    flex-shrink:0;
    scroll-snap-align:start;

    background:#fff;
    border:1px solid #eef2ff;
    border-radius:16px;
    padding:14px;
    box-shadow:0 4px 12px rgba(0,0,0,.05);
}
    </style>
</head>
<body class="bg-surface text-on-surface font-body-md min-h-screen" style="overflow: auto;">
<!-- TopAppBar -->
@include('apk.partials.header')
<main class="flex-1 px-container-margin py-stack-md space-y-section-gap mb-24">
<!-- Balance Card Decoration -->
<div class="mb-stack-lg relative overflow-hidden rounded-xl bg-gradient-to-br from-primary to-secondary p-6 text-white shadow-lg">
<div class="absolute -right-4 -top-4 opacity-10">
<span class="material-symbols-outlined text-[120px]" style="font-variation-settings: 'FILL' 1">account_balance_wallet</span>
</div>
<p class="text-label-md font-label-md opacity-80 uppercase tracking-wider">Saldo</p>
<h2 class="text-headline-lg font-headline-lg mt-1">
    Rp {{ number_format(auth()->user()->balance,0,',','.') }}
</h2>
<div class="mt-4 flex items-center gap-2 text-sm opacity-90">


</div>
</div>
<section class="space-y-stack-lg">

    <!-- Payment Info Card -->
    <div class="bg-primary-container/10 border border-primary-container/20 rounded-xl p-4 flex gap-4 items-start">
        <span
            class="material-symbols-outlined text-primary-container"
            style="font-variation-settings:'FILL' 1">
            info
        </span>

        <div>
            <p class="font-bold text-primary-container text-sm">
                Metode Pembayaran QRIS
            </p>

            <p class="text-on-surface-variant text-xs mt-1 leading-relaxed">
                Pembayaran menggunakan QRIS akan terverifikasi secara otomatis dalam waktu kurang dari 1 menit.
            </p>
        </div>
    </div>

    <!-- Input Form -->
    <div class="bg-white rounded-xl p-6 shadow-sm border border-outline-variant/30">

        <label class="block text-on-surface-variant font-label-md mb-2">
            Nominal
        </label>

        <div class="relative flex items-center">
            <span class="absolute left-4 text-headline-md font-bold text-primary">
                Rp
            </span>

            <input
                id="nominalInput"
                type="number"
                placeholder="0"
                class="w-full pl-12 pr-4 py-4 bg-surface-container-low border-none rounded-lg font-number-display text-headline-md focus:ring-2 focus:ring-primary-container text-primary placeholder:opacity-30 transition-all">
        </div>

        <!-- Quick Options Bento Grid -->
<div class="grid grid-cols-3 gap-3 mt-stack-md">
<button class="quick-chip hover:bg-secondary-container transition-colors py-3 rounded-lg font-bold text-sm border border-primary/5 bg-surface-container text-primary" onclick="setNominal(5000)">5.000</button>
<button class="quick-chip hover:bg-secondary-container transition-colors py-3 rounded-lg font-bold text-sm border border-primary/5 bg-surface-container text-primary" onclick="setNominal(10000)">10.000</button>
<button class="quick-chip hover:bg-secondary-container transition-colors py-3 rounded-lg font-bold text-sm border border-primary/5 bg-surface-container text-primary" onclick="setNominal(50000)">50.000</button>
<button class="quick-chip hover:bg-secondary-container transition-colors py-3 rounded-lg font-bold text-sm border border-primary/5 bg-surface-container text-primary" onclick="setNominal(100000)">100.000</button>
<button class="quick-chip hover:bg-secondary-container transition-colors py-3 rounded-lg font-bold text-sm border border-primary/5 bg-surface-container text-primary" onclick="setNominal(500000)">500.000</button>
<button class="quick-chip bg-surface-container hover:bg-secondary-container transition-colors py-3 rounded-lg text-primary font-bold text-sm border border-primary/5" onclick="setNominal(1000000)">1.000.000</button>
</div>

    </div>

    <!-- Action Button -->
    <button
        id="btnDeposit"
        class="w-full bg-primary hover:bg-primary-container text-white py-4 rounded-xl font-bold text-lg shadow-lg shadow-primary/20 transition-all active:scale-95 flex items-center justify-center gap-2">
        <span>Bayar</span>
        <span class="material-symbols-outlined">
            qr_code_scanner
        </span>
    </button>

</section>
<input
    type="hidden"
    id="csrf"
    value="{{ csrf_token() }}">

    <section class="mt-8">

    <div class="flex items-center justify-between mb-4">

        <h3 class="font-headline-md text-headline-md text-on-surface">
            Aktivitas Deposit
        </h3>

        <span class="text-xs text-green-600">
            LIVE
        </span>

    </div>

   <div
    id="liveDeposits"
    class="flex gap-3 overflow-x-auto pb-2 snap-x snap-mandatory scrollbar-hide">

    <div class="text-gray-400 text-sm py-6">
        Menunggu deposit...
    </div>

</div>

</section>
</main>
<!-- Modal Backdrop -->
<div class="fixed inset-0 bg-inverse-surface/60 backdrop-blur-sm z-50 flex items-center justify-center p-gutter hidden" id="modalOverlay">
<!-- Modal Content -->
<div class="bg-white w-full max-w-sm rounded-2xl shadow-2xl overflow-hidden modal-active">
<div class="p-6 text-center">
<div class="flex justify-between items-center mb-6">
<h3 class="font-headline-md text-primary">Scan QRIS</h3>
<button class="text-on-surface-variant hover:text-error transition-colors" onclick="closeModal()">
<span class="material-symbols-outlined">close</span>
</button>
</div>

<div class="bg-surface-container-low rounded-xl p-4 mb-6 inline-block">
<!-- QR Placeholder -->
<div class="w-48 h-48 mx-auto bg-white p-2 rounded-lg relative">
<img
id="qrisImage"
class="w-full h-full object-contain hidden"
src="">
</div>
<div class="mt-3 flex items-center justify-center gap-2">
<img alt="QRIS Logo" class="h-4" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCiqI2lVnYO2l3tIT36RrDCA9DVHNbQOCF5CDVahrtzW2DiJfPy34-zpuCa_l6zHHpmKbcMVlD_iDdLkE_as0qYrpldCf69Tskcf2VPknyQ05v8zyv9qT258J_5dGlEfwznESEAVShZg3nrwqFoIEqxRMjol5r-0ZDmOHWP4fiOJASjaYFlHrT5mYsTMG9YY4Zsefxprpg-jcFXxqLwIUhHs4kWxENyBhzu4lNLio0cXd2bV7on9jy9Ikb6rymlD6gQxAFApCxbv-23">
</div>
</div>
<div class="space-y-2 mb-8">
<div class="flex justify-between items-center p-3 bg-surface rounded-lg">
<span class="text-on-surface-variant text-sm">Nominal</span>
<span class="font-bold text-primary text-lg" id="displayNominal">Rp 500.000</span>
</div>
<div class="flex justify-between items-center p-3 bg-surface rounded-lg">
<span class="text-on-surface-variant text-sm">ID Transaksi</span>
<span
id="trxIdText"
class="font-mono text-sm font-bold">
-
</span>
</div>
</div>
<div class="flex items-center justify-center gap-2 mb-4 text-error font-bold">
  <span class="material-symbols-outlined text-lg">schedule</span>
<span
    id="countdownText"
    class="text-sm"
>
    Selesaikan pembayaran dalam 20:00
</span>
</div>
<div class="mt-4 space-y-3">

    <button
    class="w-full bg-secondary2 hover:bg-secondary2-fixed text-white py-3 rounded-xl font-bold transition-all active:scale-95 shadow-md"
    onclick="showCancelModal()">
        Batalkan
    </button>

    <button
    class="w-full bg-secondary hover:bg-secondary-fixed text-white py-3 rounded-xl font-bold transition-all active:scale-95 shadow-md"
    onclick="closeModal()">
        Selesai
    </button>

</div>
</div>
</div>
</div>
@include('apk.partials.bar')
<!-- Script for Interactions -->
<script>
        function setNominal(amount) {
            const input = document.getElementById('nominalInput');
            input.value = amount;
            
            // Visual feedback for chips
            document.querySelectorAll('.quick-chip').forEach(chip => {
                if(parseInt(chip.innerText.replace(/\./g, '')) === amount) {
                    chip.classList.add('bg-primary-container', 'text-white');
                    chip.classList.remove('bg-surface-container', 'text-primary');
                } else {
                    chip.classList.remove('bg-primary-container', 'text-white');
                    chip.classList.add('bg-surface-container', 'text-primary');
                }
            });
        }



let currentTrx = null;
let depositChecker = null;
let countdownInterval = null;
let expireAt = null;

const btnDeposit =
document.getElementById('btnDeposit');

btnDeposit.addEventListener('click', async ()=>{

    let amount =
    document.getElementById('nominalInput').value;

    if(!amount || amount < 5000){

        alert('Minimal deposit Rp 5.000');

        return;
    }

    btnDeposit.disabled = true;
    btnDeposit.innerHTML = 'Memproses...';

    try{

        const response =
        await fetch('/deposit',{

            method:'POST',

            headers:{
                'X-CSRF-TOKEN':
                document.getElementById('csrf').value,

                'Accept':'application/json',

                'Content-Type':'application/json',

                'X-Requested-With':'XMLHttpRequest'
            },

            body:JSON.stringify({
                amount: amount,
                method: 'qris'
            })
        });

        console.log('STATUS:', response.status);

        const text =
        await response.text();

        console.log('RAW RESPONSE:', text);

        let result;

        try{
            result = JSON.parse(text);
        }catch(e){

            showErrorModal(
    'Gagal Membuat QRIS. Silahkan coba lagi.'
);

            return;
        }

        if(!response.ok){

           showErrorModal(
    result.message ||
    result.error ||
    'Gagal Membuat QRIS. Silahkan coba lagi.'
);

            return;
        }

        currentTrx = result.trxId;

       const finalAmount =
Math.ceil(
    Number(result.amount) * 1.03
);

document
.getElementById('displayNominal')
.innerText =
'Rp ' +
finalAmount.toLocaleString('id-ID');

        document
        .getElementById('trxIdText')
        .innerText =
        result.trxId;

        const qr =
        document.getElementById('qrisImage');

        if(result.qrisData?.image){

            qr.src =
            result.qrisData.image;

        }else if(result.qrisData?.string){

            qr.src =
            'https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=' +
            encodeURIComponent(
                result.qrisData.string
            );

        }else{

            showErrorModal(
    'QRIS tidak berhasil dibuat. Silahkan coba lagi.'
);

            return;
        }

        qr.classList.remove('hidden');

openModal();

startCountdown(20);

startChecker();

    }catch(e){

        console.error(
            'DEPOSIT ERROR:',
            e
        );


        showErrorModal(
    'Gagal Membuat QRIS. Silahkan coba lagi.'
);

    }finally{

        btnDeposit.disabled = false;

        btnDeposit.innerHTML = `
            <span>Bayar Sekarang</span>
            <span class="material-symbols-outlined">
                qr_code_scanner
            </span>
        `;
    }
});

function openModal(){

    document
    .getElementById('modalOverlay')
    .classList.remove('hidden');

    document.body.style.overflow='hidden';
}

function closeModal(){

    document
    .getElementById('modalOverlay')
    .classList.add('hidden');

    document.body.style.overflow='auto';

    clearInterval(
        countdownInterval
    );

    clearInterval(
        depositChecker
    );
}

async function startChecker(){

    clearInterval(depositChecker);

    depositChecker =
    setInterval(async()=>{

        const r =
        await fetch(
            '/deposit/status/' +
            currentTrx
        );

        const data =
        await r.json();

        if(data.status === 'PAID'){

            clearInterval(depositChecker);
            clearInterval(countdownInterval);

            currentTrx = null;

            document
            .getElementById('modalOverlay')
            .classList.add('hidden');

            document.body.style.overflow='auto';

            showSuccessModal(
                'Deposit Berhasil',
                'Saldo telah berhasil ditambahkan ke akun Anda.',
                true
            );

            return;
        }

        if(
            data.status === 'FAILED' ||
            data.status === 'CANCELED'
        ){

            clearInterval(depositChecker);
            closeModal();

            showErrorModal(
                'Transaksi dibatalkan atau gagal.'
            );
        }

    },3000);
}

document
.getElementById('modalOverlay')
.addEventListener('click',function(e){

    if(e.target === this){

        closeModal();
    }
});

function startCountdown(minutes = 20){

    clearInterval(countdownInterval);

    expireAt =
    Date.now() + (minutes * 60 * 1000);

    countdownInterval =
    setInterval(()=>{

        const diff =
        expireAt - Date.now();

        if(diff <= 0){

            clearInterval(
                countdownInterval
            );

            cancelDeposit(true);

            return;
        }

        const min =
        Math.floor(diff / 60000);

        const sec =
        Math.floor(
            (diff % 60000) / 1000
        );

        document
        .getElementById(
            'countdownText'
        )
        .innerText =
        `Selesaikan pembayaran dalam ${String(min).padStart(2,'0')}:${String(sec).padStart(2,'0')}`;

    },1000);
}
async function cancelDeposit(auto = false){

    if(!currentTrx){

        closeModal();

        return;
    }

    try{

        const response =
        await fetch(
            '/deposit/cancel/' +
            currentTrx,
            {
                method:'POST',
                headers:{
                    'X-CSRF-TOKEN':
                    document.getElementById('csrf').value,
                    'X-Requested-With':
                    'XMLHttpRequest'
                }
            }
        );

        const data =
        await response.json();

        console.log(
            'CANCEL:',
            data
        );

    }catch(e){

        console.error(
            'CANCEL ERROR:',
            e
        );
    }

    clearInterval(
        depositChecker
    );

    clearInterval(
        countdownInterval
    );

    currentTrx = null;

    closeModal();

    if(auto){

        showSuccessModal(
    'QRIS Expired',
    'Masa berlaku QRIS telah habis.'
);
    }else{

        showSuccessModal(
    'Deposit Dibatalkan',
    'QRIS berhasil dibatalkan.'
);
    }
}
function showErrorModal(message){

    document
    .getElementById('errorMessage')
    .innerText =
    message ||
    'Silahkan coba lagi.';

    document
    .getElementById('errorModal')
    .classList.remove('hidden');
}
function showSuccessModal(
    title,
    message,
    reload = false
){

    document.getElementById(
        'successTitle'
    ).innerText = title;

    document.getElementById(
        'successMessage'
    ).innerText = message;

    document.getElementById(
        'successModal'
    ).classList.remove('hidden');

    if(reload){

        window.successReload = true;

    }else{

        window.successReload = false;
    }
}

function closeSuccessModal(){

    document
    .getElementById('successModal')
    .classList.add('hidden');

    if(window.successReload){

        location.reload();
    }
}
async function confirmCancelDeposit(){

    closeCancelModal();

    await cancelDeposit();
}
function showCancelModal(){

    document
    .getElementById(
        'confirmCancelModal'
    )
    .classList.remove('hidden');
}

function closeCancelModal(){

    document
    .getElementById(
        'confirmCancelModal'
    )
    .classList.add('hidden');
}
function closeErrorModal(){

    document
    .getElementById('errorModal')
    .classList.add('hidden');
}
        // Close on clicking outside the modal
        document.getElementById('modalOverlay').addEventListener('click', function(e) {
            if (e.target === this) closeModal();
        });
        let shownDepositIds = [];

async function loadLiveDeposits(){

    try{

        const res = await fetch('/notif/recent-deposits');

        const data = await res.json();

        const wrap =
            document.getElementById('liveDeposits');

        data.reverse().forEach(item=>{

            if(shownDepositIds.includes(item.id))
                return;

            shownDepositIds.push(item.id);

            if(shownDepositIds.length > 50)
                shownDepositIds.shift();

            const html = `
<div class="live-card">

    <div class="flex items-center justify-between">

        <div class="flex items-center gap-2">

            <div class="live-status"></div>

            <span class="text-[13px] font-semibold text-blue-600">
                Deposit Berhasil
            </span>

        </div>

        <span class="text-[11px] text-gray-400">
            ${timeAgo(item.created_at)}
        </span>

    </div>

    <div class="mt-2 text-[12px] leading-5">

        <div>
            <b>User</b> :
            ${item.user}
        </div>

        <div>
            <b>Nominal</b> :
            Rp ${Number(item.amount).toLocaleString('id-ID')}
        </div>

    </div>

</div>
`;

           if(
    wrap.children.length === 1 &&
    wrap.textContent.includes('Menunggu')
){
    wrap.innerHTML = '';
}

            wrap.insertAdjacentHTML(
                'afterbegin',
                html
            );

        });

        while(wrap.children.length > 8){

            wrap.removeChild(
                wrap.lastElementChild
            );

        }

    }catch(e){
        console.log(e);
    }

}
function timeAgo(date){

    const sec =
        (new Date() - new Date(date)) / 1000;

    if(sec < 60)
        return 'Baru saja';

    if(sec < 3600)
        return Math.floor(sec / 60) + ' menit lalu';

    if(sec < 86400)
        return Math.floor(sec / 3600) + ' jam lalu';

    return Math.floor(sec / 86400) + ' hari lalu';

}
loadLiveDeposits();

setInterval(loadLiveDeposits,15000);
    </script>

<div
id="errorModal"
class="fixed inset-0 bg-black/50 backdrop-blur-sm z-[9999] hidden flex items-center justify-center p-4"
>
    <div class="bg-white rounded-2xl p-6 w-full max-w-sm text-center shadow-xl">

        <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-red-100 flex items-center justify-center">
            <span class="material-symbols-outlined text-red-600 text-4xl">
                error
            </span>
        </div>

        <h3 class="text-lg font-bold text-gray-800">
            Gagal Membuat QRIS
        </h3>

        <p
        id="errorMessage"
        class="text-gray-500 text-sm mt-2">
            Silahkan coba lagi.
        </p>

        <button
        onclick="closeErrorModal()"
        class="w-full mt-5 bg-primary text-white py-3 rounded-xl font-bold">
            Tutup
        </button>

    </div>
</div>
<div
id="confirmCancelModal"
class="fixed inset-0 bg-black/50 backdrop-blur-sm z-[9999] hidden flex items-center justify-center p-4"
>
    <div class="bg-white rounded-2xl p-6 w-full max-w-sm text-center shadow-xl">

        <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-amber-100 flex items-center justify-center">
            <span class="material-symbols-outlined text-amber-600 text-4xl">
                warning
            </span>
        </div>

        <h3 class="text-lg font-bold text-gray-800">
            Batalkan Deposit?
        </h3>

        <p class="text-gray-500 text-sm mt-2">
            QRIS yang sudah dibuat akan dibatalkan dan tidak dapat digunakan kembali.
        </p>

        <div class="grid grid-cols-2 gap-3 mt-5">

            <button
            onclick="closeCancelModal()"
            class="py-3 rounded-xl border font-semibold">
                Kembali
            </button>

            <button
            onclick="confirmCancelDeposit()"
            class="py-3 rounded-xl bg-red-600 text-white font-semibold">
                Batalkan
            </button>

        </div>

    </div>
</div>

<div
id="successModal"
class="fixed inset-0 bg-black/50 backdrop-blur-sm z-[9999] hidden flex items-center justify-center p-4"
>
    <div class="bg-white rounded-2xl p-6 w-full max-w-sm text-center shadow-xl">

        <div
        id="successIcon"
        class="w-16 h-16 mx-auto mb-4 rounded-full bg-green-100 flex items-center justify-center">
            <span class="material-symbols-outlined text-green-600 text-4xl">
                check_circle
            </span>
        </div>

        <h3
        id="successTitle"
        class="text-lg font-bold text-gray-800">
            Berhasil
        </h3>

        <p
        id="successMessage"
        class="text-gray-500 text-sm mt-2">
            Operasi berhasil dilakukan.
        </p>

        <button
        onclick="closeSuccessModal()"
        class="w-full mt-5 bg-primary text-white py-3 rounded-xl font-bold">
            Oke
        </button>

    </div>
</div>


</body></html>