@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-12">
        <div class="mb-3">
            <label class="col-form-label">Field 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-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 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>
                <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">
                        @if(is_array($form->options))
                        @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
                        @endif
                    </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>
                </table>
            </div>
        </div>
    </div>        
    <div class="col-md-12">
        <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>