@extends('layout')


@section('content')

<div class="page-header page-header-default">
	<div class="breadcrumb-line">
		<ul class="breadcrumb">
			<li><a href="index.html"><i class="icon-home2 position-left"></i> Master</a></li>
			<li class="active">Perkiraan</li>
		</ul>
	</div>
</div>

<div class="content">
	<div class="panel panel-flat">
		<div class="panel-heading">
			<h5 class="panel-title">Perkiraan</h5>
			<div class="heading-elements">
				<ul class="icons-list">
		      		<li><a data-action="collapse"></a></li>
		      	</ul>
	       	</div>
	    </div>
	    <div class="panel-body">
	    	<button class="btn btn-primary" id="btn_tambah_perkiraan"><i class=""></i>Tambah</button>
	    </div>

	    <table class="table datatable-basic table-stripped tabel_perkiraan" id='tree-1'>
	    	<thead>
				<tr>
					<th>Kode Perkiraan</th>
					<th>Nama Perkiraan</th>
					<th>Saldo Normal</th>
					<th class="text-center">Aksi</th>
				</tr>
			</thead>
			<tbody>
				<!-- @php $no=1; @endphp
				@foreach($data->get() as $row)	
				@php 
				if($row->parent=='0'){$parent="";}else{$parent=$row->parent;}
				@endphp			
				<tr class="treegrid-{{$row->id}} treegrid-parent-{{$parent}}">
					
					<td>{{$row->kode_perkiraan}}</td>
					<td>{{$row->nama_perkiraan}}</td>
					<td>{{$row->saldo_normal}}</td>
					<td>@php if($row->level =='1'){ @endphp
						<button class="btn bg-warning-400" onclick="edit({{$row->id}})"><i class="icon-pencil"></i> </button>
						@php }else{ @endphp
						<button class="btn bg-warning-400" onclick="edit_sub({{$row->id}})"><i class="icon-pencil"></i> </button>
						@php } @endphp
					 <button class="btn bg-danger-800" type="button" onclick="hapus({{$row->id}})"><i class="icon-eraser"></i></button>
						<button class="btn bg-primary" type="button" onclick="tambah_perkiraan({{$row->id}})"><i class="icon-plus2"></i></button>

					</td>
				</tr>
				@endforeach -->
			</tbody>
	    </table>
	     
	</div>
</div>

<div class="modal fade" id="exampleModal"  role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog" role="document">
	    <div class="modal-content">
	    	<div class="modal-header">
	    		<h5 class="modal-title" id="exampleModalLabel">Form Input Perkiraan</h5>
	    		<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span></button>
	      	</div>
	      	<div class="modal-body">
	      		<form class="form-horizontal" autocomplete="off">
	      			<input type="hidden" name="popup_id">
	      			<input type="hidden" name="popup_parent">
	      			<div class="form-group">
	      				<label class="control-label col-sm-4">Level</label>
	      				<div class="col-sm-8">
	      					<select name="popup_level" class="select-search" data-placeholde="Pilih">
                            <option value="">--Pilih--</option>
                            <option value="1">Level 1</option>
                            </select>
	      				</div>
	      			</div>
	      			<div class="form-group">
	      				<label class="control-label col-sm-4">Kode Perkiraan</label>
	      				<div class="col-sm-8">
	      					<input type="text" name="popup_kode" class="form-control">
	      				</div>
	      			</div>
	      			<div class="form-group">
	      				<label class="control-label col-sm-4">Nama Perkiraan</label>
	      				<div class="col-sm-8">
	      					<input type="text" name="popup_nama" class="form-control">
	      				</div>
	      			</div>
	      			<div class="form-group">
	      				<label class="control-label col-sm-4">Saldo Normal</label>
	      				<div class="col-sm-8">
	      					<select name="popup_saldo" class="form-control">
	      						<option value="">--Pilih--</option>
	      						<option value="Debet">Debet</option>
	      						<option value="Kredit">Kredit</option>
	      					</select>
	      				</div>
	      			</div>
	      		</form>
	      	</div>
	      	<div class="modal-footer">
	        	<button type="button" class="btn btn-primary" id="btn_popup_simpan">Simpan</button>
	      	</div>
	    </div>
	</div>
</div>
<div class="modal fade" id="exampleModal2"  role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog" role="document">
	    <div class="modal-content">
	    	<div class="modal-header">
	    		<h5 class="modal-title" id="exampleModalLabel">Form Input Perkiraan</h5>
	    		<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span></button>
	      	</div>
	      	<div class="modal-body">
	      		<form class="form-horizontal" autocomplete="off">
	      			<input type="hidden" name="popup_sub_id">
	      			<input type="hidden" name="popup_sub_level">
	      			<input type="hidden" name="popup_sub_parent">
	      			<div class="form-group">
	      				<label class="control-label col-sm-4">Perkiraan</label>
	      				<div class="col-sm-8">
	      					<input type="text" name="parent_perkiraan" class="form-control" readonly="readonly">
	      				</div>
	      			</div>
	      			<div class="form-group">
	      				<label class="control-label col-sm-4">Kode Sub Perkiraan</label>
	      				<div class="col-sm-8">
	      					<input type="text" name="popup_sub_kode" class="form-control">
	      				</div>
	      			</div>
	      			<div class="form-group">
	      				<label class="control-label col-sm-4">Nama Sub Perkiraan</label>
	      				<div class="col-sm-8">
	      					<input type="text" name="popup_sub_nama" class="form-control">
	      				</div>
	      			</div>
	      			<div class="form-group">
	      				<label class="control-label col-sm-4">Saldo Normal</label>
	      				<div class="col-sm-8">
	      					<select name="popup_sub_saldo" class="form-control">
	      						<option value="">--Pilih--</option>
	      						<option value="Debet">Debet</option>
	      						<option value="Kredit">Kredit</option>
	      					</select>
	      				</div>
	      			</div>
	      		</form>
	      	</div>
	      	<div class="modal-footer">
	        	<button type="button" class="btn btn-primary" id="btn_popup_sub_simpan">Simpan</button>
	      	</div>
	    </div>
	</div>
</div>
<script type="text/javascript">
	$(document).ready(function(){
		$('select-search22').select2();
	});
</script>
<script type="text/javascript">
	$("#btn_tambah_perkiraan").click(function(){
		$("#exampleModal").modal("show");
	})

	function edit_akun(){
		$("#exampleModal").modal("show");
	}
</script>

<script type="text/javascript">
	var tb;

	$(document).ready(function(){
		/*tb = $(".tabel_perkiraan").DataTable();

		tb.on( 'order.dt search.dt', function () {
            tb.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
                cell.innerHTML = i+1;
            } );
        } ).draw();
        tb.clear().draw();*/
        tb =  $(".tabel_perkiraan").treegrid({initialState: 'collapsed'});

		get_perkiraan();

	})

	$("#btn_tambah_perkiraan").click(function(){
		$("[name=popup_id]").val('');
		$("[name=popup_kode]").val('');
		$("[name=popup_nama]").val('');
		$("[name=popup_level]").val('');
		$("[name=popup_saldo]").val('');
		$("[name=popup_parent]").val('');

		$("#exampleModal").modal("show");
	})

	

	function get_perkiraan(){
		$.ajax({
			url: "{{ url('perkiraan/tampil')}}  ",
			type: 'get',
			dataType: 'json',
			success: function(respon){
				tb.clear().draw();
				for(i in respon){
					tb.row.add([
						'<div>'+respon[i].kode_perkiraan+'</div>',
						'<div>'+respon[i].nama_perkiraan+'</div>',
						'<div>'+respon[i].saldo_normal+'</div>',
						'<div><center>'+respon[i].aksi+'</center></div>'+
						'<input type="hidden" id="table_id'+respon[i].id_perkiraan+'" value="'+respon[i].id_perkiraan+'">'+
						'<input type="hidden" id="table_level'+respon[i].id_perkiraan+'" value="'+respon[i].level+'">'+
						'<input type="hidden" id="table_kode'+respon[i].id_perkiraan+'" value="'+respon[i].kode_perkiraan+'">'+
						'<input type="hidden" id="table_nama'+respon[i].id_perkiraan+'" value="'+respon[i].nama_perkiraan+'">'+
						'<input type="hidden" id="table_saldo'+respon[i].id_perkiraan+'" value="'+respon[i].saldo_normal+'">'+
						'<input type="hidden" id="table_parent'+respon[i].id_perkiraan+'" value="'+respon[i].parent+'">'						
						]).draw(false).addClass('treegrid-'+respon[i].id_perkiraan+' treegrid-parent-'+respon[i].parent+'');
				}
			}
		})
	}


	

	
	function edit(id){
		var id = $("#table_id"+id).val();
		var level = $("#table_level"+id).val();
		var kode = $("#table_kode"+id).val();
		var nama = $("#table_nama"+id).val();
		var saldo = $("#table_saldo"+id).val();
		var parent = $("#table_parent"+id).val();

		$("[name=popup_id]").val(id);
		//$("[name=popup_level]").val(level);
		$("[name=popup_level]").html('');
		$("[name=popup_level]").append('<option value="'+level+'"> Level '+level+'</option>');
		$("[name=popup_kode]").val(kode);
		$("[name=popup_nama]").val(nama);
		$("[name=popup_saldo]").val(saldo);
		$("[name=popup_parent]").val(parent);

		$("#exampleModal").modal('show');

	}

	function hapus(id){
		swal({
			title: 'Anda yakin akan menghapus item ini?',
			type: 'warning',
			showCancelButton: true,
			confirmButtonColor: '#3085d6',
			cancelButtonColor: '#d33',
			confirmButtonText: 'Ya',
			cancelButtonText: 'Tidak',
		}).then((result) => {
		 	if(result.value){
		 		$.ajax({
					url: "{{ url('perkiraan/hapus')}} ",
					type: 'post',
					data: {id : id},
					headers : {
						'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
					},
					success: function(respon){
						get_perkiraan();
					}
				})
		 	}
		})
	}

	

	$("#btn_popup_simpan").click(function(){
		var id = $("[name=popup_id]").val();
		var level = $("[name=popup_level]").val();
		var kode = $("[name=popup_kode]").val();
		var nama = $("[name=popup_nama]").val();
		var saldo = $("[name=popup_saldo]").val();
		var parent = $("[name=popup_parent]").val();

		if(kode != ''){
			$.ajax({
				url: "{{ url('perkiraan/simpan')}} ",
				type: 'post',
				data: {id:id, level:level, kode:kode, nama:nama, saldo:saldo, parent:parent},
				headers : {
					'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
				},
				success: function(respon){
					get_perkiraan();
					$("#exampleModal").modal('hide');
					//location.href = "{{url('perkiraan')}}";
				}
			})
		}
	})

/*----------------------------------- SUB ------------------------------------------*/
	function tambah_perkiraan(id){
		var id_perkiraan = $("#table_id"+id).val();
		var level = $("#table_level"+id).val();
		level=parseInt(level);
		var kode_perkiraan = $("#table_kode"+id).val();
		var nama_perkiraan = $("#table_nama"+id).val();

		$("[name=popup_sub_level]").val(level+1);
		$("[name=popup_sub_parent]").val(id_perkiraan);
		$("[name=parent_perkiraan]").val(kode_perkiraan+' - '+nama_perkiraan)
		$("[name=popup_sub_kode]").val('');
		$("[name=popup_sub_nama]").val('');
		$("[name=popup_sub_saldo]").val('');

		$("#exampleModal2").modal("show");
	}

	function edit_sub(id){
		var id = $("#table_id"+id).val();
		var level = $("#table_level"+id).val();
		var kode = $("#table_kode"+id).val();
		var nama = $("#table_nama"+id).val();
		var saldo = $("#table_saldo"+id).val();
		var parent = $("#table_parent"+id).val();

		$("[name=popup_sub_id]").val(id);
		$("[name=popup_sub_level]").val(level);
		$("[name=popup_sub_kode]").val(kode);
		$("[name=popup_sub_nama]").val(nama);
		$("[name=popup_sub_saldo]").val(saldo);
		$("[name=popup_sub_parent]").val(parent);
		
		$.ajax({
			url: "{{ url('perkiraan/cekParent') }}",
			type: 'get',
			dataType:'json',
			data: {parent:parent},
			headers:{
				'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			},
			success: function(respon){
				$("[name=parent_perkiraan]").val(respon.kode_perkiraan+' - '+respon.nama_perkiraan);
			} 
		})

		$("#exampleModal2").modal('show');

	}

	$("#btn_popup_sub_simpan").click(function(){
		var id = $("[name=popup_sub_id]").val();
		var level = $("[name=popup_sub_level]").val();
		var kode = $("[name=popup_sub_kode]").val();
		var nama = $("[name=popup_sub_nama]").val();
		var saldo = $("[name=popup_sub_saldo]").val();
		var parent = $("[name=popup_sub_parent]").val();

		if(kode != ''){
			$.ajax({
				url: "{{ url('perkiraan/simpan')}} ",
				type: 'post',
				data: {id:id, level:level, kode:kode, nama:nama, saldo:saldo, parent:parent},
				headers : {
					'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
				},
				success: function(respon){
					get_perkiraan();
					$("#exampleModal2").modal('hide');
					//location.href = "{{url('perkiraan')}}";
				}
			})
		}
	})
</script>

@endsection