@use(App\Domains\Finance\Enums\InvoiceType)
<x-modal id="invoice-form-modal" size="modal-lg" :title="$this->title" wire:submit="save" wire:loading form livewire>
    <div class="d-flex flex-column gap-3">
        <x-form.select
            name="form.type"
            :label="__('domains/finance/field.invoice.type')"
            wire:model.live="form.type"
            :options="InvoiceType::options()"
        />
        @forelse ($this->invoiceSchema as $key => $value)
            @php($model = $value->schema?->isLive() ? 'wire:model.live' : 'wire:model')
            <x-dynamic-component :key="$value->key"
                                 :component="$value->type->component()"
                                 :attributes="new Illuminate\View\ComponentAttributeBag($value->attributes)->merge([
                                    $model => 'form.detail.'.$value->key,
                                ])"
            />
        @empty
            <div class="col-12">
                <div class="alert bg-body-secondary d-flex align-items-center border-0 shadow-sm p-3 my-2"
                     role="alert">
                    <div class="me-3 fs-3 text-secondary">
                        @svg('tabler-x', 'w-100 h-100')
                    </div>
                    <div>
                        <h6 class="alert-heading mb-1 fw-bold">Tidak Ada Field Tambahan</h6>
                        <p class="mb-0 small text-muted">
                            Tipe transaksi <strong>{{ $form->type?->label() }}</strong>
                            belum tersedia.
                        </p>
                    </div>
                </div>
            </div>
        @endforelse

        <x-form.input
            name="form.name"
            :label="__('domains/finance/field.invoice.name')"
            wire:model="form.name"
        />
        <x-form.input
            name="form.amount"
            :label="__('domains/finance/field.invoice.amount')"
            wire:model="form.amount"
        />
        <x-form.select
            name="form.client_name"
            :label="__('domains/finance/field.invoice.client_name')"
            wire:model="form.client_name"
        />
        @if ($this->form->type == null || $form->type?->schema()->isCoaVisible())
            <x-form.select
                name="form.coa_name"
                :label="__('domains/finance/field.invoice.coa_name')"
                wire:model="form.coa_id"
            />
        @endif
    </div>

    @push('scripts')
        @vite(['resources/js/plugin/select2.js'])
    @endpush

    <x-slot:footer>
        <x-button type="button" theme="secondary" :label="__('ui/button.cancel')" data-bs-dismiss="modal"/>
        <x-button type="submit" theme="primary" :label="__('ui/button.save')"/>
    </x-slot:footer>
</x-modal>