@extends('layouts.app')

@section('title', 'SSH Key Düzenle')

@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">SSH Key Düzenle</h1>

        <form action="{{ route('ssh-keys.update', $sshKey) }}" 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
            @method('PUT')

            <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', $sshKey->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">{{ old('description', $sshKey->description) }}</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 (Değiştirmek için yeni key dosyası seçin)
                        </label>
                        @if($sshKey->private_key_encrypted)
                            <div class="mb-2 p-3 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg">
                                <p class="text-sm text-green-800 dark:text-green-300">
                                    <i class="fas fa-check-circle mr-2"></i>
                                    Private key kaydedilmiş ({{ strlen($sshKey->private_key_encrypted) }} karakter). Değiştirmek için yeni key dosyası seçin.
                                </p>
                            </div>
                        @else
                            <div class="mb-2 p-3 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
                                <p class="text-sm text-yellow-800 dark:text-yellow-300">
                                    <i class="fas fa-exclamation-triangle mr-2"></i>
                                    Private key kaydedilmemiş. Lütfen private key dosyası seçin.
                                </p>
                            </div>
                        @endif
                        <input type="file" 
                               name="private_key" 
                               id="private_key" 
                               accept=".pem,.key"
                               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>
                            Yeni private key dosyası seçerseniz, public key otomatik olarak güncellenecektir. Boş bırakılırsa mevcut key korunur.
                        </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>
                            Yeni passphrase girmek için buraya yazın (boş bırakılırsa mevcut passphrase korunur).
                        </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
                        </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="Public key">{{ old('public_key', $sshKey->public_key) }}</textarea>
                        @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">
                            @if($sshKey->ssh_hosts && count($sshKey->ssh_hosts) > 0)
                                @foreach($sshKey->ssh_hosts as $host)
                                <div class="flex gap-2">
                                    <input type="text" name="ssh_hosts[]" value="{{ $host }}"
                                        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>
                                </div>
                                @endforeach
                            @else
                                <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>
                            @endif
                        </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', $sshKey->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', $sshKey->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', $sshKey->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', $sshKey->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', $sshKey->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', $sshKey->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">
                            <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
                                <i class="fas fa-info-circle mr-1"></i>
                                Değiştirmek için yeni key girin (boş bırakılırsa mevcut key korunur).
                            </p>
                        </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', $sshKey->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">
                            <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
                                <i class="fas fa-info-circle mr-1"></i>
                                Değiştirmek için yeni key girin (boş bırakılırsa mevcut key korunur).
                            </p>
                        </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', $sshKey->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">
                            <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
                                <i class="fas fa-info-circle mr-1"></i>
                                Değiştirmek için yeni token girin (boş bırakılırsa mevcut token korunur).
                            </p>
                        </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', $sshKey->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">
                            <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
                                <i class="fas fa-info-circle mr-1"></i>
                                Değiştirmek için yeni hash girin (boş bırakılırsa mevcut hash korunur).
                            </p>
                        </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">
                        @if($sshKey->server_configs && count($sshKey->server_configs) > 0)
                            @foreach($sshKey->server_configs as $host => $config)
                                @php
                                    $configIndex = $loop->index;
                                @endphp
                                <div class="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 border border-gray-200 dark:border-gray-600">
                                    <div class="flex items-center justify-between mb-4">
                                        <h4 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Sunucu: {{ $host }}</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[{{ $configIndex }}][host]" value="{{ $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[{{ $configIndex }}][path]" value="{{ $config['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[{{ $configIndex }}][port]" value="{{ $config['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[{{ $configIndex }}][whm_username]" value="{{ $config['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[{{ $configIndex }}][cpanel_username]" value="{{ $config['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[{{ $configIndex }}][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="Değiştirmek için yeni key girin">
                                            <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
                                                <i class="fas fa-info-circle mr-1"></i>
                                                Değiştirmek için yeni key girin (boş bırakılırsa mevcut key korunur).
                                            </p>
                                        </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[{{ $configIndex }}][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="Değiştirmek için yeni key girin">
                                            <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
                                                <i class="fas fa-info-circle mr-1"></i>
                                                Değiştirmek için yeni key girin (boş bırakılırsa mevcut key korunur).
                                            </p>
                                        </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[{{ $configIndex }}][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="Değiştirmek için yeni token girin">
                                            <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
                                                <i class="fas fa-info-circle mr-1"></i>
                                                Değiştirmek için yeni token girin (boş bırakılırsa mevcut token korunur).
                                            </p>
                                        </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[{{ $configIndex }}][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="Değiştirmek için yeni hash girin">
                                            <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
                                                <i class="fas fa-info-circle mr-1"></i>
                                                Değiştirmek için yeni hash girin (boş bırakılırsa mevcut hash korunur).
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @endif
                    </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>
                        Güncelle
                    </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 = {{ ($sshKey->server_configs && count($sshKey->server_configs) > 0) ? count($sshKey->server_configs) : 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