<!DOCTYPE html>
<html>
	<head>
<title><?php echo $SITE_NAME;?></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>												<head>
  <style>
.bg-1 {
	background-color: #337ab7;
	color: #ffffff;
	min-height: 300px;
}

.bg-1 h3 {
	padding: 0px 0px 0px 0px
}

.bg-2 {
	background-color: #ffffff;
	color: #000000;
	border: 1px solid #999;
	border-radius: 8px;
	padding: 10px;
	margin: -35px 10px 10px 10px;
}

.bg-2 p {
	font-size: 14px;
}

.bg-3 {
	background-color: #ffffff;
	color: #000000;
	border: 1px solid #999;
	border-radius: 8px
}

.rupee {
	font-size: 45px;
	padding: 0px 0px 10px 0px;
	font-weight: 700;
}

.textt {
	font-size: 18px;
	color: #fff
}

.tick {
	padding-top: 30px;
}

.float-left {
	float: left
}

.float-right {
	float: right
}

.widthright65 {
	min-width: 65%;
	text-align: right;
}

.widthleft124 {
	width: 124px;
	text-align: left;
}

.pdr0 {
	padding-right: 0px;
}

.ptb0 {
	padding-top: 10px;
	padding-bottom: 10px
}

.ammt{ 
    width:10%; 
	font-size: 40pt;
	font-weight: 700;
	text-align: center;
	color:green;

}


.ammt:focus {
	border: none;
}
.amtdisplay {
	color: #000000;
	font-size: 12pt !important;
	font-style: italic;
	font-weight: 700 !important;
	max-width: 324px;
	text-align: center;
	margin: 0 auto;
}

.btn {
	background: #088cff !important;
	color: #fff;
	font-size: 12px;
	margin-top: 10px
}

.cpbtn {
	width: 80%;
	font-weight: bold
}

.dpay {
	font-size: 12pt;
	font-weight: 700;
	padding-top: 60px
}

.addmsg {
	font-size: 12pt;
	position: relative;
	padding-top: 40px;
	border: none;
	background: none;
}

.dname {
	font-weight: bold;
	font-size: 20pt;
}
input:focus {
    outline: none;
    border: none;
}
  </style>
<script src="<?php echo ROOTPATH;?>/jquery/jquery-1.11.1.min.js"></script>
<script src="<?php echo ROOTPATH;?>/jquery/jquery.validate.js"></script> 
<script src="<?php echo ROOTPATH;?>/view/js/jquery-ui.js"></script>        

<script>
                            
                         
var a = ['','One ','Two ','Three ','Four ', 'Five ','Six ','Seven ','Eight ','Nine ','Ten ','Eleven ','Twelve ','Thirteen ','Fourteen ','Fifteen ','Sixteen ','Seventeen ','Sighteen ','Nineteen '];
var b = ['', '', 'twenty','thirty','forty','fifty', 'sixty','seventy','eighty','ninety'];

function inWords (num) 
{
    if ((num = num.toString()).length > 9) return 'overflow';
    n = ('000000000' + num).substr(-9).match(/^(\d{2})(\d{2})(\d{2})(\d{1})(\d{2})$/);
    if (!n) return; 
    
    var str = '';
    str += (n[1] != 0) ? (a[Number(n[1])] || b[n[1][0]] + ' ' + a[n[1][1]]) + 'crore ' : '';
    str += (n[2] != 0) ? (a[Number(n[2])] || b[n[2][0]] + ' ' + a[n[2][1]]) + 'lakh ' : '';
    str += (n[3] != 0) ? (a[Number(n[3])] || b[n[3][0]] + ' ' + a[n[3][1]]) + 'thousand ' : '';
    str += (n[4] != 0) ? (a[Number(n[4])] || b[n[4][0]] + ' ' + a[n[4][1]]) + 'hundred ' : '';
    str += (n[5] != 0) ? ((str != '') ? 'and ' : '') + (a[Number(n[5])] || b[n[5][0]] + ' ' + a[n[5][1]]) + '' : '';
    str1 = "₹ "+str+ " only ";
    return str1;
}

 </script>
<script>

       function functionCalled()
        {    
          
             window.location.href = "dt3.php?UPI="+$("#UPI").val()+"&name="+$("#PayId").val()+"&amont="+$("#AMMT").val();  
        }   
        
    
    $(document).ready(function()
    {        
        
            $("#AMMT").css("width", "20%");   
            $('#AMMT')[0].focus();  
            document.getElementById('AMMT').onkeyup = function () 
            {
                  length = ($("#AMMT").val()).length;
                  if(length==1)
                    $("#AMMT").css("width", "10%");
                  else if(length==2)
                    $("#AMMT").css("width", "20%");
                else if(length==3)
                    $("#AMMT").css("width", "30%");
                else if(length==4)
                    $("#AMMT").css("width", "40%");
                else if(length==5)
                    $("#AMMT").css("width", "50%");    
                  
                  document.getElementById('AmountDisplay').innerHTML = inWords(document.getElementById('AMMT').value);   
                  
            };  
            
                    
    });          
    
    function fca()
    {
        // var Val1 = document.getElementById('AMMT').value;     
       //  $("#AMMT").val("₹ "+Val1);
    }
    
</script>
    
</head>

<body>

<div class="container-fluid text-center">
  <div class="container-fluid text-center"><img src="<?php echo ROOTPATH;?>/images/dpmoblogo.png" width="60px" class="tick"></div>
  <h3 class="dname"><?php echo $_REQUEST['name'];?>  </h3>
 <div class="container-fluid text-center ptb0">    <?php echo $_REQUEST['UPI'];?></div>
<div class="inputWrapper" id='some-inputs'> 
			 
        <span style="
    margin-left: 0px;
    margin-top: 0px;
    font-size: 20pt;
    font-weight: 700;
    position: relative;top:-30px">₹</span> <input type="text" id="AMMT" name="AMMT" class="ammt" />
          </div>
<div class="container-fluid text-center ptb0 amtdisplay" id="AmountDisplay"> </div>
<div class="container-fluid text-center"><button class="addmsg">Add a Message</button></div>
<div class="dpay">From Dailypay <span style="font-size:12pt"><img src="down-arrow.png"></span></div>
<a href="#" class="btn btn-secondary cpbtn" id="SubmitUserPin" onclick="functionCalled();">Confirm Payment</a> 

        <input type="hidden" value="<?php echo $_REQUEST['UPI'];?>" id="UPI"/>
        <input type="hidden" value="<?php echo $_REQUEST['name'];?>" id="PayId"/>
        
</div>



</body>
</html>
													</html>