<style type="text/css">
	.angucomplete-dropdown {
	    overflow-y: auto;
	    max-height: 350px; // your preference
	}
	.angu {
		width:100%;
	}
</style>
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>resources/css/jquery.autocomplete.css">
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>resources/css/angucomplete-alt.css">
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>resources/css/bariol.css">
<script type="text/javascript" src="<?php echo base_url();?>resources/js/jquery.autocomplete.js"></script> 
<script src="<?php echo base_url();?>resources/js/angular.min.js"></script>
<script src="<?php echo base_url();?>resources/js/angular-sanitize.js"></script>
<script src="<?php echo base_url();?>resources/js/angucomplete-alt.js"></script>
<hr class="thick-line" style="clear:both;">
<div id='content' style="margin: 5px;margin-top:10px; " >
	<div ng-app="jurnalApp" >
		<div ng-controller="jurnalCtrl">
			<div>
				<input id="search-box" class="autocomplete" ng-model="search" name="search" value="" size="50" placeholder="Ketik Nomor Perkara" type="text">
				<span> </span>
				<input id="search-btn1" name="" value="Search" ng-click="searchClick()" type="button" hidden>
			</div>
			<table width="800" id='infoPerkara' style="font-size:14px; margin: 5px;" >
		        <col  width="25%" />
		        <col  width="75%" />
		        <tbody>
		            <tr>
		                <td bgcolor='#008C4B'><font color='#fff'>Nomor Perkara</td>
		                <td><p ng-bind-html="nomor_perkara"></p></td>
		            </tr>
		            <tr>
		                <td bgcolor='#008C4B'><font color='#fff'>Tanggal Pendaftaran</td>
		                <td>{{tanggal_pendaftaran}}</td>
		            </tr>
		            <tr>
		                <td bgcolor='#008C4B'><font color='#fff'>{{pihak_1}}</td>
		                <td><p ng-bind-html="pihak1_text"></p></td>
		            </tr>
		            <tr>
		                <td bgcolor='#008C4B'><font color='#fff'>{{pihak_2}}</td>
		                <td><p ng-bind-html="pihak2_text"></p></td>
		            </tr>
		            <tr>
		                <td bgcolor='#008C4B'><font color='#fff'>Prodeo</td>
		                <td>{{prodeo}}</td>
		            </tr>

		        </tbody>
		    </table>
		    <div class="cssTable" ng-repeat="x in tahapan">
		    	<br>
		    	<h2>Biaya Tingkat {{x.nama}}</h2>
		    	<table id="all_jurnal" width=90% >
		            <tr>
		            	<td width='5%' class="no" rowspan="2">No</td>
		                <td width='15%' class="dates" rowspan="2">Tanggal Transaksi</td>
		                <td width='35%' class="uraian" rowspan="2">Uraian</td>
		                <td width='15%' class="dates" rowspan="2">Pihak</td>
		                <td width='36%' colspan="3">Jumlah</td>
		                <td width='10%' class="ket" rowspan="2">Keterangan</td>
		                <!-- <td width='10%' class="ket" rowspan="2"></td> -->
		            </tr>
		            <tr>
		                <td width='12%' bgcolor="#008C4B" style="text-align: center;border-left: 1px solid white;" class="info"><font color="#fff">Pemasukan</td>
		                <td width='12%' bgcolor="#008C4B" style="text-align: center;" class="info"><font color="#fff">Pengeluaran</td>
		                <td width='12%' bgcolor="#008C4B" style="text-align: center;" class="info"><font color="#fff">Sisa</td>
		            </tr>
		            <tr ng-repeat="biaya in data_biaya[x.id]" ng-init="biaya.editing=[]" focus-child>
		            	<td>
		            		{{$index+1}}
		            		<input type='hidden' name='id_perkara_biaya', value='{{biaya.id}}'>
		            	</td>
		            	<td id='tanggal' ng-click="biaya.editing[1]=true;" ng-init="biaya.editing[1]=false;">
		            		<span ng-show="!biaya.editing[1]">{{biaya.tanggal_transaksi  | date:'dd-MM-yyyy'}}</span>
		            		<input type="text" size="10" class="form-control" ng-blur="biaya.editing[1]=false;" datepicker ng-model="biaya.tanggal_transaksi" ng-show="biaya.editing[1]" />
            			</td>
		            	<td id='uraian' ng-click="biaya.editing[2]=true;" ng-init="biaya.editing[2]=false;biaya.selected_uraian=[];" >
		            		<span ng-show="!biaya.editing[2] && biaya.selected_uraian.length==0">{{biaya.uraian}}</span>
		            		<span ng-show="!biaya.editing[2] && biaya.selected_uraian.length!=0">{{biaya.selected_uraian.originalObject.nama}}</span>
		            		<angucomplete-alt ng-show="biaya.editing[2]" 
		            			id="ex1"
								focus-out="biaya.editing[2]=false;"
								focus-in="focusIn()"
								placeholder="Cari jenis biaya"
								pause="200"
								selected-object="biaya.selected_uraian"
								local-data="jenis_biaya[x.id]"
								search-fields="nama"
								title-field="nama"
								minlength="1"
								initial-value="biaya.uraian"
								input-class="form-control form-control-small angu" >
							</angucomplete-alt>
		            	</td>
		            	<td id='testnamapihak' ng-click="biaya.editing[3]=true" ng-init="biaya.editing[3]=false;biaya.selected_pihak=[];">
		            		
		            		<span ng-show="!biaya.editing[3] && biaya.selected_pihak.length==0">{{biaya.pihak_nama}}</span>
		            		<span ng-show="!biaya.editing[3] && biaya.selected_pihak.length!=0">{{biaya.selected_pihak.originalObject.nama}}</span>
		            		<angucomplete-alt ng-show="biaya.editing[3]"
		            			id="ex2"
								focus-out="biaya.editing[3]=false;"
								focus-in="focusIn()"
								placeholder="Cari pihak pembayar"
								pause="200"
								selected-object="biaya.selected_pihak"
								local-data="pihaks"
								search-fields="nama"
								title-field="nama"
								minlength="1"
								initial-value="biaya.pihak_nama"
								input-class="form-control form-control-small angu" >
							</angucomplete-alt>
		            	</td>
		            	<td id='pemasukan' ng-click="biaya.editing[4]=true" ng-init="biaya.editing[4]=false;" align="right">
		            		<input type="text" class="form-control" ng-model="biaya.pemasukan" ng-blur="biaya.editing[4]=false;" ng-if="biaya.editing[4]"  />
                			<span ng-if="!biaya.editing[4]">{{biaya.pemasukan | number : fractionSize}}</span>
		            	</td>
		            	<td id='pengeluaran' ng-click="biaya.editing[5]=true" ng-init="biaya.editing[5]=false;" align="right">
		            		<input type="text" class="form-control" ng-model="biaya.pengeluaran" ng-blur="biaya.editing[5]=false;" ng-if="biaya.editing[5]"  />
                			<span ng-if="!biaya.editing[5]">{{biaya.pengeluaran | number : fractionSize}}</span>
		            	</td>
		            	<td align="right">{{biaya.sisa | number : fractionSize}}</td>
		            	<td id='keterangan' ng-click="biaya.editing[6]=true" ng-init="biaya.editing[6]=false;">
		            		<input type="text" class="form-control" ng-model="biaya.keterangan" ng-blur="biaya.editing[6]=false;" ng-if="biaya.editing[6]" />
                			<span ng-if="!biaya.editing[6]">{{biaya.keterangan}}</span>
		            	</td>
		            </tr>
		        </table>
		        <button ng-click="addRow(x.id)">Add Row</button>
		        <input type="button" ng-click="biaya.editing=false;simpan_biaya(data_biaya[x.id]);" value="Simpan"/>
		        <input type="button" ng-click="biaya.editing=false;searchClick();" value="Batal"/>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
	var site = "<?php echo base_url();?>";
    $(function(){
        $('.autocomplete').autocomplete({
            serviceUrl: site+'all_jurnal/cari',
            onSelect: function (suggestion) {
               $('#search-btn1').click();
            }
        });
        $('#search-box').click(function(){
        	$(this).select();
        })
    });
</script>
<script>
	var SITEURL = "<?php echo site_url() ?>";
	var app = angular.module('jurnalApp', ['ngSanitize','angucomplete-alt']);
	app.controller('jurnalCtrl', function($scope,$http) {
	    $scope.search= "";
	    $scope.pihak_1 = 'Penggugat/Pemohon';
	    $scope.pihak_2 = 'Tergugat/Termohon';
		$scope.nomor_perkara = '';
		$scope.tahapan = [{'id' : 10,'nama' : 'Pertama'},{'id' : 20,'nama' : 'Banding'},{'id' : 30,'nama' : 'Kasasi'},{'id' : 40,'nama' : 'Peninjauan Kembali'}];
		$scope.get_jenis_biaya = function(){
			var url = "<?php echo base_url().'all_jurnal/get_jenis_biaya';?>";
            $http.get(url).then(function (response) {
            	$scope.jenis_biaya = response.data;
            	$scope.$apply();
            })
		}

		$scope.addRow = function (tahapan_id){	
			var objek = {
					"id":null,"id_pembiayaan":"1",
					"perkara_id":$scope.perkara_id,
					"tahapan_id":tahapan_id,
					"kategori_id":null,
					"jenis_biaya_id":null,
					"pihak_id":null,
					"pihak_ke":null,
					"urutan":null,
					"jenis_transaksi":null,
					"tanggal_transaksi":null,
					"uraian":null,
					"pemasukan":0,
					"pengeluaran":0,
					"jumlah":0,
					"sisa":0,
					"keterangan":null,
					"pihak_nama":null
				};
			// alert(JSON.stringify($scope.data_biaya[tahapan_id]));
			if($scope.data_biaya.hasOwnProperty(tahapan_id)){
				$scope.data_biaya[tahapan_id].push(objek);
			}else{
				$scope.data_biaya[tahapan_id]= [objek];
				
			}
			$scope.$apply();
		}

	    $scope.searchClick = function (data) {
	    	openLoadingDialog();
		    $scope.perkara_id = '';
			$scope.tanggal_pendaftaran = '';
			$scope.pihaks = [];
			$scope.pihak1_text = '';
			$scope.pihak2_text = '';
			$scope.prodeo = '';
			$scope.data_biaya = [];
	        $.post("<?php echo base_url().'all_jurnal/get_info_perkara_sipp';?>", {search: $('#search-box').val()})
	        	.done(function(json){
	          		data = JSON.parse(json);
	          		if(data.st=1){
	          			perkara = data.perkara;
	          			$scope.$apply(function(){
	          				$scope.pihaks = data.pihaks;
	          				$scope.nomor_perkara = perkara.nomor_perkara;
		          			$scope.perkara_id = perkara.perkara_id;
		          			$scope.tanggal_pendaftaran = perkara.tanggal_pendaftaran;
		          			$scope.pihak1_text = perkara.pihak1_text;
		          			$scope.pihak2_text = perkara.pihak2_text;
		          			$scope.prodeo = perkara.prodeo;
		          			$scope.data_biaya=data.data_biaya;
	          			});
	          		};
	          	closeLoading();
	        });
	    };

	    $scope.simpan_biaya = function(data){ 
	    	openLoadingDialog();
	    	var post_data = data; 
	    	var dataJson=angular.toJson(post_data); 
	    	var objectToSerialize={'object':dataJson}; 
	    	var me = this; 
	    	$http({ 
	    		url: "<?php echo base_url().'all_jurnal/set_jurnal_biaya';?>", 
	    		method: "POST", data: $.param(objectToSerialize), 
	    		headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' } 
	    	}).then(function successCallback(response) {
				$scope.searchClick();
				closeLoading();
			}, function errorCallback(response) {
				$('<div id="popup_msg" class="popup"><div class="centering"><table class="pesan"><tr style="background-color: #008C4B;"><td align="center" style="padding:5px;" id="test">Pesan</td><td id="tutup_windows" class="tutup_windows tutups" align="center" style="padding:5px;" width="50">Tutup</td></tr><tr><td style="padding:5px;" colspan="2"><div id="pesan-container"></div></td></tr></table></div></div>').appendTo("body");
				$("#pesan-container").html(response.data.msg);
				$("#tutup_windows").closingDiv(),
				closeLoading(), $("#popup_msg").show()
			});
		}

	    $scope.showNext = function(){
	    	$('.form-control').show();
	    }

	    $scope.pindah = function($event){
	    	var elem = angular.element($event.currentTarget);
	    	 setTimeout(function(){ elem.parent().next().find('.form-control').select(); }, 100);
	    	
	    	// alert(elem.attr('id'));
	    }

	    $scope.focusIn = function() {
	    	this.setSelectionRange(0, this.value.length)
	    }
	    
	    angular.element(document).ready(function () {
            $scope.get_jenis_biaya();
        });
		    
	});

	app.directive('focusChild', ['$window', function ($window) {
	    return {
	        restrict: 'A',
	        link: function (scope, element, attrs) {
	            element.on('click', function () {
	            	element.find('.form-control').select();
	            });
	        }
	    };
	}]);

	app.directive('datepicker', function () {
	  return {
	    restrict: 'A',
	    require : 'ngModel',
	    link : function (scope, element, attrs, ngModelCtrl) {
	        $(function(){
	            element.datepicker({
	                dateFormat:'dd-mm-yy',
	                onSelect:function (date) {
	                    ngModelCtrl.$setViewValue(date);
	                    scope.$apply();

	                }
	            });
	        });
	    }
	} });	
</script>