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

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

        @if (!empty($data['delete']))
            <form wire:submit.prevent="delete">
                <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>{{ $field }} <span class="text-danger">*</span></label>
                    @php
                        $isFieldEditable = collect($editableFields)->contains($field);
                        $fieldName = "data.$field";
                    @endphp
                    <input class="form-control @if($isEditing && !$isFieldEditable) disabled @endif "
                        placeholder="Enter {{ $field }}"
                        type="text" 
                        wire:model.defer="{{ $fieldName }}"
                        @if($isEditing && !$isFieldEditable)
                            disabled
                        @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>