<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
    
    <style>
        html {
            height: 100%;
            font-size: calc(100vw/375 * 16);
        }
        
        .g-navigation {
            height: 2.75rem;
            --tw-text-opacity: 1;
            color: rgb(31 41 55/var(--tw-text-opacity));
            --tw-bg-opacity: 1;
            background-color: rgb(255 255 255/var(--tw-bg-opacity));
            font-weight: 600;
            position: sticky;
            top: 0;
            left: 0;
            right: 0;
            z-index: 10;
            text-transform: capitalize;
        }
        
        .g-input-wrapper {
            height: 3rem;
            border-radius: .5rem;
            --tw-bg-opacity: 1;
            background-color: rgb(247 247 247/var(--tw-bg-opacity));
            --tw-text-opacity: 1;
            color: rgb(17 24 39/var(--tw-text-opacity));
        }

        .g-input-wrapper {
            align-items: center;
            border-width: 0;
            padding-left: .5rem;
            padding-right: .5rem;
            padding-top: .125rem;
            padding-bottom: .125rem;
            --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
            --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
            box-shadow: var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);
            --tw-ring-inset: inset;
            --tw-ring-opacity: 1;
            --tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity));
        }
        
        
        .CyTkEN1xjqEv7O2K4pBA {
            --tw-border-opacity: 1 !important;
            border-color: rgb(30 146 100/var(--tw-border-opacity))!important;
            --tw-bg-opacity: 1;
            background-color: rgb(220 252 231/var(--tw-bg-opacity));
        }
        
        .g-button {
            height: 2.5rem;
            font-size: .875rem;
            font-weight: 600;
            line-height: 1.5rem;
            --tw-text-opacity: 1;
            color: rgb(255 255 255/var(--tw-text-opacity));
            text-transform: capitalize;
            border-radius: 2666.4vw;
        }

        .g-button-bg {
            background-image: linear-gradient(to bottom,var(--tw-gradient-stops));
            --tw-gradient-from: #017946 var(--tw-gradient-from-position);
            --tw-gradient-to: rgb(1 121 70 / 0) var(--tw-gradient-to-position);
            --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
            --tw-gradient-to: #0CAD49 var(--tw-gradient-to-position);
        }
    </style>
</head>

<body>
    <div id="app">
        <header
            class="g-navigation grid grid-cols-12 overflow-hidden backdrop-blur bg-white/95 ">
            <div class="col-span-2 flex items-center justify-center">
                <a href="/" class="px-2 py-1"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"
                        class="w-5 h-5 font-bold">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5"></path>
                    </svg></a>
            </div>
            <div class="col-span-8 flex items-center justify-center">
                <div class="text-ellipsis overflow-hidden whitespace-nowrap">আমানত</div>
            </div>
            <div class="col-span-2 flex items-center justify-end pr-5 text-sm text-right font-medium"><a
                    href="/deposit/record" class="capitalize text-gray-500 inactive" link="">রেকর্ড করুন</a></div>
        </header>
        <div class="px-5 pb-5">
            <h5 class="my-5 font-semibold">আমানতের পরিমাণ</h5>
            <div class="grid grid-cols-3 gap-3 mb-5">
                <div class="relative h-12 flex items-center justify-center rounded-lg border-2 border-transparent deposit-page-content-amount-choose-item CyTkEN1xjqEv7O2K4pBA"
                    data-text="0" onclick="getAmount(this, 600)">600</div>
                <div class="relative h-12 flex items-center justify-center rounded-lg border-2 border-transparent bg-[#F5F9F7] deposit-page-content-amount-choose-item"
                    data-text="0" onclick="getAmount(this, 1600)">1,600</div>
                <div class="relative h-12 flex items-center justify-center rounded-lg border-2 border-transparent bg-[#F5F9F7] deposit-page-content-amount-choose-item"
                    data-text="0" onclick="getAmount(this, 4500)">4,500</div>
                <div class="relative h-12 flex items-center justify-center rounded-lg border-2 border-transparent bg-[#F5F9F7]  deposit-page-content-amount-choose-item"
                    data-text="0" onclick="getAmount(this, 12000)">12,000</div>
                <div class="relative h-12 flex items-center justify-center rounded-lg border-2 border-transparent bg-[#F5F9F7] deposit-page-content-amount-choose-item"
                    data-text="0" onclick="getAmount(this, 18000)">18,000</div>
                <div class="relative h-12 flex items-center justify-center rounded-lg border-2 border-transparent bg-[#F5F9F7] deposit-page-content-amount-choose-item"
                    data-text="0" onclick="getAmount(this, 30000)">30,000</div>
                <div class="relative h-12 flex items-center justify-center rounded-lg border-2 border-transparent bg-[#F5F9F7] deposit-page-content-amount-choose-item"
                    data-text="0" onclick="getAmount(this, 60000)">60,000</div>
                <div class="relative h-12 flex items-center justify-center rounded-lg border-2 border-transparent bg-[#F5F9F7] deposit-page-content-amount-choose-item"
                    data-text="0" onclick="getAmount(this, 100000)">100,000</div>
                <div class="relative h-12 flex items-center justify-center rounded-lg border-2 border-transparent bg-[#F5F9F7] deposit-page-content-amount-choose-item"
                    data-text="0" onclick="getAmount(this, 200000)">200,000</div>
            </div>
            <!--<form novalidate="">-->
                <div class="relative">
                    <div class="mb-1">
                        <div class="g-input-wrapper flex flex-1 w-full box-border undefined"><label
                                class="flex items-center justify-center" for="1709615236">
                                <div class="px-3 text-lg text-primary font-bold">BDT</div>
                            </label><input name="amount" value="600" placeholder="রিচার্জের পরিমাণ লিখুন" type="number" id="1709615236"
                                class="block px-2 flex-1 h-full text-gray-900 placeholder:text-gray-400 box-border bg-transparent overflow-hidden"><a
                                class="block"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                    stroke-width="2.2" class="w-7 h-7 px-1 text-gray-400">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12">
                                    </path>
                                </svg></a></div>
                        <div class="error-message"></div>
                    </div>
                </div>
                <h5 class="my-3 font-semibold">পেমেন্ট চ্যানেল</h5>
                <div class="grid gap-2">
                    <?php $__currentLoopData = \App\Models\PaymentMethod::get(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $element): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <label class="h-12 pl-4 pr-5 flex items-center rounded-lg border-2 border-gray-100"><img
                            src="https://like-oss.s3-accelerate.amazonaws.com/cashmaple-bd/cp7fdj43vitc738fia30.ico"
                            class="w-7 h-7 object-contain" alt="img">
                            <input type="radio" name="methods" value="<?php echo e($element->id); ?>" />
                            <span class="mx-3 flex-1"><?php echo e($element->name); ?></span>
                        <div
                            class="w-5 h-5 rounded-full outline outline-2 -outline-offset-2 outline-gray-300 bg-primary !outline-0">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"
                                class="w-full h-full p-0.5 text-white">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path>
                            </svg></div>
                    </label>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    
                </div><button type="submit" onclick="go_payment()"
                    class="g-button flex items-center justify-center g-button-bg w-full uppercase mt-10" >অবিলম্বে জমা
                    করুন</button>
            <!--</form>-->
            <div class="ql-snow pt-5">
                <article class="ql-editor p-0">
                    <p>একটি ব্যাঙ্ক অ্যাকাউন্টে টপ আপ করবেন না.&nbsp;আপনি যদি একাধিক অর্থপ্রদান করতে চান, একটি নতুন
                        ব্যাঙ্ক অ্যাকাউন্ট পেতে অনুগ্রহ করে এই পৃষ্ঠায় ফিরে যান।</p>
                    <p>1: হোম পেজে যান, রিচার্জে ক্লিক করুন এবং আপনি যে পরিমাণ রিচার্জ করতে চান তা লিখুন।&nbsp;ন্যূনতম
                        জমার পরিমাণ 600</p>
                    <p>2: ব্যবহারকারী পেমেন্ট তথ্য পৃষ্ঠায় প্রবেশ করার জন্য পদক্ষেপগুলি অনুসরণ করে।&nbsp;পৃষ্ঠায় আমরা
                        যে ব্যাঙ্ক প্রদান করি তা নির্বাচন করুন, আমরা পছন্দ করি যে আপনি আপনার স্থানান্তরের জন্য একই
                        ব্যাঙ্ক ব্যবহার করুন।</p>
                    <p>3: তারপর আপনি আমাদের আমানত ব্যাংকের অফিসিয়াল তথ্য দেখতে পাবেন।&nbsp;অনুগ্রহ করে এই তথ্যটি আপনার
                        ব্যাঙ্কের ওয়েবসাইট বা আবেদনপত্রে অনুলিপি করুন এবং প্রাপকের জন্য এটি পূরণ করুন।</p>
                    <p>4: একবার স্থানান্তর সম্পূর্ণ হলে, পরিমাণটি অবিলম্বে আপনার ExxonMobil অ্যাকাউন্ট ব্যালেন্সে যোগ
                        করা হবে।</p>
                    <h4>5: যদি আপনার আমানত সময়মতো আপনার অ্যাকাউন্টের ব্যালেন্সে প্রতিফলিত না হয়, অনুগ্রহ করে সময়মতো
                        অফিসিয়াল গ্রাহক পরিষেবার সাথে যোগাযোগ করুন।&nbsp;আমরা দ্রুত আপনার সমস্যার সমাধান
                        করব।&nbsp;গ্রাহক পরিষেবা সময়মতো আপনার প্রশ্নের উত্তর না দিলে, অনুগ্রহ করে ধৈর্য ধরে অপেক্ষা
                        করুন।</h4>
                </article>
            </div>
        </div>
    </div>
    
    <?php echo $__env->make('alert-message', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
    <script>
        function getAmount(_this, amount){
            document.querySelector('input[name="amount"]').value = amount;
    
            var elements = document.querySelectorAll('.deposit-page-content-amount-choose-item');
            for (let i=0;i<elements.length;i++){
                if (elements[i].classList.contains('CyTkEN1xjqEv7O2K4pBA')){
                    elements[i].classList.add('bg-[#F5F9F7]')
                    elements[i].classList.remove('CyTkEN1xjqEv7O2K4pBA')
                }
            }
            _this.classList.remove('bg-[#F5F9F7]')
            _this.classList.add('CyTkEN1xjqEv7O2K4pBA')
        }
    
    
        function go_payment(){
            var inputValue = document.querySelector('input[name="amount"]').value;
            var methods = document.querySelector('input[name="methods"]:checked').value;
            
            if (methods == ''){
                message("Select payment channel");
                return 0;
            }
    
            if(inputValue <= 25000 && inputValue >= 1){
                window.location.href='<?php echo e(url('user/payment')); ?>'+"/"+inputValue+"/"+methods
            }else{
                message('সঠিক পরিমাণ লিখুন.');
            }
        }
    </script>
</body>

</html>


<?php /**PATH /home/xma/bdsite1.xm-a.pw/resources/views/app/main/recharge/index.blade.php ENDPATH**/ ?>