@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-12">
    <ul class="nav nav-tabs" id="settingTab" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" id="normal-tab" data-toggle="tab" href="#normal" role="tab" aria-controls="normal" aria-selected="true">一般</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="user-tab" data-toggle="tab" href="#user" role="tab" aria-controls="user" aria-selected="false" data-viewed="0">使用者</a>
      </li>
    </ul>
    <div class="tab-content p-3" id="settingTabContent">
      <div class="tab-pane fade show active" id="normal" role="tabpanel" aria-labelledby="normal-tab">
        <div class="row mb-3">
          <div class="col-12 col-md-10 col-lg-8">
            <form id="sizeForm" method="post">
              @csrf
              <div class="form-group row">
                <label class="col-form-label col-12 col-sm-4 col-md-5 text-sm-center" for="InputSize">
                  <span class="align-middle"><b>預設上傳空間配額</b></span>
                </label>
                <div class="input-group col-12 col-sm-8 col-md-7">
                  <input type="number" name="size" class="form-control {{ $errors->has('size') ? ' is-invalid' : '' }}" id="InputSize" value="{{ old('size',isset($default_doc_size)?$default_doc_size:300) }}" placeholder="上傳空間配額(MB)" required>
                  <div class="input-group-append">
                    <div class="input-group-text">MB</div>
                  </div>
                  <small class="form-text text-muted w-100"></small>
                  @if ($errors->has('size'))
                    @foreach($errors->get('size') as $error)
                    <div class="invalid-feedback">
                      {{ $error }}
                    </div>
                    @endforeach
                  @endif
                </div>
              </div>
              <div class="text-center mt-5">
                <button type="submit" class="btn btn-lg btn-success font-weight-bold submit-btn">儲存</button>
              </div>
            </form>
          </div>
        </div>
      </div>
      <div class="tab-pane fade" id="user" role="tabpanel" aria-labelledby="user-tab">
        <input type="hidden" id="js-user-url" value="{{$userDatatableRoute}}" />
        <div class="row">
          <div class="col-12 form-inline">
            <div class="input-group mb-2 mr-2">
              <select name="department_id" class="form-control custom-select mb-2 mr-2">
                <option value="all">全部單位</option>
                @foreach($departments as $department)
                <option value="{{$department->id}}">{{$department->name}}</option>
                @endforeach
              </select>
            </div>
            <div class="input-group mb-2 mr-2">
              <select name="position_id" class="form-control custom-select mb-2 mr-2">
                <option value="all">全部職稱</option>
                @foreach($positions as $position)
                <option value="{{$position->id}}">{{$position->name}}</option>
                @endforeach
              </select>
            </div>
          </div>
          <div class="col-12 overflow-auto mb-5">
            <table class="table table-striped table-hover steps-datatable" id="userDataTable">
              <thead class="thead-light text-center">
                <tr>
                  <th scope="col">中文姓名</th>
                  <th scope="col">單位</th>
                  <th scope="col">職稱</th>
                  <th scope="col"></th>
                </tr>
              </thead>
              <tbody>
                <tr><td colspan="4" 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() }}">
$(document).ready(function() {
  $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
    var el = e.target;
    if (el.dataset['viewed']==0) {
      datatableInitial();
      el.dataset['viewed']= 1;
    }
  })

  $('[name="department_id"]').on("change", function() {
      table.ajax.reload();
  });
  $('[name="position_id"]').on("change", function() {
      table.ajax.reload();
  });
});
dataTableDefSetting.language.searchPlaceholder = "中文姓名/單位/職稱";
function datatableInitial(){
  table = $("#userDataTable").DataTable( Object.assign(dataTableDefSetting, {
    processing: true,
    serverSide: true,
    stateSave: false,
    stateSaveParams: function(settings, data) {
      data.department_id = $('[name="department_id"]').val();
      data.position_id = $('[name="position_id"]').val();
    },
    stateLoadParams: function(settings, data) {
      if (typeof data.department_id=='undefined'||data.department_id===''||data.department_id===null) {
        data.department_id = 'all';
      }
      $('[name="department_id"]').val(data.department_id);
      if (typeof data.position_id=='undefined'||data.position_id===''||data.position_id===null) {
        data.position_id = 'all';
      }
      $('[name="position_id"]').val(data.position_id);
    },
    ajax: {
      url: $("#js-user-url").val(),
      type: 'POST',
      data: function(data) {
        data._token = $('meta[name="csrf-token"]').attr('content');
        data.department_id = $('[name="department_id"]').val();
        data.position_id = $('[name="position_id"]').val();
      },
    },
    /**
     * 預設排序
     */
    "order": [
      ["1", "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': true, 'className': 'align-middle text-center' },
      { "targets": 2, 'orderable': true, 'searchable': true, 'className': 'align-middle text-center' },
      { "targets": 3, 'orderable': false, 'searchable': false, 'className': 'align-middle text-right' },
    ]
  }));
}

</script>
@endpush