@extends('layouts.layout')
@section('body_class', 'nav-md')
@section('body_content')
<div class="container body">
	<div class="main_container">
		@include('includes.sidebar')
		<div class="right_col" role="main">
			<div class="page-title">
				<div class="title_left">
					<h3>Summary Debet Credit</h3>
				</div>
				<div class="clearfix"></div>
			</div>

			<div class="row">
				<div class="col-xs-12">
					<div class="x_panel">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h3 class="panel-title">AUM</h3>
							</div>
							<div class="panel-body">
								<div class="form-horizontal">
									<div class="form-group">
										<label class="col-sm-2 control-label">Total Trx. Credit</label>
										<div class="col-sm-4">
											<div class="input-group">
												<div id="total_credit" class="form-control text-right">-</div>
												<div class="input-group-addon">gram</div>
											</div>
										</div>
									</div>
									<div class="form-group">
										<label class="col-sm-2 control-label">Total Trx. Debet</label>
										<div class="col-sm-4">
											<div class="input-group">
												<div id="total_debet" class="form-control text-right">-</div>
												<div class="input-group-addon">gram</div>
											</div>
										</div>
									</div>
									<div class="form-group">
										<label class="col-sm-2 control-label">Selisih</label>
										<div class="col-sm-4">
											<div class="input-group">
												<div id="selisih" class="form-control text-right">-</div>
												<div class="input-group-addon">gram</div>
											</div>
										</div>
									</div>
									<div class="form-group">
										<label class="col-sm-2 control-label">Total AUM</label>
										<div class="col-sm-4">
											<div class="input-group">
												<div id="balance" class="form-control text-right">-</div>
												<div class="input-group-addon">gram</div>
											</div>
										</div>
									</div>
									<div class="form-group">
										<div class="col-sm-6 text-center">
											<input type="button" id="btn-get-aum" value="Get Data"/>
										</div>
									</div>
								</div>
							</div>
						</div>

						<div class="panel panel-default">
							<div class="panel-heading">
								<h3 class="panel-title">Wallet</h3>
							</div>
							<div class="panel-body">
								<div class="form-horizontal">
									<div class="form-group">
										<label class="col-sm-2 control-label">Total Credit</label>
										<div class="col-sm-4">
											<div class="input-group">
												<div class="input-group-addon">Rp.</div>
												<div id="total_credit_wallet" class="form-control text-right">-</div>
											</div>
										</div>
									</div>
									<div class="form-group">
										<label class="col-sm-2 control-label">Total Debet</label>
										<div class="col-sm-4">
											<div class="input-group">
												<div class="input-group-addon">Rp.</div>
												<div id="total_debet_wallet" class="form-control text-right">-</div>
											</div>
										</div>
									</div>
									<div class="form-group">
										<label class="col-sm-2 control-label">Selisih</label>
										<div class="col-sm-4">
											<div class="input-group">
												<div class="input-group-addon">Rp.</div>
												<div id="selisih_wallet" class="form-control text-right">-</div>
											</div>
										</div>
									</div>
									<div class="form-group">
										<label class="col-sm-2 control-label">Total AUM</label>
										<div class="col-sm-4">
											<div class="input-group">
												<div class="input-group-addon">Rp.</div>
												<div id="balance_wallet" class="form-control text-right">-</div>
											</div>
										</div>
									</div>
									<div class="form-group">
										<div class="col-sm-6 text-center">
											<input type="button" id="btn-get-wallet" value="Get Data"/>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="x_panel">
					<div class="x_content">
					</div>
				</div>
			</div>
		</div>
	</div>
	@include('includes.footer')
	</div>
</div>
@endsection

@section('scripts')
<script>
$(function(){
	//var val = [1005387.1328000941, 950606.0954000091];console.log(val[1].toLocaleString('id-ID', {minimumFractionDigits: 4}));
	$(".fa-bars").trigger("click");

	$("#btn-get-aum").click(function(){
		cmp = $(this);
		cmp.hide();
		$(this).parent().append($("<i>").attr({"class":"fa fa-spin fa-spinner"}));
		$("#total_debet, #total_credit, #selisih, #balance").html("-");

		$.ajax({
			url: './debet_credit/get_aum_data',
			method: "POST",
			headers: {
				'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			},
			data: {}
		}).done(function(r) {
			$(cmp).parent().find(".fa-spin").remove();
			$(cmp).show();

			var nf = Intl.NumberFormat("id-ID");
			$("#total_debet").html(Number(r.val.db).toLocaleString('id-ID', {minimumFractionDigits: 4}));
			$("#total_credit").html(Number(r.val.cr).toLocaleString('id-ID', {minimumFractionDigits: 4}));
			$("#selisih").html(Number(r.val.selisih).toLocaleString('id-ID', {minimumFractionDigits: 4}));
			$("#balance").html(Number(r.val.balance).toLocaleString('id-ID', {minimumFractionDigits: 4}));
		});
	});

	$("#btn-get-wallet").click(function(){
		cmp = $(this);
		cmp.hide();
		$(this).parent().append($("<i>").attr({"class":"fa fa-spin fa-spinner"}));
		$("#total_debet_wallet, #total_credit_wallet, #selisih_wallet, #balance_wallet").html("-");

		$.ajax({
			url: './debet_credit/get_wallet_data',
			method: "POST",
			headers: {
				'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			},
			data: {}
		}).done(function(r) {console.log(r);
			$(cmp).parent().find(".fa-spin").remove();
			$(cmp).show();

			var nf = Intl.NumberFormat("id-ID");
			$("#total_debet_wallet").html(Number(r.val.out.total_nominal).toLocaleString('id-ID'));
			$("#total_credit_wallet").html(Number(r.val.in.total_nominal).toLocaleString('id-ID'));
			$("#selisih_wallet").html(Number(r.val.selisih).toLocaleString('id-ID'));
			$("#balance_wallet").html(Number(r.val.balance).toLocaleString('id-ID'));
		});
	});
});
</script>
@endsection