@extends('oauth::layouts/admin')


{{-- Content --}}
@section('module-content')
@include('custom::component/reply-btn', ['url' => $previous_url])


<div class="row mb-3">
  <div class="col-md-8 offset-md-2">
    <form method="POST">
      {{csrf_field()}}
      <table class="table table-striped" id="table-dep">
        <thead class="thead-light text-center">
          <th scope="row" class="align-middle">單位</th>
          <th scope="row" class="align-middle">身份</th>
          <th class="align-middle text-right">
            <button type="button" class="btn btn-success btn-add">
              <span class="fas fa-plus">&ensp;</span>新增項目
            </button>
          </th>
        </thead>
        <tbody></tbody>
        <tfoot>
          <tr>
            <td colspan="3" class="text-center">
              <button type="submit" class="btn btn-success">
                <span class="fas fa-save">&ensp;</span>儲存
              </button>
            </td>
          </tr>
        </tfoot>
      </table>
    </form>
  </div>
</div>
@endsection

{{-- Meta --}}
@push('meta')
<meta name="roles" content="{{json_encode($roles)}}">
<meta name="departments" content="{{json_encode($departments)}}">
<meta name="table-data" content="{{json_encode(old('deny', $denys))}}">
@endpush

{{-- Script --}}
@push('module-scripts')
<script type="text/javascript" src="{{ Module::asset('oauth:js/admin/client/policy/item.precompiled.js')}}"></script>
<script type="text/javascript" nonce="{{ csp_nonce() }}">
  $(document).ready(function() {
    let json = $('meta[name="table-data"]').attr('content');
    let rows = JSON.parse(json);

    for (const key in rows) {
      if (rows.hasOwnProperty(key)) {
        let data = rows[key];
        addItem({department: data.department, roles: data.roles});
      }
    }

    let length = $("#table-dep tbody .btn-minus").length;
    if(length <= 0) {
      addItem();
    }
  });
  $("#table-dep").on("click", ".btn-add", function() {
    addItem();
  });
  $("#table-dep").on("click", ".btn-minus", function() {
    $(this).closest("tr").remove();
    let length = $("#table-dep tbody .btn-minus").length;
    if(length <= 0) {
      addItem();
    }
  });
  function addItem(values) {
    let idx = $("#table-dep tbody .td-roles:last").data('key');
    if(idx === undefined) {
      idx = 0;
    }

    if(values == undefined) {
      values = {
        department: null,
        roles: [],
      }
    }

    const tp = Handlebars.templates.item;
    let data = {
      roles: getRoles(),
      departments: getDepartments(),
      idx: idx + 1,
      values: values,
    };
    $("#table-dep tbody").append(tp(data));
  }
  function getRoles() {
    let json = $('meta[name="roles"]').attr('content');
    let roles = JSON.parse(json);
    return roles;
  }
  function getDepartments() {
    let json = $('meta[name="departments"]').attr('content');
    let departments = JSON.parse(json);
    return departments;
  }
</script>
@endpush