@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>Report Performance</h3>
                </div>
                <div class="clearfix"></div>
            </div>

            <div class="row">                
                @if($summary_account)
                    <div class="col-xs-12 col-sm-6">
                        <div class="x_panel">         
                            <div class="x_title">
                                <div class="row">
                                    <div class="col-xs-6"><h2 style="font-size:1em;">Graph AUM</h2></div>
                                    <div class="col-xs-6 text-right">
                                        <a class="collapse-link" style="font-size:1em; cursor:pointer;"><i class="fa fa-chevron-up"></i></a>
                                    </div>
                                </div>
                            </div>              
                            <div class="x_content"> 
                                <div style="margin-bottom:16px;">
                                    <div id="graph_aum"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xs-12 col-sm-6">
                        <div class="x_panel">         
                            <div class="x_title">
                                <div class="row">
                                    <div class="col-xs-6"><h2 style="font-size:1em;">Graph Account</h2></div>
                                    <div class="col-xs-6 text-right">
                                        <a class="collapse-link" style="font-size:1em; cursor:pointer;"><i class="fa fa-chevron-up"></i></a>
                                    </div>
                                </div>
                            </div>              
                            <div class="x_content"> 
                                <div style="margin-bottom:16px;">
                                    <div id="graph_accounts"></div>
                                </div>
                            </div>
                        </div>
                    </div>                    
                @endif
            </div>
        </div>
        @include('includes.footer')
    </div>
</div>
@endsection

@section("scripts")
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<script type="text/javascript">    
    function generate_graph_aum() {
        Morris.Line({
            element: 'graph_aum',
            data: {!! json_encode($summary_account) !!},
            xkey: 'date',
            ykeys: ['aum'],
            labels: ['Total Amount']
        });
    }
    function generate_graph_count_aum() {
        Morris.Line({
            element: 'graph_accounts',
            data: {!! json_encode($summary_account) !!},
            xkey: 'date',
            ykeys: ['count_aum'],
            labels: ['Count Account']
        });
    }
    generate_graph_aum();
    generate_graph_count_aum();
</script>
@endsection