@extends('business.layouts.app')

@section('title', 'Ürün Düzenle - İşletme Paneli')

@push('styles')
    <style>
        .tab-nav { display: flex; gap: 0; border-bottom: 2px solid #e5e7eb; margin-bottom: 0; }
        .tab-nav button { padding: 12px 20px; font-weight: 500; color: #6b7280; background: transparent; border: none; border-bottom: 3px solid transparent; margin-bottom: -2px; cursor: pointer; transition: all 0.2s; }
        .tab-nav button:hover { color: #111827; }
        .tab-nav button.active { color: #2563eb; border-bottom-color: #2563eb; }
        .tab-content { display: none; padding: 24px 0; }
        .tab-content.active { display: block; }
        .image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
        .image-item { position: relative; border: 2px solid #e5e7eb; border-radius: 8px; overflow: hidden; aspect-ratio: 1; background: #f3f4f6; }
        .image-item img { width: 100%; height: 100%; object-fit: cover; }
        .image-item .delete-btn { position: absolute; top: 6px; right: 6px; background: #dc2626; color: white; border: none; border-radius: 50%; width: 28px; height: 28px; min-width: 28px; min-height: 28px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 20; font-size: 12px; }
        .image-item .delete-btn:hover { background: #b91c1c; }
        .image-item .order-badge { position: absolute; top: 6px; left: 6px; background: rgba(37, 99, 235, 0.9); color: white; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; z-index: 10; }
        .image-item .main-badge { position: absolute; bottom: 6px; left: 6px; background: rgba(5, 150, 105, 0.95); color: white; border-radius: 6px; padding: 2px 6px; font-size: 10px; font-weight: 600; z-index: 10; }
        .image-item { cursor: grab; }
        .image-item:active { cursor: grabbing; }
        .image-item.sortable-ghost { opacity: 0.3; border: 2px dashed #2563eb; }
        .image-item.sortable-drag { opacity: 0.9; z-index: 999; }
        .video-item { position: relative; border: 2px solid #e5e7eb; border-radius: 8px; overflow: hidden; aspect-ratio: 1; background: #1f2937; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px; }
        .video-item .video-icon { font-size: 28px; color: #60a5fa; margin-bottom: 6px; }
        .video-item .video-name { font-size: 10px; color: #e5e7eb; text-align: center; word-break: break-all; }
        .video-item .delete-btn { position: absolute; top: 6px; right: 6px; background: #dc2626; color: white; border: none; border-radius: 50%; width: 28px; height: 28px; min-width: 28px; min-height: 28px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 20; font-size: 12px; }
        .video-item .order-badge { position: absolute; top: 6px; left: 6px; background: rgba(37, 99, 235, 0.9); color: white; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; z-index: 10; }
        .video-item { cursor: grab; }
        .video-item:active { cursor: grabbing; }
        .video-item.sortable-ghost { opacity: 0.3; border: 2px dashed #2563eb; }
        .video-item.sortable-drag { opacity: 0.9; z-index: 999; }
        .dropzone { border: 2px dashed #cbd5e0; border-radius: 12px; padding: 24px; text-align: center; background: #f9fafb; cursor: pointer; transition: all 0.2s; }
        .dropzone.dragover { border-color: #2563eb; background: #eff6ff; }
        .video-row { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; margin-bottom: 8px; }
        .video-row .video-row-drag { cursor: grab; color: #9ca3af; }
        .video-row .video-row-type { width: 140px; }
        .video-row .video-row-input { flex: 1; min-width: 0; }
        .video-row .video-row-input input[type="text"], .video-row .video-row-input input[type="file"] { width: 100%; }
        .video-row .video-row-delete { flex-shrink: 0; }
        .dark .video-row { border-color: #374151; background: #1f2937; }
        .dark .tab-nav { border-color: #374151; }
        .dark .tab-nav button { color: #9ca3af; }
        .dark .tab-nav button:hover { color: #f3f4f6; }
        .dark .tab-nav button.active { color: #60a5fa; border-bottom-color: #60a5fa; }
        .dark .image-item { border-color: #374151; background: #1f2937; }
        .dark .dropzone { background: #111827; border-color: #374151; }
        .faq-row { border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; padding: 16px; margin-bottom: 8px; }
        .faq-row .faq-row-drag { cursor: grab; color: #9ca3af; display: flex; align-items: flex-start; padding-top: 10px; }
        .faq-row .faq-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
        .faq-row .faq-row-actions { display: flex; align-items: flex-start; padding-top: 4px; }
        .dark .faq-row { border-color: #374151; background: #1f2937; }
        .faq-row.sortable-ghost { opacity: 0.3; border: 2px dashed #2563eb; }
        .faq-row.sortable-drag { opacity: 0.8; transform: scale(1.02); z-index: 9999; }
    </style>
@endpush

@section('content')
    @php
        $galleryImages = $product->galleryMedia->where('media_type', 'image')->values();
        $galleryVideos = $product->galleryMedia->where('media_type', 'video')->values();
    @endphp
    <div class="mx-auto max-w-screen-2xl p-4 md:p-6 2xl:p-10" id="productEditWrap" x-data="{
    activeTab: 'genel',
    galleryRemove: [],
    galleryVideoRemove: [],
    addRemove(id) { if (!this.galleryRemove.includes(id)) this.galleryRemove.push(id); },
    addVideoRemove(id) { if (!this.galleryVideoRemove.includes(id)) this.galleryVideoRemove.push(id); }
}">
        <div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <div>
                <a href="{{ route('business.products.index') }}" class="text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300">← Ürünlere dön</a>
                <h1 class="mt-2 text-2xl font-bold text-gray-900 dark:text-white">Ürün Düzenle</h1>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ $product->name }}</p>
            </div>
        </div>

        @if(session('success'))
            <div class="mb-4 rounded-lg border-l-4 border-green-500 bg-green-50 p-4 dark:bg-green-500/10">
                <p class="text-sm text-green-700 dark:text-green-300">{{ session('success') }}</p>
            </div>
        @endif

        @if($errors->any())
            <div class="mb-4 rounded-lg border border-red-200 bg-red-50 p-4 dark:border-red-800 dark:bg-red-900/20">
                <ul class="list-disc pl-5 space-y-1 text-sm text-red-700 dark:text-red-300">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03] overflow-hidden">
            <nav class="tab-nav px-6 pt-4">
                <button type="button" class="tab-btn" :class="{ 'active': activeTab === 'kategori' }" @click="activeTab = 'kategori'">
                    <i class="fas fa-tag mr-2"></i>Kategori
                </button>
                <button type="button" class="tab-btn" :class="{ 'active': activeTab === 'genel' }" @click="activeTab = 'genel'">
                    <i class="fas fa-info-circle mr-2"></i>Genel Bilgiler
                </button>
                <button type="button" class="tab-btn" :class="{ 'active': activeTab === 'galeri' }" @click="activeTab = 'galeri'">
                    <i class="fas fa-images mr-2"></i>Galeri
                </button>
                <button type="button" class="tab-btn" :class="{ 'active': activeTab === 'sss' }" @click="activeTab = 'sss'">
                    <i class="fas fa-question-circle mr-2"></i>S.S.S
                </button>
            </nav>

            <form action="{{ route('business.products.update', $product) }}" method="POST" enctype="multipart/form-data" class="px-6 pb-8" id="productEditForm">
                @csrf
                @method('PUT')
                <input type="hidden" name="gallery_order" id="gallery_order" value="">
                <input type="hidden" name="gallery_video_order" id="gallery_video_order" value="">

                <div class="tab-content" :class="{ 'active': activeTab === 'kategori' }">
                    <div class="rounded-xl border border-gray-200 bg-gray-50/50 p-6 dark:border-gray-700 dark:bg-gray-800/50">
                        <h2 class="mb-4 text-lg font-bold dark:text-white">Kategori</h2>
                        <div class="max-w-md">
                            <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">Ürün kategorisi</label>
                            <select name="product_category_id" required class="w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                                @foreach($categories as $cat)
                                    <option value="{{ $cat->id }}" {{ (int) old('product_category_id', $product->product_category_id) === (int) $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>

                <div class="tab-content" :class="{ 'active': activeTab === 'genel' }">
                    <div class="rounded-xl border border-gray-200 bg-gray-50/50 p-6 dark:border-gray-700 dark:bg-gray-800/50">
                        <div class="grid grid-cols-1 gap-5 md:grid-cols-2">
                            <div class="md:col-span-2">
                                <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">Ürün adı <span class="text-red-500">*</span></label>
                                <input type="text" name="name" value="{{ old('name', $product->name) }}" class="w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white" required>
                            </div>
                            <div class="md:col-span-2">
                                <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">Kısa açıklama</label>
                                <textarea name="short_description" rows="2" class="w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white">{{ old('short_description', $product->short_description) }}</textarea>
                            </div>
                            <div class="md:col-span-2">
                                <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">Açıklama</label>
                                <textarea name="description" rows="4" class="w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white">{{ old('description', $product->description) }}</textarea>
                            </div>
                            <div>
                                <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">Satış fiyatı (TL)</label>
                                <input type="number" step="0.01" min="0" name="price_from" id="edit_price_from" value="{{ old('price_from', $product->price_from) }}" class="w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                                <div class="mt-1.5 flex items-center gap-2">
                                    <input type="hidden" name="price_display_from" value="0">
                                    <input type="checkbox" name="price_display_from" value="1" id="edit_price_display_from" {{ old('price_display_from', $product->price_display_from ?? true) ? 'checked' : '' }} class="h-3.5 w-3.5 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                    <label for="edit_price_display_from" class="cursor-pointer text-xs text-gray-600 dark:text-gray-400">"TL'den başlayabilir" olarak göster</label>
                                </div>
                                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Boş = Teklif alınabilir.</p>
                            </div>
                            <div>
                                <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">İndirimsiz fiyat (TL)</label>
                                <input type="number" step="0.01" min="0" name="price_original" id="edit_price_original" value="{{ old('price_original', $product->price_original) }}" class="w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="İndirim yoksa boş">
                                <p id="edit_price_discount_text" class="mt-1 text-sm text-green-600 dark:text-green-400" style="display: none;"></p>
                            </div>
                            <div>
                                <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">Sıra</label>
                                <input type="number" min="0" name="sort_order" value="{{ old('sort_order', $product->sort_order) }}" class="w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                            </div>
                            <div>
                                <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">Durum</label>
                                <select name="is_active" class="w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                                    <option value="1" {{ old('is_active', $product->is_active ? '1' : '0') === '1' ? 'selected' : '' }}>Yayında</option>
                                    <option value="0" {{ old('is_active', $product->is_active ? '1' : '0') === '0' ? 'selected' : '' }}>Taslak</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="tab-content" :class="{ 'active': activeTab === 'galeri' }">
                    <div class="rounded-xl border border-gray-200 bg-gray-50/50 p-6 dark:border-gray-700 dark:bg-gray-800/50">
                        <h2 class="mb-4 text-lg font-bold dark:text-white">Galeri</h2>
                        <p class="mb-6 text-sm text-gray-600 dark:text-gray-400">Görselleri ve videoları ayrı ayrı silebilir, sıralayabilir veya yeni ekleyebilirsiniz.</p>

                        <div class="mb-8">
                            <h3 class="mb-3 text-base font-semibold text-gray-900 dark:text-white"><i class="fas fa-images mr-2 text-blue-600"></i>Görseller</h3>
                            @if($galleryImages->isNotEmpty())
                                <p class="mb-2 text-sm text-gray-600 dark:text-gray-400">Sıralama: 1 numara ana görsel. Sürükleyerek sıralayın.</p>
                                <div class="image-grid mb-4" id="existingGallery">
                                    @foreach($galleryImages as $media)
                                        <div class="image-item" data-id="{{ $media->id }}">
                                            <img src="{{ asset('storage/' . $media->file_path) }}" alt="" draggable="false">
                                            <span class="order-badge">{{ $loop->iteration }}</span>
                                            @if($loop->first)
                                                <span class="main-badge">Ana görsel</span>
                                            @endif
                                            <button type="button" class="delete-btn" title="Kaldır" @click="addRemove({{ $media->id }}); $el.closest('.image-item').classList.add('opacity-50', 'ring-2', 'ring-red-400')">
                                                <i class="fas fa-times" aria-hidden="true"></i>
                                            </button>
                                        </div>
                                    @endforeach
                                </div>
                                <p class="mb-4 text-xs text-gray-500">Kırmızı X ile işaretlenen görseller kaydedildiğinde silinir.</p>
                            @else
                                <p class="mb-4 text-sm text-gray-500">Henüz görsel yok.</p>
                            @endif
                            <div class="dropzone mb-4" id="editGalleryDropzone">
                                <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i>
                                <p class="text-sm text-gray-600 dark:text-gray-400">Yeni görsel eklemek için bu alana sürükleyip bırakın veya tıklayın (JPG, PNG, WEBP — max 5MB)</p>
                            </div>
                            <input type="file" id="editGalleryFileInput" multiple accept="image/jpeg,image/png,image/webp" class="hidden">
                            <input type="file" name="gallery[]" multiple class="hidden" id="editGallerySubmitInput">
                            <div class="gallery-preview-wrap mb-4" id="editNewGalleryWrap" style="display: none;">
                                <p class="mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Yeni eklenen görseller</p>
                                <div class="image-grid" id="editNewGalleryGrid"></div>
                            </div>
                        </div>

                        <div>
                            <h3 class="mb-3 text-base font-semibold text-gray-900 dark:text-white"><i class="fas fa-video mr-2 text-blue-600"></i>Videolar</h3>
                            <p class="mb-2 text-xs text-gray-500 dark:text-gray-400">Sürükleyerek sıralayın. Silmek için satırdaki X’e tıklayın.</p>
                            @if($galleryVideos->isNotEmpty())
                                <div class="mb-4 space-y-2" id="existingVideoGallery">
                                    @foreach($galleryVideos as $media)
                                        @php
                                            $label = $media->isYoutube() ? 'YouTube' : 'Dosya';
                                            $value = $media->isYoutube() ? ('https://youtube.com/watch?v=' . $media->youtube_id) : basename($media->file_path);
                                            $value = strlen($value) > 60 ? substr($value, 0, 57) . '…' : $value;
                                        @endphp
                                        <div class="video-row video-row-existing" data-id="{{ $media->id }}">
                                            <span class="video-row-drag" title="Sürükleyerek sırala"><i class="fas fa-grip-vertical"></i></span>
                                            <span class="video-row-label rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-sm font-medium text-gray-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300" style="width: 140px;">
                                            @if($media->isYoutube())
                                                    <i class="fab fa-youtube text-red-600 mr-1"></i> YouTube
                                                @else
                                                    <i class="fas fa-file-video text-blue-600 mr-1"></i> Dosya
                                                @endif
                                        </span>
                                            <div class="video-row-input flex-1 min-w-0">
                                                <span class="block truncate rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm text-gray-600 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400">{{ $value }}</span>
                                            </div>
                                            <button type="button" class="video-row-delete rounded-lg border border-red-200 bg-white px-3 py-2 text-sm text-red-600 hover:bg-red-50 dark:border-red-800 dark:bg-gray-800 dark:text-red-400 dark:hover:bg-red-900/20" title="Videoyu sil" @click="addVideoRemove({{ $media->id }}); $el.closest('.video-row').classList.add('opacity-50', 'ring-2', 'ring-red-400')">
                                                <i class="fas fa-times"></i>
                                            </button>
                                        </div>
                                    @endforeach
                                </div>
                                <p class="mb-4 text-xs text-gray-500">Kırmızı çerçeve ile işaretlenen videolar kaydedildiğinde silinir.</p>
                            @else
                                <p class="mb-4 text-sm text-gray-500">Henüz video yok.</p>
                            @endif
                            <p class="mb-3 mt-4 text-sm font-medium text-gray-700 dark:text-gray-300">Yeni video ekle</p>
                            <p class="mb-2 text-xs text-gray-500 dark:text-gray-400">Her satırda YouTube linki veya dosya seçin. Sürükleyerek sıralayın.</p>
                            <input type="hidden" name="video_rows_data" id="editVideoRowsData" value="">
                            <input type="file" name="gallery_videos[]" multiple class="hidden" id="editVideoSubmitInput">
                            <div class="mb-3">
                                <button type="button" id="editVideoRowAdd" class="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700">
                                    <i class="fas fa-plus"></i> Satır ekle
                                </button>
                            </div>
                            <div id="editVideoRowsList" class="space-y-2"></div>
                        </div>
                    </div>
                </div>
        </div>

        <div class="tab-content" :class="{ 'active': activeTab === 'sss' }">
            <div class="rounded-xl border border-gray-200 bg-gray-50/50 p-6 dark:border-gray-700 dark:bg-gray-800/50">
                <h2 class="mb-2 text-lg font-bold dark:text-white">Sıkça Sorulan Sorular</h2>
                <p class="mb-6 text-sm text-gray-600 dark:text-gray-400">Ürünle ilgili sık sorulan soruları ve cevaplarını düzenleyin. Sürükleyerek sıralayabilirsiniz.</p>

                <div class="mb-4">
                    <button type="button" id="editFaqRowAdd" class="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700">
                        <i class="fas fa-plus"></i> Soru ekle
                    </button>
                </div>
                <div id="editFaqRowsList" class="space-y-3">
                    @foreach($product->faqs as $faq)
                        <div class="faq-row flex gap-3" data-faq-id="{{ $faq->id }}">
                            <span class="faq-row-drag" title="Sürükleyerek sırala"><i class="fas fa-grip-vertical"></i></span>
                            <div class="faq-row-body">
                                <input type="text" name="faqs[{{ $loop->index }}][question]" class="faq-question w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Soru yazın..." value="{{ old('faqs.' . $loop->index . '.question', $faq->question) }}">
                                <textarea name="faqs[{{ $loop->index }}][answer]" rows="2" class="faq-answer w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Cevap yazın...">{{ old('faqs.' . $loop->index . '.answer', $faq->answer) }}</textarea>
                            </div>
                            <div class="faq-row-actions">
                                <button type="button" class="faq-row-delete rounded-lg border border-red-200 bg-white px-3 py-2 text-sm text-red-600 hover:bg-red-50 dark:border-red-800 dark:bg-gray-800 dark:text-red-400 dark:hover:bg-red-900/20" title="Soruyu sil"><i class="fas fa-times"></i></button>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>

        <div class="mt-6 flex justify-end border-t border-gray-200 pt-6 dark:border-gray-700">
            <button type="submit" class="rounded-lg bg-blue-600 px-6 py-2.5 text-sm font-medium text-white hover:bg-blue-700">
                <i class="fas fa-save mr-2"></i>Güncelle
            </button>
        </div>
        </form>
    </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var form = document.getElementById('productEditForm');
            if (!form) return;

            var existingGallery = document.getElementById('existingGallery');
            if (existingGallery && existingGallery.children.length > 0 && typeof Sortable !== 'undefined') {
                new Sortable(existingGallery, {
                    animation: 150,
                    draggable: '.image-item',
                    filter: '.delete-btn',
                    ghostClass: 'sortable-ghost',
                    dragClass: 'sortable-drag',
                    onEnd: function() {
                        var items = existingGallery.querySelectorAll('.image-item:not(.opacity-50)');
                        items.forEach(function(el, i) {
                            var badge = el.querySelector('.order-badge');
                            if (badge) badge.textContent = i + 1;
                            var mainSpan = el.querySelector('.main-badge');
                            if (mainSpan) mainSpan.remove();
                        });
                        var first = existingGallery.querySelector('.image-item:not(.opacity-50)');
                        if (first) {
                            var span = document.createElement('span');
                            span.className = 'main-badge';
                            span.textContent = 'Ana görsel';
                            first.appendChild(span);
                        }
                    }
                });
            }
            var existingVideoGallery = document.getElementById('existingVideoGallery');
            if (existingVideoGallery && existingVideoGallery.children.length > 0 && typeof Sortable !== 'undefined') {
                new Sortable(existingVideoGallery, {
                    animation: 150,
                    draggable: '.video-row',
                    handle: '.video-row-drag',
                    filter: '.video-row-delete',
                    ghostClass: 'sortable-ghost',
                    dragClass: 'sortable-drag'
                });
            }

            (function editNewGallery() {
                var MAX_SIZE = 5 * 1024 * 1024;
                var editMap = new Map();
                var editIdCounter = 0;
                var editSortable = null;
                var newGrid = document.getElementById('editNewGalleryGrid');
                var newWrap = document.getElementById('editNewGalleryWrap');
                var fileInput = document.getElementById('editGalleryFileInput');
                var dropzone = document.getElementById('editGalleryDropzone');
                if (!newGrid || !fileInput) return;

                function updateEditBadges() {
                    var items = newGrid.querySelectorAll('.image-item');
                    items.forEach(function(el, i) {
                        var badge = el.querySelector('.order-badge');
                        if (badge) badge.textContent = i + 1;
                        var main = el.querySelector('.main-badge');
                        if (main) main.remove();
                    });
                    if (items.length > 0) {
                        var span = document.createElement('span');
                        span.className = 'main-badge';
                        span.textContent = 'Ana görsel';
                        items[0].appendChild(span);
                    }
                    if (newWrap) newWrap.style.display = items.length ? 'block' : 'none';
                    if (!editSortable && items.length > 0 && typeof Sortable !== 'undefined') {
                        editSortable = new Sortable(newGrid, { animation: 150, draggable: '.image-item', filter: '.delete-btn', ghostClass: 'sortable-ghost', dragClass: 'sortable-drag', onEnd: function() { updateEditBadges(); } });
                    }
                }

                function addEditFile(file, url) {
                    var id = 'eg' + (++editIdCounter) + '-' + Date.now();
                    editMap.set(id, { file: file, url: url });
                    var div = document.createElement('div');
                    div.className = 'image-item';
                    div.setAttribute('data-id', id);
                    div.innerHTML = '<img src="" alt="" draggable="false"><span class="order-badge">1</span><button type="button" class="delete-btn" title="Kaldır"><i class="fas fa-times" aria-hidden="true"></i></button>';
                    div.querySelector('img').src = url;
                    newGrid.appendChild(div);
                    updateEditBadges();
                }

                function processEditFiles(fileList) {
                    if (!fileList || !fileList.length) return;
                    var files = Array.from(fileList).filter(function(f) { return f.type && f.type.startsWith('image/'); });
                    files.forEach(function(file) {
                        if (file.size > MAX_SIZE) return;
                        var reader = new FileReader();
                        reader.onload = function(e) { addEditFile(file, e.target.result); };
                        reader.readAsDataURL(file);
                    });
                }

                if (dropzone) {
                    dropzone.addEventListener('click', function(e) { fileInput.click(); });
                    dropzone.addEventListener('dragover', function(e) { e.preventDefault(); e.currentTarget.classList.add('dragover'); });
                    dropzone.addEventListener('dragleave', function(e) { e.currentTarget.classList.remove('dragover'); });
                    dropzone.addEventListener('drop', function(e) { e.preventDefault(); e.currentTarget.classList.remove('dragover'); processEditFiles(e.dataTransfer.files); });
                }
                fileInput.addEventListener('change', function() { processEditFiles(this.files); this.value = ''; });

                newGrid.addEventListener('click', function(e) {
                    var btn = e.target.closest('.delete-btn');
                    if (!btn) return;
                    var item = e.target.closest('.image-item');
                    if (!item) return;
                    var id = item.getAttribute('data-id');
                    if (id) editMap.delete(id);
                    item.remove();
                    updateEditBadges();
                });

                form.addEventListener('submit', function() {
                    var order = Array.from(document.querySelectorAll('#existingGallery .image-item')).filter(function(el) { return !el.classList.contains('opacity-50'); }).map(function(el) { return el.dataset.id; });
                    var orderInput = document.getElementById('gallery_order');
                    if (orderInput) orderInput.value = (order || []).join(',');
                    var videoOrder = [];
                    var existingVideoGallery = document.getElementById('existingVideoGallery');
                    if (existingVideoGallery) {
                        videoOrder = Array.from(existingVideoGallery.querySelectorAll('.video-row')).filter(function(el) { return !el.classList.contains('opacity-50'); }).map(function(el) { return el.dataset.id; });
                    }
                    var videoOrderInput = document.getElementById('gallery_video_order');
                    if (videoOrderInput) videoOrderInput.value = (videoOrder || []).join(',');
                    var wrap = document.getElementById('productEditWrap');
                    if (wrap && window.Alpine) {
                        var data = Alpine.$data(wrap);
                        if (data.galleryRemove && data.galleryRemove.length) {
                            data.galleryRemove.forEach(function(id) {
                                var inp = document.createElement('input');
                                inp.type = 'hidden';
                                inp.name = 'gallery_remove[]';
                                inp.value = id;
                                form.appendChild(inp);
                            });
                        }
                        if (data.galleryVideoRemove && data.galleryVideoRemove.length) {
                            data.galleryVideoRemove.forEach(function(id) {
                                var inp = document.createElement('input');
                                inp.type = 'hidden';
                                inp.name = 'gallery_video_remove[]';
                                inp.value = id;
                                form.appendChild(inp);
                            });
                        }
                    }
                    var newItems = newGrid.querySelectorAll('.image-item');
                    if (newItems.length > 0) {
                        var dt = new DataTransfer();
                        newItems.forEach(function(el) {
                            var rec = editMap.get(el.getAttribute('data-id'));
                            if (rec && rec.file) dt.items.add(rec.file);
                        });
                        var submitInput = document.getElementById('editGallerySubmitInput');
                        if (submitInput) submitInput.files = dt.files;
                    }
                    if (window._buildEditVideoRowsData) window._buildEditVideoRowsData();
                });
            })();

            (function setupEditVideoRows() {
                var videoRowId = 0;
                var videoFileMap = new Map();
                var listEl = document.getElementById('editVideoRowsList');
                var addBtn = document.getElementById('editVideoRowAdd');
                var form = document.getElementById('productEditForm');
                var videoRowsDataInput = document.getElementById('editVideoRowsData');
                var videoSubmitInput = document.getElementById('editVideoSubmitInput');
                if (!listEl || !addBtn || !form) return;

                function addRow() {
                    var id = 'evr' + (++videoRowId) + '-' + Date.now();
                    var row = document.createElement('div');
                    row.className = 'video-row';
                    row.setAttribute('data-row-id', id);
                    row.innerHTML =
                        '<span class="video-row-drag" title="Sürükleyerek sırala"><i class="fas fa-grip-vertical"></i></span>' +
                        '<select class="video-row-type rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white">' +
                        '<option value="youtube">YouTube link</option><option value="file">Dosya yükle</option>' +
                        '</select>' +
                        '<div class="video-row-input">' +
                        '<input type="text" class="youtube-input rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm w-full dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="https://youtube.com/watch?v=... veya youtu.be/..." style="display:block">' +
                        '<input type="file" class="file-input rounded-lg text-sm dark:text-gray-300" accept="video/mp4,video/webm,video/quicktime" style="display:none">' +
                        '</div>' +
                        '<button type="button" class="video-row-delete rounded-lg border border-red-200 bg-white px-3 py-2 text-sm text-red-600 hover:bg-red-50 dark:border-red-800 dark:bg-gray-800 dark:text-red-400 dark:hover:bg-red-900/20" title="Satırı sil"><i class="fas fa-times"></i></button>';
                    listEl.appendChild(row);

                    var typeSelect = row.querySelector('.video-row-type');
                    var youtubeInput = row.querySelector('.youtube-input');
                    var fileInput = row.querySelector('.file-input');
                    function toggleInputs() {
                        var isYoutube = typeSelect.value === 'youtube';
                        youtubeInput.style.display = isYoutube ? 'block' : 'none';
                        fileInput.style.display = isYoutube ? 'none' : 'block';
                        if (!isYoutube) videoFileMap.delete(id);
                    }
                    typeSelect.addEventListener('change', toggleInputs);
                    fileInput.addEventListener('change', function() {
                        if (this.files && this.files[0]) videoFileMap.set(id, this.files[0]);
                    });
                    row.querySelector('.video-row-delete').addEventListener('click', function() {
                        videoFileMap.delete(id);
                        row.remove();
                    });
                }

                addBtn.addEventListener('click', addRow);

                window._buildEditVideoRowsData = function() {
                    var rows = listEl.querySelectorAll('.video-row');
                    var data = [];
                    var dt = new DataTransfer();
                    rows.forEach(function(row) {
                        var id = row.getAttribute('data-row-id');
                        var type = row.querySelector('.video-row-type').value;
                        if (type === 'youtube') {
                            var url = (row.querySelector('.youtube-input').value || '').trim();
                            if (url) data.push({ t: 'youtube', u: url });
                        } else {
                            var file = videoFileMap.get(id);
                            if (file) {
                                data.push({ t: 'file' });
                                dt.items.add(file);
                            }
                        }
                    });
                    if (videoRowsDataInput) videoRowsDataInput.value = JSON.stringify(data);
                    if (videoSubmitInput) videoSubmitInput.files = dt.files;
                };

                if (typeof Sortable !== 'undefined') {
                    new Sortable(listEl, {
                        animation: 150,
                        draggable: '.video-row',
                        handle: '.video-row-drag',
                        ghostClass: 'sortable-ghost',
                        dragClass: 'sortable-drag'
                    });
                }
            })();

            (function setupEditFaqRows() {
                var listEl = document.getElementById('editFaqRowsList');
                var addBtn = document.getElementById('editFaqRowAdd');
                if (!listEl || !addBtn) return;

                function reindexFaqs() {
                    listEl.querySelectorAll('.faq-row').forEach(function(row, i) {
                        var qInput = row.querySelector('.faq-question');
                        var aInput = row.querySelector('.faq-answer');
                        if (qInput) qInput.name = 'faqs[' + i + '][question]';
                        if (aInput) aInput.name = 'faqs[' + i + '][answer]';
                    });
                }

                function addRow(question, answer) {
                    var idx = listEl.querySelectorAll('.faq-row').length;
                    var row = document.createElement('div');
                    row.className = 'faq-row flex gap-3';
                    row.innerHTML =
                        '<span class="faq-row-drag" title="Sürükleyerek sırala"><i class="fas fa-grip-vertical"></i></span>' +
                        '<div class="faq-row-body">' +
                        '<input type="text" name="faqs[' + idx + '][question]" class="faq-question w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Soru yazın..." value="' + (question || '').replace(/"/g, '&quot;') + '">' +
                        '<textarea name="faqs[' + idx + '][answer]" rows="2" class="faq-answer w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Cevap yazın...">' + (answer || '') + '</textarea>' +
                        '</div>' +
                        '<div class="faq-row-actions">' +
                        '<button type="button" class="faq-row-delete rounded-lg border border-red-200 bg-white px-3 py-2 text-sm text-red-600 hover:bg-red-50 dark:border-red-800 dark:bg-gray-800 dark:text-red-400 dark:hover:bg-red-900/20" title="Soruyu sil"><i class="fas fa-times"></i></button>' +
                        '</div>';
                    listEl.appendChild(row);
                    row.querySelector('.faq-row-delete').addEventListener('click', function() { row.remove(); reindexFaqs(); });
                }

                addBtn.addEventListener('click', function() { addRow('', ''); });

                listEl.querySelectorAll('.faq-row-delete').forEach(function(btn) {
                    btn.addEventListener('click', function() {
                        btn.closest('.faq-row').remove();
                        reindexFaqs();
                    });
                });

                if (typeof Sortable !== 'undefined') {
                    new Sortable(listEl, {
                        animation: 150,
                        draggable: '.faq-row',
                        handle: '.faq-row-drag',
                        ghostClass: 'sortable-ghost',
                        dragClass: 'sortable-drag',
                        onEnd: function() { reindexFaqs(); }
                    });
                }
            })();

            document.querySelectorAll('.tab-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
                    this.classList.add('active');
                });
            });

            var editPriceFrom = document.getElementById('edit_price_from');
            var editPriceOriginal = document.getElementById('edit_price_original');
            var editDiscountText = document.getElementById('edit_price_discount_text');
            function updateEditDiscount() {
                if (!editDiscountText || !editPriceFrom || !editPriceOriginal) return;
                var from = parseFloat(editPriceFrom.value);
                var orig = parseFloat(editPriceOriginal.value);
                if (orig > 0 && from >= 0 && orig > from) {
                    var pct = Math.round((1 - from / orig) * 100);
                    editDiscountText.textContent = from + ' TL (' + orig + ' TL\'den %' + pct + ' indirimli)';
                    editDiscountText.style.display = 'block';
                } else { editDiscountText.style.display = 'none'; }
            }
            if (editPriceFrom) editPriceFrom.addEventListener('input', updateEditDiscount);
            if (editPriceOriginal) editPriceOriginal.addEventListener('input', updateEditDiscount);
            updateEditDiscount();
        });
    </script>
@endpush