

<?php $__env->startSection('custom_style'); ?>



<?php $__env->stopSection(); ?>


<?php $__env->startSection('content'); ?>
<?php echo $__env->make('../navbar', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
 <div class="container grid grid-cols-8 gap-8 pt-8 sm:pt-16">
        <div class="col-span-1 hidden sm:block md:col-span-2">
            <aside class="sticky top-20 print:hidden">
                <nav class="h-full content-start lg:grid lg:content-between">
                    <div class="space-y-4">
                        <a class="group flex items-center gap-3 rounded-md bg-gradient-to-r to-transparent px-3 py-2 text-sm font-medium text-white hover:from-murky-700" style="outline: none;" href="/id/dashboard">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="h-5 w-5">
                                <path
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
                                ></path>
                            </svg>
                            <span class="hidden truncate md:block">Dashboard</span>
                        </a>
                        <a class="group flex items-center gap-3 rounded-md bg-gradient-to-r to-transparent px-3 py-2 text-sm font-medium text-white hover:from-murky-700" style="outline: none;" href="<?php echo e(route('riwayat')); ?>">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="h-5 w-5">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                            <span class="hidden truncate md:block">Transaksi</span>
                        </a>
                    
                    </div>
                    <div class="w-full pt-4">
                     
   
                           <form action="<?php echo e(route('logout')); ?>" method="POST" id="logout">
                            <?php echo csrf_field(); ?>                        
                            <button type="submit" class="flex w-full items-center gap-3 rounded-md bg-gradient-to-r px-3 py-2 text-sm font-medium text-rose-500 hover:from-murky-700">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="h-5 w-5">
                                    <path
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                        d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75"
                                    ></path>
                                </svg>
                                <span class="hidden md:block">Keluar</span>
                            </button>
                        </form>
                    </div>
                </nav>
            </aside>
        </div>
       
        
        <div class="col-span-8 sm:col-span-7 sm:col-start-2 md:col-span-7 md:col-start-3">
            <div class="grid grid-cols-3 gap-4 md:gap-8">
                <div class="col-span-3 space-y-8 xl:col-span-2">
                    <div>
                        <a class="inline-flex items-center space-x-2 outline-none" href="<?php echo e(route('reload')); ?>">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="h-5 w-5">
                                <path
                                    fill-rule="evenodd"
                                    d="M17 10a.75.75 0 01-.75.75H5.612l4.158 3.96a.75.75 0 11-1.04 1.08l-5.5-5.25a.75.75 0 010-1.08l5.5-5.25a.75.75 0 111.04 1.08L5.612 9.25H16.25A.75.75 0 0117 10z"
                                    clip-rule="evenodd"
                                ></path>
                            </svg>
                            <span>Riwayat Deposit</span>
                        </a>
                    </div>
                    
                    <div class="block space-y-8 xl:hidden">
                        <div class="rounded-lg border border-murky-600 bg-murky-700 p-6">
                            <div class="flex flex-col items-start justify-between gap-4 sm:flex-row">
                                <div>
                                    <p class="text-sm font-medium">Saldo Anda</p>
                                    <h3 class="mt-1 text-[24px] font-bold text-primary-500 lg:text-[26px]">Rp&nbsp;<?php echo e(number_format(Auth::user()->balance, 0, ',', '.')); ?></h3>
                                </div>
                                <div class="flex items-center justify-center space-x-2">
                                    <a class="rounded-md bg-murky-600 p-2 outline-none" href="<?php echo e(route('reload')); ?>">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="h-5 w-5">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                        </svg>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="w-full border-t border-murky-600"></div>
                        <div class="rounded-md bg-blue-50 p-4">
                            <div class="flex">
                                <div class="flex-shrink-0">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="h-5 w-5 text-blue-400">
                                        <path
                                            fill-rule="evenodd"
                                            d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z"
                                            clip-rule="evenodd"
                                        ></path>
                                    </svg>
                                </div>
                                <div class="ml-3 flex-1 md:flex md:justify-start">
                                    <p class="text-sm text-blue-700">
                                        QRIS : 24 Jam
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
               



<div  class="rounded-md">
    
     <form action="<?php echo e(route('deposit.store')); ?>" method="POST" class="my-form px-3 mt-2" id="topup-form">

    <?php echo csrf_field(); ?>

    <?php if($errors->any()): ?>
        <div class="alert alert-danger">
            <ul>
                <?php $__currentLoopData = $errors->all(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $error): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <li><?php echo e($error); ?></li>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </ul>
        </div>
    <?php endif; ?>

    <?php if(session('success')): ?>
        <div class="alert alert-success">
            <ul>
                <li><?php echo e(session('success')); ?></li>
            </ul>
        </div>
    <?php endif; ?>

    				
                    </div>
                    <input type="hidden" id="selected_method" name="metode">
                    <div id="payment-method-section" class="rounded-xl bg-murky-800 shadow-2xl">
          
            
           
            <div class="rounded-xl bg-murky-800 shadow-2xl" >
              <div class="flex border-b border-murky-600">
                <div class="flex items-center justify-center rounded-tl-xl bg-gradient-to-b from-primary-400 to-primary-600 px-4 py-2 text-xl font-semibold"> 1 </div>
                <h3 class="flex w-full items-center justify-between rounded-tr-xl bg-gradient-to-b from-murky-800 to-murky-800 px-2 py-2 text-base font-semibold leading-6 text-white sm:px-4"> Masukkan Data Deposit </h3>
              </div>
              <div class="grid grid-cols-2 gap-4 p-4 sm:px-6 sm:pb-4">
    <div>
        <label for="id" class="block text-xs font-medium text-white pb-2">Jumlah Deposit</label>
        <div class="flex flex-col items-start">
            <input
                class="relative block w-full appearance-none rounded-none border border-murky-600 bg-murky-700 px-3 py-2 text-xs text-white placeholder-murky-200 focus:z-10 focus:border-primary-500 focus:outline-none focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-75 !rounded-md !border-0 !bg-murky-200 !text-murky-800 !placeholder-murky-800 accent-murky-800 !ring-0 placeholder:text-xs focus:!border-transparent focus:!bg-white focus:!ring-transparent"
                type="number"
                name="jumlah"
                placeholder="Ketikan Nominal Topup"
                required
            />
        </div>
    </div>
    <div>
        <label for="server" class="block text-xs font-medium text-white pb-2">No. WhatsApp</label>
        <div class="flex flex-col items-start">
            <input
                class="relative block w-full appearance-none rounded-none border border-murky-600 bg-murky-700 px-3 py-2 text-xs text-white placeholder-murky-200 focus:z-10 focus:border-primary-500 focus:outline-none focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-75 !rounded-md !border-0 !bg-murky-200 !text-murky-800 !placeholder-murky-800 accent-murky-800 !ring-0 placeholder:text-xs focus:!border-transparent focus:!bg-white focus:!ring-transparent"
                type="number" name="no_telfon" placeholder="No WhatsApp" required
            />
        </div>
    </div>
    </div>
    </div>
    </div>

            
            
            <div class="rounded-xl bg-murky-800 shadow-2xl" id="section-payment-channel">
              <div class="flex border-b border-murky-600">
                <div class="flex items-center justify-center rounded-tl-xl bg-gradient-to-b from-primary-400 to-primary-600 px-4 py-2 text-xl font-semibold"> 2 </div>
                <h3 class="flex w-full items-center justify-between rounded-tr-xl bg-gradient-to-b from-murky-800 to-murky-800 px-2 py-2 text-base font-semibold leading-6 text-white sm:px-4"> Pilih Metode Pembayaran </h3>
              </div>
              <dl id="paymentList" class="flex w-full flex-col space-y-4 p-4 sm:p-6" x-data="{ selected: null, paymentSelected: '' }">
                  
               
                
                <!--QRIS-->
              <div class="flex w-full transform flex-col justify-between rounded-md bg-murky-600 text-left text-sm font-medium text-white duration-300 focus:outline-none accordion-header" data-state="">
                  <dt>

        <button class="w-full disabled:opacity-75" id="disclosure-button-:rbb:" type="button" @click="selected !== 7 ? selected = 7 : selected = null" aria-expanded="false" aria-controls="disclosure-panel-:rc8:">
                      <div class="flex w-full justify-between px-4 py-2">
                        <span class="transform text-base font-medium leading-7 duration-300">
                          <div>QRIS</div>
                        </span>
                        <span class="ml-6 flex h-7 items-center">
                          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="h-6 w-6 transform duration-300" x-bind:class="selected == 7 ? 'rotate-180' : 'rotate-0'">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path>
                          </svg>
                        </span>
                      </div>
                    </button>
                    <div class="relative overflow-hidden transition-all max-h-0 duration-700" x-ref="container1" x-bind:style="selected == 7 ? 'max-height: ' + $refs.container1.scrollHeight + 'px' : 'max-height: 0'" style="max-height: 239px;">
                      <div class="px-4 pt-2 pb-4 text-sm text-murky-300" id="disclosure-panel-1">
                        <div id="radiogroup-1" role="radiogroup" aria-labelledby="label-1">
                          <label class="sr-only" id="label-1" role="none">Select a payment list</label>
                          <div id="eWalletList" class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-2 xl:grid-cols-3" role="none"> <?php $__currentLoopData = $pay_method; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $p): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?> <?php if($p->tipe == 'qris'): ?> <div x-bind:class="{ 'bg-white bj-shadow': paymentSelected === '<?php echo e($p->code); ?>', 'bg-murky-200': paymentSelected !== '<?php echo e($p->code); ?>' }" method-id="<?php echo e($p->code); ?>" data-method="<?php echo e($p->code); ?>" class="method-list relative flex cursor-pointer overflow-hidden payment-method rounded-xl border border-transparent p-2.5 shadow-sm outline-none md:p-4 bg-white bj-shadow hover:ring-2 hover:ring-primary-500 hover:ring-offset-2 hover:ring-offset-murky-800 duration-300 ease-in-out " id="radio-group-<?php echo e($p->code); ?>" role="radio" aria-checked="false" method-id="<?php echo e($p->code); ?>" id="method_<?php echo e($p->id); ?>"   tabindex="0" aria-labelledby="label-<?php echo e($p->code); ?>:" aria-describedby="description-<?php echo e($p->code); ?>" @click="paymentSelected = '<?php echo e($p->code); ?>'">
                          
                              <label for="method_<?php echo e($p->id); ?>"></label>
                              <span class="flex w-full">
                                <span class="flex w-full flex-col justify-between">
                                  <div>
                                    <span class="block text-xs font-semibold text-murky-800">
                                      <?php echo e($p->name); ?>

                                    </span>
                                    <span class="mt-0 flex items-center text-xxs text-murky-600"><?php echo e($p->keterangan); ?></span>
                                  </div>
                                  <div class="flex w-full items-center justify-between">
                                    <div class="mt-1">
                                      <div class="relative z-30 mt-0 text-xs font-semibold leading-4 text-murky-800  text-dark.meltihhh">
                                        <h6 class="hargapembayaran" id="<?php echo e($p->code); ?>"></h6>
                                      </div>
                                    </div>
                                    <div class="relative aspect-[6/2] w-10">
                                      <img src="<?php echo e($p->images); ?>" x-bind:class="{ 'grayscale-0': paymentSelected === '<?php echo e($p->code); ?>', 'grayscale': paymentSelected !== '<?php echo e($p->code); ?>' }" class="object-scale-down grayscale-0" style="position: absolute; height: 100%; width: 100%; inset: 0px; color: transparent;" />
                                    </div>
                                  </div>
                                </span>
                              </span>
                            </div> <?php endif; ?> <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?> </div>
                        </div>
                      </div>
                    </div>
                    <div class="relative overflow-hidden transition-all max-h-0 w-full rounded-b-md bg-murky-300" x-ref="logo3" x-bind:style="selected == 7 ? 'max-height: 0' : 'max-height: 30px'" x-bind:class="selected == 7 ? 'px-0 py-0' : 'px-4 pt-2.5 pb-5'">
                      <div class="flex justify-end gap-x-2"> <?php $__currentLoopData = $pay_method; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $p): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?> <?php if($p->tipe == 'qris'): ?> <div class="relative aspect-[6/2] w-10">
                          <img class="object-scale-down" src="<?php echo e($p->images); ?>" style="position: absolute; height: 100%; width: 100%; inset: 0px; color: transparent;" alt="<?php echo e($p->name); ?>" />
                        </div> <?php endif; ?> <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?> </div>
                    </div>
                  </dt>
                </div>
                

              </dl>
            </div>
       
                    <div class="w-full border-t border-murky-600"></div>
                    <button  type="submit" name="tombol" value="submit"
                        class="inline-flex items-center justify-center rounded-md bg-primary-500 px-4 py-2 text-sm font-medium text-white duration-300 hover:bg-primary-400 disabled:cursor-not-allowed disabled:opacity-75 flex w-full items-center justify-center space-x-2"
                        
                    >
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="h-5 w-5">
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z"
                            ></path>
                        </svg>
                        <span>Topup Sekarang!</span>
                    </button>
                    </form>
                </div>
                <div class="hidden xl:block">
                    <div class="sticky top-20 space-y-8">
                        <div class="rounded-md bg-blue-50 p-4">
                            <div class="flex">
                                <div class="flex-shrink-0">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="h-5 w-5 text-blue-400">
                                        <path
                                            fill-rule="evenodd"
                                            d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z"
                                            clip-rule="evenodd"
                                        ></path>
                                    </svg>
                                </div>
                                <div class="ml-3 flex-1 md:flex md:justify-start">
                                    <p class="text-sm text-blue-700">
                                        QRIS : 24 jam 
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="rounded-lg border border-murky-600 bg-murky-700 p-6">
                            <div class="flex flex-col items-start justify-between gap-4 sm:flex-row">
                                <div>
                                    <p class="text-sm font-medium">Saldo Anda</p>
                                    <h3 class="mt-1 text-[24px] font-bold text-primary-500 lg:text-[26px]">Rp&nbsp;<?php echo e(number_format(Auth::user()->balance, 0, ',', '.')); ?></h3>
                                </div>
                                <div class="flex items-center justify-center space-x-2">
                                    <a class="rounded-md bg-murky-600 p-2" href="<?php echo e(route('reload')); ?>" style="outline: none;">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="h-5 w-5">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                        </svg>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    </div>
                    
                    </div>
                    </div>
                    </div>
                    </div>
                    
                    
 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet">
    
    <script>
     document.addEventListener("DOMContentLoaded", function () {
        const paymentMethods = document.querySelectorAll('.payment-method');
        const accordionBody = document.querySelector('.accordion-body.bg-payment');

        paymentMethods.forEach(function (method) {
            method.addEventListener('click', function () {
                paymentMethods.forEach(function (elem) {
                    elem.classList.remove('selected');
                });

                this.classList.add('selected');
                document.getElementById('selected_method').value = this.getAttribute('data-method');

                accordionBody.classList.add('selected');
            });
        });
    });
    </script>
		
    <script>
    const jumlahInput = document.querySelector('input[name="jumlah"]');

jumlahInput.addEventListener('input', function(event) {
    const nilaiJumlah = event.target.value;
    const flexEndElements = document.querySelectorAll('.showHarga');

    if (nilaiJumlah === '') {
        flexEndElements.forEach(function(element) {
            element.textContent = '';
        });
    } else {
        flexEndElements.forEach(function(element) {
            const paymentCode = element.id;
            console.log(paymentCode);

            if (paymentCode === 'DANA' || paymentCode === 'OVOPUSH' || paymentCode === 'SHOPEEPAY' || paymentCode === 'LINKAJA' || paymentCode === 'VIRGO' || paymentCode === 'ASTRAPAY') {
                const nilaiDana = parseFloat(nilaiJumlah) + (parseFloat(nilaiJumlah) * 0.03);
                element.textContent = formatRupiah(nilaiDana);
            } else if(paymentCode === 'QRIS'){
                const nilaiQris = parseFloat(nilaiJumlah) + (parseFloat(nilaiJumlah) * 0.01) + 100;
                element.textContent = formatRupiah(nilaiQris);
            }else if(paymentCode === 'TRI' || paymentCode === 'AXIS' || paymentCode === 'XL'){
                const nilaiPulsa = parseFloat(nilaiJumlah) + (parseFloat(nilaiJumlah) * 0.25);
                element.textContent = formatRupiah(nilaiPulsa);
            }else if(paymentCode === 'TELKOMSEL'){
                const nilaiPulsa = parseFloat(nilaiJumlah) + (parseFloat(nilaiJumlah) * 0.32);
                element.textContent = formatRupiah(nilaiPulsa);
            }else {
                const nilaiVa = parseFloat(nilaiJumlah) + 5000;
                element.textContent = formatRupiah(nilaiVa);
            }
        });
    }
});

function formatRupiah(angka) {
    var reverse = angka.toString().split('').reverse().join(''),
        ribuan = reverse.match(/\d{1,3}/g);
    ribuan = ribuan.join('.').split('').reverse().join('');
    return 'Rp ' + ribuan;
}

    </script>







<?php echo $__env->make('../footer', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>

<?php $__env->startPush('custom_script'); ?>



<?php $__env->stopPush(); ?>




<?php $__env->stopSection(); ?>
<?php echo $__env->make('template.template', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/u870822285/domains/tokovouchergame.com/public_html/project/resources/views/template/deposit.blade.php ENDPATH**/ ?>