sam-manage/resources/views/hr/employees/partials/position-add-modal.blade.php

{{-- 직급/직책 추가 모달 --}}
<div id="positionModal" class="fixed inset-0 z-50 hidden">
    {{-- 배경 오버레이 --}}
    <div class="fixed inset-0 bg-black/40" onclick="closePositionModal()"></div>

    {{-- 모달 본체 --}}
    <div class="fixed inset-0 flex items-center justify-center p-4">
        <div class="bg-white rounded-lg shadow-xl w-full max-w-sm relative">
            {{-- 헤더 --}}
            <div class="flex items-center justify-between px-5 py-4 border-b border-gray-200">
                <h3 id="positionModalTitle" class="text-lg font-semibold text-gray-800">직급 추가</h3>
                <button type="button" onclick="closePositionModal()"
                        class="text-gray-400 hover:text-gray-600 transition-colors">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>

            {{-- 바디 --}}
            <div class="px-5 py-4">
                <input type="hidden" id="positionType" value="">
                <label for="positionName" class="block text-sm font-medium text-gray-700 mb-1">
                    <span id="positionTypeLabel">직급</span>명
                </label>
                <input type="text" id="positionName"
                       placeholder="예: 대리, 과장, 팀장..."
                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                       onkeydown="if(event.key==='Enter'){event.preventDefault();savePosition();}">
                <div id="positionError" class="text-sm text-red-500 mt-1 hidden"></div>
            </div>

            {{-- 푸터 --}}
            <div class="flex justify-end gap-2 px-5 py-4 border-t border-gray-100">
                <button type="button" onclick="closePositionModal()"
                        class="px-4 py-2 text-sm text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
                    취소
                </button>
                <button type="button" onclick="savePosition()" id="positionSaveBtn"
                        class="px-4 py-2 text-sm text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors">
                    추가
                </button>
            </div>
        </div>
    </div>
</div>

<script>
function openPositionModal(type) {
    const modal = document.getElementById('positionModal');
    const title = document.getElementById('positionModalTitle');
    const typeLabel = document.getElementById('positionTypeLabel');
    const input = document.getElementById('positionName');
    const error = document.getElementById('positionError');

    document.getElementById('positionType').value = type;
    title.textContent = type === 'rank' ? '직급 추가' : '직책 추가';
    typeLabel.textContent = type === 'rank' ? '직급' : '직책';
    input.value = '';
    input.placeholder = type === 'rank' ? '예: 사원, 대리, 과장, 차장, 부장' : '예: 팀장, 실장, 본부장, 대표이사';
    error.classList.add('hidden');

    modal.classList.remove('hidden');
    setTimeout(() => input.focus(), 100);
}

function closePositionModal() {
    document.getElementById('positionModal').classList.add('hidden');
}

async function savePosition() {
    const type = document.getElementById('positionType').value;
    const name = document.getElementById('positionName').value.trim();
    const error = document.getElementById('positionError');
    const btn = document.getElementById('positionSaveBtn');

    if (!name) {
        error.textContent = '이름을 입력해주세요.';
        error.classList.remove('hidden');
        return;
    }

    btn.disabled = true;
    btn.textContent = '저장 중...';

    try {
        const res = await fetch('{{ route("api.admin.hr.positions.store") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
            },
            body: JSON.stringify({ type, name }),
        });

        const data = await res.json();

        if (data.success) {
            // 해당 select에 옵션 추가 및 선택
            const selectId = type === 'rank' ? 'position_key' : 'job_title_key';
            const select = document.getElementById(selectId);

            // 이미 같은 key가 있는지 확인
            let exists = false;
            for (const opt of select.options) {
                if (opt.value === data.data.key) {
                    opt.selected = true;
                    exists = true;
                    break;
                }
            }

            if (!exists) {
                const option = new Option(data.data.name, data.data.key, true, true);
                select.add(option);
            }

            closePositionModal();
        } else {
            error.textContent = data.message || '저장에 실패했습니다.';
            error.classList.remove('hidden');
        }
    } catch (e) {
        error.textContent = '서버 오류가 발생했습니다.';
        error.classList.remove('hidden');
    } finally {
        btn.disabled = false;
        btn.textContent = '추가';
    }
}
</script>