@include('header')

<script>
let sum=0;
function getSum(id,charge){
  if (document.getElementById(id).checked)
   {
      sum+=charge;
   } else {
      sum-=charge;
   }

   document.getElementById('amounttopay').value=sum;

}


</script>

   <div class="contact-wrap w-100 p-md-5 p-4" style="margin-bottom:160px;">
              <h3 class="mb-4">receipt no.#RCPT{{$id}} - <span style="color:red;">Cancel Payment </span> </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('receipts.update',$receipt->receiptId) }}">
                @method('PATCH')
                @csrf
                <div class="row">
                  <div class="col-md-6">
                    <div class="form-group">
                      <input type="date" class="form-control" name="paymentdate" id="name" value="{{$receipt->paymentDate}}" placeholder="Date" readonly>
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                      <select class="form-control" name ="paymentmode" disabled >
                       <option value="">--payment mode--</option>
                       @foreach($paymentModes as $paymentMode)
                        <option value="{{$paymentMode->modeId}}" SELECTED        >{{$paymentMode->modeName}}</option>
                       @endforeach
                      </select>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="form-group">
                      <input type="text" class="form-control" name="receiveraccount" id="name" placeholder="Receiver Account" readonly >
                    </div>
                  </div>

                       <input type="hidden" name="receipt" value="{{$id}}" />
                    <div class="col-md-12"  >Payment For: </div>
                   <div class="col-md-12"  style="padding-top:10px;padding-bottom:10px" >
                     <div id="container" style="display:flex;flex-direction:column;" >
                      @php($count=0)
                      @foreach($payments as $payment)
                      <div class="col-md-3"  >
                       <div class="form-check">

                          <input class="form-check-input" name="{{'charge'.$count}}" type="checkbox"  id="{{'charge'.$count}}" checked disabled>
                          <label class="form-check-label" for="{{'charge'.$count}}">
                            {{$payment->typeName.' @ '.$payment->paidAmount}}
                          </label>
                        </div>
                       </div>
                       @php($count+=$payment->paidAmount)
                       @endforeach
                    </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                          <input type="text" class="form-control" name="amount" id="amounttopay" value="{{$count}}" readonly >
                        </div>
                      </div>


                  <div class="col-md-12">
                    <div class="form-group">
                      <input type="submit" value="Cancel Payment" class="btn btn-primary">
                      <div class="submitting"></div>
                    </div>
                  </div>
                </div>
              </form>
            </div>

@include('footer')