@php
$disabled = '';
@endphp

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

KTApp.init();
    Livewire.hook('message.processed', () => {
        const $select = $('#allowablephases_id-select');

        if (!$select.hasClass('select2-hidden-accessible')) {
            $select.select2({
                placeholder: '{{ __("Select Phases") }}',
                allowClear: true
            }).on('change', function () {
                $wire.set('selectedAllowablePhases', $(this).val());
            });
        }

        $select.val(selectedAllowablePhases).trigger('change');
    });
">
<div class="row">
  {{-- Phase / Expense Selection --}}
  @if($invoice)
  {{ $invoice->uuid }}
@else
  <p>No invoice found.</p>
@endif
  <div class="form-group col-12 mb-4">
    {{-- <input type="hidden" id="invoice_id" value="{{ $invoice->uuid }}"> --}}
    <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> --}}


      {!! Form::select('allowablephases_id',
      // Load selected phase as the only option so Select2 sees it
      $selectedAllowablePhases ? [
          $selectedAllowablePhases => optional(\App\Models\ContractPhase::find($selectedAllowablePhases))->name ?? 'Selected Phase'
      ] : [],
      $selectedAllowablePhases,
      [
          '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',
          'wire:model' => 'selectedAllowablePhases',
          'data-set-prop-renderless' => 'selectedAllowablePhases',
          'data-component-id' => $this->__id,
          'id' => 'allowablephases_id-select'
      ]
  ) !!}
  

    </div>
  </div>


{{$selectedAllowablePhases }}
        {{-- Loading Spinner --}}
        <div wire:loading wire:target="selectedAllowablePhases" class="mt-3">
            ⏳ Loading item details...
        </div>

        {{-- Debug Info --}}
        @if($selectedAllowablePhases)

        @if($selectedPhase)

        <div class=" col-12">
        <div class=" alert alert-info">
          🔍 Selected Phase ID: <strong>{{ $selectedAllowablePhases }}</strong>
      </div>       

    </div>    
        <div class="form-group col-12">

          <div class="mb-2">
            <strong>Phase Name:</strong> {{ $selectedPhase->name }}
        </div>
        @if($selectedPhase->stage)
            <div class="mb-2">
                <strong>Stage Name:</strong> {{ $selectedPhase->stage->name }}
            </div>
        @endif

  <table class="table table-hover">
    <tbody>
      <tr style="background-color: #efeff1;">

          <td class="px-3">Phase Total Amount</td>
          <td class="text-end px-3">
            @cMoney($selectedPhaseTotalCost, $selectedPhase->contract->currency, true)
          </td>
        </tr>
        <tr>
          <td class="px-3">Invoiced Amount</td>
          <td class="text-end px-3">
            @cMoney($selectedPhaseInvoiceableAmount, $invoice->currency, true)
          </td>
        </tr>
        <tr style="background-color: #efeff1;">
          <td class="px-3">Remaining Amount</td>
          <td class="text-end px-3">
            @cMoney($selectedPhaseRemainingAmount, $invoice->currency, true)
          </td>
        </tr>
        
    </tbody>
  </table>
</div>  
@endif

  


        @endif

        {{-- Item Name --}}
        <div class="form-group col-12">
            {{ Form::label('name', __('Item Name'), ['class' => 'col-form-label']) }}


<input type="text" wire:model="name" class="form-control" placeholder="Enter Item Name" />

        </div>

        {{-- Description --}}
        <div class="form-group col-12">
            {{ Form::label('description', __('Description'), ['class' => 'col-form-label']) }}
             <input type="text" wire:model="description" class="form-control" placeholder="Enter Item Description" />
        </div>

{{-- Quantity --}}
<div class="form-group col-md-4">
    {{ Form::label('quantity', __('Quantity'), ['class' => 'col-form-label']) }}
    {!! Form::number('quantity', null, [
        'class' => 'form-control',
        
        'wire:model.live' => 'quantity', // 🔁 this is the key
        $disabled,
        'min' => 0,
        'step' => 1,
        'placeholder' => __('Quantity')
    ]) !!}
</div>

{{-- Price --}}
<div class="form-group col-md-8 ">
    {{ Form::label('price', __('Price'), ['class' => 'col-form-label']) }}
    {!! Form::number('price', null, [
        'class' => 'form-control',
        'wire:model.live' => 'price', // 🔁 this is the key
        $disabled,
        'placeholder' => __('Price')
    ]) !!}
</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> --}}

              {{-- Subtotal --}}
            <!--begin::Input group-->
            <div class="input-group  mt-4 mb-5">
              <span class="input-group-text" id="basic-addon1">Subtotal</span>
              <input type="text" class="form-control" placeholder="{{ __('Subtotal') }}" disabled value="{{ $this->formattedSubtotal }}">
            </div>
            <!--end::Input group-->

            


        {{-- Buttons --}}
        <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="save">
                    {{ __('Add') }}
                </button>
            </div>
        </div>
    </div>
</div>