@extends('layout.layout')

@section('content')
<div class="row mb-3">
  <div class="col">
    <form method="POST">
      {{ csrf_field() }}
      <div class="form-group row">
        <label class="col-form-label col-md-3 text-md-right">
          <span class="align-middle">&nbsp;</span>
        </label>
        <div class="input-group col-md-6 my-auto">
          帳號
        </div>
      </div>
      @foreach ($users as $user)
        <div class="form-group row">
          <label class="col-form-label col-md-3 text-md-right">
            <button type="button" class="btn btn-link removeBtn">
              <span class="fas fa-minus-circle fa-2x text-danger">&ensp;</span>
            </button>
          </label>
          <div class="input-group col-md-6 my-auto">
            <input type="text" class="form-control" name="name[]" value="{{$user->uid}}" />
          </div>
        </div>
      @endforeach
      <div class="form-group row">
        <label class="col-form-label col-md-3 text-md-right">
          <button type="button" class="btn btn-link addBtn">
            <span class="fas fa-plus-circle fa-2x">&ensp;</span>
          </button>
        </label>
        <div class="input-group col-md-6">&nbsp;</div>
      </div>
      <div class="form-group text-center">
        <input type="submit" class="btn btn-success" name="submit" value="儲存" />
      </div>
    </form>
  </div>
</div>
<div id="clone-sample" class="d-none">
  <div class="form-group row">
    <label class="col-form-label col-md-3 text-md-right">
      <button type="button" class="btn btn-link removeBtn">
        <span class="fas fa-minus-circle fa-2x text-danger">&ensp;</span>
      </button>
    </label>
    <div class="input-group col-md-6 my-auto">
      <input type="text" class="form-control" name="name[]" />
    </div>
  </div>
</div>
@endsection

{{-- Script --}}
@section('script')
@parent
<script type="text/javascript">
  $(".removeBtn").on("click", function () {
    $(this).closest(".form-group").remove();
  });
  $(".addBtn").on("click", function () {
    let newRow = $("#clone-sample > div").clone(true);
    var element = $('.addBtn').closest('.form-group');

    $( newRow ).insertBefore( element );
  });
</script>
@endsection