@extends('layout.layout')

{{-- Style --}}
@push('links')
<link href="{{ asset('css/datatable/datatables.min.css') }}" rel="stylesheet" type="text/css">
<style nonce="{{ csp_nonce() }}">
.hidden{
  display: none;
}
</style>
@endpush

{{-- Content --}}
@section('content')
@include('custom::component.reply-btn', ['url' => $back_route])
<input type="hidden" id="js-subscriber-datatable-baseUrl" value="{{$subscriber_datatable_route}}" />
<div class="row">
  <div class="col-12 mb-1 form-inline">
    <select name="bulk_action" class="form-control custom-select mb-2 mr-2">
      <option value="">批次處理</option>
      <option value="set_permission">設定權限</option>
      <option value="remove_subscription">移除訂閱</option>
    </select>
    <button class="btn btn-primary btn-act mb-2 disabled">選擇</button>
  </div>
  <div class="col-12 permission-group form-inline hidden">
    <div class="input-group mb-2 mr-2">
      <select name="bulk_permission" class="form-control custom-select mb-2 mr-2">
        <option value="">請選擇</option>
        <option value="viewer">檢視者</option>
        <option value="editor">編輯者</option>
      </select>
    </div>
    <button class="btn btn-primary btn-permission mb-2">確認送出</button>
  </div>
  <div class="col-12 overflow-auto mb-5">
    <table class="table table-striped table-hover steps-datatable" id="subscriberDataTable">
      <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>
        </tr>
      </thead>
      <tbody>
        <tr><td colspan="4" class="text-center">查無資料</td></tr>
      </tbody>
      <tfoot></tfoot>
    </table>
  </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="{{ Module::asset('calendar:js/list_select.js') }}"></script>
<script nonce="{{ csp_nonce() }}">
var subscriberBulkActionRoute = '{{$subscriber_bulk_action_route}}';

$(document).ready(function() {
  $("[name=bulk_action]").on("change", function() {
    var action = $(this).val();
    $('.btn-act').addClass('disabled');
    $('.permission-group').addClass('hidden');
    $('[name="bulk_permission"]').val('');
    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=='set_permission') {
      $('.permission-group').removeClass('hidden');
    }else if (action=='remove_subscription') {
      data['action'] = action;
      action_submit(data,'您確定要移除使用者的訂閱嗎？');
    }
  });

  $(".btn-permission").on("click", function() {
    var item_arr = $('input:checkbox:checked[name="items[]"]').map(function() { return $(this).val(); }).get();
    var action = 'set_permission';
    var permission = $('[name="bulk_permission"]').val();
    if (permission=='') {
      alert('請選擇欲調整的權限！');
      return;
    }

    var data = {};
    data['items'] = item_arr;
    data['action'] = action;
    data['permission_id'] = permission;
    if (permission=='editor') {
      var mes = '編輯者將會獲得該行事曆新增及修改權限。\n您確定要變更使用者權限嗎？';
    }else {
      var mes = '您確定要變更使用者權限嗎？';
    }

    action_submit(data,mes);
  });

  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: subscriberBulkActionRoute,
      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');
    $('.permission-group').addClass('hidden');
    $('[name="bulk_permission"]').prop('selectedIndex',0);
  }
});

dataTableDefSetting.language.searchPlaceholder = "使用者";

if (typeof Object.assign != 'function') {
  Object.assign = function(target) {
    'use strict';
    if (target == null) {
      throw new TypeError('Cannot convert undefined or null to object');
    }

    target = Object(target);
    for (var index = 1; index < arguments.length; index++) {
      var source = arguments[index];
      if (source != null) {
        for (var key in source) {
          if (Object.prototype.hasOwnProperty.call(source, key)) {
            target[key] = source[key];
          }
        }
      }
    }
    return target;
  };
}

table = $("#subscriberDataTable").DataTable( Object.assign(dataTableDefSetting, {
  processing: true,
  serverSide: true,
  stateSave: false,
  stateSaveParams: function(settings, data) {
      data.permission = $('[name="permission"]').val();
    },
  stateLoadParams: function(settings, data) {
    if (data.permission==='') {
      data.permission = 'all';
    }
    $('[name="check_all_items"]').prop("checked", false);
    $('[name="permission"]').val(data.permission);
    $(".nav-item[data-permission='"+data.permission+"']").children().addClass('active');
  },
  ajax: {
    url: $("#js-subscriber-datatable-baseUrl").val(),
    type: 'POST',
    data: function(data) {
      data._token = $('meta[name="csrf-token"]').attr('content');
      data.permission = $('[name="permission"]').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': false, 'searchable': true, 'className': 'align-middle text-center' },
    { "targets": 3, 'orderable': false, 'searchable': false, 'className': 'align-middle text-center' },
  ]
}));

</script>
@endpush