@extends('layouts.app')

@section('title', '카테고리 관리')

@section('content')
<div class="flex flex-col h-full">
    <!-- 페이지 헤더 -->
    <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-6 flex-shrink-0">
        <div>
            <h1 class="text-2xl font-bold text-gray-800">카테고리 관리</h1>
            <p class="text-sm text-gray-500 mt-1">
                @if($tenant)
                    <span class="inline-flex items-center gap-1">
                        <span class="px-2 py-0.5 bg-blue-100 text-blue-700 rounded text-xs font-medium">{{ $tenant->company_name }}</span>
                        @if($isHQ)
                            <span class="px-2 py-0.5 bg-purple-100 text-purple-700 rounded text-xs font-medium">본사</span>
                        @endif
                        카테고리를 관리합니다.
                    </span>
                @else
                    테넌트별 카테고리를 관리합니다.
                @endif
            </p>
        </div>
        <div class="flex items-center gap-2">
            <a href="{{ route('categories.sync.index') }}"
               class="px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white font-medium rounded-lg transition-colors flex items-center gap-2 text-sm">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
                </svg>
                동기화
            </a>
            @if($tenant)
                <button type="button"
                        onclick="openAddModal()"
                        class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors flex items-center gap-2 text-sm">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                    </svg>
                    카테고리 추가
                </button>
            @endif
        </div>
    </div>

    <!-- 테넌트 미선택 경고 -->
    @if(!$tenant)
        <div class="mb-4 bg-yellow-50 border border-yellow-200 text-yellow-700 px-4 py-3 rounded-lg flex items-center gap-2">
            <svg class="w-5 h-5 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
            </svg>
            헤더에서 테넌트를 선택해주세요.
        </div>
    @else
        <!-- 메인 레이아웃: 좌측 탭 + 우측 콘텐츠 -->
        <div class="flex gap-4 flex-1 min-h-0">
            <!-- 좌측: 코드 그룹 탭 (세로) -->
            <div class="w-44 flex-shrink-0 bg-white rounded-lg shadow-sm overflow-hidden flex flex-col">
                <div class="px-2 py-1.5 bg-gray-50 border-b border-gray-200 flex items-center justify-between flex-shrink-0">
                    <span class="text-[10px] font-semibold text-gray-500 uppercase tracking-wider">코드 그룹</span>
                    <button type="button" onclick="openGroupModal()"
                            class="w-5 h-5 flex items-center justify-center text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded transition-colors"
                            title="그룹 추가">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                        </svg>
                    </button>
                </div>
                <!-- 스코프 필터 -->
                <div class="px-1.5 py-1 border-b border-gray-200 flex flex-wrap gap-0.5 flex-shrink-0">
                    <button type="button" onclick="filterGroups('all')"
                            class="group-filter-btn active text-[10px] px-1.5 py-0.5 rounded font-medium transition-colors bg-gray-700 text-white" data-scope="all">전체</button>
                    <button type="button" onclick="filterGroups('global-tenant')"
                            class="group-filter-btn text-[10px] px-1.5 py-0.5 rounded font-medium transition-colors bg-gray-100 text-gray-600 hover:bg-gray-200" data-scope="global-tenant">글로벌+테넌트</button>
                    <button type="button" onclick="filterGroups('global-based')"
                            class="group-filter-btn text-[10px] px-1.5 py-0.5 rounded font-medium transition-colors bg-gray-100 text-gray-600 hover:bg-gray-200" data-scope="global-based">글로벌</button>
                    <button type="button" onclick="filterGroups('tenant-based')"
                            class="group-filter-btn text-[10px] px-1.5 py-0.5 rounded font-medium transition-colors bg-gray-100 text-gray-600 hover:bg-gray-200" data-scope="tenant-based">테넌트</button>
                </div>
                <nav class="overflow-y-auto flex-1 min-h-0" aria-label="Tabs">
                    @foreach($codeGroups as $group => $label)
                        @php $scope = $groupScopes[$group] ?? 'custom'; @endphp
                        <a href="{{ route('categories.index', ['group' => $group]) }}"
                           data-scope="{{ $scope }}"
                           class="group-item block px-2 py-1.5 border-l-3 transition-colors
                                  {{ $selectedGroup === $group
                                      ? 'border-l-blue-500 bg-blue-50 text-blue-700'
                                      : 'border-l-transparent text-gray-600 hover:bg-gray-50 hover:text-gray-900' }}">
                            <span class="flex items-center gap-1">
                                <span class="block text-xs font-medium truncate flex-1">{{ $label }}</span>
                                @if($scope === 'global')
                                    <span class="w-1.5 h-1.5 rounded-full bg-purple-400 flex-shrink-0" title="글로벌"></span>
                                @elseif($scope === 'both')
                                    <span class="w-1.5 h-1.5 rounded-full bg-green-400 flex-shrink-0" title="글로벌+테넌트"></span>
                                @elseif($scope === 'tenant')
                                    <span class="w-1.5 h-1.5 rounded-full bg-blue-400 flex-shrink-0" title="테넌트"></span>
                                @else
                                    <span class="w-1.5 h-1.5 rounded-full bg-gray-300 flex-shrink-0" title="빈 그룹"></span>
                                @endif
                            </span>
                            <span class="block text-[10px] font-mono {{ $selectedGroup === $group ? 'text-blue-400' : 'text-gray-400' }} truncate">{{ $group }}</span>
                        </a>
                    @endforeach
                </nav>
            </div>

            <!-- 우측: 카테고리 목록 -->
            <div class="flex-1 grid grid-cols-1 lg:grid-cols-2 gap-4 min-w-0">
            <!-- 글로벌 카테고리 -->
            <div class="bg-white rounded-lg shadow-sm flex flex-col overflow-hidden" style="max-height: calc(100vh - 180px)">
                <div class="px-4 py-3 border-b border-gray-200 flex items-center justify-between">
                    <div class="flex items-center gap-2">
                        @if($globalCategories->count() > 0)
                            <input type="checkbox" id="selectAllGlobal" onchange="toggleSelectAllGlobal(this)"
                                   class="w-4 h-4 rounded text-green-600 border-gray-300 focus:ring-green-500">
                        @endif
                        <span class="w-6 h-6 bg-purple-100 rounded flex items-center justify-center">
                            <svg class="w-4 h-4 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                        </span>
                        <h3 class="font-semibold text-gray-800">글로벌 카테고리</h3>
                        <span class="text-xs text-gray-500">({{ $globalCategories->count() }})</span>
                    </div>
                    <div class="flex items-center gap-2">
                        @if($globalCategories->count() > 0)
                            <button type="button"
                                    id="bulkCopyBtn"
                                    onclick="bulkCopy()"
                                    class="hidden px-3 py-1.5 bg-green-600 hover:bg-green-700 text-white text-xs font-medium rounded-lg transition-colors items-center gap-1">
                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                                </svg>
                                <span id="bulkCopyCount">0</span>개 선택 복사
                            </button>
                        @endif
                        @if(!$isHQ)
                            <span class="text-xs text-gray-400">본사만 편집 가능</span>
                        @endif
                    </div>
                </div>
                <div class="overflow-auto flex-1 min-h-0 p-2">
                    @forelse($globalCategories as $cat)
                        @php
                            $existsInTenant = in_array($cat->code, $tenantCodes);
                        @endphp
                        <div class="border rounded-lg mb-1 {{ !$cat->is_active ? 'opacity-50 bg-gray-50' : ($existsInTenant ? 'hover:bg-gray-50' : 'bg-green-50 hover:bg-green-100') }}" style="margin-left: {{ $cat->depth * 1.5 }}rem">
                            <div class="flex items-center gap-2 px-3 py-2">
                                <input type="checkbox" name="global_ids[]" value="{{ $cat->id }}"
                                       onchange="updateBulkCopyButton()"
                                       class="global-checkbox w-4 h-4 rounded focus:ring-green-500 {{ $existsInTenant ? 'bg-gray-200 border-gray-300 cursor-not-allowed' : 'text-green-600 border-gray-300' }}"
                                       {{ $existsInTenant ? 'disabled' : '' }}>
                                <span class="font-mono text-xs bg-gray-100 px-1.5 py-0.5 rounded text-gray-600">{{ $cat->code }}</span>
                                <span class="flex-1 text-sm {{ $cat->depth > 0 ? 'text-gray-600' : 'font-medium text-gray-800' }}">{{ $cat->name }}</span>
                                @if($cat->depth > 0)
                                    <span class="text-[10px] text-gray-400 bg-gray-100 px-1 rounded">Lv.{{ $cat->depth + 1 }}</span>
                                @endif
                                @if($existsInTenant)
                                    <span class="text-[10px] text-blue-600 bg-blue-100 px-1.5 py-0.5 rounded font-medium">복사됨</span>
                                @else
                                    <span class="text-[10px] text-green-600 bg-green-100 px-1.5 py-0.5 rounded font-medium">NEW</span>
                                @endif
                                <span class="text-xs text-gray-400">{{ $cat->sort_order }}</span>
                                @if($isHQ)
                                    <button type="button"
                                            onclick="toggleGlobalActive({{ $cat->id }})"
                                            class="relative inline-flex h-4 w-7 items-center rounded-full transition-colors {{ $cat->is_active ? 'bg-green-500' : 'bg-gray-300' }}">
                                        <span class="inline-block h-3 w-3 transform rounded-full bg-white transition-transform {{ $cat->is_active ? 'translate-x-3' : 'translate-x-0.5' }}"></span>
                                    </button>
                                @else
                                    <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs {{ $cat->is_active ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500' }}">
                                        {{ $cat->is_active ? 'ON' : 'OFF' }}
                                    </span>
                                @endif
                                <div class="flex items-center gap-1">
                                    @if($isHQ)
                                        <button type="button" onclick="openEditGlobalModal({{ $cat->id }})" class="p-1 text-gray-400 hover:text-blue-600" title="수정">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /></svg>
                                        </button>
                                    @endif
                                    <button type="button" onclick="copyToTenant({{ $cat->id }})" class="p-1 text-gray-400 hover:text-green-600" title="테넌트로 복사">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
                                    </button>
                                    @if($isHQ)
                                        <button type="button" onclick="deleteGlobalCategory({{ $cat->id }}, '{{ $cat->name }}')" class="p-1 text-gray-400 hover:text-red-600" title="삭제">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
                                        </button>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="text-center text-gray-400 py-8">글로벌 카테고리가 없습니다.</div>
                    @endforelse
                </div>
            </div>

            <!-- 테넌트 카테고리 -->
            <div class="bg-white rounded-lg shadow-sm flex flex-col overflow-hidden" style="max-height: calc(100vh - 180px)">
                <div class="px-4 py-3 border-b border-gray-200 flex items-center justify-between">
                    <div class="flex items-center gap-2">
                        @if($tenantCategories->count() > 0 && ($isHQ || auth()->user()?->isSuperAdmin()))
                            <input type="checkbox" id="selectAllTenant" onchange="toggleSelectAllTenant(this)"
                                   class="w-4 h-4 rounded text-purple-600 border-gray-300 focus:ring-purple-500">
                        @endif
                        <span class="w-6 h-6 bg-blue-100 rounded flex items-center justify-center">
                            <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                            </svg>
                        </span>
                        <h3 class="font-semibold text-gray-800">테넌트 카테고리</h3>
                        <span class="text-xs text-gray-500">({{ $tenantCategories->count() }})</span>
                    </div>
                    <div class="flex items-center gap-2">
                        @if($tenantCategories->count() > 0 && ($isHQ || auth()->user()?->isSuperAdmin()))
                            <button type="button"
                                    id="bulkPromoteBtn"
                                    onclick="bulkPromoteToGlobal()"
                                    class="hidden px-3 py-1.5 bg-purple-600 hover:bg-purple-700 text-white text-xs font-medium rounded-lg transition-colors flex items-center gap-1">
                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                                <span id="bulkPromoteCount">0</span>개 글로벌로 복사
                            </button>
                        @endif
                    </div>
                </div>
                <div class="overflow-auto flex-1 min-h-0 p-2">
                    @forelse($tenantCategories as $cat)
                        @php $existsInGlobal = in_array($cat->code, $globalCodes); @endphp
                        <div class="border rounded-lg mb-1 {{ !$cat->is_active ? 'opacity-50 bg-gray-50' : 'hover:bg-blue-50' }}" style="margin-left: {{ $cat->depth * 1.5 }}rem">
                            <div class="flex items-center gap-2 px-3 py-2">
                                @if($isHQ || auth()->user()?->isSuperAdmin())
                                    <input type="checkbox" name="tenant_cat_ids[]" value="{{ $cat->id }}"
                                           onchange="updateBulkPromoteBtn()"
                                           class="tenant-cat-checkbox w-4 h-4 rounded focus:ring-purple-500 {{ $existsInGlobal ? 'bg-gray-200 border-gray-300 cursor-not-allowed' : 'text-purple-600 border-gray-300' }}"
                                           {{ $existsInGlobal ? 'disabled' : '' }}>
                                @endif
                                <span class="font-mono text-xs bg-blue-50 text-blue-700 px-1.5 py-0.5 rounded">{{ $cat->code }}</span>
                                <span class="flex-1 text-sm {{ $cat->depth > 0 ? 'text-gray-600' : 'font-medium text-gray-800' }}">{{ $cat->name }}</span>
                                @if($cat->depth > 0)
                                    <span class="text-[10px] text-blue-400 bg-blue-50 px-1 rounded">Lv.{{ $cat->depth + 1 }}</span>
                                @endif
                                <span class="text-xs text-gray-400">{{ $cat->sort_order }}</span>
                                <button type="button"
                                        onclick="toggleTenantActive({{ $cat->id }})"
                                        class="relative inline-flex h-4 w-7 items-center rounded-full transition-colors {{ $cat->is_active ? 'bg-green-500' : 'bg-gray-300' }}">
                                    <span class="inline-block h-3 w-3 transform rounded-full bg-white transition-transform {{ $cat->is_active ? 'translate-x-3' : 'translate-x-0.5' }}"></span>
                                </button>
                                <div class="flex items-center gap-1">
                                    <button type="button" onclick="openEditModal({{ $cat->id }})" class="p-1 text-gray-400 hover:text-blue-600" title="수정">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /></svg>
                                    </button>
                                    <button type="button" onclick="deleteTenantCategory({{ $cat->id }}, '{{ $cat->name }}')" class="p-1 text-gray-400 hover:text-red-600" title="삭제">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
                                    </button>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="text-center text-gray-400 py-8">
                            테넌트 카테고리가 없습니다.<br>
                            <span class="text-xs">글로벌 카테고리를 복사하거나 새로 추가하세요.</span>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>
        </div>
    @endif
</div>

<!-- 카테고리 추가/수정 모달 -->
<div id="categoryModal" class="fixed inset-0 bg-black/50 hidden items-center justify-center z-50">
    <div class="bg-white rounded-lg shadow-xl w-full max-w-md mx-4">
        <form id="categoryForm" onsubmit="saveCategory(event)">
            <input type="hidden" id="categoryId" value="">
            <input type="hidden" id="categoryType" value="tenant">

            <div class="px-6 py-4 border-b border-gray-200">
                <h3 id="modalTitle" class="text-lg font-semibold text-gray-800">카테고리 추가</h3>
            </div>

            <div class="px-6 py-4 space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">코드 *</label>
                    <input type="text" id="categoryCode" required
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                           placeholder="예: ELEVATOR">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">이름 *</label>
                    <input type="text" id="categoryName" required
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                           placeholder="예: 엘리베이터">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">상위 카테고리</label>
                    <select id="categoryParentId"
                            class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        <option value="">최상위 카테고리</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">정렬 순서</label>
                    <input type="number" id="categorySortOrder" value="1" min="0" max="9999"
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">설명</label>
                    <textarea id="categoryDescription" rows="2"
                              class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                              placeholder="카테고리 설명 (선택)"></textarea>
                </div>
                @if($isHQ)
                    <div class="flex items-center gap-2">
                        <input type="checkbox" id="isGlobal" value="1"
                               class="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500">
                        <label for="isGlobal" class="text-sm text-gray-700">글로벌 카테고리로 생성</label>
                    </div>
                @endif
            </div>

            <div class="px-6 py-4 border-t border-gray-200 flex justify-end gap-3">
                <button type="button" onclick="closeModal()"
                        class="px-4 py-2 text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg text-sm font-medium transition-colors">
                    취소
                </button>
                <button type="submit"
                        class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium transition-colors">
                    저장
                </button>
            </div>
        </form>
    </div>
</div>

<!-- 코드 그룹 추가 모달 -->
<div id="groupModal" class="fixed inset-0 bg-black/50 hidden items-center justify-center z-50">
    <div class="bg-white rounded-lg shadow-xl w-full max-w-sm mx-4">
        <form action="{{ route('categories.store-group') }}" method="POST">
            @csrf
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-semibold text-gray-800">코드 그룹 추가</h3>
            </div>

            <div class="px-6 py-4 space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">그룹 코드 *</label>
                    <input type="text" name="group_code" required
                           pattern="[a-z][a-z0-9_]*" maxlength="50"
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm font-mono focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                           placeholder="예: shipping_cost">
                    <p class="mt-1 text-xs text-gray-400">영문 소문자, 숫자, 언더스코어만 사용</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">그룹명 *</label>
                    <input type="text" name="group_label" required maxlength="50"
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                           placeholder="예: 배송비 유형">
                </div>
            </div>

            <div class="px-6 py-4 border-t border-gray-200 flex justify-end gap-3">
                <button type="button" onclick="closeGroupModal()"
                        class="px-4 py-2 text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg text-sm font-medium transition-colors">
                    취소
                </button>
                <button type="submit"
                        class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium transition-colors">
                    추가
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
    const selectedGroup = '{{ $selectedGroup }}';
    const csrfToken = '{{ csrf_token() }}';

    // 그룹 스코프 필터
    function filterGroups(filter) {
        const items = document.querySelectorAll('.group-item');
        items.forEach(item => {
            const scope = item.dataset.scope;
            let show = false;
            switch (filter) {
                case 'all':
                    show = true;
                    break;
                case 'global-tenant':
                    show = (scope === 'global' || scope === 'both' || scope === 'tenant');
                    break;
                case 'global-based':
                    show = (scope === 'global' || scope === 'both');
                    break;
                case 'tenant-based':
                    show = (scope === 'tenant' || scope === 'both');
                    break;
            }
            item.style.display = show ? '' : 'none';
        });

        document.querySelectorAll('.group-filter-btn').forEach(btn => {
            if (btn.dataset.scope === filter) {
                btn.className = 'group-filter-btn text-[10px] px-1.5 py-0.5 rounded font-medium transition-colors bg-gray-700 text-white';
            } else {
                btn.className = 'group-filter-btn text-[10px] px-1.5 py-0.5 rounded font-medium transition-colors bg-gray-100 text-gray-600 hover:bg-gray-200';
            }
        });
    }

    // 그룹 모달
    function openGroupModal() {
        document.getElementById('groupModal').classList.remove('hidden');
        document.getElementById('groupModal').classList.add('flex');
    }

    function closeGroupModal() {
        document.getElementById('groupModal').classList.add('hidden');
        document.getElementById('groupModal').classList.remove('flex');
    }

    // 모달 열기 (추가)
    function openAddModal() {
        document.getElementById('modalTitle').textContent = '카테고리 추가';
        document.getElementById('categoryId').value = '';
        document.getElementById('categoryType').value = 'tenant';
        document.getElementById('categoryCode').value = '';
        document.getElementById('categoryCode').disabled = false;
        document.getElementById('categoryName').value = '';
        document.getElementById('categoryParentId').value = '';
        document.getElementById('categorySortOrder').value = '1';
        document.getElementById('categoryDescription').value = '';
        if (document.getElementById('isGlobal')) {
            document.getElementById('isGlobal').checked = false;
        }
        loadParentOptions('tenant');
        openModal();
    }

    // 모달 열기 (수정 - 테넌트)
    function openEditModal(id) {
        fetch(`/api/admin/categories/${id}`, {
            headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrfToken }
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                const cat = data.data;
                document.getElementById('modalTitle').textContent = '카테고리 수정';
                document.getElementById('categoryId').value = cat.id;
                document.getElementById('categoryType').value = 'tenant';
                document.getElementById('categoryCode').value = cat.code;
                document.getElementById('categoryCode').disabled = true;
                document.getElementById('categoryName').value = cat.name;
                document.getElementById('categorySortOrder').value = cat.sort_order || 1;
                document.getElementById('categoryDescription').value = cat.description || '';
                if (document.getElementById('isGlobal')) {
                    document.getElementById('isGlobal').checked = false;
                    document.getElementById('isGlobal').disabled = true;
                }
                loadParentOptions('tenant', cat.parent_id);
                openModal();
            }
        });
    }

    // 모달 열기 (수정 - 글로벌)
    function openEditGlobalModal(id) {
        fetch(`/api/admin/global-categories/${id}`, {
            headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrfToken }
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                const cat = data.data;
                document.getElementById('modalTitle').textContent = '글로벌 카테고리 수정';
                document.getElementById('categoryId').value = cat.id;
                document.getElementById('categoryType').value = 'global';
                document.getElementById('categoryCode').value = cat.code;
                document.getElementById('categoryCode').disabled = true;
                document.getElementById('categoryName').value = cat.name;
                document.getElementById('categorySortOrder').value = cat.sort_order || 1;
                document.getElementById('categoryDescription').value = cat.description || '';
                if (document.getElementById('isGlobal')) {
                    document.getElementById('isGlobal').checked = true;
                    document.getElementById('isGlobal').disabled = true;
                }
                loadParentOptions('global', cat.parent_id);
                openModal();
            }
        });
    }

    function openModal() {
        document.getElementById('categoryModal').classList.remove('hidden');
        document.getElementById('categoryModal').classList.add('flex');
    }

    function closeModal() {
        document.getElementById('categoryModal').classList.add('hidden');
        document.getElementById('categoryModal').classList.remove('flex');
        if (document.getElementById('isGlobal')) {
            document.getElementById('isGlobal').disabled = false;
        }
        document.getElementById('categoryCode').disabled = false;
    }

    // 상위 카테고리 옵션 로드
    function loadParentOptions(type, selectedId = null) {
        const select = document.getElementById('categoryParentId');
        const url = type === 'global'
            ? `/api/admin/global-categories/list?code_group=${selectedGroup}`
            : `/api/admin/categories/list?code_group=${selectedGroup}`;

        fetch(url, { headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrfToken } })
        .then(r => r.json())
        .then(data => {
            select.innerHTML = '<option value="">최상위 카테고리</option>';
            if (data.success && data.data) {
                data.data.forEach(cat => {
                    const opt = document.createElement('option');
                    opt.value = cat.id;
                    opt.textContent = (cat.parent_id ? 'ㄴ ' : '') + cat.name;
                    if (cat.id == selectedId) opt.selected = true;
                    select.appendChild(opt);
                });
            }
        });
    }

    // 저장
    function saveCategory(event) {
        event.preventDefault();

        const id = document.getElementById('categoryId').value;
        const isEdit = !!id;
        const isGlobal = document.getElementById('isGlobal')?.checked ||
                        document.getElementById('categoryType').value === 'global';

        const data = {
            code_group: selectedGroup,
            code: document.getElementById('categoryCode').value,
            name: document.getElementById('categoryName').value,
            parent_id: document.getElementById('categoryParentId').value || null,
            sort_order: parseInt(document.getElementById('categorySortOrder').value) || 1,
            description: document.getElementById('categoryDescription').value || null,
        };

        let url, method;
        if (isGlobal) {
            url = isEdit ? `/api/admin/global-categories/${id}` : '/api/admin/global-categories';
        } else {
            url = isEdit ? `/api/admin/categories/${id}` : '/api/admin/categories';
        }
        method = isEdit ? 'PUT' : 'POST';

        fetch(url, {
            method: method,
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken,
                'Accept': 'application/json'
            },
            body: JSON.stringify(data)
        })
        .then(r => r.json())
        .then(result => {
            if (result.success) {
                showToast(result.message || '저장되었습니다.', 'success');
                closeModal();
                location.reload();
            } else {
                showToast(result.message || '저장에 실패했습니다.', 'error');
            }
        })
        .catch(() => showToast('저장 중 오류가 발생했습니다.', 'error'));
    }

    // 글로벌 → 테넌트 복사
    function copyToTenant(globalId) {
        if (!confirm('이 글로벌 카테고리를 테넌트로 복사하시겠습니까?')) return;

        fetch(`/api/admin/global-categories/${globalId}/copy-to-tenant`, {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' }
        })
        .then(r => r.json())
        .then(result => {
            if (result.success) {
                showToast(result.message || '복사되었습니다.', 'success');
                location.reload();
            } else {
                showToast(result.message || '복사에 실패했습니다.', 'error');
            }
        })
        .catch(() => showToast('복사 중 오류가 발생했습니다.', 'error'));
    }

    // 벌크 글로벌 복사 버튼 상태 업데이트
    function updateBulkPromoteBtn() {
        const checked = document.querySelectorAll('.tenant-cat-checkbox:checked');
        const btn = document.getElementById('bulkPromoteBtn');
        if (btn) {
            if (checked.length > 0) {
                btn.classList.remove('hidden');
                btn.classList.add('flex');
                document.getElementById('bulkPromoteCount').textContent = checked.length;
            } else {
                btn.classList.add('hidden');
                btn.classList.remove('flex');
            }
        }
    }

    // 벌크 테넌트 → 글로벌 복사
    function bulkPromoteToGlobal() {
        const ids = Array.from(document.querySelectorAll('.tenant-cat-checkbox:checked')).map(cb => cb.value);
        if (ids.length === 0) return;

        if (!confirm(`선택한 ${ids.length}개 테넌트 카테고리를 글로벌로 복사하시겠습니까?`)) return;

        let completed = 0, failed = 0, skipped = 0;
        const promises = ids.map(id =>
            fetch(`/api/admin/categories/${id}/promote-to-global`, {
                method: 'POST',
                headers: { 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' }
            })
            .then(r => r.json())
            .then(result => {
                if (result.success) completed++;
                else skipped++;
            })
            .catch(() => failed++)
        );

        Promise.all(promises).then(() => {
            let msg = `완료: ${completed}개 복사`;
            if (skipped > 0) msg += `, ${skipped}개 건너뜀`;
            if (failed > 0) msg += `, ${failed}개 실패`;
            showToast(msg, failed > 0 ? 'error' : 'success');
            location.reload();
        });
    }

    // 전체 선택
    function toggleSelectAll(checkbox) {
        document.querySelectorAll('.global-checkbox').forEach(cb => cb.checked = checkbox.checked);
        updateBulkCopyButton();
    }

    function toggleSelectAllGlobal(master) {
        const checkboxes = document.querySelectorAll('.global-checkbox:not(:disabled)');
        checkboxes.forEach(cb => cb.checked = master.checked);
        updateBulkCopyButton();
    }

    function toggleSelectAllTenant(master) {
        const checkboxes = document.querySelectorAll('.tenant-cat-checkbox:not(:disabled)');
        checkboxes.forEach(cb => cb.checked = master.checked);
        updateBulkPromoteBtn();
    }

    function updateBulkCopyButton() {
        const checked = document.querySelectorAll('.global-checkbox:checked');
        const btn = document.getElementById('bulkCopyBtn');
        if (btn) {
            if (checked.length > 0) {
                btn.classList.remove('hidden');
                btn.classList.add('flex');
                document.getElementById('bulkCopyCount').textContent = checked.length;
            } else {
                btn.classList.add('hidden');
                btn.classList.remove('flex');
            }
        }
    }

    // 일괄 복사
    function bulkCopy() {
        const ids = Array.from(document.querySelectorAll('.global-checkbox:checked')).map(cb => cb.value);
        if (ids.length === 0) return;

        if (!confirm(`선택한 ${ids.length}개 글로벌 카테고리를 테넌트로 복사하시겠습니까?`)) return;

        fetch('/api/admin/global-categories/bulk-copy-to-tenant', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken,
                'Accept': 'application/json'
            },
            body: JSON.stringify({ ids: ids })
        })
        .then(r => r.json())
        .then(result => {
            if (result.success) {
                showToast(result.message || '복사되었습니다.', 'success');
                location.reload();
            } else {
                showToast(result.message || '복사에 실패했습니다.', 'error');
            }
        })
        .catch(() => showToast('복사 중 오류가 발생했습니다.', 'error'));
    }

    // 활성 토글 (테넌트)
    function toggleTenantActive(id) {
        fetch(`/api/admin/categories/${id}/toggle`, {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' }
        })
        .then(r => r.json())
        .then(result => {
            if (result.success) location.reload();
            else showToast(result.message || '상태 변경에 실패했습니다.', 'error');
        });
    }

    // 활성 토글 (글로벌)
    function toggleGlobalActive(id) {
        fetch(`/api/admin/global-categories/${id}/toggle`, {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' }
        })
        .then(r => r.json())
        .then(result => {
            if (result.success) location.reload();
            else showToast(result.message || '상태 변경에 실패했습니다.', 'error');
        });
    }

    // 삭제 (테넌트)
    function deleteTenantCategory(id, name) {
        showDeleteConfirm(name, () => {
            fetch(`/api/admin/categories/${id}`, {
                method: 'DELETE',
                headers: { 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' }
            })
            .then(r => r.json())
            .then(result => {
                if (result.success) {
                    showToast(result.message || '삭제되었습니다.', 'success');
                    location.reload();
                } else {
                    showToast(result.message || '삭제에 실패했습니다.', 'error');
                }
            });
        });
    }

    // 삭제 (글로벌)
    function deleteGlobalCategory(id, name) {
        showDeleteConfirm(name, () => {
            fetch(`/api/admin/global-categories/${id}`, {
                method: 'DELETE',
                headers: { 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' }
            })
            .then(r => r.json())
            .then(result => {
                if (result.success) {
                    showToast(result.message || '삭제되었습니다.', 'success');
                    location.reload();
                } else {
                    showToast(result.message || '삭제에 실패했습니다.', 'error');
                }
            });
        });
    }

    // 모달 외부 클릭 시 닫기
    document.getElementById('categoryModal').addEventListener('click', function(e) {
        if (e.target === this) closeModal();
    });
    document.getElementById('groupModal').addEventListener('click', function(e) {
        if (e.target === this) closeGroupModal();
    });

    // ESC 키로 모달 닫기
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            closeModal();
            closeGroupModal();
        }
    });
</script>
@endpush