@extends('admin/layouts.master')
@section('title', 'RADICAL訂閱人數統計表 - Admin')
@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">
          <h3 class="box-title">{{ __('adminstaticword.FinancialStatements') }}</h3>
        </div>
        <!-- /.box-header -->
        <div class="box-body">
          <div class="order-datails">
            <div class="row">
              <div class="col-sm-3">
                <h3 class="text-black">RADICAL訂閱人數統計表</h3>
              </div>
              <div class="col-sm-3">
                <label for="filter-type-radical-subscribers">篩選類型</label>
                <select name="filter-type-radical-subscribers" id="filter-type-radical-subscribers" class="form-control" onchange="filterTypeOrderDetailChange(this)">
                  <option value="1">昨日交易</option>
                  <option value="2">單日</option>
                  <option value="3">月份區間</option>
                </select>
              </div>
              <div class="col-sm-5 filter-radical-subscribers-day">
                <div class="row">
                  <div class="col-12">
                    <label for="single-day">單日</label>
                    <input id="single-day" name="single-day" type="text" class="form-control">
                  </div>
                  
                </div>
              </div>
              <div class="col-sm-5 filter-radical-subscribers-range d-none">
                <div class="row">
                  <div class="col-sm-4">
                    <label for="range-year">年</label>
                    <select name="range-year" id="range-year" class="form-control">
                      <option>請選擇</option>
                      @for ($i = $orderEarliestYear; $i <= $orderlastYear; $i++)
                        <option value="{{$i}}">{{$i}}</option>
                      @endfor
                    </select>
                  </div>
                  <div class="col-sm-4">
                      <label for="start-month">起始月</label>
                      <select name="start-month" id="start-month" class="form-control">
                        <option>請選擇</option>
                        @for ($i = 1; $i <= 12; $i++)
                          <option value="{{$i}}">{{$i}}月</option>
                        @endfor
                      </select>
                  </div>
                  <div class="col-sm-4">
                      <label for="end-month">結束月</label>
                      <select name="end-month" id="end-month" class="form-control">
                        <option>請選擇</option>
                        @for ($i = 1; $i <= 12; $i++)
                          <option value="{{ $i }}">{{ $i }}月</option>
                        @endfor
                      </select>
                  </div>
                  
                </div>
                
              </div>
              <div class="col-sm-1">
                <br>
                <button class="btn btn-success radical-subscribers-btn">篩選</button>
              </div>
            </div>
            <table id="report-table" class="table table-bordered table-striped"></table>
          </div>

      </div>
    </div>
    <div class="col-lg-12 col-xs-12 gc-notice" >
      {{trans('adminstaticword.GC_TOP_NOTICE')}}
      <br>
      {{trans('adminstaticword.GC_SEC_NOTICE')}}
    </div>
  </div>
</section>
@endsection

@section('script')
<script>
  
$( document ).ready(function() {
  
  // 商品銷售明細
  search()
	// 時間 input 需要
  $('#single-day').daterangepicker({
    "singleDatePicker": true,
    startDate: moment().add(-1, 'day'),
  })
  // 篩選點下去
  $(".radical-subscribers-btn").on("click", function(){ 
    const defaultType = $('#filter-type-radical-subscribers').val();
    search(defaultType)
  });


});

// 商品銷售明細
var table = false
var tempSearch = {}

function setSearch() {
  tempSearch = {
    _token: "{{ csrf_token() }}",
    type: $('#filter-type-radical-subscribers').val(),
    singleDay: $('#single-day').val(),
    rangeYear: $('#range-year').val(),
    startMonth: $('#start-month').val(),
    endMonth: $('#end-month').val(),
  }
}

function search( defaultType ){
  setSearch()
  if (table) {
    table.draw().ajax.reload()
  }else{
    table = $('#report-table').DataTable({
      dom: 'Bfrtip',
      buttons: [
        'copy', { extend: 'csv', text: 'CSV', bom : true}, 'excel', 'print'
      ],
      ajax:{
        type: 'POST',
        url: "{{ route('financial-statements.radical-subscribers.data') }}",
        // ↓ 一定要加
        dataSrc:'',
        data: function (data) {
          data._token = tempSearch._token
          data.type = tempSearch.type
          data.singleDay = tempSearch.singleDay
          data.rangeYear = tempSearch.rangeYear
          data.startMonth = tempSearch.startMonth
          data.endMonth = tempSearch.endMonth
        },
      },
      columns: [
        {title: "商品代碼",data: "productCode"},
        {title: "商品名稱",data: "productName"},
        {title: "人數",data: "count"},
      ],
      'order'   : [],
      'paging'      : true,
      'lengthChange': true,
      'searching'   : true,
      'ordering'    : true,
      'info'        : true,
      'autoWidth'   : true,
      processing: true,
      // serverSide: true,
    });
  }
  filterTypeOrderDetailChange(document.querySelector('#filter-type-radical-subscribers'))
}

const filterOrderDetailRange = document.querySelector('.filter-radical-subscribers-range')
const filterOrderDetailDay = document.querySelector('.filter-radical-subscribers-day')
function filterTypeOrderDetailChange(e){
  if(e.value == 3){
    filterOrderDetailRange.classList.remove('d-none')
    filterOrderDetailDay.classList.add('d-none')
  } else if(e.value == 2){
    filterOrderDetailRange.classList.add('d-none')
    filterOrderDetailDay.classList.remove('d-none')
  } else {
    filterOrderDetailRange.classList.add('d-none')
    filterOrderDetailDay.classList.add('d-none')
  }
}


</script>

@endsection