@extends('layouts.admin')
@section('content')
<script>
  $(document).ready(function() {

    // seo ecommerce start
    $(function() {

      var chart = AmCharts.makeChart("r-barchart", {
        "type": "serial",
        "theme": "light",
        "marginTop": 0,
        "marginRight": 0,
        "dataProvider": [],
        "valueAxes": [{
          "axisAlpha": 0,
          "gridAlpha": 0,
          "dashLength": 6,
          "position": "left"
        }],
        "graphs": [{
          "id": "g1",
          "balloonText": "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>",
          "bullet": "round",
          "bulletSize": 8,
          "fillAlphas": 0.1,
          "lineColor": "#448aff",
          "lineThickness": 2,
          "negativeLineColor": "#ff5252",
          "type": "smoothedLine",
          "valueField": "value"
        }],
        "chartScrollbar": {
          "graph": "g1",
          "gridAlpha": 0,
          "color": "#888888",
          "scrollbarHeight": 55,
          "backgroundAlpha": 0,
          "selectedBackgroundAlpha": 0.1,
          "selectedBackgroundColor": "#888888",
          "graphFillAlpha": 0,
          "autoGridCount": true,
          "selectedGraphFillAlpha": 0,
          "graphLineAlpha": 0.2,
          "graphLineColor": "#c2c2c2",
          "selectedGraphLineColor": "#888888",
          "selectedGraphLineAlpha": 1
        },
        "chartCursor": {
          "categoryBalloonDateFormat": "YYYY-MM",
          "cursorAlpha": 0,
          "valueLineEnabled": true,
          "valueLineBalloonEnabled": true,
          "valueLineAlpha": 0.5,
          "fullWidth": true
        },
        "dataDateFormat": "YYYY-MM",
        "categoryField": "month",
        "categoryAxis": {
          "minPeriod": "YYYY-MM",
          "gridAlpha": 0,
          "parseDates": false,
        },
      });
      chart.zoomToIndexes(Math.round(chart.dataProvider.length * 0.1), Math.round(chart.dataProvider.length * 1));
    });
    // seo ecommerce end
  });
</script>
<section>
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-4 ">
        <a href="#">
          <div class="card revenue">
            <div>
              <h6>Total Data</h6>
              <h2>{{$data_count}}</h2>
              <!-- <p>Active</p> -->
              <i class="fa fa-users" aria-hidden="true"></i>
            </div>
          </div>
        </a>
      </div>

      <div class="col-lg-4">
        <a href="#">
          <div class="card orders">
            <div>
              <h6>Total Monthly Data</h6>
              <h2>{{$monthly_count}}</h2>
              <!-- <p>Active</p> -->
              <i class="fa fa-video-camera" aria-hidden="true"></i>
            </div>
          </div>
        </a>
      </div>

      <div class="col-lg-4">
        <a href="#">
          <div class="card sales">
            <div>
              <h6>Total Reports</h6>
              <h2>{{$report_count}}</h2>
              <!-- <p>Active</p> -->
              <i class="fa fa-music" aria-hidden="true"></i>
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>
</section>

<div class="clearfix"></div>
<br>
<section>
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-12">
        <div class="card table-card">
          <div class="card-header borderless ">
            <h3>File Import Analytics</h3>
          </div>
          <div class="card-body">
            <div id="r-barchart" style="height: 375px"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

@if(Auth::user() && Auth::user()->date_updated_date!=date('Y-m-d'))
<script>
  $(document).ready(function() {
    $('#updateReportDateModal').modal({
      // backdrop: 'static',
      // keyboard: false
    }, 'show');
    $('#updateReportDateModal .close').css('display', 'none');
  });
</script>
@endif

@endsection