 <!DOCTYPE html>
<?
include"plg/kon.php";
$delrec = "delete from invoiceout where saverec=0";
$gas = $conn->query($delrec);
?>
 <html lang="en">

 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="css/flexigrid.css" />
  <script type="text/javascript" src="jquery.min.js"></script>
  <script type="text/javascript" src="js/flexigrid.js"></script>
  <link rel="stylesheet" href="kucingstrap.css">
  <script src="kucingstrap.js"></script>
  <link rel="stylesheet" href="plg/w3.css">
  <link rel="icon" href="plg/logoagp.png">
  <style type="text/css">

	.flexigrid div.fbutton .add {
		background: url(images/add.png) no-repeat center left;
	}

	.flexigrid div.fbutton .delete {
		background: url(images/close.png) no-repeat center left;
	}

	.flexigrid div.fbutton .edit {
		background: url(images/edit.png) no-repeat center left;
	}

  </style>
  <title>Invoice Piutang</title>
</head>

<body>

  <div class="container" style="width:100%;">
    <table id="piutang" style="display: none" ondblclick="" class="" onclick="kembalikan()"></table>
  </div>

  <div id="add_model" class="modal fade">
    <div class="modal-dialog">
    	<div class="modal-content">
            <div class="modal-header">
            	<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	            <h4 class="modal-title">Add Employee</h4>
            </div>
            <div class="modal-body">
            	<form method="post" id="frm_add">
					<input type="hidden" value="add" name="action" id="action">
                  	<div class="form-group">
                    <label for="name" class="control-label">Name:</label>
                    <input type="text" class="form-control" id="name" name="name" value=""/>
                  	</div>
                  	<div class="form-group">
                    <label for="salary" class="control-label">Salary:</label>
                    <input type="text" class="form-control" id="salary" name="salary"/>
                  	</div>
				  	<div class="form-group">
                    <label for="salary" class="control-label">Age:</label>
                    <input type="text" class="form-control" id="age" name="age"/>
                  	</div>
            </div>
            <div class="modal-footer">
               <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
               <button type="button" id="btn_add" class="btn btn-primary">Save</button>
            </div>
				</form>
        	</div>
    </div>
</div>

<div id="edit_model" class="modal fade">
    <div class="modal-dialog">

				<input type="hidden" value="0" name="edit_id" id="edit_id">
      <div id="rumahnya">di sini</div>
      <iframe id="ipack" style="display:none" name="ipack"></iframe>
        </div>
    </div>
</div>

</body>
</html>



<script>

	   $("#piutang").flexigrid({
                url : 'response.php?sid=<?=$sid?>',
                dataType : 'json',
				method: 'POST',
                colModel : [ {
                    display : '<b></b>',
                    name : 'tamb',
                    width : 200,
                    //sortable : true,
                    align : 'center'
                    }, {
                        display : '<b>ID</b>',
                        name : 'id',
                        width : 300,
                        sortable : true,
                        align : 'left'
                    }, {
                        display : '<b>DEBITUR</b>',
                        name : 'deb',
                        width : 300,
                        sortable : true,
                        align : 'left'
                    },
                    {
                        display : '<b>PEKERJAAN</b>',
                        name : 'job',
                        width : 300,
                        sortable : true,
                        align : 'left'
                    }, {
                        display : '<b>PRIHAL</b>',
                        name : 'pri',
                        width : 300,
                        sortable : true,
                        align : 'left',

                    } ],

                buttons : [ {
                    name : 'TAMBAH',
                    bclass : 'w3-button w3-blue w3-card-4',
                    onpress : tambah
                    }
                    ,
                    {
                        name : 'EDIT',
                        bclass : 'w3-button w3-blue w3-card-4',
                        onpress : edit
                    }
                    ,
                    {
                        name : 'HAPUS',
                        bclass : 'w3-button w3-blue w3-card-4',
                        onpress : gridAction
                    }
					,
					{
                        name : 'DODOL',
                        bclass : 'w3-button w3-blue w3-card-4',
                        onpress : dodol
                    }
					,
                    {
                        separator : true
                    }
                ],
                searchitems : [
                  {
                    display : 'ID',
                    name : 'id'
                    }, {
                    display : 'DEBITUR',
                    name : 'deb',
                    isdefault : false
                  },
                  {
                    display : 'PEKERJAAN',
                    name : 'job',
                    isdefault : false
                  }
               ],
                sortname : "id",
				//sortname : "employee_name",
                sortorder : "asc",
                usepager : true,
                title : '<center class="w3-large">INVOICE PIUTANG</b></center>',
                useRp : true,
                rp : 50,
                showTableToggleBtn : true,
				//height:'600',
				striped:true,
                width :'auto'
            });


			function gridAction(com, grid) {
				if (com == 'TAMBAH') {
					$('#add_model').modal('show');
					document.getElementById('name').value='';
                }else if(com == 'Delete') {
					var conf = confirm('Delete ' + $('.trSelected', grid).length + ' items?');
					alert(conf);
                    if(conf){
                        $.each($('.trSelected', grid),
                            function(key, value){
                                $.post('response.php', { id: value.firstChild.innerText, action:com.toLowerCase()}
                                    , function(){
                                        // when ajax returns (callback),
										$("#employees").flexReload();
                                });
                        });
                    }
				} else if (com == 'EDIT') {
					$('#edit_model').modal('show');
					if($('.trSelected', grid).length >0) {
                        $.each($('.trSelected', grid),
                            function(key, value){

                                // collect the data
                                $('#edit_id').val(value.children[0].innerText); // in case we're changing the key
                                $('#edit_name').val(value.children[1].innerText);
                                $('#edit_salary').val(value.children[2].innerText);
                                $('#edit_age').val(value.children[3].innerText);
                                idnya = document.getElementById('edit_id').value;
                                //alert(idnya);
                                var xhttp = new XMLHttpRequest();
                                xhttp.onreadystatechange = function() {
                                  if (this.readyState == 4 && this.status == 200) {
                                    document.getElementById("rumahnya").innerHTML =
                                    this.responseText;
                                  }
                                };
                                xhttp.open("GET", "formeditinv-out.php?id="+idnya, true);
                                xhttp.send();
                        });
					} else {
					 alert('Now row selected! First select row, then click edit button');
					}

                }
			}



			function ajaxAction(action) {
				data = $("#frm_"+action).serializeArray();
				$.ajax({
				  type: "POST",
				  url: "response.php",
				  data: data,
				  dataType: "json",
				  success: function(response)
				  {
					$('#'+action+'_model').modal('hide');
					$("#piutang").flexReload();
				  }
				});
			}

			$( "#btn_add" ).click(function() {
			  ajaxAction('add');
			});
			$( "#btn_edit" ).click(function() {
			  ajaxAction('edit');
			});

function edit(x){
  $('#edit_model').modal('show');
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("rumahnya").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "formeditinv-out.php?id="+x, true);
  xhttp.send();
}

function dodol(){
	alert('test');
}

function bukappnpph(){
  dpp = document.getElementById('dpp').value;
  if(dpp > 0){
    document.getElementById('fppn').className="w3-pale-blue";
    document.getElementById('fpph').className="w3-pale-blue";
    document.getElementById('ftotal').className="w3-pale-blue";
    totalppn();
  }else{
    document.getElementById('fppn').className="w3-hide";
    document.getElementById('fpph').className="w3-hide";
    document.getElementById('ftotal').className="w3-hide";
  }
}

function cekppn(){
  ppn = document.getElementById('ppn');
  if(ppn.value > 100){
    ppn.value = '100';
  }
}
function totalppn(){
  dpp = document.getElementById('dpp');
  ppn = document.getElementById('ppn');
  totppn = dpp.value * ppn.value/100;
  hargadpp = dpp.value-0;
  total = (hargadpp+totppn);
  document.getElementById('totppn').value = totppn;
  document.getElementById('txttotppn').innerHTML = 'Rp '+totppn.toLocaleString();
  document.getElementById('txttotal').innerHTML = 'Rp '+total.toLocaleString();
  document.getElementById('pph').value="";
  document.getElementById('pphval').value="";
  document.getElementById('totpph').value="";
  document.getElementById('total').value=total;
}

function totalpph(){
  ppn = document.getElementById('totppn');
  dpp = document.getElementById('dpp');
  pph = document.getElementById('pphval');
  totpph = dpp.value * pph.value/100;
  hargadpp = dpp.value-0;
  hargappn = ppn.value-0;
  totalnya = (hargadpp+hargappn)-totpph;
  document.getElementById('totpph').value = totpph;
  document.getElementById('txtpph').innerHTML = 'Rp '+totpph.toLocaleString();
  document.getElementById('txttotal').innerHTML = 'Rp '+totalnya.toLocaleString();
  document.getElementById('total').value=totalnya;
}


function dppkoma(){
  dpp = document.getElementById('dpp');
  xdpp = dpp.value-0;
  document.getElementById('txtdpp').innerHTML = 'Rp '+xdpp.toLocaleString();
}
function dpkoma(){
  dp = document.getElementById('dpp');
  xdp = dpp.value-0;
  document.getElementById('txtdp').innerHTML = 'Rp '+xdpp.toLocaleString();
}

function cekpph(){
  pphx = document.getElementById('pph').value;
  if(pphx == ''){
    document.getElementById('pphval').value='0';
  }
  if(pphx == 'PPH PASAL 23'){
    document.getElementById('pphval').value='2';
  }
  if(pphx == 'PPH PASAL 15'){
    document.getElementById('pphval').value='1.2';
  }
  if(pphx == 'PPH PASAL 4 AYAT (2)'){
    document.getElementById('pphval').value='10';
  }
  if(pphx == 'PPH PASAL 21'){
    document.getElementById('pphval').value='0';
  }
  totalpph();
}

function totalnya(){
  dpp = document.getElementById('dpp').value;
  totppn = document.getElementById('totppn').value;
  totpph = document.getElementById('totpph').value;
  hargadpp = dpp-0;
  totalnya = (hargadpp+totppn);

  document.getElementById('txttotal').innerHTML = 'Rp '+totalnya.toLocaleString();
  //document.getElementById('total').value='1000';
}

function showformupl2(x) {
  semua = "&xdeb="+d+"&xjob="+j+"&xjobby="+jb+"&xinv="+i+"&xkon="+k;
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("rumahnya").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "formupl2.php?inv="+x, true);
  xhttp.send();
}

function showforminveditout(i) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("rumahnya").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "formeditinv-out.php?id="+i, true);
  xhttp.send();
}

function updateinvout(){
  document.getElementById('newinvout').submit();
  document.getElementById('keluar').click();
}

function kembalikan(){
  $("#piutang").flexReload();
}

function tambah(){
  document.getElementById('ipack').src="tes.php";
}

function uploadkan(){
  document.getElementById('formdoc').submit();
}

</script>
