@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" style="    margin-bottom: 10px;">
                    <div class="col-lg-12">
                        <div class="d-flex text-left">
                            <h3 class="card-title"><b>Total Revenue :{{ $totalRevenue }}</b></h3>
                        </div>
                        <div class="d-flex text-left">
                            <h3 class="card-title"><b>Total Transactions :{{ $totalRevenueCount }}</b></h3>
                        </div>
                    </div>
                </div>
                <div class="row">
<div class="col-12 col-sm-12">
<div class="card card-primary card-outline card-tabs">
<div class="card-header p-0 pt-1 border-bottom-0">
<ul class="nav nav-tabs" id="custom-tabs-three-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="custom-tabs-three-TODAY-tab" data-toggle="pill" href="#custom-tabs-three-TODAY" 
   role="tab" aria-controls="custom-tabs-three-TODAY" aria-selected="true"><img class="imgIconSize" src="{{ asset('theme/ttd.png') }}" alt="Today's"/> Today's</a>
</li>
<li class="nav-item">
<a class="nav-link" id="custom-tabs-three-MTD-tab" data-toggle="pill" href="#custom-tabs-three-MTD" 
   role="tab" aria-controls="custom-tabs-three-MTD" aria-selected="false"><img class="imgIconSize" src="{{ asset('theme/mtd.png') }}" alt="MTD"/> Current MTD</a>
</li>
<li class="nav-item">
<a class="nav-link" id="custom-tabs-three-LMTD-tab" data-toggle="pill" href="#custom-tabs-three-LMTD" 
   role="tab" aria-controls="custom-tabs-three-LMTD" aria-selected="false"> <img class="imgIconSize" src="{{ asset('theme/ytd.png') }}" alt="YTD"/> Last Month</a>
</li>
<li class="nav-item">
<a class="nav-link" id="custom-tabs-three-YTD-tab" data-toggle="pill" href="#custom-tabs-three-YTD" 
   role="tab" aria-controls="custom-tabs-three-YTD" aria-selected="false"> <img class="imgIconSize" src="{{ asset('theme/ytd.png') }}" alt="YTD"/> YTD</a>
</li>


<li class="nav-item">
<a class="nav-link" id="custom-tabs-three-summary-tab" data-toggle="pill" href="#custom-tabs-three-summary" 
   role="tab" aria-controls="custom-tabs-three-summary" aria-selected="false"> <img class="imgIconSize" src="{{ asset('theme/ytd.png') }}" alt="Summary"/> Summary</a>
</li>
<li class="nav-item">
<a class="nav-link" id="custom-tabs-three-financial-tab" data-toggle="pill" href="#custom-tabs-three-financial" 
   role="tab" aria-controls="custom-tabs-three-financial" aria-selected="false"> <img class="imgIconSize" src="{{ asset('theme/ytd.png') }}" alt="Financial Chart"/> Financial Chart</a>
</li>

</ul>
</div>
<div class="card-body">
<div class="tab-content" id="custom-tabs-three-tabContent">


        
    <div class="tab-pane fade" id="custom-tabs-three-financial" role="tabpanel" aria-labelledby="custom-tabs-three-financial-tab">


    <div class="row">






                     <div class="col-lg-6 " >
                         <div class="small-box ">
                              <div class="inner">
                        <div class="d-flex text-left headingBgColor ">
                            <h3 class="card-title fontSize18" ><b>Today's Revenue Chart</b></h3>
                        </div>

                        <div id="todayRevenue"></div>

                        </div> 
                        </div> 
                    </div>
        <div class="col-lg-6 " >
                         <div class="small-box ">
                              <div class="inner">
                        <div class="d-flex text-left headingBgColor ">
                            <h3 class="card-title fontSize18" ><b>MTD Revenue Chart</b></h3>
                        </div>

                        <div id="mtdRevenue"></div>

                        </div> 
                        </div> 
                    </div>
                </div>



</div>

    <div class="tab-pane fade" id="custom-tabs-three-summary" role="tabpanel" aria-labelledby="custom-tabs-three-summary-tab">
      <div class="row">
                    
                    
                    


                </div> 





</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:["corechart","bar"]});
      google.charts.setOnLoadCallback(todayRevenue);
      google.charts.setOnLoadCallback(ytdRevenue);
      google.charts.setOnLoadCallback(mtdRevenue);
      google.charts.setOnLoadCallback(barchart);
      
      
      function ytdRevenue() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Market',     {{$marketRevenueToday}}],
          ['Parking',     {{$parkingRevenueToday}}],
          ['Bus Station', {{$busStationRevenueToday}}],
          ['Garbage',{{$garbageRevenueToday}}],
          
        ]);
        var options = {
          title: "Today's Activities",
          pieHole: 0.2,
        };
        var chart = new google.visualization.PieChart(document.getElementById('ytdRevenue'));
        chart.draw(data, options);
      }
      
      function todayRevenue() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Market',     {{$marketRevenueToday}}],
          ['Parking',     {{$parkingRevenueToday}}],
          ['Bus Station', {{$busStationRevenueToday}}],
          ['Garbage',{{$garbageRevenueToday}}],
          
        ]);
        var options = {
          title: "Today's Activities",
          pieHole: 0.2,
        };
        var chart = new google.visualization.PieChart(document.getElementById('todayRevenue'));
        chart.draw(data, options);
      }
      function mtdRevenue() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Market',     11],
          ['Parking',      2],
          ['Bus Station',  2],
          ['Garbage', 2],
          
        ]);
        var options = {
          title: 'MTD Activities',
          pieHole: 0.2,
        };
        var chart = new google.visualization.PieChart(document.getElementById('mtdRevenue'));
        chart.draw(data, options);
      }
      
      
      function barchart() {
        var data = google.visualization.arrayToDataTable();
        var options = {
          chart: {
            title: 'Collection Performance',
            subtitle: 'Market, Parking, and Bus Station,Garbage',
          },
          bars: 'verticel' // Required for Material Bar Charts.
        };
        var chart = new google.charts.Bar(document.getElementById('barchart'));
        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    </script>
    
    
@endsection