@extends('layout.layout')

@section('content')
<div class="row mb-3">
  <div class="col-md-3"></div>
  <div class="form-group col-md-6">
    <form method="POST">
      {{ csrf_field() }}
      <table class="table table-striped table-hover" id="user-table">
        <thead class="thead-light">
          <tr>
            <th width="10%"></th>
            <th scope="row">帳號</th>
          </tr>
        </thead>
        <tbody>
          @foreach ($users as $user)
            <tr class="clone_tr">
              <td class="align-middle text-right" width="10%">
                <button type="button" class="btn btn-link removeBtn">
                  <span class="fas fa-minus-circle fa-2x text-danger">&ensp;</span>
                </button>
              </td>
              <td class="align-middle">
                <input type="text" class="form-control" name="name[]" value="{{$user->uid}}" />
              </td>
            </tr>
          @endforeach
        </tbody>
        <tfoot>
          <tr>
            <td width="10%" class="align-middle">
              <button type="button" class="btn btn-link addBtn">
                <span class="fas fa-plus-circle fa-2x">&ensp;</span>
              </button>
            </td>
            <td class="align-middle text-right">
              <input type="submit" class="btn btn-success" name="submit" value="儲存" />
            </td>
          </tr>
        </tfoot>
      </table>
    </form>
  </div>
</div>
<table id="clone-sample" class="d-none">
  <tr class="clone_tr">
    <td class="align-middle text-right" width="10%">
      <button type="button" class="btn btn-link removeBtn">
        <span class="fas fa-minus-circle fa-2x text-danger">&ensp;</span>
      </button>
    </td>
    <td class="align-middle">
      <input type="text" class="form-control" name="name[]" />
    </td>
  </tr>
</table>
@endsection

{{-- Script --}}
@section('script')
@parent
<script type="text/javascript">
  $(".removeBtn").on("click", function () {
    $(this).parent().parent(".clone_tr").remove();
  });
  $(".addBtn").on("click", function () {
    let lastRow = $("#user-table tbody tr:last");
    let newRow = $("#clone-sample tr").clone(true);
    if (lastRow.length == 0) {
      $("#user-table tbody").append(newRow);
    } else {
      lastRow.after(newRow);
    }
  });
</script>
@endsection