@extends('layouts.main')

<style>
    .card {

    }

    .form-control:focus {
        background-color: #b5e5f9 !important;
    }
</style>

@section('content')

<div class="content-wrapper">
    <div class="content-header">
        <div class="container-fluid">
			<div class="row mb-2">
				<div class="col-sm-6">
					<h1 class="m-0">Pembayaran Hutang {{$header->NO_BUKTI}}</h1>	
				</div>
				<div class="col-sm-6">
					<ol class="breadcrumb float-sm-right">
						<li class="breadcrumb-item"><a href="{{url('/hut')}}">Pembayaran Hutang</a></li>
						<li class="breadcrumb-item active">Edit {{$header->NO_BUKTI}}</li>
					</ol>
				</div>
			</div>
        </div>
    </div>

    <div class="content">
        <div class="container-fluid">
        <div class="row">
            <div class="col-12">
            <div class="card">
                <div class="card-body">

                    <form action="{{($tipx=='new')? url('/hut/store?flagz='.$flagz.'&golz='.$golz.'') : url('/hut/update/'.$header->NO_ID.'&flagz='.$flagz.'&golz='.$golz.'' ) }}" method="POST" name ="entri" id="entri" >
      
                        @csrf

                        <div class="tab-content mt-3">
                            <div class="form-group row">
                                <div class="col-md-1" align="right">
                                    <label for="NO_BUKTI" class="form-label">BUKTI#</label>
                                </div>
								
                                <input type="text" class="form-control NO_ID" id="NO_ID" name="NO_ID"
                                    value="{{$header->NO_ID ?? ''}}" hidden readonly>
								<input name="tipx" class="form-control tipx" id="tipx" value="{{$tipx}}" hidden >
								<input name="flagz" class="form-control flagz" id="flagz" value="{{$flagz}}" hidden >
								<input name="golz" class="form-control golz" id="flagz" value="{{$golz}}" hidden >
								<input name="searchx" class="form-control searchx" id="searchx" value="{{$searchx ?? ''}}" hidden >

								
                                <div class="col-md-2">
                                    <input type="text" class="form-control NO_BUKTI" id="NO_BUKTI" name="NO_BUKTI"
                                    placeholder="Masukkan Bukti#" value="{{$header->NO_BUKTI}}" readonly>
                                </div>

								<div class="col-md-3" align="right">
                                </div>

								<div class="col-md-1" align="right">
                                    <label for="KODES" class="form-label">SUPPLIER#</label>
                                </div>
                                <div class="col-md-2">
                                    <input type="text" class="form-control KODES" id="KODES" name="KODES" placeholder="Masukkan Suplier#" value="{{$header->KODES}}"readonly>
                                </div>
								
								<div class="col-md-4"></div>
					
								<div class="col-md-3 input-group">

									<input type="text" hidden class="form-control CARI" id="CARI" name="CARI"
                                    placeholder="Cari Bukti#" value="" >
									<button type="button" hidden id='SEARCHX'  onclick="CariBukti()" class="btn btn-outline-primary"><i class="fas fa-search"></i></button>

								</div> 
								
                            </div>

                            <div class="form-group row">
								<div class="col-md-1" align="right">
                                    <label for="TGL" class="form-label">TGL</label>
                                </div>
                                <div class="col-md-2">
									<input class="form-control date" onclick="select()" id="TGL" name="TGL" data-date-format="dd-mm-yyyy" type="text" autocomplete="off" value="{{date('d-m-Y',strtotime($header->TGL))}}">
                                </div>

								<div class="col-md-1" align="center">
									<label for="TYPE" class="form-label">TYPE</label>
								</div>
								<div class="col-md-1">
									<select id="TYPE"  class="form-control" name="TYPE" style="text-align: center; width:150px">
										<option value="TRANSF" {{ ($header->TYPE ?? '' == 'TRANSF') ? 'selected' : '' }}>TRANSF</option>
									</select>
								</div> 

								<div class="col-md-2" align="right">
								</div>  
                                
                                <div class="col-md-3">
                                    <input type="text" class="form-control NAMAS" id="NAMAS" name="NAMAS" placeholder="-" value="{{$header->NAMAS}}" readonly>
                                </div>
                            </div>
  

							<div class="form-group row">
                                <div class="col-md-1"align="right">
									<label style="color:red">*</label>									
                                    <label for="NO_PO" class="form-label">NO PO</label>
                                </div>

								<div class="col-md-2 input-group" >
									<input type="text" onclick="select()" onblur="browsePo(); ambil_beliy()" class="form-control NO_PO" id="NO_PO" name="NO_PO" placeholder="Masukkan PO"value="{{$header->NO_PO}}" style="text-align: left" >
								</div>

								<div class="col-md-1"align="center">								
                                    <label for="NO_BG" class="form-label">BG</label>
                                </div>
                                <div class="col-md-1">
                                    <input type="text" class="form-control NO_BG" id="NO_BG" name="NO_BG" value="{{$header->NO_BG}}" placeholder="" style="text-align: center; width:150px" >
                                </div>
								
                                <div class="col-md-2">
								</div>

                                <div class="col-md-3">
                                    <input type="text" class="form-control ALAMAT" id="ALAMAT" name="ALAMAT" placeholder="Masukkan Alamat" value="{{$header->ALAMAT}}" readonly>
                                </div>
                            </div>

							<div class="form-group row">
                                <div class="col-md-1"align="right">
									<!-- <label style="color:red">*</label>									 -->
                                    <label for="NO_BG" class="form-label">URAIAN</label>
                                </div>
                                <div class="col-md-4">
                                    <input type="text" class="form-control NOTES" id="NOTES" name="NOTES" value="{{$header->NOTES}}" placeholder="Masukkan Notes" >
                                </div>

                                <div class="col-md-2">
								</div>
								
                                <div class="col-md-3">
                                    <input type="text" class="form-control KOTA" id="KOTA" name="KOTA" placeholder="Kota" value="{{$header->KOTA}}" readonly>
                                </div>
        
                            </div>
        
							<div class="form-group row">
                                <div class="col-md-1" align="right">
                                    <label for="BACNO" class="form-label">ACNO</label>
                                </div>
								<div class="col-md-2 input-group" >
                                  <input type="text" class="form-control BACNO" id="BACNO" name="BACNO" placeholder="Masukkan Bank"value="{{$header->BACNO}}" style="text-align: left" readonly >
                               </div>
                                <div class="col-md-4">
                                    <input type="text" class="form-control BNAMA" id="BNAMA" name="BNAMA" placeholder="-" value="{{$header->BNAMA}}" readonly>
                                </div>
                            </div>


							<div class="form-group row">

                                <div class="col-md-1" align="right">
                                    <label for="TOTAL" class="form-label">TOTAL</label>
                                </div>
                                <div class="col-md-2" align="left">
                                    <input type="text" onclick="select()"  onblur ='ambil_belix()' class="form-control TOTAL" id="TOTAL" name="TOTAL" placeholder="TOTAL" value="{{ number_format($header->TOTAL, 2, '.', ',') }}" style="text-align: right; width:140px" required>
                                </div>

								<div class="col-md-1" align="right">
									<label for="LAIN" class="form-label">LAIN</label>
								</div>
								<div class="col-md-2" align="left">
									<input type="text" onclick="select()"  onblur ='ambil_belix()' class="form-control LAIN" id="LAIN" name="LAIN" placeholder="LAIN" value="{{ number_format($header->LAIN, 2, '.', ',') }}" style="text-align: right; width:140px" required>
								</div>

                                <div class="col-md-1" align="right">
                                    <label for="BAYAR"  class="form-label">BAYAR</label>
                                </div>
                                <div class="col-md-2" align="left">
                                    <input type="text" onclick="select()"  onblur ='ambil_belix()' class="form-control BAYAR" id="BAYAR" name="BAYAR" placeholder="BAYAR" value="{{ number_format($header->BAYAR, 2, '.', ',') }}" style="text-align: right; width:140px" required>
                                </div>
								
                            </div>



							
                            <table id="datatable" class="table table-striped table-border">
                                <thead>
                                    <tr>
										<th width="100px" style="text-align:center">NO.</th>
                                        <th width="200px" style="text-align:center">
								        	<label style="color:red;font-size:20px">* </label>
                                            <label for="BACNO" class="form-label">NO BUKTI</label>
										</th>
                                        <th width="200px" style="text-align:center">TGL</th>
                                        <th width="200px" style="text-align:center">TOTAL</th>
                                        <th width="200px" style="text-align:center">BAYAR</th>
                                        <th></th>										
                                    </tr>
                                </thead>
        
								<tbody id="detailBeli">
									
                                    <tr>
                                        <td>
                                            <input name="REC[]" id="REC0" type="text" class="form-control REC" value="" readonly required>
                                        </td>
                                        <td>
                                            <input name="NO_FAKTUR[]" id="NO_FAKTUR0" type="text" class="form-control NO_FAKTUR" value="" readonly required>
                                        </td>
                                        <td>
                                            <input name="TGL_FAKTUR[]" id="TGL_FAKTUR0" type="text" class="form-control TGL_FAKTUR" value="" readonly required>
                                        </td>
										<td>
										    <input name="XTOTAL[]" value="0" id="XTOTAL0" type="text" style="text-align: right"  class="form-control XTOTAL" readonly>
										</td>                         
										
										<td>
										    <input name="XBAYAR[]" value="0" id="XBAYAR0" type="text" style="text-align: right"  class="form-control XBAYAR" readonly>
										</td>                        
										
                                       
                                    </tr>
								
                                </tbody>

								<tfoot>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td><input class="form-control TSISA  text-black font-weight-bold" style="text-align: right"  id="TSISA" name="TSISA" value="0" readonly></td>
                                    <td></td>
                                    <td></td>
                                </tfoot>
                            </table>
							
							<!---------
                            <div class="col-md-2 row">
                                <button type="button" onclick="tambah()" class="btn btn-sm btn-success"><i class="fas fa-plus fa-sm md-3"></i> </button>
                            </div>
							---------->
							
                        </div>


						        
						<div class="mt-3 col-md-12 form-group row">
							<div class="col-md-4">
								<button type="button" id='TOPX'  onclick="location.href='{{url('/hut/edit/?idx=' .$idx. '&tipx=top&flagz='.$flagz.'&golz='.$golz.'' )}}'" class="btn btn-outline-primary">Top</button>
								<button type="button" id='PREVX' onclick="location.href='{{url('/hut/edit/?idx='.$header->NO_ID.'&tipx=prev&flagz='.$flagz.'&golz='.$golz.'&buktix='.$header->NO_BUKTI )}}'" class="btn btn-outline-primary">Prev</button>
								<button type="button" id='NEXTX' onclick="location.href='{{url('/hut/edit/?idx='.$header->NO_ID.'&tipx=next&flagz='.$flagz.'&golz='.$golz.'&buktix='.$header->NO_BUKTI )}}'" class="btn btn-outline-primary">Next</button>
								<button type="button" id='BOTTOMX' onclick="location.href='{{url('/hut/edit/?idx=' .$idx. '&tipx=bottom&flagz='.$flagz.'&golz='.$golz.'' )}}'" class="btn btn-outline-primary">Bottom</button>
							</div>
							<div class="col-md-5">
								<button type="button" id='NEWX' onclick="location.href='{{url('/hut/edit/?idx=0&tipx=new&flagz='.$flagz.'&golz='.$golz.'' )}}'" class="btn btn-warning">New</button>
								<button type="button" id='EDITX' onclick='hidup(); ambil_beliy();' class="btn btn-secondary">Edit</button>                    
								<button type="button" id='UNDOX' onclick="location.href='{{url('/hut/edit/?idx=' .$idx. '&tipx=undo&flagz='.$flagz.'&golz='.$golz.'' )}}'" class="btn btn-info">Undo</button>  
								<button type="button" id='SAVEX' onclick='simpan()'   class="btn btn-success" class="fa fa-save"></i>Save</button>

							</div>
							<div class="col-md-3">
								<button type="button" id='HAPUSX'  onclick="hapusTrans()" class="btn btn-outline-danger">Hapus</button>
								<button type="button" id='CLOSEX'  onclick="location.href='{{url('/hut?flagz='.$flagz.'&golz='.$golz.'' )}}'" class="btn btn-outline-secondary">Close</button>
							</div>
						</div>
						
						
                    </form>
                </div>
            </div>
            </div>
        </div>
        </div>
    </div>

	

	<div class="modal fade" id="browsePoModal" tabindex="-1" role="dialog" aria-labelledby="browsePoModalLabel" aria-hidden="true">
	  <div class="modal-dialog modal-lg" role="document">
		<div class="modal-content">
		  <div class="modal-header">
			<h5 class="modal-title" id="browsePoModalLabel">Cari Po#</h5>
			<button type="button" class="close" data-dismiss="modal" aria-label="Close">
			  <span aria-hidden="true">&times;</span>
			</button>
		  </div>
		  <div class="modal-body">
			<table class="table table-stripped table-bordered" id="table-bpo">
				<thead>
					<tr>
						<th>Po#</th>
						<th>Kode</th>
						<th>Nama</th>				
					</tr>
				</thead>
				<tbody>
				</tbody>
			</table>
		  </div>
		  <div class="modal-footer">
			<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
		  </div>
		</div>
	  </div>
	</div>
		

	

	<div class="modal fade" id="browseAccount1Modal" tabindex="-1" role="dialog" aria-labelledby="browseAccount1ModalLabel" aria-hidden="true">
	  <div class="modal-dialog" role="document">
		<div class="modal-content">
		  <div class="modal-header">
			<h5 class="modal-title" id="browseAccount1ModalLabel">Cari Account</h5>
			<button type="button" class="close" data-dismiss="modal" aria-label="Close">
			  <span aria-hidden="true">&times;</span>
			</button>
		  </div>
		  <div class="modal-body">
			<table class="table table-stripped table-bordered" id="table-baccount1">
				<thead>
					<tr>
						<th>Account#</th>
						<th>Nama</th>
					</tr>
				</thead>
				<tbody>
				</tbody>
			</table>
		  </div>
		  <div class="modal-footer">
			<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
		  </div>
		</div>
	  </div>
	</div>	
	
	
@endsection

@section('footer-scripts')
<script src="{{ asset('js/autoNumerics/autoNumeric.min.js') }}"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script> -->
<script src="{{asset('foxie_js_css/bootstrap.bundle.min.js')}}"></script>

<script>
	var idrow = 1;
	var baris = 1;

	function numberWithCommas(x) {
		return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
	}
	
    $(document).ready(function () {
    idrow=0;
    baris=0;

		$tipx = $('#tipx').val();
		$searchx = $('#CARI').val();
		
		$('body').on('keydown', 'input, select', function(e) {
			if (e.key === "Enter") {
				var self = $(this), form = self.parents('form:eq(0)'), focusable, next;
				focusable = form.find('input,select,textarea').filter(':visible');
				next = focusable.eq(focusable.index(this)+1);
				console.log(next);
				if (next.length) {
					next.focus().select();
				} else {
					// tambah();
					// var nomer = idrow-1;
					console.log("NO_BUKTI");
					document.getElementById("NO_BUKTI").focus();
					// form.submit();
				}
				return false;
			}
		});

		
        if ( $tipx == 'new' )
		{
			 baru();	
           //  tambah();
			 
		}

        if ( $tipx != 'new' )
		{
			 ganti();			
		}    
		
		$("#TOTAL").autoNumeric('init', {aSign: '',vMin: '-999999999.99'});
		$("#BAYAR").autoNumeric('init', {aSign: '',vMin: '-999999999.99'});

	
	
		$("#TSISA").autoNumeric('init', {aSign: '',vMin: '-999999999.99'});


		jumlahdata = 100;
		for (i = 0; i <= jumlahdata; i++) {
			$("#XTOTAL" + i.toString()).autoNumeric('init', {aSign: '', vMin: '-999999999.99'});
			$("#XBAYAR" + i.toString()).autoNumeric('init', {aSign: '', vMin: '-999999999.99'});
		}	

	
		
        $('body').on('click', '.btn-delete', function() {
			var val = $(this).parents("tr").remove();
			baris--;
			nomor();
			
		});

		$('.date').datepicker({  
            dateFormat: 'dd-mm-yy'
		});
		

///////////////////////////////////////////////////////////////



		var dTableBAccount1;
		loadDataBAccount1 = function(){
			$.ajax(
			{
				type: 'GET',    
				url: '{{url('account/browsebank')}}',
				success: function( response )
				{
					resp = response;
					if(dTableBAccount1){
						dTableBAccount1.clear();
					}
					for(i=0; i<resp.length; i++){
						
						dTableBAccount1.row.add([
							'<a href="javascript:void(0);" onclick="chooseAccount1(\''+resp[i].ACNO+'\',\''+resp[i].NAMA+'\')">'+resp[i].ACNO+'</a>',
							resp[i].NAMA,
						]);
					}
					dTableBAccount1.draw();
				}
			});
		}
		
		dTableBAccount1 = $("#table-baccount1").DataTable({
			
		});
		
		browseAccount1 = function(){
			loadDataBAccount1();
			$("#browseAccount1Modal").modal("show");
		}
		
		chooseAccount1 = function(acno,nama){
			$("#BACNO").val(acno);
			$("#BNAMA").val(nama);
			$("#browseAccount1Modal").modal("hide");
		}
		
		$("#BACNO").keypress(function(e){
			if(e.keyCode == 46){
				e.preventDefault();
				browseAccount1();
			}
		}); 
		
		


//////////////////////////////////////////////////////////////

		
//////////////////////////////////////////////////////////////////////////////////////////////////

		
 	// var dTableBPo;
	// 	loadDataBPo = function(){
	// 		$.ajax(
	// 		{
	// 			type: 'GET', 		
	// 			url: '{{url('po/browseuang')}}',
	// 			data: {
	// 				'GOL': "{{$golz}}",
	// 			},
	// 			success: function( response )
	// 			{
	// 				resp = response;
	// 				if(dTableBPo){
	// 					dTableBPo.clear();
	// 				}
	// 				for(i=0; i<resp.length; i++){
						
	// 					dTableBPo.row.add([
	// 						'<a href="javascript:void(0);" onclick="choosePo(\''+resp[i].NO_PO+'\',  \''+resp[i].KODES+'\', \''+resp[i].NAMAS+'\' , \''+resp[i].TOTAL+'\' , \''+resp[i].BAYAR+'\' , \''+resp[i].SISA+'\'                )">'+resp[i].NO_PO+'</a>',
	// 						resp[i].KODES,
	// 						resp[i].NAMAS,
	// 						Intl.NumberFormat('en-US').format(resp[i].TOTAL),
	// 						Intl.NumberFormat('en-US').format(resp[i].BAYAR),
	// 						Intl.NumberFormat('en-US').format(resp[i].SISA),
							
	// 					]);
	// 				}
	// 				dTableBPo.draw();
	// 			}
	// 		});
	// 	}
		
	// 	dTableBPo = $("#table-bpo").DataTable({
	// 		columnDefs: [
	// 			{
    //                 className: "dt-right", 
	// 				targets:  [],
	// 				render: $.fn.dataTable.render.number( ',', '.', 2, '' )
	// 			}
	// 		],
	// 	});
		
	// 	browsePo = function(){
	// 		 loadDataBPo();
	// 		$("#browsePoModal").modal("show");
	// 	}
		
	// 	choosePo = function(NO_PO,KODES,NAMAS, TOTAL, BAYAR, SISA ){
	// 		$("#NO_PO").val(NO_PO);
	// 		$("#KODES").val(KODES);
	// 		$("#NAMAS").val(NAMAS);		
	// 		$("#browsePoModal").modal("hide");
			
	// 		getBeli(NO_PO);
	// 		hitung();
	// 	}
		
	// 	$("#NO_PO").keypress(function(e){

	// 		if(e.keyCode == 46){
	// 			e.preventDefault();
	// 			browsePo();
	// 		}
	// 	}); 
		
/////////////////////////////////////////////////////////////////////////////////////////

		var dTableBPo;
		var rowidPo;
		loadDataBPo = function(){
		
			$.ajax(
			{
				type: 'GET',    
				url: "{{url('po/browseuang')}}",
				async : false,
				data: {
						'NO_PO': $("#NO_PO").val(),
						'GOL': "{{$golz}}",
					
				},
				success: function( response )

				{
					resp = response;
					
					
					if ( resp.length > 1 )
					{	
							if(dTableBPo){
								dTableBPo.clear();
							}
							for(i=0; i<resp.length; i++){
								
								dTableBPo.row.add([
									'<a href="javascript:void(0);" onclick="choosePo(\''+resp[i].NO_PO+'\',  \''+resp[i].KODES+'\', \''+resp[i].NAMAS+'\', \''+resp[i].ALAMAT+'\', \''+resp[i].KOTA+'\'    )">'+resp[i].NO_PO+'</a>',
									resp[i].KODES,
									resp[i].NAMAS,
									// Intl.NumberFormat('en-US').format(resp[i].TOTAL),
									// Intl.NumberFormat('en-US').format(resp[i].BAYAR),
									// Intl.NumberFormat('en-US').format(resp[i].SISA),
								]);
							}
							dTableBPo.draw();
					
					}
					else
					{
						$("#NO_PO").val(resp[0].NO_PO);
						$("#KODES").val(resp[0].KODES);
						$("#NAMAS").val(resp[0].NAMAS);
						$("#ALAMAT").val(resp[0].ALAMAT);
						$("#KOTA").val(resp[0].KOTA);
						// $("#TOTAL").val(resp[0].TOTAL);
						// $("#BAYAR").val(resp[0].BAYAR);
						// $("#SISA").val(resp[0].SISA);
					}
				}
			});
		}
		
		dTableBPo = $("#table-bpo").DataTable({
			
		});

		browsePo = function(rid){
			rowidPo = rid;
			$("#NAMAS").val("");			
			loadDataBPo();
	
			
			if ( $("#NAMAS").val() == '' ) {				
					$("#browsePoModal").modal("show");
			}	
		}
		
		choosePo = function(NO_PO,KODES,NAMAS, ALAMAT, KOTA ){
			$("#NO_PO").val(NO_PO);
			$("#KODES").val(KODES);
			$("#NAMAS").val(NAMAS);
			$("#ALAMAT").val(ALAMAT);
			$("#KOTA").val(KOTA);
			// $("#TOTAL").val(TOTAL);
			// $("#BAYAR").val(BAYAR);		
			// $("#SISA").val(SISA);	
			$("#browsePoModal").modal("hide");

			getBeli(NO_PO);
			hitung();
		}
		
		
		/* $("#NO_PO0").onblur(function(e){
			if(e.keyCode == 46){
				e.preventDefault();
				browsePo(0);
			}
		});  */
		
//////////////////////////////////////////////////////////////////////////////////////////////////


		
	
		
    });


	function cekDetail(){
		var cekFaktur = '';
		$(".XBAYAR").each(function() {
			let z = $(this).closest('tr');
			var TOTALX = parseFloat(z.find('.XTOTAL').val().replace(/,/g, ''));
			var BAYARX = parseFloat(z.find('.XBAYAR').val().replace(/,/g, ''));
	
		});

		return cekFaktur;
	}

 	function simpan() {
		hitung();
		
		var tgl = $('#TGL').val();
		var bulanPer = {{session()->get('periode')['bulan']}};
		var tahunPer = {{session()->get('periode')['tahun']}};

        	var check = '0';
		

			// if ( $('#BACNO').val()=='' ) 
            // {				
			//     check = '1';
			// 	alert("Type Cash Bank Harus Diisi.");
			// }
			
			
			// cek save format tgl otomatis

			if (tgl.includes("-")) {
				if ( tgl.substring(3,5) != bulanPer ) 
				{
					check = '1';
					alert("Bulan tidak sama dengan Periode");
				}	
				
				if ( tgl.substring(tgl.length-4) != tahunPer )
				{
					check = '1';
					alert("Tahun tidak sama dengan Periode");
				}	
			}else{
				if ( tgl.substring(2,4) != bulanPer ) 
				{
					check = '1';
					alert("Bulan tidak sama dengan Periode");
				}	
				
				if ( tgl.substring(tgl.length-4) != tahunPer )
				{
					check = '1';
					alert("Tahun tidak sama dengan Periode");
				}
			}

			//


			// if ( tgl.substring(3,5) != bulanPer ) 
			// {
			// 	check = '1';
			// 	alert("Bulan tidak sama dengan Periode");
			// }	
			
			// if ( tgl.substring(tgl.length-4) != tahunPer )
			// {
			// 	check = '1';
			// 	alert("Tahun tidak sama dengan Periode");
		    // }

			if (baris==0)
			{
				check = '1';
				alert("Data detail kosong (Tambahkan 1 baris kosong jika ingin mengosongi detail)");
			}

		(check==0) ? document.getElementById("entri").submit() : alert('Masih ada kesalahan');

			
	}
	
	
	function getBeli(NO_PO)
	{
 		 var mulai = (idrow==baris) ? idrow-1 : idrow;
		 var zbukti = $("#NO_BUKTI").val() ;
		 var ztgl = $("#TGL").val();
		
		 var ztotal = $("#TOTAL").val();
		 var zbayar = $("#BAYAR").val();
		 
		$.ajax(
			{
				type: 'GET',    
				url: "{{url('po/browseisi')}}",
				data: {
					NO_PO: NO_PO,
				},
				success: function( resp )
				{
					var html = '';
					for(i=0; i<resp.length; i++){
						html+=`<tr>
                                    <td><input name='REC[]' id='REC${i}' value='1' type='text' class='REC form-control' onkeypress='return tabE(this,event)' readonly></td>
                                    <td><input name='NO_FAKTUR[]' data-rowid=${i} id='NO_FAKTUR${i}' value="${resp[i].NO_FAKTUR}" type='text' class='form-control NO_FAKTUR'  readonly ></td>
                                    <td><input name='TGL_FAKTUR[]' data-rowid=${i} id='TGL_FAKTUR${i}' value="${resp[i].TGL_FAKTUR}" type='text' class='form-control TGL_FAKTUR'  readonly ></td>

                                    <td><input name='XTOTAL[]' onblur="hitung()" id='XTOTAL${i}' value="${resp[i].TOTAL}" type='text' style='text-align: right' class='form-control XTOTAL text-primary' readonly required></td>
                                    <td><input name='XBAYAR[]' onblur="hitung()" id='XBAYAR${i}' value="${resp[i].BAYAR}" type='text' style='text-align: right' class='form-control XBAYAR text-primary' readonly required></td>
								</tr>`;
								
					}

					idrow=resp.length;
					baris=resp.length;
					
		            if (zbukti == '+' )
					{	
						html+=`<tr>
                                    <td><input name='REC[]' id='REC${idrow}' value='1' type='text' class='REC form-control' onkeypress='return tabE(this,event)' readonly></td>
                                    <td><input name='NO_FAKTUR[]'  id='NO_FAKTUR${idrow}' value="${zbukti}" type='text' class='form-control NO_FAKTUR'  readonly ></td>
                                    <td><input name='TGL_FAKTUR[]'  id='TGL_FAKTUR${idrow}' value="${ztgl}" type='text' class='form-control TGL_FAKTUR'  readonly ></td>

                                    <td><input name='XTOTAL[]' onblur="hitung()" id='XTOTAL${idrow}' value="${ztotal}" type='text' style='text-align: right' class='form-control XTOTAL text-primary' readonly required></td>
                                    <td><input name='XBAYAR[]' onblur="hitung()" id='XBAYAR${idrow}' value="${zbayar}" type='text' style='text-align: right' class='form-control XBAYAR text-primary' readonly required></td>
								</tr>`;

					idrow =idrow + 1;
					baris =baris + 1;

					}
					
					$('#detailBeli').html(html);
					$(".XTOTAL").autoNumeric('init', {aSign: '', vMin: '-999999999.99'});
					$(".XTOTAL").autoNumeric('update');
					
					$(".XBAYAR").autoNumeric('init', {aSign: '', vMin: '-999999999.99'});
					$(".XBAYAR").autoNumeric('update');
					
					
					nomor();
					hitung();
			
				}
			});
	}
	
	
		
    function nomor() {
		var i = 1;
		$(".REC").each(function() {
			$(this).val(i++);
		});
	//	 hitung();
	}

    function hitung() {
		var TSISA = 0;

		$(".XBAYAR").each(function() {
			
			let z = $(this).closest('tr');
			var XTOTALX = parseFloat(z.find('.XTOTAL').val().replace(/,/g, ''));
			var XBAYARX = parseFloat(z.find('.XBAYAR').val().replace(/,/g, ''));

            var SISAX  = XTOTALX - XBAYARX ;

            TSISA +=SISAX;				
		
		});
		
		
		if(isNaN(TSISA)) TSISA = 0;

		$('#TSISA').val(numberWithCommas(TSISA));		
		$("#TSISA").autoNumeric('update');
	}
	
	function ambil_belix() {
	
		 var zbukti = $("#NO_BUKTI").val() ;
		 var ztgl = $("#TGL").val();
		
		 var ztotal = $("#TOTAL").val();
		 var zbayar = $("#BAYAR").val();
		
		
		jumlahdata = 100;
		baris1 = baris - 1;
		
		for (i = 0; i <= jumlahdata; i++) {
			
			if ( i == baris1 )
			{
				
			     $("#NO_FAKTUR" + i.toString()).val(zbukti);
			     $("#TGL_FAKTUR" + i.toString()).val(ztgl);
			     $("#XTOTAL" + i.toString()).val(ztotal);
			     $("#XBAYAR" + i.toString()).val(zbayar);
					
					}			
		}
		
		hitung();
		
		
	}
	
	function ambil_beliy() {
		
		 var NO_PO = $("#NO_PO").val() ;
         getBeli(NO_PO);
		
		hitung();	
	}
	
	

	function baru() {
		
		 kosong();
		 hidup();
	
	}
	
	function ganti() {
		
		mati();
		// hidup();
	}
	
	function batal() {
		
		// alert($header[0]->NO_BUKTI);
		
		 //$('#NO_BUKTI').val($header[0]->NO_BUKTI);	
		 mati();
	
	}
	
 

	
	
	function hidup() {

		
		$("#TOPX").attr("disabled", true);
	    $("#PREVX").attr("disabled", true);
	    $("#NEXTX").attr("disabled", true);
	    $("#BOTTOMX").attr("disabled", true);

	    $("#NEWX").attr("disabled", true);
	    $("#EDITX").attr("disabled", true);
	    $("#UNDOX").attr("disabled", false);
	    $("#SAVEX").attr("disabled", false);
		
	    $("#HAPUSX").attr("disabled", true);
	    //$("#CLOSEX").attr("disabled", true);


		$("#CARI").attr("readonly", true);	
	    $("#SEARCHX").attr("disabled", true);
		
	    $("#PLUSX").attr("hidden", false)
		   
			$("#NO_BUKTI").attr("readonly", true);		   
			$("#TGL").attr("readonly", false);
			// $("#NO_PO").attr("readonly", true);
			$("#TYPE").attr("readonly", false);
			$("#NO_BG").attr("readonly", false);
			$("#KODES").attr("readonly", true);
			$("#NAMAS").attr("readonly", true);
			$("#BACNO").attr("readonly", true);
			$("#BNAMA").attr("readonly", true);
			$("#TOTAL").attr("readonly", false);
			$("#BAYAR").attr("readonly", false);
			$("#LAIN").attr("readonly", false);
			
			$("#NOTES").attr("readonly", false);

			$tipx = $('#tipx').val();
		
			
			if ( $tipx != 'new' )
			{
				$("#NO_PO").attr("readonly", true);		
				$("#NO_PO").removeAttr('onblur');	
				document.getElementById("NO_PO").addEventListener("blur", getBeli);	
			} 
	

		jumlahdata = 100;
		for (i = 0; i <= jumlahdata; i++) {
			$("#REC" + i.toString()).attr("readonly", true);
			$("#NO_FAKTUR" + i.toString()).attr("readonly", true);
			$("#TGL_FAKTUR" + i.toString()).attr("readonly", true);
			$("#XTOTAL" + i.toString()).attr("readonly", true);
			$("#XBAYAR" + i.toString()).attr("readonly", true);		
		}

		
	}


	function mati() {

		
	    $("#TOPX").attr("disabled", false);
	    $("#PREVX").attr("disabled", false);
	    $("#NEXTX").attr("disabled", false);
	    $("#BOTTOMX").attr("disabled", false);


	    $("#NEWX").attr("disabled", false);
	    $("#EDITX").attr("disabled", false);
	    $("#UNDOX").attr("disabled", true);
	    $("#SAVEX").attr("disabled", true);
	    $("#HAPUSX").attr("disabled", false);
	    $("#CLOSEX").attr("disabled", false);

		$("#CARI").attr("readonly", false);	
	    $("#SEARCHX").attr("disabled", false);
		
	    $("#PLUSX").attr("hidden", true)
		
	    $(".NO_BUKTI").attr("readonly", true);	
		
		$("#TGL").attr("readonly", true);
		$("#NO_PO").attr("readonly", true);
		$("#TYPE").attr("readonly", true);
		$("#NO_BG").attr("readonly", true);
		$("#KODES").attr("readonly", true);
		$("#NAMAS").attr("readonly", true);
		$("#BACNO").attr("readonly", true);
		$("#BNAMA").attr("readonly", true);
		$("#NOTES").attr("readonly", true);
		$("#TOTAL").attr("readonly", true);
		$("#BAYAR").attr("readonly", true);
		$("#LAIN").attr("readonly", true);

		
		jumlahdata = 100;
		for (i = 0; i <= jumlahdata; i++) {
			$("#REC" + i.toString()).attr("readonly", true);
			$("#NO_FAKTUR" + i.toString()).attr("readonly", true);
			$("#TGL_FAKTUR" + i.toString()).attr("readonly", true);
			$("#XTOTAL" + i.toString()).attr("readonly", true);
			$("#XBAYAR" + i.toString()).attr("readonly", true);		
		}


		
	}


	function kosong() {
				
		 $('#NO_BUKTI').val("+");	
	//	 $('#TGL').val("");	
		 $('#NO_PO').val("");
		 $('#BACNO').val("");	
		 $('#BNAMA').val("");
		 $('#KODES').val("");	
		 $('#NAMAS').val("");	
		 $('#NOTES').val("");	
		 $('#TSISA').val("0.00");
		 
		 $('#TOTAL').val("0.00");
		 $('#BAYAR').val("0.00");
		 
		var html = '';
		$('#detailx').html(html);	
		
	}
	
	function hapusTrans() {
		let text = "Hapus Transaksi "+$('#NO_BUKTI').val()+"?";
		if (confirm(text) == true) 
		{
			window.location ="{{url('/hut/delete/'.$header->NO_ID .'/?flagz='.$flagz.'&golz=' .$golz.'' )}}";
			//return true;
		} 
		return false;
	}
	

	function CariBukti() {
		
		var flagz = "{{ $flagz }}";
		var golz = "{{ $golz }}";
		var cari = $("#CARI").val();
		var loc = "{{ url('/hut/edit/') }}" + '?idx={{ $header->NO_ID}}&tipx=search&flagz=' + encodeURIComponent(flagz) +'&golz=' + encodeURIComponent(golz) + '&buktix=' +encodeURIComponent(cari);
		window.location = loc;
		
	}
	
	function tambah() {

        var x = document.getElementById('datatable').insertRow(baris + 1);
        
		 var zbukti = $("#NO_BUKTI").val() ;
		 var ztgl = $("#TGL").val();
		
		 var ztotal = $("#TOTAL").val();
		 var zbayar = $("#BAYAR").val();
		
		html=`<tr>

                <td>
					<input name='REC[]' id='REC${idrow}' type='text' class='REC form-control' onkeypress='return tabE(this,event)' readonly>
	            </td>
						       
                <td>
				    <input name='NO_FAKTUR[]' data-rowid=${idrow}  value ="${zbukti}" id='NO_FAKTUR${idrow}' type='text' class='form-control  NO_FAKTUR' required readonly>
                </td>
				
				<td>
		            <input name='TGL_FAKTUR[]' id='TGL_FAKTUR${idrow}' value ="${ztgl}" type='text' style='text-align: right' class='form-control TGL_FAKTUR text-primary' readonly required >
                </td>
				
				<td>
		            <input name='XTOTAL[]'  value ="${ztotal}" id='XTOTAL${idrow}' type='text' style='text-align: right' class='form-control XTOTAL text-primary' readonly required >
                </td>
				
				<td>
		            <input name='XBAYAR[]'   value ="${zbayar}"  id='XBAYAR${idrow}' type='text' style='text-align: right' class='form-control XBAYAR text-primary' readonly required >
                </td>
								
         </tr>`;
				
        x.innerHTML = html;
        var html='';
		
		jumlahdata = 100;
		for (i = 0; i <= jumlahdata; i++) {
			$("#XTOTAL" + i.toString()).autoNumeric('init', {
				aSign: '',
				vMin: '-999999999.99'
			});

			$("#XBAYAR" + i.toString()).autoNumeric('init', {
				aSign: '',
				vMin: '-999999999.99'
			});
				 
		}
 
		

        idrow++;
        baris++;
        nomor();
		
		$(".ronly").on('keydown paste', function(e) {
             e.preventDefault();
             e.currentTarget.blur();
         });

     }
</script>

<script src="autonumeric.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/autonumeric@4.5.4"></script>
<script src="https://unpkg.com/autonumeric"></script>
@endsection