@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-md-6">
        <div class="mb-3">
            <label class="col-form-label">Pipeline Name <span class="text-danger">*</span></label>
            <input type="text" wire:model="form.name" class="form-control">
            @error('form.name')
            <div class="error text-danger mt-1">{{ $message }}</div>
            @enderror
        </div>
    </div>
    <div class="col-md-6">
        <div class="mb-3">
            <label class="col-form-label">Display Name <span class="text-danger">*</span></label>
            <input type="text" wire:model="form.display_name" class="form-control">
            @error('form.display_name')
            <div class="error text-danger mt-1">{{ $message }}</div>
            @enderror
        </div>
    </div>
    <div class="col-md-12">
        <div class="mb-3">
            <label class="col-form-label">Description</label>
            <textarea wire:model="form.description" class="form-control" rows="5"></textarea>
        </div>
    </div>
    <div class="col-md-6">
        <div class="mb-3">
            <label class="col-form-label">Type <span class="text-danger">*</span></label>
            <select id="type" wire:model.change="form.type" class="form-select">
                <option value="">Select Type</option>
                @foreach (config('env.pipeline_types') as $k => $v)
                    <option value="{{ $k }}">{{ $v }}</option>
                @endforeach
            </select>
            @error('form.type')
            <div class="error text-danger mt-1">{{ $message }}</div>
            @enderror
        </div>
    </div>
    <div class="col-md-6">
        <div class="mb-3">
            <label for="field_status" class="col-form-label">Status <span class="text-danger">*</span></label>
            <select id="status" wire:model="form.status" class="form-select">
                <option value="">Select Status</option>
                @foreach (config('env.status') as $k => $v)
                    <option value="{{ $k }}">{{ $v }}</option>
                @endforeach
            </select>
            @error('form.status')
            <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