Vendor Payment List

@if($invoice->payments->count())
  <div class="mt-4 cs-table cs-style1 cs-type1 cs-focus_bg-disable bg-light">
    <div class="cs-table_responsive">
      <table>
        <tbody>
          <tr>
            <td class="cs-primary_color cs-bold cs-f18">Payment Details</td>
            <td class="cs-text_center cs-semi_bold">Date</td>
            <td class="d-none cs-text_center cs-semi_bold">Transaction ID</td>
            <td class="cs-text_center cs-semi_bold">Gross Amount</td>
            <td class="cs-text_center cs-semi_bold">VAT Amount</td>
            <td class="cs-text_right cs-semi_bold">Net Amount (Incl. VAT)</td>
          </tr>
          @foreach($invoice->payments as $payment)
            <tr>
              <td class="cs-primary_color">{{ runtimePaymentIdFormat($payment->id) }}</td>
              <td class="cs-primary_color cs-text_center">{{ formatDateTime($payment->payment_date) }}</td>
              <td class="d-none cs-primary_color cs-text_center">{{ $payment->transaction_id }}</td>
              <td class="cs-primary_color cs-text_right">@cMoney($payment->totalExcludingVatPaidAmount(), null, true)</td>
              <td class="cs-primary_color cs-text_right">@cMoney($payment->totalVatPaidAmount(), null, true)</td>
              <td class="cs-primary_color cs-text_right">
                @cMoney($payment->amount, null, true)
                @can('update payment')
                  <button class="btn btn-sm btn-icon hover-actions" data-toggle="ajax-modal"
                          data-title="Edit Payment" data-href="{{ route('admin.finances.payments.edit', $payment) }}">
                    {!! getIcon('pencil','fs-3') !!}
                  </button>
                @endcan
                @can('delete payment')
                  <button class="btn btn-sm btn-icon delete-record hover-actions"
                          data-toggle="ajax-delete"
                          data-href="{{ route('admin.finances.payments.destroy', $payment) }}">
                    {!! getIcon('trash','fs-3') !!}
                  </button>
                @endcan
              </td>
            </tr>
          @endforeach
        </tbody>
      </table>
    </div>
  </div>
@else
  <div class="w-100 mt-4 text-center">

    
    <img 
    class="empty-state text-center theme-image w-200px mb-2 mx-auto d-block" 
    src="https://huro.cssninja.io/assets/img/illustrations/projects/board/progress.svg" 
    alt="No Payments">
    
    <div class="fw-semibold text-muted fs-6">No Vendor payments have been made for this invoice yet.</div>
    <div class="fw-semibold fs-6">Click on <strong>"Add Vendor Payment"</strong> to make a new payment.</div>
    <button wire:click.prevent="addVendorPayment" type="button" class="mt-4 btn btn-primary btn-sm">Add Payment</button>
  </div>
@endif