@php
    $this->isEditing = empty($data) ? false : true;   
@endphp

<div>
    <x-modals.modal>
        <x-slot:title>
            @if (empty($data))
                Add Column
            @elseif (!empty($data['delete']))
                Delete Column: {{$columnName}}
            @else
                Update Column
            @endif
        </x-slot>

        @if (!empty($data['delete']))
            <form wire:submit.prevent="delete({{ $columnId }})">
                <div class="form-header">
                    <p>Are you sure you want to delete?</p>
                </div>
                <div class="modal-btn delete-action">
                    <div class="row">
                        <div class="col-6">
                            <button type="submit" class="btn btn-primary w-100 continue-btn">Delete</button>
                        </div>
                        <div class="col-6">
                            <a href="javascript:void(0);" data-dismiss="modal" class="btn btn-primary cancel-btn">Cancel</a>
                        </div>
                    </div>
                </div>
            </form>
        @else
        <form wire:submit.prevent="submitForm">
            @foreach($fields as $field)
                <div class="form-group">
                    <label>{{ ucfirst(str_replace('_', ' ', $field)) }} <span class="text-danger">*</span></label>
                    @php
                        $isFieldEditable = collect($editableFields)->contains($field);
                        $fieldName = "data.$field";
                    @endphp
                    @if(in_array($field, ['is_sortable', 'is_filterable', 'is_hidden', 'is_editable']))
                        <div class="custom-control custom-switch">
                            <input type="checkbox"
                                class="custom-control-input toggle-switch"
                                id="{{ $field }}"
                                wire:model.defer="{{ $fieldName }}"
                                @if($isEditing && !$isFieldEditable)
                                    disabled
                                @endif>
                            <label class="custom-control-label" for="{{ $field }}">Toggle</label>
                        </div>
                    @else
                        @if($field === 'column_type')
                        <select class="form-control"
                                id="columnType"
                                wire:model.defer="{{ $fieldName }}"
                                @if($isEditing && !$isFieldEditable) disabled @endif>
                            <option value="text" @if($fieldName === 'text') selected @endif>Text</option>
                            <option value="number" @if($fieldName === 'number') selected @endif>Number</option>
                            <!-- Add more types as necessary -->
                        </select>
                            
                        @else
                            <input class="form-control @if($isEditing && !$isFieldEditable) disabled @endif"
                                placeholder="Enter {{ $field }}"
                                type="text" 
                                wire:model.defer="{{ $fieldName }}"
                                @if($isEditing && !$isFieldEditable)
                                    disabled
                                @endif>
                            
                        @endif
                    @endif
                    @error($fieldName)
                        <span class="error">{{ $message }}
                    @enderror
                    </div>
                @endforeach

            <div class="submit-section">
                <button type="submit" class="btn btn-primary submit-btn">Submit</button>
            </div>
        </form>


        @endif
    </x-modals.modal>
</div>