@extends('layouts.app')

@section('title', 'Sistem Ayarları')

@section('content')
<div class="px-4 sm:px-6 lg:px-8">
    @if(session('success'))
    <div class="mb-4 rounded-md bg-green-50 dark:bg-green-900/30 p-4">
        <div class="flex">
            <div class="flex-shrink-0">
                <i class="fas fa-check-circle text-green-400 dark:text-green-300"></i>
            </div>
            <div class="ml-3">
                <p class="text-sm font-medium text-green-800 dark:text-green-300">{{ session('success') }}</p>
            </div>
        </div>
    </div>
    @endif

    @if(session('error'))
    <div class="mb-4 rounded-md bg-red-50 dark:bg-red-900/30 p-4">
        <div class="flex">
            <div class="flex-shrink-0">
                <i class="fas fa-exclamation-circle text-red-400 dark:text-red-300"></i>
            </div>
            <div class="ml-3">
                <p class="text-sm font-medium text-red-800 dark:text-red-300">{{ session('error') }}</p>
            </div>
        </div>
    </div>
    @endif

    @if($errors->any())
    <div class="mb-4 rounded-md bg-red-50 dark:bg-red-900/30 p-4">
        <div class="flex">
            <div class="flex-shrink-0">
                <i class="fas fa-exclamation-circle text-red-400 dark:text-red-300"></i>
            </div>
            <div class="ml-3">
                <ul class="list-disc list-inside text-sm text-red-800 dark:text-red-300">
                    @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
    @endif

    <div class="sm:flex sm:items-center">
        <div class="sm:flex-auto">
            <h1 class="text-3xl font-semibold text-gray-900 dark:text-gray-100">Sistem Ayarları</h1>
            <p class="mt-2 text-sm text-gray-700 dark:text-gray-300">
                Sistem yapılandırması ve ayarları
            </p>
        </div>
        @if(auth()->user()->isAdmin())
        <div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
            <form action="{{ route('settings.clear-cache') }}" method="POST" onsubmit="return confirm('Tüm cache temizlenecek. Devam edilsin mi?');">
                @csrf
                <button type="submit" class="inline-flex items-center gap-2 rounded-md bg-red-600 dark:bg-red-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 dark:hover:bg-red-400 transition">
                    <i class="fas fa-broom"></i>
                    Cache Temizle
                </button>
            </form>
        </div>
        @endif
    </div>

    <!-- Tab Navigation -->
    <div class="mt-6">
        <div class="border-b border-gray-200 dark:border-gray-700">
            <nav class="-mb-px flex space-x-8" aria-label="Tabs">
                @foreach($groups as $groupKey => $groupName)
                <a href="{{ route('settings.index', ['group' => $groupKey]) }}"
                    class="@if($group === $groupKey) border-indigo-500 dark:border-indigo-400 text-indigo-600 dark:text-indigo-400 @else border-transparent text-gray-500 dark:text-gray-400 hover:border-gray-300 dark:hover:border-gray-600 hover:text-gray-700 dark:hover:text-gray-300 @endif whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium transition">
                    {{ $groupName }}
                </a>
                @endforeach
            </nav>
        </div>
    </div>

        <!-- Settings Form -->
        <div class="mt-8">
        @if($group === 'github')
        <!-- Developer için GitHub ayarları erişilebilir -->
        <!-- GitHub & Versiyon Kontrolü -->
        <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
            <div class="px-4 py-5 sm:p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-gray-100">
                        <i class="fab fa-github mr-2"></i> GitHub Repository & Versiyon Kontrolü
                    </h3>
                    <div class="flex gap-2">
                        <button 
                            type="button" 
                            id="check-version-btn"
                            onclick="checkGitVersion()" 
                            class="inline-flex items-center gap-2 rounded-md bg-indigo-600 dark:bg-indigo-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 dark:hover:bg-indigo-400 transition">
                            <i class="fas fa-sync-alt"></i>
                            Versiyon Kontrolü
                        </button>
                        <button 
                            type="button" 
                            id="update-repo-btn"
                            onclick="updateFromGitHub()" 
                            class="inline-flex items-center gap-2 rounded-md bg-green-600 dark:bg-green-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-green-500 dark:hover:bg-green-400 transition">
                            <i class="fas fa-download"></i>
                            Repository'den Güncelle
                        </button>
                    </div>
                </div>
                <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                    GitHub repository bilgilerinizi ve versiyon kontrolü ayarlarınızı yapılandırın. Sunucu üzerinden direkt main branch'i çekmek için bu ayarları kullanabilirsiniz.
                </p>
                <div class="mb-4 rounded-md bg-yellow-50 dark:bg-yellow-900/30 p-4 border border-yellow-200 dark:border-yellow-800">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <i class="fas fa-exclamation-triangle text-yellow-400 dark:text-yellow-300"></i>
                        </div>
                        <div class="ml-3">
                            <h4 class="text-sm font-medium text-yellow-800 dark:text-yellow-300 mb-2">
                                Private Repository İçin Önemli
                            </h4>
                            <ul class="list-disc list-inside text-sm text-yellow-700 dark:text-yellow-200 space-y-1">
                                <li>Private repository'ler için <strong>GitHub Personal Access Token zorunludur</strong></li>
                                <li>Token oluştururken <code class="bg-yellow-100 dark:bg-yellow-800 px-1 rounded">repo</code> scope'unu seçin</li>
                                <li>Token'ı GitHub → Settings → Developer settings → Personal access tokens → Tokens (classic) bölümünden oluşturabilirsiniz</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- GitHub Repository Ayarları Formu -->
                @if(!empty($settings))
                <form action="{{ route('settings.update', 'github') }}" method="POST" class="mb-6">
                    @csrf
                    <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
                        <div class="px-4 py-5 sm:p-6">
                            <h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-gray-100 mb-4">
                                <i class="fab fa-github mr-2"></i> GitHub Repository Ayarları
                            </h3>
                            
                            <div class="space-y-6">
                                @foreach($settings as $key => $setting)
                                @if(!in_array($key, ['github.last_update_check', 'github.current_version', 'github.last_commit_hash']))
                                <div class="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-5 border border-gray-200 dark:border-gray-600 hover:border-gray-300 dark:hover:border-gray-500 transition-colors">
                                    <div class="mb-3">
                                        <label for="settings[{{ $key }}][value]" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-1">
                                            <span class="flex items-center gap-2">
                                                @if($setting['is_encrypted'])
                                                <i class="fas fa-lock text-indigo-500 dark:text-indigo-400 text-xs"></i>
                                                @elseif($setting['type'] === 'boolean')
                                                <i class="fas fa-toggle-on text-indigo-500 dark:text-indigo-400 text-xs"></i>
                                                @elseif($setting['type'] === 'json')
                                                <i class="fas fa-code text-indigo-500 dark:text-indigo-400 text-xs"></i>
                                                @else
                                                <i class="fas fa-edit text-indigo-500 dark:text-indigo-400 text-xs"></i>
                                                @endif
                                                {{ ucfirst(str_replace(['.', '_'], ' ', $key)) }}
                                                @if($setting['is_encrypted'])
                                                <span class="ml-1 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-indigo-100 dark:bg-indigo-900/30 text-indigo-800 dark:text-indigo-300">
                                                    <i class="fas fa-shield-alt mr-1"></i>
                                                    Şifreli
                                                </span>
                                                @endif
                                            </span>
                                        </label>
                                        @if(!empty($setting['description']))
                                        <p class="text-xs text-gray-600 dark:text-gray-400 mt-1 flex items-start gap-1">
                                            <i class="fas fa-info-circle text-gray-400 dark:text-gray-500 mt-0.5"></i>
                                            <span>{{ $setting['description'] }}</span>
                                        </p>
                                        @endif
                                        @if($key === 'github.token' && empty($setting['value']))
                                        <div class="mt-2 rounded-md bg-red-50 dark:bg-red-900/30 p-3 border border-red-200 dark:border-red-800">
                                            <p class="text-xs text-red-800 dark:text-red-300 flex items-start gap-1">
                                                <i class="fas fa-exclamation-circle mt-0.5"></i>
                                                <span><strong>Private repository için bu alan zorunludur!</strong> Token olmadan versiyon kontrolü yapılamaz.</span>
                                            </p>
                                        </div>
                                        @endif
                                    </div>
                                    
                                    @if($setting['type'] === 'boolean')
                                    <div class="mt-3">
                                        <label class="relative inline-flex items-center cursor-pointer">
                                            <input type="hidden" name="settings[{{ $key }}][value]" value="0">
                                            <input type="checkbox" 
                                                name="settings[{{ $key }}][value]" 
                                                value="1"
                                                {{ $setting['value'] ? 'checked' : '' }}
                                                class="sr-only peer">
                                            <div class="w-11 h-6 bg-gray-200 dark:bg-gray-600 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 dark:peer-focus:ring-indigo-500/50 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white dark:after:bg-gray-300 after:border-gray-300 dark:after:border-gray-500 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600 dark:peer-checked:bg-indigo-500"></div>
                                            <span class="ml-3 text-sm font-medium text-gray-700 dark:text-gray-300">
                                                {{ $setting['value'] ? 'Aktif' : 'Pasif' }}
                                            </span>
                                        </label>
                                    </div>
                                    @elseif($setting['type'] === 'json')
                                    <div class="relative">
                                        <textarea 
                                            name="settings[{{ $key }}][value]" 
                                            id="settings[{{ $key }}][value]"
                                            rows="6"
                                            class="block w-full px-4 py-3 text-sm text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all placeholder-gray-400 dark:placeholder-gray-500 font-mono"
                                            placeholder="JSON formatında girin...">{{ is_array($setting['value']) ? json_encode($setting['value'], JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE) : $setting['value'] }}</textarea>
                                        <div class="absolute top-2 right-2">
                                            <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300">
                                                <i class="fas fa-code mr-1"></i>
                                                JSON
                                            </span>
                                        </div>
                                    </div>
                                    @else
                                    <div class="relative">
                                        <input 
                                            type="{{ $setting['is_encrypted'] ? 'password' : ($setting['type'] === 'integer' ? 'number' : 'text') }}"
                                            name="settings[{{ $key }}][value]" 
                                            id="settings[{{ $key }}][value]"
                                            value="{{ $setting['value'] }}"
                                            class="block w-full px-4 py-3 text-sm text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all placeholder-gray-400 dark:placeholder-gray-500 {{ $setting['is_encrypted'] ? 'font-mono tracking-wider' : '' }}"
                                            placeholder="{{ $setting['description'] ?? 'Değer girin...' }}">
                                        @if($setting['is_encrypted'])
                                        <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                                            <i class="fas fa-eye-slash text-gray-400 dark:text-gray-500"></i>
                                        </div>
                                        @endif
                                    </div>
                                    @endif
                                    
                                    <input type="hidden" name="settings[{{ $key }}][type]" value="{{ $setting['type'] }}">
                                    <input type="hidden" name="settings[{{ $key }}][group]" value="github">
                                    <input type="hidden" name="settings[{{ $key }}][is_encrypted]" value="{{ $setting['is_encrypted'] ? '1' : '0' }}">
                                </div>
                                @endif
                                @endforeach
                            </div>
                        </div>
                        
                        <div class="bg-gray-50 dark:bg-gray-700/50 px-6 py-5 border-t border-gray-200 dark:border-gray-600 sm:flex sm:flex-row-reverse sm:items-center sm:justify-between">
                            <div class="flex gap-3 sm:ml-3">
                                <button type="submit" class="inline-flex items-center gap-2 rounded-md bg-indigo-600 dark:bg-indigo-500 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 dark:hover:bg-indigo-400 transition">
                                    <i class="fas fa-save"></i>
                                    Kaydet
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
                @endif

                <!-- Versiyon Bilgileri (Read-only) -->
                @if($gitVersionInfo && ($gitVersionInfo['current_version'] !== 'Bilinmiyor' || !empty($gitVersionInfo['last_commit_hash'])))
                <div class="mb-6 bg-gray-50 dark:bg-gray-700/50 rounded-lg p-5 border border-gray-200 dark:border-gray-600">
                    <h4 class="text-md font-semibold text-gray-900 dark:text-gray-100 mb-4">
                        <i class="fas fa-info-circle mr-2"></i> Mevcut Versiyon Bilgileri
                    </h4>
                    <dl class="grid grid-cols-1 gap-x-4 gap-y-4 sm:grid-cols-2 lg:grid-cols-3">
                        <div>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Mevcut Versiyon</dt>
                            <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100 font-mono">
                                {{ $gitVersionInfo['current_version'] ?? 'Bilinmiyor' }}
                            </dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Son Commit Hash</dt>
                            <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100 font-mono">
                                {{ $gitVersionInfo['last_commit_hash'] ?? '-' }}
                            </dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Branch</dt>
                            <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">
                                {{ $gitVersionInfo['branch'] ?? 'main' }}
                            </dd>
                        </div>
                        @if(!empty($gitVersionInfo['last_update_check']))
                        <div>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Son Kontrol</dt>
                            <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">
                                {{ \Carbon\Carbon::parse($gitVersionInfo['last_update_check'])->format('d.m.Y H:i') }}
                            </dd>
                        </div>
                        @endif
                        @if(!empty($gitVersionInfo['repo_url']))
                        <div class="sm:col-span-2 lg:col-span-3">
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Repository URL</dt>
                            <dd class="mt-1 text-sm">
                                <a href="{{ $gitVersionInfo['repo_url'] }}" target="_blank" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300">
                                    {{ $gitVersionInfo['repo_url'] }}
                                    <i class="fas fa-external-link-alt ml-1 text-xs"></i>
                                </a>
                            </dd>
                        </div>
                        @endif
                    </dl>
                </div>
                @endif

                <div id="version-check-result" class="mb-4 hidden"></div>
                <div id="update-result" class="mb-4 hidden"></div>
            </div>
        </div>
        @endif

        @if($group === 'system')
        <!-- System Info (Read-only) -->
        <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
            <div class="px-4 py-5 sm:p-6">
                <h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-gray-100 mb-4">Sistem Bilgileri</h3>
                <dl class="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2 lg:grid-cols-3">
                    @foreach($systemInfo as $key => $value)
                    <div>
                        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">{{ ucfirst(str_replace('_', ' ', $key)) }}</dt>
                        <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">
                            @if(is_bool($value))
                            <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium {{ $value ? 'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300' : 'bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300' }}">
                                {{ $value ? 'Aktif' : 'Pasif' }}
                            </span>
                            @else
                            {{ $value }}
                            @endif
                        </dd>
                    </div>
                    @endforeach
                </dl>
            </div>
        </div>

        <!-- Queue Status -->
        <div class="mt-6 bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
            <div class="px-4 py-5 sm:p-6">
                <h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-gray-100 mb-4">Queue Durumu</h3>
                <dl class="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-3">
                    <div>
                        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Connection</dt>
                        <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">{{ $queueStatus['connection'] }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Bekleyen İşler</dt>
                        <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">{{ $queueStatus['pending_jobs'] }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Başarısız İşler</dt>
                        <dd class="mt-1">
                            <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium {{ $queueStatus['failed_jobs'] > 0 ? 'bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300' : 'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300' }}">
                                {{ $queueStatus['failed_jobs'] }}
                            </span>
                        </dd>
                    </div>
                </dl>
            </div>
        </div>

        <!-- SSH Host Bazlı MySQL Root Şifreleri -->
        <div class="mt-6 bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
            <div class="px-4 py-5 sm:p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-gray-100">
                        <i class="fas fa-server mr-2"></i> SSH Host Bazlı MySQL Root Şifreleri
                    </h3>
                    <button type="button" onclick="addSshHostPassword()" class="inline-flex items-center gap-2 rounded-md bg-indigo-600 dark:bg-indigo-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 dark:hover:bg-indigo-400 transition">
                        <i class="fas fa-plus"></i>
                        Yeni SSH Host Ekle
                    </button>
                </div>
                <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                    Her SSH sunucusu için farklı MySQL root şifresi tanımlayabilirsiniz. Site oluşturulurken SSH host bilgisi girildiğinde, o host'a özel şifre otomatik olarak kullanılacaktır.
                </p>
                
                <form id="ssh-host-passwords-form" action="{{ route('settings.update', 'system') }}" method="POST">
                    @csrf
                    <div id="ssh-host-passwords-container" class="space-y-4">
                        @if(!empty($sshHostPasswords))
                            @foreach($sshHostPasswords as $sshHost => $passwordData)
                            <div class="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 border border-gray-200 dark:border-gray-600" data-ssh-host="{{ $sshHost }}">
                                <div class="flex items-start gap-4">
                                    <div class="flex-1">
                                        <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                                            <i class="fas fa-network-wired mr-2"></i> SSH Host
                                        </label>
                                        <input type="text" 
                                            name="ssh_host_passwords[{{ $loop->index }}][host]" 
                                            value="{{ $sshHost }}"
                                            class="block w-full px-4 py-2.5 text-sm text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all"
                                            placeholder="sunucu.domain.com"
                                            required>
                                    </div>
                                    <div class="flex-1">
                                        <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                                            <i class="fas fa-key mr-2"></i> MySQL Root Şifresi
                                        </label>
                                        <div class="relative">
                                            <input type="password" 
                                                name="ssh_host_passwords[{{ $loop->index }}][password]" 
                                                value="{{ $passwordData['value'] }}"
                                                class="block w-full px-4 py-2.5 text-sm text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all font-mono tracking-wider"
                                                placeholder="MySQL root şifresi"
                                                required>
                                            <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                                                <i class="fas fa-eye-slash text-gray-400 dark:text-gray-500"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="flex items-end">
                                        <button type="button" onclick="removeSshHostPassword(this)" class="inline-flex items-center gap-2 rounded-md bg-red-600 dark:bg-red-500 px-3 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-red-500 dark:hover:bg-red-400 transition">
                                            <i class="fas fa-trash"></i>
                                            Sil
                                        </button>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        @endif
                    </div>
                    
                    <div class="mt-4">
                        <button type="submit" class="inline-flex items-center gap-2 rounded-md bg-green-600 dark:bg-green-500 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 dark:hover:bg-green-400 transition">
                            <i class="fas fa-save"></i>
                            SSH Host Şifrelerini Kaydet
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- SSH Host Bazlı Veritabanı Ekleri -->
        <div class="mt-6 bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
            <div class="px-4 py-5 sm:p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-gray-100">
                        <i class="fas fa-database mr-2"></i> SSH Host Bazlı Veritabanı Ekleri
                    </h3>
                    <button type="button" onclick="addSshHostDatabase()" class="inline-flex items-center gap-2 rounded-md bg-indigo-600 dark:bg-indigo-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 dark:hover:bg-indigo-400 transition">
                        <i class="fas fa-plus"></i>
                        Yeni Veritabanı Eki Ekle
                    </button>
                </div>
                <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                    Her SSH sunucusu için farklı veritabanı bağlantı bilgileri tanımlayabilirsiniz. Site oluşturulurken SSH host bilgisi girildiğinde, o host'a özel veritabanı ekleri otomatik olarak kullanılacaktır.
                </p>
                
                <form id="ssh-host-databases-form" action="{{ route('settings.update', 'system') }}" method="POST">
                    @csrf
                    <div id="ssh-host-databases-container" class="space-y-4">
                        @if(!empty($sshHostDatabases))
                            @foreach($sshHostDatabases as $sshHost => $dbData)
                            <div class="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 border border-gray-200 dark:border-gray-600" data-ssh-host-db="{{ $sshHost }}">
                                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                                    <div>
                                        <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                                            <i class="fas fa-network-wired mr-2"></i> SSH Host
                                        </label>
                                        <input type="text" 
                                            name="ssh_host_databases[{{ $loop->index }}][host]" 
                                            value="{{ $sshHost }}"
                                            class="block w-full px-4 py-2.5 text-sm text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all"
                                            placeholder="sunucu.domain.com"
                                            required>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                                            <i class="fas fa-server mr-2"></i> Veritabanı Host
                                        </label>
                                        <input type="text" 
                                            name="ssh_host_databases[{{ $loop->index }}][db_host]" 
                                            value="{{ $dbData['db_host'] ?? 'localhost' }}"
                                            class="block w-full px-4 py-2.5 text-sm text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all"
                                            placeholder="localhost">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                                            <i class="fas fa-plug mr-2"></i> Veritabanı Port
                                        </label>
                                        <input type="number" 
                                            name="ssh_host_databases[{{ $loop->index }}][db_port]" 
                                            value="{{ $dbData['db_port'] ?? '3306' }}"
                                            class="block w-full px-4 py-2.5 text-sm text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all"
                                            placeholder="3306">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                                            <i class="fas fa-user mr-2"></i> Veritabanı Kullanıcı Adı
                                        </label>
                                        <input type="text" 
                                            name="ssh_host_databases[{{ $loop->index }}][db_username]" 
                                            value="{{ $dbData['db_username'] ?? 'root' }}"
                                            class="block w-full px-4 py-2.5 text-sm text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all"
                                            placeholder="root">
                                    </div>
                                    <div class="md:col-span-2 lg:col-span-4">
                                        <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                                            <i class="fas fa-key mr-2"></i> Veritabanı Şifresi
                                        </label>
                                        <div class="relative">
                                            <input type="password" 
                                                name="ssh_host_databases[{{ $loop->index }}][db_password]" 
                                                value="{{ $dbData['db_password'] ?? '' }}"
                                                class="block w-full px-4 py-2.5 text-sm text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all font-mono tracking-wider"
                                                placeholder="Veritabanı şifresi">
                                            <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                                                <i class="fas fa-eye-slash text-gray-400 dark:text-gray-500"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="mt-4 flex justify-end">
                                    <button type="button" onclick="removeSshHostDatabase(this)" class="inline-flex items-center gap-2 rounded-md bg-red-600 dark:bg-red-500 px-3 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-red-500 dark:hover:bg-red-400 transition">
                                        <i class="fas fa-trash"></i>
                                        Sil
                                    </button>
                                </div>
                            </div>
                            @endforeach
                        @endif
                    </div>
                    
                    <div class="mt-4">
                        <button type="submit" class="inline-flex items-center gap-2 rounded-md bg-green-600 dark:bg-green-500 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 dark:hover:bg-green-400 transition">
                            <i class="fas fa-save"></i>
                            Veritabanı Eklerini Kaydet
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- SSH Host Bilgileri -->
        <div class="mt-6 bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
            <div class="px-4 py-5 sm:p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-gray-100">
                        <i class="fas fa-terminal mr-2"></i> SSH Host Bilgileri
                    </h3>
                    <button type="button" onclick="addSshHostInfo()" class="inline-flex items-center gap-2 rounded-md bg-indigo-600 dark:bg-indigo-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 dark:hover:bg-indigo-400 transition">
                        <i class="fas fa-plus"></i>
                        Yeni SSH Host Ekle
                    </button>
                </div>
                <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                    Her SSH sunucusu için bağlantı bilgileri tanımlayabilirsiniz. Site oluşturulurken SSH host seçildiğinde, o host'a özel bilgiler otomatik olarak kullanılacaktır.
                </p>
                
                <form id="ssh-host-infos-form" action="{{ route('settings.update', 'system') }}" method="POST">
                    @csrf
                    <div id="ssh-host-infos-container" class="space-y-4">
                        @if(!empty($sshHostInfos))
                            @foreach($sshHostInfos as $sshHost => $hostData)
                            <div class="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 border border-gray-200 dark:border-gray-600" data-ssh-host-info="{{ $sshHost }}">
                                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                                    <div>
                                        <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                                            <i class="fas fa-network-wired mr-2"></i> SSH Host <span class="text-red-500">*</span>
                                        </label>
                                        <input type="text" 
                                            name="ssh_host_infos[{{ $loop->index }}][host]" 
                                            value="{{ $sshHost }}"
                                            class="block w-full px-4 py-2.5 text-sm text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all"
                                            placeholder="sunucu.domain.com"
                                            required>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                                            <i class="fas fa-user-shield mr-2"></i> SSH Kullanıcı
                                        </label>
                                        <input type="text" 
                                            name="ssh_host_infos[{{ $loop->index }}][user]" 
                                            value="{{ $hostData['user'] ?? '' }}"
                                            class="block w-full px-4 py-2.5 text-sm text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all"
                                            placeholder="deploy">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                                            <i class="fas fa-door-open mr-2"></i> SSH Port
                                        </label>
                                        <input type="number" 
                                            name="ssh_host_infos[{{ $loop->index }}][port]" 
                                            value="{{ $hostData['port'] ?? '22' }}"
                                            class="block w-full px-4 py-2.5 text-sm text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all"
                                            placeholder="22"
                                            min="1" max="65535">
                                    </div>
                                    <div class="md:col-span-2">
                                        <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                                            <i class="fas fa-folder-open mr-2"></i> Sunucu Dizini (Path)
                                        </label>
                                        <input type="text" 
                                            name="ssh_host_infos[{{ $loop->index }}][path]" 
                                            value="{{ $hostData['path'] ?? '' }}"
                                            class="block w-full px-4 py-2.5 text-sm text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all"
                                            placeholder="/home/username/public_html/yeni-site">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                                            <i class="fas fa-key mr-2"></i> SSH Parola (Opsiyonel)
                                        </label>
                                        <div class="relative">
                                            <input type="password" 
                                                name="ssh_host_infos[{{ $loop->index }}][password]" 
                                                value="{{ $hostData['password'] ?? '' }}"
                                                class="block w-full px-4 py-2.5 text-sm text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all font-mono tracking-wider"
                                                placeholder="Parola veya boş bırakın">
                                            <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                                                <i class="fas fa-eye-slash text-gray-400 dark:text-gray-500"></i>
                                            </div>
                                        </div>
                                        <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400 flex items-start">
                                            <i class="fas fa-info-circle mr-1.5 mt-0.5"></i>
                                            <span>SSH anahtarınız tanımlıysa boş bırakabilirsiniz.</span>
                                        </p>
                                    </div>
                                </div>
                                <div class="mt-4 flex justify-end">
                                    <button type="button" onclick="removeSshHostInfo(this)" class="inline-flex items-center gap-2 rounded-md bg-red-600 dark:bg-red-500 px-3 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-red-500 dark:hover:bg-red-400 transition">
                                        <i class="fas fa-trash"></i>
                                        Sil
                                    </button>
                                </div>
                            </div>
                            @endforeach
                        @endif
                    </div>
                    
                    <div class="mt-4">
                        <button type="submit" class="inline-flex items-center gap-2 rounded-md bg-green-600 dark:bg-green-500 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 dark:hover:bg-green-400 transition">
                            <i class="fas fa-save"></i>
                            SSH Host Bilgilerini Kaydet
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Mail Test (Sadece mail grubu için ve sadece admin) -->
        @if($group === 'mail' && auth()->user()->isAdmin())
        <div class="mt-6 bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
            <div class="px-4 py-5 sm:p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-gray-100">
                        <i class="fas fa-envelope mr-2"></i> Mail Ayarları Testi
                    </h3>
                </div>
                <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                    Mail ayarlarınızı test etmek için bir test e-postası gönderebilirsiniz.
                </p>
                <form id="mail-test-form" class="flex gap-4">
                    <div class="flex-1">
                        <label for="test_email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Test E-posta Adresi
                        </label>
                        <input 
                            type="email" 
                            id="test_email" 
                            name="test_email" 
                            required
                            class="block w-full px-4 py-2.5 text-sm text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all" 
                            placeholder="ornek@email.com">
                    </div>
                    <div class="flex items-end">
                        <button 
                            type="submit" 
                            class="inline-flex items-center gap-2 rounded-md bg-blue-600 dark:bg-blue-500 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 dark:hover:bg-blue-400 transition">
                            <i class="fas fa-paper-plane"></i>
                            Test E-postası Gönder
                        </button>
                    </div>
                </form>
                <div id="mail-test-result" class="mt-4 hidden"></div>
            </div>
        </div>
        @endif

        <!-- GitHub Ayarları Formu -->
        @if($group === 'github' && !empty($settings))
        <form action="{{ route('settings.update', $group) }}" method="POST" class="mt-6">
            @csrf
            <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
                <div class="px-4 py-5 sm:p-6">
                    <h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-gray-100 mb-4">
                        <i class="fab fa-github mr-2"></i> GitHub Repository Ayarları
                    </h3>
                    
                    <div class="space-y-6">
                        @foreach($settings as $key => $setting)
                        <div class="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-5 border border-gray-200 dark:border-gray-600 hover:border-gray-300 dark:hover:border-gray-500 transition-colors">
                            <div class="mb-3">
                                <label for="settings[{{ $key }}][value]" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-1">
                                    <span class="flex items-center gap-2">
                                        @if($setting['is_encrypted'])
                                        <i class="fas fa-lock text-indigo-500 dark:text-indigo-400 text-xs"></i>
                                        @elseif($setting['type'] === 'boolean')
                                        <i class="fas fa-toggle-on text-indigo-500 dark:text-indigo-400 text-xs"></i>
                                        @elseif($setting['type'] === 'json')
                                        <i class="fas fa-code text-indigo-500 dark:text-indigo-400 text-xs"></i>
                                        @else
                                        <i class="fas fa-edit text-indigo-500 dark:text-indigo-400 text-xs"></i>
                                        @endif
                                        {{ ucfirst(str_replace(['.', '_'], ' ', $key)) }}
                                        @if($setting['is_encrypted'])
                                        <span class="ml-1 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-indigo-100 dark:bg-indigo-900/30 text-indigo-800 dark:text-indigo-300">
                                            <i class="fas fa-shield-alt mr-1"></i>
                                            Şifreli
                                        </span>
                                        @endif
                                        @if(in_array($key, ['github.last_update_check', 'github.current_version', 'github.last_commit_hash']))
                                        <span class="ml-1 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300">
                                            <i class="fas fa-info-circle mr-1"></i>
                                            Otomatik
                                        </span>
                                        @endif
                                    </span>
                                </label>
                                @if(!empty($setting['description']))
                                <p class="text-xs text-gray-600 dark:text-gray-400 mt-1 flex items-start gap-1">
                                    <i class="fas fa-info-circle text-gray-400 dark:text-gray-500 mt-0.5"></i>
                                    <span>{{ $setting['description'] }}</span>
                                </p>
                                @endif
                                @if($key === 'github.token' && empty($setting['value']))
                                <div class="mt-2 rounded-md bg-red-50 dark:bg-red-900/30 p-3 border border-red-200 dark:border-red-800">
                                    <p class="text-xs text-red-800 dark:text-red-300 flex items-start gap-1">
                                        <i class="fas fa-exclamation-circle mt-0.5"></i>
                                        <span><strong>Private repository için bu alan zorunludur!</strong> Token olmadan versiyon kontrolü yapılamaz.</span>
                                    </p>
                                </div>
                                @endif
                            </div>
                            
                            @if($setting['type'] === 'boolean')
                            <div class="mt-3">
                                <label class="relative inline-flex items-center cursor-pointer">
                                    <input type="hidden" name="settings[{{ $key }}][value]" value="0">
                                    <input type="checkbox" 
                                        name="settings[{{ $key }}][value]" 
                                        value="1"
                                        {{ $setting['value'] ? 'checked' : '' }}
                                        class="sr-only peer">
                                    <div class="w-11 h-6 bg-gray-200 dark:bg-gray-600 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 dark:peer-focus:ring-indigo-500/50 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white dark:after:bg-gray-300 after:border-gray-300 dark:after:border-gray-500 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600 dark:peer-checked:bg-indigo-500"></div>
                                    <span class="ml-3 text-sm font-medium text-gray-700 dark:text-gray-300">
                                        {{ $setting['value'] ? 'Aktif' : 'Pasif' }}
                                    </span>
                                </label>
                            </div>
                            @elseif($setting['type'] === 'json')
                            <div class="relative">
                                <textarea 
                                    name="settings[{{ $key }}][value]" 
                                    id="settings[{{ $key }}][value]"
                                    rows="6"
                                    class="block w-full px-4 py-3 text-sm text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all placeholder-gray-400 dark:placeholder-gray-500 font-mono"
                                    placeholder="JSON formatında girin...">{{ is_array($setting['value']) ? json_encode($setting['value'], JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE) : $setting['value'] }}</textarea>
                                <div class="absolute top-2 right-2">
                                    <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300">
                                        <i class="fas fa-code mr-1"></i>
                                        JSON
                                    </span>
                                </div>
                            </div>
                            @else
                            <div class="relative">
                                <input 
                                    type="{{ $setting['is_encrypted'] ? 'password' : ($setting['type'] === 'integer' ? 'number' : 'text') }}"
                                    name="settings[{{ $key }}][value]" 
                                    id="settings[{{ $key }}][value]"
                                    value="{{ $setting['value'] }}"
                                    {{ in_array($key, ['github.last_update_check', 'github.current_version', 'github.last_commit_hash']) ? 'readonly' : '' }}
                                    class="block w-full px-4 py-3 text-sm text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all placeholder-gray-400 dark:placeholder-gray-500 {{ $setting['is_encrypted'] ? 'font-mono tracking-wider' : '' }} {{ in_array($key, ['github.last_update_check', 'github.current_version', 'github.last_commit_hash']) ? 'bg-gray-100 dark:bg-gray-800 cursor-not-allowed' : '' }}"
                                    placeholder="{{ $setting['description'] ?? 'Değer girin...' }}">
                                @if($setting['is_encrypted'])
                                <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                                    <i class="fas fa-eye-slash text-gray-400 dark:text-gray-500"></i>
                                </div>
                                @endif
                            </div>
                            @endif
                            
                            <input type="hidden" name="settings[{{ $key }}][type]" value="{{ $setting['type'] }}">
                            <input type="hidden" name="settings[{{ $key }}][group]" value="{{ $group }}">
                            <input type="hidden" name="settings[{{ $key }}][is_encrypted]" value="{{ $setting['is_encrypted'] ? '1' : '0' }}">
                        </div>
                        @endforeach
                    </div>
                </div>
                
                <div class="bg-gray-50 dark:bg-gray-700/50 px-6 py-5 border-t border-gray-200 dark:border-gray-600 sm:flex sm:flex-row-reverse sm:items-center sm:justify-between">
                    <div class="flex gap-3 sm:ml-3">
                        <button type="submit" class="inline-flex items-center gap-2 rounded-md bg-indigo-600 dark:bg-indigo-500 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 dark:hover:bg-indigo-400 transition">
                            <i class="fas fa-save"></i>
                            Kaydet
                        </button>
                    </div>
                </div>
            </div>
        </form>
        @endif

        <!-- Sistem Ayarları Formu (Sadece Admin) -->
        @if($group !== 'github' && !empty($settings) && auth()->user()->isAdmin())
        <form action="{{ route('settings.update', $group) }}" method="POST" class="mt-6">
            @csrf
            <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
                <div class="px-4 py-5 sm:p-6">
                    <h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-gray-100 mb-4">
                        @if($group === 'mail')
                            <i class="fas fa-envelope mr-2"></i> E-posta Ayarları
                        @elseif($group === 'whm')
                            <i class="fas fa-server mr-2"></i> WHM API Ayarları
                        @else
                            Sistem Ayarları
                        @endif
                    </h3>
                    
                    <div class="space-y-6">
                        @foreach($settings as $key => $setting)
                        <div class="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-5 border border-gray-200 dark:border-gray-600 hover:border-gray-300 dark:hover:border-gray-500 transition-colors">
                            <div class="mb-3">
                                <label for="settings[{{ $key }}][value]" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-1">
                                    <span class="flex items-center gap-2">
                                        @if($setting['is_encrypted'])
                                        <i class="fas fa-lock text-indigo-500 dark:text-indigo-400 text-xs"></i>
                                        @elseif($setting['type'] === 'boolean')
                                        <i class="fas fa-toggle-on text-indigo-500 dark:text-indigo-400 text-xs"></i>
                                        @elseif($setting['type'] === 'json')
                                        <i class="fas fa-code text-indigo-500 dark:text-indigo-400 text-xs"></i>
                                        @else
                                        <i class="fas fa-edit text-indigo-500 dark:text-indigo-400 text-xs"></i>
                                        @endif
                                        {{ ucfirst(str_replace(['.', '_'], ' ', $key)) }}
                                        @if($setting['is_encrypted'])
                                        <span class="ml-1 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-indigo-100 dark:bg-indigo-900/30 text-indigo-800 dark:text-indigo-300">
                                            <i class="fas fa-shield-alt mr-1"></i>
                                            Şifreli
                                        </span>
                                        @endif
                                    </span>
                                </label>
                                @if(!empty($setting['description']))
                                <p class="text-xs text-gray-600 dark:text-gray-400 mt-1 flex items-start gap-1">
                                    <i class="fas fa-info-circle text-gray-400 dark:text-gray-500 mt-0.5"></i>
                                    <span>{{ $setting['description'] }}</span>
                                </p>
                                @endif
                            </div>
                            
                            @if($setting['type'] === 'boolean')
                            <div class="mt-3">
                                <label class="relative inline-flex items-center cursor-pointer">
                                    <input type="hidden" name="settings[{{ $key }}][value]" value="0">
                                    <input type="checkbox" 
                                        name="settings[{{ $key }}][value]" 
                                        value="1"
                                        {{ $setting['value'] ? 'checked' : '' }}
                                        class="sr-only peer">
                                    <div class="w-11 h-6 bg-gray-200 dark:bg-gray-600 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 dark:peer-focus:ring-indigo-500/50 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white dark:after:bg-gray-300 after:border-gray-300 dark:after:border-gray-500 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600 dark:peer-checked:bg-indigo-500"></div>
                                    <span class="ml-3 text-sm font-medium text-gray-700 dark:text-gray-300">
                                        {{ $setting['value'] ? 'Aktif' : 'Pasif' }}
                                    </span>
                                </label>
                            </div>
                            @elseif($setting['type'] === 'json')
                            <div class="relative">
                                <textarea 
                                    name="settings[{{ $key }}][value]" 
                                    id="settings[{{ $key }}][value]"
                                    rows="6"
                                    class="block w-full px-4 py-3 text-sm text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all placeholder-gray-400 dark:placeholder-gray-500 font-mono"
                                    placeholder="JSON formatında girin...">{{ is_array($setting['value']) ? json_encode($setting['value'], JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE) : $setting['value'] }}</textarea>
                                <div class="absolute top-2 right-2">
                                    <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300">
                                        <i class="fas fa-code mr-1"></i>
                                        JSON
                                    </span>
                                </div>
                            </div>
                            @else
                            <div class="relative">
                                <input 
                                    type="{{ $setting['is_encrypted'] ? 'password' : ($setting['type'] === 'integer' ? 'number' : 'text') }}"
                                    name="settings[{{ $key }}][value]" 
                                    id="settings[{{ $key }}][value]"
                                    value="{{ $setting['value'] }}"
                                    class="block w-full px-4 py-3 text-sm text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all placeholder-gray-400 dark:placeholder-gray-500 {{ $setting['is_encrypted'] ? 'font-mono tracking-wider' : '' }}"
                                    placeholder="{{ $setting['description'] ?? 'Değer girin...' }}">
                                @if($setting['is_encrypted'])
                                <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                                    <i class="fas fa-eye-slash text-gray-400 dark:text-gray-500"></i>
                                </div>
                                @endif
                            </div>
                            @endif
                            
                            <input type="hidden" name="settings[{{ $key }}][type]" value="{{ $setting['type'] }}">
                            <input type="hidden" name="settings[{{ $key }}][group]" value="{{ $group }}">
                            <input type="hidden" name="settings[{{ $key }}][is_encrypted]" value="{{ $setting['is_encrypted'] ? '1' : '0' }}">
                        </div>
                        @endforeach
                    </div>
                </div>
                
                <div class="bg-gray-50 dark:bg-gray-700/50 px-6 py-5 border-t border-gray-200 dark:border-gray-600 sm:flex sm:flex-row-reverse sm:items-center sm:justify-between">
                    <div class="flex gap-3 sm:ml-3">
                        <button type="submit" class="inline-flex items-center gap-2 rounded-md bg-indigo-600 dark:bg-indigo-500 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 dark:hover:bg-indigo-400 transition">
                            <i class="fas fa-save"></i>
                            Kaydet
                        </button>
                    </div>
                </div>
            </div>
        </form>
        @endif
        @elseif($group !== 'system' && $group !== 'github')
        <!-- Settings Form -->
        @if(!empty($settings))
        <form action="{{ route('settings.update', $group) }}" method="POST">
            @csrf
            <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
                <div class="px-4 py-5 sm:p-6">
                    <h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-gray-100 mb-4">
                            {{ $groups[$group] }}
                    </h3>
                    
                    <div class="space-y-6">
                        @foreach($settings as $key => $setting)
                        <div class="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-5 border border-gray-200 dark:border-gray-600 hover:border-gray-300 dark:hover:border-gray-500 transition-colors">
                            <div class="mb-3">
                                <label for="settings[{{ $key }}][value]" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-1">
                                    <span class="flex items-center gap-2">
                                        @if($setting['is_encrypted'])
                                        <i class="fas fa-lock text-indigo-500 dark:text-indigo-400 text-xs"></i>
                                        @elseif($setting['type'] === 'boolean')
                                        <i class="fas fa-toggle-on text-indigo-500 dark:text-indigo-400 text-xs"></i>
                                        @elseif($setting['type'] === 'json')
                                        <i class="fas fa-code text-indigo-500 dark:text-indigo-400 text-xs"></i>
                                        @else
                                        <i class="fas fa-edit text-indigo-500 dark:text-indigo-400 text-xs"></i>
                                        @endif
                                        {{ ucfirst(str_replace(['.', '_'], ' ', $key)) }}
                                        @if($setting['is_encrypted'])
                                        <span class="ml-1 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-indigo-100 dark:bg-indigo-900/30 text-indigo-800 dark:text-indigo-300">
                                            <i class="fas fa-shield-alt mr-1"></i>
                                            Şifreli
                                        </span>
                                        @endif
                                    </span>
                                </label>
                                @if(!empty($setting['description']))
                                <p class="text-xs text-gray-600 dark:text-gray-400 mt-1 flex items-start gap-1">
                                    <i class="fas fa-info-circle text-gray-400 dark:text-gray-500 mt-0.5"></i>
                                    <span>{{ $setting['description'] }}</span>
                                </p>
                                @endif
                            </div>
                            
                            @if($setting['type'] === 'boolean')
                            <div class="mt-3">
                                <label class="relative inline-flex items-center cursor-pointer">
                                    <input type="hidden" name="settings[{{ $key }}][value]" value="0">
                                    <input type="checkbox" 
                                        name="settings[{{ $key }}][value]" 
                                        value="1"
                                        {{ $setting['value'] ? 'checked' : '' }}
                                        class="sr-only peer">
                                    <div class="w-11 h-6 bg-gray-200 dark:bg-gray-600 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 dark:peer-focus:ring-indigo-500/50 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white dark:after:bg-gray-300 after:border-gray-300 dark:after:border-gray-500 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600 dark:peer-checked:bg-indigo-500"></div>
                                    <span class="ml-3 text-sm font-medium text-gray-700 dark:text-gray-300">
                                        {{ $setting['value'] ? 'Aktif' : 'Pasif' }}
                                    </span>
                                </label>
                            </div>
                            @elseif($setting['type'] === 'json')
                            <div class="relative">
                                <textarea 
                                    name="settings[{{ $key }}][value]" 
                                    id="settings[{{ $key }}][value]"
                                    rows="6"
                                    class="block w-full px-4 py-3 text-sm text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all placeholder-gray-400 dark:placeholder-gray-500 font-mono"
                                    placeholder="JSON formatında girin...">{{ is_array($setting['value']) ? json_encode($setting['value'], JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE) : $setting['value'] }}</textarea>
                                <div class="absolute top-2 right-2">
                                    <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300">
                                        <i class="fas fa-code mr-1"></i>
                                        JSON
                                    </span>
                                </div>
                            </div>
                            @else
                            <div class="relative">
                                <input 
                                    type="{{ $setting['is_encrypted'] ? 'password' : ($setting['type'] === 'integer' ? 'number' : 'text') }}"
                                    name="settings[{{ $key }}][value]" 
                                    id="settings[{{ $key }}][value]"
                                    value="{{ $setting['value'] }}"
                                    class="block w-full px-4 py-3 text-sm text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all placeholder-gray-400 dark:placeholder-gray-500 {{ $setting['is_encrypted'] ? 'font-mono tracking-wider' : '' }}"
                                    placeholder="{{ $setting['description'] ?? 'Değer girin...' }}">
                                @if($setting['is_encrypted'])
                                <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                                    <i class="fas fa-eye-slash text-gray-400 dark:text-gray-500"></i>
                                </div>
                                @endif
                            </div>
                            @endif
                            
                            <input type="hidden" name="settings[{{ $key }}][type]" value="{{ $setting['type'] }}">
                            <input type="hidden" name="settings[{{ $key }}][group]" value="{{ $group }}">
                            <input type="hidden" name="settings[{{ $key }}][is_encrypted]" value="{{ $setting['is_encrypted'] ? '1' : '0' }}">
                        </div>
                        @endforeach
                    </div>
                </div>
                
                <div class="bg-gray-50 dark:bg-gray-700/50 px-6 py-5 border-t border-gray-200 dark:border-gray-600 sm:flex sm:flex-row-reverse sm:items-center sm:justify-between">
                    <div class="flex gap-3 sm:ml-3">
                        <button type="submit" class="inline-flex items-center justify-center gap-2 w-full sm:w-auto px-6 py-3 text-sm font-semibold text-white bg-indigo-600 dark:bg-indigo-500 rounded-lg shadow-sm hover:bg-indigo-700 dark:hover:bg-indigo-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-offset-2 transition-all">
                            <i class="fas fa-save"></i>
                            Değişiklikleri Kaydet
                        </button>
                        <a href="{{ route('settings.index', ['group' => $group]) }}" class="inline-flex items-center justify-center gap-2 w-full sm:w-auto px-6 py-3 text-sm font-semibold text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 rounded-lg shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400 focus:ring-offset-2 transition-all">
                            <i class="fas fa-times"></i>
                            İptal
                        </a>
                    </div>
                    <p class="mt-3 text-xs text-gray-500 dark:text-gray-400 sm:mt-0">
                        <i class="fas fa-info-circle mr-1"></i>
                        Değişiklikler kaydedildikten sonra geçerli olacaktır.
                    </p>
                </div>
            </div>
        </form>
        @else
        <!-- No Settings Message -->
        <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
            <div class="px-4 py-5 sm:p-6">
                <div class="text-center py-8 text-gray-500 dark:text-gray-400">
                    <i class="fas fa-cog text-4xl text-gray-300 dark:text-gray-600 mb-4"></i>
                    <p class="text-lg font-medium">Bu grup için ayar bulunmamaktadır.</p>
                    <p class="mt-2 text-sm">Sayfa yenilendiğinde varsayılan ayarlar otomatik olarak oluşturulacaktır.</p>
                </div>
            </div>
        </div>
        @endif
        @endif
    </div>
</div>
<script>
function addSshHostPassword() {
    const container = document.getElementById('ssh-host-passwords-container');
    const timestamp = Date.now();
    const newRow = document.createElement('div');
    newRow.className = 'bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 border border-gray-200 dark:border-gray-600';
    newRow.setAttribute('data-ssh-host', 'new_' + timestamp);
    newRow.innerHTML = `
        <div class="flex items-start gap-4">
            <div class="flex-1">
                <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                    <i class="fas fa-network-wired mr-2"></i> SSH Host
                </label>
                <input type="text" 
                    name="ssh_host_passwords[new_${timestamp}][host]" 
                    class="block w-full px-4 py-2.5 text-sm text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all"
                    placeholder="sunucu.domain.com"
                    required>
            </div>
            <div class="flex-1">
                <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                    <i class="fas fa-key mr-2"></i> MySQL Root Şifresi
                </label>
                <div class="relative">
                    <input type="password" 
                        name="ssh_host_passwords[new_${timestamp}][password]" 
                        class="block w-full px-4 py-2.5 text-sm text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all font-mono tracking-wider"
                        placeholder="MySQL root şifresi"
                        required>
                    <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                        <i class="fas fa-eye-slash text-gray-400 dark:text-gray-500"></i>
                    </div>
                </div>
            </div>
            <div class="flex items-end">
                <button type="button" onclick="removeSshHostPassword(this)" class="inline-flex items-center gap-2 rounded-md bg-red-600 dark:bg-red-500 px-3 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-red-500 dark:hover:bg-red-400 transition">
                    <i class="fas fa-trash"></i>
                    Sil
                </button>
            </div>
        </div>
    `;
    container.appendChild(newRow);
}

function removeSshHostPassword(button) {
    const row = button.closest('[data-ssh-host]');
    if (row && confirm('Bu SSH host şifresini silmek istediğinize emin misiniz?')) {
        row.remove();
    }
}

function addSshHostDatabase() {
    const container = document.getElementById('ssh-host-databases-container');
    const timestamp = Date.now();
    const newRow = document.createElement('div');
    newRow.className = 'bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 border border-gray-200 dark:border-gray-600';
    newRow.setAttribute('data-ssh-host-db', 'new_' + timestamp);
    newRow.innerHTML = `
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <div>
                <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                    <i class="fas fa-network-wired mr-2"></i> SSH Host
                </label>
                <input type="text" 
                    name="ssh_host_databases[new_${timestamp}][host]" 
                    class="block w-full px-4 py-2.5 text-sm text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all"
                    placeholder="sunucu.domain.com"
                    required>
            </div>
            <div>
                <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                    <i class="fas fa-server mr-2"></i> Veritabanı Host
                </label>
                <input type="text" 
                    name="ssh_host_databases[new_${timestamp}][db_host]" 
                    value="localhost"
                    class="block w-full px-4 py-2.5 text-sm text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all"
                    placeholder="localhost">
            </div>
            <div>
                <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                    <i class="fas fa-plug mr-2"></i> Veritabanı Port
                </label>
                <input type="number" 
                    name="ssh_host_databases[new_${timestamp}][db_port]" 
                    value="3306"
                    class="block w-full px-4 py-2.5 text-sm text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all"
                    placeholder="3306">
            </div>
            <div>
                <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                    <i class="fas fa-user mr-2"></i> Veritabanı Kullanıcı Adı
                </label>
                <input type="text" 
                    name="ssh_host_databases[new_${timestamp}][db_username]" 
                    value="root"
                    class="block w-full px-4 py-2.5 text-sm text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all"
                    placeholder="root">
            </div>
            <div class="md:col-span-2 lg:col-span-4">
                <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                    <i class="fas fa-key mr-2"></i> Veritabanı Şifresi
                </label>
                <div class="relative">
                    <input type="password" 
                        name="ssh_host_databases[new_${timestamp}][db_password]" 
                        class="block w-full px-4 py-2.5 text-sm text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all font-mono tracking-wider"
                        placeholder="Veritabanı şifresi">
                    <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                        <i class="fas fa-eye-slash text-gray-400 dark:text-gray-500"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="mt-4 flex justify-end">
            <button type="button" onclick="removeSshHostDatabase(this)" class="inline-flex items-center gap-2 rounded-md bg-red-600 dark:bg-red-500 px-3 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-red-500 dark:hover:bg-red-400 transition">
                <i class="fas fa-trash"></i>
                Sil
            </button>
        </div>
    `;
    container.appendChild(newRow);
}

function removeSshHostDatabase(button) {
    const row = button.closest('[data-ssh-host-db]');
    if (row && confirm('Bu veritabanı ekini silmek istediğinize emin misiniz?')) {
        row.remove();
    }
}

function addSshHostInfo() {
    const container = document.getElementById('ssh-host-infos-container');
    const timestamp = Date.now();
    const newRow = document.createElement('div');
    newRow.className = 'bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 border border-gray-200 dark:border-gray-600';
    newRow.setAttribute('data-ssh-host-info', 'new_' + timestamp);
    newRow.innerHTML = `
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <div>
                <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                    <i class="fas fa-network-wired mr-2"></i> SSH Host <span class="text-red-500">*</span>
                </label>
                <input type="text" 
                    name="ssh_host_infos[new_${timestamp}][host]" 
                    class="block w-full px-4 py-2.5 text-sm text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all"
                    placeholder="sunucu.domain.com"
                    required>
            </div>
            <div>
                <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                    <i class="fas fa-user-shield mr-2"></i> SSH Kullanıcı
                </label>
                <input type="text" 
                    name="ssh_host_infos[new_${timestamp}][user]" 
                    value="deploy"
                    class="block w-full px-4 py-2.5 text-sm text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all"
                    placeholder="deploy">
            </div>
            <div>
                <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                    <i class="fas fa-door-open mr-2"></i> SSH Port
                </label>
                <input type="number" 
                    name="ssh_host_infos[new_${timestamp}][port]" 
                    value="22"
                    class="block w-full px-4 py-2.5 text-sm text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all"
                    placeholder="22"
                    min="1" max="65535">
            </div>
            <div class="md:col-span-2">
                <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                    <i class="fas fa-folder-open mr-2"></i> Sunucu Dizini (Path)
                </label>
                <input type="text" 
                    name="ssh_host_infos[new_${timestamp}][path]" 
                    class="block w-full px-4 py-2.5 text-sm text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all"
                    placeholder="/home/username/public_html/yeni-site">
            </div>
            <div>
                <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                    <i class="fas fa-key mr-2"></i> SSH Parola (Opsiyonel)
                </label>
                <div class="relative">
                    <input type="password" 
                        name="ssh_host_infos[new_${timestamp}][password]" 
                        class="block w-full px-4 py-2.5 text-sm text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all font-mono tracking-wider"
                        placeholder="Parola veya boş bırakın">
                    <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                        <i class="fas fa-eye-slash text-gray-400 dark:text-gray-500"></i>
                    </div>
                </div>
                <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400 flex items-start">
                    <i class="fas fa-info-circle mr-1.5 mt-0.5"></i>
                    <span>SSH anahtarınız tanımlıysa boş bırakabilirsiniz.</span>
                </p>
            </div>
        </div>
        <div class="mt-4 flex justify-end">
            <button type="button" onclick="removeSshHostInfo(this)" class="inline-flex items-center gap-2 rounded-md bg-red-600 dark:bg-red-500 px-3 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-red-500 dark:hover:bg-red-400 transition">
                <i class="fas fa-trash"></i>
                Sil
            </button>
        </div>
    `;
    container.appendChild(newRow);
}

function removeSshHostInfo(button) {
    const row = button.closest('[data-ssh-host-info]');
    if (row && confirm('Bu SSH host bilgisini silmek istediğinize emin misiniz?')) {
        row.remove();
    }
}

// Form submit işlemi artık doğrudan form submit ile yapılıyor
// saveSshHostPasswords fonksiyonu kaldırıldı

// GitHub Repository Güncelleme
function updateFromGitHub() {
    if (!confirm('Projeyi GitHub repository\'den güncellemek istediğinize emin misiniz? Bu işlem git pull, composer install ve cache temizleme işlemlerini yapacaktır.')) {
        return;
    }

    const btn = document.getElementById('update-repo-btn');
    const resultDiv = document.getElementById('update-result');
    
    // Disable button
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Güncelleniyor...';
    
    // Clear previous result
    resultDiv.classList.add('hidden');
    resultDiv.innerHTML = '';
    
    // Options
    const options = {
        run_composer: true,
        clear_cache: true,
        run_migrations: false
    };
    
    fetch('{{ route("settings.github.update") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
        },
        body: JSON.stringify(options),
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            resultDiv.className = 'mb-4 rounded-md bg-green-50 dark:bg-green-900/30 p-4';
            let resultsHtml = '<div class="flex"><div class="flex-shrink-0"><i class="fas fa-check-circle text-green-400 dark:text-green-300"></i></div><div class="ml-3 flex-1">';
            resultsHtml += '<p class="text-sm font-medium text-green-800 dark:text-green-300 mb-2">' + data.message + '</p>';
            
            if (data.results) {
                resultsHtml += '<div class="mt-3 space-y-2 text-xs">';
                if (data.results.git_remote) {
                    resultsHtml += '<div class="bg-blue-100 dark:bg-blue-800/50 p-2 rounded"><strong>Git Remote:</strong> ' + (data.results.git_remote.new_remote || 'Güncellendi') + '</div>';
                }
                if (data.results.git_fetch) {
                    resultsHtml += '<div class="bg-green-100 dark:bg-green-800/50 p-2 rounded"><strong>Git Fetch:</strong> ' + (data.results.git_fetch.success ? '✓ Başarılı' : '✗ Başarısız') + '</div>';
                }
                if (data.results.git_pull) {
                    resultsHtml += '<div class="bg-green-100 dark:bg-green-800/50 p-2 rounded"><strong>Git Pull:</strong> ' + (data.results.git_pull.success ? '✓ Başarılı' : '✗ Başarısız') + '</div>';
                }
                if (data.results.composer) {
                    resultsHtml += '<div class="bg-green-100 dark:bg-green-800/50 p-2 rounded"><strong>Composer:</strong> ' + (data.results.composer.success ? '✓ Başarılı' : '✗ Başarısız') + '</div>';
                }
                if (data.results.cache) {
                    resultsHtml += '<div class="bg-green-100 dark:bg-green-800/50 p-2 rounded"><strong>Cache:</strong> ' + (data.results.cache.success ? '✓ Temizlendi' : '✗ Hata') + '</div>';
                }
                resultsHtml += '</div>';
            }
            
            resultsHtml += '</div></div>';
            resultDiv.innerHTML = resultsHtml;
            
            // Sayfayı 3 saniye sonra yenile
            setTimeout(() => {
                window.location.reload();
            }, 3000);
        } else {
            resultDiv.className = 'mb-4 rounded-md bg-red-50 dark:bg-red-900/30 p-4';
            let errorHtml = '<div class="flex"><div class="flex-shrink-0"><i class="fas fa-exclamation-circle text-red-400 dark:text-red-300"></i></div><div class="ml-3 flex-1">';
            errorHtml += '<p class="text-sm font-medium text-red-800 dark:text-red-300 mb-2">' + data.message + '</p>';
            
            if (data.errors && data.errors.length > 0) {
                errorHtml += '<ul class="list-disc list-inside text-xs text-red-700 dark:text-red-200 mt-2">';
                data.errors.forEach(error => {
                    errorHtml += '<li>' + error + '</li>';
                });
                errorHtml += '</ul>';
            }
            
            if (data.results) {
                errorHtml += '<div class="mt-3 space-y-2 text-xs">';
                Object.keys(data.results).forEach(key => {
                    const result = data.results[key];
                    if (!result.success) {
                        errorHtml += '<div class="bg-red-100 dark:bg-red-800/50 p-2 rounded"><strong>' + key + ':</strong> ' + (result.error || 'Hata') + '</div>';
                    }
                });
                errorHtml += '</div>';
            }
            
            errorHtml += '</div></div>';
            resultDiv.innerHTML = errorHtml;
        }
        
        resultDiv.classList.remove('hidden');
    })
    .catch(error => {
        resultDiv.className = 'mb-4 rounded-md bg-red-50 dark:bg-red-900/30 p-4';
        resultDiv.innerHTML = `
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fas fa-exclamation-circle text-red-400 dark:text-red-300"></i>
                </div>
                <div class="ml-3">
                    <p class="text-sm font-medium text-red-800 dark:text-red-300">
                        Bir hata oluştu: ${error.message}
                    </p>
                </div>
            </div>
        `;
        resultDiv.classList.remove('hidden');
    })
    .finally(() => {
        // Re-enable button
        btn.disabled = false;
        btn.innerHTML = '<i class="fas fa-download"></i> Repository\'den Güncelle';
    });
}

// GitHub Versiyon Kontrolü
function checkGitVersion() {
    const btn = document.getElementById('check-version-btn');
    const resultDiv = document.getElementById('version-check-result');
    
    // Disable button
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Kontrol ediliyor...';
    
    // Clear previous result
    resultDiv.classList.add('hidden');
    resultDiv.innerHTML = '';
    
    fetch('{{ route("settings.github.check-version") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
        },
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            resultDiv.className = 'mb-4 rounded-md bg-green-50 dark:bg-green-900/30 p-4';
            resultDiv.innerHTML = `
                <div class="flex">
                    <div class="flex-shrink-0">
                        <i class="fas fa-check-circle text-green-400 dark:text-green-300"></i>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm font-medium text-green-800 dark:text-green-300">
                            ${data.message}
                        </p>
                        ${data.data ? `
                            <div class="mt-2 text-sm text-green-700 dark:text-green-200">
                                <p><strong>Commit Hash:</strong> <code class="bg-green-100 dark:bg-green-800 px-1 rounded">${data.data.commit_hash}</code></p>
                                <p><strong>Versiyon:</strong> <code class="bg-green-100 dark:bg-green-800 px-1 rounded">${data.data.version || 'Bilinmiyor'}</code></p>
                                <p><strong>Branch:</strong> ${data.data.branch}</p>
                            </div>
                        ` : ''}
                    </div>
                </div>
            `;
            // Sayfayı yenile
            setTimeout(() => {
                window.location.reload();
            }, 2000);
        } else {
            resultDiv.className = 'mb-4 rounded-md bg-red-50 dark:bg-red-900/30 p-4';
            resultDiv.innerHTML = `
                <div class="flex">
                    <div class="flex-shrink-0">
                        <i class="fas fa-exclamation-circle text-red-400 dark:text-red-300"></i>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm font-medium text-red-800 dark:text-red-300">
                            ${data.message}
                        </p>
                    </div>
                </div>
            `;
        }
        
        resultDiv.classList.remove('hidden');
    })
    .catch(error => {
        resultDiv.className = 'mb-4 rounded-md bg-red-50 dark:bg-red-900/30 p-4';
        resultDiv.innerHTML = `
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fas fa-exclamation-circle text-red-400 dark:text-red-300"></i>
                </div>
                <div class="ml-3">
                    <p class="text-sm font-medium text-red-800 dark:text-red-300">
                        Bir hata oluştu: ${error.message}
                    </p>
                </div>
            </div>
        `;
        resultDiv.classList.remove('hidden');
    })
    .finally(() => {
        // Re-enable button
        btn.disabled = false;
        btn.innerHTML = '<i class="fas fa-sync-alt"></i> Versiyon Kontrolü Yap';
    });
}

// Mail Test Form
@if($group === 'mail')
document.getElementById('mail-test-form')?.addEventListener('submit', async function(e) {
    e.preventDefault();
    
    const form = e.target;
    const submitButton = form.querySelector('button[type="submit"]');
    const resultDiv = document.getElementById('mail-test-result');
    const testEmail = document.getElementById('test_email').value;
    
    // Disable button
    submitButton.disabled = true;
    submitButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Gönderiliyor...';
    
    // Clear previous result
    resultDiv.classList.add('hidden');
    resultDiv.innerHTML = '';
    
    try {
        const response = await fetch('{{ route("settings.mail.test") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
            },
            body: JSON.stringify({
                test_email: testEmail
            })
        });
        
        const data = await response.json();
        
        if (data.success) {
            resultDiv.className = 'mt-4 rounded-md bg-green-50 dark:bg-green-900/30 p-4';
            resultDiv.innerHTML = `
                <div class="flex">
                    <div class="flex-shrink-0">
                        <i class="fas fa-check-circle text-green-400 dark:text-green-300"></i>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm font-medium text-green-800 dark:text-green-300">
                            ${data.message}
                        </p>
                    </div>
                </div>
            `;
        } else {
            resultDiv.className = 'mt-4 rounded-md bg-red-50 dark:bg-red-900/30 p-4';
            resultDiv.innerHTML = `
                <div class="flex">
                    <div class="flex-shrink-0">
                        <i class="fas fa-exclamation-circle text-red-400 dark:text-red-300"></i>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm font-medium text-red-800 dark:text-red-300">
                            ${data.message}
                        </p>
                    </div>
                </div>
            `;
        }
        
        resultDiv.classList.remove('hidden');
    } catch (error) {
        resultDiv.className = 'mt-4 rounded-md bg-red-50 dark:bg-red-900/30 p-4';
        resultDiv.innerHTML = `
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fas fa-exclamation-circle text-red-400 dark:text-red-300"></i>
                </div>
                <div class="ml-3">
                    <p class="text-sm font-medium text-red-800 dark:text-red-300">
                        Bir hata oluştu: ${error.message}
                    </p>
                </div>
            </div>
        `;
        resultDiv.classList.remove('hidden');
    } finally {
        // Re-enable button
        submitButton.disabled = false;
        submitButton.innerHTML = '<i class="fas fa-paper-plane"></i> Test E-postası Gönder';
    }
});
@endif

</script>
@endsection