@extends('layouts.app')

@section('title', 'Toplu Görsel Yükleme')

@section('content')
<div class="px-4 sm:px-6 lg:px-8">
    <div class="mb-6">
        <h1 class="text-3xl font-semibold text-gray-900 dark:text-gray-100">Toplu Görsel Yükleme</h1>
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
            Görselleri birden fazla WordPress sitesine aynı anda yükleyin.
        </p>
    </div>

    @if(session('success'))
    <div class="mb-6 rounded-md bg-green-50 dark:bg-green-900/30 p-4 border border-green-200 dark:border-green-800">
        <div class="flex">
            <div class="flex-shrink-0">
                <i class="fas fa-check-circle text-green-400 dark:text-green-500"></i>
            </div>
            <div class="ml-3">
                <p class="text-sm font-medium text-green-800 dark:text-green-300">{{ session('success') }}</p>
            </div>
        </div>
    </div>
    @endif

    @if(session('upload_results'))
    <div class="mb-6 bg-white dark:bg-gray-800 shadow rounded-lg p-6 border border-gray-200 dark:border-gray-700">
        <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Yükleme Sonuçları</h2>
        <div class="space-y-4">
            @foreach(session('upload_results') as $fileResult)
            <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 bg-gray-50 dark:bg-gray-900/50">
                <h3 class="font-medium text-gray-900 dark:text-gray-100 mb-2">
                    <i class="fas fa-file-image mr-2"></i>{{ $fileResult['file_name'] }}
                </h3>
                <div class="space-y-2">
                    @foreach($fileResult['results'] ?? [] as $result)
                    <div class="flex items-center justify-between text-sm">
                        <span class="text-gray-700 dark:text-gray-300">
                            @if(isset($result['site_name']))
                                {{ $result['site_name'] }}
                            @elseif(isset($result['product_name']))
                                {{ $result['product_name'] }} (Master Ürün)
                            @else
                                N/A
                            @endif
                        </span>
                        <div class="flex items-center gap-2">
                            @if($result['status'] === 'success')
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300">
                                <i class="fas fa-check-circle mr-1"></i>Başarılı
                            </span>
                            @if(isset($result['unique_copy']) && $result['unique_copy'])
                            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-indigo-100 dark:bg-indigo-900/30 text-indigo-800 dark:text-indigo-300" title="Benzersiz kopya oluşturuldu (Hash: {{ $result['unique_hash'] ?? 'N/A' }})">
                                <i class="fas fa-fingerprint mr-1"></i>Benzersiz
                            </span>
                            @endif
                            @if($result['url'])
                            <a href="{{ $result['url'] }}" target="_blank" class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">
                                <i class="fas fa-external-link-alt"></i>
                            </a>
                            @endif
                            @else
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300">
                                <i class="fas fa-times-circle mr-1"></i>Hata
                            </span>
                            <span class="text-red-600 dark:text-red-400 text-xs" title="{{ $result['message'] }}">
                                <i class="fas fa-info-circle"></i>
                            </span>
                            @endif
                        </div>
                    </div>
                    @endforeach
                </div>
                
                {{-- Detaylı Değişiklik Bilgileri Modülü --}}
                @if(isset($fileResult['has_modifications']) && $fileResult['has_modifications'])
                <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
                    <button type="button" 
                            class="flex items-center justify-between w-full text-left text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors"
                            onclick="toggleModifications('modifications-{{ $loop->index }}')">
                        <span>
                            <i class="fas fa-sliders-h mr-2"></i>Uygulanan Görsel Değişiklikleri
                        </span>
                        <i class="fas fa-chevron-down transition-transform" id="icon-modifications-{{ $loop->index }}"></i>
                    </button>
                    <div id="modifications-{{ $loop->index }}" class="hidden mt-3 space-y-3">
                        @foreach($fileResult['results'] ?? [] as $resultIndex => $result)
                            @if((isset($result['modifications']) && is_array($result['modifications']) && !empty($result['modifications'])) || (isset($result['is_variation']) && $result['is_variation']))
                            <div class="bg-white dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
                                <h4 class="text-xs font-semibold text-gray-600 dark:text-gray-400 mb-3 uppercase">
                                    @if(isset($result['site_name']))
                                        {{ $result['site_name'] }}
                                    @elseif(isset($result['product_name']))
                                        {{ $result['product_name'] }}
                                    @endif
                                    @if(isset($result['is_variation']) && $result['is_variation'])
                                        <span class="ml-2 text-purple-600 dark:text-purple-400">(Varyasyon)</span>
                                    @endif
                                </h4>
                                
                                @if(isset($result['modifications']) && is_array($result['modifications']) && !empty($result['modifications']))
                                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                    {{-- Kontrast Değişikliği --}}
                                    <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-3 border border-blue-200 dark:border-blue-800">
                                        <div class="flex items-center justify-between mb-2">
                                            <span class="text-xs font-medium text-blue-900 dark:text-blue-300">
                                                <i class="fas fa-adjust mr-1"></i>Kontrast
                                            </span>
                                            <span class="text-xs font-bold text-blue-700 dark:text-blue-400">
                                                @if(isset($result['modifications']['applied_contrast']))
                                                    {{ $result['modifications']['applied_contrast'] > 0 ? '+' : '' }}{{ number_format($result['modifications']['applied_contrast'], 2) }}
                                                @else
                                                    {{ $result['modifications']['contrast'] > 0 ? '+' : '' }}{{ number_format($result['modifications']['contrast'] * 100, 2) }}%
                                                @endif
                                            </span>
                                        </div>
                                        <div class="text-xs text-blue-700 dark:text-blue-400">
                                            @if(isset($result['modifications']['contrast']))
                                                Orijinal: <strong>0</strong> → Yeni: <strong>{{ number_format($result['modifications']['contrast'] * 100, 2) }}%</strong>
                                            @else
                                                Değişiklik: <strong>{{ $result['modifications']['applied_contrast'] ?? 0 }}</strong>
                                            @endif
                                        </div>
                                    </div>
                                    
                                    {{-- Parlaklık Değişikliği --}}
                                    <div class="bg-yellow-50 dark:bg-yellow-900/20 rounded-lg p-3 border border-yellow-200 dark:border-yellow-800">
                                        <div class="flex items-center justify-between mb-2">
                                            <span class="text-xs font-medium text-yellow-900 dark:text-yellow-300">
                                                <i class="fas fa-sun mr-1"></i>Parlaklık
                                            </span>
                                            <span class="text-xs font-bold text-yellow-700 dark:text-yellow-400">
                                                @if(isset($result['modifications']['applied_brightness']))
                                                    {{ $result['modifications']['applied_brightness'] > 0 ? '+' : '' }}{{ number_format($result['modifications']['applied_brightness'], 2) }}
                                                @else
                                                    {{ $result['modifications']['brightness'] > 0 ? '+' : '' }}{{ number_format($result['modifications']['brightness'] * 100, 2) }}%
                                                @endif
                                            </span>
                                        </div>
                                        <div class="text-xs text-yellow-700 dark:text-yellow-400">
                                            @if(isset($result['modifications']['brightness']))
                                                Orijinal: <strong>0</strong> → Yeni: <strong>{{ number_format($result['modifications']['brightness'] * 100, 2) }}%</strong>
                                            @else
                                                Değişiklik: <strong>{{ $result['modifications']['applied_brightness'] ?? 0 }}</strong>
                                            @endif
                                        </div>
                                    </div>
                                    
                                    {{-- Doygunluk/Colorize Değişikliği --}}
                                    <div class="bg-purple-50 dark:bg-purple-900/20 rounded-lg p-3 border border-purple-200 dark:border-purple-800">
                                        <div class="flex items-center justify-between mb-2">
                                            <span class="text-xs font-medium text-purple-900 dark:text-purple-300">
                                                <i class="fas fa-palette mr-1"></i>Doygunluk
                                            </span>
                                            <span class="text-xs font-bold text-purple-700 dark:text-purple-400">
                                                @if(isset($result['modifications']['applied_colorize']))
                                                    {{ $result['modifications']['applied_colorize'] > 0 ? '+' : '' }}{{ number_format($result['modifications']['applied_colorize'], 2) }}
                                                @else
                                                    {{ $result['modifications']['saturation'] > 0 ? '+' : '' }}{{ number_format($result['modifications']['saturation'] * 100, 2) }}%
                                                @endif
                                            </span>
                                        </div>
                                        <div class="text-xs text-purple-700 dark:text-purple-400">
                                            @if(isset($result['modifications']['saturation']))
                                                Orijinal: <strong>0</strong> → Yeni: <strong>{{ number_format($result['modifications']['saturation'] * 100, 2) }}%</strong>
                                            @else
                                                Değişiklik: <strong>{{ $result['modifications']['applied_colorize'] ?? 0 }}</strong>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                @endif
                                
                                @if(isset($result['is_variation']) && $result['is_variation'] && (!isset($result['modifications']) || empty($result['modifications'])))
                                {{-- Master yükleme için varyasyon bilgisi (modifications yoksa) --}}
                                <div class="bg-purple-50 dark:bg-purple-900/20 rounded-lg p-3 border border-purple-200 dark:border-purple-800">
                                    <div class="flex items-center justify-between">
                                        <span class="text-xs font-medium text-purple-900 dark:text-purple-300">
                                            <i class="fas fa-image mr-1"></i>Benzersiz Varyasyon Oluşturuldu
                                        </span>
                                        <span class="text-xs text-purple-700 dark:text-purple-400">
                                            <i class="fas fa-check-circle"></i>
                                        </span>
                                    </div>
                                    <p class="text-xs text-purple-600 dark:text-purple-400 mt-2">
                                        Bu görsel için minimal kontrast, parlaklık ve doygunluk değişiklikleri uygulanarak benzersiz bir varyasyon oluşturuldu.
                                    </p>
                                    @if(isset($result['variant_path']))
                                    <div class="mt-2">
                                        <a href="{{ Storage::url($result['variant_path']) }}" target="_blank" class="text-xs text-purple-600 dark:text-purple-400 hover:underline">
                                            <i class="fas fa-external-link-alt mr-1"></i>Varyasyonu Görüntüle
                                        </a>
                                    </div>
                                    @endif
                                </div>
                                @endif
                                
                                {{-- Hash Bilgisi --}}
                                @if(isset($result['unique_hash']))
                                <div class="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700">
                                    <div class="flex items-center justify-between">
                                        <span class="text-xs font-medium text-gray-600 dark:text-gray-400">
                                            <i class="fas fa-fingerprint mr-1"></i>Benzersiz Hash:
                                        </span>
                                        <code class="text-xs text-gray-800 dark:text-gray-200 font-mono bg-gray-100 dark:bg-gray-900 px-2 py-1 rounded">
                                            {{ substr($result['unique_hash'], 0, 16) }}...
                                        </code>
                                    </div>
                                </div>
                                @endif
                            </div>
                            @endif
                        @endforeach
                    </div>
                </div>
                @endif
            </div>
            @endforeach
        </div>
    </div>
    @endif

    <form action="{{ route('media.bulk-upload.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 sm:rounded-xl">
        @csrf

        <div class="px-4 py-6 sm:p-8">
            <div class="grid grid-cols-1 gap-x-6 gap-y-8">
                <!-- Yükleme Tipi Seçimi -->
                <div>
                    <label class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-100 mb-3">
                        Yükleme Tipi <span class="text-red-500">*</span>
                    </label>
                    <div class="space-y-3">
                        <label class="flex items-center p-4 border border-gray-200 dark:border-gray-700 rounded-lg cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-900/50 transition upload-type-option" data-type="wordpress">
                            <input type="radio" name="upload_type" value="wordpress" checked class="mr-3 text-blue-600 dark:text-blue-500 focus:ring-blue-500 dark:focus:ring-blue-400 upload-type-radio">
                            <div class="flex-1">
                                <div class="flex items-center">
                                    <i class="fas fa-wordpress text-blue-600 dark:text-blue-400 text-xl mr-3"></i>
                                    <div>
                                        <div class="font-medium text-gray-900 dark:text-gray-100">WordPress Sitelerine Yükle</div>
                                        <div class="text-sm text-gray-500 dark:text-gray-400">Görselleri seçilen WordPress sitelerine yükler</div>
                                    </div>
                                </div>
                            </div>
                        </label>
                        <label class="flex items-center p-4 border border-gray-200 dark:border-gray-700 rounded-lg cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-900/50 transition upload-type-option" data-type="master">
                            <input type="radio" name="upload_type" value="master" class="mr-3 text-indigo-600 dark:text-indigo-500 focus:ring-indigo-500 dark:focus:ring-indigo-400 upload-type-radio">
                            <div class="flex-1">
                                <div class="flex items-center">
                                    <i class="fas fa-image text-indigo-600 dark:text-indigo-400 text-xl mr-3"></i>
                                    <div>
                                        <div class="font-medium text-gray-900 dark:text-gray-100">Master Görsel Olarak Kaydet</div>
                                        <div class="text-sm text-gray-500 dark:text-gray-400">Görselleri master ürüne kaydeder ve tüm siteler için varyasyonlar oluşturur</div>
                                    </div>
                                </div>
                            </div>
                        </label>
                    </div>
                    @error('upload_type')
                    <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                    @enderror
                </div>

                <!-- WordPress Site Seçimi -->
                <div id="wordpress-sites-section">
                    <!-- Site Seçimi -->
                    <div>
                    <label class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-100 mb-3">
                        WordPress Siteleri <span class="text-red-500">*</span>
                    </label>
                    <div class="space-y-2 max-h-64 overflow-y-auto border border-gray-200 dark:border-gray-700 rounded-md p-4 bg-gray-50 dark:bg-gray-900/50">
                        @if($sites->isEmpty())
                        <p class="text-sm text-gray-500 dark:text-gray-400">Yükleme yapılabilecek site bulunamadı. (API Secret atanmış siteler gösterilir)</p>
                        @else
                        <div class="flex items-center mb-2 pb-2 border-b border-gray-200 dark:border-gray-700">
                            <button type="button" id="select-all-sites" class="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">
                                <i class="fas fa-check-square mr-1"></i>Tümünü Seç
                            </button>
                            <button type="button" id="deselect-all-sites" class="ml-4 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-300">
                                <i class="fas fa-square mr-1"></i>Seçimi Temizle
                            </button>
                        </div>
                        @foreach($sites as $site)
                        <label class="flex items-center hover:bg-gray-50 dark:hover:bg-gray-800 p-2 rounded cursor-pointer">
                            <input type="checkbox" name="sites[]" value="{{ $site->id }}" 
                                   class="rounded border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 dark:focus:ring-blue-400 bg-white dark:bg-gray-700 site-checkbox">
                            <span class="ml-3 text-sm text-gray-900 dark:text-gray-100">{{ $site->name }}</span>
                            @if($site->url)
                            <span class="ml-auto text-xs text-gray-500 dark:text-gray-400">{{ $site->url }}</span>
                            @endif
                        </label>
                        @endforeach
                        @endif
                    </div>
                    @error('sites')
                    <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                    @enderror
                    @error('sites.*')
                    <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                    @enderror
                    </div>
                </div>

                <!-- Master Product Seçimi -->
                <div id="master-product-section" class="hidden">
                    <div>
                        <label for="product_id" class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-100 mb-3">
                            Master Ürün <span class="text-red-500">*</span>
                        </label>
                        <select name="product_id" id="product_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-indigo-500 dark:focus:border-indigo-400 focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 sm:text-sm">
                            <option value="">Ürün Seçin</option>
                            @foreach($masterProducts as $masterProduct)
                            <option value="{{ $masterProduct->id }}" {{ old('product_id', session('product_id')) == $masterProduct->id ? 'selected' : '' }}>
                                {{ $masterProduct->name }} @if($masterProduct->sku)({{ $masterProduct->sku }})@endif
                            </option>
                            @endforeach
                        </select>
                        <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">Seçilen ürüne master görsel olarak kaydedilecek ve tüm siteler için varyasyonlar oluşturulacak.</p>
                        @error('product_id')
                        <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <!-- Dosya Yükleme -->
                <div>
                    <label for="files" class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-100">
                        Görseller <span class="text-red-500">*</span>
                    </label>
                    <div class="mt-2">
                        <input type="file" name="files[]" id="files" multiple required 
                               accept="image/jpeg,image/jpg,image/png,image/gif,image/svg+xml,image/webp"
                               class="block w-full text-sm text-gray-900 dark:text-gray-100 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-blue-50 dark:file:bg-blue-900/30 file:text-blue-700 dark:file:text-blue-300 hover:file:bg-blue-100 dark:hover:file:bg-blue-900/50 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md">
                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                            JPEG, PNG, GIF, SVG, WebP (Max: 50MB per file)
                        </p>
                        @error('files')
                        <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                        @error('files.*')
                        <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Seçilen dosyaların önizlemesi -->
                    <div id="file-preview" class="mt-4 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 hidden">
                        <!-- Önizlemeler buraya eklenecek -->
                    </div>
                </div>

                <!-- Benzersiz Kopya Seçeneği (WordPress yükleme için) -->
                <div id="unique-copy-section" class="bg-indigo-50 dark:bg-indigo-900/30 border border-indigo-200 dark:border-indigo-800 rounded-md p-4">
                    <div class="flex items-start">
                        <div class="flex items-center h-5">
                            <input type="checkbox" name="create_unique_copies" id="create_unique_copies" value="1" 
                                   class="rounded border-gray-300 dark:border-gray-600 text-indigo-600 dark:text-indigo-500 focus:ring-indigo-500 dark:focus:ring-indigo-400">
                        </div>
                        <div class="ml-3 flex-1">
                            <label for="create_unique_copies" class="text-sm font-medium text-indigo-900 dark:text-indigo-200 cursor-pointer">
                                <i class="fas fa-fingerprint mr-2"></i>Benzersiz Görsel Kopyaları Oluştur
                            </label>
                            <p class="mt-1 text-xs text-indigo-700 dark:text-indigo-300">
                                Her site için görselin benzersiz bir kopyası oluşturulacak. Her kopya, gözle algılanmayacak minimal değişikliklerle (kontrast, parlaklık, doygunluk) farklı bir dijital parmak izine sahip olacak. Bu özellik, görsellerin her sitede benzersiz olmasını sağlar.
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Bilgi Notu -->
                <div class="bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800 rounded-md p-4">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <i class="fas fa-info-circle text-blue-400 dark:text-blue-500"></i>
                        </div>
                        <div class="ml-3">
                            <h3 class="text-sm font-medium text-blue-800 dark:text-blue-300">Bilgi</h3>
                            <div class="mt-2 text-sm text-blue-700 dark:text-blue-300" id="info-content">
                                <ul class="list-disc list-inside space-y-1" id="wordpress-info">
                                    <li>Seçilen görseller, seçilen tüm WordPress sitelerine yüklenecektir.</li>
                                    <li>Her görsel için her siteye ayrı ayrı yükleme yapılacaktır.</li>
                                    <li>Yükleme işlemi tamamlandıktan sonra sonuçlar gösterilecektir.</li>
                                    <li>Maksimum dosya boyutu: 50MB</li>
                                    <li id="unique-info-item" class="hidden"><strong>Benzersiz Kopya Modu:</strong> Her site için görselin benzersiz bir versiyonu oluşturulacak.</li>
                                </ul>
                                <ul class="list-disc list-inside space-y-1 hidden" id="master-info">
                                    <li>Seçilen görseller, seçilen master ürüne master görsel olarak kaydedilecektir.</li>
                                    <li>Her görsel için tüm siteler için benzersiz varyasyonlar otomatik oluşturulacaktır.</li>
                                    <li>Varyasyonlar binary düzeyde farklı olacak (kontrast ve parlaklık değişiklikleri).</li>
                                    <li>Maksimum dosya boyutu: 50MB</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="flex items-center justify-end gap-x-6 border-t border-gray-900/10 dark:border-gray-700 px-4 py-4 sm:px-8">
            <button type="submit" id="submit-btn" 
                    class="rounded-md bg-blue-600 dark:bg-blue-500 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-gray-800 disabled:opacity-50 disabled:cursor-not-allowed">
                <i class="fas fa-upload mr-2"></i>Yüklemeyi Başlat
            </button>
        </div>
    </form>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const selectAllBtn = document.getElementById('select-all-sites');
    const deselectAllBtn = document.getElementById('deselect-all-sites');
    const siteCheckboxes = document.querySelectorAll('.site-checkbox');
    const fileInput = document.getElementById('files');
    const filePreview = document.getElementById('file-preview');
    const submitBtn = document.getElementById('submit-btn');

    // Tümünü seç
    selectAllBtn?.addEventListener('click', function() {
        siteCheckboxes.forEach(checkbox => {
            checkbox.checked = true;
        });
        updateSubmitButton();
    });

    // Seçimi temizle
    deselectAllBtn?.addEventListener('click', function() {
        siteCheckboxes.forEach(checkbox => {
            checkbox.checked = false;
        });
        updateSubmitButton();
    });

    // Site checkbox değişikliklerini dinle
    siteCheckboxes.forEach(checkbox => {
        checkbox.addEventListener('change', updateSubmitButton);
    });

    // Dosya seçildiğinde önizleme göster
    fileInput.addEventListener('change', function(e) {
        const files = e.target.files;
        filePreview.innerHTML = '';
        
        if (files.length > 0) {
            filePreview.classList.remove('hidden');
            
            Array.from(files).forEach((file, index) => {
                if (file.type.startsWith('image/')) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        const div = document.createElement('div');
                        div.className = 'relative';
                        div.innerHTML = `
                            <img src="${e.target.result}" alt="${file.name}" class="w-full h-32 object-cover rounded-lg border border-gray-200 dark:border-gray-700">
                            <div class="absolute top-2 right-2 bg-black bg-opacity-50 text-white text-xs px-2 py-1 rounded">
                                ${(file.size / 1024 / 1024).toFixed(2)} MB
                            </div>
                            <p class="mt-1 text-xs text-gray-600 dark:text-gray-400 truncate" title="${file.name}">${file.name}</p>
                        `;
                        filePreview.appendChild(div);
                    };
                    reader.readAsDataURL(file);
                }
            });
        } else {
            filePreview.classList.add('hidden');
        }
        
        updateSubmitButton();
    });

    // Submit butonunu güncelle
    function updateSubmitButton() {
        const uploadType = document.querySelector('input[name="upload_type"]:checked')?.value;
        const checkedSites = document.querySelectorAll('.site-checkbox:checked').length;
        const hasFiles = fileInput.files.length > 0;
        const productId = document.getElementById('product_id')?.value;
        
        if (uploadType === 'wordpress') {
            if (checkedSites > 0 && hasFiles) {
                submitBtn.disabled = false;
                submitBtn.innerHTML = `<i class="fas fa-upload mr-2"></i>Yüklemeyi Başlat (${checkedSites} site, ${fileInput.files.length} dosya)`;
            } else {
                submitBtn.disabled = true;
                submitBtn.innerHTML = `<i class="fas fa-upload mr-2"></i>Yüklemeyi Başlat`;
            }
        } else if (uploadType === 'master') {
            if (productId && hasFiles) {
                submitBtn.disabled = false;
                submitBtn.innerHTML = `<i class="fas fa-upload mr-2"></i>Master Görsel Olarak Kaydet (${fileInput.files.length} dosya)`;
            } else {
                submitBtn.disabled = true;
                submitBtn.innerHTML = `<i class="fas fa-upload mr-2"></i>Master Görsel Olarak Kaydet`;
            }
        }
    }

    // Benzersiz kopya checkbox değişikliği
    const uniqueCopyCheckbox = document.getElementById('create_unique_copies');
    const uniqueCopySection = document.getElementById('unique-copy-section');
    const uniqueInfoItem = document.getElementById('unique-info-item');

    uniqueCopyCheckbox?.addEventListener('change', function() {
        if (this.checked) {
            uniqueInfoItem?.classList.remove('hidden');
        } else {
            uniqueInfoItem?.classList.add('hidden');
        }
    });

    // Yükleme tipi değişikliği
    const uploadTypeRadios = document.querySelectorAll('.upload-type-radio');
    const wordpressSection = document.getElementById('wordpress-sites-section');
    const masterSection = document.getElementById('master-product-section');
    const wordpressInfo = document.getElementById('wordpress-info');
    const masterInfo = document.getElementById('master-info');

    uploadTypeRadios.forEach(radio => {
        radio.addEventListener('change', function() {
            if (this.value === 'wordpress') {
                wordpressSection?.classList.remove('hidden');
                masterSection?.classList.add('hidden');
                uniqueCopySection?.classList.remove('hidden');
                wordpressInfo?.classList.remove('hidden');
                masterInfo?.classList.add('hidden');
            } else {
                wordpressSection?.classList.add('hidden');
                masterSection?.classList.remove('hidden');
                uniqueCopySection?.classList.add('hidden');
                wordpressInfo?.classList.add('hidden');
                masterInfo?.classList.remove('hidden');
            }
            updateSubmitButton();
        });
    });

    // Product seçimi değiştiğinde butonu güncelle
    document.getElementById('product_id')?.addEventListener('change', updateSubmitButton);

    // Form gönderilirken loading göster
    document.querySelector('form').addEventListener('submit', function(e) {
        const uploadType = document.querySelector('input[name="upload_type"]:checked')?.value;
        const checkedSites = document.querySelectorAll('.site-checkbox:checked').length;
        const fileCount = fileInput.files.length;
        const productId = document.getElementById('product_id')?.value;
        
        if (uploadType === 'wordpress' && checkedSites === 0) {
            e.preventDefault();
            alert('Lütfen en az bir site seçin.');
            return false;
        }
        
        if (uploadType === 'master' && !productId) {
            e.preventDefault();
            alert('Lütfen bir master ürün seçin.');
            return false;
        }
        
        if (fileCount === 0) {
            e.preventDefault();
            alert('Lütfen en az bir dosya seçin.');
            return false;
        }

        submitBtn.disabled = true;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Yükleniyor...';
    });

    // İlk yüklemede butonu güncelle
    updateSubmitButton();
    
    // Modifications toggle fonksiyonu
    window.toggleModifications = function(id) {
        const element = document.getElementById(id);
        const icon = document.getElementById('icon-' + id);
        
        if (element) {
            element.classList.toggle('hidden');
            if (icon) {
                icon.classList.toggle('rotate-180');
            }
        }
    };
});
</script>
@endpush
@endsection