@extends('layout.layout')

{{-- Style --}}
@push('links')
<link href="{{ asset('css/datatable/datatables.min.css') }}" rel="stylesheet" type="text/css">
@endpush

{{-- Content --}}
@section('content')
<input type="hidden" id="js-datatable-url" value="{{$datatableRoute}}" />
<div class="row">
  <div class="col-12 overflow-auto mb-5">
    <table class="table table-striped table-hover steps-datatable" id="dataTable" style="min-width:1100px;">
      <thead class="thead-light text-center">
        <tr>
          <th scope="row">發送者</th>
          <th scope="row">發送對象</th>
          <th scope="row">發送內容</th>
          <th scope="row">發送時間</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td colspan="5" class="text-center">查無資料</td>
        </tr>
      </tbody>
      <tfoot></tfoot>
    </table>
  </div>
</div>
@endsection

{{-- Script --}}
@push('scripts')
<script type="text/javascript" src="{{ asset('js/datatable/datatables.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/datatable/datatable-default-setting.js') }}"></script>
<script type="text/javascript">
  dataTableDefSetting.language.searchPlaceholder = "發送者/對象/內容";
  $("#dataTable").DataTable( Object.assign(dataTableDefSetting, {
    processing: true,
    serverSide: true,
    stateSave: true,
    stateSaveParams: function(settings, data) {
    },
    stateLoadParams: function(settings, data) {
    },
    ajax: {
      url: $("#js-datatable-url").val(),
      type: 'POST',
      data: function(data) {
        data._token = $('meta[name="csrf-token"]').attr('content');
      },
    },
    /**
     * 預設排序
     */
    "order": [
      ["3", "desc"]
    ],

    /**
     * targets: int
     * orderable: boolean 排序
     * orderData: array 複數排序
     * searchable: boolean 查詢
     * visible: boolean 顯示
     */
    "columnDefs": [
      { "targets":0, 'orderable': true, 'searchable': true, 'width': '10%','className': 'align-middle text-center' },
      { "targets":1, 'orderable': true, 'searchable': true, 'width': '10%','className': 'align-middle text-center' },
      { "targets":2, 'orderable': false, 'searchable': true },
      { "targets":3, 'orderable': true, 'searchable': false, 'width': '20%','className': 'align-middle text-center' },
      { "targets":4, 'orderable': false, 'searchable': false, 'width': '10%', 'className': 'align-middle text-right' }
    ]
  }));
</script>
@endpush