@extends('layout')

@section('js_script')
	<!-- <script src="{{ url("js/plugins/tables/datatables/extensions/buttons.min.js")}}"></script> -->
	<!-- <script src="{{ url("js/plugins/tables/datatables/extensions/pdfmake/pdfmake.min.js")}}"></script> -->
	<!-- <script src="{{ url("js/plugins/tables/datatables/extensions/pdfmake/vfs_fonts.min.min.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="#"><i class="icon-home2 position-left"></i> Laporan</a></li>
			<li class="active">Jurnal</li>
		</ul>
	</div>
</div>

<div class="content">
	<div class="panel panel-flat">
		<div class="panel-heading">
			<h5 class="panel-title">Jurnal</h5>
	    </div>
	    <div class="panel-body">
	    	<div class="row">
	    		<div class="col-sm-8 col-md-8">
			    	<form class="form" method="get" action="" id="form-filter-jurnal">
			    		<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', 'autocomplete'=>'off', 'data-mask'=>'99-99-9999']) }}
				    		</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', 'autocomplete'=>'off', 'data-mask'=>'99-99-9999']) }}
				    		</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-4 col-md-4">
			    	<form class="form" action="#">
			    		<div class="form-group">
			    			<div class="col-sm-12 col-md-12 text-right">
							
							</div>
						</div>
					</form>
	    		</div>
	    		
	    		<div class="col-sm-12 col-md-12" style="margin-top: 2%;" id="div-tabel-jurnal">
	    		<div class="table-responsive">	
	    			<table class="table" id="tabel-jurnal">
	    				<thead>
	    					<tr>
	    						<th>Tanggal</th>
	    						<th>Keterangan</th>
	    						<th>Debet</th>
	    						<th>Kredit</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 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_jurnal") }}';

	if(Object.keys(urlParam).length > 1){
		urlData += '?tanggal_awal='+urlParam['tanggal_awal']+'&tanggal_akhir='+urlParam['tanggal_akhir'];
	}
	
	table = $('#tabel-jurnal').DataTable({
		serverSide : true,
		processing : true,
		deferRender : true,
		searchDelay: 1500,
		ajax : {
			    url: urlData,
			    type: 'GET',
			    beforeSend: function (request) {
			        arr_key = [];
			        arr_detail = [];
			    }
		},
		columns : [
			{data:'tanggal', name:'tanggal'},
			{data:'key', name:'key'},
			{data:'D', name:'D'},
			{data:'K', name:'K'},
		],
		order : false,
		scrollX : true,
		createdRow : function(row, data, index){
			arr_key.push(data.key);
			arr_detail.push(data.detail);

			if(data['D']!=data['K']){
				$(row).addClass('bg-warning');
			}
			$("td", row).addClass('details-control');
			// $("td", row).eq(2).addClass('text-right').html(accounting.formatMoney(data['D']));
			$("td", row).eq(2).addClass('text-right').html(isNegative(data['D']));
			// $("td", row).eq(3).addClass('text-right').html(accounting.formatMoney(data['K']));
			$("td", row).eq(3).addClass('text-right').html(isNegative(data['K']));
		}
	});
     
    // Add event listener for opening and closing details
    $('#tabel-jurnal 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.key);

        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_detail[indexOfKey]) ).show();
            tr.addClass('shown');
        }
    } );
});

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

	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;
		rows += '<tr>'+
	    			'<td>&nbsp;</td>'+
	    			'<td>'+perkiraan+'</td>'+
	    			'<td class="text-right">'+isNegative(debet)+'</td>'+
	    			'<td class="text-right">'+isNegative(kredit)+'</td>'+
	    		'</tr>';	
	}
    // `d` is the original data object for the row
    return '<table class="table">'+
    	'<tbody>'+
    		rows
    		+
    	'</tbody>'+
    '</table>';
}
$("#btn_excel").click(function(evt){
	window.open(base_url+'/laporan/jurnal_umum/excel?tanggal_awal='+$("#tanggal_awal").val()+'&tanggal_akhir='+$("#tanggal_akhir").val());
})
</script>

@endsection