@extends('layout.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>2000.00<sup style="font-size: 20px">NGN</sup></h3>

                <p>Total Market Revenue</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>2000.00<sup style="font-size: 20px">NGN</sup></h3>

                <p>Total Bus Station 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>2000.00<sup style="font-size: 20px">NGN</sup></h3>

                <p>Total Parking Revenue</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>2000.00<sup style="font-size: 20px">NGN</sup></h3>

                <p>Total Garbage 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">Sales By Markets</h3>
                  <a href="javascript:void(0);">View Report</a>
                </div>
              </div>
              <div class="card-body">
                <div id="salesBYBusMarkets"></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">Sales By Bus Stations</h3>
                  <a href="javascript:void(0);">View Report</a>
                </div>
              </div>
              <div class="card-body">
                <div id="salesBYBusStations"></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">Sales By Vehicle Parking</h3>
                  <a href="javascript:void(0);">View Report</a>
                </div>
              </div>
              <div class="card-body">
                <div id="salesBYBusParking"></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">Sales By Garbage Collections</h3>
                  <a href="javascript:void(0);">View Report</a>
                </div>
              </div>
              <div class="card-body">
                <div id="salesBYBusGarbage"></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">Collections By Region</h3>
                  <a href="javascript:void(0);">View Report</a>
                </div>
              </div>
              <div class="card-body">
                <div id="ProductWiseCollectionByRegion"></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(salesBYBusStations);
      google.charts.setOnLoadCallback(salesBYBusMarkets);
      google.charts.setOnLoadCallback(salesBYBusParking);
      google.charts.setOnLoadCallback(salesBYBusGarbage);
      google.charts.setOnLoadCallback(ProductWiseCollectionByRegion);
      google.charts.setOnLoadCallback(drawChartTransactions);

function salesBYBusParking() 
    {
        var data = google.visualization.arrayToDataTable([
          ['Region', 'Vehicle Parking Collections'],
          ['North Central', 1000 ],
          ['South West', 1170],
          ['North East', 660],
          ['South East', 1030 ],
          ['South South', 1030 ]
         
        ]);

        var options = {
          chart: {
           
            title: 'Vehicle Parking Collections: ',
          },bars: 'horizontal',
          vAxis: {format: 'decimal'},
        };

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

        chart.draw(data, google.charts.Bar.convertOptions(options));
    }
    function salesBYBusGarbage() 
    {
        var data = google.visualization.arrayToDataTable([
          ['Region', 'Garbage Collections'],
          ['North Central', 1000 ],
          ['South West', 1170],
          ['North East', 660],
          ['South East', 1030 ],
          ['South South', 1030 ]
         
        ]);

        var options = {
          chart: {
           
            title: 'Garbage Collections: ',
          },bars: 'horizontal',
          vAxis: {format: 'decimal'},
        };

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

        chart.draw(data, google.charts.Bar.convertOptions(options));
    }
    function ProductWiseCollectionByRegion() 
    {
        var data = google.visualization.arrayToDataTable([
          ['Region', '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: 'Markets, Parking, Bus Stations and Garbage Collection: ',
          },bars: 'horizontal',
          vAxis: {format: 'decimal'},
        };

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

        chart.draw(data, google.charts.Bar.convertOptions(options));
    }
    
    
    function salesBYBusStations() 
    {
        var data = google.visualization.arrayToDataTable([
          ['Region', 'Bus Stations Collections'],
          ['North Central', 1000 ],
          ['South West', 1170],
          ['North East', 660],
          ['South East', 1030 ],
          ['South South', 1030 ]
         
        ]);

        var options = {
          chart: {
           
            title: 'Bus Stations Collections: ',
          },bars: 'horizontal',
          vAxis: {format: 'decimal'},
        };

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

        chart.draw(data, google.charts.Bar.convertOptions(options));
    }
    function salesBYBusMarkets() 
    {
        var data = google.visualization.arrayToDataTable([
          ['Region', 'Markets Collections'],
          ['North Central', 1000 ],
          ['South West', 1170],
          ['North East', 660],
          ['South East', 1030 ],
          ['South South', 1030 ]
         
        ]);

        var options = {
          chart: {
            title: 'Markets Collections: ',
          },bars: 'horizontal',
          vAxis: {format: 'decimal'},
        };

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

        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 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