<div class="card card-body product-card card-border-secondary mb-2 border">
  <div class="row gy-2 mb-2">
    <div class="col-md-4">
      {{ html()->label('Product')->class('form-label') }}
      {{ html()->text('product_id')->class('form-control')->placeholder('Enter Product Name')->required() }}
    </div>

    <div class="col-md-2">
      {{ html()->label('Unit')->class('form-label') }}
      {{ html()->text('unit')->class('form-control')->placeholder('Enter Unit')->required() }}
    </div>

    <div class="col-md-2">
      {{ html()->label('Rate')->class('form-label') }}
      {{ html()->text('rate')->class('form-control product-price cleave-numeral')->placeholder('Enter Rate')->attributes(['id' => 'cleave-numeral']) }}
    </div>

    <div class="col-md-2">
      {{ html()->label('Quantity')->class('form-label') }}
      {{ html()->text('qty')->class('form-control product-quantity cleave-numeral')->placeholder('Enter QTY')->attributes(['id' => 'cleave-numeral']) }}
    </div>

    <div class="col-md-2">
      {{ html()->label('Amount')->class('form-label') }}
      {{ html()->text('amt')->class('form-control product-line-price bg-light')->placeholder('Enter Amount')->isReadOnly() }}
    </div>

    <div class="col-md-6">
      {{ html()->label('Description')->class('form-label') }}
      {{ html()->text('desc')->class('form-control')->placeholder('Enter Description') }}
    </div>

    <div class="col-md-6 d-flex justify-content-end align-items-end">
      <button type="button" class="btn btn-danger btn-icon waves-effect btn-remove waves-light"><i
          class="ri-delete-bin-5-line"></i></button>
    </div>

  </div>
</div>