@extends('layouts.app')

@section('title', 'Ürün Doğrulama')

@php
    use Illuminate\Support\Str;
@endphp

@section('content')
    <div class="px-4 sm:px-6 lg:px-8">
        <div class="max-w-7xl">
            <div class="flex items-center justify-between mb-6">
                <div>
                    <h1 class="text-3xl font-semibold text-gray-900">Ürün Görsel Doğrulama</h1>
                    <p class="text-sm text-gray-600 mt-2">Ürün görsellerini WordPress'e yükleyip URL'lerini kaydedin.</p>
                </div>
                <div class="flex items-center gap-3">
                    <button onclick="openBulkTransferModal()" 
                       class="inline-flex items-center gap-2 rounded-md bg-green-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-green-500 transition-colors">
                        <i class="fas fa-exchange-alt"></i> Toplu Transfer
                    </button>
                    <a href="{{ route('developer.products.bulk-csv') }}" 
                       class="inline-flex items-center gap-2 rounded-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 transition-colors">
                        <i class="fas fa-download"></i> Toplu CSV İndir
                    </a>
                </div>
            </div>

        @if(session('success'))
            <div class="mb-6 bg-green-50 border border-green-200 rounded-lg p-4">
                <div class="flex items-center gap-2">
                    <i class="fas fa-check-circle text-green-600"></i>
                    <p class="text-sm text-green-800">{{ session('success') }}</p>
                </div>
            </div>
        @endif

        @if(session('error'))
            <div class="mb-6 bg-red-50 border border-red-200 rounded-lg p-4">
                <div class="flex items-center gap-2">
                    <i class="fas fa-exclamation-circle text-red-600"></i>
                    <p class="text-sm text-red-800">{{ session('error') }}</p>
                </div>
            </div>
        @endif

        @if($products->count() === 0)
            <div id="empty-products-message" class="bg-yellow-50 border border-yellow-200 rounded-lg p-6 text-center">
                <i class="fas fa-inbox text-yellow-400 text-4xl mb-3"></i>
                <p class="text-sm text-yellow-800">Henüz doğrulanacak ürün görseli bulunmuyor.</p>
            </div>
        @endif

        @foreach($products as $product)
            <div id="product-{{ $product->id }}" class="product-item bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl mb-8 scroll-mt-8" data-product-id="{{ $product->id }}">
                <div class="px-4 py-6 sm:p-8">
                    <div class="flex items-center justify-between mb-6">
                        <div>
                            <h2 class="text-2xl font-semibold text-gray-900">{{ $product->name }}</h2>
                            @if($product->sku)
                                <p class="text-sm text-gray-500 mt-1">SKU: {{ $product->sku }}</p>
                            @endif
                            @if($product->site)
                                <p class="text-xs text-blue-600 mt-1">
                                    <i class="fas fa-globe"></i> Site: {{ $product->site->name }}
                                </p>
                            @endif
                            @if(isset($product->related_products) && $product->related_products->count() > 0)
                                <p class="text-xs text-purple-600 mt-1">
                                    <i class="fas fa-link"></i> {{ $product->related_products->count() }} ilişkili ürün var
                                </p>
                            @endif
                        </div>
                        <div class="flex items-center gap-3">
                            @if($product->isAllMediaVerified())
                                <div id="csv-section-{{ $product->id }}" class="bg-green-50 border border-green-200 rounded-lg p-4">
                                    <div class="flex items-center gap-3">
                                        <button onclick="copyCsv({{ $product->id }})" class="rounded-md bg-green-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-green-500 transition-colors">
                                            <i class="fas fa-copy"></i> CSV Kopyala
                                        </button>
                                        <button onclick="downloadCsv({{ $product->id }}, '{{ Str::slug($product->name) }}')" class="rounded-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 transition-colors">
                                            <i class="fas fa-download"></i> CSV İndir
                                        </button>
                                    </div>
                                </div>
                            @endif
                            <button onclick="openTransferModal({{ $product->id }}, '{{ addslashes($product->name) }}')" 
                                class="rounded-md bg-purple-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-purple-500 transition-colors">
                                <i class="fas fa-exchange-alt"></i> Siteye Transfer Et
                            </button>
                        </div>
                    </div>

                    @if($product->media->count() > 0)
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                            @foreach($product->media as $media)
                                <div class="border rounded-lg p-4 {{ $media->wp_final_url ? 'bg-green-50 border-green-200' : 'bg-gray-50 border-gray-200' }}">
                                    <div class="mb-3">
                                        <p class="text-xs font-semibold text-gray-500 mb-2">Görsel #{{ $media->sort_order }}</p>
                                        @if($media->master_image_url)
                                            @php
                                                $imageUrl = $media->master_image_full_url;
                                                $fileName = basename($media->master_image_url);
                                            @endphp
                                            <div class="relative w-full h-48 bg-gray-100 rounded-md overflow-hidden group">
                                                <img 
                                                    src="{{ $imageUrl }}" 
                                                    alt="Master Görsel #{{ $media->sort_order }}" 
                                                    class="w-full h-full object-cover"
                                                    onerror="this.onerror=null; this.src='data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'400\' height=\'300\'%3E%3Crect fill=\'%23e5e7eb\' width=\'400\' height=\'300\'/%3E%3Ctext fill=\'%23999\' font-family=\'sans-serif\' font-size=\'14\' x=\'50%25\' y=\'50%25\' text-anchor=\'middle\' dy=\'.3em\'%3EGörsel Yüklenemedi%3C/text%3E%3C/svg%3E'; this.parentElement.querySelector(\'.image-error\').classList.remove(\'hidden\');"
                                                >
                                                <!-- Download Button Overlay -->
                                                <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition-all duration-200 flex items-center justify-center">
                                                    <a 
                                                        href="{{ route('developer.products.media.download', $media) }}"
                                                        class="download-btn opacity-0 group-hover:opacity-100 transition-opacity duration-200 bg-white hover:bg-gray-100 rounded-full p-3 shadow-lg transform hover:scale-110"
                                                        title="Görseli İndir"
                                                        download
                                                    >
                                                        <i class="fas fa-download text-blue-600 text-xl"></i>
                                                    </a>
                                                </div>
                                                <div class="image-error hidden absolute inset-0 bg-gray-200 flex items-center justify-center">
                                                    <div class="text-center">
                                                        <i class="fas fa-exclamation-triangle text-gray-400 text-2xl mb-2"></i>
                                                        <p class="text-xs text-gray-500">Görsel yüklenemedi</p>
                                                        <p class="text-xs text-gray-400 mt-1 break-all px-2">{{ $media->master_image_url }}</p>
                                                    </div>
                                                </div>
                                            </div>
                                            <p class="text-xs text-gray-400 mt-2 break-all" title="{{ $media->master_image_url }}">
                                                {{ Str::limit($media->master_image_url, 50) }}
                                            </p>
                                        @else
                                            <div class="w-full h-48 bg-gray-200 rounded-md flex items-center justify-center">
                                                <div class="text-center">
                                                    <i class="fas fa-image text-gray-400 text-3xl mb-2"></i>
                                                    <span class="text-gray-500 text-xs block">Görsel yolu yok</span>
                                                </div>
                                            </div>
                                        @endif
                                    </div>

                                    <form action="{{ route('developer.products.media.update-url', $media) }}" method="POST" class="mt-3">
                                        @csrf
                                        <div class="mb-2">
                                            <label for="wp_final_url_{{ $media->id }}" class="block text-xs font-medium text-gray-700 mb-1">
                                                <i class="fas fa-link"></i> WordPress Görsel URL
                                            </label>
                                            <input 
                                                type="url" 
                                                name="wp_final_url" 
                                                id="wp_final_url_{{ $media->id }}" 
                                                value="{{ old('wp_final_url', $media->wp_final_url) }}" 
                                                placeholder="http://localhost/site/wp-content/uploads/image.jpg"
                                                {{ $media->wp_final_url ? '' : 'required' }}
                                                class="block w-full rounded-md border-0 px-4 py-2.5 text-sm text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600"
                                            >
                                            <p class="text-xs text-gray-500 mt-1">
                                                <i class="fas fa-info-circle"></i> Localhost için <code class="bg-gray-100 px-1 rounded">http://</code> kullanın (SSL hatası önlemek için)
                                            </p>
                                            @if($media->wp_final_url)
                                                <p class="text-xs text-green-600 mt-1 break-all" title="{{ $media->wp_final_url }}">
                                                    <i class="fas fa-check-circle"></i> Mevcut: {{ Str::limit($media->wp_final_url, 40) }}
                                                </p>
                                            @endif
                                        </div>
                                        <button type="submit" class="w-full rounded-md bg-blue-600 px-3 py-2 text-xs font-semibold text-white shadow-sm hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
                                            <i class="fas fa-save"></i> {{ $media->wp_final_url ? 'Güncelle' : 'Kaydet' }}
                                        </button>
                                    </form>

                                    @if($media->wp_final_url)
                                        <div class="mt-2 text-xs text-green-600 flex items-center gap-1">
                                            <i class="fas fa-check-circle"></i> 
                                            <span>Doğrulandı</span>
                                        </div>
                                    @else
                                        <div class="mt-2 text-xs text-yellow-600 flex items-center gap-1">
                                            <i class="fas fa-clock"></i> 
                                            <span>Beklemede</span>
                                        </div>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
                            <p class="text-sm text-yellow-800">
                                <i class="fas fa-exclamation-triangle"></i> Bu ürün için henüz görsel eklenmemiş.
                            </p>
                        </div>
                    @endif
                </div>
            </div>
        @endforeach
    </div>
</div>

<!-- Transfer Modal (Tekli) -->
<div id="transferModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
    <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" onclick="closeTransferModal()"></div>
        
        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
            <form id="transferForm" method="POST">
                @csrf
                <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                    <div class="sm:flex sm:items-start">
                        <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-purple-100 sm:mx-0 sm:h-10 sm:w-10">
                            <i class="fas fa-exchange-alt text-purple-600"></i>
                        </div>
                        <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
                            <h3 class="text-lg leading-6 font-medium text-gray-900" id="transferModalTitle">
                                Ürünü Siteye Transfer Et
                            </h3>
                            <div class="mt-4">
                                <p class="text-sm text-gray-500 mb-4" id="transferProductName"></p>
                                <div>
                                    <label for="transfer_target_site_id" class="block text-sm font-medium text-gray-700 mb-2">
                                        Hedef Site
                                    </label>
                                    <select name="target_site_id" id="transfer_target_site_id" required
                                        class="block w-full rounded-md border-0 px-4 py-2.5 text-sm text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-purple-600">
                                        <option value="">Site seçin...</option>
                                        @foreach($sites as $site)
                                            <option value="{{ $site->id }}">{{ $site->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="mt-4">
                                    <label class="flex items-center">
                                        <input type="checkbox" name="sync_to_wordpress" value="1" 
                                            class="rounded border-gray-300 text-purple-600 focus:ring-purple-500">
                                        <span class="ml-2 text-sm text-gray-700">WordPress'e de senkronize et</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                    <button type="submit" 
                        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-purple-600 text-base font-medium text-white hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:ml-3 sm:w-auto sm:text-sm">
                        Transfer Et
                    </button>
                    <button type="button" onclick="closeTransferModal()"
                        class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
                        İptal
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Bulk Transfer Modal -->
<div id="bulkTransferModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
    <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" onclick="closeBulkTransferModal()"></div>
        
        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
            <form id="bulkTransferForm" method="POST" action="{{ route('developer.products.transfer-multiple-to-site') }}">
                @csrf
                <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                    <div class="sm:flex sm:items-start">
                        <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-green-100 sm:mx-0 sm:h-10 sm:w-10">
                            <i class="fas fa-exchange-alt text-green-600"></i>
                        </div>
                        <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
                            <h3 class="text-lg leading-6 font-medium text-gray-900">
                                Toplu Ürün Transferi
                            </h3>
                            <div class="mt-4">
                                <p class="text-sm text-gray-500 mb-4">
                                    Transfer etmek istediğiniz ürünleri seçin ve hedef siteyi belirleyin.
                                </p>
                                <div class="mb-4 max-h-60 overflow-y-auto border border-gray-200 rounded-md p-3">
                                    @foreach($products as $product)
                                        <label class="flex items-center py-2 hover:bg-gray-50 cursor-pointer">
                                            <input type="checkbox" name="product_ids[]" value="{{ $product->id }}" 
                                                class="rounded border-gray-300 text-green-600 focus:ring-green-500 product-checkbox">
                                            <span class="ml-2 text-sm text-gray-700">{{ $product->name }}</span>
                                            @if($product->sku)
                                                <span class="ml-2 text-xs text-gray-500">({{ $product->sku }})</span>
                                            @endif
                                        </label>
                                    @endforeach
                                </div>
                                <div class="mb-4">
                                    <label for="bulk_transfer_target_site_id" class="block text-sm font-medium text-gray-700 mb-2">
                                        Hedef Site
                                    </label>
                                    <select name="target_site_id" id="bulk_transfer_target_site_id" required
                                        class="block w-full rounded-md border-0 px-4 py-2.5 text-sm text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-green-600">
                                        <option value="">Site seçin...</option>
                                        @foreach($sites as $site)
                                            <option value="{{ $site->id }}">{{ $site->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div>
                                    <label class="flex items-center">
                                        <input type="checkbox" name="sync_to_wordpress" value="1" 
                                            class="rounded border-gray-300 text-green-600 focus:ring-green-500">
                                        <span class="ml-2 text-sm text-gray-700">WordPress'e de senkronize et</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                    <button type="submit" id="bulkTransferSubmitBtn"
                        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-600 text-base font-medium text-white hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 sm:ml-3 sm:w-auto sm:text-sm disabled:opacity-50 disabled:cursor-not-allowed">
                        Transfer Et (<span id="selectedCount">0</span>)
                    </button>
                    <button type="button" onclick="closeBulkTransferModal()"
                        class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
                        İptal
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Hash'ten ürün ID'sini al
    const hash = window.location.hash;
    let targetProductId = null;
    
    if (hash && hash.startsWith('#product-')) {
        targetProductId = hash.replace('#product-', '');
    }
    
    // Eğer hash'te ürün ID varsa, sadece o ürünü göster
    if (targetProductId) {
        const allProducts = document.querySelectorAll('.product-item');
        let foundProduct = false;
        
        allProducts.forEach(function(productDiv) {
            const productId = productDiv.getAttribute('data-product-id');
            if (productId === targetProductId) {
                productDiv.style.display = 'block';
                foundProduct = true;
                // Scroll to the product
                setTimeout(() => {
                    productDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
                }, 100);
            } else {
                productDiv.style.display = 'none';
            }
        });
        
        // Toplu CSV butonunu gizle (tek ürün için anlamsız)
        const bulkCsvBtn = document.querySelector('a[href*="bulk-csv"]');
        if (bulkCsvBtn) {
            bulkCsvBtn.style.display = 'none';
        }
        
        // Boş ürün mesajını gizle
        const emptyMessage = document.getElementById('empty-products-message');
        if (emptyMessage) {
            emptyMessage.style.display = 'none';
        }
        
        // Eğer ürün bulunamadıysa bilgi mesajı göster
        if (!foundProduct) {
            const emptyDiv = document.createElement('div');
            emptyDiv.className = 'bg-yellow-50 border border-yellow-200 rounded-lg p-6 text-center mb-6';
            emptyDiv.innerHTML = `
                <i class="fas fa-exclamation-triangle text-yellow-400 text-4xl mb-3"></i>
                <p class="text-sm text-yellow-800">Belirtilen ürün bulunamadı.</p>
            `;
            const container = document.querySelector('.max-w-7xl');
            if (container) {
                container.insertBefore(emptyDiv, container.firstChild);
            }
        }
    } else {
        // Hash yoksa, session'dan gelen updated_product_id ile scroll et
        @if(session('updated_product_id'))
            const productId = {{ session('updated_product_id') }};
            const productElement = document.querySelector('#product-' + productId);
            if (productElement) {
                setTimeout(() => {
                    productElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
                    // Highlight effect
                    productElement.classList.add('ring-2', 'ring-blue-500');
                    setTimeout(() => {
                        productElement.classList.remove('ring-2', 'ring-blue-500');
                    }, 2000);
                }, 100);
            }
        @endif
    }
});

async function copyCsv(productId) {
    try {
        const response = await fetch(`/developer/products/${productId}/generate-csv`);
        const data = await response.json();
        
        if (data.success) {
            // Copy to clipboard with fallback method
            const csvData = data.csv_data;
            let copied = false;
            
            // Try modern clipboard API first
            if (navigator.clipboard && navigator.clipboard.writeText) {
                try {
                    await navigator.clipboard.writeText(csvData);
                    copied = true;
                } catch (clipboardError) {
                    console.warn('Clipboard API failed, trying fallback:', clipboardError);
                }
            }
            
            // Fallback method: create temporary textarea
            if (!copied) {
                const textarea = document.createElement('textarea');
                textarea.value = csvData;
                textarea.style.position = 'fixed';
                textarea.style.left = '-999999px';
                textarea.style.top = '-999999px';
                document.body.appendChild(textarea);
                textarea.focus();
                textarea.select();
                
                try {
                    const successful = document.execCommand('copy');
                    if (successful) {
                        copied = true;
                    } else {
                        throw new Error('execCommand failed');
                    }
                } catch (fallbackError) {
                    console.error('Fallback copy failed:', fallbackError);
                    // Show textarea as last resort
                    textarea.style.position = 'fixed';
                    textarea.style.left = '50%';
                    textarea.style.top = '50%';
                    textarea.style.transform = 'translate(-50%, -50%)';
                    textarea.style.zIndex = '9999';
                    textarea.style.width = '80%';
                    textarea.style.height = '200px';
                    textarea.style.padding = '10px';
                    textarea.style.border = '2px solid #3b82f6';
                    textarea.style.borderRadius = '8px';
                    textarea.style.backgroundColor = 'white';
                    textarea.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)';
                    
                    const closeBtn = document.createElement('button');
                    closeBtn.textContent = 'Kapat';
                    closeBtn.style.cssText = 'position: absolute; top: 10px; right: 10px; padding: 5px 10px; background: #ef4444; color: white; border: none; border-radius: 4px; cursor: pointer;';
                    closeBtn.onclick = () => {
                        document.body.removeChild(textarea);
                        if (document.body.contains(closeBtn)) {
                            document.body.removeChild(closeBtn);
                        }
                    };
                    textarea.parentElement.appendChild(closeBtn);
                    
                    alert('Otomatik kopyalama başarısız. Yukarıdaki metni manuel olarak kopyalayın.');
                    return;
                }
                
                document.body.removeChild(textarea);
            }
            
            if (copied) {
                // Show success notification
                const notification = document.createElement('div');
                notification.className = 'fixed top-4 right-4 z-50 px-4 py-3 rounded-lg shadow-lg bg-green-500 text-white transition-all duration-300';
                notification.innerHTML = `
                    <div class="flex items-center gap-2">
                        <i class="fas fa-check-circle"></i>
                        <span>CSV verisi panoya kopyalandı!</span>
                    </div>
                `;
                document.body.appendChild(notification);
                
                setTimeout(() => {
                    notification.classList.add('opacity-0');
                    setTimeout(() => notification.remove(), 300);
                }, 3000);
            }
        } else {
            alert('CSV oluşturulamadı: ' + (data.error || 'Bilinmeyen hata'));
        }
    } catch (error) {
        console.error('Error:', error);
        alert('CSV kopyalanırken bir hata oluştu: ' + error.message);
    }
}

async function downloadCsv(productId, productSlug) {
    try {
        const response = await fetch(`/developer/products/${productId}/generate-csv`);
        const data = await response.json();
        
        if (data.success) {
            // Create blob from CSV data
            const blob = new Blob([data.csv_data], { type: 'text/csv;charset=utf-8;' });
            
            // Create download link
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `${productSlug || 'product'}_${productId}_${new Date().getTime()}.csv`;
            document.body.appendChild(a);
            a.click();
            
            // Cleanup
            window.URL.revokeObjectURL(url);
            document.body.removeChild(a);
            
            // Show success notification
            const notification = document.createElement('div');
            notification.className = 'fixed top-4 right-4 z-50 px-4 py-3 rounded-lg shadow-lg bg-green-500 text-white transition-all duration-300';
            notification.innerHTML = `
                <div class="flex items-center gap-2">
                    <i class="fas fa-check-circle"></i>
                    <span>CSV dosyası başarıyla indirildi!</span>
                </div>
            `;
            document.body.appendChild(notification);
            
            setTimeout(() => {
                notification.classList.add('opacity-0');
                setTimeout(() => notification.remove(), 300);
            }, 3000);
        } else {
            alert('CSV oluşturulamadı: ' + (data.error || 'Bilinmeyen hata'));
        }
    } catch (error) {
        console.error('Error:', error);
        alert('CSV indirilirken bir hata oluştu: ' + error.message);
    }
}

// Görsel indirme artık sunucu tarafında yapılıyor, JavaScript fonksiyonu kaldırıldı

// Transfer Modal Functions
let currentProductId = null;

function openTransferModal(productId, productName) {
    currentProductId = productId;
    document.getElementById('transferProductName').textContent = 'Ürün: ' + productName;
    document.getElementById('transferForm').action = `/developer/products/${productId}/transfer-to-site`;
    document.getElementById('transferModal').classList.remove('hidden');
}

function closeTransferModal() {
    document.getElementById('transferModal').classList.add('hidden');
    currentProductId = null;
    document.getElementById('transferForm').reset();
}

function openBulkTransferModal() {
    document.getElementById('bulkTransferModal').classList.remove('hidden');
    updateSelectedCount();
}

function closeBulkTransferModal() {
    document.getElementById('bulkTransferModal').classList.add('hidden');
    // Reset checkboxes
    document.querySelectorAll('.product-checkbox').forEach(cb => cb.checked = false);
    updateSelectedCount();
}

function updateSelectedCount() {
    const checked = document.querySelectorAll('.product-checkbox:checked').length;
    document.getElementById('selectedCount').textContent = checked;
    document.getElementById('bulkTransferSubmitBtn').disabled = checked === 0;
}

// Update count when checkboxes change
document.addEventListener('DOMContentLoaded', function() {
    const checkboxes = document.querySelectorAll('.product-checkbox');
    checkboxes.forEach(cb => {
        cb.addEventListener('change', updateSelectedCount);
    });
    
    // Close modals on escape key
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            closeTransferModal();
            closeBulkTransferModal();
        }
    });
});

// Show transfer errors if any
@if(session('transfer_errors'))
    document.addEventListener('DOMContentLoaded', function() {
        const errors = @json(session('transfer_errors'));
        let errorMsg = 'Transfer hataları:\n\n';
        errors.forEach(function(error, index) {
            errorMsg += `${index + 1}. ${error.product_name}: ${error.error}\n`;
        });
        alert(errorMsg);
    });
@endif
</script>
@endpush
@endsection