@extends('new_layouts.app')
@section('content')
<!-- Add this in the head section of your HTML -->
<script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>

    <style>
        .amount-input {
            font-size: 28px;
            color: #cbc6c6;
        }

        .amount-input::placeholder {
            font-size: 28px;
            color: #cbc6c6;
        }
        .qr-code img{
                    display: inline-block !important;
                  }
      
   header .osahan-header{
        display:none!important;
    }
    @media screen and (min-width:768px){
          .qr-code img{
                  
          
                height: 200px;
    width: 200px;
        }
    }

    </style>
    <div class="notification d-flex flex-column vh-100">
<div class="d-flex  main-head align-items-center justify-content-between mb-auto p-3  shadow-lg osahan-header">
            <a href="javascript: history.go(-1)" class="text-white icon back-arrow">
            <img width="12" height="12" src="https://img.icons8.com/ios-filled/50/FFFFFF/back.png" alt="back"></a>
            <h6 class="w-100 text-center fw-bold text-white">Add Cash</h6>
          
         </div>
    <div class="vh-100 my-auto overflow-auto body-fix-osahan-footer ">
        <div class="home d-flex flex-column vh-100  overflow-auto container addcash">
            <div class="container mt20">
                <form action="{{ route('storeaddcash') }}" method="post">
                    @csrf
                    <span class="text-danger">{{ $errors->first('amount') }}</span>
                    <div class="bg-grey rounded-3 p-3 text-center">
                        <label class=" mt10" style="font-size: 25px;color: #cbc6c6;" for="lname">Enter Amount</label>
                        <input type="text" class="mt-3 amount-input  " value="0" name="amount" id="amountInput" required="" placeholder="Enter Amount" style="    border-bottom: 1px solid #fff;
    background: #282626;">
                    </div>
                    <div class="bg-grey rounded-3 p-3 text-center">
                        <label class=" mt10" style="font-size: 25px;color: #cbc6c6;" for="lname">Enter Transaction Id</label>
                        <input type="text" class="mt-3 d-block bg-grey w-100  p-2" style="     border-bottom: 1px solid #fff!important;
    background: #282626;
    outline: unset;
    border: 0;
    text-align: center;" name="transaction_id"  required="" placeholder="Enter Transaction ID here">
                        <span class="greenbtn mt-5 mb-4 ">
                            100% Safe & Secure
                        </span>
                    </div>

                    <button type="submit"
                        class="payamount btn yellow-common-btn text-dark sm-btn mt-3 mb-5 m-auto d-block d-none"
                        style="width: fit-content;" id="submit">Request Now for Approval</button>
                </form>

                <button id="generateQrCodeBtn" class="payamount btn yellow-common-btn text-dark sm-btn mt-3 mb-5 m-auto d-block">Generate QR Code</button>


                <div class="card-box text-center" >
                    <div style="margin-top:2%; " class="qr-code" id="qr-code-container">
                        <!-- Placeholder for QR Code -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var amountInput = document.getElementById('amountInput');
            var generateQrCodeBtn = document.getElementById('generateQrCodeBtn');
            var payNowBtn = document.getElementById('submit');
    
            generateQrCodeBtn.addEventListener('click', function () {
                // Fetch the amount from the input field
                var amount = amountInput.value;
    
                // Check if the amount is 0
                if (amount === '0') {
                    alert('Amount cannot be 0 to generate QR code.');
                    return;
                }
    
                // Generate the UPI intent URL
                var upi = 'shikshaacademy.62717832@hdfcbank';
                var upi_intent = 'upi://pay?pa=' + upi + '&pn=Payment&am=' + amount + '&cu=INR';
    
                // Ensure that the QR code container is properly initialized
                var qrCodeContainer = document.getElementById('qr-code-container');
                if (!qrCodeContainer) {
                    console.error('QR code container not found.');
                    return;
                }
    
                // Generate and display the QR code
                qrCodeContainer.innerHTML = '';
                var qrcode = new QRCode(qrCodeContainer, {
                    text: upi_intent,
                    width: 128,
                    height: 128,
                });
    
                // Hide "Generate QR Code" button
                generateQrCodeBtn.classList.add('d-none');
    
                // Show "Pay now" button
                payNowBtn.classList.remove('d-none');
            });
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var amountInput = document.getElementById('amountInput');
    
            amountInput.addEventListener('input', function () {
                // Remove any non-digit characters
                var sanitizedValue = this.value.replace(/\D/g, '');
    
                // Ensure the value doesn't start with 0
                if (sanitizedValue.length > 1 && sanitizedValue.charAt(0) === '0') {
                    sanitizedValue = sanitizedValue.slice(1);
                }
    
                // Update the input value
                this.value = sanitizedValue;
            });
        });
    </script>
    
@endsection