@php
$invoiceRawCurrency = $invoice->getRawOriginal('currency');
@endphp

<div class="row"
     x-data
     x-init="
        $nextTick(() => {
            $dispatch('invoice-payment-component-ready');
            //KTMenu.createInstances();
            //KTComponents.init();
            if (typeof KTApp !== 'undefined' && typeof KTApp.init === 'function') {
                KTApp.init();
            }
        });
     "
     data-component-name="invoice-payment-component">

    

            {{-- LEFT: Table --}}
            <div class="col-md-8">
                <div x-data="{ tab: 'vendor' }">
                    {{-- Header --}}
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h5 class="mb-0 fw-bold">Payments</h5>

                        <div class="card-toolbar">
                            <ul class="nav" role="tablist">
                                <li class="nav-item">
                                    <button @click="tab = 'vendor'" :class="tab === 'vendor' ? 'btn btn-sm btn-active-light fw-bold px-4 me-1 active' : 'btn btn-sm btn-color-muted fw-bold px-4 me-1'" type="button">
                                        Vendor
                                    </button>
                                </li>
                                <li class="nav-item">
                                    <button @click="tab = 'zatca'" :class="tab === 'zatca' ? 'btn btn-sm btn-active-light fw-bold px-4 active' : 'btn btn-sm btn-color-muted fw-bold px-4'" type="button">
                                       Zatca
                                    </button>
                                </li>
                            </ul>
                        </div>
                    </div>

                    {{-- Tab Content --}}
                    <div class="card-body p-0 hover-scroll-y h-600px me-n5 pe-5">
                        <div x-show="tab === 'vendor'" x-transition>

                    
                          @include('scrumboard::livewire.invoices.payment.vendor', ['invoice' => $invoice])

                        </div>

                        <div x-show="tab === 'zatca'" x-transition>

                    
                            @include('scrumboard::livewire.invoices.payment.zatca', ['invoice' => $invoice])
                        </div>
                    </div>
                </div>
            </div>








    

<div class="col-md-4">

    <div class="row mb-4">
        <div class="col d-flex justify-content-between align-items-center">
            <h5 class="mb-0">Setting</h5>
    
            <button @click="Livewire.dispatch('backToInvoice')"
            class="btn btn-sm btn-secondary">
        ← Back to Invoice
    </button>
    
            
        </div>
    </div>


    <div class="row">
        {{-- Account --}}
        {{-- <div  wire:ignore class="form-group col-12 " >
          {{ Form::label('account_balance_id', __('Account'), ['class' => 'col-form-label']) }}
          {!! Form::select('account_balance_id', $selectedAccountBalance ?? [], @$invoicePayment->accountTransaction->account_balance_id ?? @array_keys($selectedAccountBalance ?? [])[0], [
          'class' => 'form-select', 'data-kt-select2' => 'true',
          'data-remote' => route('resource-select',
            [
              'AccountBalance',
              'dependent' => 'invoice_id',
              'dependent_2_col' => 'inv-type',
              'dependent_3_col' => 'pay-type',
              'dependent_id' => $invoice->uuid,
              'dependent_2' => 'Invoice',
              'dependent_3' => 'Partial',
              'mainInvoice' => $invoice->type
            ]),
          'data-placeholder' => __('Select Account'),
          'data-allow-clear' => 'true'
          ]) !!}
        </div> --}}

        <div
    wire:ignore
    x-data="{ selectedAccount: @entangle('selectedAccountId') }"
    x-init="
        Livewire.hook('message.processed', () => {
            const $select = $('#account_balance_id-select');

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

            $select.val(selectedAccount).trigger('change');
        });
    "
    class="form-group col-12"
>
    {{ Form::label('account_balance_id', __('Account'), ['class' => 'col-form-label']) }}

    {!! Form::select('account_balance_id',
        $selectedAccountBalance ?? [],
        $selectedAccountId ?? @$invoicePayment->accountTransaction->account_balance_id ?? array_key_first($selectedAccountBalance ?? []),
        [
            'class' => 'form-select',
            'id' => 'account_balance_id-select',
            'data-kt-select2' => 'true',
            'data-remote' => route('resource-select', [
                'AccountBalance',
                'dependent' => 'invoice_id',
                'dependent_2_col' => 'inv-type',
                'dependent_3_col' => 'pay-type',
                'dependent_id' => $invoice->uuid,
                'dependent_2' => 'Invoice',
                'dependent_3' => 'Partial',
                'mainInvoice' => $invoice->type
            ]),
            'data-placeholder' => __('Select Account'),
            'data-allow-clear' => 'true',
            'data-set-prop-renderless' => 'selectedAccountId',
            'data-component-id' => $this->__id,
        ]
    ) !!}
</div>

@if($selectedAccountId)
<div class="mt-2 text-info">
    Selected Account ID: {{ $selectedAccountId }}
</div>
@endif


            {{-- Transaction Id --}}
            <div class="form-group col-12 ">
              {{ Form::label('transaction_id', __('Transaction Id'), ['class' => 'col-form-label']) }}
              {!! Form::text('transaction_id', @$invoicePayment->transaction_id, ['class' => 'form-control', 'placeholder' => __('Transaction Id')]) !!}
            </div>
    
            {{-- payment date --}}
            <div class="form-group col-12">
              {{ Form::label('payment_date', __('Payment Date'), ['class' => 'col-form-label']) }}
              <input
                  type="date"
                  wire:model="paymentDate"
                  class="form-control"
                  placeholder="{{ __('Payment Date') }}"
              >
          </div>
          
     
          <div class=" {{($isForeignCurrencyInvoice = $invoice->isForeignCurrency()) ? '' : 'd-nones' }}">
            {{-- Currency --}}
            <div class="form-group col-12 ">
              {{ Form::label('currency', __('Currency'), ['class' => 'col-form-label']) }}
              {!! Form::select('currency', [cCurrency()->getSymbol() => cCurrency()->getSymbol(), $invoiceRawCurrency => $invoiceRawCurrency], $invoiceRawCurrency, [
                'class' => 'form-select',
                'data-kt-select2' => 'true'
              ],
              [
                cCurrency()->getSymbol() => ['data-is-base' => '1', 'data-symbol' => cCurrency()->getSymbol()],
                $invoiceRawCurrency => ['data-is-base' => '0', 'data-symbol' => $invoiceRawCurrency],
              ]) !!}
            </div>
            {{-- {{dd($invoice->payments->pluck('conversion_rate'))}} --}}
            {{-- conversion rate --}}
            <div class="form-group col-12 ">
              <label class="col-form-label" for="conversion_rate">{{  __('Conversion Rate') }}</label>
              @if($isForeignCurrencyInvoice && ($used_conversion_rates = $invoice->payments->pluck('conversion_rate'))->count() > 0)
                <span data-bs-toggle="tooltip" data-bs-html="true"
                  title="Previous rates: <br>
                  @foreach($used_conversion_rates as $conversion_rate)
                    {{floatval($conversion_rate)}}<br>
                  @endforeach"
                >
                  <i class="fa-solid fa-circle-info"></i>
                </span>
              @endif
              <div class="input-group col-12 col-md-12">
                <span class="input-group-text">1 {{$invoiceRawCurrency}} = </span>
                {!! Form::number('conversion_rate', @floatval($invoicePayment->conversion_rate), ['class' => 'form-control']) !!}
                <span class="input-group-text">{{ cCurrency()->getSymbol() }}</span>
              </div>
            </div>
    
          </div>
       

          <button
    wire:click="savePayment"
    wire:loading.attr="disabled"
    class=" btn btn-primary px-4 py-2 bg-green-600 text-white rounded mt-4"
>
    <span wire:loading.remove>💾 Save Payment</span>
    <span wire:loading class="absolute left-1/2 -translate-x-1/2">⏳ Saving...</span>
</button>


      </div>
     





    {{-- @include('scrumboard::livewire.invoices.partials.menu') --}}
</div>

</div>