@if(isset($error))
    <div class="p-8 text-center">
        <div class="text-yellow-600 mb-2">
            <svg class="w-12 h-12 mx-auto" 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>
        <p class="text-gray-600">{{ $error }}</p>
    </div>
@elseif($fields->isEmpty())
    <div class="p-8 text-center text-gray-500">
        <div class="mb-2">
            <svg class="w-12 h-12 mx-auto text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
            </svg>
        </div>
        <p>등록된 필드가 없습니다.</p>
        <p class="text-xs mt-1">시스템 필드 시딩 또는 커스텀 필드 추가를 해보세요.</p>
    </div>
@else
    <!-- 선택 삭제 버튼 영역 -->
    <div id="bulk-actions" class="hidden px-4 py-3 bg-red-50 border-b border-red-200 flex items-center justify-between">
        <div class="flex items-center gap-2">
            <span class="text-sm text-red-700">
                <span id="selected-count">0</span>개 선택됨
            </span>
        </div>
        <div class="flex items-center gap-2">
            <button onclick="clearSelection()" class="px-3 py-1.5 text-sm text-gray-600 hover:text-gray-800">
                선택 해제
            </button>
            <button onclick="deleteSelectedFields()" class="px-3 py-1.5 bg-red-600 hover:bg-red-700 text-white text-sm rounded-lg flex items-center gap-1">
                <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 class="overflow-x-auto">
        <table class="w-full">
            <thead class="bg-gray-50 border-b border-gray-200">
                <tr>
                    <th class="px-2 py-3 text-center w-10">
                        <input type="checkbox" id="select-all-fields" onchange="toggleSelectAll(this)"
                               class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                    </th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-8"></th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">상태</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">유형</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">소스 테이블</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">필드 키</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">필드명</th>
                    <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">타입</th>
                    <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">필수</th>
                    <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">설정</th>
                    <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">액션</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-200">
                @foreach($fields as $field)
                @php
                    $isSystemField = $field->is_common || $field->storage_type === 'column';
                    $isDeleted = !is_null($field->deleted_at);
                    $hasOptions = !empty($field->options);
                    $hasProperties = !empty($field->properties);
                    $hasValidation = !empty($field->validation_rules);
                    $hasDisplayCondition = !empty($field->display_condition);
                    $hasAnyJson = $hasOptions || $hasProperties || $hasValidation || $hasDisplayCondition;
                    // 모델에서 이미 캐스팅된 경우 배열, 아니면 문자열
                    $optionsData = $hasOptions ? (is_array($field->options) ? $field->options : json_decode($field->options, true)) : null;
                    $propertiesData = $hasProperties ? (is_array($field->properties) ? $field->properties : json_decode($field->properties, true)) : null;
                    $validationData = $hasValidation ? (is_array($field->validation_rules) ? $field->validation_rules : json_decode($field->validation_rules, true)) : null;
                    $displayConditionData = $hasDisplayCondition ? (is_array($field->display_condition) ? $field->display_condition : json_decode($field->display_condition, true)) : null;
                @endphp
                <!-- 메인 Row -->
                <tr class="hover:bg-gray-50 {{ $isDeleted ? 'bg-red-50/50' : ($isSystemField ? 'bg-blue-50/30' : '') }} {{ !$field->is_active ? 'opacity-50' : '' }} {{ $hasAnyJson ? 'cursor-pointer' : '' }}"
                    @if($hasAnyJson) onclick="toggleAccordion({{ $field->id }})" @endif>
                    <!-- 체크박스 -->
                    <td class="px-2 py-3 text-center" onclick="event.stopPropagation()">
                        <input type="checkbox" name="field_ids[]" value="{{ $field->id }}" onchange="updateBulkActions()"
                               class="field-checkbox w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                    </td>
                    <!-- 펼침 아이콘 -->
                    <td class="px-2 py-3 text-center">
                        @if($hasAnyJson)
                            <svg id="chevron-{{ $field->id }}" class="w-4 h-4 text-gray-400 transform transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                            </svg>
                        @endif
                    </td>
                    <!-- 상태 (활성/비활성, 잠금, 삭제됨) -->
                    <td class="px-4 py-3">
                        <div class="flex items-center gap-1">
                            @if($isDeleted)
                                <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-red-100 text-red-700">
                                    삭제됨
                                </span>
                            @elseif($field->is_active)
                                <span class="w-2 h-2 bg-green-500 rounded-full" title="활성"></span>
                            @else
                                <span class="w-2 h-2 bg-gray-400 rounded-full" title="비활성"></span>
                            @endif
                            @if($field->is_locked)
                                <svg class="w-4 h-4 text-orange-500" fill="currentColor" viewBox="0 0 20 20" title="잠금됨">
                                    <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
                                </svg>
                            @endif
                        </div>
                    </td>
                    <!-- 필드 유형 (시스템/커스텀) -->
                    <td class="px-4 py-3">
                        @if($isSystemField)
                            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                시스템
                            </span>
                        @else
                            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                커스텀
                            </span>
                        @endif
                    </td>
                    <!-- 소스 테이블 -->
                    <td class="px-4 py-3">
                        @if(empty($field->source_table))
                            <span class="text-gray-400 text-xs">미지정</span>
                        @else
                            <code class="text-xs font-mono text-gray-700 bg-gray-100 px-1.5 py-0.5 rounded">{{ $field->source_table }}</code>
                        @endif
                    </td>
                    <!-- 필드 키 -->
                    <td class="px-4 py-3">
                        @if(empty($field->field_key))
                            <span class="text-gray-400 text-xs">미지정</span>
                        @else
                            <code class="text-xs font-mono text-gray-700 bg-gray-100 px-1.5 py-0.5 rounded">{{ $field->field_key }}</code>
                        @endif
                    </td>
                    <!-- 필드명 -->
                    <td class="px-4 py-3">
                        <div class="font-medium text-gray-900 text-sm">
                            {{ $field->field_name }}
                            @if($field->is_required)
                                <span class="text-red-500">*</span>
                            @endif
                        </div>
                        @if($field->description)
                            <div class="text-xs text-gray-500 truncate max-w-[150px]" title="{{ $field->description }}">
                                {{ $field->description }}
                            </div>
                        @endif
                    </td>
                    <!-- 타입 -->
                    <td class="px-4 py-3 text-center">
                        @php
                            $typeLabels = [
                                'textbox' => ['label' => '텍스트', 'color' => 'gray'],
                                'number' => ['label' => '숫자', 'color' => 'blue'],
                                'dropdown' => ['label' => '드롭다운', 'color' => 'purple'],
                                'checkbox' => ['label' => '체크박스', 'color' => 'green'],
                                'date' => ['label' => '날짜', 'color' => 'orange'],
                                'textarea' => ['label' => '텍스트영역', 'color' => 'gray'],
                            ];
                            $typeInfo = $typeLabels[$field->field_type] ?? ['label' => $field->field_type, 'color' => 'gray'];
                        @endphp
                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-{{ $typeInfo['color'] }}-100 text-{{ $typeInfo['color'] }}-700">
                            {{ $typeInfo['label'] }}
                        </span>
                    </td>
                    <!-- 필수 여부 -->
                    <td class="px-4 py-3 text-center">
                        @if($field->is_required)
                            <svg class="w-4 h-4 inline text-green-600" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                            </svg>
                        @else
                            <span class="text-gray-300">-</span>
                        @endif
                    </td>
                    <!-- 설정 (options, properties, validation, display_condition) -->
                    <td class="px-4 py-3 text-center">
                        <div class="flex items-center justify-center gap-1">
                            @if($hasOptions)
                                <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-700">
                                    옵션
                                </span>
                            @endif
                            @if($hasProperties)
                                <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-cyan-100 text-cyan-700">
                                    속성
                                </span>
                            @endif
                            @if($hasValidation)
                                <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-yellow-100 text-yellow-700">
                                    검증
                                </span>
                            @endif
                            @if($hasDisplayCondition)
                                <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-pink-100 text-pink-700">
                                    조건
                                </span>
                            @endif
                            @if(!$hasAnyJson)
                                <span class="text-gray-300 text-xs">-</span>
                            @endif
                        </div>
                    </td>
                    <!-- 액션 -->
                    <td class="px-4 py-3 text-right" onclick="event.stopPropagation()">
                        <div class="flex justify-end gap-1">
                            <button onclick="openDetailModal({{ json_encode($field) }})"
                                    class="text-gray-500 hover:text-gray-700 p-1" 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="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                </svg>
                            </button>
                            @if($isDeleted)
                                <button onclick="restoreCustomField({{ $field->id }}, '{{ $field->field_name }}')"
                                        class="text-green-600 hover:text-green-800 p-1" 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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                                    </svg>
                                </button>
                                <button onclick="forceDeleteCustomField({{ $field->id }}, '{{ $field->field_name }}')"
                                        class="text-red-600 hover:text-red-800 p-1" 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="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>
                                </button>
                            @else
                                <button onclick="openEditModal({{ json_encode($field) }})"
                                        class="text-blue-600 hover:text-blue-800 p-1" 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 onclick="deleteCustomField({{ $field->id }}, '{{ $field->field_name }}')"
                                        class="text-red-600 hover:text-red-800 p-1" 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>
                    </td>
                </tr>
                <!-- 아코디언 Row (JSON 상세) -->
                @if($hasAnyJson)
                <tr id="accordion-{{ $field->id }}" class="hidden bg-gray-50">
                    <td colspan="11" class="px-4 py-4">
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                            {{-- Options --}}
                            @if($hasOptions)
                            <div class="bg-white rounded-lg border border-purple-200 overflow-hidden">
                                <div class="bg-purple-50 px-3 py-2 border-b border-purple-200">
                                    <span class="text-xs font-semibold text-purple-700">옵션 (Options)</span>
                                </div>
                                <div class="p-3">
                                    @if(is_array($optionsData) && !empty($optionsData))
                                        @if(isset($optionsData[0]) && is_array($optionsData[0]))
                                            {{-- 배열 형태: [{label, value}, ...] --}}
                                            <table class="w-full text-xs">
                                                <thead>
                                                    <tr class="border-b">
                                                        <th class="text-left py-1 text-gray-500 font-medium">Label</th>
                                                        <th class="text-left py-1 text-gray-500 font-medium">Value</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach($optionsData as $opt)
                                                        <tr class="border-b border-gray-100 last:border-0">
                                                            <td class="py-1.5 text-gray-700">{{ $opt['label'] ?? '-' }}</td>
                                                            <td class="py-1.5 font-mono text-gray-600">{{ $opt['value'] ?? '-' }}</td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        @else
                                            {{-- Key-Value 객체 형태 --}}
                                            @include('item-fields.partials._key-value-table', ['data' => $optionsData])
                                        @endif
                                    @else
                                        <span class="text-xs text-gray-400">데이터 없음</span>
                                    @endif
                                </div>
                            </div>
                            @endif

                            {{-- Properties --}}
                            @if($hasProperties)
                            <div class="bg-white rounded-lg border border-cyan-200 overflow-hidden">
                                <div class="bg-cyan-50 px-3 py-2 border-b border-cyan-200">
                                    <span class="text-xs font-semibold text-cyan-700">속성 (Properties)</span>
                                </div>
                                <div class="p-3">
                                    @if(is_array($propertiesData) && !empty($propertiesData))
                                        @include('item-fields.partials._key-value-table', ['data' => $propertiesData])
                                    @else
                                        <span class="text-xs text-gray-400">데이터 없음</span>
                                    @endif
                                </div>
                            </div>
                            @endif

                            {{-- Validation Rules --}}
                            @if($hasValidation)
                            <div class="bg-white rounded-lg border border-yellow-200 overflow-hidden">
                                <div class="bg-yellow-50 px-3 py-2 border-b border-yellow-200">
                                    <span class="text-xs font-semibold text-yellow-700">유효성 검사 (Validation)</span>
                                </div>
                                <div class="p-3">
                                    @if(is_array($validationData) && !empty($validationData))
                                        @include('item-fields.partials._key-value-table', ['data' => $validationData])
                                    @else
                                        <span class="text-xs text-gray-400">데이터 없음</span>
                                    @endif
                                </div>
                            </div>
                            @endif

                            {{-- Display Condition --}}
                            @if($hasDisplayCondition)
                            <div class="bg-white rounded-lg border border-pink-200 overflow-hidden">
                                <div class="bg-pink-50 px-3 py-2 border-b border-pink-200">
                                    <span class="text-xs font-semibold text-pink-700">표시 조건 (Condition)</span>
                                </div>
                                <div class="p-3">
                                    @if(is_array($displayConditionData) && !empty($displayConditionData))
                                        @include('item-fields.partials._key-value-table', ['data' => $displayConditionData])
                                    @else
                                        <span class="text-xs text-gray-400">데이터 없음</span>
                                    @endif
                                </div>
                            </div>
                            @endif
                        </div>
                    </td>
                </tr>
                @endif
                @endforeach
            </tbody>
        </table>
    </div>

    <!-- 요약 정보 -->
    <div class="px-4 py-3 bg-gray-50 border-t border-gray-200">
        <div class="flex flex-wrap items-center justify-between gap-2 text-sm text-gray-600">
            <div class="flex items-center gap-4">
                @php
                    // 현재 페이지의 항목으로 통계 계산
                    $currentItems = $fields->getCollection();
                    $systemCount = $currentItems->filter(fn($f) => $f->is_common || $f->storage_type === 'column')->count();
                    $customCount = $currentItems->count() - $systemCount;
                    $activeCount = $currentItems->filter(fn($f) => $f->is_active)->count();
                    $lockedCount = $currentItems->filter(fn($f) => $f->is_locked)->count();
                    $withOptionsCount = $currentItems->filter(fn($f) => !empty($f->options))->count();
                    $deletedCount = $currentItems->filter(fn($f) => !is_null($f->deleted_at))->count();
                @endphp
                <span class="text-blue-600">시스템: {{ $systemCount }}</span>
                <span class="text-green-600">커스텀: {{ $customCount }}</span>
            </div>
            <div class="flex items-center gap-4 text-xs">
                @if($deletedCount > 0)
                    <span class="text-red-500">삭제됨: {{ $deletedCount }}개</span>
                @endif
                @if($activeCount < $currentItems->count())
                    <span class="text-gray-500">비활성: {{ $currentItems->count() - $activeCount }}개</span>
                @endif
                @if($lockedCount > 0)
                    <span class="text-orange-500">잠금: {{ $lockedCount }}개</span>
                @endif
                @if($withOptionsCount > 0)
                    <span class="text-purple-600">옵션설정: {{ $withOptionsCount }}개</span>
                @endif
            </div>
        </div>
    </div>

    <!-- 페이지네이션 -->
    @include('partials.pagination', [
        'paginator' => $fields,
        'target' => '#custom-fields',
        'includeForm' => '#customFilterForm'
    ])

    <script>
        function toggleAccordion(fieldId) {
            const accordion = document.getElementById('accordion-' + fieldId);
            const chevron = document.getElementById('chevron-' + fieldId);

            if (accordion.classList.contains('hidden')) {
                accordion.classList.remove('hidden');
                chevron.classList.add('rotate-90');
            } else {
                accordion.classList.add('hidden');
                chevron.classList.remove('rotate-90');
            }
        }

        // 전체 선택/해제
        function toggleSelectAll(checkbox) {
            const checkboxes = document.querySelectorAll('.field-checkbox');
            checkboxes.forEach(cb => cb.checked = checkbox.checked);
            updateBulkActions();
        }

        // 선택 상태 업데이트
        function updateBulkActions() {
            const checkboxes = document.querySelectorAll('.field-checkbox:checked');
            const count = checkboxes.length;
            const bulkActions = document.getElementById('bulk-actions');
            const selectedCount = document.getElementById('selected-count');
            const selectAll = document.getElementById('select-all-fields');
            const allCheckboxes = document.querySelectorAll('.field-checkbox');

            selectedCount.textContent = count;

            if (count > 0) {
                bulkActions.classList.remove('hidden');
            } else {
                bulkActions.classList.add('hidden');
            }

            // 전체 선택 체크박스 상태 업데이트
            if (count === 0) {
                selectAll.checked = false;
                selectAll.indeterminate = false;
            } else if (count === allCheckboxes.length) {
                selectAll.checked = true;
                selectAll.indeterminate = false;
            } else {
                selectAll.checked = false;
                selectAll.indeterminate = true;
            }
        }

        // 선택 해제
        function clearSelection() {
            const checkboxes = document.querySelectorAll('.field-checkbox');
            checkboxes.forEach(cb => cb.checked = false);
            document.getElementById('select-all-fields').checked = false;
            updateBulkActions();
        }

        // 선택된 필드 삭제
        function deleteSelectedFields() {
            const checkboxes = document.querySelectorAll('.field-checkbox:checked');
            const ids = Array.from(checkboxes).map(cb => parseInt(cb.value));

            if (ids.length === 0) {
                showToast('삭제할 필드를 선택해주세요.', 'warning');
                return;
            }

            showDeleteConfirm(`선택된 ${ids.length}개 필드`, () => {
                fetch('/api/admin/item-fields/custom-fields', {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '{{ csrf_token() }}',
                        'Content-Type': 'application/json',
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify({ ids: ids })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showToast(data.message || `${ids.length}개 필드가 삭제되었습니다.`, 'success');
                        htmx.trigger('#custom-fields', 'customRefresh');
                    } else {
                        showToast(data.message || '삭제에 실패했습니다.', 'error');
                    }
                })
                .catch(err => {
                    console.error(err);
                    showToast('오류가 발생했습니다.', 'error');
                });
            });
        }

        // 필드 복원
        function restoreCustomField(fieldId, fieldName) {
            showConfirm(`'${fieldName}' 필드를 복원하시겠습니까?`, () => {
                fetch(`/api/admin/item-fields/custom-fields/${fieldId}/restore`, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '{{ csrf_token() }}',
                        'Content-Type': 'application/json',
                        'Accept': 'application/json'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showToast(data.message || '필드가 복원되었습니다.', 'success');
                        htmx.trigger('#custom-fields', 'customRefresh');
                    } else {
                        showToast(data.message || '복원에 실패했습니다.', 'error');
                    }
                })
                .catch(err => {
                    console.error(err);
                    showToast('오류가 발생했습니다.', 'error');
                });
            }, {
                title: '필드 복원',
                icon: 'question',
                confirmText: '복원',
            });
        }

        // 필드 영구 삭제
        function forceDeleteCustomField(fieldId, fieldName) {
            showDeleteConfirm(`'${fieldName}' 필드 (영구 삭제 - 복구 불가)`, () => {
                fetch(`/api/admin/item-fields/custom-fields/${fieldId}/force`, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '{{ csrf_token() }}',
                        'Content-Type': 'application/json',
                        'Accept': 'application/json'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showToast(data.message || '필드가 영구 삭제되었습니다.', 'success');
                        htmx.trigger('#custom-fields', 'customRefresh');
                    } else {
                        showToast(data.message || '영구 삭제에 실패했습니다.', 'error');
                    }
                })
                .catch(err => {
                    console.error(err);
                    showToast('오류가 발생했습니다.', 'error');
                });
            });
        }

        // 페이지 변경 핸들러
        function handlePageChange(page) {
            const form = document.getElementById('customFilterForm');
            if (form) {
                // hidden input으로 page 값 설정
                let pageInput = form.querySelector('input[name="page"]');
                if (!pageInput) {
                    pageInput = document.createElement('input');
                    pageInput.type = 'hidden';
                    pageInput.name = 'page';
                    form.appendChild(pageInput);
                }
                pageInput.value = page;

                // customRefresh 이벤트 트리거 (hx-trigger="customRefresh from:body" 에 맞춤)
                htmx.trigger('#custom-fields', 'customRefresh');
            }
        }

        // 페이지당 항목 수 변경 핸들러
        function handlePerPageChange(perPage) {
            const form = document.getElementById('customFilterForm');
            if (form) {
                // hidden input으로 per_page 값 설정
                let perPageInput = form.querySelector('input[name="per_page"]');
                if (!perPageInput) {
                    perPageInput = document.createElement('input');
                    perPageInput.type = 'hidden';
                    perPageInput.name = 'per_page';
                    form.appendChild(perPageInput);
                }
                perPageInput.value = perPage;

                // 페이지는 1로 리셋
                let pageInput = form.querySelector('input[name="page"]');
                if (!pageInput) {
                    pageInput = document.createElement('input');
                    pageInput.type = 'hidden';
                    pageInput.name = 'page';
                    form.appendChild(pageInput);
                }
                pageInput.value = 1;

                // customRefresh 이벤트 트리거 (hx-trigger="customRefresh from:body" 에 맞춤)
                htmx.trigger('#custom-fields', 'customRefresh');
            }
        }
    </script>
@endif