@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">
                Field Name {!! $form->visibility == '2' ? '' : '<span class="text-danger">*</span>' !!}
            </label>
            @if ($form->visibility == '2')
                <input type="text" value="{{ $form->name }}" class="form-control" disabled />
            @else
                <input type="text" wire:model="form.name" class="form-control">
            @endif
            @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</label>
            <input type="text" wire:model="form.display_name" class="form-control">
        </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-12">
        <div class="mb-3">
            <label class="col-form-label">Categories <span class="text-danger">*</span></label>
            <div class="border border-success p-20">
                <!-- Multi Select: https://www.youtube.com/watch?v=vBvW2ygSEoE -->
                @foreach ($categories as $category)
                    <div class="form-check">
                        <input id="cat-{{ $category->id }}" wire:model="form.field_categories" class="form-check-input" type="checkbox" value="{{ $category->id }}" />
                        <label class="form-check-label" for="cat-{{ $category->id }}">
                            {{ $category->name }}
                        </label>
                    </div>
                @endforeach
            </div>
            @error('form.field_categories')
            <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">Module <span class="text-danger">*</span></label>
            <div class="border border-success p-20">
                @foreach ($modules as $module)
                    <div class="form-check">
                        <input id="cat-{{ $module->id }}" wire:model="form.field_modules" class="form-check-input" type="checkbox" value="{{ $module->id }}" />
                        <label class="form-check-label" for="cat-{{ $module->id }}">
                            {{ $module->name }}
                        </label>
                    </div>
                @endforeach
            </div>
            @error('form.field_modules')
            <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">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.form_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>
    @if (in_array($form->type, config('env.field_with_options')))
        <div class="col-md-6">
            <div class="mb-3">
                <label for="option_type" class="col-form-label">Option Type <span class="text-danger">*</span></label>
                <select id="option_type" wire:model.change="form.option_type" class="form-select">
                    <option value="">Select Type</option>
                    <option value="create-new">Create New List</option>
                    <option value="use-existing">Use Existing List</option>
                </select>
                @error('form.option_type')
                <div class="error text-danger mt-1">{{ $message }}</div>
                @enderror
            </div>
        </div>
    @endif
    @if ($form->option_type == 'use-existing')
        <div class="col-md-{{ $form->existing_option ? '6' : '12' }}">
            <div class="mb-3">
                <label for="existing_option" class="col-form-label">Existing List Options <span class="text-danger">*</span></label>
                <select id="existing_option" wire:model.change="form.existing_option" class="form-select">
                    <option value="">Select List Option</option>
                    <optgroup label="CRM Setting Options">
                        @foreach ($setting_options as $option)
                            <option value="settings|{{ $option->id }}" data-options="">{{ $option->name }}</option>
                        @endforeach
                    </optgroup>
                    @if (isset($custom_options) && count($custom_options) > 0)
                        <optgroup label="Custom List Options">
                            @foreach ($custom_options as $option)
                                <option value="options|{{ $option->id }}" data-options="">{{ $option->name }}</option>
                            @endforeach
                        </optgroup>
                    @endif
                </select>
                @error('form.existing_option')
                <div class="error text-danger mt-1">{{ $message }}</div>
                @enderror
            </div>
        </div>
    @endif
    @if ($form->existing_option || $form->option_type == 'create-new')
        <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">List Options</h5>
                    </div>
                    @if ($form->option_type == 'create-new')
                        <div class="mb-1">
                            <label class="col-form-label">Option Name <span class="text-danger">*</span></label>
                            <input type="text" wire:model="form.new_option_name" class="form-control" placeholder="Enter New Option Name" />
                            @error('form.new_option_name')
                            <div class="error text-danger mt-1">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="mb-3">
                            <label class="col-form-label">Description</label>
                            <textarea wire:model="form.new_option_description" class="form-control" rows="5" placeholder="Enter New Option Description"></textarea>
                        </div>
                    @else
                        <div class="mb-1">
                            <label class="col-form-label">Existing Option Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" value="{{ $form->option_name }}" disabled />
                        </div>
                    @endif
                    <table class="table">
                        <thead>
                            <tr>
                                <th></th>
                                <th>Option Key</th>
                                <th>Option Value</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody wire:sortable="sortFieldOptions" class="option-listing">
                            @foreach ($form->options as $key => $option)
                                <tr wire:sortable.item="{{ $key }}" wire:key="option-{{ $key }}" class="option-item">
                                    <td><span wire:sortable.handle><i class="ti ti-grip-vertical"></i></span></td>
                                    <td>
                                        <input type="text" class="form-control" wire:model="form.options.{{ $key }}.option_key" placeholder="Enter Option Key" />
                                    </td>
                                    <td>
                                        <input type="text" class="form-control" wire:model="form.options.{{ $key }}.option_value" placeholder="Enter Option Value" />
                                    </td>
                                    <td>
                                        <a href="javascript:void(0);" wire:click="removeOption({{ $key }})">
                                            <i class="ti ti-trash text-danger"></i> Delete
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="4" align="center">
                                    <button type="button" class="btn btn-sm btn-primary" wire:click="addNewOption">Add Option</button>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    @endif
    <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="">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