@extends("layouts.default")

@section("title", trans('lang.rush_it_dashboard'))

@section("block-header")
    @lang('lang.rush_it_dashboard')
@stop
@section("breadcrumb")
    @parent
@stop
@section("content")
<div class="main-content">
	<div class="container-fluid">
		<div class="row">
			<div class="col-lg-6">
				<div class="row">
					<div class="col-lg-6">
		                <div class="card bg-center bg-warning">
		                    <div class="card-block">
		                        <div class="row">
		                            <div class="col-md-12">
		                                <p class="text-uppercase font-size-18">{{number_format($data['total_eligibility'])}}</p>
		                                <span>@lang('lang.total_',['name'=>__('lang.eligibility')])</span>
		                            </div>
		                        </div>
		                    </div>
		                </div>
		            </div>
					<div class="col-lg-6">
		                <div class="card bg-center bg-info">
		                    <div class="card-block">
		                        <div class="row">
		                            <div class="col-md-12">
		                                <p class="text-uppercase font-size-18">{{number_format($data['total_proposal'])}}</p>
		                                <span>@lang('lang.total_',['name'=>__('lang.proposal')])</span>
		                            </div>
		                        </div>
		                    </div>
		                </div>
		            </div>
					<div class="col-lg-6 mrg-top-20">
		                <div class="card bg-center bg-BlueViolet">
		                    <div class="card-block">
		                        <div class="row">
		                            <div class="col-md-12">
		                                <p class="text-uppercase font-size-18">{{number_format($data['total_verified'])}}</p>
		                                <span>@lang('lang.total_',['name'=>__('lang.verified_proposal')])</span>
		                            </div>
		                        </div>
		                    </div>
		                </div>
		            </div>
					<div class="col-lg-6 mrg-top-20">
		                <div class="card bg-center bg-success">
		                    <div class="card-block">
		                        <div class="row">
		                            <div class="col-md-12">
		                                <p class="text-uppercase font-size-18">{{number_format($data['total_approved'])}}</p>
		                                <span>@lang('lang.total_',['name'=>__('lang.approved_proposal')])</span>
		                            </div>
		                        </div>
		                    </div>
		                </div>
		            </div>
					<div class="col-lg-6 mrg-top-20">
		                <div class="card bg-center bg-Chocolate">
		                    <div class="card-block">
		                        <div class="row">
		                            <div class="col-md-12">
		                                <p class="text-uppercase font-size-18">{{number_format($data['total_non_id_poor'])}}</p>
		                                <span>@lang('lang.non_id_poor_approved')</span>
		                            </div>
		                        </div>
		                    </div>
		                </div>
		            </div>
					<div class="col-lg-6 mrg-top-20">
		                <div class="card bg-center bg-Coral">
		                    <div class="card-block">
		                        <div class="row">
		                            <div class="col-md-12">
		                                <p class="text-uppercase font-size-18">{{number_format($data['total_id_poor'])}}</p>
		                                <span>@lang('lang.id_poor_approved')</span>
		                            </div>
		                        </div>
		                    </div>
		                </div>
		            </div>
				</div>
			</div>
			<!-- percentage of approval by gender -->
			<div class="col-lg-6">
				<div class="card">
                    <div class="card-block">
                        <div class="chart" id="proposal-gender-chart"></div>
                    </div>
                </div>
			</div>
		</div>
		<div class="row mrg-top-20">
			<!-- proposal status chart -->
			<div class="col-lg-12">
                <div class="card">
                    <div class="card-block">
                        <div class="row">
                            <div class="col-md-12">
                            	<div class="combo-chart" id="proposal-status-chart"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- invoice cost chart -->
			<div class="col-lg-12 mrg-top-20">
                <div class="card">
                    <div class="card-block">
                        <div class="row">
                            <div class="col-md-12">
                            	<div class="combo-chart" id="invoice-cost-chart"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
		</div>
	</div>
</div>
<style type="text/css">
.card.bg-center{ color: #fff; text-align: center; }
.chart { height: 315px; }
.combo-chart { height: 450px; }
.table { width: 100%; }
.mrg-top-20 { margin-top: 20px; }
.font-size-18 { font-size: 18px !important; font-weight: bold;}
</style>
@stop
@section('script')
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
	var gender_chart_data = {!! $data['approval_by_gender_json'] !!};
	var proposal_status_data = {!! $data['proposal_status_json'] !!};
	var invoice_cost_data = {!! $data['invoice_cost_json'] !!};
	google.charts.load('current', {'packages':['corechart']});
	google.charts.setOnLoadCallback(drawGenderChart);
	google.charts.setOnLoadCallback(drawProposalStatusChart);
	google.charts.setOnLoadCallback(drawInvoiceCostChart);
	function drawGenderChart(){
		var data = google.visualization.arrayToDataTable(gender_chart_data);
		var options = {
			title : 'Percentage of Approval by Gender',
			chartArea : {'width': '90%', 'height': '70%'},
			legend: {'position': 'bottom'}
		};
		var chart = new google.visualization.PieChart(document.getElementById('proposal-gender-chart'));
        chart.draw(data, options);
	}
	function drawProposalStatusChart(){
		var data = google.visualization.arrayToDataTable(proposal_status_data);
		var options = {
			title : 'RUSH-IT by Status (Last 12 Months)',
			chartArea : {'width': '95%', 'left': '5%'},
			// curveType: 'function',
			legend: {'position': 'bottom'},
			series: {
				0: { color: '#FFB236' },
				1: { color: '#8A2BE2' },
				2: { color: '#18ce0f' },
			}
		};
		var chart = new google.visualization.LineChart(document.getElementById('proposal-status-chart'));
        chart.draw(data, options);
	}
	function drawInvoiceCostChart(){
		var data = google.visualization.arrayToDataTable(invoice_cost_data);
		var options = {
			title : 'Invoice Cost (Last 12 Months)',
			chartArea : {'width': '90%', 'left': '10%'},
			seriesType: 'bars',
			series: {
				0: { color: '#2CA8FF' },
				1: { color: '#18ce0f', type: 'line'}
			},
			legend: {'position': 'bottom'}
		};
		var chart = new google.visualization.ComboChart(document.getElementById('invoice-cost-chart'));
        chart.draw(data, options);
	}
</script>
@stop