@extends('layouts.app')
@section('content')
        <div class="row pt-2 pb-2">
            <div class="col-sm-9">
                <h4 class="page-title">{{$breadcrumb}}</h4>
            </div> 
        </div>
        <div class="row mt-3">
            <div class="col-12 col-lg-6 col-xl-4">
                <div class="card">
                <div class="card-body">
                    <p class="text-primary mb-0 ">SPP <span class="float-right badge badge-primary">Harian</span></p>
                    <div class="">
                    <h4 class="mb-0 py-3 text-primary">Rp 5,550,000 <span class="float-right"><i class="fa fa-money"></i></span></h4>
                    </div>
                    <div class="progress-wrapper">
                      <div class="progress" style="height:5px;">
                      <div class="progress-bar bg-primary" style="width:60%"></div>
                      </div>
                    </div>
                    <p class="mb-0 mt-2 small-font">50 transaksi hari ini.</p>
                  </div>
                </div>
              </div>
        
        
              <div class="col-12 col-lg-6 col-xl-4">
                <div class="card">
                <div class="card-body">
                    <p class="text-success mb-0">SPP <span class="float-right badge badge-success">Mingguan</span></p>
                    <div class="">
                    <h4 class="mb-0 py-3 text-success">Rp 40,850,000 <span class="float-right"><i class="fa fa-money"></i></span></h4>
                    </div>
                    <div class="progress-wrapper">
                      <div class="progress" style="height:5px;">
                      <div class="progress-bar bg-success" style="width:80%"></div>
                      </div>
                    </div>
                    <p class="mb-0 mt-2 small-font">70 transaksi dalam minggu ini.</p>
                  </div>
                </div>
              </div>
          
              <div class="col-12 col-lg-6 col-xl-4">
                <div class="card">
                <div class="card-body">
                    <p class="text-danger mb-0">SPP <span class="float-right badge badge-danger">Bulanan</span></p>
                    <div class="">
                    <h4 class="mb-0 py-3 text-danger">Rp 80,456,000 <span class="float-right"><i class="fa fa-money"></i></span></h4>
                    </div>
                    <div class="progress-wrapper">
                      <div class="progress" style="height:5px;">
                      <div class="progress-bar bg-danger" style="width:45%"></div>
                      </div>
                    </div>
                    <p class="mb-0 mt-2 small-font">100 transaksi dalam bulan ini.</p>
                  </div>
                </div>
              </div>
        
          </div><!--End Row-->

          <div class="row">
            <div class="col-12 col-lg-12 col-xl-12">
              <div class="card">
                <div class="card-header">
                  Diagram SPP
                </div>
                <div class="card-body">
                  <div class="chart-container-11"><div class="chartjs-size-monitor" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;"><div class="chartjs-size-monitor-expand" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;"><div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div></div><div class="chartjs-size-monitor-shrink" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;"><div style="position:absolute;width:200%;height:200%;left:0; top:0"></div></div></div>
                    <canvas id="timeChart" width="872" height="250" class="chartjs-render-monitor" style="display: block; width: 872px; height: 280px;"></canvas>
                  </div>
                </div>
              </div>
            </div>
          </div>
    <!-- End Breadcrumb-->
@endsection
@section('js')
<script type="text/javascript">
    
    var ctx = document.getElementById("timeChart").getContext('2d');


      var gradientStroke3 = ctx.createLinearGradient(0, 0, 0, 300);
      gradientStroke3.addColorStop(0, '#42e695');
      gradientStroke3.addColorStop(1, '#3bb2b8');

      var gradientStroke4 = ctx.createLinearGradient(0, 0, 0, 300);
      gradientStroke4.addColorStop(0, ' #7f00ff');
      gradientStroke4.addColorStop(0.5, '#e100ff');

			var myChart = new Chart(ctx, {
				type: 'bar',
				data: {
					labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
					datasets: [{
						label: 'Route',
						data: [15, 8, 12, 5, 12, 8, 16, 25, 15, 10, 20, 10],
						backgroundColor: gradientStroke3,
            hoverBackgroundColor: gradientStroke3
					}, {
						label: 'Time',
						data: [25, 18, 22, 15, 22, 18, 26, 35, 25, 20, 30, 20],
						backgroundColor: gradientStroke4,
            hoverBackgroundColor: gradientStroke4,
					}]
				},
			options: {
				maintainAspectRatio: false,
				legend: {
				  display: true,
				  labels: {
					fontColor: '#585757',  
					boxWidth:40
				  }
				},
				tooltips: {
				  enabled:true,
          displayColors:false
				},	
			  scales: {
				  xAxes: [{
				  	  categoryPercentage: 0.3,
					ticks: {
						beginAtZero:true,
						fontColor: '#585757'
					},
					gridLines: {
					  display: true ,
					  color: "rgba(0, 0, 0, 0.05)"
					},
				  }],
				   yAxes: [{
					ticks: {
						beginAtZero:true,
						fontColor: '#585757'
					},
					gridLines: {
					  display: true ,
					  color: "rgba(0, 0, 0, 0.05)"
					},
				  }]
				 }

			 }
			});
</script>
@endsection