@extends('layout.front.app',[
'title' => Config::get('constants.SITE_NAME')
])

@section('content')

<style>
    .form-control:focus {
        box-shadow: none;
        border-color: #BA68C8
    }

    .profile-button {
        background: rgb(99, 39, 120);
        box-shadow: none;
        border: none
    }

    .profile-button:hover {
        background: #682773
    }

    .profile-button:focus {
        background: #682773;
        box-shadow: none
    }

    .profile-button:active {
        background: #682773;
        box-shadow: none
    }

    .back:hover {
        color: #682773;
        cursor: pointer
    }

    .labels {
        font-size: 11px
    }

    .add-experience:hover {
        background: #BA68C8;
        color: #fff;
        cursor: pointer;
        border: solid 1px #BA68C8
    }

    .error {
        color: #ff0000;
        font-size: 15px;
        width: 100%;
    }
</style>
<div class="register-page">
        <div class="show-amo">
            <div class="my-atmcard-wall">
                <h4>Available Balance <span>{{ $userWalletAmount }}</span></h4>
            </div>
        </div>
    <h4 style="color:green;">Minimum Add Amount : <i class="fa fa-inr" aria-hidden="true"></i>{{ $minAddWalletAmount }}.</h4>
    <div class="user-form">
        <div class="">
            <form name="addWalletAmountForm" class="user userForm" enctype="multipart/form-data" method="POST" action="{{ route('add-amount') }}">
                @csrf
                <div class="">
                    <div class="border-right">
                        <div class=" py-5">
                        <div id="QrCodeDiv">
                             <p>Please take your payment screenshot and attach it with next step form.</p>
                             
                            <div class="qr_upi">UPI : <div id="textToCopy">{{ Config::get('constants.UPI_ID') }}</div> <span id="copyButton"><i class="fa fa-clone"></i> <span id="copyResult"></span></span>
                            </div>
                            <div class="qr_or">
                           
                            <img style="width: 100%;" src="{{ asset('images/qr_code.jpeg') }}" />
                            </div>
                            </div>
                            <div class="row mt-3">
                                <div class="col-md-12">
                          
                                    <input type="text" class="form-control" placeholder="Enter Amount" name="amount" id="amount">
                                </div>
                            </div>

                            <div class="row mt-3">
                                <div class="col-md-12">
                                    <label class="attached-ss">Attached Payment Screenshot<span class="requiredcls">*</span></label>
                                    <input type="file" onchange="readURL(this);" name="payment_schreenshot" class="form-control"  id="payment_schreenshot" />
                                    <img id="imagePre" src="#" alt="your image" style="width: 250px; display:none;" />
                                </div>
                            </div>

                            <div class="row mt-3">&nbsp;</div>
                            <div class="mt-5 text-center">
                                <button class="btn btn-primary profile-button" type="submit" id="addWalletAmountBtn">Submit</button>
                                <div style="color:green; display:none; text-align:center;" id="pleaseWaitMsg"><b>Please Wait...</b></div><br /><br />
                            </div>
                            <br>
                        </div>
                        
                    </div>
                    <div class="col-md-4">
                    </div>
                </div>
            </form>
        </div>
    </div>
    

</div>
</div>
</div>
<script>
 const answer = document.getElementById("copyResult");
const copy   = document.getElementById("copyButton");
const selection = window.getSelection();
const range = document.createRange();
const textToCopy = document.getElementById("textToCopy")

copy.addEventListener('click', function(e) {
    range.selectNodeContents(textToCopy);
    selection.removeAllRanges();
    selection.addRange(range);
    const successful = document.execCommand('copy');
    if(successful){
      answer.innerHTML = 'Copied!';
    } else {
      answer.innerHTML = 'Unable to copy!';  
    }
    window.getSelection().removeAllRanges()
});
</script>
@stop