@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() }}">
.hidden{
  display: none;
}
.sidebar-content{
  border: 2px solid #728fa7;
}
.sidebar-title{
  background-color: #728fa7;
  color: white;
}
.sidebar-title>span{
  font-size: 1.5rem;
}
.storage-section{
  border: 3px solid #728fa7;
  border-radius: 10px;
}
</style>
@endpush

{{-- Content --}}
@section('content')
<div class="row mb-2 mb-md-0 btn-action-section">
  <div class="col-md text-right">
    <a class="btn btn-lg btn-success" href="{{$create_route}}">
      <i class="fas fa-plus fa-fw"></i><span class="ml-1">新增</span>
    </a>
  </div>
</div>
<div class="row">
  <div class="col-12 col-sm-4 col-lg-3 mt-3 mt-sm-0 mb-4 mb-sm-0">
    <div class="sidebar-content">
      <div class="sidebar-title text-center font-weight-bold">
        <span>公共資料夾</span><a class="font-weight-bold ml-3" href="{{$folder_route}}" target="_blank"><i class="fas fa-external-link-alt ml-1"></i></a>
      </div>
      <div class="sidebar-folder-tree overflow-auto my-2">
      </div>
    </div>
  </div>
  <div class="col-12 col-sm-8 col-lg-9">
    <input type="hidden" id="js-public_file-url" value="{{$public_fileDatatableRoute}}" />
    <input type="hidden" name="selected_folder_ids" value="">
    <input type="hidden" name="display_folder_ids" value="">
    <div class="row">
      <div class="col-12 form-inline">
        <select name="bulk_action" class="form-control custom-select mb-2 mr-2">
          <option value="">批次處理</option>
          <option value="delete">刪除</option>
        </select>
        <button class="btn btn-primary btn-act mb-2 disabled">選擇</button>
      </div>
      <div class="col-12 overflow-auto">
        <table class="table table-striped table-hover steps-datatable" id="public_fileDataTable">
          <thead class="thead-light text-center">
            <tr>
              <th scope="row"><div class="w-100 h-100"><input type="checkbox" class="checkbox-md" name="check_all_items"></div></th>
              <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="6" class="text-center">查無資料</td></tr>
          </tbody>
          <tfoot></tfoot>
        </table>
      </div>
      <div class="col-12 col-lg-6 mb-5">
        <div class="storage-section my-2 p-3">
          <span>目前您已經使用了{{$used_size_name}}(總量{{$enabled_doc_size}}MB)的空間({{ceil(($used_size*100)/($enabled_doc_size*1024))}}%)</span>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

{{-- Script --}}
@push('scripts')
<script src="https://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<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" src="{{ asset('js/jstree/jstree.min.js') }}"></script>
<script type="text/javascript" src="{{ Module::asset('doc:js/list_select.js') }}"></script>
<script nonce="{{ csp_nonce() }}">
Array.prototype.unique = function() {
    var a = this.concat();
    for(var i=0; i<a.length; ++i) {
        for(var j=i+1; j<a.length; ++j) {
            if(a[i] === a[j])
                a.splice(j--, 1);
        }
    }

    return a;
};

var fileBulkActionRoute = '{{$file_bulk_action_route}}';
var folder_json = @json($folder_json);

$(document).ready(function() {
  $("[name=bulk_action]").on("change", function() {
    var action = $(this).val();
    $('.btn-act').addClass('disabled');
    if (action=='') {
      return;
    }
    $('.btn-act').removeClass('disabled');
  });

  $(".btn-act").on("click", function() {
    var action = $("[name=bulk_action]").val();
    if (action=='') {
      return;
    }
    var item_arr = $('input:checkbox:checked[name="items[]"]').map(function() { return $(this).val(); }).get();
    if (item_arr.length==0) {
      alert('請勾選欲處理的項目！');
      return;
    }
    var data = {};
    data['items'] = item_arr;
    if (action=='delete') {
      data['action'] = action;
      action_submit(data,'刪除後無法復原\n\n您確定要刪除嗎？');
    }
  });

  $(".sidebar-folder-tree")
  .on('changed.jstree', function (e, data) {
    var i, j, display_folder = [], selected_folder = [];
    var check_display_all = false;
    for(i = 0, j = data.selected.length; i < j; i++) {
      var folder_ids = data.instance.get_node(data.selected[i]).a_attr.folder_ids;
      if (folder_ids=='all') {
        check_display_all = true;
      }
      display_folder = display_folder.concat(folder_ids).unique();
      selected_folder.push(data.instance.get_node(data.selected[i]).id);
    }
    if (check_display_all) {
      display_folder = 'all';
    }
    $('[name=display_folder_ids]').val(display_folder);
    $('[name=selected_folder_ids]').val(selected_folder);
    table.ajax.reload();
  })
  .jstree({ 'core' : {
    'data' : folder_json
  } });

  var selected_folder_ids_arr = $('[name="selected_folder_ids"]').val().split(',');
  for (var i = 0; i < selected_folder_ids_arr.length; i++) {
    $(".sidebar-folder-tree").jstree(true).select_node(selected_folder_ids_arr[i]);
  }

  function action_submit(data,mes){
    mes = mes || '';
    data['_token'] = $('meta[name="csrf-token"]').attr('content');
    if (mes!=''&&!confirm(mes)) {
      return;
    }
    $('#component-response-alert>div').remove();

    LoadingCover.show();
    $.ajax({
      url: fileBulkActionRoute,
      type: 'POST',
      data: data,
      dataType: 'json',
      success: function(data){
        resetBulkActionForm();
        var alerts = [{ type: "success", content: data.message }]
        $( "#AlertTemplate" ).tmpl( alerts )
        .appendTo( "#component-response-alert" );
        table.ajax.reload(function() {$('[name="check_all_items"]').prop("checked", false);});
      },
      error: function(xhr){
        var errors = xhr.responseJSON;
        var alerts = [];
        for (var i = 0; i < Object.keys(errors).length; i++) {
          var error_arr = errors[Object.keys(errors)[i]];
          for (var j = 0; j < error_arr.length; j++) {
            alerts.push({ type: "danger", content: error_arr[j] });
          }
        }
        $( "#AlertTemplate" ).tmpl( alerts )
        .appendTo( "#component-response-alert" );
      }
    });
    LoadingCover.hide();
  }
  function resetBulkActionForm() {
    $("[name=bulk_action]").prop('selectedIndex',0);
    $('.btn-act').addClass('disabled');
  }
});

dataTableDefSetting.language.searchPlaceholder = "名稱";

table = $("#public_fileDataTable").DataTable( Object.assign(dataTableDefSetting, {
  processing: true,
  serverSide: true,
  stateSave: false,
  stateSaveParams: function(settings, data) {
    data.display_folder_ids = $('[name="display_folder_ids"]').val();
    data.selected_folder_ids = $('[name="selected_folder_ids"]').val();
  },
  stateLoadParams: function(settings, data) {
    if (typeof data.display_folder_ids=='undefined'||data.display_folder_ids===''||data.display_folder_ids===null) {
      data.display_folder_ids = 'all';
    }
    $('[name="display_folder_ids"]').val(data.display_folder_ids);
    if (typeof data.selected_folder_ids=='undefined'||data.selected_folder_ids===''||data.selected_folder_ids===null) {
      data.selected_folder_ids = 'root';
    }
    $('[name="selected_folder_ids"]').val(data.selected_folder_ids);
  },
  ajax: {
    url: $("#js-public_file-url").val(),
    type: 'POST',
    data: function(data) {
      data._token = $('meta[name="csrf-token"]').attr('content');
      data.display_folder_ids = $('[name="display_folder_ids"]').val();
      data.selected_folder_ids = $('[name="selected_folder_ids"]').val();
    },
  },
  /**
   * 預設排序
   */
  "order": [
    ["1", "desc"]
  ],

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

</script>
@endpush