@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">Collection 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">Collection Type <span class="text-danger">*</span></label>
            <select id="type" wire:model.live="form.type" class="form-select">
                <option value="" selected disabled hidden>Select Type</option>
                @foreach (config('env.collection_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-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">Owners <span class="text-danger">*</span></label>
            <div class="form-checkbox-wrapper">
                @foreach ($users as $user)
                    <div class="form-check">
                        <input class="form-check-input" wire:model="form.owners" type="checkbox" value="{{ $user->id }}" id="owner{{ $user->id }}">
                        <label class="form-check-label" for="owner{{ $user->id }}">
                            {{ $user->given_names }} {{ $user->surname }}
                        </label>
                    </div>
                @endforeach
            </div>
            @error('form.owners')
            <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">Notifications <span class="text-danger">*</span></label>
            <div class="form-checkbox-wrapper">
                @foreach ($users as $user)
                    <div class="form-check">
                        <input class="form-check-input" wire:model="form.notifications" type="checkbox" value="{{ $user->id }}" id="not{{ $user->id }}">
                        <label class="form-check-label" for="not{{ $user->id }}">
                            {{ $user->given_names }} {{ $user->surname }}
                        </label>
                    </div>
                @endforeach
            </div>
            @error('form.notifications')
            <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">Pipeline <span class="text-danger">*</span></label>
            <select id="pipeline_id" wire:model.change="form.pipeline_id" class="form-select">
                <option value="" selected disabled hidden>Select Pipeline</option>
                @foreach ($pipelines as $pipeline)
                    <option value="{{ $pipeline->id }}">{{ $pipeline->name }}</option>
                @endforeach
            </select>
            @error('form.pipeline_id')
            <div class="error text-danger mt-1">{{ $message }}</div>
            @enderror
        </div>
    </div>
    <div class="col-md-6">
        <div class="mb-3">
            <label for="status" class="col-form-label">Status <span class="text-danger">*</span></label>
            <select id="status" wire:model="form.status" class="form-select">
                <option value="" selected disabled hidden>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 class="col-md-12 p-1">
        <div class="card border border-success p-20">
            <div class="mb-3">
                <div class="pipe-title d-flex align-items-center justify-content-between">
                    <h5 class="form-title">Field Collection</h5>
                </div>
                <table class="table">
                    <thead>
                        <tr>
                            <th></th>
                            <th>Field</th>
                            <th>Required</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody wire:sortable="sortCollectionColumns" class="option-listing">
                        @if (is_array($form->columns))
                            @foreach ($form->columns as $column)
                                <tr wire:sortable.item="{{ $loop->index }}" wire:key="option-{{ $loop->index }}" class="option-item">
                                    <td><span wire:sortable.handle><i class="ti ti-grip-vertical"></i></span></td>
                                    <td>
                                        <select class="form-select" wire:model="form.columns.{{ $loop->index }}.field_id">
                                            <option value="">Select Field</option>
                                            @foreach ($fields as $field)
                                                <option value="{{ $field->id }}">{{ $field->name }}</option>
                                            @endforeach
                                        </select>
                                    </td>
                                    <td>
                                        <input type="checkbox" wire:model="form.columns.{{ $loop->index }}.required" value="1" />
                                    </td>
                                    <td>
                                        <a href="javascript:void(0);" wire:click="removeCollectionColumn({{ $loop->index }})">
                                            <i class="ti ti-trash text-danger"></i> Delete
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                        @endif
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="4" align="center">
                                <button type="button" class="btn btn-sm btn-primary" wire:click="addNewCollectionColumn">Add Option</button>
                            </td>
                        </tr>
                </table>
            </div>
        </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