<?php
$csrfName  = csrf_token();
$csrfValue = csrf_hash();

$savedKey = (string) ($config['openai_api_key'] ?? '');
$hasKey   = $savedKey !== '';

$maskKey = static function (string $k): string {
    if ($k === '') return '';
    if (strlen($k) <= 10) return substr($k, 0, 2) . '…' . substr($k, -2);
    return substr($k, 0, 6) . '…' . substr($k, -5);
};
?>
<div class="space-y-6 max-w-5xl">
    <div class="flex items-center gap-3 flex-wrap">
        <div class="w-9 h-9 rounded-lg bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center shadow-sm">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 0 014.5 0m0 0v5.714a2.25 2.25 0 00.659 1.591L19 14.5M14.25 3.104c.251.023.501.05.75.082M14.25 3.104a24.3 0 014.5 0M5 14.5c.758.126 1.53.198 2.307.214a17.403 0 005.386 0c.777-.016 1.549-.088 2.307-.214m-10 0v1.143c0 .351.061.696.178 1.024m-.178-2.167v.05c0 .329.041.651.12.959M19 14.5v.05c0 .308.079.63.12.959M19 14.5c-.758.126-1.53.198-2.307.214a17.403 0 01-5.386 0M5 15.643v1.117c0 .313.036.622.107.923m13.893-2.037v1.117c0 .313-.036.622-.107.923m-13.679 2.037c.207.269.452.518.728.744a20.936 0 0013.696 0M8 20.5h8" />
            </svg>
        </div>
        <div class="flex-1 min-w-0">
            <h3 class="text-lg font-bold text-slate-800">Chatbot Configuration</h3>
            <p class="text-xs text-slate-500">Configure your OpenAI API key, model and assistant behaviour.</p>
        </div>
        <a href="https://platform.openai.com/api-keys" target="_blank" rel="noreferrer noopener"
           class="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-xl bg-white border border-slate-200 hover:bg-slate-50 text-slate-700 text-xs font-semibold transition">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/></svg>
            Get an OpenAI key ↗
        </a>
    </div>

    <?php if ($validationStatus !== null): ?>
        <?php
            $statusOk    = !empty($validationStatus['ok']);
            $message     = (string) ($validationStatus['message'] ?? '');
            $usedModelOk = !empty($validationStatus['used_model_ok']);
            $usedModel   = (string) ($validationStatus['used_model'] ?? '');
        ?>
        <?php if ($statusOk): ?>
            <div class="glass rounded-2xl border-2 border-emerald-200/70 bg-gradient-to-r from-emerald-50/80 via-green-50/40 to-teal-50/60 p-5 flex items-start gap-4 shadow-sm">
                <div class="w-10 h-10 rounded-2xl bg-emerald-100 border border-emerald-200 flex items-center justify-center flex-shrink-0">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                </div>
                <div class="flex-1 min-w-0">
                    <h4 class="text-sm font-bold text-emerald-900">Saved OpenAI API key is valid</h4>
                    <p class="text-sm text-emerald-800/90 mt-1 leading-relaxed whitespace-pre-wrap"><?= esc($message) ?></p>
                    <?php if (!$usedModelOk && $usedModel !== ''): ?>
                        <p class="text-[12px] text-amber-800 mt-2 bg-amber-100/70 rounded-lg px-3 py-2 border border-amber-200">
                            <strong>Model mismatch notice:</strong> The saved key does not currently list <code class="font-mono"><?= esc($usedModel) ?></code> among its available models. Chat calls will likely fail with 404/model_not_found. Switch to a supported one like gpt-4o-mini below.
                        </p>
                    <?php endif; ?>
                </div>
            </div>
        <?php else: ?>
            <div class="glass rounded-2xl border-2 border-rose-200/70 bg-gradient-to-r from-rose-50/80 via-pink-50/50 to-red-50/60 p-5 flex items-start gap-4 shadow-sm">
                <div class="w-10 h-10 rounded-2xl bg-rose-100 border border-rose-200 flex items-center justify-center flex-shrink-0">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-rose-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/></svg>
                </div>
                <div class="flex-1 min-w-0">
                    <h4 class="text-sm font-bold text-rose-900">Saved OpenAI API key failed validation</h4>
                    <p class="text-sm text-rose-800/90 mt-1 leading-relaxed whitespace-pre-wrap"><?= esc($message) ?></p>
                    <div class="mt-3 flex flex-wrap gap-2">
                        <a href="https://platform.openai.com/settings/billing" target="_blank" rel="noreferrer noopener"
                           class="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-xl bg-white border border-rose-200 hover:bg-rose-100/60 text-rose-800 text-xs font-semibold transition">
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z"/></svg>
                            Check Billing / Credits ↗
                        </a>
                        <a href="https://platform.openai.com/api-keys" target="_blank" rel="noreferrer noopener"
                           class="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-xl bg-white border border-rose-200 hover:bg-rose-100/60 text-rose-800 text-xs font-semibold transition">
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/></svg>
                            Regenerate key ↗
                        </a>
                    </div>
                </div>
            </div>
        <?php endif; ?>
    <?php endif; ?>

    <div id="liveValidationAlert" class="hidden glass rounded-2xl border-2 p-5 flex items-start gap-4 shadow-sm"></div>

    <div class="glass rounded-2xl p-6 shadow-sm border border-slate-200/60">
        <?= form_open(site_url('/admin/chatbot-config'), ['class' => 'space-y-5', 'id' => 'chatbotConfigForm']) ?>
        <?= csrf_field() ?>

        <div>
            <label class="block text-xs font-semibold text-slate-500 uppercase tracking-wider mb-1.5">
                OpenAI API Key
                <?php if ($hasKey): ?>
                    <span class="ml-2 normal-case font-mono text-[11px] font-medium text-emerald-700 bg-emerald-100/70 px-2 py-0.5 rounded-lg border border-emerald-200">
                        saved: <?= esc($maskKey($savedKey)) ?>
                    </span>
                <?php else: ?>
                    <span class="ml-2 normal-case text-[11px] font-medium text-amber-700 bg-amber-100/70 px-2 py-0.5 rounded-lg border border-amber-200">
                        no key saved yet
                    </span>
                <?php endif; ?>
            </label>
            <div class="relative">
                <span class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" /></svg>
                </span>
                <input id="openaiApiKeyInput" type="password" name="openai_api_key"
                       value="<?= esc($config['openai_api_key'] ?? '') ?>"
                       autocomplete="new-password" spellcheck="false"
                       class="w-full pl-11 pr-24 py-2.5 rounded-xl bg-white border border-slate-200 text-sm text-slate-700 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition font-mono"
                       placeholder="sk-... or sk-proj-...">
                <button id="toggleKeyVisibility" type="button"
                        class="absolute right-3 top-1/2 -translate-y-1/2 inline-flex items-center gap-1 px-2 py-1 rounded-lg text-[11px] font-semibold text-slate-500 hover:bg-slate-100 hover:text-slate-700 transition">
                    <svg id="eyeIcon" xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                    <span id="eyeLabel">Show</span>
                </button>
            </div>
            <p class="mt-1 text-[11px] text-slate-400 leading-relaxed">
                Stored securely in the database. Keys starting with <code class="font-mono">sk-</code> (legacy User keys) or <code class="font-mono">sk-proj-</code> (new Project keys) are both supported. If you use a Project key, ensure that project has billing and usage limits enabled.
            </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
            <div>
                <label class="block text-xs font-semibold text-slate-500 uppercase tracking-wider mb-1.5">Model Name <span class="ml-1 text-[10px] normal-case text-slate-400 font-normal">(for chat & document Q&amp;A)</span></label>
                <div class="relative">
                    <select id="modelNameSelect" name="model_name"
                            class="appearance-none w-full px-4 pr-10 py-2.5 rounded-xl bg-white border border-slate-200 text-sm text-slate-700 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition">
                        <option value="gpt-4o-mini"      <?= (($config['model_name'] ?? 'gpt-4o-mini') === 'gpt-4o-mini')      ? 'selected' : '' ?>>GPT-4o Mini (recommended default)</option>
                        <option value="gpt-4o"           <?= (($config['model_name'] ?? '') === 'gpt-4o')           ? 'selected' : '' ?>>GPT-4o</option>
                        <option value="gpt-4-turbo"      <?= (($config['model_name'] ?? '') === 'gpt-4-turbo')      ? 'selected' : '' ?>>GPT-4 Turbo</option>
                        <option value="gpt-3.5-turbo"    <?= (($config['model_name'] ?? '') === 'gpt-3.5-turbo')    ? 'selected' : '' ?>>GPT-3.5 Turbo (legacy)</option>
                    </select>
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-slate-400 absolute right-4 top-1/2 -translate-y-1/2 pointer-events-none" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" /></svg>
                </div>
            </div>
            <div>
                <label class="block text-xs font-semibold text-slate-500 uppercase tracking-wider mb-1.5">
                    Temperature
                    <span class="ml-1 normal-case text-slate-400 font-normal">(<?= esc($config['temperature'] ?? '0.7') ?>)</span>
                </label>
                <input id="tempRange" type="range" name="temperature" min="0" max="2" step="0.1" value="<?= esc($config['temperature'] ?? '0.7') ?>"
                       class="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-blue-600">
                <div class="flex justify-between text-[10px] text-slate-400 mt-1"><span>Precise (0.0)</span><span>Creative (2.0)</span></div>
            </div>
        </div>

        <div>
            <label class="block text-xs font-semibold text-slate-500 uppercase tracking-wider mb-1.5">System Prompt</label>
            <textarea name="system_prompt" rows="6"
                      class="w-full px-4 py-3 rounded-xl bg-white border border-slate-200 text-sm text-slate-700 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition resize-y font-mono text-xs leading-relaxed"
                      placeholder="You are a helpful outbound sales assistant..."><?= esc($config['system_prompt'] ?? 'You are a helpful outbound sales assistant. Be concise, professional, and friendly.') ?></textarea>
            <p class="mt-1 text-[11px] text-slate-400">Instructions that define the assistant's personality and answer format.</p>
        </div>

        <div class="pt-2 flex flex-wrap items-center justify-end gap-3 border-t border-slate-200/70 -mx-6 px-6">
            <button id="testConnectionBtn" type="button"
                    class="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-white border border-slate-200 hover:bg-slate-50 text-slate-700 text-sm font-semibold shadow-sm transition disabled:opacity-60 disabled:cursor-not-allowed">
                <svg id="testIcon" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5.636 5.636a9 9 0 1012.728 0M12 3v9"/></svg>
                <svg id="testSpinner" class="hidden w-4 h-4 animate-spin text-slate-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" class="opacity-25"></circle><path fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" class="opacity-75"></path></svg>
                <span id="testLabel">Test Connection</span>
            </button>
            <button id="saveConfigBtn" type="submit"
                    class="inline-flex items-center gap-2 px-6 py-2.5 bg-gradient-to-r from-cyan-600 to-blue-600 text-white text-sm font-semibold rounded-xl shadow-md hover:shadow-lg hover:-translate-y-0.5 transition-all disabled:opacity-70 disabled:cursor-not-allowed">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
                Save Configuration
            </button>
        </div>
        </form>
    </div>
</div>

<script>
(function () {
    var CSRF_NAME   = <?= json_encode($csrfName) ?>;
    var CSRF_VALUE  = <?= json_encode($csrfValue) ?>;
    var TEST_URL    = <?= json_encode(site_url('/admin/chatbot/test-connection')) ?>;
    var FALLBACK_URL = <?= json_encode(site_url('/admin/chatbot-config')) ?>;

    var liveAlert = document.getElementById('liveValidationAlert');
    function renderLiveAlert(ok, html) {
        liveAlert.classList.remove('hidden');
        liveAlert.classList.remove('border-emerald-200/70', 'from-emerald-50/80', 'via-green-50/40', 'to-teal-50/60', 'border-rose-200/70', 'from-rose-50/80', 'via-pink-50/50', 'to-red-50/60');
        if (ok) {
            liveAlert.classList.add('border-emerald-200/70', 'bg-gradient-to-r', 'from-emerald-50/80', 'via-green-50/40', 'to-teal-50/60');
            liveAlert.innerHTML = '<div class="w-10 h-10 rounded-2xl bg-emerald-100 border border-emerald-200 flex items-center justify-center flex-shrink-0"><svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div class="flex-1 min-w-0">' + html + '</div>';
        } else {
            liveAlert.classList.add('border-rose-200/70', 'bg-gradient-to-r', 'from-rose-50/80', 'via-pink-50/50', 'to-red-50/60');
            liveAlert.innerHTML = '<div class="w-10 h-10 rounded-2xl bg-rose-100 border border-rose-200 flex items-center justify-center flex-shrink-0"><svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-rose-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/></svg></div><div class="flex-1 min-w-0">' + html + '</div>';
        }
        liveAlert.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    }

    var keyInput = document.getElementById('openaiApiKeyInput');
    var modelSel = document.getElementById('modelNameSelect');
    var tempIn   = document.getElementById('tempRange');
    var testBtn  = document.getElementById('testConnectionBtn');
    var testIcon = document.getElementById('testIcon');
    var testSpin = document.getElementById('testSpinner');
    var testLbl  = document.getElementById('testLabel');

    testBtn.addEventListener('click', function () {
        testBtn.disabled = true;
        testIcon.classList.add('hidden');
        testSpin.classList.remove('hidden');
        testLbl.textContent = 'Testing…';

        var fd = new FormData();
        fd.append(CSRF_NAME, CSRF_VALUE);
        fd.append('openai_api_key', keyInput.value.trim());
        fd.append('model_name', (modelSel.value || 'gpt-4o-mini'));
        var useSaved = keyInput.value.trim() === '' ? '1' : '0';
        fd.append('use_saved', useSaved);

        fetch(TEST_URL, { method: 'POST', body: fd })
            .then(function (r) { return r.json().catch(function () { return { ok: false, error: 'Non-JSON response from server.' }; }); })
            .then(function (json) {
                if (json && json.ok) {
                    var modelMsg = json.used_model_ok
                        ? ' Selected chat model <code class="font-mono">' + escapeHtml(json.used_model) + '</code> is supported.'
                        : ' WARNING: Selected chat model <code class="font-mono">' + escapeHtml(json.used_model || '') + '</code> was not in the available-models list for this key. Switch to gpt-4o-mini if chat calls fail.';
                    renderLiveAlert(true,
                        '<h4 class="text-sm font-bold text-emerald-900">Test passed</h4>' +
                        '<p class="text-sm text-emerald-800/90 mt-1 leading-relaxed">' + escapeHtml(json.message || 'Key is valid.') + '</p>' +
                        (json.used_model_ok ? '' : '<p class="text-[12px] text-amber-800 mt-2 bg-amber-100/70 rounded-lg px-3 py-2 border border-amber-200">' + modelMsg + '</p>')
                    );
                } else {
                    var errText = '';
                    if (json) {
                        if (typeof json.error === 'string' && json.error.trim() !== '') errText = json.error;
                        else if (typeof json.message === 'string' && json.message.trim() !== '') errText = json.message;
                    }
                    if (errText === '') errText = 'Unknown error — check the browser Developer Tools > Network tab for the raw HTTP response to /admin/chatbot/test-connection and verify PHP error logs.';
                    renderLiveAlert(false,
                        '<h4 class="text-sm font-bold text-rose-900">Test failed</h4>' +
                        '<p class="text-sm text-rose-800/90 mt-1 leading-relaxed whitespace-pre-wrap">' + escapeHtml(errText) + '</p>'
                    );
                }
            })
            .catch(function (e) {
                renderLiveAlert(false,
                    '<h4 class="text-sm font-bold text-rose-900">Network error</h4>' +
                    '<p class="text-sm text-rose-800/90 mt-1 leading-relaxed">The browser could not POST to ' + escapeHtml(FALLBACK_URL) + ': ' + escapeHtml(String(e && e.message ? e.message : e)) + '</p>');
            })
            .finally(function () {
                testBtn.disabled = false;
                testIcon.classList.remove('hidden');
                testSpin.classList.add('hidden');
                testLbl.textContent = 'Test Connection';
            });
    });

    function escapeHtml(s) {
        s = String(s == null ? '' : s);
        return s.replace(/[&<>"']/g, function (ch) {
            return { '&':'&amp;', '<':'&lt;', '>':'&gt;', '"':'&quot;', "'":'&#39;' }[ch];
        });
    }

    var eyeBtn = document.getElementById('toggleKeyVisibility');
    var eyeIcon = document.getElementById('eyeIcon');
    var eyeLbl  = document.getElementById('eyeLabel');
    eyeBtn.addEventListener('click', function () {
        if (keyInput.type === 'password') {
            keyInput.type = 'text';
            eyeLbl.textContent = 'Hide';
            eyeIcon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.243 4.243L9.88 9.88"/>';
        } else {
            keyInput.type = 'password';
            eyeLbl.textContent = 'Show';
            eyeIcon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>';
        }
    });

    var saveBtn = document.getElementById('saveConfigBtn');
    var form = document.getElementById('chatbotConfigForm');
    form.addEventListener('submit', function () {
        saveBtn.disabled = true;
    });
})();
</script>
