@extends('layouts.admin')
@section('pageTitle')
  <title>Best Insurance | BI click Report</title>
@stop
@section('content')

<section class="content">
  
  <div class="box box-success">
    <!-- <div class="box-header">
      <h3>BestInsurance.co.uk Click Report</h3>
      <div class="box box-warning "></div>
    </div> -->
     <div class="box-body table-responsive ">

            <!-- Today CHART -->
            <div class="col-xs-6">
              <div class="box-header with-border ">
                <h3 class="box-title">Today chart</h3>
              </div>
              <div class="box-body chart-responsive">
                <div class="chart" id="today-chart" style="height: 300px; position: relative;"></div>
              </div>
            </div>

            <!-- Yesterday CHART -->
            <div class="col-xs-6">
              <div class="box-header with-border ">
                <h3 class="box-title">Yesterday chart</h3>
              </div>
              <div class="box-body chart-responsive">
                <div class="chart" id="yesterday-chart" style="height: 300px; position: relative;"></div>
              </div>
            </div>
        
            <!-- weekly chart -->
            <div class="col-xs-6 box-responsive">
              <div class="box-header with-border ">
                <h3 class="box-title">Last 7 days chart</h3>
              </div>
              <div class="box-body chart-responsive">
                <div class="chart" id="week-chart" style="height: 300px; position: relative;"></div>
              </div>
            </div>

            <!-- Monthly chart -->
            <div class="col-xs-6">
              <div class="box-header with-border ">
                <h3 class="box-title">Monthly chart</h3>
              </div>
              <div class="box-body chart-responsive">
                <div class="chart" id="monthly-chart" style="height: 300px; position: relative;"></div>
              </div>
            </div>
           
          </div>
          
    </div>
<!-- </div> -->

</section>

@stop
@section('pageBottomJs')
<style type="text/css">

</style> 

<!-- chartJs -->
<script src="{{ URL::asset('assets/plugins/chartjs/Chart.min.js') }}"></script>
<script src="{{ URL::asset('assets/plugins/morris/morris.min.js') }}"></script>
<!-- dataTables -->
<script src="{{ URL::asset('assets/js/dataTables/jquery.dataTables.min.js') }}"></script>

<script src="{{ URL::asset('assets/js/dataTables/dataTables.bootstrap.min.js') }}"></script>
<link rel="stylesheet" href="{{ URL::asset('assets/js/dataTables/dataTables.bootstrap.css') }}">
<script>
$(document).ready(function(){

var today = $("#today").html();
// alert(today);
console.log(today);
//today CHART
  $.ajax({
    type: "POST",
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
          url: "/account/todayClicks",
          data: {key : today},
          datatype: "json",
          success: function(data){
            if(data.data != 0){
              var donut = new Morris.Donut({ 
                element: data.element,
                resize: data.resize,
                colors: data.colors,
                data: data.data,
                hideHover: data.hideHover 
              });
            }else{
              $("#"+data.element).html('No records found');
            }
          }
  });

//yesterday CHART
  $.ajax({
      type: "POST",
      headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      url: "/account/yesterdayClicks",
      data: {key : today},
      datatype: "json",
          success: function(data){
            if(data.data != 0){
            var donut = new Morris.Donut({ 
              element: data.element,
              resize: data.resize,
              colors: data.colors,
              data: data.data,
              hideHover: data.hideHover 
            });
            }else{
              $("#"+data.element).html('No records found');
            }
      }
  });

//1 week chart CHART
    $.ajax({
          type: "POST",
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
          url: "/account/weeklyClicks",
          data: {key : today},
          datatype: "json",
          success: function(data){
            if(data.data != 0){
              var donut = new Morris.Donut({ 
                element: data.element,
                resize: data.resize,
                colors: data.colors,
                data: data.data,
                hideHover: data.hideHover 
              });
            }else{
              $("#"+data.element).html('No records found');
            }
          }
});

//Monthly CHART
    $.ajax({
          type: "POST",
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
          url: "/account/monthlyClicks",
          data: {key : today},
          datatype: "json",
          success: function(data){
            if(data.data != 0){
            var donut = new Morris.Donut({ 
              element: data.element,
              resize: data.resize,
              colors: data.colors,
              data: data.data,
              hideHover: data.hideHover 
            });
            }else{
              $("#"+data.element).html('No records found');
            }
          }
  });

});
</script>

@stop