@extends('admin/layouts.master')
@section('title', '財務報表 - 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="staging">
            <div class="row">
              <div class="col-sm-3">
                <h3 class="text-black">預收攤提明細表</h3>
              </div>
              <div class="col-sm-3">
                <label for="filter-type-staging">篩選類型</label>
                <select name="filter-type-staging" id="filter-type-staging" class="form-control" onchange="filterTypeProductSaleChange(this)">
                  <option value="1">上個月</option>
                  <option value="2">月份區間</option>
                </select>
              </div>
              <div class="col-sm-5 filter-staging-range d-none">
                <div class="row">
                  <div class="col-sm-4">
                    <label for="staging-range-year">年</label>
                    <select name="range-year" id="staging-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="staging-start-month">月份</label>
                      <select name="start-month" id="staging-start-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 staging-btn">篩選</button>
              </div>
            </div>
            <table id="staging-table" class="table table-bordered table-striped"></table>
          </div>
        </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() {
 
  // 商品銷售月報表
  productSalesearch()
  // 篩選點下去
  $(".staging-btn").on("click", function(){
    const defaultType = $('#filter-type-staging').val();
    productSalesearch(defaultType)
  });

});



// 商品銷售月報表

var productSaleTable = false
var productSaleTempSearch = {}

function setProductSaleSearch() {
  productSaleTempSearch = {
    _token: "{{ csrf_token() }}",
    type: $('#filter-type-staging').val(),
    rangeYear: $('#staging-range-year').val(),
    Month: $('#staging-start-month').val(),
  }
  console.log(productSaleTempSearch);
}

function productSalesearch( defaultType ){
  setProductSaleSearch()
  if (productSaleTable) {
    productSaleTable.draw().ajax.reload()
  }else{
    productSaleTable = $('#staging-table').DataTable({
      dom: 'Bfrtip',
      buttons: [
        'copy', { extend: 'csv', text: 'CSV', bom : true}, 'excel', 'print'
      ],
      ajax:{
        type: 'POST',
        url: "{{ route('financial-statements.staging.data') }}",
        dataSrc:'',
        data: function (data) {
          data._token = productSaleTempSearch._token
          data.type = productSaleTempSearch.type
          data.rangeYear = productSaleTempSearch.rangeYear
          data.Month = productSaleTempSearch.Month
        },
      },
      columns: [
        {title: "訂單編號",data: "orderId"},
        {title: "交易單號",data: "tranNo"},
        {title: "類別代碼",data: "classCode"},
        {title: "類別名稱",data: "className"},
        {title: "商品代碼",data: "productCode"},
        {title: "商品名稱",data: "productName"},
        {title: "狀態",data: "status"},
        {title: "購買日",data: "buyDate" },
        {title: "有效起日",data: "startDate" },
        {title: "有效迄日",data: "endDate" },
        {title: "實付金額",data: "realPay"},
        {title: "總期數",data: "totalPeriod"},
        {title: "本月攤提金額",data: "currentStagingPrice"},
        {title: "累計已攤提期數",data: "accumulationPeriod"},
        {title: "累計已攤提金額",data: "accumulationPrice"},
        {title: "剩餘期數",data: "remainPeriod"},
        {title: "剩餘月費金額",data: "remainPrice"},
        {title: "稅額",data: "tax"},
        {title: "本期攤提稅額",data: "currentTax"},
        {title: "累計已攤提稅額",data: "accumulationTax"},
        {title: "剩餘稅額",data: "remainTax"},
      ],
      'order'   : [],
      'paging'      : true,
      'lengthChange': true,
      'searching'   : true,
      'ordering'    : true,
      'info'        : true,
      'autoWidth'   : true,
      processing: true,
    });
  }
  filterTypeProductSaleChange(document.querySelector('#filter-type-staging'))
}

const filterProductSaleRange = document.querySelector('.filter-staging-range')
function filterTypeProductSaleChange(e){
  if(e.value == 2){
    filterProductSaleRange.classList.remove('d-none')
  } else {
    filterProductSaleRange.classList.add('d-none')
  }
}

</script>

@endsection