@php
$invoiceItem = $invoiceItem ?? null;
$disabled = '';
@endphp

<div x-data="{ selectedAllowablePhases: @entangle('selectedAllowablePhases') }"
     x-init="
        KTApp.init();

        // Sync Select2 -> Livewire
        $('#allowablephases_id-select').on('change', function () {
          let selected = $(this).val();
          $wire.set('selectedAllowablePhases', selected); // ✅ required for wire:loading to work
      });
      

        // Sync Livewire -> Select2
        $watch('selectedAllowablePhases', value => {
         console.log('🔁 Livewire -> Select2 sync triggered');
         console.log('📦 New selectedAllowablePhases value:', value);
            $('#allowablephases_id-select').val(value).trigger('change');
            $('#allowablephases_id-select').val(selectedAllowablePhases).trigger('change');
        });
     ">
     <div x-effect="
    console.log('🔁 Watch triggered');
    console.log(selectedAllowablePhases);
    $('#allowablephases_id-select').val(selectedAllowablePhases).trigger('change');
"></div>

    <div class="d-flex justify-content-between align-items-center mb-4">
        <!-- Left: Title -->
        <h6 class="mb-0 fw-bold">Add Items</h6>
    
        <!-- Right: Tab Buttons -->
        <div class="card-toolbar">
          <ul class="nav" role="tablist">
            <li class="nav-item" role="presentation">
                <button
                @click="$wire.showSetting()"
                type="button"
                class="btn btn-sm btn-active-light fw-bold px-4 me-1">
                Back
              </button>
            </li>
          </ul>   
        </div>


        
    </div>
ssssssssssssssssss

    <div class="row">
      {{-- Phase / Expense Selection --}}
      <div class="row mb-4">
        <input type="hidden" id="invoice_id" value="{{ $invoice->uuid }}">
  
        {{-- ✅ Move wire:ignore to wrap the entire row or p-4 --}}
        <div wire:ignore>
          <select class="form-select"
            data-control="select2"
            data-kt-select2="true"
            data-placeholder="{{ __('Select Phases') }}"
            data-allow-clear="true"
            data-kt-template-result="phases"
            data-kt-template-selection="phases"
            data-remote="{{ route('resource-select', ['contractAllowablePhase', 'dependent' => 'invoice_id']) }}"
            data-dependent_id="invoice_id"
            data-set-prop-renderless="selectedAllowablePhases"
            data-component-id="{{ $this->__id }}"
            name="allowablephases_id"
            id="allowablephases_id-select">
          </select>
        </div>
      </div>
    
      <div wire:loading wire:target="selectedAllowablePhases" class="mt-3">
        ⏳ Loading item details...

    </div>
    
    @if($selectedAllowablePhases)


    <div class="alert alert-info mt-2">
      🔍 Selected Phase ID: <strong>{{ $selectedAllowablePhases }}</strong>
    </div>
  @endif
  

      
      {{-- Item Name --}}
      <div class="form-group col-12">
        {{ Form::label('name', __('Item Name'), ['class' => 'col-form-label']) }}
        {!! Form::text('name', @$invoiceItem->name, [
            'class' => 'form-control',
            $disabled,
            'placeholder' => __('Item Name')
        ]) !!}
      </div>
    
      {{-- decription --}}
      <div class="form-group col-12">
        {{ Form::label('description', __('Description'), ['class' => 'col-form-label']) }}
        {!! Form::text('description', null, ['class' => 'form-control', $disabled, 'placeholder' => __('Description')]) !!}
      </div>

      <div class="row">
        {{-- Quantity --}}
        <div class="form-group col-md-4">
          {{ Form::label('quantity', __('Quantity'), ['class' => 'col-form-label']) }}
          {!! Form::number('quantity', @$invoiceItem->quantity, [
              'class' => 'form-control',
              $disabled,
              'placeholder' => __('Quantity')
          ]) !!}
        </div>
      
        {{-- Price --}}
        <div class="form-group col-md-8">
          {{ Form::label('price', __('Price'), ['class' => 'col-form-label']) }}
          {!! Form::number('price', @$invoiceItem->unit_price, [
              'class' => 'form-control',
              $disabled,
              'placeholder' => __('Price')
          ]) !!}
        </div>
      </div>
      

      {{-- Subtotal --}}
      <div class="form-group col-12">
        {{ Form::label('subtotal', __('Subtotal'), ['class' => 'col-form-label']) }}
        {!! Form::number('subtotal', null, ['class' => 'form-control', 'disabled','placeholder' => __('Subtotal')]) !!}
      </div>

      <div class="mt-4">
        <div class="btn-flt float-end">
          <button type="button" class="btn-sm btn btn-secondary" data-bs-dismiss="modal">{{ __('Back') }}</button>
          <button type="button" class="btn btn-sm btn-primary" wire:click="storeBulk">
            {{ __('Add') }}
          </button>
        </div>
      </div>

    </div>
  </div>