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

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

    
    <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">
            <img src="https://zatca.gov.sa/Style%20Library/GAZTinternet/new/images/header_logo.svg" alt="Image" width="450" />

    
          </div>
        </div>
    
        <div class="row">
          
          <div>
            Total Paying Amount
            <h4>
              <span class="total-paying-amount text-white">SAR3,102,387.45</span>
            </h4>
            <input type="hidden" name="total_paid_amount">
            <span>
              WHT VAT AMOUNT: <span class="total-paying-vat-amount fw-bold">SAR0.00</span>
              <br>
              RC VAT AMOUNT: <span class="total-paying-pxvat-amount fw-bold">SAR3,102,387.45</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>WHT VAT Amount: <span class="total-paying-vat-amount fw-bold">{{ cMoney($invoicePayment?->totalVatPaidAmount() ?? 0, $invoice->currency, true) }}</span></div>
                <div>RC 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 WHT VAT AMOUNT</th>
                  <th class="cs-width_2 cs-normal fw-bold text-center">TOTAL RC VAT AMOUNT</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 type="button" class="btn btn-secondary btn-sm reset-auto-fill-payable-amount me-2 ">Reset</button>
                <button type="button" class="btn btn-primary btn-sm auto-fill-payable-amount me-2 ">Auto Fill</button><button type="button" class="btn btn-primary btn-sm auto-fill-payable-amount">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.defer="payments.680.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.defer="payments.680.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">WHT VAT AMOUNT</th>
                  <th class="cs-width_2 cs-normal fw-bold text-center">RC VAT AMOUNT</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>
    
    
                  <td class="text-center">
          
                      <div class="px-2">
                        <div class="input-group input-group-sm mb-1">
                          <input type="number" wire:model.defer="payments.{{ $item->id }}.vat" class="form-control text-start">
                          <span class="input-group-text">{{ $invoice->currency }}</span>
                        </div>
                        <div class="text-muted small">WHT VAT Payable:                        
                              {{-- <span class="converted_amount payable-vat-amount" data-amount="{{($payableVatAmount = (($item->payableVatAmount()) / $item->conversion_rate) + $item->this_vat_paid_amount)}}">
                            @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.defer="payments.{{ $item->id }}.ex_vat" class="form-control text-start">
                        <span class="input-group-text">{{ $invoice->currency }}</span>
                      </div>
                      <div class="text-muted small">Ex. RC VAT Payable:          
                            {{-- <span class="converted_amount pxvat-amount" data-amount="{{($pxvatAmount = (($item->pxvatAmount()) / $item->conversion_rate) + $item->this_excluding_vat_paid_amount)}}">
                          @cMoney($pxvatAmount, $invoice->currency, true)
                        </span> --}}
                    </div>
                    </div>
            
                </td>
    
                </tr>
                @endforeach
              </tbody>
            </table>
          </div>
        </div>
      </div>
    
    </div>