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


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

        @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 === 'department_id' ? 'Department Name' : ucwords(str_replace('_', ' ', $field)) }} <span class="text-danger">*</span></label>
                        @php
                            $isFieldEditable = collect($editableFields)->contains($field);
                            $fieldName = "data.$field";
                        @endphp

                        @if($field === 'department_id')
                            <select id="departmentSelect" class="form-control @if($isEditing && !$isFieldEditable) disabled @endif" wire:model.defer="{{ $fieldName }}">
                                <option value="">Select Department</option>
                                @foreach($departmentNames as $departmentName)
                                    <option value="{{ $departmentName }}">{{ $departmentName }}</option>
                                @endforeach
                            </select>
                        @else
                            <input class="form-control @if($isEditing && !$isFieldEditable) disabled @endif"
                                placeholder="Enter {{ $field === 'department_id' ? 'Department Name' : ucwords(str_replace('_', ' ', $field)) }}"
                                type="text" 
                                wire:model.defer="{{ $fieldName }}"
                                @if($isEditing && !$isFieldEditable)
                                    disabled
                                @endif
                            >
                        @endif

                        @if($isFieldEditable) <!-- Only show error message if the field is editable -->
                            @error($fieldName)
                                <span class="error">{{ $message }}</span>
                            @enderror
                        @endif
                    </div>
                @endforeach
                <div class="submit-section">
                    <button class="btn btn-primary submit-btn">Submit</button>
                </div>
            </form>
        @endif
    </x-modals.modal>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        let departmentSelect = document.getElementById('departmentSelect');

        departmentSelect.addEventListener('change', function () {
            let selectedOption = departmentSelect.options[departmentSelect.selectedIndex];
            if (selectedOption.value === '') {
                selectedOption.remove();
            }
        });
    });
</script>