@extends('layouts.app')

@section('title', 'Ürünler')

@php
    use Illuminate\Support\Str;
@endphp

@section('content')
<div class="px-4 sm:px-6 lg:px-8">
    <div class="sm:flex sm:items-center">
        <div class="sm:flex-auto">
            <h1 class="text-3xl font-semibold text-gray-900 dark:text-gray-100">Tüm Ürünler</h1>
            <p class="mt-2 text-sm text-gray-700 dark:text-gray-300">
                Tüm ürünlerin listesi (Master + Site'e bağlı)
            </p>
        </div>
        <div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
            <a href="{{ route('admin.products.create') }}" class="block rounded-md bg-blue-600 dark:bg-blue-500 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-blue-500 dark:hover:bg-blue-600">
                Yeni Ürün Ekle
            </a>
        </div>
    </div>

    <!-- Arama Kutusu -->
    <div class="mt-6 mb-4">
        <form method="GET" action="{{ route('admin.products.index') }}" class="flex items-center gap-3">
            <div class="relative flex-1 max-w-md">
                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                    <i class="fas fa-search text-gray-400 dark:text-gray-500"></i>
                </div>
                <input 
                    type="text" 
                    name="search" 
                    id="search" 
                    value="{{ $search ?? '' }}"
                    placeholder="Ürün adı, SKU veya ID ile ara..." 
                    class="block w-full pl-10 pr-3 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-blue-500 dark:focus:border-blue-400 transition-all duration-200"
                >
            </div>
            <button 
                type="submit" 
                class="inline-flex items-center gap-2 px-4 py-2.5 bg-blue-600 dark:bg-blue-500 hover:bg-blue-700 dark:hover:bg-blue-600 text-white font-semibold rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-offset-2 transition-all duration-200"
            >
                <i class="fas fa-search"></i>
                Ara
            </button>
            @if(isset($search) && $search)
            <a 
                href="{{ route('admin.products.index') }}" 
                class="inline-flex items-center gap-2 px-4 py-2.5 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 font-semibold rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400 focus:ring-offset-2 transition-all duration-200"
            >
                <i class="fas fa-times"></i>
                Temizle
            </a>
            @endif
        </form>
    </div>

    @if(isset($search) && $search)
    <div class="mt-4 mb-4 p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
        <p class="text-sm text-blue-800 dark:text-blue-300">
            <i class="fas fa-info-circle mr-2"></i>
            "<strong>{{ $search }}</strong>" için <strong>{{ $products->count() }}</strong> sonuç bulundu.
        </p>
    </div>
    @endif

    <div class="mt-8">
        <div class="flex flex-wrap items-center gap-3">
            <button type="button" data-tab="general"
                class="tab-trigger inline-flex items-center gap-2 rounded-full border border-indigo-100 dark:border-indigo-900 bg-indigo-50 dark:bg-indigo-900/30 px-4 py-2 text-sm font-semibold text-indigo-700 dark:text-indigo-300 shadow-sm transition focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
                <i class="fas fa-list"></i>
                Genel Bilgiler
            </button>
            <button type="button" data-tab="margin"
                class="tab-trigger inline-flex items-center gap-2 rounded-full border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-4 py-2 text-sm font-semibold text-gray-600 dark:text-gray-400 shadow-sm transition hover:border-indigo-200 dark:hover:border-indigo-800 hover:text-indigo-600 dark:hover:text-indigo-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
                <i class="fas fa-percentage"></i>
                Maliyet &amp; Marj
            </button>
        </div>

        <div class="mt-6 space-y-6">
            <div class="tab-content overflow-hidden shadow ring-1 ring-black ring-opacity-5 dark:ring-gray-700 md:rounded-lg" data-content="general">
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-300 dark:divide-gray-700">
                        <thead class="bg-gray-50 dark:bg-gray-800">
                            <tr>
                                <th class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 dark:text-gray-100 sm:pl-6">Ürün Adı</th>
                                <th class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-100">Site</th>
                                <th class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-100">SKU</th>
                                <th class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-100">Fiyat</th>
                                <th class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-100">Görsel Sayısı</th>
                                <th class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-100">Görsel Durumu</th>
                                <th class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-100">Kategoriler</th>
                                <th class="relative py-3.5 pl-3 pr-4 sm:pr-6"><span class="sr-only">İşlemler</span></th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200 dark:divide-gray-700 bg-white dark:bg-gray-800">
                            @forelse($products as $product)
                            <tr>
                                <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-gray-100 sm:pl-6">
                                    {{ $product->name }}
                                    @if($product->is_master)
                                        <span class="ml-2 px-2 py-0.5 text-xs rounded-full bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-300">Master</span>
                                    @endif
                                </td>
                                <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
                                    @if($product->site)
                                        <a href="{{ route('sites.show', $product->site) }}" class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">
                                            {{ $product->site->name }}
                                        </a>
                                    @else
                                        <span class="text-gray-400 dark:text-gray-500">-</span>
                                    @endif
                                </td>
                                <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
                                    {{ $product->sku ?? '-' }}
                                </td>
                                <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
                                    @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
                                </td>
                                <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
                                    <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>
                                </td>
                                <td class="whitespace-nowrap px-3 py-4 text-sm">
                                    @if($product->media->count() > 0)
                                        @if($product->isAllMediaVerified())
                                            <span class="px-2 py-1 text-xs rounded-full bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300">
                                                <i class="fas fa-check-circle"></i> Hazır
                                            </span>
                                        @else
                                            <span class="px-2 py-1 text-xs rounded-full bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300">
                                                <i class="fas fa-clock"></i> Beklemede
                                            </span>
                                        @endif
                                    @else
                                        <span class="px-2 py-1 text-xs rounded-full bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300">
                                            Görsel Yok
                                        </span>
                                    @endif
                                </td>
                                <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
                                    {{ $product->categories ?? '-' }}
                                </td>
                                <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
                                    <div class="flex items-center justify-end gap-3">
                                        @if($product->isAllMediaVerified() && $product->media->count() > 0)
                                            <button onclick="copyCsv({{ $product->id }})" class="text-green-600 hover:text-green-900" title="CSV Verisini Kopyala">
                                                <i class="fas fa-copy"></i>
                                            </button>
                                            <button onclick="downloadCsv({{ $product->id }}, '{{ Str::slug($product->name) }}')" class="text-blue-600 hover:text-blue-900" title="CSV Dosyasını İndir">
                                                <i class="fas fa-download"></i>
                                            </button>
                                        @endif
                                        <button onclick="openCopyModal({{ $product->id }})" class="text-purple-600 hover:text-purple-900" title="Site'e Kopyala">
                                            <i class="fas fa-copy"></i>
                                        </button>
                                        <a href="{{ route('admin.products.show', $product) }}" class="text-blue-600 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300">Görüntüle</a>
                                        <a href="{{ route('admin.products.edit', $product) }}" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300">Düzenle</a>
                                        <form action="{{ route('admin.products.destroy', $product) }}" method="POST" class="inline" onsubmit="return confirm('Bu ürünü silmek istediğinizden emin misiniz? Bu işlem geri alınamaz.');">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300">Sil</button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="8" class="px-3 py-4 text-center text-sm text-gray-500 dark:text-gray-400">Henüz ürün bulunmuyor.</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="tab-content hidden overflow-hidden shadow ring-1 ring-black ring-opacity-5 dark:ring-gray-700 md:rounded-lg" data-content="margin">
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-300 dark:divide-gray-700">
                        <thead class="bg-gray-50 dark:bg-gray-800">
                            <tr>
                                <th class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 dark:text-gray-100 sm:pl-6">Ürün</th>
                                <th class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-100">Site</th>
                                <th class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-100">Maliyet</th>
                                <th class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-100">Min. Marj (%)</th>
                                <th class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-100">Gerekli Min. Fiyat</th>
                                <th class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-100">Aktif Satış Fiyatı</th>
                                <th class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-100">Gerçekleşen Marj</th>
                                <th class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-100">Durum</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200 dark:divide-gray-700 bg-white dark:bg-gray-800">
                            @forelse($products as $product)
                                @php
                                    $costPrice = $product->costPrice();
                                    $minMarginPercent = $product->minProfitMarginPercent();
                                    $requiredMinPrice = $product->requiredMinSalePrice();
                                    $activePrice = $product->currentSalePrice();
                                    $actualMarginPercent = $product->actualProfitMarginPercent();
                                    $isMarginInsufficient = $product->isMarginBelowMinimum();

                                    if ($requiredMinPrice === null) {
                                        $statusLabel = $costPrice === null ? 'Maliyet Eksik' : 'Veri Eksik';
                                        $statusClass = 'bg-gray-100 text-gray-700';
                                    } elseif ($activePrice === null) {
                                        $statusLabel = 'Fiyat Eksik';
                                        $statusClass = 'bg-gray-100 text-gray-700';
                                    } else {
                                        $statusLabel = $isMarginInsufficient ? 'Marj Yetersiz' : 'Marj Uygun';
                                        $statusClass = $isMarginInsufficient ? 'bg-rose-100 text-rose-700' : 'bg-emerald-100 text-emerald-700';
                                    }
                                @endphp
                                <tr>
                                    <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-gray-100 sm:pl-6">
                                        {{ $product->name }}
                                    </td>
                                    <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
                                        {{ $product->site->name ?? 'Master' }}
                                    </td>
                                    <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-600 dark:text-gray-400">
                                        {{ $costPrice !== null ? number_format((float) $costPrice, 2) . ' €' : '—' }}
                                    </td>
                                    <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-600 dark:text-gray-400">
                                        {{ $minMarginPercent !== null ? number_format((float) $minMarginPercent, 2) . ' %' : '—' }}
                                    </td>
                                    <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-600 dark:text-gray-400">
                                        {{ $requiredMinPrice !== null ? number_format((float) $requiredMinPrice, 2) . ' €' : '—' }}
                                    </td>
                                    <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-600 dark:text-gray-400">
                                        {{ $activePrice !== null ? number_format((float) $activePrice, 2) . ' €' : '—' }}
                                    </td>
                                    <td class="whitespace-nowrap px-3 py-4 text-sm">
                                        @if($actualMarginPercent !== null)
                                            <span class="{{ $isMarginInsufficient ? 'text-rose-600 dark:text-rose-400 font-semibold' : 'text-emerald-600 dark:text-emerald-400 font-semibold' }}">
                                                {{ number_format((float) $actualMarginPercent, 2) }} %
                                            </span>
                                        @else
                                            <span class="text-gray-400 dark:text-gray-500">—</span>
                                        @endif
                                    </td>
                                    <td class="whitespace-nowrap px-3 py-4 text-sm">
                                        <span class="px-2 py-1 text-xs rounded-full {{ $statusClass }} dark:bg-opacity-30">{{ $statusLabel }}</span>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="8" class="px-6 py-12 text-center text-sm text-gray-500 dark:text-gray-400">
                                        <i class="fas fa-info-circle text-gray-300 dark:text-gray-600 text-4xl mb-4"></i>
                                        <p>Henüz ürün bulunmuyor.</p>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </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 py-4 text-center sm:block sm:p-0 relative z-[60]">
        <!-- 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 z-[55]" onclick="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-middle 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-[100] border border-gray-200 dark:border-gray-700 flex flex-col max-h-[90vh]">
            <!-- 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="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" class="flex flex-col h-full">
                @csrf
                <div class="bg-white dark:bg-gray-800 px-6 py-5 overflow-y-auto flex-1">
                    <!-- 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>
                        </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">
                        <label class="flex items-center cursor-pointer">
                            <input 
                                type="checkbox" 
                                name="sync_to_wordpress" 
                                id="sync_to_wordpress" 
                                class="w-4 h-4 text-purple-600 dark:text-purple-500 bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 rounded focus:ring-purple-500 dark:focus:ring-purple-400 focus:ring-2 cursor-pointer"
                            >
                            <span class="ml-3 text-sm font-medium text-gray-700 dark:text-gray-300">
                                <i class="fas fa-wordpress text-blue-600 dark:text-blue-400 mr-1"></i>
                                WordPress'e senkronize et
                            </span>
                        </label>
                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Ürün WordPress'e otomatik olarak gönderilecek</p>
                    </div>

                    <!-- Override Name -->
                    <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-purple-600 dark:text-purple-400 mr-2"></i>
                            Ürün Adı (Opsiyonel)
                        </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-purple-500 dark:focus:ring-purple-400 focus:border-purple-500 dark:focus:border-purple-400 transition-all placeholder-gray-400 dark:placeholder-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">Ürün adını değiştirmek isterseniz buraya yazın</p>
                    </div>

                    <!-- Override SKU -->
                    <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-purple-600 dark:text-purple-400 mr-2"></i>
                            SKU (Opsiyonel)
                        </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-purple-500 dark:focus:ring-purple-400 focus:border-purple-500 dark:focus:border-purple-400 transition-all placeholder-gray-400 dark:placeholder-gray-500" 
                            placeholder="Boş bırakırsanız otomatik SKU oluşturulur"
                        >
                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">SKU'yu değiştirmek isterseniz buraya yazın</p>
                    </div>

                    <!-- Related Products Info -->
                    <div id="relatedProductsInfo" class="mb-5 hidden">
                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-200 mb-2">
                            <i class="fas fa-link text-purple-600 dark:text-purple-400 mr-2"></i>
                            İlişkili Ürünler
                        </label>
                        <div id="relatedProductsList" class="text-sm text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-700/50 p-3 rounded-lg border border-gray-200 dark:border-gray-600"></div>
                    </div>
                </div>

                <!-- Modal Footer - Fixed at bottom -->
                <div class="bg-gray-50 dark:bg-gray-900/50 px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex flex-row-reverse items-center justify-between gap-3 flex-shrink-0">
                    <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="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>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', () => {
    const triggers = Array.from(document.querySelectorAll('.tab-trigger'));
    const contents = Array.from(document.querySelectorAll('.tab-content'));

    if (!triggers.length || !contents.length) {
        return;
    }

    const activateTab = (target) => {
        contents.forEach((content) => {
            content.classList.toggle('hidden', content.dataset.content !== target);
        });

        triggers.forEach((trigger) => {
            const isActive = trigger.dataset.tab === target;
            trigger.classList.toggle('bg-indigo-50', isActive);
            trigger.classList.toggle('border-indigo-100', isActive);
            trigger.classList.toggle('text-indigo-700', isActive);
            trigger.classList.toggle('bg-white', !isActive);
            trigger.classList.toggle('border-gray-200', !isActive);
            trigger.classList.toggle('text-gray-600', !isActive);
        });
    };

    triggers.forEach((trigger) => {
        trigger.addEventListener('click', () => activateTab(trigger.dataset.tab));
    });

    activateTab('general');
});

async function copyCsv(productId) {
    try {
        const response = await fetch(`/admin/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);
                    alert('Otomatik kopyalama başarısız. Lütfen CSV indirme özelliğini kullanı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 dark:bg-green-600 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(`/admin/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 dark:bg-green-600 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);
    }
}

let currentProductId = null;

async function openCopyModal(productId) {
    console.log('openCopyModal called with productId:', productId);
    currentProductId = productId;
    const modal = document.getElementById('copyProductModal');
    const form = document.getElementById('copyProductForm');
    const targetSiteSelect = document.getElementById('target_site_id');
    const relatedProductsInfo = document.getElementById('relatedProductsInfo');
    const relatedProductsList = document.getElementById('relatedProductsList');

    if (!modal) {
        console.error('Modal element not found!');
        alert('Modal elementi bulunamadı. Sayfayı yenileyip tekrar deneyin.');
        return;
    }

    if (!form) {
        console.error('Form element not found!');
        alert('Form elementi bulunamadı. Sayfayı yenileyip tekrar deneyin.');
        return;
    }

    if (!targetSiteSelect) {
        console.error('Target site select not found!');
        alert('Site seçim elementi bulunamadı. Sayfayı yenileyip tekrar deneyin.');
        return;
    }

    console.log('All elements found, opening modal...');

    // Reset form
    form.reset();
    form.action = `/admin/products/${productId}/copy-to-site`;
    targetSiteSelect.innerHTML = '<option value="">Yükleniyor...</option>';
    if (relatedProductsInfo) relatedProductsInfo.classList.add('hidden');

    // Show modal - use display block (same as show.blade.php)
    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';
    
    // Ensure modal content is visible
    const modalContent = modal.querySelector('.relative.inline-block');
    if (modalContent) {
        modalContent.style.setProperty('display', 'inline-block', 'important');
        modalContent.style.setProperty('visibility', 'visible', 'important');
        modalContent.style.setProperty('opacity', '1', 'important');
        modalContent.style.setProperty('z-index', '100', 'important');
        modalContent.style.setProperty('position', 'relative', 'important');
        modalContent.style.setProperty('background-color', window.matchMedia('(prefers-color-scheme: dark)').matches ? '#1f2937' : '#ffffff', 'important');
    }
    
    // Also check the wrapper div
    const modalWrapper = modal.querySelector('.flex.items-center.justify-center');
    if (modalWrapper) {
        modalWrapper.style.setProperty('position', 'relative', 'important');
        modalWrapper.style.setProperty('z-index', '60', 'important');
    }
    
    const computedStyle = window.getComputedStyle(modal);
    const contentComputedStyle = modalContent ? window.getComputedStyle(modalContent) : null;
    console.log('Modal opened:', {
        modal: {
            display: modal.style.display,
            computedDisplay: computedStyle.display,
            visibility: computedStyle.visibility,
            opacity: computedStyle.opacity,
            zIndex: computedStyle.zIndex,
            position: computedStyle.position
        },
        content: contentComputedStyle ? {
            display: contentComputedStyle.display,
            visibility: contentComputedStyle.visibility,
            opacity: contentComputedStyle.opacity,
            zIndex: contentComputedStyle.zIndex,
            position: contentComputedStyle.position
        } : 'not found'
    });

    console.log('Modal opened, fetching data...');

    try {
        // Fetch form data
        const url = `/admin/products/${productId}/copy-form-data`;
        console.log('Fetching from:', url);
        
        const response = await fetch(url, {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
            },
            credentials: 'same-origin'
        });

        console.log('Response status:', response.status);
        console.log('Response ok:', response.ok);

        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }

        const contentType = response.headers.get('content-type');
        console.log('Content-Type:', contentType);
        
        if (!contentType || !contentType.includes('application/json')) {
            const text = await response.text();
            console.error('Non-JSON response:', text.substring(0, 500));
            throw new Error('Sunucudan beklenmeyen yanıt alındı. Lütfen sayfayı yenileyip tekrar deneyin.');
        }

        const data = await response.json();
        console.log('Data received:', data);

        // Clear loading option
        targetSiteSelect.innerHTML = '<option value="">Site Seçin...</option>';

        // Populate sites
        if (data.sites && Array.isArray(data.sites)) {
            data.sites.forEach(site => {
                const option = document.createElement('option');
                option.value = site.id;
                option.textContent = site.name + (site.has_api_secret ? ' ✓' : ' (API Secret yok)');
                if (!site.has_api_secret) {
                    option.disabled = true;
                }
                targetSiteSelect.appendChild(option);
            });
            console.log('Sites populated:', data.sites.length);
        }

        // Show related products if any
        if (data.related_products && Array.isArray(data.related_products) && data.related_products.length > 0) {
            if (relatedProductsInfo) {
                relatedProductsInfo.classList.remove('hidden');
                if (relatedProductsList) {
                    relatedProductsList.innerHTML = data.related_products.map(p => 
                        `<div class="mb-1"><i class="fas fa-link text-gray-400 dark:text-gray-500"></i> ${p.name} (${p.site_name})</div>`
                    ).join('');
                }
            }
        }
        
        console.log('Modal setup complete');
    } catch (error) {
        console.error('Error loading form data:', error);
        targetSiteSelect.innerHTML = '<option value="">Hata: Veriler yüklenemedi</option>';
        showMessage('error', 'Form verileri yüklenirken hata oluştu: ' + error.message);
    }
}

function closeCopyModal() {
    console.log('closeCopyModal called');
    const modal = document.getElementById('copyProductModal');
    if (modal) {
        modal.style.setProperty('display', 'none', 'important');
        modal.style.setProperty('visibility', 'hidden', 'important');
        modal.style.setProperty('opacity', '0', 'important');
        modal.classList.add('hidden');
        document.body.style.overflow = '';
        console.log('Modal closed');
    }
    currentProductId = null;
}

// Handle form submission
document.addEventListener('DOMContentLoaded', function() {
    const copyForm = document.getElementById('copyProductForm');
    if (!copyForm) {
        console.error('copyProductForm not found');
        return;
    }
    
    copyForm.addEventListener('submit', async function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        const submitButton = this.querySelector('button[type="submit"]');
        const originalText = submitButton.textContent;
        
        submitButton.disabled = true;
        submitButton.textContent = 'Kopyalanıyor...';

        try {
            const response = await fetch(this.action, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                },
                credentials: 'same-origin'
            });

            const contentType = response.headers.get('content-type');
            if (response.ok) {
                if (contentType && contentType.includes('application/json')) {
                    const result = await response.json();
                    if (result.success) {
                        showMessage('success', result.message || 'Ürün başarıyla kopyalandı!');
                        closeCopyModal();
                        setTimeout(() => location.reload(), 1000);
                    } else {
                        showMessage('error', result.message || 'Kopyalama başarısız!');
                    }
                } else {
                    const result = await response.text();
                    if (result.includes('success')) {
                        showMessage('success', 'Ürün başarıyla kopyalandı!');
                        closeCopyModal();
                        setTimeout(() => location.reload(), 1000);
                    } else {
                        showMessage('success', 'Kopyalama tamamlandı!');
                        closeCopyModal();
                        setTimeout(() => location.reload(), 1000);
                    }
                }
            } else {
                let errorMsg = 'Kopyalama sırasında hata oluştu.';
                if (contentType && contentType.includes('application/json')) {
                    const error = await response.json();
                    errorMsg = error.message || errorMsg;
                } else {
                    const error = await response.text();
                    errorMsg = error || errorMsg;
                }
                showMessage('error', errorMsg);
            }
        } catch (error) {
            console.error('Error:', error);
            showMessage('error', 'Kopyalama sırasında hata oluştu: ' + error.message);
        } finally {
            submitButton.disabled = false;
            submitButton.textContent = originalText;
        }
    });
});

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