@if ($errors->any())
    <div class="row">
        <div class="col-md-12">
            <div class="mb-3">
                <div class="alert alert-primary" role="alert">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>
@endif

<div class="row">
    <div class="col-12 col-md-6 mb-3">
        <label class="col-form-label"> Contact <span class="text-danger">*</span></label>
        <select id="contact_id" wire:model="form.contact_id" class="form-select">
            <option value="" selected disable hidden>Select Contact</option>
            @foreach ($contacts as $contact)
                <option value="{{ $contact->id }}">{{ $contact->name }}</option>
            @endforeach
        </select>
        @error('form.contact_id')
        <div class="error text-danger mt-1">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-12 col-md-6 mb-3">
        <label class="col-form-label"> Transaction Type <span class="text-danger">*</span></label>
        <input type="text" wire:model="form.transaction_type" class="form-control" placeholder="Enter Transaction Type" />
        @error('form.transaction_type')
        <div class="error text-danger mt-1">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-12 col-md-6 mb-3">
        <label class="col-form-label"> Invested Balance <span class="text-danger">*</span></label>
        <input wire:model="form.invested_balance" step="0.01" type="number" min="0" class="form-control" placeholder="Enter Invested Balance" />
        @error('form.invested_balance')
        <div class="error text-danger mt-1">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-12 col-md-6 mb-3">
        <label class="col-form-label"> In Trust Balance <span class="text-danger">*</span></label>
        <input wire:model="form.in_trust_balance" step="0.01" type="number" min="0" class="form-control" placeholder="Enter In Trust Balance" />
        @error('form.in_trust_balance')
        <div class="error text-danger mt-1">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-12 mb-3">
        <label class="col-form-label"> Description <span class="text-danger">*</span></label>
        <input type="text" wire:model="form.description" class="form-control" placeholder="Enter Description" />
        @error('form.description')
        <div class="error text-danger mt-1">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-12 col-md-6 mb-3">
        <label class="col-form-label"> Fund Balance <span class="text-danger">*</span></label>
        <input wire:model="form.fund_balance" step="0.01" type="number" min="0" class="form-control" placeholder="Enter Fund Balance" />
        @error('form.fund_balance')
        <div class="error text-danger mt-1">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-12 col-md-6 mb-3">
        <label class="col-form-label"> Amount <span class="text-danger">*</span></label>
        <input wire:model="form.amount" step="0.01" type="number" min="0" class="form-control" placeholder="Enter Amount" />
        @error('form.amount')
        <div class="error text-danger mt-1">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-12 col-md-6 mb-3">
        <label class="col-form-label"> Reference </label>
        <input type="text" wire:model="form.reference" class="form-control" placeholder="Enter Reference" />
    </div>

    <div class="col-12 col-md-6 mb-3">
        <label for="bank_account_id" class="col-form-label">Bank Account <span class="text-danger">*</span></label>
        <select id="bank_account_id" wire:model.change="form.bank_account_id" class="form-select">
            <option value="" selected disabled hidden>Select Bank Account</option>
            @foreach ($bank_accounts as $account)
                <option value="{{ $account->id }}"> {{ $account->account_name }}</option>
            @endforeach
        </select>
        @error('form.bank_account_id')
        <div class="error text-danger mt-1">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-12 mb-3">
        <label class="col-form-label"> Narrative</label>
        <textarea wire:model="form.narrative" rows="5" cols="5" class="form-control" placeholder="Enter Narrative"></textarea>
    </div>
</div>

@script
<script>
    $(document).ready(function () {
        // Get IDs for Select fields
        const selectIds = Array.from(document.getElementsByTagName('select')).map(el => el.id).filter((el) => el);

        selectIds.forEach(function (id) {
            let options = {
                placeholder: '',
                width: '100%',
                minimumResultsForSearch: 0,
            };
            const $el = $(`#${id}`);

            if ($el.is('[multiple]')) {
                options.closeOnSelect = false;
                options.multiple = true;
            }

            $el.on('change', function () {
                @this.
                set(`form.${id}`, $(this).val());
            })

            // For initial load
            $el.select2(options);

            // For DOM reloads
            Livewire.hook('morphed', ({el, component}) => {
                $el.select2(options);
            });
        });
    })
</script>
@endscript