@extends('layouts.app')

@section('title', $product->name)

@section('content')
<div class="px-4 sm:px-6 lg:px-8">
    <div class="max-w-4xl">
        <div class="mb-6">
            <div class="flex items-center justify-between">
                <h1 class="text-3xl font-semibold text-gray-900 dark:text-gray-100 dark:text-gray-100">{{ $product->name }}</h1>
                <div class="flex space-x-3">
                    <button id="copyToSiteBtn" data-product-id="{{ $product->id }}" class="rounded-md bg-purple-600 dark:bg-purple-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-purple-500 dark:hover:bg-purple-600">
                        <i class="fas fa-copy"></i> Site'e Kopyala
                    </button>
                    <a href="{{ route('admin.products.edit', $product) }}" class="rounded-md bg-indigo-600 dark:bg-indigo-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 dark:hover:bg-indigo-600">
                        Düzenle
                    </a>
                </div>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 dark:bg-gray-800 shadow-sm ring-1 ring-gray-900/5 dark:ring-gray-700 sm:rounded-xl mb-6">
            <div class="px-4 py-6 sm:p-8">
                @php
                    $costPrice = $product->costPrice();
                    $minMarginPercent = $product->minProfitMarginPercent();
                    $requiredMinPrice = $product->requiredMinSalePrice();
                    $activePrice = $product->currentSalePrice();
                    $actualMarginPercent = $product->actualProfitMarginPercent();
                    $isMarginInsufficient = $product->isMarginBelowMinimum();
                @endphp
                <dl class="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2">
                    <div>
                        <dt class="text-sm font-medium leading-6 text-gray-900 dark:text-gray-100 dark:text-gray-100">SKU</dt>
                        <dd class="mt-1 text-sm leading-6 text-gray-700 dark:text-gray-300 dark:text-gray-300 dark:text-gray-300">{{ $product->sku ?? '-' }}</dd>
                    </div>

                    <div>
                        <dt class="text-sm font-medium leading-6 text-gray-900 dark:text-gray-100">Fiyat</dt>
                        <dd class="mt-1 text-sm leading-6 text-gray-700 dark:text-gray-300 dark:text-gray-300">
                            @if($product->sale_price)
                                <span class="text-red-600 dark:text-red-400 font-semibold">{{ number_format($product->sale_price, 2) }} ₺</span>
                                <span class="text-gray-400 dark:text-gray-500 line-through ml-2">{{ number_format($product->regular_price ?? 0, 2) }} ₺</span>
                            @else
                                {{ number_format($product->regular_price ?? 0, 2) }} ₺
                            @endif
                        </dd>
                    </div>

                    <div>
                        <dt class="text-sm font-medium leading-6 text-gray-900 dark:text-gray-100">Maliyet Fiyatı</dt>
                        <dd class="mt-1 text-sm leading-6 text-gray-700 dark:text-gray-300 dark:text-gray-300">
                            @if($costPrice !== null)
                                {{ number_format((float) $costPrice, 2) }} ₺
                            @else
                                <span class="text-gray-400 dark:text-gray-500">Belirtilmemiş</span>
                            @endif
                        </dd>
                    </div>

                    <div>
                        <dt class="text-sm font-medium leading-6 text-gray-900 dark:text-gray-100">Minimum Kâr Marjı</dt>
                        <dd class="mt-1 text-sm leading-6 text-gray-700 dark:text-gray-300 dark:text-gray-300">
                            <span class="inline-flex items-center gap-2">
                                <span class="px-2 py-0.5 rounded-full bg-indigo-50 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300 text-xs font-semibold">
                                    {{ $minMarginPercent !== null ? number_format((float) $minMarginPercent, 2) : number_format(15, 2) }} %
                                </span>
                                @if($requiredMinPrice !== null)
                                    <span class="text-xs text-gray-500 dark:text-gray-400 dark:text-gray-500">(Gerekli min. fiyat: {{ number_format((float) $requiredMinPrice, 2) }} ₺)</span>
                                @endif
                            </span>
                        </dd>
                    </div>

                    <div class="sm:col-span-2">
                        <dt class="text-sm font-medium leading-6 text-gray-900 dark:text-gray-100">Gerçekleşen Marj</dt>
                        <dd class="mt-1 text-sm leading-6">
                            @if($actualMarginPercent !== null)
                                <span class="inline-flex items-center gap-2">
                                    <span class="text-sm font-semibold {{ $isMarginInsufficient ? 'text-rose-600 dark:text-rose-400' : 'text-emerald-600 dark:text-emerald-400' }}">
                                        {{ number_format((float) $actualMarginPercent, 2) }} %
                                    </span>
                                    @if($isMarginInsufficient)
                                        <span class="px-2 py-0.5 rounded-full bg-rose-100 dark:bg-rose-900/30 text-rose-700 dark:text-rose-300 text-xs font-semibold">
                                            Minimum marj altında
                                        </span>
                                    @else
                                        <span class="px-2 py-0.5 rounded-full bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300 text-xs font-semibold">
                                            Marj uygun
                                        </span>
                                    @endif
                                </span>
                            @else
                                <span class="text-gray-400 dark:text-gray-500">Hesaplanamadı (maliyet veya fiyat eksik)</span>
                            @endif
                        </dd>
                    </div>

                    <div>
                        <dt class="text-sm font-medium leading-6 text-gray-900 dark:text-gray-100">Kategoriler</dt>
                        <dd class="mt-1 text-sm leading-6 text-gray-700 dark:text-gray-300 dark:text-gray-300">{{ $product->categories ?? '-' }}</dd>
                    </div>

                    <div>
                        <dt class="text-sm font-medium leading-6 text-gray-900 dark:text-gray-100">Görsel Sayısı</dt>
                        <dd class="mt-1 text-sm leading-6 text-gray-700 dark:text-gray-300 dark:text-gray-300">
                            <span class="px-2 py-1 text-xs rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300">
                                {{ $product->media()->count() }}
                            </span>
                        </dd>
                    </div>

                    @if($product->short_description)
                    <div class="sm:col-span-2">
                        <dt class="text-sm font-medium leading-6 text-gray-900 dark:text-gray-100">Kısa Açıklama</dt>
                        <dd class="mt-1 text-sm leading-6 text-gray-700 dark:text-gray-300 dark:text-gray-300">{{ $product->short_description }}</dd>
                    </div>
                    @endif

                    @if($product->description)
                    <div class="sm:col-span-2">
                        <dt class="text-sm font-medium leading-6 text-gray-900 dark:text-gray-100">Uzun Açıklama</dt>
                        <dd class="mt-1 text-sm leading-6 text-gray-700 dark:text-gray-300 dark:text-gray-300 whitespace-pre-wrap">{{ $product->description }}</dd>
                    </div>
                    @endif

                    @if($product->product_link)
                    <div class="sm:col-span-2">
                        <dt class="text-sm font-medium leading-6 text-gray-900 dark:text-gray-100">
                            <i class="fas fa-link"></i> Ürün Linki
                        </dt>
                        <dd class="mt-1">
                            <a href="{{ $product->product_link }}" 
                               target="_blank" 
                               rel="noopener noreferrer"
                               class="inline-flex items-center gap-2 text-sm font-medium text-blue-600 hover:text-blue-800 transition-colors duration-200">
                                <i class="fas fa-external-link-alt"></i>
                                <span class="break-all">{{ $product->product_link }}</span>
                            </a>
                        </dd>
                    </div>
                    @endif
                </dl>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl">
            <div class="px-4 py-6 sm:p-8">
                <div class="flex items-center justify-between mb-4">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Ürün Görselleri ({{ $product->media->count() }})</h2>
                    @if($product->is_master || !$product->site_id)
                    <div>
                        <label for="master-image-upload" class="inline-flex items-center gap-2 rounded-md bg-indigo-600 dark:bg-indigo-500 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 dark:hover:bg-indigo-400 transition cursor-pointer">
                            <i class="fas fa-cloud-upload-alt"></i>
                            Master Görsel Yükle
                        </label>
                        <input type="file" id="master-image-upload" name="images[]" multiple accept="image/*" class="hidden">
                    </div>
                    @endif
                </div>
                
                <div id="upload-progress" class="hidden mb-4">
                    <div class="bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800 rounded-lg p-3">
                        <div class="flex items-center gap-2">
                            <div class="animate-spin rounded-full h-4 w-4 border-b-2 border-blue-600 dark:border-blue-400"></div>
                            <p class="text-sm text-blue-800 dark:text-blue-300">Görseller yükleniyor ve varyasyonlar oluşturuluyor...</p>
                        </div>
                    </div>
                </div>
                
                @if($product->media->count() > 0)
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4" id="media-grid">
                    @foreach($product->media as $media)
                    <div class="relative" data-media-id="{{ $media->id }}">
                        @if($media->master_image_full_url)
                            <img src="{{ $media->master_image_full_url }}" 
                                 alt="Görsel {{ $media->sort_order }}" 
                                 class="w-full h-48 object-cover rounded-md border border-gray-200 dark:border-gray-700"
                                 onerror="this.src='data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'200\' height=\'200\'%3E%3Crect fill=\'%23ddd\' width=\'200\' height=\'200\'/%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';">
                            <p class="text-xs text-gray-500 dark:text-gray-400 dark:text-gray-500 mt-2 text-center">Görsel #{{ $media->sort_order }}</p>
                            <p class="text-xs text-gray-400 dark:text-gray-500 mt-1 text-center break-all">{{ $media->master_image_url }}</p>
                        @else
                            <div class="w-full h-48 bg-gray-100 dark:bg-gray-700 rounded-md flex items-center justify-center">
                                <p class="text-xs text-gray-400 dark:text-gray-500">Görsel yolu yok</p>
                            </div>
                        @endif
                    </div>
                    @endforeach
                </div>
                @else
                <div class="bg-yellow-50 dark:bg-yellow-900/30 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4">
                    <p class="text-sm text-yellow-800 dark:text-yellow-300">
                        <i class="fas fa-exclamation-triangle"></i> Bu ürün için henüz görsel eklenmemiş.
                    </p>
                </div>
                @endif
            </div>
        </div>

        @if($relatedProducts->count() > 0)
        <div class="bg-white dark:bg-gray-800 shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl mt-6">
            <div class="px-4 py-6 sm:p-8">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
                    <i class="fas fa-link"></i> İlişkili Ürünler ({{ $relatedProducts->count() }})
                </h2>
                <div class="space-y-2">
                    @foreach($relatedProducts as $related)
                    <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-900/50 rounded-md">
                        <div>
                            <a href="{{ route('admin.products.show', $related) }}" class="text-sm font-medium text-blue-600 hover:text-blue-800">
                                {{ $related->name }}
                            </a>
                            <p class="text-xs text-gray-500 dark:text-gray-400 dark:text-gray-500 mt-1">
                                Site: {{ $related->site ? $related->site->name : 'Master' }}
                                @if($related->sku)
                                    | SKU: {{ $related->sku }}
                                @endif
                            </p>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
        @endif

        <div class="mt-6">
            <a href="{{ route('admin.products.index') }}" class="text-sm font-semibold text-gray-900 dark:text-gray-100 hover:text-gray-700 dark:text-gray-300 dark:text-gray-300">
                ← Ürün listesine dön
            </a>
        </div>
    </div>
</div>

<!-- Copy Product Modal -->
<div id="copyProductModal" class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true" style="display: none;">
    <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <!-- Backdrop with dark theme support -->
        <div class="fixed inset-0 bg-gray-900 dark:bg-black bg-opacity-50 dark:bg-opacity-75 transition-opacity backdrop-blur-sm" onclick="window.closeCopyModal()"></div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
        
        <!-- Modal Content -->
        <div class="relative inline-block align-bottom bg-white dark:bg-gray-800 rounded-xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full z-10 border border-gray-200 dark:border-gray-700">
            <!-- Modal Header -->
            <div class="bg-gradient-to-r from-purple-600 to-indigo-600 dark:from-purple-700 dark:to-indigo-700 px-6 py-4 border-b border-purple-700 dark:border-purple-800">
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                        <div class="flex-shrink-0">
                            <i class="fas fa-copy text-white text-xl"></i>
                        </div>
                        <h3 class="text-lg font-semibold text-white" id="modal-title">
                            Ürünü Site'e Kopyala
                        </h3>
                    </div>
                    <button type="button" onclick="window.closeCopyModal()" class="text-white hover:text-gray-200 dark:hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-white rounded-lg p-1 transition-colors">
                        <i class="fas fa-times text-xl"></i>
                    </button>
                </div>
            </div>

            <form id="copyProductForm" method="POST">
                @csrf
                <div class="bg-white dark:bg-gray-800 px-6 py-5">
                    <!-- Hedef Site Selection -->
                    <div class="mb-5">
                        <label for="target_site_id" class="block text-sm font-semibold text-gray-700 dark:text-gray-200 mb-2">
                            <i class="fas fa-globe text-purple-600 dark:text-purple-400 mr-2"></i>
                            Hedef Site <span class="text-red-500">*</span>
                        </label>
                        <select 
                            name="target_site_id" 
                            id="target_site_id" 
                            required 
                            class="block w-full px-4 py-3 text-sm text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-purple-500 dark:focus:ring-purple-400 focus:border-purple-500 dark:focus:border-purple-400 transition-all appearance-none cursor-pointer hover:border-gray-400 dark:hover:border-gray-500">
                            <option value="" class="bg-white dark:bg-gray-700 text-gray-500 dark:text-gray-400">Site Seçin...</option>
                            @foreach($sites as $site)
                            <option value="{{ $site->id }}" {{ empty($site->api_secret) ? 'disabled' : '' }} class="bg-white dark:bg-gray-700">
                                {{ $site->name }}{{ !empty($site->api_secret) ? ' ✓' : ' (API Secret yok)' }}
                            </option>
                            @endforeach
                        </select>
                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Kopyalanacak hedef siteyi seçin</p>
                    </div>

                    <!-- WordPress Sync Checkbox -->
                    <div class="mb-5 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg border border-gray-200 dark:border-gray-600">
                        <label class="flex items-center cursor-pointer group">
                            <input 
                                type="checkbox" 
                                name="sync_to_wordpress" 
                                id="sync_to_wordpress" 
                                class="w-4 h-4 text-purple-600 dark:text-purple-400 bg-gray-100 dark:bg-gray-600 border-gray-300 dark:border-gray-500 rounded focus:ring-2 focus:ring-purple-500 dark:focus:ring-purple-400 focus:ring-offset-0 cursor-pointer transition-all">
                            <span class="ml-3 text-sm font-medium text-gray-700 dark:text-gray-200 group-hover:text-gray-900 dark:group-hover:text-gray-100 transition-colors">
                                <i class="fas fa-wordpress text-blue-600 dark:text-blue-400 mr-2"></i>
                                WordPress'e senkronize et
                            </span>
                        </label>
                        <p class="mt-2 ml-7 text-xs text-gray-500 dark:text-gray-400">Ürün seçilen siteye kopyalandıktan sonra WordPress'e otomatik olarak gönderilir</p>
                    </div>

                    <!-- Ürün Adı Override -->
                    <div class="mb-5">
                        <label for="override_name" class="block text-sm font-semibold text-gray-700 dark:text-gray-200 mb-2">
                            <i class="fas fa-tag text-indigo-600 dark:text-indigo-400 mr-2"></i>
                            Ürün Adı <span class="text-gray-400 dark:text-gray-500 text-xs font-normal">(Opsiyonel)</span>
                        </label>
                        <input 
                            type="text" 
                            name="override_name" 
                            id="override_name" 
                            class="block w-full px-4 py-3 text-sm text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all placeholder-gray-400 dark:placeholder-gray-500 hover:border-gray-400 dark:hover:border-gray-500" 
                            placeholder="Boş bırakırsanız kaynak ürün adı kullanılır">
                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Farklı bir ürün adı kullanmak isterseniz buraya yazın</p>
                    </div>

                    <!-- SKU Override -->
                    <div class="mb-5">
                        <label for="override_sku" class="block text-sm font-semibold text-gray-700 dark:text-gray-200 mb-2">
                            <i class="fas fa-barcode text-emerald-600 dark:text-emerald-400 mr-2"></i>
                            SKU <span class="text-gray-400 dark:text-gray-500 text-xs font-normal">(Opsiyonel)</span>
                        </label>
                        <input 
                            type="text" 
                            name="override_sku" 
                            id="override_sku" 
                            class="block w-full px-4 py-3 text-sm text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-emerald-500 dark:focus:ring-emerald-400 focus:border-emerald-500 dark:focus:border-emerald-400 transition-all placeholder-gray-400 dark:placeholder-gray-500 hover:border-gray-400 dark:hover:border-gray-500 font-mono" 
                            placeholder="Boş bırakırsanız otomatik SKU oluşturulur">
                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Özel bir SKU kullanmak isterseniz buraya yazın</p>
                    </div>
                </div>

                <!-- Modal Footer -->
                <div class="bg-gray-50 dark:bg-gray-900/50 px-6 py-4 border-t border-gray-200 dark:border-gray-700 sm:flex sm:flex-row-reverse sm:items-center sm:justify-between">
                    <button 
                        type="submit" 
                        class="w-full inline-flex items-center justify-center rounded-lg border border-transparent shadow-sm px-5 py-2.5 bg-gradient-to-r from-purple-600 to-indigo-600 dark:from-purple-700 dark:to-indigo-700 text-sm font-semibold text-white hover:from-purple-700 hover:to-indigo-700 dark:hover:from-purple-600 dark:hover:to-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-800 focus:ring-purple-500 dark:focus:ring-purple-400 transition-all transform hover:scale-105 active:scale-95 sm:ml-3 sm:w-auto">
                        <i class="fas fa-copy mr-2"></i>
                        Kopyala
                    </button>
                    <button 
                        type="button" 
                        onclick="window.closeCopyModal()" 
                        class="mt-3 w-full inline-flex items-center justify-center rounded-lg border border-gray-300 dark:border-gray-600 shadow-sm px-5 py-2.5 bg-white dark:bg-gray-800 text-sm font-semibold text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-800 focus:ring-gray-500 dark:focus:ring-gray-400 transition-all sm:mt-0 sm:w-auto">
                        <i class="fas fa-times mr-2"></i>
                        İptal
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
// Global fonksiyonlar - buton onclick'ten çağrılabilmesi için
// Window objesine ekle ki her yerden erişilebilsin
window.openCopyModal = function(productId) {
    console.log('openCopyModal called with productId:', productId);
    const modal = document.getElementById('copyProductModal');
    const form = document.getElementById('copyProductForm');
    
    if (!modal) {
        console.error('Modal bulunamadı');
        alert('Modal açılırken hata oluştu. Sayfayı yenileyin.');
        return;
    }
    
    if (!form) {
        console.error('Form bulunamadı');
        alert('Form bulunamadı. Sayfayı yenileyin.');
        return;
    }
    
    form.action = `/admin/products/${productId}/copy-to-site`;
    form.reset();
    
    // Modal'ı göster - display block yap (overflow-y-auto için)
    modal.style.display = 'block';
    modal.style.setProperty('display', 'block', 'important');
    modal.style.setProperty('visibility', 'visible', 'important');
    modal.style.setProperty('opacity', '1', 'important');
    document.body.style.overflow = 'hidden'; // Scroll'u engelle
    
    // Modal içindeki select'i resetle
    const targetSiteSelect = document.getElementById('target_site_id');
    if (targetSiteSelect) {
        targetSiteSelect.selectedIndex = 0;
    }
    
    const computedStyle = window.getComputedStyle(modal);
    console.log('Modal açıldı');
    console.log('Display:', modal.style.display, 'Computed:', computedStyle.display);
    console.log('Visibility:', computedStyle.visibility);
    console.log('Opacity:', computedStyle.opacity);
    console.log('Z-index:', computedStyle.zIndex);
    console.log('Position:', computedStyle.position);
};

window.closeCopyModal = function() {
    const modal = document.getElementById('copyProductModal');
    if (modal) {
        modal.style.display = 'none';
        modal.style.setProperty('display', 'none', 'important');
        document.body.style.overflow = ''; // Scroll'u geri aç
    }
};

// DOMContentLoaded içinde form submit listener'ı ekle
document.addEventListener('DOMContentLoaded', function() {
    console.log('DOMContentLoaded - Event listeners ekleniyor');
    
    // Buton event listener'ı ekle
    const copyToSiteBtn = document.getElementById('copyToSiteBtn');
    if (copyToSiteBtn) {
        const productId = copyToSiteBtn.getAttribute('data-product-id');
        copyToSiteBtn.addEventListener('click', function(e) {
            e.preventDefault();
            console.log('Copy button clicked, productId:', productId);
            window.openCopyModal(productId);
        });
        console.log('Copy button listener eklendi');
    } else {
        console.error('Copy button bulunamadı');
    }
    
    // Form submit listener'ı ekle
    const copyProductForm = document.getElementById('copyProductForm');
    if (copyProductForm) {
        copyProductForm.addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const formData = new FormData(this);
            const submitButton = this.querySelector('button[type="submit"]');
            const originalText = submitButton.innerHTML;
            
            submitButton.disabled = true;
            submitButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Kopyalanıyor...';

            try {
                const response = await fetch(this.action, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json',
                    }
                });

                const result = await response.json();

                if (response.ok && result.success) {
                    window.closeCopyModal();
                    window.showMessage('success', result.message || 'Ürün başarıyla kopyalandı.');
                    setTimeout(() => {
                        location.reload();
                    }, 1500);
                } else {
                    const errorMessage = result.message || result.error || 'Kopyalama sırasında hata oluştu.';
                    window.showMessage('error', errorMessage);
                    submitButton.disabled = false;
                    submitButton.innerHTML = originalText;
                }
            } catch (error) {
                console.error('Error:', error);
                window.showMessage('error', 'Kopyalama sırasında hata oluştu: ' + error.message);
                submitButton.disabled = false;
                submitButton.innerHTML = originalText;
            }
        });
    } else {
        console.error('copyProductForm bulunamadı');
    }
});

// Mesaj göster fonksiyonu
window.showMessage = function(type, message) {
    // Mevcut mesaj container'ını kontrol et
    let messageContainer = document.getElementById('messageContainer');
    if (!messageContainer) {
        // Eğer yoksa oluştur
        messageContainer = document.createElement('div');
        messageContainer.id = 'messageContainer';
        messageContainer.className = 'fixed top-4 right-4 z-50 max-w-md';
        document.body.appendChild(messageContainer);
    }

    const bgColor = type === 'success' 
        ? 'bg-green-50 dark:bg-green-900/30 border-green-200 dark:border-green-700 text-green-800 dark:text-green-300'
        : 'bg-red-50 dark:bg-red-900/30 border-red-200 dark:border-red-700 text-red-800 dark:text-red-300';
    
    const icon = type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle';

    const messageDiv = document.createElement('div');
    messageDiv.className = `rounded-md border p-4 mb-3 ${bgColor} shadow-lg`;
    messageDiv.innerHTML = `
        <div class="flex">
            <div class="flex-shrink-0">
                <i class="fas ${icon}"></i>
            </div>
            <div class="ml-3">
                <p class="text-sm font-medium">${message}</p>
            </div>
            <div class="ml-auto pl-3">
                <button onclick="this.parentElement.parentElement.parentElement.remove()" class="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </div>
    `;

    messageContainer.appendChild(messageDiv);

    // 5 saniye sonra otomatik kaldır
    setTimeout(() => {
        if (messageDiv.parentElement) {
            messageDiv.remove();
        }
    }, 5000);
};

// Select için custom arrow styling
document.addEventListener('DOMContentLoaded', function() {
    const targetSiteSelect = document.getElementById('target_site_id');
    if (targetSiteSelect) {
        // Select'e custom arrow ekle
        const style = document.createElement('style');
        style.textContent = `
            #target_site_id {
                background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
                background-position: right 0.5rem center;
                background-repeat: no-repeat;
                background-size: 1.5em 1.5em;
                padding-right: 2.5rem;
            }
            .dark #target_site_id {
                background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%9ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
            }
            #target_site_id:focus {
                background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%238b5cf6' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
            }
        `;
        document.head.appendChild(style);
    }
});

// Script yüklendiğini kontrol et
console.log('✅ Product show page scripts yüklendi');
console.log('openCopyModal fonksiyonu:', typeof window.openCopyModal);
console.log('closeCopyModal fonksiyonu:', typeof window.closeCopyModal);

// Sayfa yüklendiğinde butonu kontrol et
window.addEventListener('load', function() {
    console.log('✅ Sayfa yüklendi');
    const copyToSiteBtn = document.getElementById('copyToSiteBtn');
    console.log('Copy button element:', copyToSiteBtn);
    if (copyToSiteBtn) {
        console.log('Button ID:', copyToSiteBtn.id);
        console.log('Button data-product-id:', copyToSiteBtn.getAttribute('data-product-id'));
    }
});

// Master Görsel Yükleme
document.addEventListener('DOMContentLoaded', function() {
    const masterImageUpload = document.getElementById('master-image-upload');
    if (masterImageUpload) {
        masterImageUpload.addEventListener('change', function(e) {
            const files = e.target.files;
            if (files.length === 0) {
                return;
            }

            const formData = new FormData();
            for (let i = 0; i < files.length; i++) {
                formData.append('images[]', files[i]);
            }

            const progressDiv = document.getElementById('upload-progress');
            const mediaGrid = document.getElementById('media-grid');
            const mediaCount = document.getElementById('media-count');

            // Progress göster
            if (progressDiv) {
                progressDiv.classList.remove('hidden');
            }

            // AJAX ile yükle
            fetch('{{ route("admin.products.upload-master-image", $product) }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                },
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (progressDiv) {
                    progressDiv.classList.add('hidden');
                }

                if (data.success) {
                    // Başarı mesajı göster
                    showMessage('success', data.message);

                    // Yeni görselleri ekle
                    if (data.media && data.media.length > 0) {
                        let grid = mediaGrid;
                        if (!grid) {
                            // Eğer media grid yoksa oluştur
                            const container = document.querySelector('.bg-white.dark\\:bg-gray-800.shadow-sm');
                            if (container) {
                                const newGrid = document.createElement('div');
                                newGrid.id = 'media-grid';
                                newGrid.className = 'grid grid-cols-2 md:grid-cols-4 gap-4';
                                const pxDiv = container.querySelector('.px-4');
                                if (pxDiv) {
                                    pxDiv.appendChild(newGrid);
                                    grid = newGrid;
                                }
                            }
                        }

                        if (grid) {
                            data.media.forEach(media => {
                                const mediaDiv = document.createElement('div');
                                mediaDiv.className = 'relative';
                                mediaDiv.setAttribute('data-media-id', media.id);
                                mediaDiv.innerHTML = `
                                    <img src="${media.url}" 
                                         alt="Yeni Görsel" 
                                         class="w-full h-48 object-cover rounded-md border border-gray-200 dark:border-gray-700"
                                         onerror="this.src='data:image/svg+xml,%3Csvg xmlns=\\'http://www.w3.org/2000/svg\\' width=\\'200\\' height=\\'200\\'%3E%3Crect fill=\\'%23ddd\\' width=\\'200\\' height=\\'200\\'/%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';">
                                    <p class="text-xs text-gray-400 dark:text-gray-500 mt-1 text-center break-all">${media.path}</p>
                                `;
                                grid.appendChild(mediaDiv);
                            });
                        }

                        // Media count güncelle
                        if (mediaCount) {
                            const currentCount = parseInt(mediaCount.textContent) || 0;
                            mediaCount.textContent = currentCount + data.media.length;
                        }
                    }

                    // Input'u temizle
                    masterImageUpload.value = '';
                } else {
                    showMessage('error', data.message || 'Görsel yükleme başarısız oldu.');
                }

                // Hataları göster
                if (data.errors && data.errors.length > 0) {
                    data.errors.forEach(error => {
                        showMessage('warning', error);
                    });
                }
            })
            .catch(error => {
                if (progressDiv) {
                    progressDiv.classList.add('hidden');
                }
                console.error('Upload error:', error);
                showMessage('error', 'Görsel yükleme sırasında bir hata oluştu.');
                masterImageUpload.value = '';
            });
        });
    }
});

// Master Görsel Yükleme
document.addEventListener('DOMContentLoaded', function() {
    const masterImageUpload = document.getElementById('master-image-upload');
    if (masterImageUpload) {
        masterImageUpload.addEventListener('change', function(e) {
            const files = e.target.files;
            if (files.length === 0) {
                return;
            }

            const formData = new FormData();
            for (let i = 0; i < files.length; i++) {
                formData.append('images[]', files[i]);
            }

            const progressDiv = document.getElementById('upload-progress');
            const mediaGrid = document.getElementById('media-grid');
            const mediaCount = document.getElementById('media-count');

            // Progress göster
            if (progressDiv) {
                progressDiv.classList.remove('hidden');
            }

            // AJAX ile yükle
            fetch('{{ route("admin.products.upload-master-image", $product) }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                },
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (progressDiv) {
                    progressDiv.classList.add('hidden');
                }

                if (data.success) {
                    // Başarı mesajı göster
                    showMessage('success', data.message);

                    // Yeni görselleri ekle
                    if (data.media && data.media.length > 0) {
                        if (!mediaGrid) {
                            // Eğer media grid yoksa oluştur
                            const container = document.querySelector('.bg-white.dark\\:bg-gray-800.shadow-sm');
                            if (container) {
                                const newGrid = document.createElement('div');
                                newGrid.id = 'media-grid';
                                newGrid.className = 'grid grid-cols-2 md:grid-cols-4 gap-4';
                                container.querySelector('.px-4').appendChild(newGrid);
                                mediaGrid = newGrid;
                            }
                        }

                        data.media.forEach(media => {
                            const mediaDiv = document.createElement('div');
                            mediaDiv.className = 'relative';
                            mediaDiv.setAttribute('data-media-id', media.id);
                            mediaDiv.innerHTML = `
                                <img src="${media.url}" 
                                     alt="Yeni Görsel" 
                                     class="w-full h-48 object-cover rounded-md border border-gray-200 dark:border-gray-700"
                                     onerror="this.src='data:image/svg+xml,%3Csvg xmlns=\\'http://www.w3.org/2000/svg\\' width=\\'200\\' height=\\'200\\'%3E%3Crect fill=\\'%23ddd\\' width=\\'200\\' height=\\'200\\'/%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';">
                                <p class="text-xs text-gray-400 dark:text-gray-500 mt-1 text-center break-all">${media.path}</p>
                            `;
                            if (mediaGrid) {
                                mediaGrid.appendChild(mediaDiv);
                            }
                        });

                        // Media count güncelle
                        if (mediaCount) {
                            const currentCount = parseInt(mediaCount.textContent) || 0;
                            mediaCount.textContent = currentCount + data.media.length;
                        }
                    }

                    // Input'u temizle
                    masterImageUpload.value = '';
                } else {
                    showMessage('error', data.message || 'Görsel yükleme başarısız oldu.');
                }

                // Hataları göster
                if (data.errors && data.errors.length > 0) {
                    data.errors.forEach(error => {
                        showMessage('warning', error);
                    });
                }
            })
            .catch(error => {
                if (progressDiv) {
                    progressDiv.classList.add('hidden');
                }
                console.error('Upload error:', error);
                showMessage('error', 'Görsel yükleme sırasında bir hata oluştu.');
                masterImageUpload.value = '';
            });
        });
    }
});
</script>
@endsection