@if ($invoice->contract?->have_retention)
<div class="cs-text_centsser cs-ternary_color cs-lh-165">
  <div class="alert alert-soft-dark mb-5 mb-lg-7" role="alert" style="color: #132144;background-color: rgba(19,33,68,.15);">
    <div class="d-flex align-items-center">
      <div class="flex-shrink-0">
        <img class="avatar avatar-xl w-80px" alt="Image Description" data-hs-theme-appearance="default" src="https://htmlstream.com/preview/front-dashboard-v2.1.1/assets/svg/illustrations/oc-megaphone.svg">

      </div>
      <div class="flex-grow-1 ms-3">
        <h3 class="alert-heading mb-1">{{__('Attention!')}}</h3>
        <p class="mb-0">{{__('Retention Available')}} <strong>The contract of this invoice have retention: {{$invoice->contract->getPrintableRetentionAmount()}}</strong></p>
      </div>
    </div>
  </div>
</div>
@endif

@if ($invoice->type !== 'Down Payment')
<div class="d-flex justify-content-between mt-3 mb-3 flex-wrap gap-2 align-items-center">

  {{-- Left: Dropdown Menu --}}
  <div class="order-1">
    <div class="menu menu-rounded menu-column menu-lg-row menu-active-bg menu-title-gray-700 menu-state-gray-900 menu-icon-gray-500 menu-arrow-gray-500 menu-state-icon-primary menu-state-bullet-primary fw-semibold fs-base align-items-stretch my-2 my-lg-0 px-2 px-lg-0" data-kt-menu="true">
      <div data-kt-menu-trigger="{default: 'click', lg: 'hover'}" data-kt-menu-placement="bottom-start" class="menu-item menu-lg-down-accordion me-0 me-lg-2">
        <span class="menu-link">
          <span class="menu-icon">
            <i class="ki-outline ki-plus fs-4"></i>
          </span>
          <span class="menu-title">Add</span>
          <span class="menu-arrow"></span>
        </span>

        <div class="menu-sub menu-sub-lg-down-accordion menu-sub-lg-dropdown px-lg-2 py-lg-4 w-lg-150px">

          {{-- @can('delete invoice item')
          <div class="menu-item" x-show="$wire.selectedItems.length > 0">
            <a class="menu-link" wire:click="deleteSelectedItems" wire:loading.attr="disabled">
              <span class="menu-title text-danger">Delete Selected</span>
            </a>
          </div>
          @endcan --}}
 
          @if ($is_editable && iCan('create invoice item'))

            @if ($invoice->invoiceable_type !== 'App\Models\Expense' && $invoice->type === 'Regular'  &&
            $this->availablePhasesCount > 0 )
              <div class="menu-item">
                <a class="menu-link" wire:click.prevent="addPhases" wire:loading.attr="disabled">
                  <span class="menu-title">Phases</span>
                </a>
              </div>
            @endif

            @if (
              $invoice->invoiceable ||
              $this->hasRemainingAllowablePhases()
          )
              <div class="menu-item">
                <a class="menu-link" wire:click.prevent="addItem" wire:loading.attr="disabled">
                  <span class="menu-title">Items</span>
                </a>
              </div>
            @endif

            <div class="menu-item">
              <a class="menu-link" wire:click.prevent="addRetention" wire:loading.attr="disabled">
                <span class="menu-title">Retention</span>
              </a>
            </div>

            <div class="menu-item">
              <a class="menu-link" wire:click.prevent="addDiscount" wire:loading.attr="disabled">
                <span class="menu-title">Discount</span>
              </a>
            </div>

            <div class="menu-item">
              <a class="menu-link" wire:click.prevent="addPayment" wire:loading.attr="disabled">
                <span class="menu-title">Payment</span>
              </a>
            </div>

            

          @endif

        </div>
      </div>
    </div>
  </div>

  {{-- Right: Delete Button --}}
  @can('delete invoice item')
  <div x-data="{ selectedItems: @entangle('selectedItems') }" x-cloak class="ms-auto order-2">
    <button type="button"
        class="btn btn-sm btn-danger"
        wire:click="deleteSelectedItems"
        wire:loading.attr="disabled"
        x-show="selectedItems.length > 0">
     Delete Selected (<span x-text="selectedItems.length"></span>)
    </button>
  </div>
  @endcan

</div>
@endif

<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-5">
          <thead class="border-bottom-1 cs-mb50">
            <tr class="cs-secondary_color">
              <th class="cs-width_3 cs-normal fw-bold">
                @if($is_editable)
                  <input class="ms-2 me-3 email-list-item-input form-check-input" type="checkbox"
                    x-bind:checked="$wire.selectedItems.length == {{$invoice->items->count()}}"
                    x-on:click="(e) => {
                      if(e.target.checked){
                        document.querySelectorAll('.selectedItems-input').forEach((el) => {
                          el.checked = true;
                          el.dispatchEvent(new Event('change'));
                        });
                      } else {
                        $wire.selectedItems = [];
                      }
                    }"
                  />
                @endif
                DESCRIPTION
              </th>
              <th class="cs-width_2 cs-normal fw-bold text-center">COST</th>
              <th class="cs-width_1 cs-normal fw-bold text-center">QTY</th>
              @if ($invoice_total_deducted_amount = $invoice->totalDeductedAmount())
                @if($invoice->is_deduction_excluding_vat)
                    {{-- Deduction before VAT --}}
                    <th class="cs-width_2 cs-normal fw-bold text-center">DOWN PAYMENT</th>
                    <th class="cs-width_2 cs-normal fw-bold text-center">TAX</th>
                @else
                    {{-- Deduction after VAT --}}
                    <th class="cs-width_2 cs-normal fw-bold text-center">TAX</th>
                    <th class="cs-width_2 cs-normal fw-bold text-center">DOWN PAYMENT</th>
                @endif
                @else
                    {{-- If no deduction, just show TAX column --}}
                    <th class="cs-width_2 cs-normal fw-bold text-center">TAX</th>
              @endif
              <th class="cs-width_2 cs-normal fw-bold text-center">AMOUNT</th>
            </tr>
          </thead>
          <tbody class="border-bottom-1" wire:sortable="updateInvoiceItemsOrder">
            @foreach ($invoice->items as $item)
            @php $item->conversion_rate = $applicable_conversion_rate; @endphp
            <tr wire:click="editItems({{ $item->id }})" wire:sortable.item="{{ $item->id }}" class="hover-actions-trigger cursor-pointer hover-toggler  {{ $editingItemId === $item->id ? 'bg-secondary  ' : '' }}">
            <!-- Item Name -->
            <td class="cs-width_3 cs-primary_color cs-f15">
                <div class="d-flex align-items-center">
                  @if($is_editable)
                    <div class="form-check ms-2 mb-0">
                      <input class="form-check-input selectedItems-input" type="checkbox" value="{{ $item->id }}" wire:model="selectedItems"/>
                    </div>
                  @endif
                  <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>
              <!-- Subtotal -->
              <td class="cs-width_2 cs-primary_color cs-f15 fs-7 text-center">{{ cMoney($item->subtotal, $invoice->currency, true) }}</td>
              <!-- Quantity -->
              <td class="cs-width_1 cs-primary_color cs-f15 text-center fs-7">{{ $item->quantity }}</td>
              <!-- Deduciton -->

              @if($invoice->is_deduction_excluding_vat)
                  {{-- Deduction before VAT --}}
                  @if($invoice_total_deducted_amount)
                    <td class="cs-width_2 cs-primary_color cs-f15 fs-7">
                      {{-- deduction logic --}}
                      @include('scrumboard::livewire.invoices.partials.rows.deduction', ['item' => $item])
                    </td>
                  @endif
              
                  {{-- TAX --}}
                  <td class="cs-width_2 cs-primary_color text-center fs-7 cs-f15">
                    @include('scrumboard::livewire.invoices.partials.rows.tax', ['item' => $item])
                  </td>
              @else
                    {{-- TAX --}}
                    <td class="cs-width_2 cs-primary_color text-center fs-7 cs-f15">
                      @include('scrumboard::livewire.invoices.partials.rows.tax', ['item' => $item])
                    </td>
                
                    @if($invoice_total_deducted_amount)
                      <td class="cs-width_2 cs-primary_color cs-f15 fs-7">
                        {{-- deduction logic --}}
                        @include('scrumboard::livewire.invoices.partials.rows.deduction', ['item' => $item])
                      </td>
                    @endif
              @endif
          
          
              <!-- Total Amount -->                  
              <td class="cs-width_2 cs-text_right cs-primary_color cs-f15 fs-7 text-center">
                {{ cMoney($item->total, $invoice->currency, true) }}
                @if($item->total_amount_adjustment)
                    @php
                      $rawTotal = $item->getRawOriginal('total');
                      $formattedTotal = cMoney(intToMoney($rawTotal), $invoice->currency, true);
                    @endphp
                  
                    <span 
                      class="text-danger"
                      data-bs-toggle="tooltip" 
                      data-bs-original-title="Original amount: {{ $formattedTotal }}"
                    >
                    *
                    </span>
                @endif
              </td>

            </tr>
            <!-- Item detail -->
            @include('scrumboard::livewire.invoices.partials.rows.detail')
            @endforeach
          </tbody>
        </table>
      </div>
    </div>
  </div>

<div class="row g-4 align-items-stretch mb-4">
    <!-- Payable to Supplier -->
    @include('scrumboard::livewire.invoices.partials.payable.supplier')
    <!-- Payable to ZATCA -->
    @include('scrumboard::livewire.invoices.partials.payable.zatca')
</div>

    <!-- Supplier Charges Summary -->
@include('scrumboard::livewire.invoices.partials.rows.charges')