@extends('layouts.app')

@section('title', 'Toplu Site Oluştur')

@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">Toplu Site Oluştur</h1>

        <form action="{{ route('sites.bulk.store') }}" method="POST" id="bulk-create-form">
            @csrf

            <div 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">
                <div class="px-4 py-6 sm:p-8">
                    <div class="mb-6">
                        <button type="button" onclick="addSiteRow()" 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-plus"></i>
                            Yeni Site Ekle
                        </button>
                    </div>

                    <div id="sites-container" class="space-y-3">
                        <!-- Site satırları buraya eklenecek -->
                    </div>

                    <div class="mt-6 flex justify-end gap-3">
                        <a href="{{ route('sites.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="button" id="submit-btn" disabled onclick="handleFormSubmit()" class="inline-flex items-center gap-2 rounded-md bg-gray-400 dark:bg-gray-600 px-4 py-2 text-sm font-semibold text-white shadow-sm cursor-not-allowed transition">
                            <i class="fas fa-save"></i>
                            Siteleri Oluştur
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
// Kullanıcı bilgilerini JavaScript'e aktar
const currentUser = {
    id: {{ auth()->user()->id }},
    role: '{{ auth()->user()->role }}'
};

let siteIndex = 0;

function addSiteRow() {
    const container = document.getElementById('sites-container');
    const index = siteIndex++;
    
    const row = document.createElement('div');
    row.className = 'bg-gray-50 dark:bg-gray-700/50 rounded-lg border border-gray-200 dark:border-gray-600 overflow-hidden';
    row.setAttribute('data-site-index', index);
    
    row.innerHTML = `
        <div class="accordion-header cursor-pointer flex justify-between items-center p-3 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors" onclick="toggleSiteAccordion(${index})">
            <div class="flex items-center gap-3">
                <i class="fas fa-chevron-down accordion-icon text-xs text-gray-500 dark:text-gray-400 transition-transform" id="accordion-icon-${index}"></i>
                <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">
                    <span id="site-title-${index}">Site #${index + 1}</span>
                    <span class="ml-2 text-xs text-gray-500 dark:text-gray-400" id="site-preview-${index}"></span>
                </h3>
            </div>
            <button type="button" onclick="event.stopPropagation(); removeSiteRow(this)" class="text-red-600 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300 p-1">
                <i class="fas fa-trash text-sm"></i>
            </button>
        </div>
        
        <div class="accordion-content hidden p-3 pt-0" id="accordion-content-${index}">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
            <div>
                <label class="block text-xs font-semibold text-gray-900 dark:text-gray-100 mb-1">
                    Site Adı <span class="text-red-500">*</span>
                </label>
                <input type="text" name="sites[${index}][name]" id="site_name_${index}" required
                    class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2 text-sm 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 transition-all duration-200"
                    placeholder="Site adını girin"
                    onchange="updateSitePreview(${index})">
            </div>
            
            <div>
                <label class="block text-xs font-semibold text-gray-900 dark:text-gray-100 mb-1">
                    URL <span class="text-red-500">*</span>
                </label>
                <input type="url" name="sites[${index}][url]" id="site_url_${index}" required
                    class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2 text-sm 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 transition-all duration-200"
                    placeholder="https://example.com"
                    onchange="updateSitePreview(${index})">
            </div>
            
            <div>
                <label class="block text-xs font-semibold text-gray-900 dark:text-gray-100 mb-1">
                    Dil <span class="text-red-500">*</span>
                </label>
                <select name="sites[${index}][language]" required
                    class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2 text-sm 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 transition-all duration-200">
                    <option value="tr">Türkçe</option>
                    <option value="en">İngilizce</option>
                    <option value="de">Almanca</option>
                    <option value="fr">Fransızca</option>
                    <option value="es">İspanyolca</option>
                    <option value="it">İtalyanca</option>
                    <option value="ru">Rusça</option>
                    <option value="ar">Arapça</option>
                    <option value="zh">Çince</option>
                    <option value="ja">Japonca</option>
                </select>
            </div>
            
            <div>
                <label class="block text-xs font-semibold text-gray-900 dark:text-gray-100 mb-1">
                    Sektör <span class="text-red-500">*</span>
                </label>
                <select name="sites[${index}][sector]" required
                    class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2 text-sm 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 transition-all duration-200">
                    <option value="">Sektör Seçiniz</option>
                </select>
            </div>
            
            <div>
                <label class="block text-xs font-semibold text-gray-900 dark:text-gray-100 mb-1">
                    Blueprint <span class="text-red-500">*</span>
                </label>
                <select name="sites[${index}][blueprint_id]" required
                    class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2 text-sm 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 transition-all duration-200">
                    <option value="">Blueprint Seçiniz</option>
                </select>
            </div>
            
            <div>
                <label class="block text-xs font-semibold text-gray-900 dark:text-gray-100 mb-1">
                    Geliştirici <span class="text-red-500">*</span>
                </label>
                <select name="sites[${index}][assigned_to]" required
                    ${currentUser.role === 'developer' ? 'disabled' : ''}
                    class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 ${currentUser.role === 'developer' ? 'bg-gray-100 dark:bg-gray-600 cursor-not-allowed' : 'bg-white dark:bg-gray-700 cursor-pointer'} px-3 py-2 text-sm 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 transition-all duration-200">
                    <option value="">Geliştirici Seçiniz</option>
                </select>
                ${currentUser.role === 'developer' ? `<input type="hidden" name="sites[${index}][assigned_to]" value="${currentUser.id}">` : ''}
            </div>
            
            <div>
                <label class="block text-xs font-semibold text-gray-900 dark:text-gray-100 mb-1">
                    Durum <span class="text-red-500">*</span>
                </label>
                <select name="sites[${index}][status]" required
                    class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2 text-sm 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 transition-all duration-200">
                    <option value="active">Aktif</option>
                    <option value="inactive">Pasif</option>
                    <option value="maintenance">Bakımda</option>
                </select>
            </div>
            
            <div class="md:col-span-2 border-t border-gray-200 dark:border-gray-700 pt-2 mt-1">
                <h4 class="text-xs font-semibold text-gray-900 dark:text-gray-100 mb-2">
                    <i class="fas fa-terminal"></i> SSH Bağlantı Bilgileri
                </h4>
            </div>
            
            <div>
                <label class="block text-xs font-semibold text-gray-900 dark:text-gray-100 mb-1">
                    <i class="fas fa-key"></i> SSH Key <span class="text-red-500">*</span>
                </label>
                <select name="sites[${index}][ssh_key_id]" id="ssh_key_id_${index}" required
                    class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2 text-sm 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 transition-all duration-200"
                    onchange="updateSshHostsFromKey(${index})">
                    <option value="">SSH Key Seçiniz</option>
                </select>
            </div>
            
            <div>
                <label class="block text-xs font-semibold text-gray-900 dark:text-gray-100 mb-1">
                    <i class="fas fa-network-wired"></i> SSH Host <span class="text-red-500">*</span>
                </label>
                <select name="sites[${index}][ssh_host]" id="ssh_host_${index}" required
                    class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2 text-sm 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 transition-all duration-200"
                    onchange="updateSshFieldsFromHost(${index})">
                    <option value="">SSH Host Seçiniz</option>
                </select>
            </div>
            
            <div>
                <label class="block text-xs font-semibold text-gray-900 dark:text-gray-100 mb-1">
                    <i class="fas fa-user-shield"></i> SSH Kullanıcı
                </label>
                <input type="text" name="sites[${index}][ssh_user]" id="ssh_user_${index}" readonly
                    class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-600 px-3 py-2 text-sm text-gray-900 dark:text-gray-100 shadow-sm transition-all duration-200 cursor-not-allowed"
                    placeholder="SSH host seçin">
            </div>
            
            <div>
                <label class="block text-xs font-semibold text-gray-900 dark:text-gray-100 mb-1">
                    <i class="fas fa-door-open"></i> SSH Port
                </label>
                <input type="number" name="sites[${index}][ssh_port]" id="ssh_port_${index}" value="22" readonly
                    class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-600 px-3 py-2 text-sm text-gray-900 dark:text-gray-100 shadow-sm transition-all duration-200 cursor-not-allowed"
                    min="1" max="65535">
            </div>
            
            <div>
                <label class="block text-xs font-semibold text-gray-900 dark:text-gray-100 mb-1">
                    <i class="fas fa-folder-open"></i> Sunucu Dizini
                </label>
                <input type="text" name="sites[${index}][ssh_path]" id="ssh_path_${index}"
                    class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2 text-sm 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 transition-all duration-200"
                    placeholder="/home/username/public_html/yeni-site">
            </div>
            
            <input type="hidden" name="sites[${index}][ssh_password]" id="ssh_password_${index}">
            
            <div class="md:col-span-2 border-t border-gray-200 dark:border-gray-700 pt-2 mt-1">
                <h4 class="text-xs font-semibold text-gray-900 dark:text-gray-100 mb-2">
                    <i class="fas fa-database"></i> Veritabanı Bilgileri
                </h4>
            </div>
            
            <div class="md:col-span-2">
                <label class="block text-xs font-semibold text-gray-900 dark:text-gray-100 mb-1">
                    <i class="fas fa-copy"></i> Mevcut Veritabanından Kopyala (Opsiyonel)
                </label>
                <div class="relative">
                    <select name="sites[${index}][copy_db_from]" id="copy_db_from_${index}" 
                        class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2 pr-8 text-sm 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 transition-all duration-200">
                        <option value="">Yeni veritabanı bilgileri girin</option>
                    </select>
                    <div id="db-selected-indicator-${index}" class="absolute right-3 top-1/2 -translate-y-1/2 hidden">
                        <i class="fas fa-check-circle text-green-500 dark:text-green-400"></i>
                    </div>
                </div>
                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                    <i class="fas fa-info-circle mr-1"></i>
                    SSH host seçtikten sonra o host'a ait veritabanları görünecektir.
                </p>
            </div>
            
            <div>
                <label class="block text-xs font-semibold text-gray-900 dark:text-gray-100 mb-1">
                    Veritabanı Adı <span class="text-red-500">*</span>
                </label>
                <input type="text" name="sites[${index}][db_name]" id="db_name_${index}" required
                    class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2 text-sm 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 transition-all duration-200"
                    placeholder="db_name">
            </div>
            
            <div>
                <label class="block text-xs font-semibold text-gray-900 dark:text-gray-100 mb-1">
                    Veritabanı Kullanıcı <span class="text-red-500">*</span>
                </label>
                <input type="text" name="sites[${index}][db_user]" id="db_user_${index}" required
                    class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2 text-sm 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 transition-all duration-200"
                    placeholder="db_user">
            </div>
            
            <div>
                <label class="block text-xs font-semibold text-gray-900 dark:text-gray-100 mb-1">
                    Veritabanı Şifre <span class="text-red-500">*</span>
                </label>
                <input type="password" name="sites[${index}][db_password]" id="db_password_${index}" required
                    class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2 text-sm 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 transition-all duration-200"
                    placeholder="Şifre">
            </div>
            
            <div class="md:col-span-2 border-t border-gray-200 dark:border-gray-700 pt-2 mt-1">
                <h4 class="text-xs font-semibold text-gray-900 dark:text-gray-100 mb-2">
                    <i class="fas fa-user-cog"></i> WordPress Admin Bilgileri
                </h4>
            </div>
            
            <div>
                <label class="block text-xs font-semibold text-gray-900 dark:text-gray-100 mb-1">
                    <i class="fas fa-user"></i> WP Admin Kullanıcı Adı <span class="text-red-500">*</span>
                </label>
                <input type="text" name="sites[${index}][wp_admin_login]" id="wp_admin_login_${index}" required
                    class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2 text-sm 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 transition-all duration-200"
                    placeholder="admin"
                    value="admin">
            </div>
            
            <div>
                <label class="block text-xs font-semibold text-gray-900 dark:text-gray-100 mb-1">
                    <i class="fas fa-lock"></i> WP Admin Şifre <span class="text-red-500">*</span>
                </label>
                <input type="password" name="sites[${index}][wp_admin_password]" id="wp_admin_password_${index}" required
                    class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2 text-sm 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 transition-all duration-200"
                    placeholder="Güvenli bir şifre girin">
            </div>
            
            <div>
                <label class="block text-xs font-semibold text-gray-900 dark:text-gray-100 mb-1">
                    <i class="fas fa-envelope"></i> WP Admin Email <span class="text-red-500">*</span>
                </label>
                <input type="email" name="sites[${index}][wp_admin_email]" id="wp_admin_email_${index}" required
                    class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2 text-sm 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 transition-all duration-200"
                    placeholder="admin@example.com">
            </div>
        </div>
        </div>
    `;
    
    container.appendChild(row);
    
    // Blueprint dropdown'ını doldur
    const blueprintSelect = document.querySelector(`[name="sites[${index}][blueprint_id]"]`);
    console.log('Blueprint Select:', blueprintSelect);
    console.log('Blueprints Data:', blueprintsData);
    console.log('Blueprints Data Length:', blueprintsData ? blueprintsData.length : 0);
    if (blueprintSelect && blueprintsData && blueprintsData.length > 0) {
        blueprintsData.forEach(blueprint => {
            const option = document.createElement('option');
            option.value = blueprint.id;
            option.textContent = blueprint.name;
            blueprintSelect.appendChild(option);
        });
    } else {
        console.warn('Blueprint dropdown doldurulamadı:', {
            blueprintSelect: !!blueprintSelect,
            blueprintsData: !!blueprintsData,
            blueprintsDataLength: blueprintsData ? blueprintsData.length : 0
        });
    }
    
    // Developer dropdown'ını doldur
    const developerSelect = document.querySelector(`[name="sites[${index}][assigned_to]"]`);
    if (developerSelect && developersData && developersData.length > 0) {
        developersData.forEach(developer => {
            const option = document.createElement('option');
            option.value = developer.id;
            option.textContent = developer.name;
            if (currentUser.role === 'developer' && currentUser.id == developer.id) {
                option.selected = true;
            }
            developerSelect.appendChild(option);
        });
    }
    
    // Sektör dropdown'ını doldur
    const sectorSelect = document.querySelector(`[name="sites[${index}][sector]"]`);
    if (sectorSelect && sectorsData && sectorsData.length > 0) {
        sectorsData.forEach(sector => {
            const option = document.createElement('option');
            option.value = sector;
            option.textContent = sector.charAt(0).toUpperCase() + sector.slice(1);
            sectorSelect.appendChild(option);
        });
    }
    
    // SSH Key dropdown'ını doldur
    const sshKeySelect = document.getElementById(`ssh_key_id_${index}`);
    if (sshKeySelect && sshKeysData && sshKeysData.length > 0) {
        sshKeysData.forEach(sshKey => {
            const option = document.createElement('option');
            option.value = sshKey.id;
            option.textContent = sshKey.name;
            sshKeySelect.appendChild(option);
        });
    }
    
    // Developer hesabından giriş yapıldıysa assigned_to alanını otomatik ayarla
    if (currentUser.role === 'developer') {
        const assignedToSelect = document.querySelector(`[name="sites[${index}][assigned_to]"]`);
        if (assignedToSelect) {
            assignedToSelect.value = currentUser.id;
        }
    }
    
    // SSH host değişikliğini dinle
    setupSshHostHandler(index);
    // Veritabanı seçimini dinle
    setupDatabaseSelectHandler(index);
    
    // Zorunlu alan değişikliklerini dinle
    setupRequiredFieldsHandler(index);
    
    // Validasyonu kontrol et
    checkFormValidity();
}

function setupSshHostHandler(index) {
    // Bu fonksiyon artık updateSshFieldsFromHost tarafından yapılıyor
    // Sadece veritabanı listesini güncellemek için kullanılıyor
    const sshHostSelect = document.getElementById('ssh_host_' + index);
    const dbSelect = document.getElementById('copy_db_from_' + index);
    
    if (sshHostSelect) {
        sshHostSelect.addEventListener('change', function() {
            const selectedOption = this.options[this.selectedIndex];
            
            if (selectedOption && selectedOption.value) {
                // Veritabanı listesini güncelle
                updateDatabaseSelect(index, selectedOption.value);
            } else {
                // SSH host seçilmediyse veritabanı listesini temizle
                if (dbSelect) {
                    dbSelect.innerHTML = '<option value="">Yeni veritabanı bilgileri girin</option>';
                }
            }
        });
    }
}

function setupDatabaseSelectHandler(index) {
    const dbSelect = document.getElementById('copy_db_from_' + index);
    const dbNameInput = document.getElementById('db_name_' + index);
    const dbUserInput = document.getElementById('db_user_' + index);
    const dbPasswordInput = document.getElementById('db_password_' + index);
    const dbIndicator = document.getElementById('db-selected-indicator-' + index);
    
    if (dbSelect && dbNameInput && dbUserInput && dbPasswordInput) {
        dbSelect.addEventListener('change', function() {
            const selectedOption = this.options[this.selectedIndex];
            
            // Seçim göstergesini güncelle
            if (dbIndicator) {
                if (selectedOption && selectedOption.value) {
                    dbIndicator.classList.remove('hidden');
                    dbIndicator.classList.add('block');
                    // Dropdown'a yeşil border ekle
                    dbSelect.classList.add('border-green-500', 'dark:border-green-400');
                    dbSelect.classList.remove('border-gray-300', 'dark:border-gray-600');
                } else {
                    dbIndicator.classList.add('hidden');
                    dbIndicator.classList.remove('block');
                    // Dropdown'ı normal haline döndür
                    dbSelect.classList.remove('border-green-500', 'dark:border-green-400');
                    dbSelect.classList.add('border-gray-300', 'dark:border-gray-600');
                }
            }
            
            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');
                
                if (dbName) dbNameInput.value = dbName;
                if (dbUser) dbUserInput.value = dbUser;
                if (dbPassword) dbPasswordInput.value = dbPassword;
                
                // Veritabanı alanlarına da görsel geri bildirim ekle
                if (dbNameInput.value) {
                    dbNameInput.classList.add('border-green-500', 'dark:border-green-400', 'bg-green-50', 'dark:bg-green-900/20');
                }
                if (dbUserInput.value) {
                    dbUserInput.classList.add('border-green-500', 'dark:border-green-400', 'bg-green-50', 'dark:bg-green-900/20');
                }
                if (dbPasswordInput.value) {
                    dbPasswordInput.classList.add('border-green-500', 'dark:border-green-400', 'bg-green-50', 'dark:bg-green-900/20');
                }
            } else {
                // Seçim kaldırıldığında görsel geri bildirimi temizle
                dbNameInput.classList.remove('border-green-500', 'dark:border-green-400', 'bg-green-50', 'dark:bg-green-900/20');
                dbUserInput.classList.remove('border-green-500', 'dark:border-green-400', 'bg-green-50', 'dark:bg-green-900/20');
                dbPasswordInput.classList.remove('border-green-500', 'dark:border-green-400', 'bg-green-50', 'dark:bg-green-900/20');
            }
        });
    }
}

// Veritabanı verilerini JavaScript'e aktar
const existingSitesData = @json($existingSites ?? []);
const availableDatabasesData = @json($availableDatabases ?? []);
@php
    $blueprintsArray = [];
    if (isset($blueprintsForJs) && is_array($blueprintsForJs)) {
        $blueprintsArray = $blueprintsForJs;
    } elseif (isset($blueprints) && $blueprints->count() > 0) {
        foreach ($blueprints as $blueprint) {
            $blueprintsArray[] = [
                'id' => $blueprint->id,
                'name' => $blueprint->name
            ];
        }
    }
@endphp
const blueprintsData = @json($blueprintsArray);
const developersData = @json($developers ?? []);
const sectorsData = @json($sectors ?? []);
const sshKeysData = @json($sshKeys ?? []);

// Debug: Blueprint'lerin JavaScript'e aktarıldığını kontrol et
console.log('Blueprints Data (from server):', blueprintsData);
console.log('Blueprints Count:', blueprintsData ? blueprintsData.length : 0);

function updateDatabaseSelect(index, sshHost) {
    const dbSelect = document.getElementById('copy_db_from_' + index);
    if (!dbSelect || !sshHost) return;
    
    // Mevcut seçenekleri temizle (ilk seçeneği koru)
    dbSelect.innerHTML = '<option value="">Yeni veritabanı bilgileri girin</option>';
    
    // Mevcut sitelerden veritabanları
    if (existingSitesData[sshHost]) {
        const optgroup1 = document.createElement('optgroup');
        optgroup1.label = 'Mevcut Siteler - SSH Host: ' + sshHost;
        
        existingSitesData[sshHost].forEach(function(site) {
            const option1 = document.createElement('option');
            option1.value = 'site_' + site.id;
            option1.setAttribute('data-db-name', site.db_name);
            option1.setAttribute('data-db-user', site.db_user);
            option1.setAttribute('data-db-password', site.db_password);
            option1.textContent = site.name + ' - ' + site.db_name + ' / ' + site.db_user;
            optgroup1.appendChild(option1);
        });
        
        dbSelect.appendChild(optgroup1);
    }
    
    // cPanel API'den çekilen veritabanları
    if (availableDatabasesData[sshHost]) {
        const optgroup2 = document.createElement('optgroup');
        optgroup2.label = 'cPanel API - SSH Host: ' + sshHost;
        
        availableDatabasesData[sshHost].forEach(function(db) {
            const option2 = document.createElement('option');
            option2.value = 'api_' + db.db_name + '_' + db.db_user + '_' + db.db_host;
            option2.setAttribute('data-db-name', db.db_name);
            option2.setAttribute('data-db-user', db.db_user);
            option2.setAttribute('data-db-password', db.db_password || ''); // Veritabanı kullanıcısına özel şifre
            option2.setAttribute('data-source', 'cpanel_api');
            option2.textContent = db.site_name + ' - ' + db.db_name + ' / ' + db.db_user + '@' + db.db_host;
            optgroup2.appendChild(option2);
        });
        
        dbSelect.appendChild(optgroup2);
    }
    
    // GENERAL_API veritabanları (tüm host'lar için)
    if (availableDatabasesData['GENERAL_API']) {
        const optgroup3 = document.createElement('optgroup');
        optgroup3.label = 'cPanel API - Genel API';
        
        availableDatabasesData['GENERAL_API'].forEach(function(db) {
            const option3 = document.createElement('option');
            option3.value = 'api_' + db.db_name + '_' + db.db_user + '_' + db.db_host;
            option3.setAttribute('data-db-name', db.db_name);
            option3.setAttribute('data-db-user', db.db_user);
            option3.setAttribute('data-db-password', db.db_password || ''); // Veritabanı kullanıcısına özel şifre
            option3.setAttribute('data-source', 'cpanel_api');
            option3.textContent = db.site_name + ' - ' + db.db_name + ' / ' + db.db_user + '@' + db.db_host;
            optgroup3.appendChild(option3);
        });
        
        dbSelect.appendChild(optgroup3);
    }
}

function toggleSiteAccordion(index) {
    const content = document.getElementById('accordion-content-' + index);
    const icon = document.getElementById('accordion-icon-' + index);
    
    if (content.classList.contains('hidden')) {
        content.classList.remove('hidden');
        icon.classList.add('rotate-180');
    } else {
        content.classList.add('hidden');
        icon.classList.remove('rotate-180');
    }
}

function updateSitePreview(index) {
    const nameInput = document.getElementById('site_name_' + index);
    const urlInput = document.getElementById('site_url_' + index);
    const preview = document.getElementById('site-preview-' + index);
    
    const name = nameInput ? nameInput.value : '';
    const url = urlInput ? urlInput.value : '';
    
    let previewText = '';
    if (name) previewText += name;
    if (url) previewText += (previewText ? ' • ' : '') + url;
    
    if (preview) {
        preview.textContent = previewText ? ' - ' + previewText : '';
    }
}

function removeSiteRow(button) {
    const row = button.closest('[data-site-index]');
    if (row && confirm('Bu siteyi silmek istediğinize emin misiniz?')) {
        row.remove();
        checkFormValidity();
    }
}

function setupRequiredFieldsHandler(index) {
    const requiredFields = [
        'site_name_' + index,
        'site_url_' + index,
        'sites[' + index + '][language]',
        'sites[' + index + '][sector]',
        'sites[' + index + '][blueprint_id]',
        'sites[' + index + '][assigned_to]',
        'sites[' + index + '][status]',
        'ssh_host_' + index,
        'db_name_' + index,
        'db_user_' + index,
        'db_password_' + index,
        'wp_admin_login_' + index,
        'wp_admin_password_' + index,
        'wp_admin_email_' + index
    ];
    
    requiredFields.forEach(fieldId => {
        const field = document.getElementById(fieldId) || document.querySelector('[name="' + fieldId + '"]');
        if (field) {
            field.addEventListener('input', () => checkFormValidity());
            field.addEventListener('change', () => checkFormValidity());
        }
    });
}

function checkFormValidity() {
    const container = document.getElementById('sites-container');
    if (!container) return;
    
    const siteRows = container.querySelectorAll('[data-site-index]');
    if (siteRows.length === 0) {
        updateSubmitButton(false, []);
        return;
    }
    
    let allValid = true;
    const missingFields = [];
    
    siteRows.forEach(row => {
        const index = row.getAttribute('data-site-index');
        const siteNumber = parseInt(index) + 1;
        const siteName = document.getElementById('site_name_' + index)?.value || `Site #${siteNumber}`;
        
        // Zorunlu alanları kontrol et
        const requiredFields = {
            name: { field: document.getElementById('site_name_' + index), label: 'Site Adı' },
            url: { field: document.getElementById('site_url_' + index), label: 'URL' },
            language: { field: document.querySelector('[name="sites[' + index + '][language]"]'), label: 'Dil' },
            sector: { field: document.querySelector('[name="sites[' + index + '][sector]"]'), label: 'Sektör' },
            blueprint: { field: document.querySelector('[name="sites[' + index + '][blueprint_id]"]'), label: 'Blueprint' },
            assigned_to: { field: document.querySelector('[name="sites[' + index + '][assigned_to]"]'), label: 'Atanan Geliştirici' },
            status: { field: document.querySelector('[name="sites[' + index + '][status]"]'), label: 'Durum' },
            ssh_key_id: { field: document.getElementById('ssh_key_id_' + index), label: 'SSH Key' },
            ssh_host: { field: document.getElementById('ssh_host_' + index), label: 'SSH Host' },
            db_name: { field: document.getElementById('db_name_' + index), label: 'Veritabanı Adı' },
            db_user: { field: document.getElementById('db_user_' + index), label: 'Veritabanı Kullanıcı' },
            db_password: { field: document.getElementById('db_password_' + index), label: 'Veritabanı Şifre' },
            wp_admin_login: { field: document.getElementById('wp_admin_login_' + index), label: 'WP Admin Kullanıcı Adı' },
            wp_admin_password: { field: document.getElementById('wp_admin_password_' + index), label: 'WP Admin Şifre' },
            wp_admin_email: { field: document.getElementById('wp_admin_email_' + index), label: 'WP Admin Email' }
        };
        
        // Her zorunlu alanı kontrol et
        for (const [key, fieldData] of Object.entries(requiredFields)) {
            const field = fieldData.field;
            if (!field || !field.value || field.value.trim() === '') {
                allValid = false;
                missingFields.push({
                    site: siteName,
                    field: fieldData.label
                });
            }
        }
    });
    
    updateSubmitButton(allValid, missingFields);
}

function updateSubmitButton(isValid, missingFields) {
    const submitBtn = document.getElementById('submit-btn');
    if (!submitBtn) return;
    
    if (isValid) {
        submitBtn.disabled = false;
        submitBtn.className = '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';
    } else {
        submitBtn.disabled = true;
        submitBtn.className = 'inline-flex items-center gap-2 rounded-md bg-gray-400 dark:bg-gray-600 px-4 py-2 text-sm font-semibold text-white shadow-sm cursor-not-allowed transition';
    }
}

// SSH Key'den SSH host'ları yükle
function updateSshHostsFromKey(index) {
    const sshKeyId = document.getElementById('ssh_key_id_' + index)?.value;
    const sshHostSelect = document.getElementById('ssh_host_' + index);
    
    if (!sshHostSelect) return;
    
    // SSH host select'i temizle
    sshHostSelect.innerHTML = '<option value="">SSH Host Seçiniz</option>';
    
    if (!sshKeyId) {
        // SSH bilgilerini temizle
        document.getElementById('ssh_user_' + index).value = '';
        document.getElementById('ssh_port_' + index).value = '22';
        document.getElementById('ssh_path_' + index).value = '';
        checkFormValidity();
        return;
    }
    
    // SSH Key bilgilerini al (backend'den gelen data)
    const sshHostInfos = @json($sshHostInfos ?? []);
    const keyHosts = sshHostInfos.filter(info => info.ssh_key_id == sshKeyId);
    
    keyHosts.forEach(hostInfo => {
        const option = document.createElement('option');
        option.value = hostInfo.host;
        option.textContent = hostInfo.host;
        option.setAttribute('data-user', hostInfo.user || '');
        option.setAttribute('data-port', hostInfo.port || '22');
        option.setAttribute('data-path', hostInfo.path || '');
        option.setAttribute('data-ssh-key-id', hostInfo.ssh_key_id);
        sshHostSelect.appendChild(option);
    });
    
    checkFormValidity();
}

// SSH Host seçildiğinde SSH bilgilerini doldur
function updateSshFieldsFromHost(index) {
    const sshHostSelect = document.getElementById('ssh_host_' + index);
    const selectedOption = sshHostSelect?.selectedOptions[0];
    
    if (!selectedOption || !selectedOption.value) {
        return;
    }
    
    const user = selectedOption.getAttribute('data-user') || '';
    const port = selectedOption.getAttribute('data-port') || '22';
    const path = selectedOption.getAttribute('data-path') || '';
    
    document.getElementById('ssh_user_' + index).value = user;
    document.getElementById('ssh_port_' + index).value = port;
    document.getElementById('ssh_path_' + index).value = path;
    
    checkFormValidity();
}

// Form submit edilmeden önce tüm accordion'ları aç
function openAllAccordions() {
    const container = document.getElementById('sites-container');
    if (!container) return;
    
    const siteRows = container.querySelectorAll('[data-site-index]');
    siteRows.forEach(row => {
        const index = row.getAttribute('data-site-index');
        const content = document.getElementById('accordion-content-' + index);
        const icon = document.getElementById('accordion-icon-' + index);
        
        if (content && icon) {
            content.classList.remove('hidden');
            icon.classList.add('rotate-180');
        }
    });
}

// Form submit işlemini yönet
function handleFormSubmit() {
    const form = document.getElementById('bulk-create-form');
    const submitBtn = document.getElementById('submit-btn');
    
    if (!form) {
        console.error('Form bulunamadı');
        alert('Form bulunamadı.');
        return;
    }
    
    // Buton disabled ise submit etme
    if (submitBtn && submitBtn.disabled) {
        alert('Lütfen tüm zorunlu alanları doldurun.');
        return;
    }
    
    console.log('Form submit başlatılıyor...');
    
    // Önce accordion'ları aç
    openAllAccordions();
    
    // Site sayısını kontrol et
    const container = document.getElementById('sites-container');
    if (!container) {
        alert('Lütfen en az bir site ekleyin.');
        return;
    }
    
    const siteRows = container.querySelectorAll('[data-site-index]');
    if (siteRows.length === 0) {
        alert('Lütfen en az bir site ekleyin.');
        return;
    }
    
    console.log('Site sayısı:', siteRows.length);
    
    // Accordion'ların açılması için kısa bir gecikme, sonra validasyon ve submit
    setTimeout(() => {
        // HTML5 validasyonunu kontrol et
        if (!form.checkValidity()) {
            console.log('Form validasyonu başarısız');
            const firstInvalid = form.querySelector(':invalid');
            if (firstInvalid) {
                console.log('Geçersiz alan:', firstInvalid.name, firstInvalid.id);
                firstInvalid.focus();
                firstInvalid.scrollIntoView({ behavior: 'smooth', block: 'center' });
            }
            alert('Lütfen tüm zorunlu alanları doldurun.');
            return;
        }
        
        console.log('Form validasyonu başarılı, submit ediliyor...');
        
        // Butonu disabled yap (çift submit'i önlemek için)
        if (submitBtn) {
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Gönderiliyor...';
        }
        
        // CSRF token'ı kontrol et
        const csrfInput = form.querySelector('input[name="_token"]');
        if (!csrfInput) {
            console.error('CSRF token bulunamadı');
            alert('Güvenlik hatası. Sayfayı yenileyin.');
            if (submitBtn) {
                submitBtn.disabled = false;
                submitBtn.innerHTML = '<i class="fas fa-save"></i> Siteleri Oluştur';
            }
            return;
        }
        
        // Formu normal şekilde submit et (Laravel redirect'i otomatik işleyecek)
        console.log('Form submit ediliyor (native)...');
        console.log('Form action:', form.action);
        console.log('Form method:', form.method);
        
        // Tüm input değerlerini kontrol et
        const allInputs = form.querySelectorAll('input[required], select[required], textarea[required]');
        console.log('Zorunlu alan sayısı:', allInputs.length);
        allInputs.forEach(input => {
            if (!input.value || input.value.trim() === '') {
                console.warn('Boş zorunlu alan:', input.name, input.id);
            }
        });
        
        // Formu doğrudan submit et
        // form.submit() çağrıldığında sayfa yenilenecek ve Laravel redirect'i çalışacak
        form.submit();
    }, 500); // Accordion'ların açılması için biraz daha fazla süre ver
}

// İlk site satırını ekle ve açık başlat
document.addEventListener('DOMContentLoaded', function() {
    addSiteRow();
    // İlk siteyi otomatik aç
    setTimeout(() => {
        const firstContent = document.getElementById('accordion-content-0');
        const firstIcon = document.getElementById('accordion-icon-0');
        if (firstContent && firstIcon) {
            firstContent.classList.remove('hidden');
            firstIcon.classList.add('rotate-180');
        }
        // İlk yüklemede validasyonu kontrol et
        checkFormValidity();
    }, 100);
});
</script>

<style>
.accordion-icon {
    transition: transform 0.2s ease-in-out;
}

</style>
@endsection