@extends('layouts.app1')

@section('content')

<!-- page content -->
<div class="right_col" role="main">
	@include('flashmessage')
	@if ($message = Session::get('success'))
	<div class="alert alert-info alert-block">
        <button type="button" class="close" data-dismiss="alert">×</button>
        <center><h2>Complete Your Payment</h2><h3 id="demo"></h3></center>
    </div>
    @endif
          <div class="">
            <div class="page-title">
              <div class="title_left">
                <h3>QR Code</h3>
              </div>

              
            </div>
            
            <div class="clearfix"></div>

            <div class="panel-body">
            
            </div>

           
                
                       <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;
  }
</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;
      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