@extends('admin/layouts.master')
@section('title', '課程瀏覽紀錄')
@section('body')

<section class="content">
  @include('admin.message')
  <div class="row">
    <div class="col-xs-12">
      <div class="box box-primary">
        <div class="box-header with-border">
          <div style="display: inline-block;">
            <h3 class="box-title">課程瀏覽紀錄</h3>
          </div>
          
        </div>
        
        <!-- /.box-header -->
        <div class="box-body">
            <form class="row" method="get">
              <div class="col-sm-6">
                  <label for="">日期篩選</label>
                  <div class="row">
                      <div class="col-sm-4 d-flex">
                          <label for="start">起</label>
                          <input id="start" name="start" class="form-control ml-3 input-date" type="text" value="{{ $start }}" />
                      </div>
                      <div class="col-sm-4 d-flex">
                          <label for="end">訖</label>
                          <input id="end" name="end" class="form-control ml-3 input-date" type="text" value="{{ $end }}" />
                      </div>
                      <div class="col-sm-4 d-flex">
                        <div class="row">
                          <div class="col-sm-4 d-flex">
                              <button type="submit" class="btn btn-success">篩選</button>
                          </div>
                          <div class="col-sm-4 d-flex">
                              <a id="export_record" class="btn btn-success" href="{{ route('course.views.export', [ 'start' => $start, 'end' => $end ]) }}">匯出</a>
                          </div>
                          <div class="col-sm-4 d-flex">
                            <a id="export_user_daily_views_record" class="btn btn-success" href="{{ route('course.user.daily.views.export', [ 'start' => $start, 'end' => $end ]) }}">匯出會員每日觀看次數</a>
                        </div>
                      </div>
                      </div>
                  </div>
                  
              </div>
            </form>
            <div class="row">
                <div class="col-xs-12">
                    <table id="" class="table table-bordered table-striped dataTable no-footer" role="grid" aria-describedby="example1_info">
                        <thead>
                        <tr>
                            <th>星期日期</th>
                            <th>觀看時間</th>
                            <th>會員編號</th>
                            <th>會員姓名</th>
                            <th>聯絡電話</th>
                            <th>課程編號</th>
                            <th>瀏覽課程</th>
                            <th>課程類型</th>
                            <th>課程分類</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach ($course_views as $view)
                        @php
                          if( !$view->course ){
                            continue;
                          }
                        @endphp
                        <tr>
                            <td>{{ \Carbon\Carbon::parse($view->day)->locale('zh_TW')->dayName }} </td>
                            <td>{{ $view->day }}</td>
                            <td>
                              {{ $view->user_id ?? '' }}
                            </td>
                            <td>
                                @if ($view->user)
                                {{ name_mask($view->user->fname) }}
                                @else
                                    匿名
                                @endif    
                            </td>
                            <td>
                              @if ($view->user)
                              {{ phone_mask($view->user->mobile) }}
                              @endif    
                            </td>
                            <td>{{ $view->course_id }}</td>
                            <td>{{ $view->course ? $view->course->title : '' }}</td>
                            <td>
                              @if ( $view->course )
                                @switch($view->course->type)
                                  @case(1)
                                    影片
                                    @break
                                  @case(2)
                                    加值頻道
                                    @break
                                  @case(3)
                                    訓練計畫
                                    @break
                                  @case(4)
                                    直播影片
                                    @break
                                  @default
                                    
                                @endswitch
                              @endif
                              
                            </td>
                            <td>{{ $view->course && $view->course->category ? $view->course->category->title : '' }}</td>
                        </tr>
                        @endforeach
                        </tfoot>
                    </table>
                </div>
                <div class="col-xs-12" style="text-align: -webkit-right;">
                    {{ $course_views->links() }}
                </div>
            </div>
        </div>
        <!-- /.box-body -->
      </div>
      <!-- /.box -->
    </div>
    <!-- /.col -->
  </div>
  <!-- /.row -->
</section>

@endsection

@section('scripts')
<script>
  $('.input-date').daterangepicker({
  "singleDatePicker": true,
  "showDropdowns": true,
  "showCustomRangeLabel": false,
  "autoUpdateInput": false,
locale: {
  format: "YYYY-MM-DD",
  cancelLabel: '取消',
  applyLabel: '確定',
  daysOfWeek: [
          "日",
          "一",
          "二",
          "三",
          "四",
          "五",
          "六"
      ],
  monthNames: [
          "一月",
          "二月",
          "三月",
          "四月",
          "五月",
          "六月",
          "七月",
          "八月",
          "九月",
          "十月",
          "十一月",
          "十二月"
      ],
  }
}, function(start, end, label) {
//   cosole.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
});


$('.input-date').on('apply.daterangepicker', function (ev, picker) {
    $(this).val(picker.startDate.format('YYYY-MM-DD'));
    change_export_url();
});

$('.input-date').on('cancel.daterangepicker', function (ev, picker) {
    $(this).val('');
    change_export_url();
});

function change_export_url(){
  query = '?start=' + $('input[name="start"]').val();
  query += '&end=' + $('input[name="end"]').val();
  $('#export_record').attr('href', "{{ route('course.views.export') }}" + query);
  $('#export_user_daily_views_record').attr('href', "{{route('course.user.daily.views.export')}}" + query);
}
</script>
@endsection