@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>
    <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-md-6">
                <div class="form-group">
                  <label class="control-label">از تاریخ:</label>
                  <input data-required="true" autocomplete="off" type="text" value="{{$date_from}}" autocomplete="off"
                    name="date_from" class="form-control datepicker">
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label class="control-label">تا تاریخ:</label>
                  <input data-required="true" autocomplete="off" type="text" value="{{$date_to}}" autocomplete="off"
                    name="date_to" class="form-control datepicker">
                </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>
      </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">
            <h4>آمار به تفکیک روز</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" height="164" width="308"
            style="display: block; width: 308px; height: 164px;"></canvas>
        </div>
      </div>
    </div>
    <script>
      $(document).ready(function(){
          var lineChartData = {
            labels: [
              @foreach($date_labels as $label)
                '{{$label}}',
              @endforeach
            ],
            datasets: [
              {
                label: 'مشاهده مطالب',
                borderColor: '#FA2',
                backgroundColor: '#FA2',
                fill: false,
                data: [
                  @foreach($date_data as $var)
                    '{{$var}}',
                  @endforeach
                ],
                yAxisID: 'y1',
              },
            ]
          };
          var ctx = document.getElementById( "source-30d" );
          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>
<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>بیشترین جستجو‌ها</h4>
            <span>بیشترین کلمات کلیدی جستجوشده</span>
          </div>
        </div>
        <div class="panel-body">
          <div class="row">
            <div class="col">
              <table class="table">
                <thead>
                  <th>ردیف</th>
                  <th>کلمه کلیدی</th>
                  <th>تعداد</th>
                </thead>
                <tbody>
                  @foreach($trends as $i=>$trend)
                  <tr>
                    <td>{{$i+1}}</td>
                    <td>{{$trend['label']}}</td>
                    <td>{{$trend['count']}}</td>
                  </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </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">
            <h4>بیشترین جستجو‌ها</h4>
          </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="most-30d" height="164" width="308" style="display: block; width: 308px; height: 164px;"></canvas>
        </div>
      </div>
    </div>
    <script>
      $(document).ready(function(){
        var color = Chart.helpers.color;
        var horizontalBarChartData = {
          labels: [
            @foreach($trends as $i=>$trend)
              '{{$trend['label']}}',
            @endforeach
          ],
          datasets: [{
            label: 'جستجو‌ها',
            borderWidth: 1,
            data: [
              @foreach($trends as $i=>$trend)
              '{{$trend['count']}}',
            @endforeach
            ]
          } 
          ]

        };
        var ctx = document.getElementById('most-30d').getContext('2d');
        new Chart(ctx, {
          type: 'horizontalBar',
          data: horizontalBarChartData,
          options: {
            // Elements options apply to all of the options unless overridden in a dataset
            // In this case, we are setting the border of each horizontal bar to be 2px wide
            elements: {
              rectangle: {
                borderWidth: 2,
              }
            },
            responsive: true,
            legend: {
              position: 'right',
            },
            title: {
              display: true,
              text: 'بیشترین کلمات کلیدی جستجوشده'
            }
          }
        });
      });
    </script>
  </div>
</div>

@endsection