sam-manage/resources/views/rd/org-chart.blade.php

@extends('layouts.app')

@section('title', '조직도 관리')

@section('content')
<div x-data="orgChart()" x-init="init()">
    <!-- 페이지 헤더 -->
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-bold text-gray-800 flex items-center gap-2">
            <i class="ri-organization-chart text-purple-600"></i>
            조직도 관리
        </h1>
        <div class="flex items-center gap-3">
            <span class="text-sm text-gray-500" x-text="`전체 ${totalEmployees}명 | 배치 ${assignedCount}명 | 미배치 ${unassignedCount}명`"></span>
            <a href="{{ route('rd.index') }}" class="bg-white hover:bg-gray-100 text-gray-700 px-4 py-2 rounded-lg border transition text-sm">
                <i class="ri-arrow-left-line"></i> 돌아가기
            </a>
        </div>
    </div>

    <!-- 안내 -->
    <div class="bg-blue-50 border border-blue-200 rounded-lg px-4 py-3 mb-6 text-sm text-blue-700 flex items-start gap-2">
        <i class="ri-information-line text-lg shrink-0 mt-0.5"></i>
        <span>직원 카드를 드래그하여 부서에 배치하거나, 미배치 영역으로 이동할 수 있습니다. 변경은 즉시 저장됩니다.</span>
    </div>

    <div class="flex gap-6" style="min-height: calc(100vh - 240px);">
        <!-- 좌측: 미배치 직원 패널 -->
        <div class="shrink-0" style="width: 280px;">
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 sticky" style="top: 80px;">
                <div class="px-4 py-3 border-b border-gray-200 bg-gray-50 rounded-t-lg">
                    <h2 class="text-sm font-semibold text-gray-700 flex items-center gap-2">
                        <i class="ri-user-unfollow-line text-orange-500"></i>
                        미배치 직원
                        <span class="ml-auto bg-orange-100 text-orange-600 text-xs font-bold px-2 py-0.5 rounded-full" x-text="unassignedCount"></span>
                    </h2>
                </div>
                <!-- 검색 -->
                <div class="px-3 py-2 border-b border-gray-100">
                    <input type="text" x-model="searchUnassigned" placeholder="이름 검색..."
                           class="w-full px-3 py-1.5 border border-gray-200 rounded text-sm focus:outline-none focus:ring-1 focus:ring-purple-400">
                </div>
                <!-- 미배치 직원 목록 (드롭존) -->
                <div id="unassigned-zone" class="p-2 overflow-y-auto" style="max-height: calc(100vh - 380px); min-height: 100px;"
                     data-department-id="">
                    <template x-for="emp in filteredUnassigned" :key="emp.id">
                        <div class="employee-card bg-white border border-gray-200 rounded-lg px-3 py-2 mb-2 cursor-grab hover:shadow-md hover:border-purple-300 transition flex items-center gap-2"
                             :data-employee-id="emp.id">
                            <div class="w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold text-white shrink-0"
                                 :style="`background-color: ${getAvatarColor(emp.display_name)}`"
                                 x-text="emp.display_name?.charAt(0) || '?'"></div>
                            <div class="min-w-0">
                                <p class="text-sm font-medium text-gray-800 truncate" x-text="emp.display_name"></p>
                                <p class="text-xs text-gray-400 truncate" x-text="emp.position_label || ''"></p>
                            </div>
                        </div>
                    </template>
                    <div x-show="filteredUnassigned.length === 0" class="text-center text-gray-400 text-xs py-6">
                        <i class="ri-user-smile-line text-2xl block mb-1"></i>
                        미배치 직원 없음
                    </div>
                </div>
            </div>
        </div>

        <!-- 우측: 조직도 트리 -->
        <div class="flex-1 min-w-0">
            <!-- 최상위 부서 카드들 -->
            <template x-for="dept in rootDepartments" :key="dept.id">
                <div class="mb-4">
                    <div x-data="{ open: true }">
                        <!-- 부서 헤더 -->
                        <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                            <div class="flex items-center gap-2 px-4 py-3 bg-gradient-to-r from-purple-50 to-indigo-50 border-b border-gray-200 cursor-pointer select-none"
                                 @click="open = !open">
                                <i class="ri-arrow-down-s-line transition-transform text-gray-400" :class="!open && '-rotate-90'"></i>
                                <i class="ri-building-2-line text-purple-600"></i>
                                <span class="font-semibold text-gray-800" x-text="dept.name"></span>
                                <span class="text-xs text-gray-400 ml-1" x-text="dept.code ? `(${dept.code})` : ''"></span>
                                <span class="ml-auto bg-purple-100 text-purple-700 text-xs font-bold px-2 py-0.5 rounded-full"
                                      x-text="getDeptEmployeeCount(dept.id) + '명'"></span>
                            </div>

                            <!-- 부서 직원 드롭존 -->
                            <div x-show="open" x-collapse>
                                <div class="dept-drop-zone p-3 min-h-[60px]" :data-department-id="dept.id">
                                    <template x-for="emp in getDeptEmployees(dept.id)" :key="emp.id">
                                        <div class="employee-card inline-flex items-center gap-2 bg-white border border-gray-200 rounded-lg px-3 py-2 mr-2 mb-2 cursor-grab hover:shadow-md hover:border-purple-300 transition"
                                             :data-employee-id="emp.id">
                                            <div class="w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold text-white shrink-0"
                                                 :style="`background-color: ${getAvatarColor(emp.display_name)}`"
                                                 x-text="emp.display_name?.charAt(0) || '?'"></div>
                                            <div class="min-w-0">
                                                <p class="text-sm font-medium text-gray-800 whitespace-nowrap" x-text="emp.display_name"></p>
                                                <p class="text-xs text-gray-400 whitespace-nowrap" x-text="emp.position_label || ''"></p>
                                            </div>
                                            <button class="ml-1 text-gray-300 hover:text-red-500 transition shrink-0" title="미배치로 이동"
                                                    @click.stop="unassignEmployee(emp.id)">
                                                <i class="ri-close-line"></i>
                                            </button>
                                        </div>
                                    </template>
                                    <div x-show="getDeptEmployees(dept.id).length === 0" class="text-center text-gray-300 text-xs py-4">
                                        직원을 여기로 드래그하세요
                                    </div>
                                </div>

                                <!-- 하위 부서 -->
                                <template x-for="child in getChildDepartments(dept.id)" :key="child.id">
                                    <div class="border-t border-gray-100">
                                        <div x-data="{ childOpen: true }">
                                            <div class="flex items-center gap-2 px-6 py-2.5 bg-gray-50 border-b border-gray-100 cursor-pointer select-none"
                                                 @click="childOpen = !childOpen">
                                                <i class="ri-arrow-down-s-line transition-transform text-gray-400 text-sm" :class="!childOpen && '-rotate-90'"></i>
                                                <i class="ri-git-branch-line text-indigo-400 text-sm"></i>
                                                <span class="text-sm font-medium text-gray-700" x-text="child.name"></span>
                                                <span class="text-xs text-gray-400" x-text="child.code ? `(${child.code})` : ''"></span>
                                                <span class="ml-auto bg-indigo-50 text-indigo-600 text-xs font-bold px-2 py-0.5 rounded-full"
                                                      x-text="getDeptEmployeeCount(child.id) + '명'"></span>
                                            </div>
                                            <div x-show="childOpen" x-collapse>
                                                <div class="dept-drop-zone px-6 py-3 min-h-[50px]" :data-department-id="child.id">
                                                    <template x-for="emp in getDeptEmployees(child.id)" :key="emp.id">
                                                        <div class="employee-card inline-flex items-center gap-2 bg-white border border-gray-200 rounded-lg px-3 py-2 mr-2 mb-2 cursor-grab hover:shadow-md hover:border-purple-300 transition"
                                                             :data-employee-id="emp.id">
                                                            <div class="w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold text-white shrink-0"
                                                                 :style="`background-color: ${getAvatarColor(emp.display_name)}`"
                                                                 x-text="emp.display_name?.charAt(0) || '?'"></div>
                                                            <div class="min-w-0">
                                                                <p class="text-sm font-medium text-gray-800 whitespace-nowrap" x-text="emp.display_name"></p>
                                                                <p class="text-xs text-gray-400 whitespace-nowrap" x-text="emp.position_label || ''"></p>
                                                            </div>
                                                            <button class="ml-1 text-gray-300 hover:text-red-500 transition shrink-0" title="미배치로 이동"
                                                                    @click.stop="unassignEmployee(emp.id)">
                                                                <i class="ri-close-line"></i>
                                                            </button>
                                                        </div>
                                                    </template>
                                                    <div x-show="getDeptEmployees(child.id).length === 0" class="text-center text-gray-300 text-xs py-3">
                                                        직원을 여기로 드래그하세요
                                                    </div>
                                                </div>

                                                <!-- 3단계 하위 부서 -->
                                                <template x-for="grandchild in getChildDepartments(child.id)" :key="grandchild.id">
                                                    <div class="border-t border-gray-50">
                                                        <div class="flex items-center gap-2 px-10 py-2 bg-gray-50/50 border-b border-gray-50">
                                                            <i class="ri-corner-down-right-line text-gray-300 text-sm"></i>
                                                            <span class="text-sm text-gray-600" x-text="grandchild.name"></span>
                                                            <span class="ml-auto bg-gray-100 text-gray-500 text-xs font-bold px-2 py-0.5 rounded-full"
                                                                  x-text="getDeptEmployeeCount(grandchild.id) + '명'"></span>
                                                        </div>
                                                        <div class="dept-drop-zone px-10 py-2 min-h-[40px]" :data-department-id="grandchild.id">
                                                            <template x-for="emp in getDeptEmployees(grandchild.id)" :key="emp.id">
                                                                <div class="employee-card inline-flex items-center gap-2 bg-white border border-gray-200 rounded-lg px-3 py-1.5 mr-2 mb-2 cursor-grab hover:shadow-md hover:border-purple-300 transition"
                                                                     :data-employee-id="emp.id">
                                                                    <div class="w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold text-white shrink-0"
                                                                         :style="`background-color: ${getAvatarColor(emp.display_name)}`"
                                                                         x-text="emp.display_name?.charAt(0) || '?'"></div>
                                                                    <span class="text-sm text-gray-800 whitespace-nowrap" x-text="emp.display_name"></span>
                                                                    <button class="text-gray-300 hover:text-red-500 transition shrink-0" title="미배치로 이동"
                                                                            @click.stop="unassignEmployee(emp.id)">
                                                                        <i class="ri-close-line text-sm"></i>
                                                                    </button>
                                                                </div>
                                                            </template>
                                                            <div x-show="getDeptEmployees(grandchild.id).length === 0" class="text-center text-gray-300 text-xs py-2">
                                                                드래그하여 배치
                                                            </div>
                                                        </div>
                                                    </div>
                                                </template>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </div>
                        </div>
                    </div>
                </div>
            </template>

            <div x-show="rootDepartments.length === 0" class="bg-white rounded-lg shadow-sm p-12 text-center text-gray-400">
                <i class="ri-building-2-line text-4xl block mb-2"></i>
                <p>등록된 부서가 없습니다.</p>
                <p class="text-sm mt-1">먼저 부서를 등록해주세요.</p>
            </div>
        </div>
    </div>

    <!-- 저장 중 토스트 -->
    <div x-show="saving" x-transition
         class="fixed bottom-6 right-6 bg-gray-800 text-white px-4 py-2 rounded-lg shadow-lg text-sm flex items-center gap-2 z-50">
        <i class="ri-loader-4-line animate-spin"></i> 저장 중...
    </div>
</div>
@endsection

@push('scripts')
<script>
function orgChart() {
    return {
        departments: @json($departments),
        employees: @json($employees->map(fn($e) => [
            'id' => $e->id,
            'user_id' => $e->user_id,
            'department_id' => $e->department_id,
            'display_name' => $e->display_name ?? $e->user?->name ?? '(이름없음)',
            'position_label' => $e->position_label,
        ])),
        searchUnassigned: '',
        saving: false,
        sortables: [],

        get totalEmployees() { return this.employees.length; },
        get assignedCount() { return this.employees.filter(e => e.department_id).length; },
        get unassignedCount() { return this.employees.filter(e => !e.department_id).length; },
        get unassignedEmployees() { return this.employees.filter(e => !e.department_id); },
        get filteredUnassigned() {
            if (!this.searchUnassigned) return this.unassignedEmployees;
            const s = this.searchUnassigned.toLowerCase();
            return this.unassignedEmployees.filter(e => e.display_name?.toLowerCase().includes(s));
        },
        get rootDepartments() {
            return this.departments.filter(d => !d.parent_id);
        },

        getChildDepartments(parentId) {
            return this.departments.filter(d => d.parent_id === parentId);
        },

        getDeptEmployees(deptId) {
            return this.employees.filter(e => e.department_id === deptId);
        },

        getDeptEmployeeCount(deptId) {
            // 해당 부서 + 하위 부서의 직원 수 합산
            let count = this.employees.filter(e => e.department_id === deptId).length;
            const children = this.departments.filter(d => d.parent_id === deptId);
            for (const child of children) {
                count += this.getDeptEmployeeCount(child.id);
            }
            return count;
        },

        getAvatarColor(name) {
            if (!name) return '#9CA3AF';
            const colors = ['#6366F1','#8B5CF6','#EC4899','#F59E0B','#10B981','#3B82F6','#EF4444','#14B8A6','#F97316','#6D28D9'];
            let hash = 0;
            for (let i = 0; i < name.length; i++) hash = name.charCodeAt(i) + ((hash << 5) - hash);
            return colors[Math.abs(hash) % colors.length];
        },

        init() {
            this.$nextTick(() => this.initSortable());
        },

        initSortable() {
            // 미배치 영역
            const unassignedEl = document.getElementById('unassigned-zone');
            if (unassignedEl) {
                this.sortables.push(new Sortable(unassignedEl, {
                    group: 'org-chart',
                    animation: 150,
                    ghostClass: 'opacity-40',
                    dragClass: 'shadow-lg',
                    onAdd: (evt) => this.handleDrop(evt),
                }));
            }

            // 부서 드롭존 - MutationObserver로 동적 생성 대응
            this.observeAndInitDropZones();
        },

        observeAndInitDropZones() {
            const initZones = () => {
                document.querySelectorAll('.dept-drop-zone').forEach(el => {
                    if (el._sortableInitialized) return;
                    el._sortableInitialized = true;
                    this.sortables.push(new Sortable(el, {
                        group: 'org-chart',
                        animation: 150,
                        ghostClass: 'opacity-40',
                        dragClass: 'shadow-lg',
                        onAdd: (evt) => this.handleDrop(evt),
                    }));
                });
            };

            initZones();

            // Alpine이 DOM을 업데이트할 때 다시 초기화
            const observer = new MutationObserver(() => {
                setTimeout(initZones, 100);
            });
            observer.observe(document.querySelector('[x-data]'), { childList: true, subtree: true });
        },

        handleDrop(evt) {
            const employeeId = parseInt(evt.item.dataset.employeeId);
            const targetDeptId = evt.to.dataset.departmentId;
            const newDeptId = targetDeptId ? parseInt(targetDeptId) : null;

            // 클라이언트 상태 업데이트
            const emp = this.employees.find(e => e.id === employeeId);
            if (emp) {
                emp.department_id = newDeptId;
            }

            // 서버에 저장
            this.saveAssignment(employeeId, newDeptId);
        },

        async saveAssignment(employeeId, departmentId) {
            this.saving = true;
            try {
                const url = departmentId
                    ? '{{ route("rd.org-chart.assign") }}'
                    : '{{ route("rd.org-chart.unassign") }}';

                const body = departmentId
                    ? { employee_id: employeeId, department_id: departmentId }
                    : { employee_id: employeeId };

                await fetch(url, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        'Accept': 'application/json',
                    },
                    body: JSON.stringify(body),
                });
            } catch (e) {
                console.error('조직도 저장 실패:', e);
            } finally {
                this.saving = false;
            }
        },

        async unassignEmployee(empId) {
            const emp = this.employees.find(e => e.id === empId);
            if (emp) {
                emp.department_id = null;
                await this.saveAssignment(empId, null);
            }
        },
    };
}
</script>
@endpush