@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="order-datails">
            <div class="row">
              <div class="col-sm-3">
                <h3 class="text-black">支付明細表</h3>
              </div>
              <div class="col-sm-3">
                <label for="filter-type-payment-detail">篩選類型</label>
                <select name="filter-type-payment-detail" id="filter-type-payment-detail" 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-payment-detail-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-payment-detail-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 payment-detail-btn">篩選</button>
              </div>
            </div>
            <h4>信用卡</h4>
            <table id="report-table-cathaybk" class="table table-bordered table-striped"></table>
            <h4>OP錢包</h4>
            <table id="report-table-openwallet" class="table table-bordered table-striped"></table>
            <h4>iCASH PAY</h4>
            <table id="report-table-icashpay" 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'),
  })
  // 篩選點下去
  $(".payment-detail-btn").on("click", function(){ 
    const defaultType = $('#filter-type-payment-detail').val();
    search(defaultType)
  });


});

// 商品銷售明細
var table_cathaybk = false
var table_openwallet = false
var table_icashpay = false
var tempSearch = {}

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

function search( defaultType ){
  setSearch()
  if (table_cathaybk ) {
    table_cathaybk.draw().ajax.reload()
  }else{
    table_cathaybk = $('#report-table-cathaybk').DataTable({
      dom: 'Bfrtip',
      buttons: [
        'copy', { extend: 'csv', text: 'CSV', bom : true}, 'excel', 'print'
      ],
      ajax:{
        type: 'POST',
        url: "{{ route('financial-statements.payment-detail.data') }}",
        // ↓ 一定要加
        dataSrc:'',
        data: function (data) {
          data.paymentType = 'cathaybk'
          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: "orderId"},
        {title: "交易代號",data: "tranNo"},
        {title: "交易時間",data: "tranDateTime"},
        {title: "交易金額",data: "tranAmount"},
        {title: "授權金額",data: "approvalAmount"},
        {title: "授權碼",data: "approvalCode"}
      ],
      'order'   : [],
      'paging'      : true,
      'lengthChange': true,
      'searching'   : true,
      'ordering'    : true,
      'info'        : true,
      'autoWidth'   : true,
      processing: true,
      // serverSide: true,
    });
  }
  if (table_openwallet ) {
    table_openwallet.draw().ajax.reload()
  }else{
    table_openwallet = $('#report-table-openwallet').DataTable({
      dom: 'Bfrtip',
      buttons: [
        'copy', { extend: 'csv', text: 'CSV', bom : true}, 'excel', 'print'
      ],
      ajax:{
        type: 'POST',
        url: "{{ route('financial-statements.payment-detail.data') }}",
        // ↓ 一定要加
        dataSrc:'',
        data: function (data) {
          data.paymentType = 'openwallet'
          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: "orderId"},
        {title: "交易代號",data: "tranNo"},
        {title: "交易時間",data: "tranDateTime"},
        {title: "交易金額",data: "tranAmount"},
        {title: "授權金額",data: "approvalAmount"},
        {title: "點折金",data: "point"},
        {title: "授權碼",data: "approvalCode"}
      ],
      'order'   : [],
      'paging'      : true,
      'lengthChange': true,
      'searching'   : true,
      'ordering'    : true,
      'info'        : true,
      'autoWidth'   : true,
      processing: true,
      // serverSide: true,
    });
  }
  if (table_icashpay ) {
    table_icashpay.draw().ajax.reload()
  }else{
    table_icashpay = $('#report-table-icashpay').DataTable({
      dom: 'Bfrtip',
      buttons: [
        'copy', { extend: 'csv', text: 'CSV', bom : true}, 'excel', 'print'
      ],
      ajax:{
        type: 'POST',
        url: "{{ route('financial-statements.payment-detail.data') }}",
        // ↓ 一定要加
        dataSrc:'',
        data: function (data) {
          data.paymentType = 'icashpay'
          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: "orderId"},
        {title: "交易代號",data: "tranNo"},
        {title: "icashpay訂單編號",data: "icashpayOrderId"},
        {title: "交易時間",data: "tranDateTime"},
        {title: "交易金額",data: "tranAmount"},
        {title: "授權金額",data: "approvalAmount"},
        {title: "點折金",data: "point"},
        {title: "授權碼",data: "approvalCode"}
      ],
      'order'   : [],
      'paging'      : true,
      'lengthChange': true,
      'searching'   : true,
      'ordering'    : true,
      'info'        : true,
      'autoWidth'   : true,
      processing: true,
      // serverSide: true,
    });
  }
  filterTypeOrderDetailChange(document.querySelector('#filter-type-payment-detail'))

  
}

const filterOrderDetailRange = document.querySelector('.filter-payment-detail-range')
const filterOrderDetailDay = document.querySelector('.filter-payment-detail-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