@extends('layouts.main')

@section('pageTitle', '帳號與權限－帳號列表')

@section('content')
<div class="container-fluid">
  <div class="row">
    <div class="col-12">
      <div class="card">
        <div class="card-body table-responsive p-3">
          <table id="datatableList" class="table table-bordered table-striped table-hover text-nowrap">
            <thead>
            <tr>
              <th>帳號</th>
              <th>角色名稱</th>
              @if(auth()->user()->can('account.edit'))
                <th class="unsortable">修改</th>
              @endif
              @if(auth()->user()->can('account.destroy'))
                <th class="unsortable">刪除</th>
              @endif
            </tr>
            </thead>
            <tbody>
            </tbody>
          </table>
        </div>
        <!-- /.card-body -->
      </div>
      <!-- /.card -->
    </div>
    <!-- /.col -->
  </div>
  @can('account.create')
    <a class="btn btn-danger" href="{{ route('account.create') }}">新增帳號</a>
  @endcan
  @can('permission.index')
    <a class="btn btn-danger" href="{{ route('permission.index') }}">權限管理</a>
  @endcan
  <!-- /.row -->
</div>
@endsection

@section('js')
<script>
$(document).ready(function () {
  var url = "{{ route('account.datatableList') }}";
  var columns = [
    {data: 'account', name: 'account'},
    {data: 'role_id', name: 'role_id'},
    @if(auth()->user()->can('account.edit'))
      {data: 'edit', name: 'edit'},
    @endif
    @if(auth()->user()->can('account.destroy'))
      {data: 'delete', name: 'delete'},
    @endif
  ];

  var datatable = createDatatable('datatableList', url, columns, [], 0);

  $(document).on('click', 'button[behavior=delete]', function(event){
    var url = '{{ route("account.destroy", ":id") }}';
    datatableDeleteAjax(datatable, url.replace(':id', $(this).attr('targetId')));
	});

  });
</script>
@endsection