<?php
 echo @$_GET['msg'];
  session_start();
  if(isset($_SESSION['userId'])){ 
include 'template/header.php';  
  require 'connection.php';

?>
 <link rel="stylesheet" href="css/jquery-ui.css">
  <!-- <link rel="stylesheet" href="/resources/demos/style.css"> -->
  <script src="js/jquery-1.12.4.js"></script>
  <script src="js/jquery-ui.js"></script>
    <link rel="stylesheet" href="css/bootsrap_my.css" />


  <link rel="stylesheet" href="css/jquery-ui.css">
        <link rel="stylesheet" href="bootstrap.min.css" />
    <script src="js/jquery-1.12.4.js"></script>
     <script src="js/jquery-ui.js"></script>
<div class="ch-container">
    <div class="row">
        
<!-- SIDEBAR HERE-->
<?php

include 'template/sidebar.php';

?>
<style>


/*the container must be positioned relative:*/
.autocomplete {
  position: relative;
  display: inline-block;
}




.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff; 
  border-bottom: 1px solid #d4d4d4; 
}

/*when hovering an item:*/
.autocomplete-items div:hover {
  background-color: #e9e9e9; 
}

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
  background-color: DodgerBlue !important; 
  color: #ffffff; 
}
</style>


  <style>
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
</style>  

        <div id="content" class="col-lg-10 col-sm-10">
            <!-- content starts -->
      <div>
    <ul class="breadcrumb">
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">Cash Payment Voucher</a>
        </li>
    </ul>
</div>

<div class="row">
    <div class="box col-md-12">
        <div class="box-inner">

          

            <div class="box-header well">
                <h2><i class="glyphicon glyphicon-info-sign"></i> CPV Record No. </h2>
                <h2 id="vno" style="margin-left: 10px"></h2>

    <!--   <p>Date: <input type="text" id="datepicker" data-role="calendarpicker" data-input-format="%d-%m-%y"></p> -->


                <div class="box-icon">
                    <a href="#" class="btn btn-setting btn-round btn-default"><i
                            class="glyphicon glyphicon-cog"></i></a>
                    <a href="#" class="btn btn-minimize btn-round btn-default"><i
                            class="glyphicon glyphicon-chevron-up"></i></a>
                    <a href="#" class="btn btn-close btn-round btn-default"><i
                            class="glyphicon glyphicon-remove"></i></a>
                </div>
            </div>
            <div class="box-content row">

                <!-- dated -->
            <div class="col-lg-12 col-md-12" style="margin-bottom: -30px">
               <input style=" border: none; border-bottom: 1px solid black; float: right; font-size: 2rem" type="date"  data-date-format="DD MMMM YYYY" id="dated">
                </div>
<!-- *********************************** -->

                <!-- Account -->
              
                <div class="col-lg-5 col-md-12" >

                 <select id="selaccid" class="form-control selectpicker"data-live-search="true">
                 <?php
                    require 'connection.php';

              $qry = "SELECT * FROM accreg  where activityacc=0";
             $run = mysqli_query($connect, $qry) or die(mysqli_error($connect));
    while($row = mysqli_fetch_array($run)){
?>
        <option  value="<?php echo $row['accid']; ?>"><?php echo $row['accname']; ?></option>
        <?php } ?>
            </select>
          <input type="checkbox" id="fxidname" name="">
            <label style="color: red;">fix</label>
                </div>

              
                   <div class="col-lg-3 col-md-12" >
                    
                     <select id="refno" class="selectpicker">

                                    <option value="Cash Payment">Cash Payment</option>
                                    <option value="Online">Online</option>

                                    <option value="Cheque">Cheque</option>

                                    <option value="Transfer">Transfer</option>
                                     </select>
                                     <input type="checkbox" id="fxid" name="">
            <label style="color: red;">fix</label>
                                       </div>
      <div class="col-lg-3 col-md-12" >

      </div>


<div style="margin-bottom: 100px;"></div>
      <div class="col-lg-12 col-md-12">
      

      <div class="col-lg-5 col-md-12">

     <input autocomplete="off"  style="margin-left: -10px; "  name="rate" id="desbox" class="form-control" />
        <span id="error_rate" class="text-danger"></span>
      </div>

        <div class="col-lg-2 col-md-12">
        <input autocomplete="off" style="margin-left: -10px; " type="number" id="amtbox" class="form-control" />
        <span id="error_qty" class="text-danger"></span>

      </div>

      </div>
     <div class="col-lg-12 col-md-12">
     <div class="col-lg-5 col-md-12">
      </div>

     <div class="col-lg-7 col-md-12">
 
    <label style="color: blue;" name="amount-rupees" id="amount-rupees"></label>
      </div>
        
      

      </div>




      <div class="form-group" align="center">
        <input type="hidden" name="row_id" id="hidden_row_id" />
        <!-- <button type="button" name="save" id="save" class="btn btn-info">Save</button> -->
        <!-- <button type="button" name="post" id="post" class="btn btn-info">POST</button> -->
      </div>

    <div id="action_alert" title="Action">

    </div>



      <form method="post" id="user_form">
        <div class="col-lg-12">
          <label class="glyphicon glyphicon-list" style="color: maroon; font-size: 20px; margin-top: 3px; margin-left: 15px;"></label>
          <label class="" style="color: maroon; font-size: 20px;">Add to list </label>
          <label id="draccid" class="" style="color: maroon; font-size: 14px;"></label>
          <label id="draccname" class="" style="color: maroon; font-size: 14px;"></label>
          <!-- <table class="table table-striped table-bordered" id="user_data"> -->
                  <table class="table" id="user_data">

            <tr>
                   <th hidden>ID</th>
                   <th hidden>Date</th>
                   <th hidden>desc</th>
                    <th>Vno</th>
                    <th>Description</th>
                    <th>Entry Type</th>
                    <th>Amount DR</th>
                    <th>Amount CR</th>
                    <th>Details</th>
                    <th>Remove</th>
                  </tr>
             
           
          </table>

        </div>
        <div align="center">
          <input style="margin-bottom: 20px;" type="submit" name="insert" id="insert" class="btn btn-info" value="Insert into Database" />
 <img style=" display: none; height: 30px; width: 30px; margin-bottom: 20px;" id="load" src="ajaxresult.gif">
 <i id="refresh" style="color: red; float: right;" class="glyphicon glyphicon-refresh btn btn-lg"></i>


        </div>
      </form>

    </div>



<!-- ************************************** -->
            </div>
<!-- *************************NEW ITEM**************************************** -->
 



<!-- ********************************************************************** -->


        </div>


    </div>






<!-- ********************************************************************** -->


    <!-- content ends -->
    </div><!--/#content.col-md-0-->
</div><!--/fluid-row-->


<!-- *********Modal Start******************** -->

<!-- *************Modal End**************** -->
   

    <hr>



<?php
include 'template/footer.php';
?>
<script src="js/num-to-words.js" type="text/javascript"></script>


<script>  
$(document).ready(function(){ 
  
  var count = 0;
})


  $( function() {
    $( "#datepicker" ).datepicker();
  } );
  </script>

<script type="text/javascript">
 var today = new Date();

document.getElementById("dated").value = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today.getDate()).slice(-2);


document.getElementById("dated2").value = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today.getDate()).slice(-2);
  


  </script>


<script>  
$(document).ready(function(){ 
  
   var dated= $('#dated').val();
   $.ajax({
        url: 'cbvno.php',
        method: 'POST',
       data: {dated: dated},
        success: function(data){
            // $('#prate').val(data);
             // alert(data);
                 $('#vno').text(data);
        }
      })
})


  $( function() {
    $( "#datepicker" ).datepicker();
  } );
  </script>
 <script type="text/javascript">
  $('#dated').change(function(){

   var dated= $('#dated').val();
   $.ajax({
        url: 'cbvno.php',
        method: 'POST',
       data: {dated: dated},
        success: function(data){
            // $('#prate').val(data);
             // alert(data);
                 $('#vno').text(data);
        }
      })


 });




var words="";
$(function() {
    $("#amtbox").on("keydown keyup", per);
  function per() {
    var totalamount = (
    Number($("#amtbox").val())
    );
    $("#totalval").val(totalamount);
    words = toWords(totalamount);
    // $("#amount-rupees").val(words + "Rupees Only");
    $("#amount-rupees").html(words);
  }
});

  </script>




 <script type="text/javascript">
  $('#selaccid').change(function(){
if($('#fxid'). prop("checked") == true){
   $("#desbox").focus(); 
}
else{
   $("#refno").focus();

}
 })
</script>

<script type="text/javascript">
  $('#mbl').click(function(){

   $("#draccid").text(121); 
   $("#draccname").text($("#mbl").text()); 

 });

  $('#ubl').click(function(){

   $("#draccid").text(118); 
   $("#draccname").text($("#ubl").text()); 

 });
    $('#3294').click(function(){

   $("#draccid").text(119); 
   $("#draccname").text($("#3294").text()); 

 });
      $('#al-habib').click(function(){

   $("#draccid").text(120); 
   $("#draccname").text($("#al-habib").text()); 

 });
        $('#hbl').click(function(){

   $("#draccid").text(243); 
   $("#draccname").text($("#hbl").text()); 

 });
          $('#al-falah').click(function(){

   $("#draccid").text(130); 
   $("#draccname").text($("#al-falah").text()); 

 });
  $('#mcb').click(function(){

   $("#draccid").text(122); 
   $("#draccname").text($("#mcb").text()); 

 });
    $('#faysal').click(function(){

   $("#draccid").text(129); 
   $("#draccname").text($("#faysal").text()); 

 });
      $('#islami').click(function(){

   $("#draccid").text(131); 
   $("#draccname").text($("#islami").text()); 

 });
</script>



<script type="text/javascript">
  $('#refno').change(function(){

   $("#desbox").focus(); 

 });




  $('#desbox').keydown(function(e){
if(e.keyCode==13)

{ $("#amtbox").focus(); 

}
 });
</script>

<script>  
$(document).ready(function(){ 
  
  var count = 0;

  $('#user_dialog').dialog({
    autoOpen:false,
    width:400
  });

  $('#add').click(function(){
    $('#user_dialog').dialog('option', 'title', 'Add Data');
    $('#first_name').val('');
    $('#last_name').val('');
    $('#ids').val('');
    $('#error_first_name').text('');
    $('#error_last_name').text('');
    $('#ids').text('');
    $('#first_name').css('border-color', '');
    $('#last_name').css('border-color', '');
    $('#last_name1').css('border-color', '');
    $('#save').text('Save');
    $('#user_dialog').dialog('open');
  });

  $('#amtbox').keydown(function(e){
if(e.keyCode==13)
{
  // alert("OK")
      var selectedText = $("#selaccid option:selected").html();
      var selectedText2 =  $('#amount-rupees').html();
  
    var accid =  $('#selaccid').val();
    var vno =  $('#vno').text();
    var newvno = parseInt(vno)+1;
    $('#vno').text(newvno);

    var dated =  $('#dated').val();
    var desc =  ($("#desbox").val());
    var refno =  $("#refno option:selected").html();
    var amt =  $('#amtbox').val();
    
    count = count + 1;
    var srno =  count;

     output = '<tr id="row_'+count+'">';
   // output += '<td>'+vno+' <input type="hidden" name="hidden_vno[]" id="vno'+vno+'" class="vno" value="'+vno+'" /></td>';

        output += '<td hidden>'+accid+' <input type="hidden" name="hidden_accid[]" id="accid'+count+'" class="accid" value="'+accid+'" /></td>';
        
         output += '<td hidden>'+dated+' <input type="hidden" name="hidden_dated[]" id="dated'+count+'" value="'+dated+'" /></td>';

        output += '<td >'+vno+'  <input class="srno" type="hidden" name="hidden_vno[]" id="vno'+count+'" value="'+vno+'" /></td>';

 output += '<td hidden>'+desc+' <input type="hidden" name="hidden_desc[]" id="desc'+count+'" value="'+desc+'" /></td>';
  
 output += '<td>'+selectedText+" ("+selectedText2+") "+amt +' <input type="hidden" name="hidden_itemidss[]" id="selectedText'+count+'" value="'+selectedText+'" /></td>';
   output += '<td>'+refno+' <input type="hidden" name="hidden_refno[]" id="refno'+count+'" value="'+refno+'" /></td>';
 

   output += '<td>'+amt+' <input type="hidden" name="hidden_amtdr[]" id="amtcr'+count+'" value="'+amt+'" /></td>';
  output += '<td>'+0+' <input type="hidden" name="hidden_amtcr[]" id="amtdr'+count+'" value="'+0+'" /></td>';
        output += '<td><button type="button" name="view_details" class="btn btn-warning btn-xs view_details" id="'+count+'">View</button></td>';

        output += '<td><button type="button" name="remove_details" class="btn btn-danger btn-xs remove_details" id="'+count+'">Remove</button></td>';
        output += '</tr>';
        $('#user_data').append(output);

        $("#amtbox").val("");
        if($('#fxidname'). prop("checked") == true){
          $("#desbox").focus();
        }
        else{
        setTimeout(function(){ $('#selaccid').focus(); }, 100)

        }

}
});



  $('#save').click(function(){
    var error_first_name = '';
    var error_last_name = '';
    var first_name = '';
    var last_name = '';
    if($('#first_name').val() == '')
    {
      error_first_name = 'First Name is required';
      $('#error_first_name').text(error_first_name);
      $('#first_name').css('border-color', '#cc0000');
      first_name = '';
    }
    else
    {
      error_first_name = '';
      $('#error_first_name').text(error_first_name);
      $('#first_name').css('border-color', '');
      first_name = $('#first_name').val();
    } 
    if($('#last_name').val() == '')
    {
      error_last_name = 'Last Name is required';
      $('#error_last_name').text(error_last_name);
      $('#last_name').css('border-color', '#cc0000');
      last_name = '';
    }
    else
    {
      error_last_name = '';
      $('#error_last_name').text(error_last_name);
      $('#last_name').css('border-color', '');
      last_name = $('#last_name').val();
    }

      if($('#last_name1').val() == '')
    {
      error_last_name1 = 'Last Name1 is required';
      $('#error_last_name1').text(error_last_name1);
      $('#last_name1').css('border-color', '#cc0000');
      last_name1 = '';
    }
    else
    {
      error_last_name1 = '';
      $('#error_last_name1').text(error_last_name1);
      $('#last_name1').css('border-color', '');
      last_name1 = $('#last_name1').val();
    }

    if(error_first_name != '' || error_last_name != '' || error_last_name1 != '')
    {
      return false;
    }
    else
    {
      if($('#save').text() == 'Save')
      {
        count = count + 1;
        output = '<tr id="row_'+count+'">';
        output += '<td>'+first_name+' <input type="hidden" name="hidden_first_name[]" id="first_name'+count+'" class="first_name" value="'+first_name+'" /></td>';
        
        output += '<td>'+last_name+' <input type="hidden" name="hidden_last_name[]" id="last_name'+count+'" value="'+last_name+'" /></td>';

      output += '<td>'+last_name1+' <input type="hidden" name="hidden_last_name1[]" id="last_name1'+count+'" value="'+last_name1+'" /></td>';

        output += '<td><button type="button" name="view_details" class="btn btn-warning btn-xs view_details" id="'+count+'">View</button></td>';

        output += '<td><button type="button" name="remove_details" class="btn btn-danger btn-xs remove_details" id="'+count+'">Remove</button></td>';
        output += '</tr>';
        $('#user_data').append(output);

      }
      else
      {
        var row_id = $('#hidden_row_id').val();
        output = '<td>'+first_name+' <input type="hidden" name="hidden_first_name[]" id="first_name'+row_id+'" class="first_name" value="'+first_name+'" /></td>';
      
          output += '<td>'+last_name1+' <input type="hidden" name="hidden_last_name[]" id="last_name'+row_id+'" value="'+last_name+'" /></td>';

        output += '<td>'+last_name1+' <input type="hidden" name="hidden_last_name1[]" id="last_name1'+row_id+'" value="'+last_name1+'" /></td>';
          
            output += '<td>'+last_name+' <input type="hidden" name="hidden_last_name[]" id="last_name'+row_id+'" value="'+last_name+'" /></td>';

        output += '<td><button type="button" name="view_details" class="btn btn-warning btn-xs view_details" id="'+row_id+'">View</button></td>';
        output += '<td><button type="button" name="remove_details" class="btn btn-danger btn-xs remove_details" id="'+row_id+'">Remove</button></td>';
        $('#row_'+row_id+'').html(output);
      }
      $("#first_name").focus();
       $('#user_dialog').dialog('close');
    }
  });


  $(document).on('click', '.view_details', function(){
    var row_id = $(this).attr("id");
    var srno = $('#srno'+row_id+'').val();
    var accid = $('#accid'+row_id+'').val();
    var itemid = $('#itemid'+row_id+'').val();
    var rate = $('#rate'+row_id+'').val();
    var qty = $('#qty'+row_id+'').val();
    $('#srno').val(srno);
    $('#accid').val(accid);
    $('#itemid').val(itemid);
    $('#rate').val(rate);
    $('#qty').val(qty);
    $('#save').text('Edit');
    $('#hidden_row_id').val(row_id);
    $('#user_dialog').dialog('option', 'title', 'Edit Data');
    $('#user_dialog').dialog('open');
  });

  $(document).on('click', '.remove_details', function(){
    var row_id = $(this).attr("id");
    if(confirm("Are you sure you want to remove this row data?"))
    {
      $('#row_'+row_id+'').remove();
    }
    else
    {
      return false;
    }
  });

  $('#action_alert').dialog({
    autoOpen:false
  });

  $('#user_form').on('submit', function(event){
    event.preventDefault();
     var save= confirm("Do you realy want to save Transactions?");
    if(save){
      $("#load").show();
    var count_data = 0;
    $('.srno').each(function(){
      count_data = count_data + 1;
    });
    if(count_data > 0)
    {
      var form_data = $(this).serialize();
      $.ajax({
        url:"addcb.php",
        method:"POST",
        data:form_data,
        success:function(data)
        {
           $('#user_data').find("tr:gt(0)").remove();
        
          alert(data);
      $("#load").hide();

           location.reload(true);
        }
      })
    }
    else
    {
      $('#action_alert').html('<p>Please Add atleast one data</p>');
      $('#action_alert').dialog('open');
    }
  }
  });
  
});  
</script>

<script type="text/javascript">
  
  $("#myList li").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
</script>

<script>
function autocomplete(inp, arr) {
  /*the autocomplete function takes two arguments,
  the text field element and an array of possible autocompleted values:*/
  var currentFocus;
  /*execute a function when someone writes in the text field:*/
  inp.addEventListener("input", function(e) {
      var a, b, i, val = this.value;
      /*close any already open lists of autocompleted values*/
      closeAllLists();
      if (!val) { return false;}
      currentFocus = -1;
      /*create a DIV element that will contain the items (values):*/
      a = document.createElement("DIV");
      a.setAttribute("id", this.id + "autocomplete-list");
      a.setAttribute("class", "autocomplete-items");
      /*append the DIV element as a child of the autocomplete container:*/
      this.parentNode.appendChild(a);
      /*for each item in the array...*/
      for (i = 0; i < arr.length; i++) {
        /*check if the item starts with the same letters as the text field value:*/
        if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
          /*create a DIV element for each matching element:*/
          b = document.createElement("DIV");
          /*make the matching letters bold:*/
          b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
          b.innerHTML += arr[i].substr(val.length);
          /*insert a input field that will hold the current array item's value:*/
          b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
          /*execute a function when someone clicks on the item value (DIV element):*/
          b.addEventListener("click", function(e) {
              /*insert the value for the autocomplete text field:*/
              inp.value = this.getElementsByTagName("input")[0].value;
              /*close the list of autocompleted values,
              (or any other open lists of autocompleted values:*/
              closeAllLists();
          });
          a.appendChild(b);
        }
      }
  });
  /*execute a function presses a key on the keyboard:*/
  inp.addEventListener("keydown", function(e) {
      var x = document.getElementById(this.id + "autocomplete-list");
      if (x) x = x.getElementsByTagName("div");
      if (e.keyCode == 40) {
        /*If the arrow DOWN key is pressed,
        increase the currentFocus variable:*/
        currentFocus++;
        /*and and make the current item more visible:*/
        addActive(x);
      } else if (e.keyCode == 38) { //up
        /*If the arrow UP key is pressed,
        decrease the currentFocus variable:*/
        currentFocus--;
        /*and and make the current item more visible:*/
        addActive(x);
      } else if (e.keyCode == 13) {
        /*If the ENTER key is pressed, prevent the form from being submitted,*/
        e.preventDefault();
        if (currentFocus > -1) {
          /*and simulate a click on the "active" item:*/
          if (x) x[currentFocus].click();
        }
      }
  });
  function addActive(x) {
    /*a function to classify an item as "active":*/
    if (!x) return false;
    /*start by removing the "active" class on all items:*/
    removeActive(x);
    if (currentFocus >= x.length) currentFocus = 0;
    if (currentFocus < 0) currentFocus = (x.length - 1);
    /*add class "autocomplete-active":*/
    x[currentFocus].classList.add("autocomplete-active");
  }
  function removeActive(x) {
    /*a function to remove the "active" class from all autocomplete items:*/
    for (var i = 0; i < x.length; i++) {
      x[i].classList.remove("autocomplete-active");
    }
  }
  function closeAllLists(elmnt) {
    /*close all autocomplete lists in the document,
    except the one passed as an argument:*/
    var x = document.getElementsByClassName("autocomplete-items");
    for (var i = 0; i < x.length; i++) {
      if (elmnt != x[i] && elmnt != inp) {
        x[i].parentNode.removeChild(x[i]);
      }
    }
  }
  /*execute a function when someone clicks in the document:*/
  document.addEventListener("click", function (e) {
      closeAllLists(e.target);
  });
}

/*An array containing all the country names in the world:*/
var countries = ["ONLINE AL-HABIB","ONLINE SHAHMIM FEED ABL","ONLINE SHAHMIM FEED HBL","ONLINE SHAHMIM FEED UBL","ONLINE SHAHMIM FEED MCB","ONLINE MUMTAZ FEED", "ONLINE MBL","A/C DR","ONLINE HBL", "ONLINE UBL", "ONLINE 3294", "CASH RCV", "CASH PAYMENT", "ONLINE BY", "TO SHAMIM FEED", "TO MUMTAZ FEED", "TO SABIR CHICKS", "TO SABIR FEED", "TO DR MUZAMIL","ONLINE TO ","V# ","MEDICINE RENT","MEDICINE"];

/*initiate the autocomplete function on the "myInput" element, and pass along the countries array as possible autocomplete values:*/
autocomplete(document.getElementById("desbox"), countries);
</script>


</body>
</html>
<?php } ?>