sam-manage/resources/views/item-fields/index.blade.php

@extends('layouts.app')

@section('title', '품목기준 필드 관리')

@section('content')
<div class="container mx-auto max-w-7xl">
    <!-- 헤더 -->
    <div class="flex justify-between items-center mb-6">
        <div>
            <h1 class="text-2xl font-bold text-gray-800">품목기준 필드 관리</h1>
            <p class="text-sm text-gray-500 mt-1">테넌트별 품목관련 테이블의 필드를 관리합니다. 시스템 필드 시딩 및 커스텀 필드를 추가할 수 있습니다.</p>
        </div>
        <div class="flex gap-2">
            <!-- AI 문의하기 버튼 -->
            <button onclick="openAiInquiryModal()"
                    class="bg-purple-100 hover:bg-purple-200 text-purple-700 px-4 py-2 rounded-lg text-sm font-medium transition-colors flex items-center gap-2">
                <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.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                AI에게 문의하기
            </button>
        </div>
    </div>

    <!-- 탭 네비게이션 -->
    <div class="mb-6 border-b border-gray-200">
        <nav class="-mb-px flex space-x-8">
            <button id="tab-seeding" onclick="switchTab('seeding')"
                    class="tab-btn border-b-2 border-blue-500 text-blue-600 py-4 px-1 text-sm font-medium">
                시스템 필드 시딩
            </button>
            <button id="tab-custom" onclick="switchTab('custom')"
                    class="tab-btn border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 py-4 px-1 text-sm font-medium">
                커스텀 필드 관리
            </button>
            <button id="tab-errors" onclick="switchTab('errors')"
                    class="tab-btn border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 py-4 px-1 text-sm font-medium flex items-center gap-2">
                오류 로그
                <span id="error-badge" class="hidden bg-red-500 text-white text-xs rounded-full px-2 py-0.5">0</span>
            </button>
        </nav>
    </div>

    <!-- 시딩 탭 컨텐츠 -->
    <div id="content-seeding" class="tab-content">
        <!-- 전체 시딩/초기화 버튼 -->
        <div class="mb-4 flex justify-end gap-2">
            <button onclick="seedAll()"
                    class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                전체 시딩
            </button>
            <button onclick="resetAll()"
                    class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                전체 초기화
            </button>
        </div>

        <!-- 시딩 상태 테이블 (HTMX로 로드) -->
        <div id="seeding-status"
             hx-get="/api/admin/item-fields/seeding-status"
             hx-trigger="load, seedingRefresh from:body"
             hx-headers='{"X-CSRF-TOKEN": "{{ csrf_token() }}"}'
             class="bg-white rounded-lg shadow-sm overflow-hidden">
            <!-- 로딩 스피너 -->
            <div class="flex justify-center items-center p-12">
                <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
            </div>
        </div>
    </div>

    <!-- 커스텀 필드 탭 컨텐츠 -->
    <div id="content-custom" class="tab-content hidden">
        <!-- 필터 및 추가 버튼 -->
        <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
            <form id="customFilterForm" class="flex flex-wrap gap-4 items-end">
                <!-- 소스 테이블 필터 -->
                <div class="w-48">
                    <label class="block text-xs font-medium text-gray-600 mb-1">소스 테이블</label>
                    <select name="source_table" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <option value="">전체</option>
                        <option value="products">제품</option>
                        <option value="materials">자재</option>
                        <option value="product_components">BOM</option>
                        <option value="material_inspections">자재검수</option>
                        <option value="material_receipts">자재입고</option>
                    </select>
                </div>

                <!-- 필드 타입 필터 -->
                <div class="w-40">
                    <label class="block text-xs font-medium text-gray-600 mb-1">필드 타입</label>
                    <select name="field_type" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <option value="">전체</option>
                        <option value="textbox">텍스트</option>
                        <option value="number">숫자</option>
                        <option value="dropdown">드롭다운</option>
                        <option value="checkbox">체크박스</option>
                        <option value="date">날짜</option>
                        <option value="textarea">텍스트영역</option>
                    </select>
                </div>

                <!-- 검색 -->
                <div class="flex-1 min-w-[200px]">
                    <label class="block text-xs font-medium text-gray-600 mb-1">검색</label>
                    <input type="text" name="search"
                           placeholder="필드키, 필드명..."
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>

                <!-- 검색 버튼 -->
                <button type="submit"
                        class="bg-gray-800 hover:bg-gray-900 text-white px-6 py-2 rounded-lg text-sm font-medium transition-colors">
                    검색
                </button>

                <!-- 추가 버튼 -->
                <button type="button" onclick="openCreateModal()"
                        class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                    + 커스텀 필드 추가
                </button>
            </form>
        </div>

        <!-- 커스텀 필드 테이블 (HTMX로 로드) -->
        <div id="custom-fields"
             hx-get="/api/admin/item-fields/custom-fields"
             hx-trigger="customRefresh from:body"
             hx-include="#customFilterForm"
             hx-headers='{"X-CSRF-TOKEN": "{{ csrf_token() }}"}'
             class="bg-white rounded-lg shadow-sm overflow-hidden">
            <!-- 초기에는 안내 메시지 표시 -->
            <div class="flex justify-center items-center p-12 text-gray-500">
                검색 조건을 설정하고 검색 버튼을 클릭하세요.
            </div>
        </div>
    </div>

    <!-- 오류 로그 탭 컨텐츠 -->
    <div id="content-errors" class="tab-content hidden">
        <!-- 오류 로그 테이블 (HTMX로 로드) -->
        <div id="error-logs"
             hx-get="/api/admin/item-fields/error-logs"
             hx-trigger="load, errorRefresh from:body"
             hx-headers='{"X-CSRF-TOKEN": "{{ csrf_token() }}"}'
             class="bg-white rounded-lg shadow-sm overflow-hidden">
            <!-- 로딩 스피너 -->
            <div class="flex justify-center items-center p-12">
                <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
            </div>
        </div>
    </div>
</div>

<!-- 커스텀 필드 추가 모달 -->
<div id="createModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
    <div class="flex items-center justify-center min-h-screen px-4">
        <div class="fixed inset-0 bg-black bg-opacity-50" onclick="closeCreateModal()"></div>
        <div class="relative bg-white rounded-lg shadow-xl max-w-lg w-full p-6">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-bold text-gray-800">커스텀 필드 추가</h3>
                <button onclick="closeCreateModal()" class="text-gray-400 hover:text-gray-600">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>

            <form id="createForm" onsubmit="submitCreateForm(event)">
                <!-- 소스 테이블 -->
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">소스 테이블 <span class="text-red-500">*</span></label>
                    <select name="source_table" required class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <option value="">선택하세요</option>
                        <option value="products">제품</option>
                        <option value="materials">자재</option>
                        <option value="product_components">BOM</option>
                        <option value="material_inspections">자재검수</option>
                        <option value="material_receipts">자재입고</option>
                    </select>
                </div>

                <!-- 필드 키 -->
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">필드 키 <span class="text-red-500">*</span></label>
                    <input type="text" name="field_key" required
                           pattern="^[a-zA-Z0-9_]+$"
                           maxlength="100"
                           placeholder="예: custom_field_1, 96_item_name"
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <p class="text-xs text-gray-500 mt-1">영문, 숫자, 밑줄(_)만 사용 가능 (최대 100자)</p>
                </div>

                <!-- 필드명 -->
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">필드명 <span class="text-red-500">*</span></label>
                    <input type="text" name="field_name" required
                           placeholder="예: 커스텀필드1"
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>

                <!-- 필드 타입 -->
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">필드 타입 <span class="text-red-500">*</span></label>
                    <select name="field_type" required class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <option value="">선택하세요</option>
                        <option value="textbox">텍스트</option>
                        <option value="number">숫자</option>
                        <option value="dropdown">드롭다운</option>
                        <option value="checkbox">체크박스</option>
                        <option value="date">날짜</option>
                        <option value="textarea">텍스트영역</option>
                    </select>
                </div>

                <!-- 필수 여부 -->
                <div class="mb-4">
                    <label class="flex items-center">
                        <input type="checkbox" name="is_required" value="1" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                        <span class="ml-2 text-sm text-gray-700">필수 입력</span>
                    </label>
                </div>

                <!-- 기본값 -->
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">기본값</label>
                    <input type="text" name="default_value"
                           placeholder="기본값 (선택사항)"
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>

                <!-- 버튼 -->
                <div class="flex justify-end gap-2 mt-6">
                    <button type="button" onclick="closeCreateModal()"
                            class="px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 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>

<!-- AI 문의하기 모달 -->
<div id="aiInquiryModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
    <div class="flex items-center justify-center min-h-screen px-4">
        <div class="fixed inset-0 bg-black bg-opacity-50" onclick="closeAiInquiryModal()"></div>
        <div class="relative bg-white rounded-lg shadow-xl max-w-3xl w-full p-6">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-bold text-gray-800 flex items-center gap-2">
                    <svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    AI에게 문의하기
                </h3>
                <button onclick="closeAiInquiryModal()" class="text-gray-400 hover:text-gray-600">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>

            <div id="aiInquiryContent">
                <!-- 로딩 상태 -->
                <div id="aiInquiryLoading" class="flex justify-center items-center p-8">
                    <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600"></div>
                    <span class="ml-3 text-gray-600">오류 보고서 생성 중...</span>
                </div>

                <!-- 오류 없음 -->
                <div id="aiInquiryNoError" class="hidden p-8 text-center">
                    <div class="text-green-500 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                    </div>
                    <p class="text-gray-600">저장된 오류 로그가 없습니다.</p>
                    <p class="text-sm text-gray-500 mt-1">시딩 중 오류가 발생하면 여기에 보고서가 생성됩니다.</p>
                </div>

                <!-- 보고서 내용 -->
                <div id="aiInquiryReport" class="hidden">
                    <div class="mb-4 p-3 bg-purple-50 rounded-lg text-sm text-purple-700">
                        아래 보고서를 복사하여 AI에게 붙여넣으면 오류 원인과 해결 방법을 문의할 수 있습니다.
                    </div>
                    <div class="relative">
                        <textarea id="aiReportText" readonly
                                  class="w-full h-96 p-4 border border-gray-300 rounded-lg text-sm font-mono bg-gray-50 focus:outline-none resize-none"></textarea>
                        <button onclick="copyReportToClipboard()"
                                class="absolute top-2 right-2 px-3 py-1 bg-white border border-gray-300 rounded text-xs text-gray-600 hover:bg-gray-100 transition-colors 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="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>
                    </div>
                </div>
            </div>

            <!-- 버튼 -->
            <div class="flex justify-end gap-2 mt-6">
                <button type="button" onclick="closeAiInquiryModal()"
                        class="px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors">
                    닫기
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 커스텀 필드 수정 모달 -->
<div id="editModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
    <div class="flex items-center justify-center min-h-screen px-4">
        <div class="fixed inset-0 bg-black bg-opacity-50" onclick="closeEditModal()"></div>
        <div class="relative bg-white rounded-lg shadow-xl max-w-lg w-full p-6">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-bold text-gray-800">필드 수정</h3>
                <button onclick="closeEditModal()" class="text-gray-400 hover:text-gray-600">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>

            <form id="editForm" onsubmit="submitEditForm(event)">
                <input type="hidden" name="id" id="edit_id">
                <input type="hidden" name="storage_type" id="edit_storage_type">

                <!-- 소스 테이블 -->
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">소스 테이블</label>
                    <select name="source_table" id="edit_source_table" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100">
                        <option value="">미지정</option>
                        <option value="products">제품</option>
                        <option value="materials">자재</option>
                        <option value="product_components">BOM</option>
                        <option value="material_inspections">자재검수</option>
                        <option value="material_receipts">자재입고</option>
                    </select>
                    <p id="edit_source_table_hint" class="text-xs text-gray-500 mt-1 hidden">시스템 필드는 소스 테이블을 변경할 수 없습니다.</p>
                </div>

                <!-- 필드 키 -->
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">필드 키</label>
                    <input type="text" name="field_key" id="edit_field_key"
                           placeholder="예: custom_field_1, 96_item_name"
                           pattern="^[a-zA-Z0-9_]+$"
                           maxlength="100"
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100">
                    <p id="edit_field_key_hint" class="text-xs text-gray-500 mt-1 hidden">시스템 필드는 필드 키를 변경할 수 없습니다.</p>
                    <p id="edit_field_key_policy" class="text-xs text-gray-500 mt-1">영문, 숫자, 밑줄(_)만 사용 가능 (최대 100자)</p>
                </div>

                <!-- 필드명 -->
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">필드명 <span class="text-red-500">*</span></label>
                    <input type="text" name="field_name" id="edit_field_name" required
                           placeholder="필드 표시명"
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>

                <!-- 필드 타입 -->
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">필드 타입 <span class="text-red-500">*</span></label>
                    <select name="field_type" id="edit_field_type" required class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <option value="textbox">텍스트</option>
                        <option value="number">숫자</option>
                        <option value="dropdown">드롭다운</option>
                        <option value="checkbox">체크박스</option>
                        <option value="date">날짜</option>
                        <option value="textarea">텍스트영역</option>
                    </select>
                </div>

                <!-- 필수 여부 -->
                <div class="mb-4">
                    <label class="flex items-center">
                        <input type="checkbox" name="is_required" id="edit_is_required" value="1" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                        <span class="ml-2 text-sm text-gray-700">필수 입력</span>
                    </label>
                </div>

                <!-- 기본값 -->
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">기본값</label>
                    <input type="text" name="default_value" id="edit_default_value"
                           placeholder="기본값 (선택사항)"
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>

                <!-- 필드 정보 표시 -->
                <div id="edit_field_info" class="mb-4 p-3 bg-gray-50 rounded-lg text-xs text-gray-600">
                    <div class="flex justify-between">
                        <span>저장 방식:</span>
                        <span id="edit_storage_type_display" class="font-medium">-</span>
                    </div>
                    <div class="flex justify-between mt-1">
                        <span>생성일:</span>
                        <span id="edit_created_at" class="font-medium">-</span>
                    </div>
                </div>

                <!-- 버튼 -->
                <div class="flex justify-end gap-2 mt-6">
                    <button type="button" onclick="closeEditModal()"
                            class="px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 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>
@endsection

@push('scripts')
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
<script>
    // 탭 전환
    function switchTab(tab) {
        // 탭 버튼 스타일 변경
        document.querySelectorAll('.tab-btn').forEach(btn => {
            btn.classList.remove('border-blue-500', 'text-blue-600');
            btn.classList.add('border-transparent', 'text-gray-500');
        });
        document.getElementById('tab-' + tab).classList.remove('border-transparent', 'text-gray-500');
        document.getElementById('tab-' + tab).classList.add('border-blue-500', 'text-blue-600');

        // 컨텐츠 표시/숨김
        document.querySelectorAll('.tab-content').forEach(content => {
            content.classList.add('hidden');
        });
        document.getElementById('content-' + tab).classList.remove('hidden');

        // 탭별 데이터 로드
        if (tab === 'custom') {
            htmx.trigger('#custom-fields', 'customRefresh');
        } else if (tab === 'errors') {
            htmx.trigger('#error-logs', 'errorRefresh');
        }
    }

    // 폼 제출 시 HTMX 이벤트 트리거
    document.getElementById('customFilterForm').addEventListener('submit', function(e) {
        e.preventDefault();
        htmx.trigger('#custom-fields', 'customRefresh');
    });

    // 시딩 새로고침
    function refreshSeeding() {
        htmx.trigger('#seeding-status', 'seedingRefresh');
    }

    // 오류 처리 공통 함수
    function handleSeedingResponse(data) {
        if (data.success) {
            showToast(data.message, 'success');
        } else {
            showToast(data.message, 'error');
        }

        // 오류가 있으면 오류 탭 배지 업데이트 및 표시
        if (data.has_errors || data.error_count > 0) {
            updateErrorBadge(data.error_count || data.errors?.length || 1);
            showToast(`${data.error_count || 1}건의 오류가 발생했습니다. 오류 로그 탭을 확인하세요.`, 'warning');
        }

        refreshSeeding();
        htmx.trigger('#error-logs', 'errorRefresh');
    }

    // 오류 배지 업데이트
    function updateErrorBadge(count) {
        const badge = document.getElementById('error-badge');
        if (count > 0) {
            badge.textContent = count;
            badge.classList.remove('hidden');
        } else {
            badge.classList.add('hidden');
        }
    }

    // 단일 테이블 시딩
    window.seedTable = function(sourceTable) {
        showConfirm('이 테이블의 시스템 필드를 시딩하시겠습니까?', () => {
            fetch('/api/admin/item-fields/seed', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({ source_table: sourceTable })
            })
            .then(response => response.json())
            .then(handleSeedingResponse)
            .catch(err => showToast('오류가 발생했습니다.', 'error'));
        }, { title: '시딩 확인', icon: 'question' });
    };

    // 단일 테이블 초기화
    window.resetTable = function(sourceTable) {
        showConfirm('이 테이블의 시스템 필드를 초기화(삭제 후 재시딩)하시겠습니까?', () => {
            fetch('/api/admin/item-fields/reset', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({ source_table: sourceTable })
            })
            .then(response => response.json())
            .then(handleSeedingResponse)
            .catch(err => showToast('오류가 발생했습니다.', 'error'));
        }, { title: '초기화 확인', icon: 'warning' });
    };

    // 전체 시딩
    function seedAll() {
        showConfirm('모든 테이블의 시스템 필드를 시딩하시겠습니까?', () => {
            fetch('/api/admin/item-fields/seed-all', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                }
            })
            .then(response => response.json())
            .then(handleSeedingResponse)
            .catch(err => showToast('오류가 발생했습니다.', 'error'));
        }, { title: '전체 시딩 확인', icon: 'question' });
    }

    // 전체 초기화
    function resetAll() {
        showConfirm('모든 테이블의 시스템 필드를 초기화(삭제 후 재시딩)하시겠습니까?\n\n주의: 기존 시스템 필드가 모두 삭제됩니다.', () => {
            fetch('/api/admin/item-fields/reset-all', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                }
            })
            .then(response => response.json())
            .then(handleSeedingResponse)
            .catch(err => showToast('오류가 발생했습니다.', 'error'));
        }, { title: '전체 초기화 확인', icon: 'warning' });
    }

    // 커스텀 필드 추가 모달 열기
    function openCreateModal() {
        document.getElementById('createModal').classList.remove('hidden');
    }

    // 커스텀 필드 추가 모달 닫기
    function closeCreateModal() {
        document.getElementById('createModal').classList.add('hidden');
        document.getElementById('createForm').reset();
    }

    // 커스텀 필드 추가 폼 제출
    function submitCreateForm(e) {
        e.preventDefault();
        const form = e.target;
        const formData = new FormData(form);
        const data = {};
        formData.forEach((value, key) => {
            if (key === 'is_required') {
                data[key] = true;
            } else {
                data[key] = value;
            }
        });
        if (!data.is_required) {
            data.is_required = false;
        }

        fetch('/api/admin/item-fields/custom-fields', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json'
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showToast(data.message, 'success');
                closeCreateModal();
                htmx.trigger('#custom-fields', 'customRefresh');
            } else {
                showToast(data.message, 'error');
            }
        })
        .catch(err => showToast('오류가 발생했습니다.', 'error'));
    }

    // 커스텀 필드 삭제
    window.deleteCustomField = function(id, name) {
        showDeleteConfirm(`"${name}" 커스텀 필드`, () => {
            fetch(`/api/admin/item-fields/custom-fields/${id}`, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    '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 => showToast('오류가 발생했습니다.', 'error'));
        });
    };

    // 오류 로그 초기화
    window.clearErrorLogs = function() {
        showConfirm('모든 오류 로그를 초기화하시겠습니까?', () => {
            fetch('/api/admin/item-fields/error-logs', {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showToast(data.message, 'success');
                    htmx.trigger('#error-logs', 'errorRefresh');
                    updateErrorBadge(0);
                } else {
                    showToast(data.message, 'error');
                }
            })
            .catch(err => showToast('오류가 발생했습니다.', 'error'));
        }, { title: '로그 초기화', icon: 'warning' });
    };

    // AI 문의하기 모달 열기
    function openAiInquiryModal() {
        document.getElementById('aiInquiryModal').classList.remove('hidden');
        document.getElementById('aiInquiryLoading').classList.remove('hidden');
        document.getElementById('aiInquiryNoError').classList.add('hidden');
        document.getElementById('aiInquiryReport').classList.add('hidden');

        // 오류 보고서 가져오기
        fetch('/api/admin/item-fields/error-report', {
            headers: {
                'Accept': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        })
        .then(response => response.json())
        .then(data => {
            document.getElementById('aiInquiryLoading').classList.add('hidden');

            if (data.success) {
                document.getElementById('aiInquiryReport').classList.remove('hidden');
                document.getElementById('aiReportText').value = data.report;
            } else {
                document.getElementById('aiInquiryNoError').classList.remove('hidden');
            }
        })
        .catch(err => {
            document.getElementById('aiInquiryLoading').classList.add('hidden');
            document.getElementById('aiInquiryNoError').classList.remove('hidden');
        });
    }

    // AI 문의하기 모달 닫기
    function closeAiInquiryModal() {
        document.getElementById('aiInquiryModal').classList.add('hidden');
    }

    // 보고서 클립보드 복사
    function copyReportToClipboard() {
        const textarea = document.getElementById('aiReportText');
        textarea.select();
        document.execCommand('copy');
        showToast('보고서가 클립보드에 복사되었습니다.', 'success');
    }

    // 수정 모달 열기
    window.openEditModal = function(field) {
        const modal = document.getElementById('editModal');
        const isSystemField = field.storage_type === 'column';

        // 폼 필드 채우기
        document.getElementById('edit_id').value = field.id;
        document.getElementById('edit_storage_type').value = field.storage_type;
        document.getElementById('edit_source_table').value = field.source_table || '';
        document.getElementById('edit_field_key').value = field.field_key || '';
        document.getElementById('edit_field_name').value = field.field_name;
        document.getElementById('edit_field_type').value = field.field_type;
        document.getElementById('edit_is_required').checked = field.is_required;
        document.getElementById('edit_default_value').value = field.default_value || '';

        // 시스템 필드인 경우 source_table, field_key 비활성화
        document.getElementById('edit_source_table').disabled = isSystemField;
        document.getElementById('edit_field_key').disabled = isSystemField;
        document.getElementById('edit_source_table_hint').classList.toggle('hidden', !isSystemField);
        document.getElementById('edit_field_key_hint').classList.toggle('hidden', !isSystemField);
        document.getElementById('edit_field_key_policy').classList.toggle('hidden', isSystemField);

        // 필드 정보 표시
        document.getElementById('edit_storage_type_display').textContent =
            isSystemField ? '시스템 필드 (컬럼)' : '커스텀 필드 (JSON)';
        document.getElementById('edit_created_at').textContent =
            field.created_at ? new Date(field.created_at).toLocaleString('ko-KR') : '-';

        modal.classList.remove('hidden');
    };

    // 수정 모달 닫기
    function closeEditModal() {
        document.getElementById('editModal').classList.add('hidden');
        document.getElementById('editForm').reset();
    }

    // 수정 폼 제출
    function submitEditForm(e) {
        e.preventDefault();
        const form = e.target;
        const formData = new FormData(form);
        const id = formData.get('id');
        const storageType = formData.get('storage_type');
        const isSystemField = storageType === 'column';

        const data = {
            field_name: formData.get('field_name'),
            field_type: formData.get('field_type'),
            is_required: formData.get('is_required') === '1',
            default_value: formData.get('default_value') || null
        };

        // 커스텀 필드인 경우에만 source_table, field_key 포함
        if (!isSystemField) {
            data.source_table = formData.get('source_table') || null;
            data.field_key = formData.get('field_key') || null;
        }

        fetch(`/api/admin/item-fields/custom-fields/${id}`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json'
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showToast(data.message, 'success');
                closeEditModal();
                htmx.trigger('#custom-fields', 'customRefresh');
            } else {
                showToast(data.message, 'error');
            }
        })
        .catch(err => showToast('오류가 발생했습니다.', 'error'));
    }
</script>
@endpush