@extends('layout.layout')

{{-- Style --}}
@push('links')
<link href="{{ asset('css/datatable/datatables.min.css') }}" rel="stylesheet" type="text/css">
<link href="{{ asset('js/jstree/themes/default/style.min.css') }}" rel="stylesheet" type="text/css">
<style nonce="{{ csp_nonce() }}">
.section-title{
  font-size: 1.5rem;
  font-weight: bold;
}
</style>
@endpush

{{-- Content --}}
@section('content')
@include('custom::component.reply-btn', ['url' => $back_route])
<div class="row justify-content-center mb-5">
  <div class="col-12 col-lg-10">
    <div class="shadow-sm p-4 bg-white rounded-lg">
      <h3 class="text-center mt-1">{{$user->name}}</h3>
      <div class="self-section mb-5">
        <div class="self-section-title">
          <span class="section-title">公開的個人文檔</span>
        </div>
        <hr>
        <div class="row">
          <div class="col overflow-auto">
            <input type="hidden" id="js-self_file-url" value="{{$self_fileDatatableRoute}}" />
            <table class="table table-striped table-hover steps-datatable" id="self_fileDataTable">
              <thead class="thead-light text-center">
                <tr>
                  <th scope="col">檔案名稱</th>
                  <th scope="col">所屬資料夾</th>
                  <th scope="col">文檔大小</th>
                  <th scope="col">最後修改日期</th>
                  <th scope="col"></th>
                </tr>
              </thead>
              <tbody>
                <tr><td colspan="5" class="text-center">查無資料</td></tr>
              </tbody>
              <tfoot></tfoot>
            </table>
          </div>
        </div>
      </div>
      <div class="public-section">
        <div class="public-section-title">
          <span class="section-title">公共資料夾文檔</span>
        </div>
        <hr>
        <div class="row">
          <div class="col overflow-auto">
            <input type="hidden" id="js-public_file-url" value="{{$public_fileDatatableRoute}}" />
            <table class="table table-striped table-hover steps-datatable" id="public_fileDataTable">
              <thead class="thead-light text-center">
                <tr>
                  <th scope="col">檔案名稱</th>
                  <th scope="col">所屬資料夾</th>
                  <th scope="col">文檔大小</th>
                  <th scope="col">最後修改日期</th>
                  <th scope="col"></th>
                </tr>
              </thead>
              <tbody>
                <tr><td colspan="5" class="text-center">查無資料</td></tr>
              </tbody>
              <tfoot></tfoot>
            </table>
          </div>
        </div>
      </div>
    </div>
  </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 nonce="{{ csp_nonce() }}">
/**
 *
 * 個人文檔
 *
 *
 */
dataTableDefSetting.language.searchPlaceholder = "名稱";

self_table = $("#self_fileDataTable").DataTable( Object.assign(dataTableDefSetting, {
  processing: true,
  serverSide: true,
  stateSave: false,
  stateSaveParams: function(settings, data) {
  },
  stateLoadParams: function(settings, data) {

  },
  ajax: {
    url: $("#js-self_file-url").val(),
    type: 'POST',
    data: function(data) {
      data._token = $('meta[name="csrf-token"]').attr('content');
    },
  },
  /**
   * 預設排序
   */
  "order": [
    ["0", "desc"]
  ],

  /**
   * targets: int
   * orderable: boolean 排序
   * orderData: array 複數排序
   * searchable: boolean 查詢
   * visible: boolean 顯示
   * className: string 加進去的class內容
   */
  "columnDefs": [
    { "targets": 0, 'orderable': true, 'searchable': true, 'className': 'align-middle text-center' },
    { "targets": 1, 'orderable': true, 'searchable': false, 'className': 'align-middle text-center' },
    { "targets": 2, 'orderable': true, 'searchable': false, 'className': 'align-middle text-center' },
    { "targets": 3, 'orderable': true, 'searchable': false, 'className': 'align-middle text-center' },
    { "targets": 4, 'orderable': false, 'searchable': false, 'className': 'align-middle text-right' },
  ]
}));
/**
 *
 * 公共文檔
 *
 *
 */

public_table = $("#public_fileDataTable").DataTable( Object.assign(dataTableDefSetting, {
  processing: true,
  serverSide: true,
  stateSave: false,
  stateSaveParams: function(settings, data) {
  },
  stateLoadParams: function(settings, data) {

  },
  ajax: {
    url: $("#js-public_file-url").val(),
    type: 'POST',
    data: function(data) {
      data._token = $('meta[name="csrf-token"]').attr('content');
    },
  },
  /**
   * 預設排序
   */
  "order": [
    ["0", "desc"]
  ],

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