@extends('admin.layouts.master')

@section('title')
    Dashboard
@stop

@section('style')
    <link rel="stylesheet" type="text/css" href="{{ asset('/css/dashboard.min.css') }}">
    <style>
        #chartdiv {
          width: 100%;
          height: 200px;

        }
    </style>
@stop

@section('content')
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                <span class="fa fa-dashboard"></span> Dashboard
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> Admin Panel</a></li>
                <li class="active">Dashboard</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">
            <!-- Small boxes (Stat box) -->
            <div class="row">
                {{--<div class="col-lg-6 col-xs-6">
                    <!-- small box -->
                    <div class="small-box bg-aqua">
                        <div class="inner">
                            <h3>{{$counts[0]->cnt_sales}} <sup style="font-size: 20px">  </sup></h3>
                            <p>Sales Transaction</p>
                        </div>
                        <div class="icon">
                            <i class="fa fa-shopping-cart"></i>
                        </div>
                        <a href="{{route('sales')}}" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
                    </div>
                </div>
                <!-- ./col -->
                <div class="col-lg-6 col-xs-6">
                    <!-- small box -->
                    <div class="small-box bg-green">
                        <div class="inner">
                            <h3>{{$counts[0]->cnt_advances}} <sup style="font-size: 20px"> </sup></h3>
                            <p>Cash Advances</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-stats-bars"></i>
                        </div>
                        <a href="{{route('advances')}}" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
                    </div>
                </div>
                <!-- ./col -->
                <div class="col-lg-6 col-xs-6">
                    <!-- small box -->
                    <div class="small-box bg-yellow">
                        <div class="inner">
                            <h5>{{number_format($adv_bal,2)}}</h5>
                            <p>C/A Balance</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-pie-graph"></i>
                        </div>
                        <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
                    </div>
                </div>
                <!-- ./col -->
                <div class="col-lg-6 col-xs-6">
                    <!-- small box -->
                    <div class="small-box bg-red">
                        <div class="inner">
                            <h5>{{number_format($ttl_comm[0]->ttl_com_rate, 2)}}</h5>
                            <p>Commission Releases [ {{$moyr}} ]</p>
                        </div>
                        <div class="icon">
                            <i class="fa fa-usd"></i>
                        </div>
                        <a href="{{route('releases')}}" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
                    </div>
                </div>
                <!-- ./col -->
                --}}

                <div style="height: 20px;"></div>

                <div class="col-lg-3">
                    <div class="panel panel-info">
                      <div class="panel-heading">
                        <div class="row">
                          <div class="col-xs-6">
                            <i class="fa fa-shopping-cart fa-5x"></i>
                          </div>
                          <div class="col-xs-6 text-right">
                            <p class="announcement-heading">{{$counts[0]->cnt_sales}}</p>
                            <p class="announcement-text">Sales Transaction</p>
                          </div>
                        </div>
                      </div>
                      <a href="{{route('sales')}}">
                        <div class="panel-footer announcement-bottom">
                          <div class="row">
                            <div class="col-xs-6">
                              {{--Expand--}}
                            </div>
                            <div class="col-xs-6 text-right">
                              <i class="fa fa-arrow-circle-right"></i>
                            </div>
                          </div>
                        </div>
                      </a>
                    </div>
                  </div>

                  <div class="col-lg-3">
                    <div class="panel panel-warning">
                      <div class="panel-heading">
                        <div class="row">
                          <div class="col-xs-6">
                            <i class="fa fa-pie-chart fa-5x"></i>
                          </div>
                          <div class="col-xs-6 text-right">
                            <p class="announcement-heading">{{$counts[0]->cnt_advances}}</p>
                            <p class="announcement-text"> Cash Advances</p>
                          </div>
                        </div>
                      </div>
                      <a href="{{route('advances')}}">
                        <div class="panel-footer announcement-bottom">
                          <div class="row">
                            <div class="col-xs-6">
                            </div>
                            <div class="col-xs-6 text-right">
                              <i class="fa fa-arrow-circle-right"></i>
                            </div>
                          </div>
                        </div>
                      </a>
                    </div>
                  </div>
                  <div class="col-lg-3">
                  {{--{{ $cnt[0]->cnt_bookings }}--}}
                    <div class="panel panel-danger">
                      <div class="panel-heading">
                            <div class="row">
                              <div class="col-xs-6">
                                <i class="fa fa-address-book-o fa-5x"></i>
                              </div>
                              <div class="col-xs-6 text-right">
                                <p class="announcement-heading">{{$cl_cnt ?? ''}}
                                {{--<p class="head1">Bookings</p>--}}
                                <p class="announcement-text">Clients</p>
                              </div>
                            </div>
                      </div>
                        <a href="#">

                        <div class="panel-footer announcement-bottom">
                          <div class="row">
                            <div class="col-xs-6">

                            </div>
                            <div class="col-xs-6 text-right">
                              <i class="fa fa-arrow-circle-right"></i>
                            </div>
                          </div>
                        </div>
                      </a>
                    </div>
                  </div>
                  <div class="col-lg-3">
                    <div class="panel panel-success">
                      <div class="panel-heading">
                        <div class="row">
                          <div class="col-xs-6">
                            <i class="fa fa-dollar fa-5x"></i>
                          </div>
                          <div class="col-xs-6 text-right">
                            <p class="announcement-heading">  {{number_format($ttl_comm[0]->ttl_com_rate, 2)}}</p>
                            <p class="announcement-text"> Releases [{{ $mm }}] </p>
                          </div>
                        </div>
                      </div>
                      <a href="{{ route('receivables') }}">
                        <div class="panel-footer announcement-bottom">
                          <div class="row">
                            <div class="col-xs-6">

                            </div>
                            <div class="col-xs-6 text-right">
                              <i class="fa fa-arrow-circle-right"></i>
                            </div>
                          </div>
                        </div>
                      </a>
                    </div>
                </div>
            </div>

            <div style="height: 40px;"></div>

            <div class="row">
                <div class="col-lg-6">
                    <div class="panel panel-default no-border box-shadow-none white-smoke-grey-bg-color">
                        <div class="panel-heading">Top Sellers [ {{$moyr}} ]</div>
                        <div class="panel-body">
                            <div id="fees_collection" class="graph-wrapper px-10-font box-shadow-dark-grey"></div>
                        </div>
                    </div>
                </div>
                {{--<div class="col-lg-6">
                    <div class="panel panel-default no-border box-shadow-none white-smoke-grey-bg-color">
                        <div class="panel-heading">Top Managers [ {{$moyr}} ]</div>
                        <div class="panel-body">
                            <div id="chartdiv" class="graph-wrapper px-10-font box-shadow-dark-grey"></div>
                        </div>
                    </div>
                </div>--}}
                <div class="col-lg-6">
                <div class="panel panel-default enrolments">
                   <div class="panel-heading">Monthly Sales [ {{$yy}} ]</div>
                        <div class="panel-body">
                            <div id="enrolments" class="graph-wrapper px-10-font box-shadow-dark-grey"></div>
                        </div>
                    </div>
                 </div>


            </div>
            <!--<div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default teams">
                    <div class="panel-heading">Team Sales</div>
                         <div class="panel-body">
                             <div id="teams" class="graph-wrapper px-10-font box-shadow-dark-grey"></div>
                         </div>
                     </div>
                </div>
            </div>-->
            <!-- /.row -->
        </section>

    </div>

    @stop

@section('script')
<script src="{{ asset('js/amcharts/amcharts.js') }}"></script>
<script src="{{ asset('js/amcharts/pie.js') }}"></script>
<script src="{{ asset('js/amcharts/serial.js') }}"></script>
<script src="{{ asset('js/amcharts/light.js') }}"></script>
<!-- <script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>-->
<script type="text/javascript" src="{{ asset('js/dashboard.min.js') }}" ></script>

<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>

<script>
    $(document).ready(function () {

    var data = [{
        "name": "TEAM EXCEL",
        "points": 100,
        "color": "#00AEEF" },
        {
        "name": "TEAM MARATA",
        "points": 250,
        "color": "#024B67"  },
        {
        "name": "TEAM AMAZING",
        "points": 150,
        "color": "#451666" },
        {
        "name": "TEAM PISCES",
        "points": 550,
        "color": "#C1502D" }
    ];

    var chart = AmCharts.makeChart("teams",
        {
            "type": "serial",
            "theme": "none",
            "hideCredits":true,
            "legend": {
                "enabled": false
            },
            //"dataProvider": window.sales_chart_team,
            "dataProvider": data,
            "valueAxes": [{
                "minimum": 0,
                "axisAlpha": 0,
                "dashLength": 4,
                "position": "left"
            }],
            "startDuration": 1,
            "graphs": [{
                "balloonText": "<span style='font-size:13px;'>[[category]]: <b>[[value]]</b></span>",
                "bulletOffset": 0,
                "bulletSize": 40,
                "colorField": "color",
                "customBulletField": "bullet",
                "fillAlphas": 0.8,
                "lineAlpha": 0,
                "type": "column",
                "valueField": "points"
            }],
            "marginTop": 0,
            "marginRight": 0,
            "marginLeft": 0,
            "marginBottom": 25,
            "autoMargins": false,
            "categoryField": "name"
        });


        /*var chart = AmCharts.makeChart("teams", {
          "type": "pie",
          "startDuration": 0,
          "theme": "light",
          "addClassNames": true,
          "hideCredits":true,
          // "legend": {
          //   "position": "right",
          //   "marginRight": 100,
          //   "autoMargins": false
          // },
          "innerRadius": "60%",
          "defs": {
            "filter": [{
              "id": "shadow",
              "width": "200%",
              "height": "200%",
              "feOffset": {
                "result": "offOut",
                "in": "SourceAlpha",
                "dx": 0,
                "dy": 0
              },
              "feGaussianBlur": {
                "result": "blurOut",
                "in": "offOut",
                "stdDeviation": 5
              },
              "feBlend": {
                "in": "SourceGraphic",
                "in2": "blurOut",
                "mode": "normal"
              }
            }]
          },
          "dataProvider": [{
            "country": "Sarah Castro",
            "litres": 600000
          }, {
            "country": "John Weak",
            "litres": 1200000
          }, {
            "country": "Shienna Tapilis",
            "litres": 2100000
          }
          ],
          "valueField": "litres",
          "titleField": "country",
          "balloon": {
            "fillAlpha": 0,
            "borderAlpha": 0,
            "shadowAlpha": 0,
            "fixedPosition": true
          },
          "listeners": [{
            "event": "changed",
            "method": function(e) {
              console.log(e.type);
            }
          }],
          "chartCursor": {

          },
          "export": {
            "enabled": true
          }
        });*/

        chart.addListener("init", handleInit);

        chart.addListener("rollOverSlice", function(e) {
          handleRollOver(e);
        });

        function handleInit() {
          chart.legend.addListener("rollOverItem", handleRollOver);
        }

        function handleRollOver(e) {

          var chart = e.chart,
            radiusReal = chart.radiusReal,
            innerRadius = parseInt(chart.innerRadius, 10) * 0.01,
            marginTop = radiusReal * innerRadius;

          $('.amcharts-balloon-div').css({
            marginTop: marginTop * -1
          });

          var wedge = e.dataItem.wedge.node;
          wedge.parentNode.appendChild(wedge);
        }
    })
</script>
@stop