@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')
<script>
  @if(isset($data) && sizeof($data) > 0)
  let inputs = [
  @foreach($data as $data_row)
    {date_from: "{{$data_row['date_from']}}", date_to: "{{$data_row['date_to']}}"},
  @endforeach
  ];
  @else
  let inputs = [{date_from: "", date_to: ""}];
  @endif
  const remove = (i) => {
    inputs = inputs.filter((input,index) => i === index? null: input);
    render();
  }
  const addInput = () => {
    inputs = inputs.concat({date_from: "", date_to: ""});
    render();
  }
  const render = () => {
    $('#inputs')[0].innerHTML = inputs.map((input, index) => `
      <div class="row">
        <div class="col-md-5">
          <div class="form-group">
            <label class="control-label">از تاریخ:</label>
            <input onchange="inputs[${index}].date_from = this.value" data-required="true" autocomplete="off" type="text" value="${input.date_from || ""}"
              autocomplete="off" name="inputs[${index}][date_from]" class="form-control datepicker">
          </div>
        </div>
        <div class="col-md-5">
          <div class="form-group">
            <label class="control-label">تا تاریخ:</label>
            <input onchange="inputs[${index}].date_to = this.value" data-required="true" autocomplete="off" type="text" value="${input.date_to || ""}" autocomplete="off"
              name="inputs[${index}][date_to]" class="form-control datepicker">
          </div>
        </div>
        <div class="col-md-2" style="text-align: left;">
          ${index === inputs.length - 1? `<button type="button" onclick="addInput()" class="btn btn-primary" style="margin-top: 35px; min-width: 50px;">جدید</button>`:""}
          ${index > 0 || (index === 0 && inputs.length > 1)?
            `<button type="button" onclick="remove(${index})" class="btn btn-danger" style="margin-top: 35px; min-width: 50px;">حذف</button>`
              :
            ""
          }
        </div>
      </div>
    `).join('');
    $(".datepicker").datepicker({
        changeMonth: true,
        changeYear: true,
        yearRange:"1300:1400"
      });
  }
  $(document).ready(() => {render();});
</script>
<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>
            </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>
@if(isset($data))
@foreach($data as $i=>$row)
<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">
            <h4>آمار به تفکیک روز (از {{$row['date_from']}} تا {{$row['date_to']}})</h4>
            <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-30d-{{$i}}" height="164" width="308"
            style="display: block; width: 308px; height: 164px;"></canvas>
        </div>
      </div>
    </div>
    <script>
      $(document).ready(function(){
          var lineChartData = {
            labels: [
              @foreach($row['date_labels'] as $label)
                '{{$label}}',
              @endforeach
            ],
            datasets: [
              {
                label: 'مشاهده مجموعه‌ها',
                borderColor: '#FA2',
                backgroundColor: '#FA2',
                fill: false,
                data: [
                  @foreach($row['date_data'] as $var)
                    '{{$var}}',
                  @endforeach
                ],
                yAxisID: 'y1',
              },
            ]
          };
          var ctx = document.getElementById( "source-30d-{{$i}}" );
          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>
@endforeach
@endif
@endsection