@extends('layout')

@section('js_script')
@endsection

@section('content')
<style type="text/css">
	.details-control{
		cursor: pointer;
	}
</style>
@php
	function isNegative($number) {
		if ($number < 0) {
			return "(".currency(abs($number)).")";
		} else {
			return currency($number);
		}
	}

	function currency($number) {
		return number_format($number, 2, ',', '.');
	}
@endphp

<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> Laporan</a></li>
			<li class="active">Buku Besar</li>
		</ul>
	</div>
</div>

<div class="content">
	<div class="panel panel-flat">
		<div class="panel-heading">
			<h5 class="panel-title">Buku Besar</h5>
	    </div>
	    <div class="panel-body">
	    	<div class="row">
	    		<div class="col-sm-8 col-md-8">
			    	<form class="form-horizontal" method="get" action="" id="form-filter-jurnal">
			    		<div class="form-group">
			    			{{ Form::label("Perkiraan", "", ['class'=>'control-label col-sm-2']) }}
			    			<div class="col-sm-8">
			    				<select name="id_akun" id="id_akun" class="form-control select-search">
			    					<!-- <option value="0">Semua Akun</option> -->
			    					@foreach($akun_perkiraan AS $key=>$value)
			    					<option value="{{$value->id}}">{{ format_akun_perkiraan($value) }}</option>
			    					@endforeach
			    				</select>
			    			</div>
			    		</div>
			    		<div class="form-group">
			    			{{ Form::label("Tanggal", "", ['class'=>'control-label col-sm-2 col-md-2']) }}
			    			<div class="col-sm-3 col-md-3" >
				    			{{ Form::text("tanggal_awal", date("d-m-Y"), ['class'=>'form-control set_datepicker','id'=>'tanggal_awal']) }}
				    		</div>
			    			<div class="col-sm-3 col-md-3" >
				    			{{ Form::text("tanggal_akhir", date("d-m-Y"), ['class'=>'form-control set_datepicker','id'=>'tanggal_akhir']) }}
				    		</div>
			    			<div class="col-sm-3 col-md-3 btn-group">
				    			<button type="submit" class="btn btn-sm btn-info">
				    				<i class="fa fa-filter"></i> Filter
				    			</button>
				    			<a href="javascript:void(0)" id="btn_excel" class="btn btn-sm btn-success"><i class="fa fa-file-excel-o"></i> Excel</a>
				    		</div>
			    		</div>
			    		<!-- <div class="form-group">
			    			{{ Form::label("", "", ['class'=>'control-label col-sm-2 col-md-2']) }}
    			    		<div class="col-sm-3 col-md-3 btn-group">
    					    	<a href="javascript:void(0)" id="btn_excel" class="btn btn-sm btn-success"><i class="fa fa-file-excel-o"></i> Excel</a>
    			    		</div>
			    		</div> -->
			    	</form>	
	    		</div>
	    		
	    		<div class="col-sm-12 col-md-12" style="margin-top: 2%;" id="div-tabel-buku-besar">
	    		<div class="table-responsive">	
	    			<table class="table" id="tabel-buku-besar">
	    				<thead>
	    					<tr>
	    						<th>Tanggal</th>
	    						<th>No Bukti</th>
	    						<th>Keterangan</th>
	    						<th>Debet</th>
	    						<th>Kredit</th>
	    						<th>Saldo</th>
	    					</tr>
	    				</thead>
	    				<tbody>

	    				</tbody>
	    				<tfoot>

	    				</tfoot>
	    			</table>
	    		</div>

	    		</div>

	    	</div> <!-- end : row -->

	    </div>
	</div>
</div>

<script type="text/javascript">
	var table;
	var urlParam;
	var urlData;

	var arr_key = [];
	var arr_detail = [];
	var arr_saldo_awal = [];
	var base_url = "{{ url('/') }}";

	function isNegative(number) {
		if (parseFloat(number) < 0) {
			return "("+currency.format(Math.abs(parseFloat(number)))+")";
		} else {
			return currency.format(parseFloat(number));
		}
	}

	var currency = new Intl.NumberFormat('de-DE', { 
        // style: 'currency', 
        // currency: 'IDR', 
        minimumFractionDigits: 2, 
    });

$(document).ready(function(){
	$(".set_datepicker").datepicker({
		format : "dd-mm-yyyy",
		autoclose : true,
      	zIndexOffset : 9999,
	});

	urlParam = getUrlParams();
	urlData = '{{ url("laporan/get_data_buku_besar") }}';

	if(Object.keys(urlParam).length > 1){
		urlData += '?id_akun='+urlParam['id_akun']+'&tanggal_awal='+urlParam['tanggal_awal']+'&tanggal_akhir='+urlParam['tanggal_akhir'];
		$("select[name=id_akun]").val(urlParam['id_akun']).trigger("change");
	}
	
	table = $('#tabel-buku-besar').DataTable({
		serverSide : true,
		processing : true,
		deferRender : true,
		searchDelay: 1500,
		filter : false,
		ajax : urlData,
		columns : [
			{data:'kode_perkiraan', name:'kode_perkiraan'},
			{data:'perkiraan', name:'perkiraan'},
			{data:'kode_perkiraan', name:'kode_perkiraan'},
			{data:'kode_perkiraan', name:'kode_perkiraan'},
			{data:'kode_perkiraan', name:'kode_perkiraan'},
			{data:'kode_perkiraan', name:'kode_perkiraan'},
		],
		order : false,
		scrollX : true,
		createdRow : function(row, data, index){
			arr_key.push(data.kode_perkiraan);
			arr_detail.push(data.child);
			arr_saldo_awal.push(data.saldo_awal);
			// console.log(data);

			$("td", row).addClass('details-control');
			$("td", row).eq(1).attr("colspan", 6);
			$("td", row).eq(0).css("display", 'none');
			$("td", row).eq(2).css("display", 'none');
			$("td", row).eq(3).css("display", 'none');
			$("td", row).eq(4).css("display", 'none');
			$("td", row).eq(5).css("display", 'none');


		}
	});
     
    // Add event listener for opening and closing details
    $('#tabel-buku-besar tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );

        var dataRow = row.data();
        var indexOfKey = arr_key.indexOf(dataRow.kode_perkiraan);
        // console.log(arr_saldo_awal[indexOfKey]);

        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format(arr_saldo_awal[indexOfKey], arr_detail[indexOfKey]) ).show();
            tr.addClass('shown');
        }
    } );
});

/* Formatting function for row details - modify as you need */
	function format (s, d) {
		// d.sort();
		var rows = '';
		var perkiraan = '';
		var debet = 0;
		var kredit = 0;
		var saldo = 0;

		// for(i in s){
			debet = s.debet;
			kredit = s.kredit;
			saldo = parseFloat(s.saldo);

			rows += '<tr style="font-weight: bold;">'+
		    			'<td>&nbsp;</td>'+
		    			'<td>&nbsp;</td>'+
		    			'<td>'+s.keterangan+'</td>'+
		    			'<td class="text-right">&nbsp;</td>'+
		    			'<td class="text-right">&nbsp;</td>'+
		    			// '<td class="text-right">'+accounting.formatMoney(saldo)+'</td>'+
		    			'<td class="text-right">'+isNegative(saldo)+'</td>'+
		    		'</tr>';	
		// }

		for(i in d){
			perkiraan = d[i].kode_perkiraan+" - "+d[i].nama_perkiraan;
			debet = d[i].tipe_transaksi=="D" ? d[i].nominal : 0;
			kredit = d[i].tipe_transaksi=="K" ? d[i].nominal : 0;
			if(d[i].tipe_transaksi==d[i].saldo_normal){
				saldo += parseFloat(d[i].nominal);

			}else{
				saldo -= parseFloat(d[i].nominal);

			}

			rows += '<tr>'+
		    			'<td>'+dateFormat(d[i].tanggal_ref)+'</td>'+
		    			'<td>'+d[i].nomor_ref+'</td>'+
		    			'<td>'+d[i].keterangan+'</td>'+
		    			// '<td class="text-right">'+accounting.formatMoney(debet)+'</td>'+
		    			'<td class="text-right">'+isNegative(debet)+'</td>'+
		    			// '<td class="text-right">'+accounting.formatMoney(kredit)+'</td>'+
		    			'<td class="text-right">'+isNegative(kredit)+'</td>'+
		    			// '<td class="text-right">'+accounting.formatMoney(saldo)+'</td>'+
		    			'<td class="text-right">'+isNegative(saldo)+'</td>'+
		    		'</tr>';	
		}
	    // `d` is the original data object for the row
	    return '<table class="table">'+
	    	'<tbody>'+
	    		rows
	    		+
	    	'</tbody>'+
	    '</table>';
	}

	function dateFormat(date, format='d-m-Y') {
		if (format == 'd-m-Y') {
			return date.split('-').reverse().join('-');;
		}
	}

	$("#btn_excel").click(function(evt){
		window.open(base_url+'/laporan/buku_besar/excel?tanggal_awal='+$("#tanggal_awal").val()+'&tanggal_akhir='+$("#tanggal_akhir").val()+'&id_akun='+$("#id_akun").val());
	})
</script>

@endsection