@extends('layout.layout')

{{-- Style --}}
@push('links')
<link href="{{ asset('css/datatable/datatables.min.css') }}" rel="stylesheet" type="text/css">
@endpush

{{-- Content --}}
@section('content')
<input type="hidden" id="js-datatable-url" value="{{$datatableRoute}}" />
<div class="row mb-3 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>
    <a class="btn btn-lg btn-success" href="{{$count_route}}">
      <i class="fas fa-user-chart fa-fw"></i><span class="ml-1">統計查詢</span>
    </a>
    <a class="btn btn-lg btn-success" href="{{$message_route}}">
      <i class="fas fa-envelope fa-fw"></i><span class="ml-1">發送通知</span>
    </a>
    <a class="btn btn-lg btn-success" href="{{$survey_message_route}}">
      <i class="fas fa-envelope fa-fw"></i><span class="ml-1">發送問卷</span>
    </a>
  </div>
</div>
<div class="row">
  <div class="col-12 form-inline">
    <div class="input-group mb-2" style="min-width:150px;">
      <select name="status_id" class="form-control custom-select">
        <option value="all">全部</option>
        @foreach($status_options as $option)
        <option value="{{$option->id}}">{{$option->name}}</option>
        @endforeach
      </select>
    </div>
  </div>
  <div class="col-12 overflow-auto mb-5">
    <table class="table table-striped table-hover steps-datatable" id="dataTable" style="min-width:1100px;">
      <thead class="thead-light text-center">
        <tr>
          <th scope="col" style="width:35px;">狀態</th>
          <th scope="col" style="width:150px;">活動名稱</th>
          <th scope="col">可參加對象</th>
          <th scope="col" style="width:190px;">活動期間</th>
          <th scope="col" style="width:190px;">報名期間</th>
          <th scope="col" style="width:180px;"></th>
        </tr>
      </thead>
      <tbody>
        <tr><td colspan="6" class="text-center">查無資料</td></tr>
      </tbody>
      <tfoot></tfoot>
    </table>
  </div>
</div>
<form action="" method="post" id="del_form" class="d-inline-block">
  @csrf
</form>
@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>
$(document).ready(function() {
  $('[name="status_id"]').on("change", function() {
      table.ajax.reload();
  });
  $(document).on('click', '.delete-btn', function() {
    var url = $(this).data('url');
    if (url.length<=0) {
      return;
    }
    if (!confirm('刪除後無法復原\n\n您確定要刪除嗎？')) {
      return;
    }
    $('#del_form').attr('action',url);
    $('#del_form').submit();
  });
  $(document).on('click', '.end-btn', function() {
    var url = $(this).data('url');
    if (url.length<=0) {
      return;
    }
    if (!confirm('您確定要下架嗎？')) {
      return;
    }
    $('#del_form').attr('action',url);
    $('#del_form').submit();
  });
});
dataTableDefSetting.language.searchPlaceholder = "活動名稱/主辦單位";

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

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

@endpush