@extends(backpack_view('blank'))
@section('content')
<nav aria-label="breadcrumb" class="d-none d-lg-block">
   <ol class="breadcrumb bg-transparent p-0 justify-content-end">
      <li class="breadcrumb-item text-capitalize"><a href="{{ url('/') }}/admin/dashboard">Admin</a></li>
      <li class="breadcrumb-item text-capitalize"><a href="{{ url('/') }}/admin/payment-term">payment terms</a></li>
      <li class="breadcrumb-item text-capitalize active" aria-current="page">Add</li>
   </ol>
</nav>
<section class="container-fluid">
   <h2>
      <span class="text-capitalize">payment terms</span>
      <small>Add payment-term.</small>
      <small><a href="{{ url('/') }}/admin/payment-term" class="d-print-none font-sm"><i class="la la-angle-double-left"></i> Back to all  <span>payment terms</span></a></small>
   </h2>
</section>
<div class="container-fluid animated fadeIn">
   <div class="row">
      <div class="col-md-8 bold-labels">
         <!-- Default box -->
         <form id="PaymenTermForm">
            <!-- load the view from the application if it exists, otherwise load the one in the package -->
            <div class="card ">
               <div class="card-body row justify-content-center">
                  <div class="form-group col-md-12" element="div">    <label>Name</label>
                     <input id="name" type="text" name="name" value="" class="form-control">
                  </div>
                  <!-- number input -->
                  <div class="form-group col-md-12 input-group " element="div" id="percentage">
                     <label>Percentage</label>
                     <div class="wrapper row justify-content-center">
                        <div class="form-group col-auto col-md-9 ">
                           <div class="input-group mb-2" id="description0">
                              <div class="input-group-prepend">
                                 <div class="input-group-text"><small>1 st Payment </small></div>
                              </div>
                              <input type="text" name="description[]" class="form-control" placeholder="Description">
                           </div>
                        </div>
                        <div class="form-group col-md-3" >
                           <div class="input-group mb-2" id="percentage0" >
                              <div class="input-group-prepend">
                                 <div class="input-group-text">%</div>
                              </div>
                              <input type="number" name="percentage[]" class="form-control" >
                           </div>
                        </div>
                    <a href="javascript:void(0);" ></a>
                     </div>
                  </div>
               </div>
         </form>
         <div class="col-md-12 mt-0 mb-3  d-flex justify-content-end">
         <span  class="btn btn-info btn-sm add_fields">Add More <i class="nav-icon la la-plus"></i></span>
         </div>

         </div>
         <div id="saveActions" class="form-group " >
            <div class="btn-group" role="group">
               <button class="btn btn-success" id="createBtn">
               <span class="la la-save" role="presentation" aria-hidden="true"></span> &nbsp;
               <span data-value="save_and_back">Save and back</span>
               </button>
            </div>
            <a href="{{ url('/') }}/admin/payment-term" class="btn btn-default"><span class="la la-ban"></span> &nbsp;Cancel</a>
           </div>
      </div>


   </div>
</div>
</div>
@endsection
@section('after_styles')
<link rel="stylesheet" href="{{ asset('packages/backpack/crud/css/crud.css').'?v='.config('backpack.base.cachebusting_string') }}">
<link rel="stylesheet" href="{{ asset('packages/backpack/crud/css/show.css').'?v='.config('backpack.base.cachebusting_string') }}">
<link rel="stylesheet" href="{{ asset('packages/select2/dist/css/select2.min.css')}}">
<link rel="stylesheet" href="{{ asset('packages/select2-bootstrap-theme/dist/select2-bootstrap.css')}}">
@endsection
@section('after_scripts')
<script src="{{ asset('packages/backpack/crud/js/crud.js').'?v='.config('backpack.base.cachebusting_string') }}"></script>
<script src="{{ asset('packages/backpack/crud/js/show.js').'?v='.config('backpack.base.cachebusting_string') }}"></script>
<script src="{{ asset('packages/select2/dist/js/select2.full.js')  }}"></script>
<script>
   $.ajaxSetup({
       headers: {
           'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
       }
   });

   console.log( $('meta[name="csrf-token"]').attr('content'));
   var max_fields = 10; //Maximum allowed input fields
   var wrapper    = $(".wrapper"); //Input fields wrapper
   var add_button = $(".add_fields"); //Add button class or ID
   var x = 1; //Initial input field is set to 1

   //When user click on add input button
   $(add_button).click(function(e){
          e.preventDefault();
   //Check maximum allowed input fields
   if(x < max_fields){
      x++; //input field increment
   //add input field
   console.log(x)
      $(wrapper).append(` <div class="row justify-content-center">
        <div class="form-group col-auto col-md-7 ">
            <div class="input-group mb-2" id="description${x-1}" >
               <div class="input-group-prepend">
                  <div class="input-group-text"><small>${x} st Payment </small></div>
               </div>
               <input type="text" name="description[]" class="form-control" placeholder="Description">
            </div>
         </div>
         <div class="form-group col-md-3">
            <div class="input-group mb-2" id="percentage${x-1}">
               <div class="input-group-prepend">
                  <div class="input-group-text">%</div>
               </div>
               <input  type="number" name="percentage[]" class="form-control" >
            </div>
         </div>

       <a href="javascript:void(0);" class="remove_field"><small>Remove</small></a></div>
   </div>`);
   }
   });

   //when user click on remove button
   $(wrapper).on("click",".remove_field", function(e){
      e.preventDefault();
      $(this).parent('div').remove(); //remove input field
      x--; //inout field decrement
   })



   $(document).on('click', '#createBtn', function (e) {
   e.preventDefault();
   $('.text-danger').remove();
   let findForm = $("#PaymenTermForm");
   let form = $('#PaymenTermForm')[0];
   let formData = new FormData(form);
   console.log(formData)
   let url = "{{route('payment-term.store')}}";
   $.ajax({
       url: url,
       data: formData,
        dataType    : 'json',
        processData: false ,
        contentType: false,
        type: "POST",
   })
   .done(function (res) {
    if ($.isEmptyObject(res.errors)) {
        new Noty({
            text: "Success add Payment terms",
            type: "success"
        }).show();
        window.location.replace("{{ url('/') }}/admin/payment-term");
    } else {
        new Noty({
            text: "failed add Payment terms",
            type: "danger"
        }).show();
        $.each(res.errors, function (elem, messages) {
            let el = elem.replace(/\./g,'');
            console.log(messages);
            findForm.find(`#${el}`).after('<small class="text-danger align-content-center">' + messages.join('') + '</small>');
        });
    }
   })
   .fail(function (jqXHR, ajaxOptions, thrownError) {
       console.log('Server error occured');
   });
   });

</script>
@endsection