@extends('user.template')
@section('title', $title)
@section('content')
<div class="row">
    <div class="col-md-12 grid-margin">
      <div class="row">
        <div class="col-12 col-xl-8 mb-4 mb-xl-0">
          <h3 class="font-weight-bold">Tambah Data</h3>
          <h6 class="font-weight-normal mb-0">{{$title}}</h6>
        </div>
        <div class="col-12 col-xl-4">
         <div class="justify-content-end d-flex">
          <div class="flex-md-grow-1 flex-xl-grow-0">
          </div>
         </div>
        </div>
      </div>
    </div>
</div>
<div class="row">
    <div class="col-sm-12 mb-3">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
              <li class="breadcrumb-item"><a href="{{route('user.renja')}}">{{$title}}</a></li>
              <li class="breadcrumb-item active" aria-current="page">Tambah</li>
            </ol>
        </nav>
    </div>
</div>

<div class="row justify-content-md-center">
  <div class="col-sm-8">
    <div class="card">
      <div class="card-body">
        <h4 class="card-title">Tambah</h4>
        <hr><br>
        
        <form class="forms-sample" action="{{route('user.renja.store')}}" method="POST"> @csrf
          <div class="form-group row">
            <label for="periode" class="col-sm-3 col-form-label">Periode</label>
            <div class="col-sm-9">
              <input type="text" class="form-control" require name="periode" placeholder="Periode" id="periode">
            </div>
          </div>
          <hr>
          <div class="form-group row">
            <label for="program" class="col-sm-3 col-form-label">Program</label>
            <div class="col-sm-9">
              <div id="renjaProgram">
                  <div id="pr1">
                    <button type="button" class="close" onclick="removeInput('pr1')" style="position: absolute; right: 20px;">
                      <span aria-hidden="true">&times;</span>
                    </button>
                    <textarea class="form-control mb-1" id="program" name="program[]" require placeholder="Program"></textarea>
                  </div>
              </div>
              <a href="#!" class="btn btn-sm btn-outline-info btn-block" onclick="addTextarea('#renjaProgram','program','program[]','Program {{$title}}')" style="border-radius: 5px">Tambah</a>
            </div>
          </div>
          <hr>
          <button type="submit" class="btn btn-primary  btn-block me-2">Simpan</button>
        </form>
      </div>
    </div>
  </div>
</div>
  
@endsection

@section('script')
<script>
  function addTextarea(roomId, id, name, menu) {
    var rand = Math.floor(Math.random()* (9999 - 1) + 1);
    var html = '<div id="ss'+rand+'"> <button type="button" class="close" onclick="removeInput(`ss'+rand+'`)" style="position: absolute; right: 20px;"> <span aria-hidden="true">&times;</span> </button><textarea class="form-control  mb-1" id="'+id+'" name="'+name+'" placeholder="'+menu+'"></textarea></div>';
    $(roomId).append(html);
  }

  function removeInput(id) {
    console.log(id);
    $("#"+id).remove();
  }
</script>
@endsection