@extends('layouts.app1')

@section('content')

<!-- page content -->
<div class="right_col" role="main">    
          <div class="">          
           
                
            <div class="row justify-content-center">
                       <div class="col-md-4 text-center" style="height:auto;background:#fff;width:460px">
                         <input type="hidden" value="upi://pay?pa=diosmf@icici&pn={{urlencode($userDetails['name'])}}&tr=MNO2021{{urlencode($userDetails['loginId'])}}&cu=INR&mc=5411&tn={{urlencode($userDetails['sname'])}}" id="url"  />
                            <div id="generateImg" style="border:1px solid;text-align:center;">
                                <img src="data:image/jpg;base64," style="width: 100%;" />                            
                                    <canvas id="qrcode-2" class="qrcode"></canvas>
                                <br/>
                                <h4> {{urlencode($userDetails['name'])}} ( {{urlencode($userDetails['sname'])}} ) </h4>
                                <img src="data:image/jpg;base64," style="width: 100%;" />
                            </div>
                            <button id="generateimgB" type="button" class="btn btn-info">Generate Image</button>
                     
                        </div>
                        </div>
                       
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- /page content -->
<style>
  .fade:not(.show){
    opacity: 1;
  }
  .nav_menu, footer{
    display: none;
  } 
  .modal-dialog{
    margin: 30px auto!important;
  }
</style>
@endsection


@section('footerscript')

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
    <script>
        $(function () {
            $("#generateimgB").click(function () {
                html2canvas($("#generateImg"), {
                     allowTaint: false,
                     useCORS: false,
                    onrendered: function (canvas) {
                        //var textBox = $.trim($('input[type=text]').val())
                        var imgsrc = canvas.toDataURL("image/png");
                            console.log(imgsrc);
                            var doc = new jsPDF('p', 'mm', [297, 210]); //210mm wide and 297mm high
                
                            doc.addImage(imgsrc, 'PNG', 0, 0, 210, 297);
                            doc.save('sample.pdf');
                        }
                         
                });
                $("#generateImg").css('background', '#fff')
            });
        });
    </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
  <script type="text/javascript">    
   window.onload = generateQRCode;
    function generateQRCode() { //alert('Ok1');
      let website = document.getElementById("url").value;
      // alert(website);
      if (website) { //alert(website);
        let qrcodeContainer2 = document.getElementById("qrcode-2"); 
        qrcodeContainer2.innerHTML = "";
        new QRious({
          element: qrcodeContainer2,
          size: 300,
          value: website
        });
        document.getElementById("qrcode-container").style.display = "block";
      } else {
        alert("Please enter a valid URL");
      }
    }
    /* function getprint(){
        var canvas = document.getElementById('qrcode-2');
        var data = canvas.toDataURL();
        document.getElementById('link').href = data;
        //alert(data);
    } */
  </script>
@endsection