@extends('layout.appemp.master')
@section('content') 

<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>Dashboard</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
              
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">
    <div class="container-fluid">
        
        <div class="row">
          <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box ">
              <div class="inner">
                <h3>150</h3>

                <p>Total Transactions</p>
              </div>
              <div class="icon">
                <i class="ion ion-bag"></i>
              </div>
              <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
            </div>
          </div>
          <!-- ./col -->
          <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box ">
              <div class="inner">
                <h3>53<sup style="font-size: 20px">%</sup></h3>

                <p>Total Revenue</p>
              </div>
              <div class="icon">
                <i class="ion ion-stats-bars"></i>
              </div>
              <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
            </div>
          </div>
          <!-- ./col -->
          <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box">
              <div class="inner">
                <h3>44</h3>

                <p>Today's Transactions</p>
              </div>
              <div class="icon">
                <i class="ion ion-person-add"></i>
              </div>
              <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
            </div>
          </div>
          <!-- ./col -->
          <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box">
              <div class="inner">
                <h3>65</h3>

                <p>Today's Revenue</p>
              </div>
              <div class="icon">
                <i class="ion ion-pie-graph"></i>
              </div>
              <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
            </div>
          </div>
          <!-- ./col -->
        </div>
        
        <div class="row">
          
          <div class="col-lg-12">
            <div class="card">
              <div class="card-header border-0">
                <div class="d-flex justify-content-between">
                  <h3 class="card-title">Collections Chart</h3>
                  <a href="javascript:void(0);">View Report</a>
                </div>
              </div>
              <div class="card-body">
                <div id="datewiseCollection"></div>
              </div>
            </div>
   
          </div>
            
            <div class="col-lg-6">
            <div class="card">
              <div class="card-header border-0">
                <div class="d-flex justify-content-between">
                  <h3 class="card-title">Product By Collections Cumulative</h3>
                  <a href="javascript:void(0);">View Report</a>
                </div>
              </div>
              <div class="card-body">
                <div id="productByCollectionsscumulative"></div>
              </div>
            </div>
   
          </div>
             <div class="col-lg-6">
            <div class="card">
              <div class="card-header border-0">
                <div class="d-flex justify-content-between">
                  <h3 class="card-title">Product By Collections Daily</h3>
                  <a href="javascript:void(0);">View Report</a>
                </div>
              </div>
              <div class="card-body">
                <div id="productByCollectionss"></div>
              </div>
            </div>
   
          </div>
          
          <div class="col-lg-12">
            <div class="card">
              <div class="card-header border-0">
                <div class="d-flex justify-content-between">
                  <h3 class="card-title">Transactions Statistics</h3>
                  <a href="javascript:void(0);">View Report</a>
                </div>
              </div>
              <div class="card-body">
                <div id="drawChartTransactions"></div>
              </div>
            </div>
   
          </div>
        </div>
      </div> 
    </section>
    <!-- /.content -->
  </div> 


 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
 <script type="text/javascript">
      google.charts.load('current', {'packages':['bar','corechart','gauge']});
      google.charts.setOnLoadCallback(drawChart);
      google.charts.setOnLoadCallback(ProductWiseCollection);
      google.charts.setOnLoadCallback(ProductWiseCollectionCumulative);
      google.charts.setOnLoadCallback(ProductWiseCollectionByRegion);
      google.charts.setOnLoadCallback(drawChartTransactions);


function ProductWiseCollectionByRegion() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Markets', 'Parking', 'Bus Stations','Garbage'],
          ['North Central', 1000, 400, 200,200],
          ['South West', 1170, 460, 250,200],
          ['North East', 660, 1120, 300,200],
          ['South East', 1030, 540, 350,200],
          ['South South', 1030, 540, 350,200]
         
        ]);

        var options = {
          chart: {
            title: 'Performance By Yearly',
            subtitle: 'Markets, Parking, Bus Stations and Garbage Collection: ',
          },bars: 'vertical',
          vAxis: {format: 'decimal'},
        };

        var chart = new google.charts.Bar(document.getElementById('ProductWiseCollectionByRegion'));

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
      
      
      
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Markets', 'Parking', 'Bus Stations','Garbage'],
          ['2014', 1000, 400, 200,200],
          ['2015', 1170, 460, 250,200],
          ['2016', 660, 1120, 300,200],
          ['2017', 1030, 540, 350,200],
          ['2018', 1030, 540, 350,200],
          ['2019', 1030, 540, 350,200],
          ['2020', 1030, 540, 350,200],
          ['2021', 1030, 540, 350,200]
        ]);

        var options = {
          chart: {
            title: 'Performance By Yearly',
            subtitle: 'Markets, Parking, Bus Stations and Garbage Collection: ',
          },bars: 'vertical',
          vAxis: {format: 'decimal'},
        };

        var chart = new google.charts.Bar(document.getElementById('datewiseCollection'));

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
      
      
      function ProductWiseCollection()
      {
          var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Market',     11],
          ['Parking',      2],
          ['Station',  2],
          ['Garbage', 2]
          
        ]);

        var options = {
          title: 'My Daily Activities'
        };

        var chart = new google.visualization.PieChart(document.getElementById('productByCollectionss'));

        chart.draw(data, options);
      }
      
      
      function ProductWiseCollectionCumulative()
      {
          var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Market',     11],
          ['Parking',      2],
          ['Station',  2],
          ['Garbage', 2]
          
        ]);

        var options = {
          title: 'My Cumulative Activities'
        };

        var chart = new google.visualization.PieChart(document.getElementById('productByCollectionsscumulative'));

        chart.draw(data, options);
      }
      
      
      
      function drawChartTransactions() {

        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Yesterday', 80],
          ['Today', 55],
          ['Last Month', 100],
          ['This Month', 200],
          
        ]);

        var options = {
          width: 1200, height: 240,
          redFrom: 90, redTo: 100,
          yellowFrom:75, yellowTo: 90,
          minorTicks: 5
        };

        var chart = new google.visualization.Gauge(document.getElementById('drawChartTransactions'));

        chart.draw(data, options);

        setInterval(function() {
          data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 13000);
        setInterval(function() {
          data.setValue(1, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 5000);
        setInterval(function() {
          data.setValue(2, 1, 60 + Math.round(20 * Math.random()));
          chart.draw(data, options);
        }, 26000);
      }
      
    </script>
@endsection