@extends('layouts.app')

@section('title', '바로빌설정')

@section('content')
<!-- 페이지 헤더 -->
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-6">
    <div>
        <h1 class="text-2xl font-bold text-gray-800">바로빌설정</h1>
        <p class="text-sm text-gray-500 mt-1">바로빌 API 연동을 위한 인증키 및 서버 설정을 관리합니다</p>
    </div>
    <button
        type="button"
        onclick="ConfigModal.openCreate()"
        class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition text-center w-full sm:w-auto flex items-center justify-center gap-2"
    >
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
        </svg>
        설정 추가
    </button>
</div>

<!-- 현재 테넌트 정보 카드 -->
@if($currentTenant)
<div class="rounded-xl shadow-lg p-5 mb-6" style="background: linear-gradient(to right, #6366f1, #9333ea); color: white;">
    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
        <div class="flex items-center gap-4">
            <div class="p-3 rounded-xl" style="background: rgba(255,255,255,0.2);">
                <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                </svg>
            </div>
            <div>
                <div class="flex items-center gap-2 mb-1">
                    <span class="px-2 py-0.5 rounded-full text-xs font-bold" style="background: rgba(255,255,255,0.2);">T-ID: {{ $currentTenant->id }}</span>
                    @if($currentTenant->id == 1)
                    <span class="px-2 py-0.5 rounded-full text-xs font-bold" style="background: #facc15; color: #713f12;">파트너사</span>
                    @endif
                </div>
                <h2 class="text-xl font-bold">{{ $currentTenant->company_name }}</h2>
            </div>
        </div>
        @if($barobillMember)
        <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 text-sm">
            <div class="rounded-lg p-2" style="background: rgba(255,255,255,0.1);">
                <p class="text-xs" style="color: rgba(255,255,255,0.6);">사업자번호</p>
                <p class="font-medium">{{ $barobillMember->biz_no }}</p>
            </div>
            <div class="rounded-lg p-2" style="background: rgba(255,255,255,0.1);">
                <p class="text-xs" style="color: rgba(255,255,255,0.6);">대표자</p>
                <p class="font-medium">{{ $barobillMember->ceo_name ?? '-' }}</p>
            </div>
            <div class="rounded-lg p-2" style="background: rgba(255,255,255,0.1);">
                <p class="text-xs" style="color: rgba(255,255,255,0.6);">담당자</p>
                <p class="font-medium">{{ $barobillMember->manager_name ?? '-' }}</p>
            </div>
            <div class="rounded-lg p-2" style="background: rgba(255,255,255,0.1);">
                <p class="text-xs" style="color: rgba(255,255,255,0.6);">바로빌 ID</p>
                <p class="font-medium">{{ $barobillMember->barobill_id }}</p>
            </div>
        </div>
        @else
        <div class="flex items-center gap-2" style="color: #fef08a;">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
            </svg>
            <span class="text-sm">바로빌 회원사 미연동</span>
        </div>
        @endif
    </div>
</div>
@endif


<!-- 안내 카드 -->
<div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
    <div class="flex items-start gap-3">
        <svg class="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" 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>
        <div class="text-sm text-blue-800">
            <p class="font-medium mb-1">바로빌 연동 안내</p>
            <ul class="list-disc list-inside space-y-1 text-blue-700">
                <li>테스트서버와 운영서버 각각 별도의 인증키(CERTKEY)가 필요합니다.</li>
                <li>인증키는 <a href="https://dev.barobill.co.kr/" target="_blank" class="underline hover:text-blue-900">바로빌 개발자센터</a>에서 발급받을 수 있습니다.</li>
                <li>환경당 하나의 설정만 활성화할 수 있습니다.</li>
            </ul>
        </div>
    </div>
</div>

<!-- 설정 카드 (환경별) -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
    <!-- 테스트 서버 카드 -->
    <div class="bg-white rounded-lg shadow-sm border border-gray-100">
        <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
            <div class="flex items-center gap-3">
                <div class="p-2 rounded-lg bg-yellow-50 text-yellow-600">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                    </svg>
                </div>
                <div>
                    <h3 class="font-semibold text-gray-800">테스트서버</h3>
                    <p class="text-xs text-gray-500">https://testws.baroservice.com</p>
                </div>
            </div>
            <span id="test-status-badge" class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-600">
                미설정
            </span>
        </div>
        <div id="test-config-content" class="p-6">
            <div class="text-center text-gray-400 py-4">
                <svg class="w-12 h-12 mx-auto mb-2 opacity-50" 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>
                <p class="text-sm">로딩 중...</p>
            </div>
        </div>
    </div>

    <!-- 운영 서버 카드 -->
    <div class="bg-white rounded-lg shadow-sm border border-gray-100">
        <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
            <div class="flex items-center gap-3">
                <div class="p-2 rounded-lg bg-green-50 text-green-600">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
                    </svg>
                </div>
                <div>
                    <h3 class="font-semibold text-gray-800">운영서버</h3>
                    <p class="text-xs text-gray-500">https://ws.baroservice.com</p>
                </div>
            </div>
            <span id="prod-status-badge" class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-600">
                미설정
            </span>
        </div>
        <div id="prod-config-content" class="p-6">
            <div class="text-center text-gray-400 py-4">
                <svg class="w-12 h-12 mx-auto mb-2 opacity-50" 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>
                <p class="text-sm">로딩 중...</p>
            </div>
        </div>
    </div>
</div>

<!-- 전체 설정 목록 테이블 -->
<div class="bg-white rounded-lg shadow-sm overflow-hidden">
    <div class="px-6 py-4 border-b border-gray-100">
        <h3 class="font-semibold text-gray-800">전체 설정 목록</h3>
    </div>
    <div id="config-table"
         hx-get="/api/admin/barobill/configs"
         hx-trigger="load, configUpdated from:body"
         hx-headers='{"X-CSRF-TOKEN": "{{ csrf_token() }}"}'
         class="overflow-x-auto">
        <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>

<!-- 등록/수정 모달 -->
@include('barobill.config.partials.modal-form')
@endsection

@push('scripts')
<script>
    // 설정 모달 관리
    const ConfigModal = {
        modal: null,
        form: null,
        isEditing: false,
        currentId: null,

        init() {
            this.modal = document.getElementById('configModal');
            this.form = document.getElementById('configForm');
            this.loadConfigs();
        },

        async loadConfigs() {
            try {
                const res = await fetch('/api/admin/barobill/configs', {
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                    }
                });
                const result = await res.json();

                if (result.success) {
                    this.renderConfigCards(result.data);
                }
            } catch (error) {
                console.error('설정 로드 실패:', error);
            }
        },

        renderConfigCards(configs) {
            const testConfigs = configs.filter(c => c.environment === 'test');
            const prodConfigs = configs.filter(c => c.environment === 'production');

            const testActive = testConfigs.find(c => c.is_active);
            const prodActive = prodConfigs.find(c => c.is_active);

            // 테스트 서버 카드 - 전체 설정 목록 전달
            this.renderCard('test', testActive, testConfigs.length, configs);

            // 운영 서버 카드 - 전체 설정 목록 전달
            this.renderCard('prod', prodActive, prodConfigs.length, configs);
        },

        renderCard(type, activeConfig, totalCount, allConfigs = []) {
            const statusBadge = document.getElementById(`${type}-status-badge`);
            const content = document.getElementById(`${type}-config-content`);
            const env = type === 'test' ? 'test' : 'production';

            // 해당 환경의 설정 목록
            const envConfigs = allConfigs.filter(c => c.environment === env);

            if (envConfigs.length === 0) {
                // 설정이 없는 경우
                statusBadge.className = 'px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-600';
                statusBadge.textContent = '미설정';

                content.innerHTML = `
                    <div class="text-center py-6">
                        <svg class="w-12 h-12 mx-auto mb-3 text-gray-300" 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>
                        <p class="text-sm text-gray-500 mb-4">설정이 없습니다</p>
                        <button type="button" onclick="ConfigModal.openCreate('${env}')" class="px-4 py-2 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition">
                            설정 추가
                        </button>
                    </div>
                `;
                return;
            }

            // 설정이 있는 경우 - 활성/비활성 상관없이 모두 표시
            if (activeConfig) {
                statusBadge.className = 'px-2 py-1 text-xs rounded-full bg-green-100 text-green-700';
                statusBadge.textContent = '활성';
            } else {
                statusBadge.className = 'px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-700';
                statusBadge.textContent = '비활성';
            }

            // 설정 목록 렌더링 (활성화된 것 먼저, 그 다음 비활성화된 것)
            const sortedConfigs = [...envConfigs].sort((a, b) => {
                if (a.is_active && !b.is_active) return -1;
                if (!a.is_active && b.is_active) return 1;
                return 0;
            });

            let configListHtml = sortedConfigs.map(config => `
                <div class="p-4 rounded-lg border ${config.is_active ? 'border-green-300 bg-green-50' : 'border-gray-200 bg-gray-50'}">
                    <div class="flex items-center justify-between mb-3">
                        <div class="flex items-center gap-2">
                            <span class="font-medium text-gray-800">${config.name}</span>
                            ${config.is_active
                                ? '<span class="px-2 py-0.5 text-xs bg-green-100 text-green-700 rounded-full">사용중</span>'
                                : '<span class="px-2 py-0.5 text-xs bg-gray-200 text-gray-600 rounded-full">비활성</span>'
                            }
                        </div>
                        <div class="flex items-center gap-1">
                            ${!config.is_active ? `
                                <button type="button" onclick="toggleConfigActive(${config.id})"
                                    class="p-1.5 text-green-600 hover:bg-green-100 rounded" 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="M5 13l4 4L19 7" />
                                    </svg>
                                </button>
                            ` : ''}
                            <button type="button" onclick="ConfigModal.openEdit(${config.id})"
                                class="p-1.5 text-gray-500 hover:bg-gray-200 rounded" 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>
                        </div>
                    </div>
                    <div class="space-y-2 text-sm">
                        <div class="flex items-center gap-2">
                            <span class="text-gray-500 w-20 shrink-0">CERTKEY:</span>
                            <code class="flex-1 bg-white px-2 py-1 rounded border text-xs font-mono text-blue-600 truncate">${config.cert_key}</code>
                            <button type="button" onclick="copyToClipboard('${config.cert_key}')" class="p-1 text-gray-400 hover:text-gray-600 shrink-0" title="복사">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                                </svg>
                            </button>
                        </div>
                        <div class="flex items-center gap-2">
                            <span class="text-gray-500 w-20 shrink-0">URL:</span>
                            <span class="text-gray-700 text-xs truncate">${config.base_url}</span>
                        </div>
                        ${config.corp_num ? `
                        <div class="flex items-center gap-2">
                            <span class="text-gray-500 w-20 shrink-0">사업자번호:</span>
                            <span class="text-gray-700">${config.corp_num}</span>
                        </div>
                        ` : ''}
                    </div>
                </div>
            `).join('');

            content.innerHTML = `
                <div class="space-y-3">
                    ${configListHtml}
                    <button type="button" onclick="ConfigModal.openCreate('${env}')"
                        class="w-full px-3 py-2 text-sm border-2 border-dashed border-gray-300 text-gray-500 rounded-lg hover:border-blue-400 hover:text-blue-600 transition flex items-center justify-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="M12 4v16m8-8H4" />
                        </svg>
                        새 설정 추가
                    </button>
                </div>
            `;
        },

        openCreate(env = null) {
            this.isEditing = false;
            this.currentId = null;
            this.resetForm();
            document.getElementById('modalTitle').textContent = '바로빌 설정 추가';
            document.getElementById('submitBtn').textContent = '등록하기';

            if (env) {
                this.form.environment.value = env;
                this.updateUrlPlaceholder(env);
            }

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

        openEdit(id) {
            this.isEditing = true;
            this.currentId = id;
            this.resetForm();
            document.getElementById('modalTitle').textContent = '바로빌 설정 수정';
            document.getElementById('submitBtn').textContent = '수정하기';

            fetch(`/api/admin/barobill/configs/${id}`, {
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                }
            })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    const c = data.data;
                    this.form.name.value = c.name || '';
                    this.form.environment.value = c.environment || 'test';
                    this.form.cert_key.value = c.cert_key || '';
                    this.form.corp_num.value = c.corp_num || '';
                    this.form.base_url.value = c.base_url || '';
                    this.form.description.value = c.description || '';
                    this.form.is_active.checked = c.is_active || false;
                }
            });

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

        close() {
            this.modal.classList.add('hidden');
            this.resetForm();
        },

        resetForm() {
            this.form.reset();
        },

        updateUrlPlaceholder(env) {
            const urlInput = this.form.base_url;
            if (env === 'test') {
                urlInput.placeholder = 'https://testws.baroservice.com';
                if (!urlInput.value) {
                    urlInput.value = 'https://testws.baroservice.com';
                }
            } else {
                urlInput.placeholder = 'https://ws.baroservice.com';
                if (!urlInput.value) {
                    urlInput.value = 'https://ws.baroservice.com';
                }
            }
        },

        async submit(e) {
            e.preventDefault();

            const formData = new FormData(this.form);
            const data = Object.fromEntries(formData.entries());
            data.is_active = this.form.is_active.checked;

            const url = this.isEditing
                ? `/api/admin/barobill/configs/${this.currentId}`
                : '/api/admin/barobill/configs';

            const method = this.isEditing ? 'PUT' : 'POST';

            try {
                const res = await fetch(url, {
                    method: method,
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify(data)
                });

                const result = await res.json();

                if (result.success) {
                    showToast(result.message, 'success');
                    this.close();
                    this.loadConfigs();
                    htmx.trigger(document.body, 'configUpdated');
                } else {
                    showToast(result.message || '오류가 발생했습니다.', 'error');
                }
            } catch (error) {
                showToast('통신 오류가 발생했습니다.', 'error');
            }
        },

        fillTestData(env) {
            if (env === 'test') {
                this.form.name.value = '테스트서버 기본';
                this.form.environment.value = 'test';
                this.form.cert_key.value = '2DD6C76C-04DB-44F7-B6E9-3FC0B2211826';
                this.form.base_url.value = 'https://testws.baroservice.com';
            } else {
                this.form.name.value = '운영서버 기본';
                this.form.environment.value = 'production';
                this.form.cert_key.value = 'C0B36577-286F-491B-9747-EE1A00DBF5F5';
                this.form.base_url.value = 'https://ws.baroservice.com';
            }
            this.form.is_active.checked = true;
        }
    };

    // 삭제 확인
    window.confirmDeleteConfig = function(id, name) {
        showDeleteConfirm(name, async () => {
            try {
                const res = await fetch(`/api/admin/barobill/configs/${id}`, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                    }
                });
                const result = await res.json();
                if (result.success) {
                    showToast(result.message, 'success');
                    ConfigModal.loadConfigs();
                    htmx.trigger(document.body, 'configUpdated');
                } else {
                    showToast(result.message || '삭제 실패', 'error');
                }
            } catch (error) {
                showToast('통신 오류가 발생했습니다.', 'error');
            }
        });
    };

    // 활성화 토글
    window.toggleConfigActive = async function(id) {
        try {
            const res = await fetch(`/api/admin/barobill/configs/${id}/toggle-active`, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                }
            });
            const result = await res.json();
            if (result.success) {
                showToast(result.message, 'success');
                ConfigModal.loadConfigs();
                htmx.trigger(document.body, 'configUpdated');
            } else {
                showToast(result.message || '변경 실패', 'error');
            }
        } catch (error) {
            showToast('통신 오류가 발생했습니다.', 'error');
        }
    };

    // 클립보드 복사
    window.copyToClipboard = function(text) {
        navigator.clipboard.writeText(text).then(() => {
            showToast('클립보드에 복사되었습니다.', 'success');
        }).catch(() => {
            showToast('복사에 실패했습니다.', 'error');
        });
    };

    // 초기화
    document.addEventListener('DOMContentLoaded', function() {
        ConfigModal.init();

        // 환경 변경 시 URL 자동 설정
        document.getElementById('configForm').environment.addEventListener('change', function(e) {
            ConfigModal.updateUrlPlaceholder(e.target.value);
        });
    });
</script>
@endpush
