@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</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</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_categories')<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="field_type" wire:model.change="form.type" class="form-control">
                <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="sel_option_type" class="col-form-label">Option Type <span class="text-danger">*</span></label>
                <select id="sel_option_type" wire:model.change="form.option_type" class="form-control">
                    <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-control">
                    <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="field_status" class="col-form-label">Status <span class="text-danger">*</span></label>
            <select id="field_status" wire:model="form.status" class="form-control">
                <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>