<form class="row g-3 auto-width" action="{{ route('charge-update', $charge->id)}}" method="post" enctype='multipart/form-data'>
        @csrf
        <div class="col-md-6">
            <label for="item_qty" class="form-label">Charge Quantity</label>
            <input type="text" class="form-control" id="charge_quantity" name="charge_quantity" aria-describedby="inputGroupPrepend" required value="{{$charge->charge_quantity}}"  placeholder="Charge Quantity">
            <span class="text-danger error_code" style="display:none;">This field is required.</span>
        </div>
       <div class="col-md-6">
      <label for="charge_rates" class="form-label">Charge Rate<span class="text-danger"><b>*</b></span></label>
                <div class="input-group">
                   <input type="number" name="charge_rates" id="charge_rates" class="form-control br-0"  placeholder="Charge Rate" value="{{$charge->charge_rate}}">
                </div>
        </div>
       <div class="col-md-6">
            <label for="charge_tax" class="form-label">Tax <span class="text-danger"><b>*</b></span></label>
            <div class="input-group">
                <select name="charge_tax" id="charge_tax" class="form-control">
                    <option value="">--Select--</option>
                    @foreach($tax as $tax)
                    <option value="{{$tax->id}}"  {{ $charge->charge_tax_id == $tax->id ? 'selected' : '' }}>{{$tax->name}}</option>
                    @endforeach
              </select>
            </div>
        </div>
        <div class="col-md-6">
            <label for="amount" class="form-label">Amount <span class="text-danger"><b>*</b></span></label>
            <div class="input-group">
                <input type="number" name="charge_amounts" id="charge_amounts" class="form-control " value="" readonly placeholder="Amount">
            </div>
        </div>
</form>

<script type="text/javascript">
$( document ).ready(function() {

function amount () {
    var charge_rate = $('#charge_rates').val();
    var charge_qty = $('#charge_quantity').val();
    var amount = charge_qty * charge_rate;

    $('#charge_amounts').val(amount) ;
    }

 amount ();

$(document).on('input', '#charge_quantity,#charge_rates', function(event){
        amount ();
     })

  })
</script>
