@extends('layout.layout')

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

{{-- Content --}}
@section('content')
<div class="row">
  <div class="col">
    <table class="table table-striped rwd-table table-hover" id="dataTable">
      <thead class="thead-light">
        <tr>
          <th scope="row">發送者</th>
          <th scope="row">發送對象</th>
          <th scope="row">發送內容</th>
          <th scope="row">發送時間</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        @if(!count($messages))
          <tr>
            <td colspan="5" class="align-middle text-center">目前未有任何資料！</td>
          </tr>
        @endif
        @foreach($messages as $message)
          <tr>
            <td class="align-middle">{{ $message->created_uid }}</td>
            <td class="align-middle">{{ $message->message_object }}</td>
            <td class="align-middle">{!! $message->message_content !!}</td>
            <td class="align-middle">{{ $message->created_at }}</td>
            <td class="text-right">
              <button type="button" class="btn btn-dark" data-toggle="modal" data-target="#win-{{$message->id}}">
                <span class="fas fa-eye">&ensp;</span>詳細
              </button>
              @include('message::component.message-detail')
            </td>
          </tr>
        @endforeach
      </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, {
    /**
     * 預設排序
     */
    "order": [
      ["3", "desc"]
    ],

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