@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-sysdefs" onclick="switchTab('sysdefs')"
                    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>
                    <label class="block text-xs font-medium text-gray-600 mb-1">필드 유형</label>
                    <input type="hidden" name="field_category" id="field_category_input" value="">
                    <div class="inline-flex rounded-lg border border-gray-300 overflow-hidden">
                        <button type="button" onclick="setFieldCategory('')"
                                class="field-category-btn px-3 py-2 text-sm font-medium bg-gray-800 text-white"
                                data-value="">
                            전체
                        </button>
                        <button type="button" onclick="setFieldCategory('system')"
                                class="field-category-btn px-3 py-2 text-sm font-medium bg-white text-gray-700 hover:bg-gray-50 border-l border-gray-300"
                                data-value="system">
                            <span class="inline-flex items-center">
                                <svg class="w-3 h-3 mr-1 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
                                    <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>
                                시스템
                            </span>
                        </button>
                        <button type="button" onclick="setFieldCategory('custom')"
                                class="field-category-btn px-3 py-2 text-sm font-medium bg-white text-gray-700 hover:bg-gray-50 border-l border-gray-300"
                                data-value="custom">
                            <span class="inline-flex items-center">
                                <svg class="w-3 h-3 mr-1 text-green-600" fill="currentColor" viewBox="0 0 20 20">
                                    <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
                                </svg>
                                커스텀
                            </span>
                        </button>
                    </div>
                </div>

                <!-- 소스 테이블 필터 -->
                <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 font-mono">
                        <option value="">전체</option>
                        @foreach($sourceTables as $table => $label)
                            <option value="{{ $table }}">{{ $table }} ({{ $label }})</option>
                        @endforeach
                    </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="purgeDeletedFields()"
                        class="bg-orange-600 hover:bg-orange-700 text-white px-4 py-2 rounded-lg text-sm font-medium 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="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>

                <!-- 추가 버튼 -->
                <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">
                <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
            </div>
        </div>
    </div>

    <!-- 시스템 필드 정의 탭 컨텐츠 -->
    <div id="content-sysdefs" class="tab-content hidden">
        <!-- 필터 및 추가 버튼 -->
        <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
            <form id="sysDefsFilterForm" 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 font-mono">
                        <option value="">전체</option>
                        @foreach($sourceTables as $table => $label)
                            <option value="{{ $table }}">{{ $table }} ({{ $label }})</option>
                        @endforeach
                    </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="openSourceTableModal()"
                        class="bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                    + 테이블 추가
                </button>

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

        <!-- 시스템 필드 정의 테이블 (HTMX로 로드) -->
        <div id="system-definitions"
             hx-get="/api/admin/item-fields/system-definitions"
             hx-trigger="sysDefsRefresh from:body"
             hx-include="#sysDefsFilterForm"
             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-indigo-600"></div>
            </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 font-mono">
                        <option value="">선택하세요</option>
                        @foreach($sourceTables as $table => $label)
                            <option value="{{ $table }}">{{ $table }} ({{ $label }})</option>
                        @endforeach
                    </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="detailModal" 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="closeDetailModal()"></div>
        <div class="relative bg-white rounded-lg shadow-xl max-w-3xl w-full max-h-[90vh] overflow-y-auto">
            <div class="sticky top-0 bg-white border-b border-gray-200 px-6 py-4 flex justify-between items-center">
                <h3 class="text-lg font-bold text-gray-800">필드 상세정보</h3>
                <button onclick="closeDetailModal()" 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 class="p-6">
                <!-- 기본 정보 -->
                <div class="mb-6">
                    <h4 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        기본 정보
                    </h4>
                    <div class="grid grid-cols-2 gap-4 bg-gray-50 rounded-lg p-4">
                        <div>
                            <span class="text-xs text-gray-500">필드 키</span>
                            <p id="detail_field_key" class="text-sm font-mono font-medium mt-1">-</p>
                        </div>
                        <div>
                            <span class="text-xs text-gray-500">필드명</span>
                            <p id="detail_field_name" class="text-sm font-medium mt-1">-</p>
                        </div>
                        <div>
                            <span class="text-xs text-gray-500">소스 테이블</span>
                            <p id="detail_source_table" class="text-sm font-mono mt-1">-</p>
                        </div>
                        <div>
                            <span class="text-xs text-gray-500">필드 타입</span>
                            <p id="detail_field_type" class="text-sm mt-1">-</p>
                        </div>
                        <div>
                            <span class="text-xs text-gray-500">저장 방식</span>
                            <p id="detail_storage_type" class="text-sm mt-1">-</p>
                        </div>
                        <div>
                            <span class="text-xs text-gray-500">카테고리</span>
                            <p id="detail_category" class="text-sm mt-1">-</p>
                        </div>
                    </div>
                </div>

                <!-- 상태 정보 -->
                <div class="mb-6">
                    <h4 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                        <svg class="w-4 h-4 mr-1" 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>
                        상태
                    </h4>
                    <div class="flex flex-wrap gap-4 bg-gray-50 rounded-lg p-4">
                        <div class="flex items-center gap-2">
                            <span class="text-xs text-gray-500">필수:</span>
                            <span id="detail_is_required" class="text-sm">-</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <span class="text-xs text-gray-500">활성:</span>
                            <span id="detail_is_active" class="text-sm">-</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <span class="text-xs text-gray-500">잠금:</span>
                            <span id="detail_is_locked" class="text-sm">-</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <span class="text-xs text-gray-500">공통:</span>
                            <span id="detail_is_common" class="text-sm">-</span>
                        </div>
                    </div>
                </div>

                <!-- 기본값/Placeholder -->
                <div class="mb-6">
                    <h4 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                        <svg class="w-4 h-4 mr-1" 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>
                        입력 설정
                    </h4>
                    <div class="grid grid-cols-2 gap-4 bg-gray-50 rounded-lg p-4">
                        <div>
                            <span class="text-xs text-gray-500">기본값</span>
                            <p id="detail_default_value" class="text-sm mt-1">-</p>
                        </div>
                        <div>
                            <span class="text-xs text-gray-500">Placeholder</span>
                            <p id="detail_placeholder" class="text-sm mt-1">-</p>
                        </div>
                        <div class="col-span-2">
                            <span class="text-xs text-gray-500">설명</span>
                            <p id="detail_description" class="text-sm mt-1">-</p>
                        </div>
                    </div>
                </div>

                <!-- Options (JSON) -->
                <div id="detail_options_section" class="mb-6 hidden">
                    <h4 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                        <svg class="w-4 h-4 mr-1 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" />
                        </svg>
                        옵션 (Options)
                        <span class="ml-2 text-xs text-gray-400">드롭다운 선택 항목 등</span>
                    </h4>
                    <pre id="detail_options" class="bg-gray-900 text-green-400 p-4 rounded-lg text-xs overflow-x-auto max-h-48"></pre>
                </div>

                <!-- Properties (JSON) -->
                <div id="detail_properties_section" class="mb-6 hidden">
                    <h4 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                        <svg class="w-4 h-4 mr-1 text-cyan-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                        </svg>
                        속성 (Properties)
                        <span class="ml-2 text-xs text-gray-400">멀티컬럼, 추가 설정 등</span>
                    </h4>
                    <pre id="detail_properties" class="bg-gray-900 text-cyan-400 p-4 rounded-lg text-xs overflow-x-auto max-h-48"></pre>
                </div>

                <!-- Validation Rules (JSON) -->
                <div id="detail_validation_section" class="mb-6 hidden">
                    <h4 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                        <svg class="w-4 h-4 mr-1 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                        </svg>
                        유효성 검사 (Validation Rules)
                    </h4>
                    <pre id="detail_validation_rules" class="bg-gray-900 text-yellow-400 p-4 rounded-lg text-xs overflow-x-auto max-h-48"></pre>
                </div>

                <!-- Display Condition (JSON) -->
                <div id="detail_display_condition_section" class="mb-6 hidden">
                    <h4 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                        <svg class="w-4 h-4 mr-1 text-pink-600" 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>
                        표시 조건 (Display Condition)
                    </h4>
                    <pre id="detail_display_condition" class="bg-gray-900 text-pink-400 p-4 rounded-lg text-xs overflow-x-auto max-h-48"></pre>
                </div>

                <!-- 시간 정보 -->
                <div class="mb-6">
                    <h4 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        시간 정보
                    </h4>
                    <div class="grid grid-cols-2 gap-4 bg-gray-50 rounded-lg p-4 text-xs">
                        <div>
                            <span class="text-gray-500">생성일:</span>
                            <span id="detail_created_at" class="ml-2">-</span>
                        </div>
                        <div>
                            <span class="text-gray-500">수정일:</span>
                            <span id="detail_updated_at" class="ml-2">-</span>
                        </div>
                        <div id="detail_locked_info" class="col-span-2 hidden">
                            <span class="text-gray-500">잠금 정보:</span>
                            <span id="detail_locked_at" class="ml-2 text-orange-600">-</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="sticky bottom-0 bg-white border-t border-gray-200 px-6 py-4 flex justify-end gap-2">
                <button type="button" onclick="closeDetailModal()"
                        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-2xl w-full max-h-[90vh] overflow-y-auto">
            <div class="sticky top-0 bg-white border-b border-gray-200 px-6 py-4 flex justify-between items-center">
                <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)" class="p-6">
                <input type="hidden" name="id" id="edit_id">
                <input type="hidden" name="storage_type" id="edit_storage_type">

                <!-- 기본 정보 섹션 -->
                <div class="mb-6">
                    <h4 class="text-sm font-semibold text-gray-700 mb-3 pb-2 border-b">기본 정보</h4>
                    <div class="grid grid-cols-2 gap-4">
                        <!-- 소스 테이블 -->
                        <div>
                            <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 font-mono">
                                <option value="">미지정</option>
                                @foreach($sourceTables as $table => $label)
                                    <option value="{{ $table }}">{{ $table }} ({{ $label }})</option>
                                @endforeach
                            </select>
                            <p id="edit_source_table_hint" class="text-xs text-gray-500 mt-1 hidden">시스템 필드는 변경 불가</p>
                        </div>

                        <!-- 필드 키 -->
                        <div>
                            <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"
                                   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 font-mono">
                            <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>
                            <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>
                            <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>
                            <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>

                        <!-- Placeholder -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Placeholder</label>
                            <input type="text" name="placeholder" id="edit_placeholder"
                                   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="col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">설명</label>
                            <textarea name="description" id="edit_description" rows="2"
                                      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"></textarea>
                        </div>
                    </div>
                </div>

                <!-- 상태 설정 섹션 -->
                <div class="mb-6">
                    <h4 class="text-sm font-semibold text-gray-700 mb-3 pb-2 border-b">상태 설정</h4>
                    <div class="flex flex-wrap gap-6">
                        <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>
                        <label class="flex items-center">
                            <input type="checkbox" name="is_active" id="edit_is_active" value="1" class="rounded border-gray-300 text-green-600 focus:ring-green-500">
                            <span class="ml-2 text-sm text-gray-700">활성화</span>
                        </label>
                        <label class="flex items-center">
                            <input type="checkbox" name="is_locked" id="edit_is_locked" value="1" class="rounded border-gray-300 text-orange-600 focus:ring-orange-500">
                            <span class="ml-2 text-sm text-gray-700">잠금</span>
                        </label>
                    </div>
                </div>

                <!-- JSON 필드 섹션 -->
                <div class="mb-6">
                    <h4 class="text-sm font-semibold text-gray-700 mb-3 pb-2 border-b flex items-center justify-between">
                        <span>고급 설정 (JSON)</span>
                        <button type="button" onclick="toggleJsonHelp()" class="text-xs text-blue-600 hover:text-blue-800">
                            입력 도움말
                        </button>
                    </h4>

                    <!-- JSON 도움말 -->
                    <div id="jsonHelp" class="hidden mb-4 p-3 bg-blue-50 rounded-lg text-xs text-blue-800">
                        <p class="font-medium mb-2">JSON 입력 예시:</p>
                        <div class="space-y-2 font-mono">
                            <p><strong>옵션 (드롭다운용):</strong> [{"label": "옵션1", "value": "opt1"}, {"label": "옵션2", "value": "opt2"}]</p>
                            <p><strong>속성 (멀티컬럼):</strong> {"multiColumn": true, "columnCount": 2, "columnNames": ["가로", "세로"]}</p>
                            <p><strong>유효성:</strong> {"minLength": 1, "maxLength": 100, "pattern": "^[a-zA-Z]+$"}</p>
                            <p><strong>표시조건:</strong> {"targetType": "field", "fieldConditions": [{"fieldKey": "type", "expectedValue": "A"}]}</p>
                        </div>
                    </div>

                    <!-- Options -->
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1 flex items-center">
                            <span class="w-2 h-2 bg-purple-500 rounded-full mr-2"></span>
                            옵션 (Options)
                            <span class="ml-2 text-xs text-gray-400">드롭다운 선택 항목</span>
                        </label>
                        <textarea name="options" id="edit_options" rows="3"
                                  placeholder='[{"label": "옵션1", "value": "opt1"}]'
                                  class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-purple-500 font-mono"></textarea>
                    </div>

                    <!-- Properties -->
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1 flex items-center">
                            <span class="w-2 h-2 bg-cyan-500 rounded-full mr-2"></span>
                            속성 (Properties)
                            <span class="ml-2 text-xs text-gray-400">멀티컬럼, 추가 설정</span>
                        </label>
                        <textarea name="properties" id="edit_properties" rows="3"
                                  placeholder='{"multiColumn": true, "columnCount": 2}'
                                  class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-cyan-500 font-mono"></textarea>
                    </div>

                    <!-- Validation Rules -->
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1 flex items-center">
                            <span class="w-2 h-2 bg-yellow-500 rounded-full mr-2"></span>
                            유효성 검사 (Validation Rules)
                        </label>
                        <textarea name="validation_rules" id="edit_validation_rules" rows="3"
                                  placeholder='{"minLength": 1, "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-yellow-500 font-mono"></textarea>
                    </div>

                    <!-- Display Condition -->
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1 flex items-center">
                            <span class="w-2 h-2 bg-pink-500 rounded-full mr-2"></span>
                            표시 조건 (Display Condition)
                        </label>
                        <textarea name="display_condition" id="edit_display_condition" rows="3"
                                  placeholder='{"targetType": "field", "fieldConditions": [...]}'
                                  class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-pink-500 font-mono"></textarea>
                    </div>
                </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 pt-4 border-t">
                    <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>

<!-- 시스템 필드 정의 추가/수정 모달 -->
<div id="sysDefModal" 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="closeSysDefModal()"></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 id="sysDefModalTitle" class="text-lg font-bold text-gray-800">시스템 필드 정의 추가</h3>
                <button onclick="closeSysDefModal()" 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="sysDefForm" onsubmit="submitSysDefForm(event)">
                <input type="hidden" name="id" id="sysDef_id">

                <div class="grid grid-cols-2 gap-4">
                    <!-- 소스 테이블 -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">소스 테이블 <span class="text-red-500">*</span></label>
                        <select name="source_table" id="sysDef_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-indigo-500 font-mono">
                            <option value="">선택하세요</option>
                            @foreach($sourceTables as $table => $label)
                                <option value="{{ $table }}" data-label="{{ $label }}">{{ $table }} ({{ $label }})</option>
                            @endforeach
                            <option value="_new">+ 새 테이블 추가</option>
                        </select>
                    </div>

                    <!-- 소스 테이블 라벨 -->
                    <div id="newSourceTableGroup" class="hidden">
                        <label class="block text-sm font-medium text-gray-700 mb-1">새 테이블명</label>
                        <input type="text" id="sysDef_new_source_table" placeholder="테이블명 (영문)"
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 font-mono">
                    </div>

                    <div id="sourceLabelGroup">
                        <label class="block text-sm font-medium text-gray-700 mb-1">테이블 라벨 <span class="text-red-500">*</span></label>
                        <input type="text" name="source_table_label" id="sysDef_source_table_label" 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-indigo-500">
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-4 mt-4">
                    <!-- 필드 키 -->
                    <div>
                        <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" id="sysDef_field_key" required
                               pattern="^[a-zA-Z0-9_]+$"
                               maxlength="100"
                               placeholder="예: product_code"
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 font-mono">
                        <p class="text-xs text-gray-500 mt-1">영문, 숫자, _ 만 사용</p>
                    </div>

                    <!-- 필드명 -->
                    <div>
                        <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="sysDef_field_name" required
                               maxlength="100"
                               placeholder="예: 제품코드"
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-4 mt-4">
                    <!-- 필드 타입 -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">필드 타입 <span class="text-red-500">*</span></label>
                        <select name="field_type" id="sysDef_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-indigo-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>
                        <label class="block text-sm font-medium text-gray-700 mb-1">순서</label>
                        <input type="number" name="order_no" id="sysDef_order_no"
                               min="0"
                               placeholder="자동 설정"
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    </div>
                </div>

                <!-- 기본값 -->
                <div class="mt-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">기본값</label>
                    <input type="text" name="default_value" id="sysDef_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-indigo-500">
                </div>

                <!-- 체크박스 옵션 -->
                <div class="mt-4 flex flex-wrap gap-6">
                    <label class="flex items-center">
                        <input type="checkbox" name="is_required" id="sysDef_is_required" value="1" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                        <span class="ml-2 text-sm text-gray-700">필수 입력</span>
                    </label>
                    <label class="flex items-center">
                        <input type="checkbox" name="is_seed_default" id="sysDef_is_seed_default" value="1" checked class="rounded border-gray-300 text-green-600 focus:ring-green-500">
                        <span class="ml-2 text-sm text-gray-700">기본 시딩 대상</span>
                    </label>
                </div>

                <!-- 옵션 (JSON) -->
                <div id="sysDefOptionsGroup" class="mt-4 hidden">
                    <label class="block text-sm font-medium text-gray-700 mb-1">옵션 (드롭다운용 JSON)</label>
                    <textarea name="options" id="sysDef_options" rows="3"
                              placeholder='[{"label": "옵션1", "value": "opt1"}, {"label": "옵션2", "value": "opt2"}]'
                              class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 font-mono"></textarea>
                </div>

                <!-- 버튼 -->
                <div class="flex justify-end gap-2 mt-6">
                    <button type="button" onclick="closeSysDefModal()"
                            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-indigo-600 hover:bg-indigo-700 text-white rounded-lg text-sm font-medium transition-colors">
                        저장
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 소스 테이블 추가 모달 (DB 테이블 선택) -->
<div id="sourceTableModal" 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="closeSourceTableModal()"></div>
        <div class="relative bg-white rounded-lg shadow-xl max-w-2xl 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="closeSourceTableModal()" 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 class="mb-4">
                <div class="relative">
                    <input type="text" id="srcTbl_search" placeholder="테이블명으로 검색..."
                           class="w-full px-3 py-2 pl-10 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 font-mono"
                           oninput="filterDatabaseTables()">
                    <svg class="w-5 h-5 absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                    </svg>
                </div>
                <div class="flex items-center gap-4 mt-2">
                    <label class="flex items-center text-xs text-gray-600">
                        <input type="checkbox" id="srcTbl_unregisteredOnly" class="mr-1" checked onchange="loadDatabaseTables()">
                        등록되지 않은 테이블만
                    </label>
                    <span id="srcTbl_tableCount" class="text-xs text-gray-500"></span>
                </div>
            </div>

            <!-- 테이블 목록 -->
            <div class="mb-4 border border-gray-200 rounded-lg overflow-hidden">
                <div class="max-h-64 overflow-y-auto" id="srcTbl_tableList">
                    <div class="p-8 text-center text-gray-500">
                        <svg class="w-8 h-8 mx-auto mb-2 animate-spin text-gray-400" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                        <p class="text-sm">테이블 목록을 불러오는 중...</p>
                    </div>
                </div>
            </div>

            <!-- 선택된 테이블 정보 -->
            <div id="srcTbl_selectedInfo" class="hidden mb-4 p-4 bg-emerald-50 border border-emerald-200 rounded-lg">
                <div class="flex items-center justify-between mb-3">
                    <div>
                        <span class="text-sm font-medium text-emerald-700">선택된 테이블:</span>
                        <code id="srcTbl_selectedTable" class="ml-2 px-2 py-0.5 bg-emerald-100 text-emerald-800 rounded font-mono text-sm"></code>
                    </div>
                    <button type="button" onclick="clearSelectedTable()" class="text-emerald-600 hover:text-emerald-800 text-xs">
                        선택 해제
                    </button>
                </div>
                <!-- 라벨 입력 -->
                <div class="mb-3">
                    <label class="block text-sm font-medium text-gray-700 mb-1">테이블 라벨 (한글) <span class="text-red-500">*</span></label>
                    <input type="text" id="srcTbl_source_table_label" required
                           maxlength="50"
                           placeholder="예: 제품, 주문, 자재"
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500">
                </div>
                <!-- 컬럼 목록 -->
                <div>
                    <p class="text-xs font-medium text-gray-600 mb-2">컬럼 목록</p>
                    <div id="srcTbl_columns" class="flex flex-wrap gap-1 max-h-24 overflow-y-auto">
                        <!-- 컬럼 목록이 여기 표시됨 -->
                    </div>
                </div>
            </div>

            <!-- 안내 -->
            <div class="p-3 bg-gray-50 rounded-lg text-xs text-gray-600 mb-4">
                <p class="font-medium mb-1">안내</p>
                <p>데이터베이스에 있는 테이블 중 필드 관리에 등록할 테이블을 선택하세요.</p>
                <p class="mt-1 text-gray-500">시스템 테이블(migrations, sessions 등)은 표시되지 않습니다.</p>
            </div>

            <!-- 버튼 -->
            <div class="flex justify-end gap-2">
                <button type="button" onclick="closeSourceTableModal()"
                        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="button" onclick="submitSourceTableForm()"
                        id="srcTbl_submitBtn"
                        disabled
                        class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg text-sm font-medium transition-colors disabled:bg-gray-300 disabled:cursor-not-allowed">
                    등록
                </button>
            </div>
        </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 === 'sysdefs') {
            htmx.trigger('#system-definitions', 'sysDefsRefresh');
        } else if (tab === 'errors') {
            htmx.trigger('#error-logs', 'errorRefresh');
        }
    }

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

    // 페이지 변경 핸들러 (pagination 컴포넌트에서 호출)
    window.handlePageChange = function(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 이벤트 트리거
            htmx.trigger('#custom-fields', 'customRefresh');
        }
    };

    // 페이지당 항목 수 변경 핸들러 (pagination 컴포넌트에서 호출)
    window.handlePerPageChange = function(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 이벤트 트리거
            htmx.trigger('#custom-fields', 'customRefresh');
        }
    };

    // 휴지통 비우기 (삭제된 필드 영구 삭제)
    function purgeDeletedFields() {
        showConfirm('삭제된 모든 필드를 영구 삭제하시겠습니까?\n\n이 작업은 되돌릴 수 없습니다.', () => {
            fetch('/api/admin/item-fields/purge-deleted', {
                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) {
                    if (data.purged_count > 0) {
                        showToast(data.message, 'success');
                        htmx.trigger('#custom-fields', 'customRefresh');
                    } else {
                        showToast(data.message, 'info');
                    }
                } else {
                    showToast(data.message || '휴지통 비우기에 실패했습니다.', 'error');
                }
            })
            .catch(err => {
                console.error(err);
                showToast('오류가 발생했습니다.', 'error');
            });
        }, {
            title: '휴지통 비우기',
            icon: 'warning',
            confirmText: '영구 삭제',
        });
    }

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

    // 시딩 탭에서 필드 관리 탭으로 이동 (source_table 필터링)
    window.goToFieldManagement = function(sourceTable) {
        // 1. 소스 테이블 필터 설정
        const sourceTableSelect = document.querySelector('#customFilterForm select[name="source_table"]');
        if (sourceTableSelect) {
            sourceTableSelect.value = sourceTable;
        }

        // 2. 필드 유형을 '시스템'으로 설정
        setFieldCategory('system');

        // 3. 필드 관리 탭으로 전환 (데이터 로드 포함)
        switchTab('custom');
    };

    // 오류 처리 공통 함수
    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.openDetailModal = function(field) {
        const modal = document.getElementById('detailModal');
        const typeLabels = {
            'textbox': '텍스트',
            'number': '숫자',
            'dropdown': '드롭다운',
            'checkbox': '체크박스',
            'date': '날짜',
            'textarea': '텍스트영역'
        };

        // 기본 정보
        document.getElementById('detail_field_key').textContent = field.field_key || '-';
        document.getElementById('detail_field_name').textContent = field.field_name || '-';
        document.getElementById('detail_source_table').textContent = field.source_table || '-';
        document.getElementById('detail_field_type').textContent = typeLabels[field.field_type] || field.field_type || '-';
        document.getElementById('detail_storage_type').textContent = field.storage_type === 'column' ? '시스템 (컬럼)' : '커스텀 (JSON)';
        document.getElementById('detail_category').textContent = field.category || '-';

        // 상태
        document.getElementById('detail_is_required').innerHTML = field.is_required ? '<span class="text-green-600 font-medium">예</span>' : '<span class="text-gray-400">아니오</span>';
        document.getElementById('detail_is_active').innerHTML = field.is_active ? '<span class="text-green-600 font-medium">활성</span>' : '<span class="text-gray-400">비활성</span>';
        document.getElementById('detail_is_locked').innerHTML = field.is_locked ? '<span class="text-orange-600 font-medium">잠금</span>' : '<span class="text-gray-400">미잠금</span>';
        document.getElementById('detail_is_common').innerHTML = field.is_common ? '<span class="text-blue-600 font-medium">공통</span>' : '<span class="text-gray-400">개별</span>';

        // 입력 설정
        document.getElementById('detail_default_value').textContent = field.default_value || '-';
        document.getElementById('detail_placeholder').textContent = field.placeholder || '-';
        document.getElementById('detail_description').textContent = field.description || '-';

        // JSON 필드들
        const showJsonSection = (sectionId, elementId, data) => {
            const section = document.getElementById(sectionId);
            const element = document.getElementById(elementId);
            if (data) {
                try {
                    const parsed = typeof data === 'string' ? JSON.parse(data) : data;
                    element.textContent = JSON.stringify(parsed, null, 2);
                    section.classList.remove('hidden');
                } catch (e) {
                    element.textContent = data;
                    section.classList.remove('hidden');
                }
            } else {
                section.classList.add('hidden');
            }
        };

        showJsonSection('detail_options_section', 'detail_options', field.options);
        showJsonSection('detail_properties_section', 'detail_properties', field.properties);
        showJsonSection('detail_validation_section', 'detail_validation_rules', field.validation_rules);
        showJsonSection('detail_display_condition_section', 'detail_display_condition', field.display_condition);

        // 시간 정보
        document.getElementById('detail_created_at').textContent = field.created_at ? new Date(field.created_at).toLocaleString('ko-KR') : '-';
        document.getElementById('detail_updated_at').textContent = field.updated_at ? new Date(field.updated_at).toLocaleString('ko-KR') : '-';

        // 잠금 정보
        const lockedInfo = document.getElementById('detail_locked_info');
        if (field.is_locked && field.locked_at) {
            document.getElementById('detail_locked_at').textContent = `${new Date(field.locked_at).toLocaleString('ko-KR')} (ID: ${field.locked_by || '-'})`;
            lockedInfo.classList.remove('hidden');
        } else {
            lockedInfo.classList.add('hidden');
        }

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

    // 상세보기 모달 닫기
    function closeDetailModal() {
        document.getElementById('detailModal').classList.add('hidden');
    }

    // JSON 도움말 토글
    function toggleJsonHelp() {
        document.getElementById('jsonHelp').classList.toggle('hidden');
    }

    // 수정 모달 열기
    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_default_value').value = field.default_value || '';
        document.getElementById('edit_placeholder').value = field.placeholder || '';
        document.getElementById('edit_description').value = field.description || '';

        // 체크박스
        document.getElementById('edit_is_required').checked = field.is_required;
        document.getElementById('edit_is_active').checked = field.is_active;
        document.getElementById('edit_is_locked').checked = field.is_locked;

        // JSON 필드 (문자열로 변환)
        const formatJson = (data) => {
            if (!data) return '';
            try {
                const parsed = typeof data === 'string' ? JSON.parse(data) : data;
                return JSON.stringify(parsed, null, 2);
            } catch (e) {
                return data;
            }
        };

        document.getElementById('edit_options').value = formatJson(field.options);
        document.getElementById('edit_properties').value = formatJson(field.properties);
        document.getElementById('edit_validation_rules').value = formatJson(field.validation_rules);
        document.getElementById('edit_display_condition').value = formatJson(field.display_condition);

        // 시스템 필드인 경우 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') : '-';

        // JSON 도움말 숨기기
        document.getElementById('jsonHelp').classList.add('hidden');

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

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

    // JSON 파싱 헬퍼 (빈 문자열이면 null 반환)
    function parseJsonField(value) {
        if (!value || value.trim() === '') return null;
        try {
            return JSON.parse(value);
        } catch (e) {
            showToast('JSON 형식이 올바르지 않습니다: ' + e.message, 'error');
            throw e;
        }
    }

    // 수정 폼 제출
    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';

        // JSON 필드 파싱 시도
        let options, properties, validationRules, displayCondition;
        try {
            options = parseJsonField(formData.get('options'));
            properties = parseJsonField(formData.get('properties'));
            validationRules = parseJsonField(formData.get('validation_rules'));
            displayCondition = parseJsonField(formData.get('display_condition'));
        } catch (e) {
            return; // JSON 파싱 에러 시 중단
        }

        const data = {
            field_name: formData.get('field_name'),
            field_type: formData.get('field_type'),
            is_required: formData.get('is_required') === '1',
            is_active: formData.get('is_active') === '1',
            is_locked: formData.get('is_locked') === '1',
            default_value: formData.get('default_value') || null,
            placeholder: formData.get('placeholder') || null,
            description: formData.get('description') || null,
            options: options,
            properties: properties,
            validation_rules: validationRules,
            display_condition: displayCondition
        };

        // 커스텀 필드인 경우에만 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'));
    }

    // 필드 유형 버튼 그룹 선택
    function setFieldCategory(value) {
        // hidden input 값 업데이트
        document.getElementById('field_category_input').value = value;

        // 버튼 스타일 업데이트
        document.querySelectorAll('.field-category-btn').forEach(btn => {
            if (btn.dataset.value === value) {
                btn.classList.remove('bg-white', 'text-gray-700', 'hover:bg-gray-50');
                btn.classList.add('bg-gray-800', 'text-white');
            } else {
                btn.classList.remove('bg-gray-800', 'text-white');
                btn.classList.add('bg-white', 'text-gray-700', 'hover:bg-gray-50');
            }
        });

        // 즉시 검색 실행
        htmx.trigger('#custom-fields', 'customRefresh');
    }

    // =========================================================================
    // 시스템 필드 정의 관리 (System Field Definitions CRUD)
    // =========================================================================

    // 시스템 필드 정의 필터 폼 제출
    document.getElementById('sysDefsFilterForm').addEventListener('submit', function(e) {
        e.preventDefault();
        htmx.trigger('#system-definitions', 'sysDefsRefresh');
    });

    // 소스 테이블 드롭다운 변경 (새 테이블 입력 필드 표시/숨김)
    document.getElementById('sysDef_source_table').addEventListener('change', function(e) {
        const newTableGroup = document.getElementById('newSourceTableGroup');
        const labelGroup = document.getElementById('sourceLabelGroup');
        const labelInput = document.getElementById('sysDef_source_table_label');

        if (this.value === '_new') {
            newTableGroup.classList.remove('hidden');
            labelInput.value = '';
            labelInput.removeAttribute('readonly');
        } else {
            newTableGroup.classList.add('hidden');
            document.getElementById('sysDef_new_source_table').value = '';

            // 기존 테이블 선택 시 라벨 자동 채우기
            const selectedOption = this.options[this.selectedIndex];
            if (selectedOption && selectedOption.dataset.label) {
                labelInput.value = selectedOption.dataset.label;
            }
        }
    });

    // 필드 타입 변경 시 옵션 필드 표시/숨김
    document.getElementById('sysDef_field_type').addEventListener('change', function(e) {
        const optionsGroup = document.getElementById('sysDefOptionsGroup');
        if (this.value === 'dropdown') {
            optionsGroup.classList.remove('hidden');
        } else {
            optionsGroup.classList.add('hidden');
        }
    });

    // 시스템 필드 정의 추가 모달 열기
    function openSysDefCreateModal() {
        document.getElementById('sysDefModalTitle').textContent = '시스템 필드 정의 추가';
        document.getElementById('sysDefForm').reset();
        document.getElementById('sysDef_id').value = '';
        document.getElementById('sysDef_is_seed_default').checked = true;
        document.getElementById('newSourceTableGroup').classList.add('hidden');
        document.getElementById('sysDefOptionsGroup').classList.add('hidden');
        document.getElementById('sysDefModal').classList.remove('hidden');
    }

    // 시스템 필드 정의 모달 닫기
    function closeSysDefModal() {
        document.getElementById('sysDefModal').classList.add('hidden');
        document.getElementById('sysDefForm').reset();
    }

    // 시스템 필드 정의 수정 모달 열기
    window.openSysDefEditModal = function(def) {
        document.getElementById('sysDefModalTitle').textContent = '시스템 필드 정의 수정';
        document.getElementById('sysDef_id').value = def.id;
        document.getElementById('sysDef_source_table').value = def.source_table;
        document.getElementById('sysDef_source_table_label').value = def.source_table_label || '';
        document.getElementById('sysDef_field_key').value = def.field_key;
        document.getElementById('sysDef_field_name').value = def.field_name;
        document.getElementById('sysDef_field_type').value = def.field_type;
        document.getElementById('sysDef_order_no').value = def.order_no || '';
        document.getElementById('sysDef_default_value').value = def.default_value || '';
        document.getElementById('sysDef_is_required').checked = def.is_required;
        document.getElementById('sysDef_is_seed_default').checked = def.is_seed_default;

        // 옵션 필드 처리
        const optionsGroup = document.getElementById('sysDefOptionsGroup');
        if (def.field_type === 'dropdown') {
            optionsGroup.classList.remove('hidden');
            if (def.options) {
                try {
                    const opts = typeof def.options === 'string' ? JSON.parse(def.options) : def.options;
                    document.getElementById('sysDef_options').value = JSON.stringify(opts, null, 2);
                } catch (e) {
                    document.getElementById('sysDef_options').value = def.options;
                }
            }
        } else {
            optionsGroup.classList.add('hidden');
        }

        document.getElementById('newSourceTableGroup').classList.add('hidden');
        document.getElementById('sysDefModal').classList.remove('hidden');
    };

    // 시스템 필드 정의 폼 제출 (추가/수정)
    function submitSysDefForm(e) {
        e.preventDefault();
        const form = e.target;
        const formData = new FormData(form);
        const id = formData.get('id');
        const isEdit = id && id !== '';

        // 소스 테이블 처리 (새 테이블 추가 시)
        let sourceTable = formData.get('source_table');
        if (sourceTable === '_new') {
            sourceTable = document.getElementById('sysDef_new_source_table').value;
            if (!sourceTable) {
                showToast('새 테이블명을 입력하세요.', 'error');
                return;
            }
        }

        // 옵션 JSON 파싱
        let options = null;
        const optionsText = formData.get('options');
        if (optionsText && optionsText.trim()) {
            try {
                options = JSON.parse(optionsText);
            } catch (e) {
                showToast('옵션 JSON 형식이 올바르지 않습니다: ' + e.message, 'error');
                return;
            }
        }

        const data = {
            source_table: sourceTable,
            source_table_label: formData.get('source_table_label'),
            field_key: formData.get('field_key'),
            field_name: formData.get('field_name'),
            field_type: formData.get('field_type'),
            order_no: formData.get('order_no') ? parseInt(formData.get('order_no')) : null,
            default_value: formData.get('default_value') || null,
            is_required: formData.get('is_required') === '1',
            is_seed_default: formData.get('is_seed_default') === '1',
            options: options
        };

        const url = isEdit
            ? `/api/admin/item-fields/system-definitions/${id}`
            : '/api/admin/item-fields/system-definitions';
        const method = isEdit ? 'PUT' : 'POST';

        fetch(url, {
            method: method,
            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');
                closeSysDefModal();
                htmx.trigger('#system-definitions', 'sysDefsRefresh');
            } else {
                showToast(data.message || '저장에 실패했습니다.', 'error');
            }
        })
        .catch(err => {
            console.error('Error:', err);
            showToast('오류가 발생했습니다.', 'error');
        });
    }

    // 시스템 필드 정의 삭제
    window.deleteSysDefField = function(id, name) {
        showDeleteConfirm(`"${name}" 시스템 필드 정의`, () => {
            fetch(`/api/admin/item-fields/system-definitions/${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('#system-definitions', 'sysDefsRefresh');
                } else {
                    showToast(data.message || '삭제에 실패했습니다.', 'error');
                }
            })
            .catch(err => {
                console.error('Error:', err);
                showToast('오류가 발생했습니다.', 'error');
            });
        });
    };

    // =========================================================================
    // 소스 테이블 관리
    // =========================================================================

    // DB 테이블 목록 캐시
    let databaseTablesCache = [];
    let selectedDbTable = null;

    // 소스 테이블 추가 모달 열기
    function openSourceTableModal() {
        document.getElementById('sourceTableModal').classList.remove('hidden');
        document.getElementById('srcTbl_search').value = '';
        document.getElementById('srcTbl_source_table_label').value = '';
        document.getElementById('srcTbl_unregisteredOnly').checked = true;
        clearSelectedTable();
        loadDatabaseTables();
    }

    // 소스 테이블 모달 닫기
    function closeSourceTableModal() {
        document.getElementById('sourceTableModal').classList.add('hidden');
        selectedDbTable = null;
    }

    // DB 테이블 목록 로드
    function loadDatabaseTables() {
        const unregisteredOnly = document.getElementById('srcTbl_unregisteredOnly').checked;
        const listContainer = document.getElementById('srcTbl_tableList');

        // 로딩 표시
        listContainer.innerHTML = `
            <div class="p-8 text-center text-gray-500">
                <svg class="w-8 h-8 mx-auto mb-2 animate-spin text-gray-400" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
                <p class="text-sm">테이블 목록을 불러오는 중...</p>
            </div>
        `;

        fetch(`/api/admin/item-fields/database-tables?unregistered_only=${unregisteredOnly}`, {
            headers: {
                'Accept': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                databaseTablesCache = data.data;
                renderDatabaseTables(data.data);
                document.getElementById('srcTbl_tableCount').textContent = `총 ${data.total}개 테이블`;
            } else {
                listContainer.innerHTML = `<div class="p-8 text-center text-red-500 text-sm">테이블 목록을 불러오지 못했습니다.</div>`;
            }
        })
        .catch(err => {
            console.error('Error:', err);
            listContainer.innerHTML = `<div class="p-8 text-center text-red-500 text-sm">오류가 발생했습니다.</div>`;
        });
    }

    // 테이블 목록 검색 필터
    function filterDatabaseTables() {
        const search = document.getElementById('srcTbl_search').value.toLowerCase();
        const filtered = databaseTablesCache.filter(t => t.table.toLowerCase().includes(search));
        renderDatabaseTables(filtered);
        document.getElementById('srcTbl_tableCount').textContent = `${filtered.length}개 검색됨`;
    }

    // 테이블 목록 렌더링
    function renderDatabaseTables(tables) {
        const listContainer = document.getElementById('srcTbl_tableList');

        if (tables.length === 0) {
            listContainer.innerHTML = `
                <div class="p-8 text-center text-gray-500">
                    <svg class="w-10 h-10 mx-auto mb-2 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" />
                    </svg>
                    <p class="text-sm">등록 가능한 테이블이 없습니다.</p>
                </div>
            `;
            return;
        }

        let html = '<div class="divide-y divide-gray-100">';
        tables.forEach(t => {
            const statusBadge = t.is_registered
                ? '<span class="px-2 py-0.5 bg-gray-100 text-gray-500 text-xs rounded">등록됨</span>'
                : '<span class="px-2 py-0.5 bg-emerald-100 text-emerald-700 text-xs rounded">등록 가능</span>';

            const typeLabels = [...new Set(t.columns.map(c => c.type_label))].slice(0, 4);
            const typeBadges = typeLabels.map(label =>
                `<span class="px-1.5 py-0.5 bg-blue-50 text-blue-600 text-xs rounded">${label}</span>`
            ).join(' ');

            html += `
                <div class="p-3 hover:bg-gray-50 cursor-pointer transition-colors ${t.is_registered ? 'opacity-50' : ''}"
                     onclick="${t.is_registered ? '' : `selectDatabaseTable('${t.table}')`}">
                    <div class="flex items-center justify-between mb-1">
                        <code class="font-mono text-sm font-medium text-gray-800">${t.table}</code>
                        ${statusBadge}
                    </div>
                    <div class="flex items-center gap-2 text-xs text-gray-500">
                        <span>${t.column_count}개 컬럼</span>
                        <span class="text-gray-300">|</span>
                        ${typeBadges}
                    </div>
                </div>
            `;
        });
        html += '</div>';
        listContainer.innerHTML = html;
    }

    // 테이블 선택
    function selectDatabaseTable(tableName) {
        selectedDbTable = tableName;

        // 선택된 테이블 정보 표시
        document.getElementById('srcTbl_selectedInfo').classList.remove('hidden');
        document.getElementById('srcTbl_selectedTable').textContent = tableName;
        document.getElementById('srcTbl_submitBtn').disabled = false;

        // 컬럼 정보 로드
        const columnsContainer = document.getElementById('srcTbl_columns');
        columnsContainer.innerHTML = '<span class="text-gray-400 text-xs">로딩 중...</span>';

        fetch(`/api/admin/item-fields/database-tables/${tableName}/columns`, {
            headers: {
                'Accept': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                columnsContainer.innerHTML = data.columns.map(col => {
                    // COMMENT가 있으면 표시, 없으면 컬럼명만
                    const displayName = col.comment
                        ? `<span class="font-medium text-gray-700">${col.comment}</span> <span class="font-mono text-gray-400">${col.name}</span>`
                        : `<span class="font-mono">${col.name}</span>`;
                    return `
                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs ${getColumnTypeColor(col.type)}">
                            ${displayName}
                            <span class="ml-1 text-gray-400">(${col.type_label})</span>
                        </span>
                    `;
                }).join('');
            }
        })
        .catch(err => {
            console.error('Error:', err);
            columnsContainer.innerHTML = '<span class="text-red-500 text-xs">컬럼 정보를 불러올 수 없습니다.</span>';
        });

        // 테이블명 기반 기본 라벨 제안
        const suggestedLabel = tableName
            .replace(/_/g, ' ')
            .replace(/\b\w/g, c => c.toUpperCase());
        document.getElementById('srcTbl_source_table_label').value = suggestedLabel;
        document.getElementById('srcTbl_source_table_label').focus();
    }

    // 컬럼 타입별 색상
    function getColumnTypeColor(type) {
        const colors = {
            'integer': 'bg-blue-100 text-blue-700',
            'bigint': 'bg-blue-100 text-blue-700',
            'smallint': 'bg-blue-100 text-blue-700',
            'decimal': 'bg-indigo-100 text-indigo-700',
            'float': 'bg-indigo-100 text-indigo-700',
            'string': 'bg-gray-100 text-gray-700',
            'varchar': 'bg-gray-100 text-gray-700',
            'text': 'bg-yellow-100 text-yellow-700',
            'boolean': 'bg-green-100 text-green-700',
            'date': 'bg-orange-100 text-orange-700',
            'datetime': 'bg-orange-100 text-orange-700',
            'timestamp': 'bg-orange-100 text-orange-700',
            'json': 'bg-purple-100 text-purple-700',
        };
        return colors[type] || 'bg-gray-100 text-gray-600';
    }

    // 테이블 선택 해제
    function clearSelectedTable() {
        selectedDbTable = null;
        document.getElementById('srcTbl_selectedInfo').classList.add('hidden');
        document.getElementById('srcTbl_selectedTable').textContent = '';
        document.getElementById('srcTbl_columns').innerHTML = '';
        document.getElementById('srcTbl_source_table_label').value = '';
        document.getElementById('srcTbl_submitBtn').disabled = true;
    }

    // 소스 테이블 폼 제출
    function submitSourceTableForm() {
        if (!selectedDbTable) {
            showToast('테이블을 선택하세요.', 'error');
            return;
        }

        const label = document.getElementById('srcTbl_source_table_label').value.trim();
        if (!label) {
            showToast('테이블 라벨을 입력하세요.', 'error');
            document.getElementById('srcTbl_source_table_label').focus();
            return;
        }

        const data = {
            source_table: selectedDbTable,
            source_table_label: label
        };

        fetch('/api/admin/item-fields/source-tables', {
            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');
                closeSourceTableModal();
                // 페이지 새로고침으로 소스 테이블 드롭다운 갱신
                location.reload();
            } else {
                showToast(data.message || '등록에 실패했습니다.', 'error');
            }
        })
        .catch(err => {
            console.error('Error:', err);
            showToast('오류가 발생했습니다.', 'error');
        });
    }

    // 소스 테이블 필드명 동기화 (DB COMMENT로 업데이트)
    window.syncTableFieldNames = function(sourceTable) {
        if (!confirm(`"${sourceTable}" 테이블의 필드명을 DB COMMENT에서 동기화하시겠습니까?`)) {
            return;
        }

        fetch(`/api/admin/item-fields/source-tables/${sourceTable}/sync-field-names`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showToast(data.message, 'success');
                htmx.trigger('#system-definitions', 'sysDefsRefresh');
            } else {
                showToast(data.message || '동기화에 실패했습니다.', 'error');
            }
        })
        .catch(err => {
            console.error('Error:', err);
            showToast('오류가 발생했습니다.', 'error');
        });
    };

    // 소스 테이블 삭제
    window.deleteSourceTable = function(sourceTable, tableLabel) {
        showDeleteConfirm(`"${tableLabel}" 테이블과 모든 필드 정의`, () => {
            fetch(`/api/admin/item-fields/source-tables/${sourceTable}`, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showToast(data.message, 'success');
                    // 페이지 새로고침으로 소스 테이블 드롭다운 갱신
                    location.reload();
                } else {
                    showToast(data.message || '삭제에 실패했습니다.', 'error');
                }
            })
            .catch(err => {
                console.error('Error:', err);
                showToast('오류가 발생했습니다.', 'error');
            });
        });
    };
</script>
@endpush