@extends('layouts.panel')
@section('title', 'داشبورد')
@section('content')
<script>
  const colors = ['#F84', '#8F4', '#48F', '#4FF', '#AE2', '#F4F'];
</script>
<div class="row">
  <div class="col-12">
    <div class="card">

      <div class="card-body">
        تعداد بازدیدها: {{App\Models\Log::where('action', 'PAGE_VISIT')->count()}}
        <br>
        تعداد بازدیدکنندگان: {{\DB::select("SELECT count(ip) as ip from (SELECT ip from `logs` WHERE action = 'PAGE_VISIT' GROUP by ip) as q1")[0]->ip}}
        <br>
        امتیاز کاربران: {{App\Models\Rate::total_score()}}%
        <br>
        تعداد امتیازات: {{App\Models\Rate::count()}}
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="card">
      <div class="card-body">
        <div class="panel">
          <div class="panel-heading">
            <div class="panel-title">
              <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>
            <canvas id="item-types-freq" height="164" width="308" style="display: block; width: 308px; height: 164px;"></canvas>
          </div>
        </div>
        <script>
          @php
            $item_type_ids = \DB::select("SELECT main_value item_type, count(main_value) as count from `logs` WHERE `action` = 'ITEM_TYPE_SELECTED' GROUP BY `main_value` LIMIT 5");
            // var_dump($item_type_ids);
            $counts = [];
            foreach($item_type_ids as $index=>$item_type_id){
              $counts[$item_type_id->item_type] = $item_type_id->count;
              $item_type_ids[$index] = $item_type_id->item_type;
            }
            $item_schemas = \App\Models\ItemSchema::whereIn('id', $item_type_ids)->get();
          @endphp
          $(document).ready(function(){
            var ctx = document.getElementById( "item-types-freq" );
            ctx.height = 160;
            var myChart = new Chart( ctx, {
              type: 'radar',
              data: {
                labels: [
                  @foreach($item_schemas as $item_schema)
                    '{{$item_schema->title_fa}}',
                  @endforeach
                ],
                datasets: [
                  {
                    label: "تعداد دفعات استفاده",
                    data: [
                      @foreach($item_schemas as $item_schema)
                        {{$counts[$item_schema->id]}},
                      @endforeach
                    ],
                    borderColor: "rgba(0, 123, 255, 0.6)",
                    borderWidth: "1",
                    backgroundColor: "rgba(0, 123, 255, 0.4)"
                  },
                ]
              },
              options: {
                legend: {
                  position: 'top'
                },
                scale: {
                  ticks: {
                    beginAtZero: true
                  }
                }
              }
            });
          });
        </script>
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="card">
      <div class="card-body">
        <div class="panel">
          <div class="panel-heading">
            <div class="panel-title">
              <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>
            <canvas id="sources-freq" height="164" width="308" style="display: block; width: 308px; height: 164px;"></canvas>
          </div>
        </div>
        <script>
          @php
            $sources = \App\Models\Log::whereAction('SOURCE')->select(\DB::raw('sub_action, COUNT(*) as count'))->groupBy('sub_action')->get();
          @endphp
          $(document).ready(function(){
            var ctx = document.getElementById( "sources-freq" );
            ctx.height = 160;
            var myChart = new Chart( ctx, {
              type: 'radar',
              data: {
                labels: [
                  @foreach($sources as $source)
                    '{{$source->sub_action}}',
                  @endforeach
                ],
                datasets: [
                  {
                    label: "تعداد",
                    data: [
                      @foreach($sources as $source)
                        {{$source->count}},
                      @endforeach
                    ],
                    borderColor: "rgba(150, 123, 180, 0.6)",
                    borderWidth: "1",
                    backgroundColor: "rgba(150, 123, 255, 0.4)"
                  },
                ]
              },
              options: {
                legend: {
                  position: 'top'
                },
                scale: {
                  ticks: {
                    beginAtZero: true
                  }
                }
              }
            });
          });
        </script>
      </div>
    </div>
  </div>
  <div class="col-md-12">
    <div class="card">
      <div class="card-body">
        <div class="panel">
          <div class="panel-heading">
            <div class="panel-title">
              <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>
            <canvas id="source-7d" height="164" width="308" style="display: block; width: 308px; height: 164px;"></canvas>
          </div>
        </div>
        <script>
          @php
            $sources = \App\Models\Log::whereAction('SOURCE')->select(\DB::raw('sub_action, COUNT(*) as count'))->groupBy('sub_action')->get();
          @endphp
          $(document).ready(function(){
            var lineChartData = {
              labels: [
                @for($i=0; $i<7; $i++)
                  {{$i+1}},
                @endfor
              ],
              datasets: [
              @foreach($sources as $i=>$source)
                {
                  label: '{{$source->sub_action}}',
                  borderColor: colors[{{$i}}],
                  backgroundColor: colors[{{$i}}],
                  fill: false,
                  data: [
                    @for($i=0; $i<7; $i++)
                      {{\App\Models\Log::whereAction('SOURCE')->whereSubAction($source->sub_action)->where('created_at', '>', date('Y-m-d G:i:s', time() - 24*3600*(7-$i)))->where('created_at', '<', date('Y-m-d G:i:s', time() - 24*3600*(6-$i)))->count()}},
                    @endfor
                  ],
                  yAxisID: 'y1',
                },
              @endforeach
            ]
            };
            var ctx = document.getElementById( "source-7d" );
            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>
  <div class="col-md-12">
    <div class="card">
      <div class="card-body">
        <div class="panel">
          <div class="panel-heading">
            <div class="panel-title">
              <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>
            <canvas id="source-30d" height="164" width="308" style="display: block; width: 308px; height: 164px;"></canvas>
          </div>
        </div>
        <script>
          @php
            $sources = \App\Models\Log::whereAction('SOURCE')->select(\DB::raw('sub_action, COUNT(*) as count'))->groupBy('sub_action')->get();
          @endphp
          $(document).ready(function(){
            var lineChartData = {
              labels: [
                @for($i=0; $i<30; $i++)
                  {{$i+1}},
                @endfor
              ],
              datasets: [
              @foreach($sources as $i=>$source)
                {
                  label: '{{$source->sub_action}}',
                  borderColor: colors[{{$i}}],
                  backgroundColor: colors[{{$i}}],
                  fill: false,
                  data: [
                    @for($i=0; $i<30; $i++)
                      {{\App\Models\Log::whereAction('SOURCE')->whereSubAction($source->sub_action)->where('created_at', '>', date('Y-m-d G:i:s', time() - 24*3600*(30-$i)))->where('created_at', '<', date('Y-m-d G:i:s', time() - 24*3600*(29-$i)))->count()}},
                    @endfor
                  ],
                  yAxisID: 'y1',
                },
              @endforeach
            ]
            };
            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>
  <div class="col-md-12">
    <div class="card">
      <div class="card-body">
        <div class="panel">
          <div class="panel-heading">
            <div class="panel-title">
              <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>
            <canvas id="use-7d" height="164" width="308" style="display: block; width: 308px; height: 164px;"></canvas>
          </div>
        </div>
        <script>
          $(document).ready(function(){
            var lineChartData = {
              labels: [
                @for($i=0; $i<7; $i++)
                  {{$i+1}},
                @endfor
              ],
              datasets: [
                {
                  label: 'تعداد بازدید',
                  borderColor: colors[4],
                  backgroundColor: colors[4],
                  fill: false,
                  data: [
                    @for($i=0; $i<7; $i++)
                      {{\App\Models\Log::whereAction('PAGE_VISIT')->where('created_at', '>', date('Y-m-d G:i:s', time() - 24*3600*(7-$i)))->where('created_at', '<', date('Y-m-d G:i:s', time() - 24*3600*(6-$i)))->count()}},
                    @endfor
                  ],
                  yAxisID: 'y1',
                },
                {
                  label: 'تعداد بازدیدکنندگان',
                  borderColor: colors[3],
                  backgroundColor: colors[3],
                  fill: false,
                  data: [
                    @for($i=0; $i<7; $i++)
                      {{sizeof(\App\Models\Log::select('ip')->whereAction('PAGE_VISIT')->groupBy('ip')->where('created_at', '>', date('Y-m-d G:i:s', time() - 24*3600*(7-$i)))->where('created_at', '<', date('Y-m-d G:i:s', time() - 24*3600*(6-$i)))->get())}},
                    @endfor
                  ],
                  yAxisID: 'y1',
                },
                {
                  label: 'کلیک روی دانلود پژوهیار',
                  borderColor: colors[2],
                  backgroundColor: colors[2],
                  fill: false,
                  data: [
                    @for($i=0; $i<7; $i++)
                    {{\App\Models\Log::whereAction('DOWNLOAD_CLICKED')->where('created_at', '>', date('Y-m-d G:i:s', time() - 24*3600*(7-$i)))->where('created_at', '<', date('Y-m-d G:i:s', time() - 24*3600*(6-$i)))->count()}},
                    @endfor
                  ],
                  yAxisID: 'y1',
                },
              ]
            };
            var ctx = document.getElementById( "use-7d" );
            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>
  <div class="col-md-12">
    <div class="card">
      <div class="card-body">
        <div class="panel">
          <div class="panel-heading">
            <div class="panel-title">
              <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>
            <canvas id="use-30" height="164" width="308" style="display: block; width: 308px; height: 164px;"></canvas>
          </div>
        </div>
        <script>
          $(document).ready(function(){
            var lineChartData = {
              labels: [
                @for($i=0; $i<30; $i++)
                  {{$i+1}},
                @endfor
              ],
              datasets: [
                {
                  label: 'تعداد بازدید',
                  borderColor: colors[4],
                  backgroundColor: colors[4],
                  fill: false,
                  data: [
                    @for($i=0; $i<30; $i++)
                      {{\App\Models\Log::whereAction('PAGE_VISIT')->where('created_at', '>', date('Y-m-d G:i:s', time() - 24*3600*(30-$i)))->where('created_at', '<', date('Y-m-d G:i:s', time() - 24*3600*(29-$i)))->count()}},
                    @endfor
                  ],
                  yAxisID: 'y1',
                },
                {
                  label: 'تعداد بازدیدکنندگان',
                  borderColor: colors[3],
                  backgroundColor: colors[3],
                  fill: false,
                  data: [
                    @for($i=0; $i<30; $i++)
                      {{sizeof(\App\Models\Log::select('ip')->whereAction('PAGE_VISIT')->groupBy('ip')->where('created_at', '>', date('Y-m-d G:i:s', time() - 24*3600*(30-$i)))->where('created_at', '<', date('Y-m-d G:i:s', time() - 24*3600*(29-$i)))->get())}},
                    @endfor
                  ],
                  yAxisID: 'y1',
                },
                {
                  label: 'کلیک روی دانلود پژوهیار',
                  borderColor: colors[2],
                  backgroundColor: colors[2],
                  fill: false,
                  data: [
                    @for($i=0; $i<30; $i++)
                    {{\App\Models\Log::whereAction('DOWNLOAD_CLICKED')->where('created_at', '>', date('Y-m-d G:i:s', time() - 24*3600*(30-$i)))->where('created_at', '<', date('Y-m-d G:i:s', time() - 24*3600*(29-$i)))->count()}},
                    @endfor
                  ],
                  yAxisID: 'y1',
                },
              ]
            };
            var ctx = document.getElementById( "use-30" );
            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>
  <div class="col-md-12">
    <div class="card">
      <div class="card-body">
        <div class="panel">
          <div class="panel-heading">
            <div class="panel-title">
              <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>
            <canvas id="daily-use" height="164" width="308" style="display: block; width: 308px; height: 164px;"></canvas>
          </div>
        </div>
        <script>
          $(document).ready(function(){
            var lineChartData = {
              labels: [
                @for($i=0; $i<24; $i++)
                  {{$i+1}},
                @endfor
              ],
              datasets: [
                {
                  label: 'تعداد لاگ‌های ارسال شده',
                  borderColor: colors[3],
                  backgroundColor: colors[3],
                  fill: false,
                  data: [
                    @for($i=0; $i<24; $i++)
                      {{\App\Models\Log::whereRaw("HOUR(created_at) = $i")->count()}},
                    @endfor
                  ],
                  yAxisID: 'y1',
                },
              ]
            };
            var ctx = document.getElementById( "daily-use" );
            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>
</div>
@endsection