{{-- 
@if ($editItem->invoiceable)
    <table class="table table-bordered small">
        <tr><th>ID</th><td>{{ $editItem->invoiceable->id }}</td></tr>
        <tr><th>Name</th><td>{{ $editItem->invoiceable->name }}</td></tr>
        <tr><th>Cost</th><td>{{ cMoney($editItem->invoiceable->estimated_cost ?? 0, $invoice->currency) }}</td></tr>
        <tr><th>Due Date</th><td>{{ $editItem->invoiceable->due_date }}</td></tr>
    </table>
@else
    <p class="text-muted">No linked entity found for this invoice item.</p>
@endif --}}

@php

    $is_paid = false;
    $is_partial_paid = false;
@endphp

<div x-data="{
  showTaxForm: false,
  isEditing: false,
  taxId: null,
  type: 'Percent',
  amount: '',
  category: '1',
  editingTaxId: null, // highlight row
  deleteTaxId: null,
  editingDeductionPhaseId: null,
  deleteDeductionPhaseId: null,
  
  deleteTaxName: '',
  showDeleteConfirm: false,
  editingPhaseId: null, // new: for showing the form
  showEditPhaseForm: false, // optional if you want more control
  selectedTaxId: @entangle('selectedTaxId').defer,
  showAdjustmentForm: false, 
  editingAdjustmentPhaseId: null, 
  editingTotalPhaseId: null,
  deleteAdjustmentPhaseId: null,
  deleteAdjustmentPhaseName: '',
  showDeleteAdjustmentConfirm: false,
  showDeductionForm: false,

  init() {
    Livewire.on('phase-updated', () => {
      this.cancelPhaseEdit();
      Livewire.dispatch('refresh-edit-item');
      Livewire.dispatch('refresh-invoice-component');
    });
  },

  editPhase(phase) {
    this.editingPhaseId = phase.id;
    this.editingTaxId = null; // ✅ remove highlight
    this.showEditPhaseForm = true;
    this.showDeleteConfirm = false; // ← Add this
    // optionally preload other phase data here
  },

  cancelPhaseEdit() {
    this.editingPhaseId = null;
    this.editingTaxId = null; // ✅ remove highlight
    this.showEditPhaseForm = false;
  },

  confirmDeleteAdjustment(phaseId) {
    this.deleteAdjustmentPhaseId = phaseId;
    this.showDeleteAdjustmentConfirm = true;

    // Optional: clear any ongoing edit states
    this.showTaxForm = false;
    this.showEditPhaseForm = false;
    this.showAdjustmentForm = false;
    this.editingAdjustmentPhaseId = null;
  },

  cancelDeleteAdjustment() {
      this.deleteAdjustmentPhaseId = null;
      this.deleteAdjustmentPhaseName = '';
      this.showDeleteAdjustmentConfirm = false;
      this.editingAdjustmentPhaseId = null;
  },

  confirmDelete(tax) {
      this.deleteTaxId = tax.id;
      this.deleteTaxName = tax.name;
      this.showDeleteConfirm = true;
      this.showTaxForm = false;
      this.showEditPhaseForm = false;
      this.editingTaxId = null; // ✅ remove highlight
      this.editingPhaseId = null;
  },
  
  cancelDelete() {
      this.deleteTaxId = null;
      this.editingTaxId = null; // ✅ remove highlight
      this.editingPhaseId = null;
      this.deleteTaxName = '';
      this.showDeleteConfirm = false;
  },
  
  deleteTax() {
      // Fire delete request via fetch/ajax or redirect
      // After success:
      this.cancelDelete();
  },

  openAddForm() {
      this.resetForm();
      this.showTaxForm = true;
      this.editingPhaseId = null;
      this.showDeleteAdjustmentConfirm = false;
      this.showDeleteConfirm = false; // ← Add this
  },

  openEditForm(tax) {

      console.log('Dispatching tax data:', {
        phaseId: tax.phase_id,
        taxId: tax.tax_id,
      });
      
      Livewire.dispatch('load-tax-form', {
        phaseId: tax.phase_id,
        taxId: tax.tax_id,
      });

      this.isEditing = true;
      this.showTaxForm = true;
      this.editingTaxId = tax.id; // ✅ highlight
      this.showDeleteAdjustmentConfirm = false;
      this.showAdjustmentForm = false;
      this.showDeleteConfirm = false; // ← Add this
      this.showEditPhaseForm = false;
      this.editingPhaseId = null;
      this.editingAdjustmentPhaseId = null;


  },

  resetForm() {
    this.taxId = null;
    this.type = 'Percent';
    this.amount = '';
    this.category = '1';
    this.editingTaxId = null; // ✅ remove highlight
    this.isEditing = false;
    this.showDeleteConfirm = false; // ← Optional but safer
    this.showEditPhaseForm = false;
    this.showDeleteAdjustmentConfirm = false;
    this.editingAdjustmentPhaseId = null;
    this.showAdjustmentForm = false;

},


  saveTax() {
      // handle save logic here
      this.showTaxForm = false;
      this.resetForm();
      this.showDeleteConfirm = false; // ← Optional but safer
      this.showEditPhaseForm = false;
      this.showDeleteAdjustmentConfirm = false;

  }
}" id="phase-addons" class="p-3-disable"

x-init="
window.addEventListener('show-tax-form', (e) => {
  console.log('Received event:', e);
  console.log('Tax ID:', e.detail.taxId);
  showTaxForm = true;
  editingTaxId = e.detail.taxId;
});

window.addEventListener('show-deduction-form', (e) => {
  console.log('Received event:', e);
  console.log('Phase ID:', e.detail.phaseId);
  
  showDeductionForm = true;
  editingDeductionPhaseId = e.detail.phaseId;
});

window.addEventListener('load-total-adjustment-form', (e) => {
  console.log('📌 show-total-adjustment-form triggered:', e.detail);
  showAdjustmentForm = true;
  editingAdjustmentPhaseId = e.detail.phaseId;
});
window.addEventListener('hide-total-adjustment-form', () => {
  showAdjustmentForm = false;
  editingAdjustmentPhaseId = null;
});

">

@if(!$is_paid)
@if(iCan('create phase tax') && $editItem->invoiceable->canNewTaxAdded())
<!-- Add Tax Button -->
<div class="d-flex justify-content-end mb-2">
  <button type="button" class="btn btn-sm btn-primary me-2" @click="openAddForm" :disabled="showTaxForm">
    <span>Add Tax</span>
  </button>
  



  <button type="button" class="d-none btn btn-primary btn-sm float-end me-2 waves-effect waves-light" onclick="createPhasetax({{$editItem->invoiceable->id}}, this)">{{__('Add Tax')}}</button>
@endif
@if(count(@$editItem->invoiceable->contract->deductableDownpayments ?? []) > 0 && !$editItem->invoiceable->deduction && !$editItem->invoiceable->is_allowable_cost && iCan('create phase deduction'))
  
<button 
  type="button" 
  class="btn btn-sm btn-primary me-2" 
  @click="showDeductionForm = true; showTaxForm = false; showEditPhaseForm = false" 
  :disabled="showDeductionForm"
>
  <span>{{ __('Add Deduction') }}</span>
</button>


<button type="button" class="d-none btn btn-primary btn-sm float-end me-2 waves-effect waves-light {{$editItem->invoiceable->addedAsInvoiceItem->isEmpty() ? 'disabled' : ''}}" onclick="createPhaseDeduction({{$editItem->invoiceable->id}}, this)">{{__('Add Deduction')}}</button>
@endif
@endif
@if($is_partial_paid && $editItem->invoiceable->is_allowable_cost && iCan('create phase cost adjust'))
<button type="button" class="btn btn-primary btn-sm float-end me-2 waves-effect waves-light" onclick="createPhaseCostAdjustment({{$editItem->invoiceable->id}}, this)">{{__('Add Adjustment')}}</button>
@endif

</div>

<div 
  class="card-disable mt-4-disable" 
  x-show="showEditPhaseForm" 
  x-transition
>
  @if($editItem->invoiceable && $editItem->invoiceable instanceof \App\Models\ContractPhase)
    <livewire:scrumboard::contract-phase.contract-phase-form 
        :contract="$editItem->invoiceable->contract" 
        :phase="$editItem->invoiceable" 
        wire:key="'contract-phase-form-'.$editItem->invoiceable->id" 
    />
  @endif
</div>


  <!-- Deduction Form -->
  <div x-show="showDeductionForm">
    @livewire('scrumboard::contract-phase.contract-phase-deduction-form', [
    'phase' => $editItem->invoiceable,
    ], key('deduction-form-'.$editItem->invoiceable->id.'-'.now()->timestamp))
  </div>

  <!-- Tax Form -->
  <div x-show="showTaxForm" x-transition class="border rounded p-3 bg-light mt-2">
     @livewire('scrumboard::contract-phase.contract-phase-tax-form', [
      'phase' => $editItem->invoiceable,
    ], key('tax-form-'.$editItem->invoiceable->id.'-'.now()->timestamp))
  </div>
  
  <!-- Adjustment Form -->  
  <div x-show="showAdjustmentForm" x-transition class="border rounded p-3 bg-light mt-2">
    @livewire('scrumboard::contract-phase.total-amount-adjustment-form', [
        'phase' => $editItem->invoiceable,
    ], key('adjustment-form-' . $editItem->invoiceable->id . '-' . now()->timestamp))
    </div>


    <div class="source-item pt-2">
        <div class="col-12">
          @if($editItem->invoiceable->id)
            @if($editItem->invoiceable->taxes?->where('category', 2)->count() && !$editItem->invoiceable->taxes?->where('category', 3)->count())
              <div class="alert alert-warning alert-dismissible fade show" role="alert">
                <strong>Warning!</strong> Reverse Charge Tax is missing.
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
              </div>
            @endif
            <div class="table-responsive m-t-40 invoice-table-wrapper editing clear-both">

                <table class="table table-hover-disable invoice-table editing" id="billing-items-container">
                    <thead data-id="exclude-sort" id="billing-items-container-header">
                        <tr>
                          {{-- @if(!$is_paid)
                            <!--action-->
                            <th class="text-left x-action bill_col_action"><input type="checkbox"
                                    class="form-check-input select-all-items d-none"> Action</th>
                          @endif --}}
                            <!--description-->
                            <th class="text-left x-description bill_col_description fw-bold px-3">Items</th>
                            <th class="x-description bill_col_description text-end fw-bold px-3">Price</th>
                        </tr>
                    </thead>
                    <tbody>
                      <tr 
  :class="{
    'bg-primary text-white': editingPhaseId === {{ $editItem->invoiceable->id }},
    'hover-actions-trigger cursor-pointer': editingPhaseId !== {{ $editItem->invoiceable->id }}
  }"
>

                          <td class="px-3">
                            @if(!$is_paid)
                              @can('update contract phase')
                              <a 
                              class="hover-actions btn-inline cursor-pointer" 
                              @click="editPhase({ id: {{ $editItem->invoiceable->id }} })"
                            >
                              {!! getIcon('pencil','fs-3') !!}
                            </a>
                            

                                {{-- <a class="hover-actions position-relative btn-inline cursor-pointer" onclick="editPhaseDetails({{$editItem->invoiceable->id}}, this)">{!! getIcon('pencil','fs-3') !!}</a> --}}
                              @endcan
                            @endif
                            <span>{{$editItem->invoiceable->name}}</span>
                          </td>
                          <td class="text-end px-3" id="phase_item_total"
                          data-total="{{ $editItem->invoiceable->estimated_cost ? $editItem->invoiceable->estimated_cost : 0 }}"
                          >
                              @cMoney($editItem->invoiceable->amount ?? $editItem->invoiceable->estimated_cost, @$invoice->currency ?? $editItem->invoiceable->contract->currency, true)
                          </td>
                        </tr>
    
                        {{-- deduction row before tax --}}
                        @includeWhen($editItem->invoiceable->deduction && $editItem->invoiceable->deduction->is_before_tax ,'scrumboard::livewire.invoices.edit.contract-phase.deduction')
    
                        {{-- show subtotal row if deduction is applied before tax --}}
                        @if (@$editItem->invoiceable->deduction && @$editItem->invoiceable->deduction->is_before_tax)
                          @include('scrumboard::livewire.invoices.edit.contract-phase.subtotal-row')
                        @endif
    
                        {{-- show tax rows --}}
                        @include('scrumboard::livewire.invoices.edit.contract-phase.taxes')
                        {{--  --}}
                        @if(@$editItem->invoiceable->deduction && !@$editItem->invoiceable->deduction->is_before_tax)
                          @include('scrumboard::livewire.invoices.edit.contract-phase.subtotal-row')
                        @endif
                        {{--  --}}
                        @includeWhen($editItem->invoiceable->deduction && !$editItem->invoiceable->deduction->is_before_tax,'scrumboard::livewire.invoices.edit.contract-phase.deduction')
                        <tr 
                        :class="{
                          'bg-primary text-white': editingAdjustmentPhaseId === {{ $editItem->invoiceable->id  }} && deleteTaxId !== {{ $editItem->invoiceable->id  }},
                          'hover-actions-trigger cursor-pointer': editingAdjustmentPhaseId !== {{ $editItem->invoiceable->id  }} && deleteTaxId !== {{ $editItem->invoiceable->id  }}
                        }"
                         style="background-color: #efeff1;">
                            <td class="fw-bold px-3">
                              {{-- actions --}}
                              @if(!$is_paid)
                                @if((count($editItem->invoiceable->taxes) > 0 || $editItem->invoiceable->deduction) && iCan('manage phase manual total'))
                                  @if($editItem->invoiceable->total_amount_adjustment)
                                    {{-- remove manual total --}}
                                    <a
                                    :class="(editingAdjustmentPhaseId === {{ $editItem->invoiceable->id }}) 
                                      ? 'btn-inline d-none' 
                                      : 'hover-actions btn-inline cursor-pointer text-danger'"
                                    @click="confirmDeleteAdjustment({{ $editItem->invoiceable->id }}, '{{ $editItem->invoiceable->name ?? 'Phase' }}')"
                                    title="Remove Adjustment"
                                  >
                                    {!! getIcon('arrows-loop','fs-3') !!}
                                  </a>
                                  
                                
                                  @endif
                                  {{-- edit manual total --}}
                                  <a
                                    :class="(editingAdjustmentPhaseId === {{ $editItem->invoiceable->id }}) 
                                      ? 'btn-inline d-none' 
                                      : 'hover-actions btn-inline cursor-pointer'"
                                    @click="Livewire.dispatch('show-total-adjustment-form', {
                                      phaseId: {{ $editItem->invoiceable->id }}
                                    })"
                                  >
                                    {!! getIcon('pencil', 'fs-3') !!}
                                  </a>

                                @endif
                              @endif
                              {{-- end actions --}}
                              Item Total
                            </td>
                            <td class="text-end fw-bold px-3"
                              @if($editItem->invoiceable->total_amount_adjustment)
                                data-bs-toggle="tooltip" title="Calculated amount: {{cMoney(($editItem->invoiceable->getRawOriginal('total_cost') / 100), $editItem->invoiceable->contract->currency, true)}}"
                              @endif
                                >@cMoney($editItem->invoiceable->amount ?? $editItem->invoiceable->total_cost - (($editItem->invoiceable->costAdjustments && count($editItem->invoiceable->costAdjustments)) ? $editItem->invoiceable->costAdjustments->sum('amount') : 0), @$invoice->currency ?? $editItem->invoiceable->contract->currency, true)
                                  @if($editItem->invoiceable->total_amount_adjustment)
                                    <span class="text-danger">*</span>
                                  @endif
                            </td>
                        </tr>
                        @if($editItem->invoiceable->is_allowable_cost && $editItem->invoiceable->costAdjustments->count() > 0)
                          @include('admin.pages.contracts.phases.show.cost-adjustments')
                          <tr class="hover-actions-trigger"  style="background-color: #efeff1;">
                            <td class="fw-bold">
                              {{-- actions --}}
                              @if(!$is_paid)
                                @can('manage phase manual total')
                                  @if($editItem->invoiceable->total_amount_adjustment)
                                      {{-- remove manual total --}}
                                      <a class="hover-actions position-relative btn-inline cursor-pointer remove-phase-manual-total"
                                        data-toggle="confirm-action"
                                        data-confirmation-desc="{{__('Are you sure you want to remove adjustment amount?')}}"
                                        data-href="{{route('admin.contracts.phases.total-amount-adjustments.destroy', ['contract' => $editItem->invoiceable->contract->uuid, 'phase' => $editItem->invoiceable->id, '0'])}}"
                                        data-method="DELETE"
                                        >{!! getIcon('arrows-loop','fs-3') !!}
                                      </a>
                                    @endif
                                    {{-- edit manual total --}}
                                  <a class="hover-actions position-relative btn-inline cursor-pointer" onclick="editPhaseTotalAmount({{$editItem->invoiceable->id}}, this)">{!! getIcon('pencil','fs-3') !!}</a>
                                @endcan
                              @endif
                              {{-- end actions --}}
                              Grand Total
                            </td>
                            <td class="text-end fw-bold"
                                >@cMoney($editItem->invoiceable->total_cost, $editItem->invoiceable->contract->currency, true)
                            </td>
                        </tr>
                        @endif
                    </tbody>
                </table>
            </div>
          @else
            @include('admin.pages.contracts.phases.create-form')
          @endif
        </div>
    </div>
    


    
    <div x-show="showDeleteAdjustmentConfirm" >

     
    <div 
    class="alert alert-dismissible bg-light-danger d-flex flex-column flex-sm-row w-100 p-5 mb-10"
  >
    <!--begin::Icon-->
    <i class="ki-duotone ki-message-text-2 fs-2hx text-danger me-4 mb-5 mb-sm-0">
      <span class="path1"></span><span class="path2"></span><span class="path3"></span>
    </i>
    <!--end::Icon-->
  
    <!--begin::Content-->
    <div class="d-flex flex-column pe-0 pe-sm-10">
      <h6 class="fw-semibold mb-2">Delete Adjustment</h6>
      <span>
        Are you sure you want to remove the adjustment for: 
        <strong x-text="deleteAdjustmentPhaseName"></strong>?
      </span>
  
      <!--begin::Buttons-->
      <div class="mt-2 d-flex flex-wrap">
        <button 
          type="button" 
          class="btn btn-sm btn-outline btn-outline-danger btn-active-danger m-2"
          @click.prevent="cancelDeleteAdjustment">
          Cancel
        </button>
  
        <button 
          type="button" 
          class="btn btn-sm btn-danger m-2"
          @click="Livewire.dispatch('remove-total-adjustment', {
            phaseId: deleteAdjustmentPhaseId
          })">
          Ok, I got it
        </button>
      </div>
      <!--end::Buttons-->
    </div>
    <!--end::Content-->
  
    <!--begin::Close-->
    <button 
      type="button" 
      class="position-absolute position-sm-relative m-2 m-sm-0 top-0 end-0 btn btn-icon ms-sm-auto" 
      @click="cancelDeleteAdjustment"
    >
      <i class="ki-duotone ki-cross fs-1 text-danger">
        <span class="path1"></span><span class="path2"></span>
      </i>
    </button>
    <!--end::Close-->
  </div>
</div>

  <div x-show="showDeleteConfirm">



  <div class="alert alert-dismissible bg-light-danger d-flex flex-column flex-sm-row w-100 p-5 mb-10">
    <!--begin::Icon-->
    <i class="ki-duotone ki-message-text-2 fs-2hx text-danger me-4 mb-5 mb-sm-0"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>                    <!--end::Icon-->

    <!--begin::Content-->
    <div class="d-flex flex-column pe-0 pe-sm-10">
        <h6 class="fw-semibold mb-2">Delete Action</h6>
        <span>        Are you sure you want to delete the tax: <strong x-text="deleteTaxName"></strong>?</span>
                    <!--begin::Buttons-->
                    <div class="mt-2 d-flex  flex-wrap">
                      <button 
                      type="button" 
                      class="btn btn-sm btn-outline btn-outline-danger btn-active-danger m-2"
                      @click.prevent="cancelDelete">
                      Cancel
                    </button>

                    <button 
                    type="button" 
                    class="btn btn-sm btn-danger m-2"
                    @click="Livewire.dispatch('delete-tax', {
                      taxId: deleteTaxId,
                      phaseId: {{ $editItem->invoiceable->id }},
                    })">
                    Ok, I got it
                  </button>                    
    
                  </div>
                  <!--end::Buttons-->
    </div>
    <!--end::Content-->




    <!--begin::Close-->
    <button type="button" class="position-absolute position-sm-relative m-2 m-sm-0 top-0 end-0 btn btn-icon ms-sm-auto" data-bs-dismiss="alert">
        <i class="ki-duotone ki-cross fs-1 text-danger"><span class="path1"></span><span class="path2"></span></i>                    </button>
    <!--end::Close-->
</div>
</div>


{{-- <div class="card mt-4" x-show="editingPhaseId === {{ $editItem->invoiceable->id }}">
  <div class="card-header">
    <h5 class="card-title">VAT & Deduction</h5>
    <div class="card-toolbar">
      <button type="button" class="btn btn-sm btn-light-primary me-2">Add VAT</button>
      <button type="button" class="btn btn-sm btn-light-primary">Add Deduction</button>
    </div>
  </div>

  <div class="card-body pt-0">
    <!-- table as you have it... -->
  </div>
</div> --}}






</div>