@extends('layouts.app')
@section('title','Dashboard')
@section('body-class','vertical-layout vertical-menu 2-columns fixed-navbar pace-done menu-expanded')
@section('content')
@section('css')
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
@endsection
<div class="app-content content">
  <div class="content-wrapper">
    <div class="content-body"> 
      <!-- Basic form layout section start -->
      <section id="combination-charts">
        <div class="row">
          <div class="col-12">
            <div class="card rounded admin-overview-main">
              <div class="row">
                <div class="col-lg-8 col-xl-9 col-md-12">
                  <h1>dashboard</h1>
                  <form>{!! Helper::year_list('cay',@$_GET['cay'],'class="pull-right" onchange="this.form.submit()"'); !!}</form>
                  <h3>Alerts Generated Per Month</h3>
                  <div class="card-content collapse show">
                    <div id="column-helloo" class="height-400 echart-container"></div>
                  </div>
                </div>
                <!--col left end-->
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</div>

@endsection
@section('js')
  <script src="{{ asset('/app-assets/vendors/js/charts/echarts/echarts.js') }}" type="text/javascript"></script>
   <script>
	// Set paths
    // ------------------------------

    require.config({
        paths: {
            echarts: 'app-assets/vendors/js/charts/echarts'
        }
    });


    // Configuration
    // ------------------------------

	</script> 
<script>
	// Set paths
    // ------------------------------

    require.config({
        paths: {
            echarts: 'app-assets/vendors/js/charts/echarts'
        }
    });


    // Configuration
    // ------------------------------

    require(
        [
            'echarts',
            'echarts/chart/bar',
            'echarts/chart/line',
            'echarts/chart/scatter',
            'echarts/chart/pie'
        ],


        // Charts setup
        function (ec) {

            // Initialize chart
            // ------------------------------
            var myChart = ec.init(document.getElementById('column-helloo'));

            // Chart Options
            // ------------------------------
            chartOptions = {

                // Setup grid
                grid: {
                    x: 50,
                    x2: 40,
                    y: 45,
                    y2: 25
                },

                // Add tooltip
                tooltip: {
                    trigger: 'axis'
                },

                // Add legend
                
                // Add custom colors
                color: ['#0053a8', '#0053a8', '#ff8b45'],

                // Enable drag recalculate
                calculable: true,

                // Horizontal axis
                xAxis: [{
                    type: 'category',
                    data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                }],

                // Vertical axis
                yAxis : [
                    {
                        type : 'value',
                        name : '',
                        axisLabel : {
                            formatter: '{value}'
                        }
                    },
                    {
                        type : '',
                        name : '',
                        axisLabel : {
                            formatter: '{value}'
                        }
                    }
                ],

                // Add series
                series : [
                    {
                        name:'Alerts',
                        type:'bar',
                        data:[{{$no_of_streams_per_month}}]
                    },
                ]
            };

            // Apply options
            // ------------------------------

            myChart.setOption(chartOptions);


            // Resize chart
            // ------------------------------

            $(function () {

                // Resize chart on menu width change and window resize
                $(window).on('resize', resize);
                $(".menu-toggle").on('click', resize);

                // Resize function
                function resize() {
                    setTimeout(function() {

                        // Resize chart
                        myChart.resize();
                    }, 200);
                }
            });
        }
    );
    
    </script>
@endsection