@extends('layouts.app')

@section('title', 'Yeni Ürün Ekle')

@section('content')
<div class="px-4 sm:px-6 lg:px-8">
    <div class="w-full">
        <h1 class="text-3xl font-semibold text-gray-900 dark:text-gray-100 mb-6">
            @if($selectedSite)
                {{ $selectedSite->name }} İçin Yeni Ürün Ekle
            @else
                Yeni Ürün Ekle
            @endif
        </h1>

        @if($selectedSite)
        <div class="mb-4 bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
            <p class="text-sm text-blue-800 dark:text-blue-300">
                <i class="fas fa-info-circle"></i> Site detay sayfasından geldiniz. Site seçimi aşağıda önceden seçilmiş durumda.
                <a href="{{ route('sites.show', $selectedSite) }}" class="underline ml-1">Site detayına dön</a>
            </p>
        </div>
        @endif

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

            <div class="px-4 py-6 sm:p-8">
                <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                    <!-- Ürün Adı -->
                    <div class="sm:col-span-2">
                        <label for="name" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            Ürün 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="Ürün 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>

                    <!-- SKU -->
                    <div>
                        <label for="sku" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            SKU
                        </label>
                        <input type="text" name="sku" id="sku" value="{{ old('sku') }}" 
                            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="Stok kodu">
                        @error('sku')
                        <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>

                    <!-- Kategoriler -->
                    <div>
                        <label for="categories" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            Kategoriler
                        </label>
                        <input type="text" name="categories" id="categories" value="{{ old('categories') }}" 
                            class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-4 py-2.5 text-gray-900 dark:text-gray-100 shadow-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200" 
                            placeholder="Örn: Protein, Kas Gelişimi">
                        <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">Kategorileri virgülle ayırın</p>
                        @error('categories')
                        <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>

                    <!-- Ürün Linki -->
                    <div>
                        <label for="product_link" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            <i class="fas fa-link"></i> Ürün Linki
                        </label>
                        <input type="url" name="product_link" id="product_link" value="{{ old('product_link') }}" 
                            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/urun">
                        <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">Ürüne ait harici link (opsiyonel)</p>
                        @error('product_link')
                        <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>

                    <!-- Site Seçimi -->
                    <div class="sm:col-span-2">
                        <label for="site_id" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            Site Seçimi <span class="text-gray-500 font-normal">(Opsiyonel)</span>
                        </label>
                        <select name="site_id" id="site_id" 
                            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="">Master Ürün (Site'ye bağlı değil)</option>
                            @foreach($sites as $site)
                            <option value="{{ $site->id }}" {{ old('site_id', $selectedSite?->id) == $site->id ? 'selected' : '' }}>
                                {{ $site->name }}
                            </option>
                            @endforeach
                        </select>
                        <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">Site seçilmezse ürün master ürün olarak oluşturulur.</p>
                        @error('site_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>

                    <!-- Normal Fiyat -->
                    <div>
                        <label for="regular_price" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            Normal Fiyat
                        </label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                                <span class="text-gray-500 dark:text-gray-400 sm:text-sm" id="regular_price_symbol">₺</span>
                            </div>
                            <input type="number" step="0.01" name="regular_price" id="regular_price" value="{{ old('regular_price') }}" 
                                class="block w-full rounded-lg border border-gray-300 bg-white pl-8 pr-4 py-2.5 text-gray-900 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="0.00">
                        </div>
                        @error('regular_price')
                        <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>

                    <!-- İndirimli Fiyat -->
                    <div>
                        <label for="sale_price" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            İndirimli Fiyat
                        </label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                                <span class="text-gray-500 dark:text-gray-400 sm:text-sm" id="sale_price_symbol">₺</span>
                            </div>
                            <input type="number" step="0.01" name="sale_price" id="sale_price" value="{{ old('sale_price') }}" 
                                class="block w-full rounded-lg border border-gray-300 bg-white pl-8 pr-4 py-2.5 text-gray-900 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="0.00">
                        </div>
                        @error('sale_price')
                        <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>

                    <!-- Maliyet Fiyatı -->
                    <div>
                        <label for="cost_price" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            Maliyet Fiyatı
                        </label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                                <span class="text-gray-500 dark:text-gray-400 sm:text-sm" id="cost_price_symbol">₺</span>
                            </div>
                            <input type="number" step="0.01" name="cost_price" id="cost_price" value="{{ old('cost_price') }}"
                                class="block w-full rounded-lg border border-gray-300 bg-white pl-8 pr-4 py-2.5 text-gray-900 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="0.00">
                        </div>
                        <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">Minimum marj kontrolü için ürünün net alış maliyetini girin.</p>
                        @error('cost_price')
                        <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>

                    <!-- Minimum Kâr Marjı -->
                    <div>
                        <label for="min_profit_margin_percent" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            Minimum Kâr Marjı (%)
                        </label>
                        <input type="number" step="0.01" min="0" max="99.99" name="min_profit_margin_percent" id="min_profit_margin_percent"
                            value="{{ old('min_profit_margin_percent', 15) }}"
                            class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-4 py-2.5 text-gray-900 dark:text-gray-100 shadow-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200"
                            placeholder="Örn: 15">
                        <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">Yeni fiyatlar bu oranı korumalıdır. Varsayılan değer %15.</p>
                        @error('min_profit_margin_percent')
                        <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>

                    <!-- Kısa Açıklama -->
                    <div class="sm:col-span-2">
                        <div class="flex items-center justify-between mb-2">
                            <label for="short_description" class="block text-sm font-semibold text-gray-900">
                                Kısa Açıklama
                            </label>
                            <button type="button" id="generate-ai-btn" 
                                class="inline-flex items-center gap-2 px-3 py-1.5 text-xs font-medium text-blue-700 bg-blue-50 border border-blue-200 rounded-lg hover:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-offset-2 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
                                disabled>
                                <i class="fas fa-magic"></i>
                                <span id="generate-ai-text">AI ile Üret</span>
                                <span id="generate-ai-loading" class="hidden">
                                    <i class="fas fa-spinner fa-spin"></i> Üretiliyor...
                                </span>
                            </button>
                        </div>
                        <textarea name="short_description" id="short_description" rows="3" 
                            class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-4 py-2.5 text-gray-900 dark:text-gray-100 shadow-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200 resize-none" 
                            placeholder="Ürünün kısa açıklamasını girin veya AI ile otomatik üretin">{{ old('short_description') }}</textarea>
                        @error('short_description')
                        <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>

                    <!-- Uzun Açıklama -->
                    <div class="sm:col-span-2">
                        <label for="description" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            Uzun Açıklama
                        </label>
                        <textarea name="description" id="description" rows="6" 
                            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 resize-none" 
                            placeholder="Ürünün detaylı açıklamasını girin veya AI ile otomatik üretin">{{ old('description') }}</textarea>
                        @error('description')
                        <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>

                    <!-- Ürün Görselleri -->
                    <div class="sm:col-span-2">
                        <label for="images" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            Ürün Görselleri
                        </label>
                        <div class="mt-2 flex justify-center rounded-lg border border-dashed border-gray-300 px-6 py-8 hover:border-blue-400 transition-colors duration-200" id="image-upload-area">
                            <div class="text-center">
                                <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-3"></i>
                                <div class="mt-4 flex text-sm leading-6 text-gray-600">
                                    <label for="images" class="relative cursor-pointer rounded-md bg-white font-semibold text-blue-600 focus-within:outline-none focus-within:ring-2 focus-within:ring-blue-600 focus-within:ring-offset-2 hover:text-blue-500">
                                        <span>Dosya seç</span>
                                        <input type="file" name="images[]" id="images" multiple accept="image/*" class="sr-only">
                                    </label>
                                    <p class="pl-1">veya sürükle bırak</p>
                                </div>
                                <p class="text-xs leading-5 text-gray-600 mt-2">PNG, JPG, GIF (Max. 10MB)</p>
                                <p class="text-xs text-gray-500 mt-1">Birden fazla görsel seçebilirsiniz</p>
                                <div id="selected-files" class="mt-4 hidden">
                                    <p class="text-sm font-semibold text-gray-700 mb-2">Seçilen görseller:</p>
                                    <div id="file-list" class="grid grid-cols-2 md:grid-cols-4 gap-3"></div>
                                </div>
                            </div>
                        </div>
                        @error('images.*')
                        <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-900/10 px-4 py-4 sm:px-8">
                <a href="{{ route('admin.products.index') }}" class="text-sm font-semibold leading-6 text-gray-900">İptal</a>
                <button type="submit" class="rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500">
                    Kaydet
                </button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
    // Para birimi sembolleri
    const currencySymbols = {
        'TRY': '₺',
        'USD': '$',
        'EUR': '€',
        'GBP': '£',
        'CHF': 'CHF',
        'JPY': '¥',
        'CAD': 'C$',
        'AUD': 'A$'
    };

    // Site para birimlerini al
    const sitesData = @json($sites->mapWithKeys(function($site) {
        return [$site->id => [
            'currency' => $site->currency ?? 'TRY',
            'name' => $site->name
        ]];
    }));

    // Seçili site'in para birimini güncelle
    function updateCurrencySymbols() {
        const siteId = document.getElementById('site_id')?.value;
        let currency = 'TRY'; // Varsayılan
        
        if (siteId && sitesData[siteId]) {
            currency = sitesData[siteId].currency;
        }
        
        const symbol = currencySymbols[currency] || currency;
        
        // Tüm para birimi sembollerini güncelle
        const regularSymbol = document.getElementById('regular_price_symbol');
        const saleSymbol = document.getElementById('sale_price_symbol');
        const costSymbol = document.getElementById('cost_price_symbol');
        
        if (regularSymbol) regularSymbol.textContent = symbol;
        if (saleSymbol) saleSymbol.textContent = symbol;
        if (costSymbol) costSymbol.textContent = symbol;
    }

document.addEventListener('DOMContentLoaded', function() {
    // Site seçimi değiştiğinde para birimini güncelle
    const siteSelect = document.getElementById('site_id');
    if (siteSelect) {
        // İlk yüklemede güncelle
        updateCurrencySymbols();
        
        // Site değiştiğinde güncelle
        siteSelect.addEventListener('change', function() {
            updateCurrencySymbols();
        });
    }

    const form = document.querySelector('form');
    
    // Form submit kontrolü - dosyaları kontrol et ama DataTransfer ile müdahale etme
    form.addEventListener('submit', function(e) {
        const imagesInput = document.getElementById('images');
        const files = imagesInput.files;
        
        console.log('Form submitting...', {
            'files_count': files.length,
            'selected_files_map_size': selectedFilesMap.size,
            'files': Array.from(files).map(f => ({
                name: f.name,
                size: f.size,
                type: f.type,
                lastModified: f.lastModified
            }))
        });
        
        // Eğer JavaScript'te dosyalar kaldırıldıysa ve form submit ediliyorsa
        // Form'u durdurup kullanıcıyı bilgilendir
        if (selectedFilesMap.size === 0 && files.length > 0) {
            // Bu durumda dosyalar hala input'ta, sadece önizleme kaldırılmış
            // Form normal submit edilebilir
        }
        
        if (files.length > 0) {
            console.log('✅ Files are being submitted');
        } else {
            console.log('⚠️ No files selected');
        }
    });
    const productNameInput = document.getElementById('name');
    const generateAiBtn = document.getElementById('generate-ai-btn');
    const generateAiText = document.getElementById('generate-ai-text');
    const generateAiLoading = document.getElementById('generate-ai-loading');
    const shortDescriptionTextarea = document.getElementById('short_description');
    const descriptionTextarea = document.getElementById('description');
    const imagesInput = document.getElementById('images');
    const selectedFilesDiv = document.getElementById('selected-files');
    const fileList = document.getElementById('file-list');

    // Seçili dosyaları saklamak için Map (unique ID ile)
    let selectedFilesMap = new Map();
    let fileIdCounter = 0;

    // Görsel seçildiğinde bilgi göster ve önizleme oluştur
    imagesInput.addEventListener('change', function(e) {
        const files = e.target.files;
        
        // Yeni seçilen dosyaları Map'e ekle
        Array.from(files).forEach(file => {
            if (file.type.startsWith('image/')) {
                // Aynı dosya zaten var mı kontrol et
                let exists = false;
                for (let [id, existingFile] of selectedFilesMap.entries()) {
                    if (existingFile.name === file.name && 
                        existingFile.size === file.size && 
                        existingFile.lastModified === file.lastModified) {
                        exists = true;
                        break;
                    }
                }
                if (!exists) {
                    selectedFilesMap.set(fileIdCounter++, file);
                }
            }
        });
        
        // Önizlemeleri güncelle
        updatePreviews();
    });

    // Önizlemeleri güncelle
    function updatePreviews() {
        if (selectedFilesMap.size > 0) {
            selectedFilesDiv.classList.remove('hidden');
            fileList.innerHTML = '';
            
            selectedFilesMap.forEach((file, fileId) => {
                const reader = new FileReader();
                
                reader.onload = function(e) {
                    const div = document.createElement('div');
                    div.className = 'relative group';
                    div.setAttribute('data-file-id', fileId);
                    div.innerHTML = `
                        <div class="relative overflow-hidden rounded-lg border-2 border-gray-200 hover:border-blue-400 transition-all duration-200">
                            <img src="${e.target.result}" 
                                 alt="${file.name}" 
                                 class="w-full h-24 object-cover">
                            <button type="button" 
                                    class="remove-image-btn absolute top-1 right-1 bg-red-500 hover:bg-red-600 text-white rounded-full w-6 h-6 flex items-center justify-center shadow-lg transition-all duration-200 opacity-90 hover:opacity-100 z-10"
                                    data-file-id="${fileId}"
                                    title="Görseli kaldır">
                                <i class="fas fa-times text-xs"></i>
                            </button>
                            <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition-all duration-200 flex items-center justify-center">
                                <div class="opacity-0 group-hover:opacity-100 transition-opacity duration-200">
                                    <span class="text-white text-xs font-semibold bg-green-500 px-2 py-1 rounded">
                                        <i class="fas fa-check-circle"></i> Seçildi
                                    </span>
                                </div>
                            </div>
                        </div>
                        <p class="text-xs text-gray-600 mt-1 truncate" title="${file.name}">
                            ${file.name.length > 20 ? file.name.substring(0, 20) + '...' : file.name}
                        </p>
                        <p class="text-xs text-gray-400">
                            ${(file.size / 1024 / 1024).toFixed(2)} MB
                        </p>
                    `;
                    fileList.appendChild(div);
                    
                    // Kaldır butonuna event listener ekle
                    const removeBtn = div.querySelector('.remove-image-btn');
                    removeBtn.addEventListener('click', function(e) {
                        e.stopPropagation();
                        const id = parseInt(this.getAttribute('data-file-id'));
                        removeImage(id);
                    });
                };
                
                reader.readAsDataURL(file);
            });
            
            // File input'u güncelle
            updateFileInput();
        } else {
            selectedFilesDiv.classList.add('hidden');
            fileList.innerHTML = '';
            updateFileInput();
        }
    }

    // Görseli kaldır
    function removeImage(fileId) {
        selectedFilesMap.delete(fileId);
        updatePreviews();
    }

    // File input'u güncelle - DataTransfer yerine yeni bir input oluştur
    function updateFileInput() {
        // DataTransfer kullanımı bazı durumlarda dosya geçerliliğini kaybedebilir
        // Bu yüzden sadece seçili dosyaları saklıyoruz, form submit edildiğinde
        // orijinal dosyalar zaten request'te olacak
        // Bu fonksiyon sadece görsel önizleme için kullanılıyor
        
        // Eğer dosyalar kaldırıldıysa, input'u temizle
        if (selectedFilesMap.size === 0) {
            imagesInput.value = '';
        }
        
        console.log('File input state:', {
            'selected_files_count': selectedFilesMap.size,
            'input_files_count': imagesInput.files.length
        });
    }

    // Ürün adı değiştiğinde butonu aktif/pasif yap
    productNameInput.addEventListener('input', function() {
        const productName = this.value.trim();
        if (productName.length >= 3) {
            generateAiBtn.disabled = false;
            generateAiBtn.classList.remove('opacity-50', 'cursor-not-allowed');
        } else {
            generateAiBtn.disabled = true;
            generateAiBtn.classList.add('opacity-50', 'cursor-not-allowed');
        }
    });

    // AI ile üretme butonu - Retry mekanizması ile
    generateAiBtn.addEventListener('click', function() {
        const productName = productNameInput.value.trim();
        
        if (!productName || productName.length < 3) {
            alert('Lütfen önce ürün adını girin (minimum 3 karakter)');
            productNameInput.focus();
            return;
        }

        // Butonu devre dışı bırak ve loading göster
        generateAiBtn.disabled = true;
        generateAiText.classList.add('hidden');
        generateAiLoading.classList.remove('hidden');

        // Retry mekanizması ile API isteği
        let retryCount = 0;
        const maxRetries = 3;
        const retryDelay = 30000; // 30 saniye

        function makeRequest() {
            // Site ID'yi al
            const siteId = document.getElementById('site_id')?.value || null;
            
            fetch('{{ route("admin.products.generate-descriptions") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({
                    product_name: productName,
                    site_id: siteId
                })
            })
            .then(response => {
                if (response.status === 429) {
                    // Rate limit - retry
                    return response.json().then(data => {
                        throw new Error(data.error || 'API yoğun, tekrar deneniyor...');
                    });
                }
                return response.json();
            })
            .then(data => {
                if (data.success) {
                    // Kısa açıklama
                    if (data.short_description) {
                        shortDescriptionTextarea.value = data.short_description;
                    }
                    
                    // Uzun açıklama
                    if (data.description) {
                        descriptionTextarea.value = data.description;
                    }

                    // Başarı mesajı
                    showNotification('AI açıklamalar başarıyla üretildi!', 'success');
                    
                    // Butonu tekrar aktif et
                    generateAiBtn.disabled = false;
                    generateAiText.classList.remove('hidden');
                    generateAiLoading.classList.add('hidden');
                } else {
                    throw new Error(data.error || 'Bir hata oluştu');
                }
            })
            .catch(error => {
                console.error('AI Generation Error:', error);
                
                const errorMessage = error.message || 'AI açıklamalar üretilirken bir hata oluştu.';
                const isOverloaded = errorMessage.includes('yoğun') || 
                                   errorMessage.includes('overloaded') ||
                                   errorMessage.includes('resource exhausted');
                
                if (isOverloaded && retryCount < maxRetries) {
                    retryCount++;
                    const waitTime = retryDelay * retryCount; // 30s, 60s, 90s
                    
                    showNotification(
                        `API yoğun. ${Math.round(waitTime/1000)} saniye sonra tekrar deneniyor... (${retryCount}/${maxRetries})`, 
                        'warning'
                    );
                    
                    // Loading text'i güncelle
                    generateAiLoading.innerHTML = `<i class="fas fa-spinner fa-spin"></i> ${Math.round(waitTime/1000)} saniye sonra tekrar deneniyor... (${retryCount}/${maxRetries})`;
                    
                    // Retry delay
                    setTimeout(() => {
                        makeRequest();
                    }, waitTime);
                } else {
                    // Tüm denemeler bitti veya başka bir hata
                    showNotification(
                        errorMessage + (retryCount >= maxRetries ? ' Lütfen daha sonra tekrar deneyin.' : ''), 
                        'error'
                    );
                    
                    // Butonu tekrar aktif et
                    generateAiBtn.disabled = false;
                    generateAiText.classList.remove('hidden');
                    generateAiLoading.classList.add('hidden');
                }
            });
        }
        
        // İlk isteği başlat
        makeRequest();
    });

    // Bildirim gösterme fonksiyonu
    function showNotification(message, type) {
        const notification = document.createElement('div');
        const colors = {
            'success': 'bg-green-500 text-white',
            'error': 'bg-red-500 text-white',
            'warning': 'bg-yellow-500 text-white'
        };
        const icons = {
            'success': 'fa-check-circle',
            'error': 'fa-exclamation-circle',
            'warning': 'fa-exclamation-triangle'
        };
        
        notification.className = `fixed top-4 right-4 z-50 px-4 py-3 rounded-lg shadow-lg transition-all duration-300 ${colors[type] || colors.error}`;
        notification.innerHTML = `
            <div class="flex items-center gap-2">
                <i class="fas ${icons[type] || icons.error}"></i>
                <span>${message}</span>
            </div>
        `;
        
        document.body.appendChild(notification);
        
        // Warning mesajları daha uzun göster
        const duration = type === 'warning' ? 5000 : 3000;
        
        setTimeout(() => {
            notification.classList.add('opacity-0');
            setTimeout(() => notification.remove(), 300);
        }, duration);
    }
});
</script>
@endpush
@endsection