@include('header')
<script>

var i=0;
var counter=0;

function addExpenseDetails(e){
     e.preventDefault(); //this is where we shall determine the value of i
     let i=0;
  for(let j=1;j<=4;j++){
   if(document.getElementById("cont"+j)==null ){
     i=j;
     break;
   }

  }


  var cont=` <div  style='width:100%;display:flex;margin-top:3px;' id=cont${i}  >
               <div class='col-md-3'  >
                  <div class='form-group'>
                    <select class='form-control' name =expensetype${i} required >
                     <option   value=''>--select charge--</option>
                     @foreach ($expenseTypes as $expenseType)
                      <option value="{{$expenseType->expenseTypeId}}">{{$expenseType->typeName}}</option>
                     @endforeach
                    </select>
                  </div>
                </div>

                <div class='col-md-3'>
                    <div class='form-group'>
                      <input type='text' class='form-control' name=previousreading${i} id='name' placeholder='previous reading' >
                    </div>
                  </div>
                  <div class='col-md-3'>
                      <div class='form-group'>
                        <input type='text' class='form-control' name=currentreading${i} id='name' placeholder='current reading' >
                      </div>
                    </div>
                    <div class='col-md-3'>
                        <div class='form-group'>
                          <input type='text' class='form-control' name=expenseamount${i} id='name' placeholder='amount' required>
                        </div>
                    </div>
                    &nbsp;<span id=cont${i} onclick='removeElement(this.id)'> <i  class="fa-times fa-fw fas"></i></span>
                </div>`;

    if(counter<4){
      let div
    document.getElementById("container").insertAdjacentHTML( "beforeend", cont );
      counter++;
  }

}

function removeElement(elemId){
  var elem = document.getElementById(elemId);
  counter--;
  return elem.parentNode.removeChild(elem);
}

</script>




<div class="contact-wrap w-100 p-md-5 p-4" style="margin-bottom:160px;">
              <h3 class="mb-4">New Invoice</h3>
              <div id="form-message-warning" class="mb-4">
                @if ($errors->any())
                    <div class="alert alert-danger">
                      <ul>
                          @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                          @endforeach
                      </ul>
                    </div><br />
                  @endif
              </div>
              <div id="form-message-success" class="mb-4">

              </div>
              <form method="POST" id="contactForm" name="contactForm" action="{{route('invoices.store')}}">
                @csrf
                <div class="row">
                  <div class="col-md-6">
                    <div class="form-group">
                      <input type="date" class="form-control" name="invoicedate" id="name" placeholder="Date" required>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="form-group">
                      <select class="form-control" name ="houseunit" required>
                       <option value="">--select unit--</option>
                        @foreach ($houseUnits as $houseUnit)
                        <option value="{{$houseUnit->unitId}}">{{$houseUnit->houseName.' - '.$houseUnit->unitName}}</option>
                        @endforeach
                      </select>
                    </div>
                  </div>


                    <div class="col-md-6"  >Add Charges </div>

                   <div id="container" style="display:flex;flex-direction:column;" >


                  <div  style="width:100%;display:flex;margin-top:3px;"  >
                  <div class="col-md-3"  >
                    <div class="form-group">
                      <select class="form-control" name ="expensetype" required >
                       <option   value="">--select charge--</option>
                       @foreach ($expenseTypes as $expenseType)
                        <option value="{{$expenseType->expenseTypeId}}">{{$expenseType->typeName}}</option>
                       @endforeach
                      </select>
                    </div>
                  </div>

                  <div class="col-md-3">
                      <div class="form-group">
                        <input type="text" class="form-control" name="previousreading" id="name" placeholder="previous reading" >
                      </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                          <input type="text" class="form-control" name="currentreading" id="name" placeholder="current reading" >
                        </div>
                      </div>
                      <div class="col-md-3">
                          <div class="form-group">
                            <input type="text" class="form-control" name="expenseamount" id="name" placeholder="amount"  required>
                          </div>
                      </div>
                  </div>



                </div>
                <div class="col-md-6">
                  <div class="form-group">
                  <button class="btn btn-primary" style="background:#80ABD6;" onclick="addExpenseDetails(event)">more charges</button>
                  </div>
                </div>


                  <div class="col-md-6">
                    <div class="form-group" style="width:inherit;height:inherit;display:flex;justify-content:flex-end;">
                      <input type="submit" value="Add Invoice" class="btn btn-primary" style="width:50%;height:100%;">
                      <div class="submitting"></div>
                    </div>
                  </div>
                </div>
              </form>
            </div>
@include('footer')