@extends('layout.layout')

{{-- Style --}}
@push('links')
@if (isset($_SERVER['HTTP_USER_AGENT']) && ( (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== false ) || (strpos($_SERVER['HTTP_USER_AGENT'], 'Trident/7.0; rv:11.0') !== false)|| (strpos($_SERVER['HTTP_USER_AGENT'], 'Trident/7.0') !== false) ) )
<link nonce="{{ csp_nonce() }}" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.2/css/bootstrap-colorpicker.min.css">
@else
<link nonce="{{ csp_nonce() }}" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/3.3.0/css/bootstrap-colorpicker.min.css">
@endif
<link href="{{ asset('css/datatable/datatables.min.css') }}" rel="stylesheet" type="text/css">
<style nonce="{{ csp_nonce() }}">
.calendar-color-icon{
  height: 24px;
  width: 24px;
  border-radius: 50%;
}
.nav-pills{
  cursor: pointer;
}
.hidden{
  display: none;
}
#calendar-color-picker{
  background-color:{{ old('color',isset($model->color)?$model->color:null) }};
}
#copy-btn {
  cursor: pointer;
}
#btn-submit {
  height:38px;
}
</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 justify-content-center">
  <div class="col-12 col-lg-10">
    <ul class="nav nav-tabs" id="myTab" role="tablist">
      <li class="nav-item nav-setting-item">
        <a class="nav-link active" id="basic-tab" data-toggle="tab" href="#basic" role="tab" aria-controls="basic" aria-selected="true">基本</a>
      </li>
      <li class="nav-item nav-setting-item">
        <a class="nav-link" id="permission-tab" data-toggle="tab" href="#permission" role="tab" aria-controls="permission" aria-selected="false" data-viewed="0">共用</a>
      </li>
    </ul>
    <div class="shadow-sm p-3 bg-white rounded-lg">
      <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="basic" role="tabpanel" aria-labelledby="basic-tab">
          <form id="basicForm" method="post">
            @csrf
            <input type="hidden" name="action" value="update">
          <h4 class="text-center mt-3">基本設定</h4>
          <hr>
          <div class="form-group row">
            <label class="col-form-label col-12 col-sm-3 text-sm-center" for="InputTitle">
              <span class="align-middle"><span class="text-red">※&ensp;</span><b>名稱</b></span>
            </label>
            <div class="input-group col-12 col-sm-9">
              <input type="text" name="title" class="form-control {{ $errors->has('title') ? ' is-invalid' : '' }}" id="InputTitle" value="{{ old('title',isset($model->display_name)?$model->display_name:null) }}" placeholder="名稱" required>
              <small class="form-text text-muted w-100"></small>
              @if ($errors->has('title'))
                @foreach($errors->get('title') as $error)
                <div class="invalid-feedback">
                  {{ $error }}
                </div>
                @endforeach
              @endif
            </div>
          </div>
          <div class="form-group row">
            <label class="col-form-label col-12 col-sm-3 text-sm-center" for="InputColor">
              <span class="align-middle"><span class="text-red">※&ensp;</span><b>顏色</b></span>
            </label>
            <div class="input-group calendarColor col-12 col-sm-9">
              <input type="text" name="color" class="form-control {{ $errors->has('color') ? ' is-invalid' : '' }}" id="InputColor" value="{{ old('color',isset($model->color)?$model->color:null) }}" required>
              <div class="input-group-append">
                <span class="input-group-text"><div id="calendar-color-picker" class="calendar-color-icon calendarColorPicker"></div></span>
              </div>
              <small class="form-text text-muted w-100">如使用IE瀏覽器色碼的部分請手動輸入，可達調整行事曆顯示顏色</small>
              @if ($errors->has('color'))
                @foreach($errors->get('color') as $error)
                <div class="invalid-feedback">
                  {{ $error }}
                </div>
                @endforeach
              @endif
            </div>
          </div>
          <div class="form-group row">
            <label class="col-12 col-sm-3 text-sm-center">
              <span class="align-middle"><span class="text-red">※&ensp;</span><b>是否顯示</b></span>
            </label>
            @php
            $enabled = $model->enabled;
            @endphp
            <div class="col-12 col-sm-9 radio-group {{ $errors->has('enabled') ? ' is-invalid' : '' }}">
              <div class="custom-control custom-radio custom-control-inline">
                <input type="radio" class="custom-control-input {{ $errors->has('enabled') ? ' is-invalid' : '' }}" id="enabledY" name="enabled" value="1"
                @if($enabled==1)
                checked
                @endif
                >
                <label class="custom-control-label" for="enabledY">是</label>
              </div>
              <div class="custom-control custom-radio custom-control-inline">
                <input type="radio" class="custom-control-input {{ $errors->has('enabled') ? ' is-invalid' : '' }}" id="enabledN" name="enabled" value="0"
                @if($enabled==0)
                checked
                @endif
                >
                <label class="custom-control-label" for="enabledN">否</label>
              </div>
            </div>
            @if ($errors->has('enabled'))
              @foreach($errors->get('enabled') as $error)
              <div class="invalid-feedback">
                {{ $error }}
              </div>
              @endforeach
            @endif
          </div>
          <div class="form-group row">
            <label class="col-form-label col-12 col-sm-3 text-sm-center" for="InputDescription">
              <span class="align-middle"><b>描述</b></span>
            </label>
            <div class="input-group col-12 col-sm-9">
              <input type="text" name="description" class="form-control {{ $errors->has('description') ? ' is-invalid' : '' }}" id="InputDescription" value="{{ old('description',isset($model->description)?$model->description:null) }}" placeholder="描述">
              <small class="form-text text-muted w-100"></small>
              @if ($errors->has('description'))
                @foreach($errors->get('description') 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 class="tab-pane fade" id="permission" role="tabpanel" aria-labelledby="permission-tab">
          @if($model->type=='personal')
          <h4 class="text-center mt-3">共用設定</h4>
          <hr>
          <div class="form-group row">
            <label class="col-12 col-sm-3 text-sm-center">
              <span class="align-middle"><b>是否公開</b></span>
            </label>
            <div class="col-12 col-sm-9 radio-group">
              <div class="custom-control custom-switch">
                <input type="checkbox" class="custom-control-input" id="isPublicY"
                @if($model->is_public==1)
                checked
                @endif
                >
                <label class="custom-control-label" for="isPublicY">公開</label>
              </div>
            </div>
          </div>

          <div class="form-group row public-group @if($model->is_public==0) hidden @endif">
            <label class="col-12 col-sm-3 text-sm-center">
              <span class="align-middle"><b>公開行事曆網址</b></span>
            </label>
            <div class="input-group col-12 col-sm-9">
              <i id="copy-btn" class="fas fa-link" data-toggle="tooltip" data-placement="top" title="點擊複製網址" onclick="copyUrl()"></i><a id="publicUrl" class="ml-2" target="_blank" href="{{$model->public->url ?? ''}}">{{$model->public->url ?? ''}}</a>
            </div>
          </div>

          <div class="form-group row">
            <div class="col-12">
              <div class="row">
                <label class="col-12 col-sm-4 col-md-3 text-sm-center" for="InputSubscriber">
                  <span class="align-middle"><b>分享給特定用戶</b></span>
                </label>
              </div>
            </div>
            <div class="col-12">
              <div class="row justify-content-center">
                <div class="col-12 col-sm-11">
                  <form id="SubscriberForm">
                    <div class="row">
                      @csrf
                      <div class="input-group col-12 col-md-8 mt-md-2 pl-lg-4">
                        <input type="text" name="subscriber" class="form-control" id="InputSubscriber" value="" placeholder="帳號" required>
                        <small class="form-text text-muted w-100">多筆資料用 "," 隔開。</small>
                        <div class="invalid-feedback">
                        </div>
                      </div>
                      <div class="input-group col-12 col-md-2 mt-3 mt-md-2">
                        <select name="permission_id" class="form-control custom-select" required>
                          <option value="viewer">檢視者</option>
                          <option value="editor">編輯者</option>
                        </select>
                        <div class="invalid-feedback">
                        </div>
                      </div>
                      <div class="input-group col-12 col-md-2 mt-3 mt-md-2 justify-content-md-center">
                        <span id="btn-submit" class="btn btn-success font-weight-bold addsubscriber-btn">送出</span>
                      </div>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
          @else
          <div class="form-group row public-group @if($model->is_public==0) hidden @endif">
            <label class="col-12 col-sm-3 text-sm-center">
              <span class="align-middle"><b>公開行事曆網址</b></span>
            </label>
            <div class="input-group col-12 col-sm-9">
              <i id="copy-btn" class="fas fa-link" data-toggle="tooltip" data-placement="top" title="點擊複製網址" onclick="copyUrl()"></i><a id="publicUrl" class="ml-2" target="_blank" href="{{$model->public->url ?? ''}}">{{$model->public->url ?? ''}}</a>
            </div>
          </div>
          @endif
          <h4 class="text-center mt-3">訂閱者</h4>
          <hr>
          <div class="col-12 mb-3">
            <ul class="nav nav-pills">
              <li class="nav-item permission-nav-item" data-permission="all">
                <a class="nav-link" data-toggle="pill">全部</a>
              </li>
              @foreach($permission_options as $permission_option)
              <li class="nav-item permission-nav-item" data-permission="{{$permission_option->id}}">
                <a class="nav-link" data-toggle="pill">{{$permission_option->name}}</a>
              </li>
              @endforeach
            </ul>
            <input type="hidden" name="permission" value="">
          </div>
          <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>
      </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>
@if (isset($_SERVER['HTTP_USER_AGENT']) && ( (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== false ) || (strpos($_SERVER['HTTP_USER_AGENT'], 'Trident/7.0; rv:11.0') !== false) )|| (strpos($_SERVER['HTTP_USER_AGENT'], 'Trident/7.0') !== false) ) )
<script nonce="{{ csp_nonce() }}" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.2/js/bootstrap-colorpicker.min.js"></script>
@else
<script nonce="{{ csp_nonce() }}" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/3.3.0/js/bootstrap-colorpicker.min.js"></script>
@endif
<script type="text/javascript" src="{{ Module::asset('calendar:js/list_select.js') }}"></script>
<script nonce="{{ csp_nonce() }}">
var publicRoute = '{{$publicRoute}}';
var subscriberBulkActionRoute = '{{$subscriber_bulk_action_route}}';
var subscriberStoreRoute = '{{$subscriber_store_route}}';

function copyUrl() {
  /* Select the text field */
  var el = document.getElementById("publicUrl");
  var range = document.createRange();
  range.selectNodeContents(el);
  var sel = window.getSelection();
  sel.removeAllRanges();
  sel.addRange(range);

  /* Copy the text inside the text field */
  document.execCommand("copy");

  /* Alert the copied text */
  $('#copy-btn').attr('title','已複製到剪貼簿！');
  $('#copy-btn').tooltip('dispose');
  $('#copy-btn').tooltip('show');
}
$(document).ready(function() {
  $('[data-toggle="tooltip"]').tooltip();

  if (!IECheck.check()) {
    $(document).on('change', '.calendarColor', function (event) {
      $(".calendarColorPicker").css("background-color",event.value.toString());
    });
  }else {
    $(document).on('input', '#InputColor', function (event) {
      $(".calendarColorPicker").css("background-color",$(this).val());
    });
  }

  $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
    var el = e.target;
    if (el.dataset['viewed']==0) {
      datatableInitial();
      el.dataset['viewed']= 1;
    }
  })

  $(document).on('change', '#isPublicY', function() {
    var mes,isPublic;
    if($(this).is(":checked")) {
      mes = '公開行事曆後,知道網址的用戶將可看到此行事曆的活動。\n您確定要公開行事曆嗎？';
      isPublic = 1;
    }else {
      mes = '停止公開行事曆後,原公開網址將永久失效。\n您確定要停止公開行事曆嗎？';
      isPublic = 0;
    }
    if (confirm(mes)) {


      LoadingCover.show();
      $('.alert').remove();
      $.ajax({
        url: publicRoute ,
        type: 'POST',
        data: {
            _token: $('meta[name="csrf-token"]').attr('content'),
            isPublic: isPublic,
        },
        success: function(data){
          LoadingCover.hide();
          callAlert("success", data.message);

          $('.public-group').addClass("hidden");
          $('#publicUrl').attr('href','');
          $('#publicUrl').html('');
          if (isPublic==1) {
            $('.public-group').removeClass("hidden");
            $('#publicUrl').attr('href',data.url);
            $('#publicUrl').html(data.url);
          }
        },
        error: function(xhr){
          LoadingCover.hide();
          let errors = xhr.responseJSON;
          for (let i = 0; i < Object.keys(errors).length; i++) {
            let error_arr = errors[Object.keys(errors)[i]];
            for (let j = 0; j < error_arr.length; j++) {
              callAlert("danger", error_arr[j]);
            }
          }
        }
      });
    }else {
      if($(this).is(':checked')){
          $(this).prop('checked', false);
      }else {
          $(this).prop('checked', true);
      }
      return;
    }
  });

  $(".permission-nav-item").on("click", function() {
    var permission = $(this).data('permission');
    $('[name="permission"]').val(permission);
    table.ajax.reload(function() {$('[name="check_all_items"]').prop("checked", false);});
  });

  $(".addsubscriber-btn").on("click", function() {
    var permission_id = $("[name=permission_id]").val();
    if (permission_id=='editor'&&!confirm("編輯者將會獲得該行事曆新增及修改權限。\n您確定要分享該權限給使用者嗎？")) {
      return;
    }

    var form = $("#SubscriberForm");
    if (!form[0].checkValidity()) {

      form[0].reportValidity();
      return;
    }


    LoadingCover.show();
    $('.alert').remove();
    $.ajax({
      url: subscriberStoreRoute ,
      type: 'POST',
      data: form.serialize(),
      success: function(data){
        $("[name=subscriber]").val('');
        $("[name=permission_id]").prop('selectedIndex',0);
        LoadingCover.hide();
        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){
        LoadingCover.hide();
        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 )
        .prependTo( "#component-response-alert" );

      }
    });

  });

  $("[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;
  };
}

function datatableInitial(){
  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