@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">
        <div class="mb-3">
            <label class="col-form-label"> Journal <span class="text-danger">*</span></label>
            <select id="trust_accounting_journal_id" wire:model="form.trust_accounting_journal_id" class="form-select">
                <option value="" selected disable hidden>Select Journal</option>
                @foreach ($journals as $journal)
                    <option value="{{ $journal->id }}">{{ $journal->description }}</option>
                @endforeach
            </select>
            @error('form.trust_accounting_journal_id')
            <div class="error text-danger mt-1">{{ $message }}</div>
            @enderror
        </div>
    </div>

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

    <div class="col-12">
        <div class="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>

    <div class="col-12 col-md-6">
        <div class="mb-3">
            <label class="col-form-label"> Type <span class="text-danger">*</span></label>
            <select id="type" wire:model="form.type" class="form-select">
                <option value="" selected disable hidden>Select Journal</option>
                @foreach (array('deposit','balance','final_payment') as $type)
                    <option value="{{ $type }}">{{ Str::of($type)->replace('_',' ')->title() }}</option>
                @endforeach
            </select>
            @error('form.type')
            <div class="error text-danger mt-1">{{ $message }}</div>
            @enderror
        </div>
    </div>

    <div class="col-12 col-md-6">
        <div class="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>
</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