Current File : //home/obabain/khb_obaba_in/PaymentVoucherNew.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
    <%@ include file="Connection.jsp" %>
      <%
Statement st=con.createStatement();
ResultSet rs = null;
%>
<%!
String particular=null;
Double paid_amt=0.00;
double amt=0.00;
%>
    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"  rel="stylesheet">
 
    <link href="css/select2.min.css" rel="stylesheet">
    <link href="css/jquery.datetimepicker.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"  rel="stylesheet">
 
    <link href="css/select2.min.css" rel="stylesheet">
    <link href="css/jquery.datetimepicker.css" rel="stylesheet">
     <style>
     .otherch{display:none;}
     </style> 
  
 
    <script language="javascript" type="text/javascript">  
      var xmlHttp  
      var xmlHttp
      function showState(str){
      if (typeof XMLHttpRequest != "undefined"){
      xmlHttp= new XMLHttpRequest();
      }
      else if (window.ActiveXObject){
      xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");
      }
      if (xmlHttp==null){
      alert("Browser does not support XMLHTTP Request")
      return;
      } 
      var url="state.jsp";
      url +="?count=" +str;
      xmlHttp.onreadystatechange = stateChange;
      xmlHttp.open("GET", url, true);
      xmlHttp.send(null);
      }

      function stateChange(){   
      if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){   
      document.getElementById("state").innerHTML=xmlHttp.responseText   
      }   
      }

      function showCity(str){
      if (typeof XMLHttpRequest != "undefined"){
        xmlHttp= new XMLHttpRequest();
        }
      else if (window.ActiveXObject){
        xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");
        }
      if (xmlHttp==null){
      alert("Browser does not support XMLHTTP Request")
      return;
      } 
      var url="city.jsp";
      url +="?count=" +str;
      xmlHttp.onreadystatechange = stateChange1;
      xmlHttp.open("GET", url, true);
      xmlHttp.send(null);
      }
      function stateChange1(){   
      if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){   
      document.getElementById("city").innerHTML=xmlHttp.responseText   
      }   
      }
      </script>  
</head>
<body>
<%@include file="master.jsp" %>
<script>
function checkExist(){
    var xmlhttp = new XMLHttpRequest();
    var username = document.forms["pv"]["payno"].value;
    var url = "payvouchExist.jsp?username=" + username;
    xmlhttp.onreadystatechange = function(){
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
            if(xmlhttp.responseText == "Duplicate Voucher No.")
                document.getElementById("isE").style.color = "red";
            else
                document.getElementById("isE").style.color = "green";
            document.getElementById("isE").innerHTML = xmlhttp.responseText;
        }
        
    };
    
    xmlhttp.open("GET",url,true);
    xmlhttp.send();

}
</script>
<form action="PaymentVoucherNewDA.jsp" name="pv">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="content">
 <div class="row" style="width:90%">
    <div class="col-md-9" >
       <div class="panel panel-default" >
       <div class="panel-heading main-color-bg">
        <h3 class="panel-title">Payment Voucher creation</h3>
    </div>
    <div class="pull-right" style="padding:5px 10px 0px 0px;">
    <a class="btn btn-primary" href="ViewPaymentVouchers.jsp">View Payment Vouchers</a> 
     <a class="btn btn-primary" href="Receiptvoucher.jsp">Receipt</a>
     <a class="btn btn-primary" href="Contravoucher.jsp">Contra</a>
     <a class="btn btn-primary" href="Journalvoucher.jsp">Journal</a> 
    <!--  <a class="btn btn-danger" href="SalesVoucher.jsp">Sales</a>
     <a class="btn btn-danger" href="PurchaseVoucher.jsp">Purchase</a> -->
     </div>
      <div style="padding:5px 0px 0px 10px;"><a  class="cash btn btn-danger">Cash</a>
      <a  class="cheq btn btn-danger">Cheque</a></div>
     <hr>
     <div class="panel-body" > 
     <div class="row" >    
       <div class="col-xs-3">
          <label for="lastname" style="margin-left:5px; color:red;">Payment No.</label> 
          <input type="text" name="payno" class="form-control" onblur="checkExist()" id="payno">
          <span id="isE"></span>
          </div>  
          <div class="col-xs-2 pull-right">
          <label for="lastname" style="margin-left:5px;">Date</label> 
          <input type="text" name="paydate" class="form-control" id="datetimepicker"> 
          </div> 
          <div class="col-xs-3">
       <label for="lastname" style="margin-left:5px;"> Account</label>
       <select class="select1 form-control" name='account' id="campInput" style="width:100%;" >
                <option value="0">select</option>
          <%
          rs=st.executeQuery("select * from account_ledger where (under = 17 or under=16 or under= 15) and branch_id="+loginid+" order by ledger_name asc");
          while(rs.next())
          {
          %>          
          <option value="<%=rs.getString("l_id") %>"><%=rs.getString("ledger_name") %></option>
          <%} %>
                </select>
       </div>    
       </div>
     
     <br>
     <div class="chq row"> 
      <div class="col-xs-3">
      <label for="lastname" style="margin-left:5px;">Cheque No.</label>
      <input type="text" name="chqno" class="chqno form-control">
      </div>
      <div class="col-xs-3">
     <label for="lastname" style="margin-left:5px;"> Cheque Date</label>
      <input type="text" name="chqdate" class="form-control" id="datetimepicker2">
      </div>
      <!-- <div class="col-xs-3">
      Cross Using
      <input type="text" name="chqcross" class="form-control">
      </div> -->
     </div><br>
      <div class="row" >  
     <div class="col-xs-3">
     <label for="lastname" style="margin-left:5px;">Particular</label>
     <select name='country' onchange="showState(this.value)" class="select1 form-control">  
       <option value="none">Select</option>  
    <%
 rs = st.executeQuery("select * from account_ledger where under = 17 or under=16 or under= 15 order by ledger_name asc");
 while(rs.next()){
     %>
      <option value="<%=rs.getString("l_id")%>"><%=rs.getString("ledger_name")%></option>  
      <%
 }
     %>
      </select> 
      </div> 
        <div class="col-xs-3">
        <label for="lastname" style="margin-left:5px;">Amount</label>
        <input type="text" class="gtot form-control" name="gtotal">
        
        <input type="hidden" name="total" class="total form-control" value="0">
        
        </div>
        
        
        </div>
        <br>
        <table class="table  table-hover additionalMargin alignment" id="table1">
        <thead>
        <tr class="info">
        <th>Bills ( Date |  No. | Due Amt.)</th><th style=text-align:right;">Amount</th><th></th>
        </tr>
        </thead>
        <tbody>
        <tr class="otherch">
        
        <td  style="width:50%;">
        <div class="row">
        <div  class="col-md-4" style="width:100%;"> 
        <input type="hidden" name="comm[]" value="0" class="comm"> 
        <input type="hidden" value="O" name="typ[]" class="otherval">
        
        <select class="selectother form-control" name="state[]" style="width:60%;">
        <option value="0">select</option>
          <%
          rs=st.executeQuery("select * from account_ledger where branch_id="+loginid+" order by ledger_name asc");
          while(rs.next())
          {
          %>          
          <option value="<%=rs.getString("l_id") %>"><%=rs.getString("ledger_name") %></option>
          <%} %>
        </select>           
        </div>
        </div>
        </td>
        <td align="right">
        <div class="row">
        <!-- <div class="col-md-1">(-)</div> -->
        <div  class="col-md-4" style="width:100%;">  
        <input type="text" class="otherchrg form-control" value="0" name="billamt[]" style="width:51%;">
        </div>
        </div>
        </td>
        <td><a href='#'  onclick='deleteRow(this)'><i class='glyphicon glyphicon-trash'></a></td>
        </tr>
    <tr class='template'>
    
    <td style="width:50%;">
        <div class="row">
        
      <div id='state' class="col-md-4" style="width:100%;"> 
      <input type="hidden" name="comm[]" value="0">  
      <input type="hidden" value="B" name="typ[]" class="bill"> 
      <select name='state[]'  class="selectType form-control" style="width:60%;">  
      <option value='-1'>select</option>  
      </select>  
      </div>  
</div>
</td>

<td style="width:45%;" align="right">
<input type="text" class="amt form-control" name="billamt[]" value="0" style="width:51%;">
</td>
<td><a href='#'  onclick='deleteRow(this)'><i class='glyphicon glyphicon-trash'></a></td>
</tr>
</table>
<div class="pull-right col-xs-3" style="margin-right: 44px;">
        <label for="lastname">Amount balance</label>
        <input type="text" name="balance" class="bal form-control" value="0"></div>
<div class="bankdiv row" >   
          <div class="col-xs-3">
         <!--  <label for="lastname" style="margin-left:5px;">Bank</label> -->
           <select class="select1 form-control" name='bank' id="bank" style="width:100%;" >
                <option value="0">select Bank</option>
          <%
          rs=st.executeQuery("select * from account_ledger where branch_id='"+loginid+"' order by ledger_name asc");
          while(rs.next())
          {
          %>          
          <option value="<%=rs.getString("l_id") %>"><%=rs.getString("ledger_name") %></option>
          <%} %>
                </select>
          </div>         
          
          <div class="col-xs-3">
          <input type="text" name="chrg" class="bnkch form-control" placeholder="Charges" value="0">
          
            </div>
          </div><br>
          <div class="col-xs-1" style="padding-right:80px;">
<a id='add' class="pull-left btn btn-default">ADD BILL</a></div>


<div class="col-xs-4">
<!-- <input type="button" id="addc" class="addc pull-left btn btn-default" value="Other Charges"></div> -->
<a id='addother' class="pull-left btn btn-default">Add othercharges</a></div>
<br> 
<hr>

<div class="row" >   
          <div class="col-xs-4">
          <label for="lastname" style="margin-left:5px;">Narration</label>
          <textarea name="narr" class="form-control"></textarea>   
          </div>
          <div class="pull-right col-xs-3" style="margin-right:55px;">
           <label for="lastname" style="margin-left:5px;">Total Amount</label>
          <input type="text" name="total2" class="total2 form-control" value="0" placeholder="Total Amount">
          
          </div>
            </div> </div> <br>
     <div class="modal-footer" id="contact_submit">
         <input type="button" value="Back" style="background:#204b58;" class="pull-left btn btn-info"  onclick="goBack()"/>
          <a class="btn btn-default"  href="">Reset</a>
     
        <input type="submit" value="Save Change" style="background:#204b58;" class="btn btn-info" onclick="pay()">
  
      </div> 
     </div>
    
     </div>
     </div>
     </div>
    <%@include file="footer.jsp" %>
</form>
<script>
$(document).on("change",".bnkch", function(){
	var a=parseFloat($('.gtot').val(),10);
	var b=parseFloat($('.bnkch').val(),10);
	var c= a+b;
	$('.total2').val(c.toFixed(2));
});
</script>
<script>
$(document).ready(function(){
	$(".chq").hide();
    $(".cash").click(function(){
        $(".chq").hide();
        $(".chqno").val('');
    });
    $(".cheq").click(function(){
        $(".chq").show();
       
    });
});
</script>
<script>
$(document).ready(function(){
	$(".bankdiv").hide();
    $(".addc").click(function(){
        $(".bankdiv").show();
    });
   
});
</script>
<script>

$(document).on("blur", ".gtot", function() {
	 var a=$(".gtot").val();
	 var b=$(".total").val();
	 var sum=0;
	    $(".otherchrg").each(function(){
	        sum +=+$(this).val();
	    });
	    var ss=parseFloat(a)+sum;
	 $(".total2").val(ss);
	 $(".bal").val(a-b);
});

</script>
<script>

$(document).on("change", ".otherchrg", function() {
	var su=parseFloat($(".gtot").val());
	 /* var sum =parseFloat($(".total2").val());
     $(".otherchrg:last").each(function(){
        sum +=parseFloat(+$(this).val());
    });
    $(".total2").val(sum); */
	var sum=0;
    $(".otherchrg").each(function(){
        sum +=+$(this).val();
    });
    var sum2=0;
    $(".amt").each(function(){
        sum2 +=+$(this).val();
    });
    
    var ss=parseFloat(su)+sum;
    $(".total2").val(ss);
  
});

</script>

<script>
$(document).on("change", ".selectType", function() {
	var a=$(".gtot").val();
	var b=$(".total").val();
	
	if(a=="")
		{
		alert('please enter amount');
		$(".selectType:last").val("-1");
		}
	else{
	
	$(".selectType").each(function(){
		
		
		//var s=$(".selectType:last").val();
		//alert($(".selectType:last").find('option:selected').text())
		var pa=[];
		var str=$(".selectType:last").find('option:selected').text();
		pa=str.split("|");
		
		var s=pa[2];
		 if($(".amt:last").val()==0)
			 {
		if(s > a-b)
			{
			
			$(".amt:last").val((a-b).toFixed(2));
			}
		else
			{
			$(".amt:last").val(s);
			}
			 
		var sum = 0;
		
	    $(".amt").each(function(){
	        sum += +$(this).val(); 
	    });
	    var sum2 = 0;
	    $(".amt:last").each(function(){
	        sum2 += +$(this).val(); 
	    });
	    
	    $(".total").val(sum.toFixed(2));
	    var h=parseFloat(sum,10);
	    var k=parseFloat(sum2,10);
		var g=parseFloat($('.bnkch').val(),10);
		var t=parseFloat($('.total2').val(),10);
	    //$(".total2").val((t+k).toFixed(2));
	    $(".bal").val(($(".gtot").val()-$(".total").val()).toFixed(2));
			 }
		 
		 
	});
}
});
</script>
<script src="js/jquery.datetimepicker.full.js"></script>
<script>
     jQuery('#datetimepicker').datetimepicker({
    	 timepicker:false,
    	 todayBtn: "linked"
    	 //mask:true, // '9999/19/39 29:59' - digit is the maximum possible for a cell
    	});
     
     $(document).ready(function(){
    	 var d=new Date();
    	 var da=d.getFullYear() + "/" + (d.getMonth()+1) + "/" +d.getDate();
    	 $('#datetimepicker').val(da);
    	 
     });
     
     jQuery('#datetimepicker2').datetimepicker({
    	 timepicker:false,
    	 todayBtn: "linked"
    	 //mask:true, // '9999/19/39 29:59' - digit is the maximum possible for a cell
    	});
     
     $(document).ready(function(){
    	 var d=new Date();
    	 var da=  d.getFullYear() + "/" + (d.getMonth()+1) + "/" +d.getDate();
    	 $('#datetimepicker2').val(da);
    	 
     });
    </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script> 
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    
   
<script>
$(function() {
   // initThings();

    $('#add').on('click', function() { add_row($('#table1')); });
});


function add_row($table) {
    var tr_id = $table.find('tr').length -1;
    var $template = $table.find('tr.template');
    var $tr = $template.clone().removeClass('template').prop('id', tr_id);

    $tr.find(':input').each(function() {
        if($(this).hasClass('hasDatepicker')) {
            $(this).removeClass('hasDatepicker').removeData('datepicker');
        }

        var input_id = $(this).prop('id');
        input_id = input_id + tr_id;
        $(this).prop('id', input_id);

        var new_name = $(this).prop('name');
        new_name = new_name.replace('[0]', '['+ tr_id +']');
        $(this).prop('name', new_name);

        $(this).prop('value', '');
    });
    $table.find('tbody').append($tr);

    $(".dateControl", $tr).datepicker({
        dateFormat: "dd-mm-yy"
    });

    $(".selectType", $tr).val(-1).trigger("change");
    $(".amt",$tr).val(0);
    $(".bill",$tr).val("B");
    
}
function initThings() {
    add_row($('#table1'));
} 
	        </script>
	        
	        
	        <script>
$(function() {
   // initThings();

    $('#addother').on('click', function() { add_row1($('#table1')); });
});


function add_row1($table) {
    var tr_id = $table.find('tr').length -1;
    var $template = $table.find('tr.otherch');
    var $tr = $template.clone().removeClass('otherch').prop('id', tr_id);

    $tr.find(':input').each(function() {
        if($(this).hasClass('hasDatepicker')) {
            $(this).removeClass('hasDatepicker').removeData('datepicker');
        }

        var input_id = $(this).prop('id');
        input_id = input_id + tr_id;
        $(this).prop('id', input_id);

        var new_name = $(this).prop('name');
        new_name = new_name.replace('[0]', '['+ tr_id +']');
        $(this).prop('name', new_name);

        $(this).prop('value', '');
    });
    $table.find('tbody').append($tr);

    $(".dateControl", $tr).datepicker({
        dateFormat: "dd-mm-yy"
    });

    $(".selectother", $tr).select2();
    $(".selectother:last").val(0).trigger("change");
    $(".otherchrg",$tr).val(0);
    $(".otherval",$tr).val("O");
    $(".comm",$tr).val("0");
    
}
function initThings() {
    add_row($('#table1'));
} 
	        </script>
	        
	        <script  langauge="JavaScript">
	        function deleteRow(btn) {
	        	
	      	  var row = btn.parentNode.parentNode;
	      	  if ( $('#table1 tbody tr').length == 2 ) return;
	      	  row.parentNode.removeChild(row);
	      	  var gt=$(".gtot").val();
	      	  var sum = 0;
	      	    $(".amt").each(function(){
	      	        sum += +$(this).val();
	      	    
	      	});
	      	    var sum2 = 0;
	      	    $(".otherchrg").each(function(){
	      	        sum2 += +$(this).val();
	      	    
	      	});
	      	    var c=parseFloat()
	      	    $(".total").val(sum.toFixed(2));
	      	    var tot=parseFloat(gt)+sum2
	      	    $(".total2").val(tot);
	      	    $(".bal").val(($(".gtot").val()-$(".total").val()).toFixed(2));
	      	}
</script>
	        <script>
    $('.select1').select2();
    
    
    </script>
  <script type="text/javascript">
function goBack() {
    window.history.back();
   
};
</script>
<script>
function pay()
{
	var x=document.getElementById("payno").value;
	if(x==null || x=='')
		{
		alert('please enter payment No!')
		}
	}
</script>
</body>
</html>