@extends('layouts.panel')
@section('page_title')
<div class="col-md-5 align-self-center">
  <h3 class="text-primary">داشبورد</h3>
</div>
<div class="col-md-7 align-self-center">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="javascript:void(0)">خانه</a></li>
    <li class="breadcrumb-item active">گزارشات</li>
    <li class="breadcrumb-item active">کتابخانه آنلاین</li>
    <li class="breadcrumb-item active">میزان استفاده</li>
  </ol>
</div>
@endsection
@section('custom_css')
@endsection
@section('content')
<div class="row">
  <div class="col-md-12">
    <div class="card simti_responsive_table_no_padding">
      <div class="card-body p-b-0">
        <form method="GET">
          <div class="form-body">
            <div class="row">
              <div class="col" id="inputs">
                <div class="row">
                    <div class="col-md-4">
                      <div class="form-group">
                        <label class="control-label">کمترین امتیاز:</label>
                        <input  autocomplete="off" type="number" value="{{$inputs['offset']}}" name="offset" class="form-control">
                      </div>
                    </div>
                    <div class="col-md-4">
                      <div class="form-group">
                        <label class="control-label">بیشترین امتیاز:</label>
                        <input  autocomplete="off" type="number" value="{{$inputs['limit']}}" name="limit" class="form-control">
                      </div>
                    </div>
                    <div class="col-md-4">
                      <div class="form-group">
                        <label class="control-label">گام:</label>
                        <input  autocomplete="off" type="number" value="{{$inputs['scope']}}" name="scope" class="form-control">
                      </div>
                    </div>
                  </div>
              </div>
            </div>
          </div>
          <div class="form-actions text-left" style="margin-top:20px">
            <button type="submit" class="btn btn-info">مشاهده<i class="fa fa-check"></i> </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<div class="col-md-12">
  <div class="card simti_responsive_table_no_padding">
    <div class="card-body p-b-0">
      <div class="panel">
        <div class="panel-heading">
          <div class="panel-title" style="text-align: right">
            <span>میزان استفاده به تفکیک امتیاز</span>
          </div>
        </div>
        <div class="panel-body"><iframe class="chartjs-hidden-iframe" tabindex="-1"
            style="display: block; overflow: hidden; border: 0px; margin: 0px; top: 0px; left: 0px; bottom: 0px; right: 0px; height: 100%; width: 100%; position: absolute; pointer-events: none; z-index: -1;"></iframe>
          <iframe class="chartjs-hidden-iframe" tabindex="-1"
            style="display: block; overflow: hidden; border: 0px; margin: 0px; top: 0px; left: 0px; bottom: 0px; right: 0px; height: 100%; width: 100%; position: absolute; pointer-events: none; z-index: -1;"></iframe>
          <canvas id="source-ranks" height="164" width="308"
            style="display: block; width: 308px; height: 164px;"></canvas>
        </div>
      </div>
    </div>
    <script>
      $(document).ready(function(){
          var lineChartData = {
            labels: [
              @foreach($data as $row)
                '{{$row['label']}}',
              @endforeach
            ],
            datasets: [
              {
                label: 'مجموع امتیازات',
                borderColor: '#FA2',
                backgroundColor: '#FA2',
                fill: false,
                data: [
                  @foreach($data as $row)
                    '{{$row['value']}}',
                  @endforeach
                ],
                yAxisID: 'y1',
              },
            ]
          };
          var ctx = document.getElementById( "source-ranks" );
          ctx.height = 100;
          var myChart = Chart.Line(ctx, {
            data: lineChartData,
            options: {
              responsive: true,
              hoverMode: 'index',
              stacked: false,
              scales: {
                yAxes: [
                    {
                      type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                      display: true,
                      position: 'left',
                      id: 'y1',
                    },
                ],
              }
            }
          });
        });
    </script>
  </div>
</div>
@endsection