@extends('layouts.admin')
@push('styles')

@endpush
@section('content')
@if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        {{ session('error') }}
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
@endif
<div class="card">
    <div class="card-header">
        {{ trans('global.create') }} Template
    </div>

    <div class="card-body">
        <form action="{{ route('admin.templates.store') }}" method="post">
            @csrf
            <div class="form-group">
                <label for="name">Name</label>
                <input type="text" class="form-control" id="name" name="name" placeholder="Template One">
            </div>
            <div class="form-row">
              <div class="col-8 form-group">
                <label for="template">Attributes</label>
                <input type="text" id="template" name="template[]" class="form-control" placeholder="Key">
              </div>
            </div>
            <div id="newRow"></div>
            <button id="addRow" type="button" class="btn btn-danger">Add Row</button>
            <button type="submit" class="btn btn-success">Create</button>
        </form>
    </div>
</div>
@endsection

@section('scripts')
<script type="text/javascript">
  // add row
  $("#addRow").click(function () {
      var html = '';
      html = '<div class="form-row mb-3" id="inputFormRow"> <div class="col-8"><input type="text" id="template" name="template[]" class="form-control" placeholder="Key"></div><div class="col"><button id="removeRow" type="button" class="btn btn-danger">Remove</button></div> </div>';
      $('#newRow').append(html);
  });

  // remove row
  $(document).on('click', '#removeRow', function () {
      $(this).closest('#inputFormRow').remove();
  });
</script>
@endsection