sam-manage/resources/views/item-fields/partials/custom-fields.blade.php

@if(isset($error))
    <div class="p-8 text-center">
        <div class="text-yellow-600 mb-2">
            <svg class="w-12 h-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
            </svg>
        </div>
        <p class="text-gray-600">{{ $error }}</p>
    </div>
@elseif($fields->isEmpty())
    <div class="p-8 text-center text-gray-500">
        <div class="mb-2">
            <svg class="w-12 h-12 mx-auto text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
            </svg>
        </div>
        <p>등록된 필드가 없습니다.</p>
        <p class="text-xs mt-1">시스템 필드 시딩 또는 커스텀 필드 추가를 해보세요.</p>
    </div>
@else
    <div class="overflow-x-auto">
        <table class="w-full">
            <thead class="bg-gray-50 border-b border-gray-200">
                <tr>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-8"></th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">상태</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">유형</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">소스 테이블</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">필드 키</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">필드명</th>
                    <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">타입</th>
                    <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">필수</th>
                    <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">설정</th>
                    <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">액션</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-200">
                @foreach($fields as $field)
                @php
                    $isSystemField = $field->is_common || $field->storage_type === 'column';
                    $hasOptions = !empty($field->options);
                    $hasProperties = !empty($field->properties);
                    $hasValidation = !empty($field->validation_rules);
                    $hasDisplayCondition = !empty($field->display_condition);
                    $hasAnyJson = $hasOptions || $hasProperties || $hasValidation || $hasDisplayCondition;
                    // 모델에서 이미 캐스팅된 경우 배열, 아니면 문자열
                    $optionsData = $hasOptions ? (is_array($field->options) ? $field->options : json_decode($field->options, true)) : null;
                    $propertiesData = $hasProperties ? (is_array($field->properties) ? $field->properties : json_decode($field->properties, true)) : null;
                    $validationData = $hasValidation ? (is_array($field->validation_rules) ? $field->validation_rules : json_decode($field->validation_rules, true)) : null;
                    $displayConditionData = $hasDisplayCondition ? (is_array($field->display_condition) ? $field->display_condition : json_decode($field->display_condition, true)) : null;
                @endphp
                <!-- 메인 Row -->
                <tr class="hover:bg-gray-50 {{ $isSystemField ? 'bg-blue-50/30' : '' }} {{ !$field->is_active ? 'opacity-50' : '' }} {{ $hasAnyJson ? 'cursor-pointer' : '' }}"
                    @if($hasAnyJson) onclick="toggleAccordion({{ $field->id }})" @endif>
                    <!-- 펼침 아이콘 -->
                    <td class="px-2 py-3 text-center">
                        @if($hasAnyJson)
                            <svg id="chevron-{{ $field->id }}" class="w-4 h-4 text-gray-400 transform transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                            </svg>
                        @endif
                    </td>
                    <!-- 상태 (활성/비활성, 잠금) -->
                    <td class="px-4 py-3">
                        <div class="flex items-center gap-1">
                            @if($field->is_active)
                                <span class="w-2 h-2 bg-green-500 rounded-full" title="활성"></span>
                            @else
                                <span class="w-2 h-2 bg-gray-400 rounded-full" title="비활성"></span>
                            @endif
                            @if($field->is_locked)
                                <svg class="w-4 h-4 text-orange-500" fill="currentColor" viewBox="0 0 20 20" title="잠금됨">
                                    <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
                                </svg>
                            @endif
                        </div>
                    </td>
                    <!-- 필드 유형 (시스템/커스텀) -->
                    <td class="px-4 py-3">
                        @if($isSystemField)
                            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                시스템
                            </span>
                        @else
                            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                커스텀
                            </span>
                        @endif
                    </td>
                    <!-- 소스 테이블 -->
                    <td class="px-4 py-3">
                        @if(empty($field->source_table))
                            <span class="text-gray-400 text-xs">미지정</span>
                        @else
                            <code class="text-xs font-mono text-gray-700 bg-gray-100 px-1.5 py-0.5 rounded">{{ $field->source_table }}</code>
                        @endif
                    </td>
                    <!-- 필드 키 -->
                    <td class="px-4 py-3">
                        @if(empty($field->field_key))
                            <span class="text-gray-400 text-xs">미지정</span>
                        @else
                            <code class="text-xs font-mono text-gray-700 bg-gray-100 px-1.5 py-0.5 rounded">{{ $field->field_key }}</code>
                        @endif
                    </td>
                    <!-- 필드명 -->
                    <td class="px-4 py-3">
                        <div class="font-medium text-gray-900 text-sm">
                            {{ $field->field_name }}
                            @if($field->is_required)
                                <span class="text-red-500">*</span>
                            @endif
                        </div>
                        @if($field->description)
                            <div class="text-xs text-gray-500 truncate max-w-[150px]" title="{{ $field->description }}">
                                {{ $field->description }}
                            </div>
                        @endif
                    </td>
                    <!-- 타입 -->
                    <td class="px-4 py-3 text-center">
                        @php
                            $typeLabels = [
                                'textbox' => ['label' => '텍스트', 'color' => 'gray'],
                                'number' => ['label' => '숫자', 'color' => 'blue'],
                                'dropdown' => ['label' => '드롭다운', 'color' => 'purple'],
                                'checkbox' => ['label' => '체크박스', 'color' => 'green'],
                                'date' => ['label' => '날짜', 'color' => 'orange'],
                                'textarea' => ['label' => '텍스트영역', 'color' => 'gray'],
                            ];
                            $typeInfo = $typeLabels[$field->field_type] ?? ['label' => $field->field_type, 'color' => 'gray'];
                        @endphp
                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-{{ $typeInfo['color'] }}-100 text-{{ $typeInfo['color'] }}-700">
                            {{ $typeInfo['label'] }}
                        </span>
                    </td>
                    <!-- 필수 여부 -->
                    <td class="px-4 py-3 text-center">
                        @if($field->is_required)
                            <svg class="w-4 h-4 inline text-green-600" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                            </svg>
                        @else
                            <span class="text-gray-300">-</span>
                        @endif
                    </td>
                    <!-- 설정 (options, properties, validation, display_condition) -->
                    <td class="px-4 py-3 text-center">
                        <div class="flex items-center justify-center gap-1">
                            @if($hasOptions)
                                <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-700">
                                    옵션
                                </span>
                            @endif
                            @if($hasProperties)
                                <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-cyan-100 text-cyan-700">
                                    속성
                                </span>
                            @endif
                            @if($hasValidation)
                                <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-yellow-100 text-yellow-700">
                                    검증
                                </span>
                            @endif
                            @if($hasDisplayCondition)
                                <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-pink-100 text-pink-700">
                                    조건
                                </span>
                            @endif
                            @if(!$hasAnyJson)
                                <span class="text-gray-300 text-xs">-</span>
                            @endif
                        </div>
                    </td>
                    <!-- 액션 -->
                    <td class="px-4 py-3 text-right" onclick="event.stopPropagation()">
                        <div class="flex justify-end gap-1">
                            <button onclick="openDetailModal({{ json_encode($field) }})"
                                    class="text-gray-500 hover:text-gray-700 p-1" title="상세보기">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                </svg>
                            </button>
                            <button onclick="openEditModal({{ json_encode($field) }})"
                                    class="text-blue-600 hover:text-blue-800 p-1" title="수정">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                                </svg>
                            </button>
                            @if(!$isSystemField)
                                <button onclick="deleteCustomField({{ $field->id }}, '{{ $field->field_name }}')"
                                        class="text-red-600 hover:text-red-800 p-1" title="삭제">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                    </svg>
                                </button>
                            @endif
                        </div>
                    </td>
                </tr>
                <!-- 아코디언 Row (JSON 상세) -->
                @if($hasAnyJson)
                <tr id="accordion-{{ $field->id }}" class="hidden bg-gray-50">
                    <td colspan="10" class="px-4 py-4">
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                            {{-- Options --}}
                            @if($hasOptions)
                            <div class="bg-white rounded-lg border border-purple-200 overflow-hidden">
                                <div class="bg-purple-50 px-3 py-2 border-b border-purple-200">
                                    <span class="text-xs font-semibold text-purple-700">옵션 (Options)</span>
                                </div>
                                <div class="p-3">
                                    @if(is_array($optionsData) && !empty($optionsData))
                                        @if(isset($optionsData[0]) && is_array($optionsData[0]))
                                            {{-- 배열 형태: [{label, value}, ...] --}}
                                            <table class="w-full text-xs">
                                                <thead>
                                                    <tr class="border-b">
                                                        <th class="text-left py-1 text-gray-500 font-medium">Label</th>
                                                        <th class="text-left py-1 text-gray-500 font-medium">Value</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach($optionsData as $opt)
                                                        <tr class="border-b border-gray-100 last:border-0">
                                                            <td class="py-1.5 text-gray-700">{{ $opt['label'] ?? '-' }}</td>
                                                            <td class="py-1.5 font-mono text-gray-600">{{ $opt['value'] ?? '-' }}</td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        @else
                                            {{-- Key-Value 객체 형태 --}}
                                            @include('item-fields.partials._key-value-table', ['data' => $optionsData])
                                        @endif
                                    @else
                                        <span class="text-xs text-gray-400">데이터 없음</span>
                                    @endif
                                </div>
                            </div>
                            @endif

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

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

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

    <!-- 요약 정보 -->
    <div class="px-4 py-3 bg-gray-50 border-t border-gray-200">
        <div class="flex flex-wrap items-center justify-between gap-2 text-sm text-gray-600">
            <div class="flex items-center gap-4">
                <span>총 {{ $fields->count() }}개</span>
                @php
                    $systemCount = $fields->filter(fn($f) => $f->is_common || $f->storage_type === 'column')->count();
                    $customCount = $fields->count() - $systemCount;
                    $activeCount = $fields->filter(fn($f) => $f->is_active)->count();
                    $lockedCount = $fields->filter(fn($f) => $f->is_locked)->count();
                    $withOptionsCount = $fields->filter(fn($f) => !empty($f->options))->count();
                @endphp
                <span class="text-blue-600">시스템: {{ $systemCount }}</span>
                <span class="text-green-600">커스텀: {{ $customCount }}</span>
            </div>
            <div class="flex items-center gap-4 text-xs">
                @if($activeCount < $fields->count())
                    <span class="text-gray-500">비활성: {{ $fields->count() - $activeCount }}개</span>
                @endif
                @if($lockedCount > 0)
                    <span class="text-orange-500">잠금: {{ $lockedCount }}개</span>
                @endif
                @if($withOptionsCount > 0)
                    <span class="text-purple-600">옵션설정: {{ $withOptionsCount }}개</span>
                @endif
            </div>
        </div>
    </div>

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

            if (accordion.classList.contains('hidden')) {
                accordion.classList.remove('hidden');
                chevron.classList.add('rotate-90');
            } else {
                accordion.classList.add('hidden');
                chevron.classList.remove('rotate-90');
            }
        }
    </script>
@endif