{{-- LEFT: Table (col-md-8) --}}
    <div class="col-12 ">

        @php
        $invoicePayment = $invoicePayment ?? null;
        $invoiceRawCurrency = $invoice->getRawOriginal('currency');
        $isForeignCurrencyInvoice = $invoice->isForeignCurrency();
        @endphp
    
    

    {{-- <pre>@json($this->payments)</pre> --}}
    <div class="d-block d-md-flex bg-dark justify-content-between text-white p-4 mb-4">
        <div class="col-8">
          <div class="row px-5">
           
            <div class="mb-3">
                <h6 class="mb-1 text-white">{{  $invoice->contract->subject ?? '—' }}</h6>
                <p class="text-white small mb-0">{{  $invoice->company->name ?? '—' }}</p>
            </div>    
                    {{-- Invoice ID --}}
        <div class="row mt-3 small ">
            <div class="col">
                <p class="mb-1">Invoice ID:</p>
                <p class="mb-0">Claim Number:</p>
            </div>
            <div class="col text-end">
                <p class="mb-1">

                        {{ $invoice->getFormatedId() ?? '—' }}
          
                </p>
                <p class="mb-0 fw-semibold">
                    {{ $invoice->claim_number ?? '—' }}
                </p>
            </div>
        </div>
    
          </div>
        </div>

        <div class="row">
          <div>
            Total Paying Amount
            <h4>
              <span class="total-paying-amount text-white">
                {{ cMoney($this->totalPayingAmount(), $invoice->currency, true) }}
              </span>
            </h4>
            <input type="hidden" name="total_paid_amount" value="{{ $this->totalPayingAmount() }}">
          
            <span>
              VAT AMOUNT:
              <span class="total-paying-vat-amount fw-bold">
                {{ cMoney($this->totalPayingVatAmount(), $invoice->currency, true) }}
              </span>
              <br>
              EXCLUDING VAT :
              <span class="total-paying-pxvat-amount fw-bold">
                {{ cMoney($this->totalPayingExVatAmount(), $invoice->currency, true) }}
              </span>
            </span>
          </div>

        </div>
      </div>
    
    
    
        {{-- Total Amount Breakdown --}}
        <div class="mt-4 d-none">
            <h5>Total Paying Amount</h5>
            <h2 class="total-paying-amount fw-bold">
                {{ cMoney(($invoicePayment?->conversion_rate ?? 0) > 0 ? ($invoicePayment?->amount ?? 0) / $invoicePayment->conversion_rate : 0, $invoice->currency, true) }}
            </h2>
            <input type="hidden" name="total_paid_amount">
    
            <div class="mt-2">
                <div>VAT Amount: <span class="total-paying-vat-amount fw-bold">{{ cMoney($invoicePayment?->totalVatPaidAmount() ?? 0, $invoice->currency, true) }}</span></div>
                <div>Excluding VAT Amount: <span class="total-paying-pxvat-amount fw-bold">{{ cMoney($invoicePayment?->totalExcludingVatPaidAmount() ?? 0, $invoice->currency, true) }}</span></div>
            </div>
        </div>
    
        {{-- Action Buttons --}}
        <div class="mt-4 d-none">
            <button type="button" class="btn btn-outline-secondary btn-sm reset-auto-fill-payable-amount {{ (!$isForeignCurrencyInvoice) ? '' : 'd-none' }}">Reset Amounts</button>
            <button type="button" class="btn btn-outline-primary btn-sm auto-fill-payable-amount {{ (!$isForeignCurrencyInvoice) ? '' : 'd-none' }}">Auto Fill Amount</button>
        </div>
    
    
    
    
    <div class="cs-table cs-style2 tm-border-none padding-rignt-left">
        <div class="tm-border-none">
          <div class="cs-table_responsive tm-custom-td-padding">
            <div class="tm-border-1px"></div>
            <table class="cs-mb30-disable mb-1">
              <thead class="border-bottom-1 cs-mb50">
                <tr class="cs-secondary_color">
                    <th class="cs-width_3 cs-normal cs-text_left cs-semi_bold fw-bold">ACTION</th>
                  <th class="cs-width_2 cs-normal fw-bold text-center">TOTAL VAT AMOUNT</th>
                  <th class="cs-width_2 cs-normal fw-bold text-center">TOTAL EXCLUDING VAT</th>
    
    </tr>
              </thead>
              <tbody>
                <!--[if BLOCK]><![endif]-->            <tr>
                  
    
                    <td class="cs-primary_color cs-f15">
                        <div class="text-start">
                          <div class="ms-2 fs-7 text-start"><div class="">


                            <button wire:click="resetAutoFillPayableAmounts" type="button" class="btn btn-secondary btn-sm me-2">
                              Reset
                          </button>
                          
                          <button wire:click="autoFillPayableAmounts" type="button" class="btn btn-primary btn-sm me-2">
                              Auto Fill
                          </button>
                          
                          <button wire:click="distributePayableAmounts" type="button" class="btn btn-primary btn-sm">
                              Distribute
                          </button>

                          
          </div>
                          </div>
                        </div>
                      </td>
    
                  <td class="text-center">
          
                      <div class="px-2">
                        <div class="input-group input-group-sm mb-1">
                          <input type="number" wire:model.live="payments.total.vat" class="form-control text-start">
                          <span class="input-group-text">SAR</span>
                        </div>
                        
                      </div>
                  
    
              
                  </td>
    
    
                  <td class="text-center">
          
    
                
                    <div class="px-2">
                      <div class="input-group input-group-sm mb-1">
                        <input type="number" wire:model.live="payments.total.ex_vat" class="form-control text-start">
                        <span class="input-group-text">SAR</span>
                      </div>
                      
                    </div>
            
                </td>
    
    
                
                </tr>
                <!--[if ENDBLOCK]><![endif]-->
              </tbody>
            </table>
          </div>  
          <div class="cs-table_responsive tm-custom-td-padding">
            <div class="tm-border-1px"></div>
            <table class="cs-mb30-disable mb-5">
              <thead class="border-bottom-1 cs-mb50">
                <tr class="cs-secondary_color">
                  <th class="cs-width_3 cs-normal fw-bold">DESCRIPTION</th>
                  <th class="cs-width_2 cs-normal fw-bold text-center">VAT AMOUNT</th>
                  <th class="cs-width_2 cs-normal fw-bold text-center">EXCLUDING VAT</th>
                </tr>
              </thead>
              <tbody>
                @foreach ($invoice->items as $item)
                <tr>
                  <td class="cs-primary_color cs-f15">
                    <div class="d-flex align-items-center">
                      <div class="ms-2 fs-7">
                        {{ $item->name ?: $item->invoiceable->name }}
                        @if($item->invoiceable && !$item->invoiceable->is_allowable_cost)
                        <br><small>{{ formatDateTime($item->invoiceable->start_date, false) }} - {{ formatDateTime($item->invoiceable->due_date, false) }}</small>
                        @endif
                        <br><small>{{ $item->description }}</small>
                      </div>
                    </div>
                  </td>
    
                  @php
                    $conversionRate = $item->conversion_rate ?: 1; // Use default value (1) if conversion_rate is null or zero
                    $pxvatAmount = ($item->pxvatAmount() / $conversionRate) + $item->this_excluding_vat_paid_amount;
                    $payableVatAmount = ($item->payableVatAmount() / $conversionRate) + $item->this_vat_paid_amount;

                  @endphp
    
                  <td class="text-center">
          
                      <div class="px-2">
                        <div class="input-group input-group-sm mb-1">
                          <input type="number" wire:model.live="payments.{{ $item->id }}.vat" class="form-control text-start">
                          
                          <span class="input-group-text">{{ $invoice->currency }}</span>
                        </div>
                        <div class="d-nones text-muted small">VAT Payable:                        
                          <span class="converted_amount payable-vat-amount" data-amount="{{ $payableVatAmount }}">
                            @cMoney($payableVatAmount, $invoice->currency, true)
                        </span>
                        
                        </div>
                      </div>
                  
    
              
                  </td>
    
    
                  <td class="text-center">
          
    
                
                    <div class="px-2">
                      <div class="input-group input-group-sm mb-1">
                        <input type="number" wire:model.live="payments.{{ $item->id }}.ex_vat" class="form-control text-start">
                        <span class="input-group-text">{{ $invoice->currency }}</span>
                      </div>
                      <div class="d-nones text-muted small">Ex. VAT Payable:          
                        <span class="converted_amount pxvat-amount" data-amount="{{ $pxvatAmount }}">
                          @cMoney($pxvatAmount, $invoice->currency, true)
                      </span>
                    </div>
                    </div>
            
                </td>
    
                </tr>
                            <!-- Item detail -->
            @include('scrumboard::livewire.invoices.payment.detail')
                @endforeach
              </tbody>
            </table>
          </div>
        </div>
      </div>
    
    </div>