@extends('layouts.app')

@section('title', 'Yeni Site 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 Site Ekle</h1>

        <form action="{{ route('sites.store') }}" method="POST" 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 md:col-span-2">
            @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">
                            Site 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="Site adını girin">
                        @error('name')
                        <p class="mt-2 text-sm text-red-600 dark:text-red-400 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                        </p>
                        @enderror
                    </div>

                    <div class="sm:col-span-4">
                        <label for="url" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            URL <span class="text-red-500">*</span>
                        </label>
                        <input type="url" name="url" id="url" required value="{{ old('url') }}" 
                            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="https://example.com">
                        @error('url')
                        <p class="mt-2 text-sm text-red-600 dark:text-red-400 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                        </p>
                        @enderror
                    </div>

                    <div class="sm:col-span-2">
                        <label for="language" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            <i class="fas fa-language"></i> Dil <span class="text-red-500">*</span>
                        </label>
                        <select name="language" id="language" 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 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 cursor-pointer">
                            <option value="" disabled {{ old('language') ? '' : 'selected' }}>Dil Seçiniz</option>
                            @php
                                $languages = [
                                    'tr' => 'Türkçe',
                                    'en' => 'İngilizce',
                                    'de' => 'Almanca',
                                    'fr' => 'Fransızca',
                                    'es' => 'İspanyolca',
                                    'it' => 'İtalyanca',
                                    'ru' => 'Rusça',
                                    'ar' => 'Arapça',
                                    'zh' => 'Çince',
                                    'ja' => 'Japonca',
                                ];
                            @endphp
                            @foreach($languages as $code => $name)
                            <option value="{{ $code }}" {{ old('language') === $code ? 'selected' : '' }}>
                                {{ $name }} ({{ strtoupper($code) }})
                            </option>
                            @endforeach
                        </select>
                        <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>Site dilini seçin. Fiyat yönetimi sayfasında filtreleme için kullanılır.</span>
                        </p>
                        @error('language')
                        <p class="mt-2 text-sm text-red-600 dark:text-red-400 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                        </p>
                        @enderror
                    </div>

                    <div class="sm:col-span-2">
                        <label for="sector" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            <i class="fas fa-industry"></i> Sektör <span class="text-red-500">*</span>
                        </label>
                        <select name="sector" id="sector" 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 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 cursor-pointer">
                            <option value="" disabled {{ old('sector') ? '' : 'selected' }}>Sektör Seçiniz</option>
                            @foreach(($sectors ?? []) as $sector)
                                <option value="{{ $sector }}" {{ old('sector') === $sector ? 'selected' : '' }}>
                                    {{ ucfirst($sector) }}
                                </option>
                            @endforeach
                            <option value="__custom" {{ old('sector') === '__custom' ? 'selected' : '' }}>Yeni Sektör Ekle</option>
                        </select>
                        <input type="text"
                               name="custom_sector"
                               id="custom_sector"
                               value="{{ old('custom_sector') }}"
                               class="mt-2 {{ old('sector') === '__custom' ? '' : 'hidden' }} block w-full rounded-lg border border-dashed border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-4 py-2 text-sm 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 transition-all duration-200"
                               placeholder="Örn: health, finance">
                        @error('sector')
                        <p class="mt-2 text-sm text-red-600 dark:text-red-400 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                        </p>
                        @enderror
                    </div>

                    <div class="sm:col-span-2">
                        <label for="currency" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            <i class="fas fa-dollar-sign"></i> Para Birimi <span class="text-red-500">*</span>
                        </label>
                        <select name="currency" id="currency" 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 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 cursor-pointer">
                            @php
                                $currencies = [
                                    'TRY' => 'Türk Lirası (₺)',
                                    'USD' => 'ABD Doları ($)',
                                    'EUR' => 'Euro (€)',
                                    'GBP' => 'İngiliz Sterlini (£)',
                                    'CHF' => 'İsviçre Frangı (CHF)',
                                    'JPY' => 'Japon Yeni (¥)',
                                    'CAD' => 'Kanada Doları (C$)',
                                    'AUD' => 'Avustralya Doları (A$)',
                                ];
                            @endphp
                            @foreach($currencies as $code => $name)
                            <option value="{{ $code }}" {{ old('currency', 'TRY') === $code ? 'selected' : '' }}>
                                {{ $name }}
                            </option>
                            @endforeach
                        </select>
                        <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>Site para birimini seçin. Bu siteye ait tüm ürünler bu para birimini kullanır.</span>
                        </p>
                        @error('currency')
                        <p class="mt-2 text-sm text-red-600 dark:text-red-400 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                        </p>
                        @enderror
                    </div>

                    <div class="sm:col-span-2">
                        <label for="assigned_to" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            Atanan Geliştirici <span class="text-red-500">*</span>
                        </label>
                        <select name="assigned_to" id="assigned_to" required
                            {{ auth()->user()->role === 'developer' ? 'disabled' : '' }}
                            class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 {{ auth()->user()->role === 'developer' ? 'bg-gray-100 dark:bg-gray-600 cursor-not-allowed' : 'bg-white dark:bg-gray-700 cursor-pointer' }} px-4 py-2.5 text-gray-900 dark:text-gray-100 shadow-sm 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">
                            <option value="" disabled {{ (old('assigned_to') || (auth()->user()->role === 'developer' && !old('assigned_to'))) ? '' : 'selected' }}>Geliştirici Seçiniz</option>
                            @foreach($developers as $developer)
                            <option value="{{ $developer->id }}" {{ (old('assigned_to') == $developer->id || (auth()->user()->role === 'developer' && auth()->user()->id == $developer->id && !old('assigned_to'))) ? 'selected' : '' }}>{{ $developer->name }}</option>
                            @endforeach
                        </select>
                        @if(auth()->user()->role === 'developer')
                        <input type="hidden" name="assigned_to" value="{{ auth()->user()->id }}">
                        @endif
                        @error('assigned_to')
                        <p class="mt-2 text-sm text-red-600 dark:text-red-400 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                        </p>
                        @enderror
                    </div>

                    <div class="sm:col-span-3">
                        <label for="status" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            Durum <span class="text-red-500">*</span>
                        </label>
                        <select name="status" id="status" 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 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 cursor-pointer">
                            <option value="active" {{ old('status', 'active') === 'active' ? 'selected' : '' }}>Aktif</option>
                            <option value="inactive" {{ old('status') === 'inactive' ? 'selected' : '' }}>Pasif</option>
                            <option value="maintenance" {{ old('status') === 'maintenance' ? 'selected' : '' }}>Bakım</option>
                        </select>
                        @error('status')
                        <p class="mt-2 text-sm text-red-600 dark:text-red-400 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                        </p>
                        @enderror
                    </div>

                    <div class="sm:col-span-3">
                        <label for="blueprint_id" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            Blueprint Şablonu <span class="text-red-500">*</span>
                        </label>
                        <select name="blueprint_id" id="blueprint_id" 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 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 cursor-pointer">
                            @if(isset($blueprints) && $blueprints->count() > 0)
                                <option value="" {{ old('blueprint_id') ? '' : 'selected' }}>Blueprint Seçiniz</option>
                                @foreach($blueprints as $blueprint)
                                <option value="{{ $blueprint->id }}" {{ old('blueprint_id') == $blueprint->id ? 'selected' : '' }}>{{ $blueprint->name }}</option>
                                @endforeach
                            @else
                                <option value="" disabled selected>Blueprint bulunamadı. Lütfen yöneticiye bildirin.</option>
                            @endif
                        </select>
                        <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
                            Blueprint seçildiğinde WP-CLI script otomatik olarak doldurulacaktır.
                        </p>
                        @error('blueprint_id')
                        <p class="mt-2 text-sm text-red-600 dark:text-red-400 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                        </p>
                        @enderror
                    </div>

                    @if(isset($categories) && $categories->count() > 0)
                    <div class="sm:col-span-3">
                        <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            <i class="fas fa-folder"></i> Kategoriler
                        </label>
                        <div class="space-y-2 max-h-40 overflow-y-auto border border-gray-300 dark:border-gray-600 rounded-lg p-3 bg-white dark:bg-gray-700">
                            @foreach($categories as $category)
                            <label class="flex items-center gap-2 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-600 p-2 rounded transition-colors">
                                <input type="checkbox" name="category_ids[]" value="{{ $category->id }}" 
                                    {{ in_array($category->id, old('category_ids', [])) ? 'checked' : '' }}
                                    class="rounded border-gray-300 dark:border-gray-600 text-indigo-600 dark:text-indigo-400 focus:ring-indigo-500 dark:focus:ring-indigo-400 bg-white dark:bg-gray-800">
                                <div class="flex items-center gap-2 flex-1">
                                    <div class="h-4 w-4 rounded-full" style="background-color: {{ $category->color }};"></div>
                                    <span class="text-sm text-gray-900 dark:text-gray-100">{{ $category->name }}</span>
                                </div>
                            </label>
                            @endforeach
                        </div>
                        <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
                            Siteyi kategorilere göre organize edin.
                        </p>
                    </div>
                    @endif

                    @if(isset($tags) && $tags->count() > 0)
                    <div class="sm:col-span-3">
                        <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            <i class="fas fa-tags"></i> Etiketler
                        </label>
                        <div class="space-y-2 max-h-40 overflow-y-auto border border-gray-300 dark:border-gray-600 rounded-lg p-3 bg-white dark:bg-gray-700">
                            @foreach($tags as $tag)
                            <label class="flex items-center gap-2 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-600 p-2 rounded transition-colors">
                                <input type="checkbox" name="tag_ids[]" value="{{ $tag->id }}" 
                                    {{ in_array($tag->id, old('tag_ids', [])) ? 'checked' : '' }}
                                    class="rounded border-gray-300 dark:border-gray-600 text-indigo-600 dark:text-indigo-400 focus:ring-indigo-500 dark:focus:ring-indigo-400 bg-white dark:bg-gray-800">
                                <div class="flex items-center gap-2 flex-1">
                                    <div class="h-4 w-4 rounded-full" style="background-color: {{ $tag->color }};"></div>
                                    <span class="text-sm text-gray-900 dark:text-gray-100">{{ $tag->name }}</span>
                                </div>
                            </label>
                            @endforeach
                        </div>
                        <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
                            Siteye etiketler ekleyerek daha iyi organize edin.
                        </p>
                    </div>
                    @endif

                    <div class="sm:col-span-6">
                        <label for="copy_db_from_site" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            <i class="fas fa-copy"></i> Mevcut Siteden Veritabanı Bilgilerini Kopyala (Opsiyonel)
                        </label>
                        <select name="copy_db_from_site" id="copy_db_from_site" 
                            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">
                            <option value="">Yeni veritabanı bilgileri girin</option>
                            
                            {{-- Mevcut sitelerden veritabanları --}}
                            @foreach($existingSites as $sshHost => $sites)
                                <optgroup label="Mevcut Siteler - SSH Host: {{ $sshHost }}">
                                    @foreach($sites as $site)
                                        <option value="site_{{ $site->id }}" 
                                            data-db-name="{{ $site->db_name }}" 
                                            data-db-user="{{ $site->db_user }}" 
                                            data-db-password="{{ $site->db_password }}">
                                            {{ $site->name }} - {{ $site->db_name }} / {{ $site->db_user }}
                                        </option>
                                    @endforeach
                                </optgroup>
                            @endforeach
                            
                            {{-- cPanel API'den çekilen veritabanları --}}
                            @if(isset($availableDatabases) && !empty($availableDatabases))
                                @foreach($availableDatabases as $sshHost => $databases)
                                    @if(!empty($databases))
                                        <optgroup label="cPanel API - {{ $sshHost === 'GENERAL_API' ? 'Genel API' : 'SSH Host: ' . $sshHost }}">
                                            @foreach($databases as $db)
                                                <option value="api_{{ $db['db_name'] }}_{{ $db['db_user'] }}_{{ $db['db_host'] }}" 
                                                    data-db-name="{{ $db['db_name'] }}" 
                                                    data-db-user="{{ $db['db_user'] }}" 
                                                    data-db-password=""
                                                    data-source="cpanel_api">
                                                    {{ $db['site_name'] }} - {{ $db['db_name'] }} / {{ $db['db_user'] }}@{{ $db['db_host'] }}
                                                </option>
                                            @endforeach
                                        </optgroup>
                                    @endif
                                @endforeach
                            @endif
                        </select>
                        <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>Mevcut bir siteden veritabanı bilgilerini kopyalamak için seçin. Alanlar otomatik olarak doldurulacaktır.</span>
                        </p>
                    </div>

                    <div class="sm:col-span-3">
                        <label for="db_name" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            <i class="fas fa-database"></i> WP Veritabanı Adı <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="db_name" id="db_name" required value="{{ old('db_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="blueprint_store_tr">
                        @error('db_name')
                        <p class="mt-2 text-sm text-red-600 dark:text-red-400 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                        </p>
                        @enderror
                    </div>

                    <div class="sm:col-span-3">
                        <label for="db_user" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            <i class="fas fa-user-lock"></i> WP Veritabanı Kullanıcı <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="db_user" id="db_user" required value="{{ old('db_user') }}"
                            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="blueprint_user_tr">
                        @error('db_user')
                        <p class="mt-2 text-sm text-red-600 dark:text-red-400 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                        </p>
                        @enderror
                    </div>

                    <div class="sm:col-span-3">
                        <label for="db_password" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            <i class="fas fa-key"></i> WP Veritabanı Şifresi <span class="text-red-500">*</span>
                        </label>
                        <input type="password" name="db_password" id="db_password" required value="{{ old('db_password') }}"
                            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="Veritabanı şifresi">
                        <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>WordPress veritabanı bağlantısı için kullanılacak şifre.</span>
                        </p>
                        @error('db_password')
                        <p class="mt-2 text-sm text-red-600 dark:text-red-400 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                        </p>
                        @enderror
                    </div>

                    <div class="sm:col-span-6">
                        <label for="api_secret" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            <i class="fas fa-key"></i> GSP API Secret Key
                        </label>
                        <input type="text" name="api_secret" id="api_secret" value="{{ old('api_secret') }}" 
                            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="GSP Connector eklentisi için API Secret Key">
                        <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>WordPress'teki GSP Connector eklentisinde oluşturulan API Secret Key'i buraya girin. Bu key ile uzaktan ürün yönetimi yapılabilir.</span>
                        </p>
                        @error('api_secret')
                        <p class="mt-2 text-sm text-red-600 dark:text-red-400 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                        </p>
                        @enderror
                    </div>

                    <div class="sm:col-span-6 border-t border-gray-200 dark:border-gray-700 pt-6 mt-2">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
                            <i class="fas fa-wordpress"></i> WordPress REST API Yetkilendirme
                        </h3>
                        <p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
                            Sayfa transferi ve WordPress standart REST API işlemleri için WordPress Application Password gereklidir.
                        </p>
                    </div>

                    <div class="sm:col-span-3">
                        <label for="wp_username" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            <i class="fas fa-user"></i> WordPress Kullanıcı Adı
                        </label>
                        <input type="text" name="wp_username" id="wp_username" value="{{ old('wp_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="WordPress kullanıcı adı">
                        <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>WordPress REST API erişimi için kullanılacak kullanıcı adı.</span>
                        </p>
                        @error('wp_username')
                        <p class="mt-2 text-sm text-red-600 dark:text-red-400 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                        </p>
                        @enderror
                    </div>

                    <div class="sm:col-span-3">
                        <label for="wp_application_password" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            <i class="fas fa-lock"></i> WordPress Application Password
                        </label>
                        <input type="password" name="wp_application_password" id="wp_application_password" value="{{ old('wp_application_password') }}" 
                            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="Application Password">
                        <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>WordPress > Kullanıcılar > Profil > Application Passwords bölümünden oluşturun.</span>
                        </p>
                        @error('wp_application_password')
                        <p class="mt-2 text-sm text-red-600 dark:text-red-400 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                        </p>
                        @enderror
                    </div>

                    <div class="sm:col-span-6 border-t border-gray-200 dark:border-gray-700 pt-6 mt-2">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
                            <i class="fas fa-terminal"></i> SSH Bağlantı Bilgileri
                        </h3>
                        <p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
                            Blueprint klonlama ve WP-CLI komutlarını çalıştırmak için SSH key'ler sayfasından tanımlanan SSH host'u seçin.
                        </p>
                    </div>

                    <div class="sm:col-span-6">
                        <label for="ssh_host" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            <i class="fas fa-network-wired"></i> SSH Host <span class="text-red-500">*</span>
                        </label>
                        <select name="ssh_host" id="ssh_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 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 cursor-pointer">
                            <option value="" {{ old('ssh_host') ? '' : 'selected' }}>SSH Host Seçiniz</option>
                            @if(isset($sshHostInfos) && $sshHostInfos->count() > 0)
                                @foreach($sshHostInfos as $sshInfo)
                                <option value="{{ $sshInfo['host'] }}" 
                                    data-user="{{ $sshInfo['user'] ?? '' }}"
                                    data-port="{{ $sshInfo['port'] ?? '22' }}"
                                    data-path="{{ $sshInfo['path'] ?? '' }}"
                                    data-password="{{ $sshInfo['password'] ?? '' }}"
                                    {{ old('ssh_host') === $sshInfo['host'] ? 'selected' : '' }}>
                                    {{ $sshInfo['host'] }}
                                </option>
                                @endforeach
                            @else
                                <option value="" disabled>SSH key'ler sayfasından SSH host tanımlayın</option>
                            @endif
                        </select>
                        <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 host bilgileri SSH key'ler üzerinden yönetilir. Yeni SSH host eklemek için <a href="{{ route('ssh-keys.index') }}" class="text-blue-600 dark:text-blue-400 hover:underline">SSH Key'ler</a> sayfasına gidin.</span>
                        </p>
                        @error('ssh_host')
                        <p class="mt-2 text-sm text-red-600 dark:text-red-400 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                        </p>
                        @enderror
                    </div>

                    <div class="sm:col-span-3">
                        <label for="ssh_user" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            <i class="fas fa-user-shield"></i> SSH Kullanıcı
                        </label>
                        <input type="text" name="ssh_user" id="ssh_user" value="{{ old('ssh_user') }}" readonly
                            class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-600 px-4 py-2.5 text-gray-900 dark:text-gray-100 shadow-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 sm:text-sm transition-all duration-200 cursor-not-allowed"
                            placeholder="SSH host seçin">
                        @error('ssh_user')
                        <p class="mt-2 text-sm text-red-600 dark:text-red-400 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                        </p>
                        @enderror
                    </div>

                    <div class="sm:col-span-3">
                        <label for="ssh_port" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            <i class="fas fa-door-open"></i> SSH Port
                        </label>
                        <input type="number" name="ssh_port" id="ssh_port" value="{{ old('ssh_port', 22) }}" readonly
                            class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-600 px-4 py-2.5 text-gray-900 dark:text-gray-100 shadow-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 sm:text-sm transition-all duration-200 cursor-not-allowed"
                            min="1" max="65535">
                        @error('ssh_port')
                        <p class="mt-2 text-sm text-red-600 dark:text-red-400 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                        </p>
                        @enderror
                    </div>

                    <div class="sm:col-span-6">
                        <label for="ssh_path" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            <i class="fas fa-folder-open"></i> Sunucu Dizini (Path)
                        </label>
                        <input type="text" name="ssh_path" id="ssh_path" value="{{ old('ssh_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/yeni-site">
                        <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>Sunucu dizini otomatik doldurulur, gerekirse düzenleyebilirsiniz.</span>
                        </p>
                        @error('ssh_path')
                        <p class="mt-2 text-sm text-red-600 dark:text-red-400 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                        </p>
                        @enderror
                    </div>

                    <input type="hidden" name="ssh_password" id="ssh_password" value="{{ old('ssh_password') }}">

                    <div class="sm:col-span-6 border-t border-gray-200 dark:border-gray-700 pt-6 mt-2">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
                            <i class="fas fa-user-cog"></i> WordPress Admin Bilgileri
                        </h3>
                        <p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
                            Admin panelinden otomatik çekilecek bilgileri düzenleyebilir veya manuel girebilirsiniz.
                        </p>
                    </div>

                    <div class="sm:col-span-3">
                        <label for="wp_admin_login" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            <i class="fas fa-user"></i> WP Admin Kullanıcı Adı
                        </label>
                        <input type="text" name="wp_admin_login" id="wp_admin_login" value="{{ old('wp_admin_login') }}"
                            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="admin">
                        @error('wp_admin_login')
                        <p class="mt-2 text-sm text-red-600 dark:text-red-400 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                        </p>
                        @enderror
                    </div>

                    <div class="sm:col-span-3">
                        <label for="wp_admin_email" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            <i class="fas fa-envelope"></i> WP Admin E-posta
                        </label>
                        <input type="email" name="wp_admin_email" id="wp_admin_email" value="{{ old('wp_admin_email') }}"
                            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="admin@example.com">
                        @error('wp_admin_email')
                        <p class="mt-2 text-sm text-red-600 dark:text-red-400 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                        </p>
                        @enderror
                    </div>
                </div>
            </div>

            <div class="flex items-center justify-end gap-x-6 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/50 px-4 py-4 sm:px-8">
                <a href="{{ route('sites.index') }}" class="inline-flex items-center gap-2 px-4 py-2.5 text-sm font-semibold text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm 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 duration-200">
                    <i class="fas fa-times"></i>
                    İptal
                </a>
                <button type="submit" class="inline-flex items-center gap-2 rounded-lg bg-blue-600 hover:bg-blue-500 dark:bg-blue-600 dark:hover:bg-blue-500 px-5 py-2.5 text-sm font-semibold text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-offset-2 transition-all duration-200">
                    <i class="fas fa-save"></i>
                    Kaydet
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
// Mevcut siteden veritabanı bilgilerini kopyala
document.getElementById('copy_db_from_site')?.addEventListener('change', function() {
    const selectedOption = this.options[this.selectedIndex];
    if (selectedOption.value) {
        const dbName = selectedOption.getAttribute('data-db-name');
        const dbUser = selectedOption.getAttribute('data-db-user');
        const dbPassword = selectedOption.getAttribute('data-db-password');
        
        if (dbName) {
            document.getElementById('db_name').value = dbName;
        }
        if (dbUser) {
            document.getElementById('db_user').value = dbUser;
        }
        if (dbPassword) {
            document.getElementById('db_password').value = dbPassword;
        }
    }
});
document.addEventListener('DOMContentLoaded', () => {
    const sectorSelect = document.getElementById('sector');
    const customSectorInput = document.getElementById('custom_sector');

    if (!sectorSelect || !customSectorInput) {
        return;
    }

    const toggleCustomSector = () => {
        if (sectorSelect.value === '__custom') {
            customSectorInput.classList.remove('hidden');
            customSectorInput.required = true;
            customSectorInput.focus();
        } else {
            customSectorInput.classList.add('hidden');
            customSectorInput.required = false;
            if (customSectorInput.value && sectorSelect.value !== '__custom') {
                customSectorInput.value = '';
            }
        }
    };

    sectorSelect.addEventListener('change', toggleCustomSector);
    toggleCustomSector();

    // SSH Host seçildiğinde bilgileri otomatik doldur
    const sshHostSelect = document.getElementById('ssh_host');
    const sshUserInput = document.getElementById('ssh_user');
    const sshPortInput = document.getElementById('ssh_port');
    const sshPathInput = document.getElementById('ssh_path');
    const sshPasswordInput = document.getElementById('ssh_password');

    if (sshHostSelect && sshUserInput && sshPortInput && sshPathInput && sshPasswordInput) {
        sshHostSelect.addEventListener('change', function() {
            const selectedOption = this.options[this.selectedIndex];
            
            if (selectedOption && selectedOption.value) {
                // Seçilen SSH host'un bilgilerini al
                const user = selectedOption.getAttribute('data-user') || '';
                const port = selectedOption.getAttribute('data-port') || '22';
                const path = selectedOption.getAttribute('data-path') || '';
                const password = selectedOption.getAttribute('data-password') || '';

                // Input alanlarını doldur
                sshUserInput.value = user;
                sshPortInput.value = port;
                sshPathInput.value = path;
                sshPasswordInput.value = password;

                // Readonly alanları güncelle
                if (user) {
                    sshUserInput.classList.remove('bg-white', 'dark:bg-gray-700');
                    sshUserInput.classList.add('bg-gray-100', 'dark:bg-gray-600');
                } else {
                    sshUserInput.classList.remove('bg-gray-100', 'dark:bg-gray-600');
                    sshUserInput.classList.add('bg-white', 'dark:bg-gray-700');
                }

                if (port) {
                    sshPortInput.classList.remove('bg-white', 'dark:bg-gray-700');
                    sshPortInput.classList.add('bg-gray-100', 'dark:bg-gray-600');
                } else {
                    sshPortInput.classList.remove('bg-gray-100', 'dark:bg-gray-600');
                    sshPortInput.classList.add('bg-white', 'dark:bg-gray-700');
                }
            } else {
                // SSH host seçilmediyse alanları temizle
                sshUserInput.value = '';
                sshPortInput.value = '22';
                sshPathInput.value = '';
                sshPasswordInput.value = '';
                
                sshUserInput.classList.remove('bg-gray-100', 'dark:bg-gray-600');
                sshUserInput.classList.add('bg-white', 'dark:bg-gray-700');
                sshPortInput.classList.remove('bg-gray-100', 'dark:bg-gray-600');
                sshPortInput.classList.add('bg-white', 'dark:bg-gray-700');
            }
        });

        // Sayfa yüklendiğinde eğer eski değer varsa doldur
        if (sshHostSelect.value) {
            sshHostSelect.dispatchEvent(new Event('change'));
        }
    }

    // Mevcut siteden veritabanı bilgilerini kopyala
    const copyDbFromSiteSelect = document.getElementById('copy_db_from_site');
    const dbNameInput = document.getElementById('db_name');
    const dbUserInput = document.getElementById('db_user');
    const dbPasswordInput = document.getElementById('db_password');

    if (copyDbFromSiteSelect && dbNameInput && dbUserInput && dbPasswordInput) {
        copyDbFromSiteSelect.addEventListener('change', function() {
            const selectedOption = this.options[this.selectedIndex];
            if (selectedOption && selectedOption.value) {
                const dbName = selectedOption.getAttribute('data-db-name');
                const dbUser = selectedOption.getAttribute('data-db-user');
                const dbPassword = selectedOption.getAttribute('data-db-password');
                const dataSource = selectedOption.getAttribute('data-source');
                
                if (dbName) {
                    dbNameInput.value = dbName;
                }
                if (dbUser) {
                    dbUserInput.value = dbUser;
                }
                
                // Şifre kontrolü
                if (dbPassword) {
                    // Mevcut siteden kopyalanan şifre varsa kullan
                    dbPasswordInput.value = dbPassword;
                } else if (dataSource === 'cpanel_api') {
                    // cPanel API'den seçildiyse, localStorage'dan şifreyi kontrol et
                    // (Eğer kullanıcı oluşturma modal'ından şifre kaydedilmişse)
                    // Önce prefix'li kullanıcı adını kontrol et, sonra prefix'siz
                    let savedPassword = null;
                    
                    // Prefix'li kullanıcı adı ile kontrol et
                    const prefixedUserKey = `db_user_password_${dbUser}`;
                    savedPassword = localStorage.getItem(prefixedUserKey);
                    
                    // Prefix'siz kullanıcı adı ile de kontrol et
                    if (!savedPassword) {
                        // Kullanıcı adından prefix'i kaldır ve kontrol et
                        const parts = dbUser.split('_');
                        if (parts.length > 1) {
                            const withoutPrefix = parts.slice(1).join('_');
                            const userKey = `db_user_password_${withoutPrefix}`;
                            savedPassword = localStorage.getItem(userKey);
                        }
                    }
                    
                    // Tüm localStorage key'lerini kontrol et (kullanıcı adı içeren)
                    if (!savedPassword) {
                        for (let i = 0; i < localStorage.length; i++) {
                            const key = localStorage.key(i);
                            if (key && key.startsWith('db_user_password_')) {
                                const storedUser = key.replace('db_user_password_', '');
                                // Kullanıcı adı eşleşiyorsa (prefix'li veya prefix'siz)
                                if (storedUser === dbUser || storedUser.endsWith('_' + dbUser) || dbUser.endsWith('_' + storedUser)) {
                                    savedPassword = localStorage.getItem(key);
                                    if (savedPassword) {
                                        // Şifreyi kullandıktan sonra temizle
                                        localStorage.removeItem(key);
                                        break;
                                    }
                                }
                            }
                        }
                    }
                    
                    if (savedPassword) {
                        dbPasswordInput.value = savedPassword;
                    } else {
                        // Şifre yoksa, kullanıcıdan manuel girmesini iste
                        dbPasswordInput.value = '';
                        dbPasswordInput.placeholder = 'Bu kullanıcı için şifre girin (veritabanı sayfasından kullanıcı oluşturduysanız otomatik doldurulur)';
                    }
                } else {
                    dbPasswordInput.value = '';
                }
            } else {
                // Seçim temizlendiyse alanları temizle
                dbNameInput.value = '';
                dbUserInput.value = '';
                dbPasswordInput.value = '';
            }
        });
    }
    
    // Sayfa yüklendiğinde localStorage'dan şifreleri kontrol et
    // (Eğer kullanıcı veritabanı sayfasından geliyorsa)
    window.addEventListener('storage', function(e) {
        if (e.key && e.key.startsWith('db_user_password_')) {
            const dbUser = e.key.replace('db_user_password_', '');
            if (dbUserInput && dbUserInput.value === dbUser) {
                dbPasswordInput.value = e.newValue;
                localStorage.removeItem(e.key);
            }
        }
    });
    
    // Sayfa yüklendiğinde mevcut localStorage şifrelerini kontrol et
    if (dbUserInput && dbPasswordInput && dbUserInput.value) {
        const userKey = `db_user_password_${dbUserInput.value}`;
        const savedPassword = localStorage.getItem(userKey);
        if (savedPassword) {
            dbPasswordInput.value = savedPassword;
            localStorage.removeItem(userKey);
        }
    }
});
</script>
@endpush