@extends('layouts.app')

@section('title', 'Yeni SSH Key Ekle')

@section('content')
<div class="px-4 sm:px-6 lg:px-8">
    <div>
        <h1 class="text-3xl font-semibold text-gray-900 dark:text-gray-100 mb-6">Yeni SSH Key Ekle</h1>

        <form action="{{ route('ssh-keys.store') }}" method="POST" enctype="multipart/form-data" class="bg-white dark:bg-gray-800 shadow-sm ring-1 ring-gray-900/5 dark:ring-gray-700/50 border border-gray-200 dark:border-gray-700 sm:rounded-xl">
            @csrf

            <div class="px-4 py-6 sm:p-8">
                <div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
                    <div class="sm:col-span-6">
                        <label for="name" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            Key Adı <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="name" id="name" required value="{{ old('name') }}" 
                            class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-4 py-2.5 text-gray-900 dark:text-gray-100 shadow-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200" 
                            placeholder="Örn: Production Server Key">
                        @error('name')
                        <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="sm:col-span-6">
                        <label for="description" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            Açıklama
                        </label>
                        <textarea name="description" id="description" rows="3"
                            class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-4 py-2.5 text-gray-900 dark:text-gray-100 shadow-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200"
                            placeholder="Bu key'in kullanım amacını açıklayın"></textarea>
                        @error('description')
                        <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="sm:col-span-6">
                        <label for="private_key" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            Private Key <span class="text-red-500">*</span>
                        </label>
                        <input type="file" 
                               name="private_key" 
                               id="private_key" 
                               accept=".pem,.key" 
                               required
                               class="block w-full text-sm text-gray-900 dark:text-gray-100
                                      file:mr-4 file:py-2 file:px-4
                                      file:rounded-lg file:border-0
                                      file:text-sm file:font-semibold
                                      file:bg-blue-50 dark:file:bg-blue-900/20
                                      file:text-blue-700 dark:file:text-blue-300
                                      hover:file:bg-blue-100 dark:hover:file:bg-blue-900/30
                                      file:cursor-pointer
                                      border border-gray-300 dark:border-gray-600
                                      rounded-lg bg-white dark:bg-gray-700
                                      focus:border-blue-500 dark:focus:border-blue-400
                                      focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400
                                      focus:ring-opacity-20 transition-all duration-200">
                        <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
                            <i class="fas fa-info-circle mr-1"></i>
                            Private key dosyanızı seçin (.pem veya .key uzantılı). Public key otomatik olarak çıkarılacaktır.
                        </p>
                        @error('private_key')
                        <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="sm:col-span-6">
                        <label for="passphrase" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            Passphrase (Opsiyonel)
                        </label>
                        <input type="password" name="passphrase" id="passphrase" value="{{ old('passphrase') }}" 
                            class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-4 py-2.5 text-gray-900 dark:text-gray-100 shadow-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200" 
                            placeholder="Private key passphrase'i (varsa)">
                        <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
                            <i class="fas fa-info-circle mr-1"></i>
                            Eğer private key'iniz passphrase ile korunuyorsa buraya girin.
                        </p>
                        @error('passphrase')
                        <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="sm:col-span-6">
                        <label for="public_key" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            Public Key (Opsiyonel - Otomatik Çıkarılacak)
                        </label>
                        <textarea name="public_key" id="public_key" rows="3"
                            class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-4 py-2.5 text-gray-900 dark:text-gray-100 shadow-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200 font-mono text-xs"
                            placeholder="ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQ... (Otomatik çıkarılacak)"></textarea>
                        <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
                            <i class="fas fa-info-circle mr-1"></i>
                            Public key'i manuel olarak girebilirsiniz veya private key'den otomatik çıkarılmasını bekleyebilirsiniz.
                        </p>
                        @error('public_key')
                        <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="sm:col-span-6">
                        <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            SSH Host'lar (Opsiyonel)
                        </label>
                        <div id="ssh-hosts-container" class="space-y-2">
                            <div class="flex gap-2">
                                <input type="text" name="ssh_hosts[]" 
                                    class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-4 py-2.5 text-gray-900 dark:text-gray-100 shadow-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200" 
                                    placeholder="sunucu.domain.com">
                                <button type="button" onclick="addSshHost()" class="inline-flex items-center gap-2 rounded-md bg-gray-200 dark:bg-gray-700 px-3 py-2 text-sm font-semibold text-gray-900 dark:text-gray-100 hover:bg-gray-300 dark:hover:bg-gray-600 transition">
                                    <i class="fas fa-plus"></i>
                                </button>
                            </div>
                        </div>
                        <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
                            <i class="fas fa-info-circle mr-1"></i>
                            Bu key'in kullanılabileceği SSH host'larını belirtin. Boş bırakılırsa tüm host'larda kullanılabilir.
                        </p>
                    </div>
                </div>

                <!-- Varsayılan Sunucu Ayarları -->
                <div class="mt-8 border-t border-gray-200 dark:border-gray-700 pt-6">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
                        <i class="fas fa-server mr-2"></i>
                        Varsayılan Sunucu Ayarları
                    </h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                        Bu ayarlar tüm SSH host'lar için varsayılan olarak kullanılacaktır. Sunucu bazlı özel ayarlar için aşağıdaki bölümü kullanabilirsiniz.
                    </p>
                    
                    <div class="grid grid-cols-1 gap-x-6 gap-y-6 sm:grid-cols-2">
                        <div class="sm:col-span-2">
                            <label for="default_server_path" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                                Varsayılan Sunucu Dizini
                            </label>
                            <input type="text" name="default_server_path" id="default_server_path" value="{{ old('default_server_path', $defaultSettings['default_server_path'] ?? '') }}" 
                                class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-4 py-2.5 text-gray-900 dark:text-gray-100 shadow-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200" 
                                placeholder="/home/username/public_html">
                        </div>

                        <div>
                            <label for="default_server_port" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                                Varsayılan SSH Portu
                            </label>
                            <input type="number" name="default_server_port" id="default_server_port" value="{{ old('default_server_port', $defaultSettings['default_server_port'] ?? 22) }}" min="1" max="65535"
                                class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-4 py-2.5 text-gray-900 dark:text-gray-100 shadow-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200">
                        </div>

                        <div>
                            <label for="default_whm_username" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                                Varsayılan WHM Kullanıcı Adı
                            </label>
                            <input type="text" name="default_whm_username" id="default_whm_username" value="{{ old('default_whm_username', $defaultSettings['default_whm_username'] ?? '') }}" 
                                class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-4 py-2.5 text-gray-900 dark:text-gray-100 shadow-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200" 
                                placeholder="root">
                        </div>

                        <div>
                            <label for="default_cpanel_username" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                                Varsayılan cPanel Kullanıcı Adı
                            </label>
                            <input type="text" name="default_cpanel_username" id="default_cpanel_username" value="{{ old('default_cpanel_username', $defaultSettings['default_cpanel_username'] ?? '') }}" 
                                class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-4 py-2.5 text-gray-900 dark:text-gray-100 shadow-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200" 
                                placeholder="cpanel_user">
                        </div>

                        <div>
                            <label for="default_prefix" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                                <i class="fas fa-tag mr-2"></i> Varsayılan Sunucu Ön Eki
                            </label>
                            <input type="text" name="default_prefix" id="default_prefix" value="{{ old('default_prefix', $defaultSettings['default_prefix'] ?? '') }}" 
                                class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-4 py-2.5 text-gray-900 dark:text-gray-100 shadow-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200" 
                                placeholder="Örn: marineototech_">
                            <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
                                <i class="fas fa-info-circle mr-1"></i>
                                Veritabanı ve kullanıcı adları için kullanılacak ön ek. Sonunda _ karakteri otomatik eklenir.
                            </p>
                        </div>

                        <div>
                            <label for="default_cpanel_api_key" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                                Varsayılan cPanel API Key
                            </label>
                            <input type="password" name="default_cpanel_api_key" id="default_cpanel_api_key" value="{{ old('default_cpanel_api_key', $defaultSettings['default_cpanel_api_key'] ?? '') }}" 
                                class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-4 py-2.5 text-gray-900 dark:text-gray-100 shadow-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200 font-mono text-xs" 
                                placeholder="cPanel API Key">
                        </div>

                        <div>
                            <label for="default_whm_api_key" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                                Varsayılan WHM API Key
                            </label>
                            <input type="password" name="default_whm_api_key" id="default_whm_api_key" value="{{ old('default_whm_api_key', $defaultSettings['default_whm_api_key'] ?? '') }}" 
                                class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-4 py-2.5 text-gray-900 dark:text-gray-100 shadow-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200 font-mono text-xs" 
                                placeholder="WHM API Key">
                        </div>

                        <div>
                            <label for="default_whm_api_token" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                                Varsayılan WHM API Token
                            </label>
                            <input type="password" name="default_whm_api_token" id="default_whm_api_token" value="{{ old('default_whm_api_token', $defaultSettings['default_whm_api_token'] ?? '') }}" 
                                class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-4 py-2.5 text-gray-900 dark:text-gray-100 shadow-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200 font-mono text-xs" 
                                placeholder="WHM API Token">
                        </div>

                        <div>
                            <label for="default_whm_api_hash" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                                Varsayılan WHM API Hash
                            </label>
                            <input type="password" name="default_whm_api_hash" id="default_whm_api_hash" value="{{ old('default_whm_api_hash', $defaultSettings['default_whm_api_hash'] ?? '') }}" 
                                class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-4 py-2.5 text-gray-900 dark:text-gray-100 shadow-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200 font-mono text-xs" 
                                placeholder="WHM API Hash">
                        </div>
                    </div>
                </div>

                <!-- Sunucu Bazlı Özel Ayarlar -->
                <div class="mt-8 border-t border-gray-200 dark:border-gray-700 pt-6">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">
                            <i class="fas fa-network-wired mr-2"></i>
                            Sunucu Bazlı Özel Ayarlar
                        </h3>
                        <button type="button" onclick="addServerConfig()" 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>
                            Sunucu Ekle
                        </button>
                    </div>
                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                        Her SSH host için özel ayarlar tanımlayabilirsiniz. Bu ayarlar varsayılan ayarları geçersiz kılar.
                    </p>
                    
                    <div id="server-configs-container" class="space-y-4">
                        <!-- Sunucu ayarları buraya dinamik olarak eklenecek -->
                    </div>
                </div>
                </div>

                <div class="mt-6 flex justify-end gap-3">
                    <a href="{{ route('ssh-keys.index') }}" class="inline-flex items-center gap-2 rounded-md bg-gray-200 dark:bg-gray-700 px-4 py-2 text-sm font-semibold text-gray-900 dark:text-gray-100 hover:bg-gray-300 dark:hover:bg-gray-600 transition">
                        İptal
                    </a>
                    <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>
        </form>
    </div>
</div>

<script>
function addSshHost() {
    const container = document.getElementById('ssh-hosts-container');
    const newRow = document.createElement('div');
    newRow.className = 'flex gap-2';
    newRow.innerHTML = `
        <input type="text" name="ssh_hosts[]" 
            class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-4 py-2.5 text-gray-900 dark:text-gray-100 shadow-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200" 
            placeholder="sunucu.domain.com">
        <button type="button" onclick="removeSshHost(this)" class="inline-flex items-center gap-2 rounded-md bg-red-200 dark:bg-red-900/30 px-3 py-2 text-sm font-semibold text-red-900 dark:text-red-300 hover:bg-red-300 dark:hover:bg-red-900/50 transition">
            <i class="fas fa-trash"></i>
        </button>
    `;
    container.appendChild(newRow);
}

function removeSshHost(button) {
    button.closest('.flex').remove();
}

let serverConfigIndex = 0;

function addServerConfig() {
    const container = document.getElementById('server-configs-container');
    const index = serverConfigIndex++;
    const newConfig = document.createElement('div');
    newConfig.className = 'bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 border border-gray-200 dark:border-gray-600';
    newConfig.innerHTML = `
        <div class="flex items-center justify-between mb-4">
            <h4 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Sunucu Ayarları</h4>
            <button type="button" onclick="removeServerConfig(this)" class="inline-flex items-center gap-2 rounded-md bg-red-200 dark:bg-red-900/30 px-3 py-2 text-sm font-semibold text-red-900 dark:text-red-300 hover:bg-red-300 dark:hover:bg-red-900/50 transition">
                <i class="fas fa-trash"></i>
                Kaldır
            </button>
        </div>
        <div class="grid grid-cols-1 gap-x-4 gap-y-4 sm:grid-cols-2">
            <div class="sm:col-span-2">
                <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                    SSH Host <span class="text-red-500">*</span>
                </label>
                <input type="text" name="server_configs[${index}][host]" required
                    class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-4 py-2.5 text-gray-900 dark:text-gray-100 shadow-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200" 
                    placeholder="sunucu.domain.com">
            </div>
            <div class="sm:col-span-2">
                <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                    Sunucu Dizini
                </label>
                <input type="text" name="server_configs[${index}][path]"
                    class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-4 py-2.5 text-gray-900 dark:text-gray-100 shadow-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200" 
                    placeholder="/home/username/public_html">
            </div>
            <div>
                <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                    SSH Portu
                </label>
                <input type="number" name="server_configs[${index}][port]" min="1" max="65535"
                    class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-4 py-2.5 text-gray-900 dark:text-gray-100 shadow-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200" 
                    placeholder="22">
            </div>
            <div>
                <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                    WHM Kullanıcı Adı
                </label>
                <input type="text" name="server_configs[${index}][whm_username]"
                    class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-4 py-2.5 text-gray-900 dark:text-gray-100 shadow-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200" 
                    placeholder="root">
            </div>
            <div>
                <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                    cPanel Kullanıcı Adı
                </label>
                <input type="text" name="server_configs[${index}][cpanel_username]"
                    class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-4 py-2.5 text-gray-900 dark:text-gray-100 shadow-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200" 
                    placeholder="cpanel_user">
            </div>
            <div>
                <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                    cPanel API Key
                </label>
                <input type="password" name="server_configs[${index}][cpanel_api_key]"
                    class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-4 py-2.5 text-gray-900 dark:text-gray-100 shadow-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200 font-mono text-xs" 
                    placeholder="cPanel API Key">
            </div>
            <div>
                <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                    WHM API Key
                </label>
                <input type="password" name="server_configs[${index}][whm_api_key]"
                    class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-4 py-2.5 text-gray-900 dark:text-gray-100 shadow-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200 font-mono text-xs" 
                    placeholder="WHM API Key">
            </div>
            <div>
                <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                    WHM API Token
                </label>
                <input type="password" name="server_configs[${index}][whm_api_token]"
                    class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-4 py-2.5 text-gray-900 dark:text-gray-100 shadow-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200 font-mono text-xs" 
                    placeholder="WHM API Token">
            </div>
            <div>
                <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                    WHM API Hash
                </label>
                <input type="password" name="server_configs[${index}][whm_api_hash]"
                    class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-4 py-2.5 text-gray-900 dark:text-gray-100 shadow-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200 font-mono text-xs" 
                    placeholder="WHM API Hash">
            </div>
        </div>
    `;
    container.appendChild(newConfig);
}

function removeServerConfig(button) {
    button.closest('.bg-gray-50').remove();
}
</script>
@endsection