@extends('business.layouts.app')

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

@push('styles')
    <style>
        .wizard-container { max-width: 1000px; margin: 0 auto; }
        .step-indicator { display: flex; justify-content: space-between; margin-bottom: 40px; position: relative; }
        .step-indicator::before { content: ''; position: absolute; top: 20px; left: 0; right: 0; height: 2px; background: #e5e7eb; z-index: 0; }
        .step { position: relative; z-index: 1; text-align: center; flex: 1; }
        .step-circle { width: 40px; height: 40px; border-radius: 50%; background: white; border: 2px solid #e5e7eb; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; font-weight: 600; transition: all 0.3s; }
        .step.active .step-circle { background: #2563eb; border-color: #2563eb; color: white; }
        .step.completed .step-circle { background: #059669; border-color: #059669; color: white; }
        .step-label { font-size: 12px; color: #6b7280; }
        .step.active .step-label, .step.completed .step-label { color: #111827; font-weight: 500; }
        .step-content { display: none; animation: fadeIn 0.3s; }
        .step-content.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        .type-card { border: 2px solid #e5e7eb; border-radius: 12px; padding: 24px; text-align: center; cursor: pointer; transition: all 0.3s; background: white; }
        .type-card:hover { border-color: #2563eb; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15); }
        .type-card.selected { border-color: #2563eb; background: #eff6ff; }
        .type-card .icon { font-size: 48px; margin-bottom: 12px; color: #2563eb; }
        .dropzone { border: 2px dashed #cbd5e0; border-radius: 12px; padding: 40px; text-align: center; background: #f9fafb; transition: all 0.3s; cursor: pointer; }
        .dropzone.dragover { border-color: #2563eb; background: #eff6ff; }
        .dropzone-icon { font-size: 48px; color: #9ca3af; margin-bottom: 16px; }
        .image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; margin-top: 24px; }
        .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: 8px; right: 8px; background: #dc2626; color: white; border: none; border-radius: 50%; width: 32px; height: 32px; min-width: 32px; min-height: 32px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 20; font-size: 14px; }
        .image-item .delete-btn:hover { background: #b91c1c; }
        .image-item .order-badge { position: absolute; top: 8px; left: 8px; background: rgba(37, 99, 235, 0.9); color: white; border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; z-index: 10; }
        .image-item .main-badge { position: absolute; bottom: 8px; left: 8px; background: rgba(5, 150, 105, 0.95); color: white; border-radius: 6px; padding: 2px 8px; font-size: 11px; font-weight: 600; z-index: 10; }
        .image-item { cursor: grab; transition: all 0.2s; }
        .image-item:active { cursor: grabbing; }
        .image-item.sortable-ghost { opacity: 0.3; border: 3px dashed #2563eb; background: #eff6ff; transform: scale(0.95); }
        .image-item.sortable-drag { opacity: 0.8; transform: scale(1.05); z-index: 9999; }
        .image-item:hover { border-color: #2563eb; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2); }
        .video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; margin-top: 24px; }
        .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: 36px; color: #60a5fa; margin-bottom: 8px; }
        .video-item .video-name { font-size: 11px; color: #e5e7eb; text-align: center; word-break: break-all; }
        .video-item .delete-btn { position: absolute; top: 8px; right: 8px; background: #dc2626; color: white; border: none; border-radius: 50%; width: 32px; height: 32px; min-width: 32px; min-height: 32px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 20; font-size: 14px; }
        .video-item .order-badge { position: absolute; top: 8px; left: 8px; background: rgba(37, 99, 235, 0.9); color: white; border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; z-index: 10; }
        .video-item { cursor: grab; transition: all 0.2s; }
        .video-item:active { cursor: grabbing; }
        .video-item.sortable-ghost { opacity: 0.3; border: 3px dashed #2563eb; }
        .video-item.sortable-drag { opacity: 0.8; transform: scale(1.05); z-index: 9999; }
        .video-item:hover { border-color: #2563eb; }
        .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; }
        .step-footer { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #e5e7eb; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; }
        .dark .step-footer { border-color: #374151; }
        .dark .step-indicator::before { background: #374151; }
        .dark .step-circle { background: #1f2937; border-color: #374151; }
        .dark .type-card { background: #1f2937; border-color: #374151; }
        .dark .type-card.selected { background: #1e3a5f; border-color: #2563eb; }
        .dark .dropzone { background: #111827; border-color: #374151; }
        .dark .dropzone.dragover { background: #1e3a5f; border-color: #2563eb; }
        .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')
    <div class="bg-gray-50 dark:bg-gray-900 min-h-full py-8" x-data="{
    currentStep: 1,
    totalSteps: 4,
    stepError: '',
    selectedCategoryId: {{ old('product_category_id', optional($categories->first())->id) ?? 'null' }},
    validateStep(step) {
        const form = document.getElementById('wizardForm');
        if (!form) return true;
        if (step === 1) return !!this.selectedCategoryId;
        if (step === 2) { const nameEl = form.querySelector('input[name=name]'); return nameEl && nameEl.value.trim().length > 0; }
        return true;
    },
    nextStep() {
        this.stepError = '';
        if (this.currentStep === 1 && !this.validateStep(1)) { this.stepError = 'Lütfen bir kategori seçin.'; return; }
        if (this.currentStep === 2 && !this.validateStep(2)) { this.stepError = 'Ürün adı zorunludur.'; return; }
        if (this.currentStep < this.totalSteps) this.currentStep++;
    },
    prevStep() { this.stepError = ''; if (this.currentStep > 1) this.currentStep--; },
    goToStep(step) {
        this.stepError = '';
        if (step > this.currentStep) {
            for (let s = 1; s < step; s++) {
                if (!this.validateStep(s)) {
                    this.stepError = s === 1 ? 'Önce kategori seçin.' : 'Önce ürün adını girin.';
                    return;
                }
            }
        }
        this.currentStep = step;
    },
    selectCategory(id) { this.selectedCategoryId = id; this.stepError = ''; }
}">
        <div class="wizard-container px-4">
            <div class="mb-8 text-center mt-6">
                <h1 class="mb-2 text-3xl font-bold text-gray-900 dark:text-white">Ürün Ekle</h1>
                <p class="text-gray-600 dark:text-gray-400">Adım adım formu doldurarak ürün ekleyin</p>
            </div>

            @if($categories->isEmpty())
                <div class="rounded-xl border border-amber-200 bg-amber-50 p-6 dark:border-amber-800 dark:bg-amber-900/20">
                    <p class="text-amber-800 dark:text-amber-200">Henüz ürün kategorisi tanımlanmamış. Ürün ekleyebilmek için yönetici tarafından kategori eklenmesi gerekmektedir.</p>
                    <a href="{{ route('business.products.index') }}" class="mt-4 inline-block text-blue-600 hover:underline dark:text-blue-400">← Ürün listesine dön</a>
                </div>
            @else
                @if ($errors->any())
                    <div class="mb-6 rounded-lg border border-red-200 bg-red-50 p-4 dark:border-red-800 dark:bg-red-900/20">
                        <h3 class="text-sm font-medium text-red-800 dark:text-red-200">Formda hatalar var</h3>
                        <ul class="mt-2 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="step-indicator">
                    <div class="step" :class="{ 'active': currentStep === 1, 'completed': currentStep > 1 }" @click="goToStep(1)">
                        <div class="step-circle">1</div>
                        <div class="step-label">Kategori</div>
                    </div>
                    <div class="step" :class="{ 'active': currentStep === 2, 'completed': currentStep > 2 }" @click="goToStep(2)">
                        <div class="step-circle">2</div>
                        <div class="step-label">Genel Bilgiler</div>
                    </div>
                    <div class="step" :class="{ 'active': currentStep === 3, 'completed': currentStep > 3 }" @click="goToStep(3)">
                        <div class="step-circle">3</div>
                        <div class="step-label">Galeri</div>
                    </div>
                    <div class="step" :class="{ 'active': currentStep === 4, 'completed': currentStep > 4 }" @click="goToStep(4)">
                        <div class="step-circle">4</div>
                        <div class="step-label">S.S.S</div>
                    </div>
                </div>

                <form action="{{ route('business.products.store') }}" method="POST" enctype="multipart/form-data" id="wizardForm">
                    @csrf

                    <div class="step-content" :class="{ 'active': currentStep === 1 }">
                        <div class="rounded-xl border border-gray-200 bg-white p-8 shadow-sm dark:border-gray-700 dark:bg-gray-800">
                            <p x-show="stepError" x-text="stepError" class="mb-4 rounded-lg bg-red-50 p-3 text-sm text-red-700 dark:bg-red-900/20 dark:text-red-300"></p>
                            <h2 class="mb-6 text-2xl font-bold dark:text-white">Ürün Kategorisi</h2>
                            <p class="mb-8 text-gray-600 dark:text-gray-400">Ürününüzün kategorisini seçin. <span class="text-red-500">*</span></p>
                            <input type="hidden" name="product_category_id" :value="selectedCategoryId" required>
                            <div class="grid grid-cols-2 gap-6 md:grid-cols-4">
                                @foreach($categories as $cat)
                                    <div class="type-card" :class="{ 'selected': selectedCategoryId == {{ $cat->id }} }" @click="selectCategory({{ $cat->id }})">
                                        <div class="icon"><i class="fas fa-tag"></i></div>
                                        <h3 class="mb-1 text-lg font-semibold dark:text-white">{{ $cat->name }}</h3>
                                    </div>
                                @endforeach
                            </div>
                            <div class="step-footer">
                                <div></div>
                                <button type="button" @click="nextStep()" class="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-5 py-2.5 text-sm font-medium text-white hover:bg-blue-700">
                                    İleri <i class="fas fa-arrow-right"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="step-content" :class="{ 'active': currentStep === 2 }">
                        <div class="rounded-xl border border-gray-200 bg-white p-8 shadow-sm dark:border-gray-700 dark:bg-gray-800">
                            <p x-show="stepError" x-text="stepError" class="mb-4 rounded-lg bg-red-50 p-3 text-sm text-red-700 dark:bg-red-900/20 dark:text-red-300"></p>
                            <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') }}" 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 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20" placeholder="Örn: Gelinlik Bohem" required>
                                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Slug otomatik oluşturulur.</p>
                                </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" placeholder="Kısa tanıtım">{{ old('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" placeholder="Detaylı açıklama">{{ old('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="price_from" value="{{ old('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" placeholder="150">
                                    <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="price_display_from" {{ old('price_display_from', '1') === '1' || old('price_display_from') === null ? 'checked' : '' }} class="h-3.5 w-3.5 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                        <label for="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="price_original" value="{{ old('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="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', 0) }}" 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', '1') == '1' ? 'selected' : '' }}>Yayında</option>
                                        <option value="0" {{ old('is_active') === '0' ? 'selected' : '' }}>Taslak</option>
                                    </select>
                                </div>
                            </div>
                            <div class="step-footer">
                                <button type="button" @click="prevStep()" class="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-5 py-2.5 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-arrow-left"></i> Geri
                                </button>
                                <button type="button" @click="nextStep()" class="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-5 py-2.5 text-sm font-medium text-white hover:bg-blue-700">
                                    İleri <i class="fas fa-arrow-right"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="step-content" :class="{ 'active': currentStep === 3 }" data-step="3">
                        <div class="rounded-xl border border-gray-200 bg-white p-8 shadow-sm dark:border-gray-700 dark:bg-gray-800">
                            <h2 class="mb-2 text-2xl font-bold dark:text-white">Galeri</h2>
                            <p class="mb-6 text-gray-600 dark:text-gray-400">Görselleri ve videoları ayrı ayrı ekleyip sıralayın. Görsel sırasında 1 numara ana görseldir.</p>

                            <div class="mb-8">
                                <h3 class="mb-3 text-lg font-semibold text-gray-900 dark:text-white"><i class="fas fa-images mr-2 text-blue-600"></i>Görsel yükleme</h3>
                                <div class="dropzone" id="galleryDropzone">
                                    <div class="dropzone-icon"><i class="fas fa-cloud-upload-alt"></i></div>
                                    <p class="text-gray-600 dark:text-gray-400 font-medium">Görselleri bu alana sürükleyip bırakın veya tıklayıp seçin</p>
                                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-500">JPG, PNG, WEBP — en fazla 5MB</p>
                                </div>
                                <input type="file" id="galleryFileInput" multiple accept="image/jpeg,image/png,image/webp" class="hidden">
                                <input type="file" name="gallery[]" multiple class="hidden" id="gallerySubmitInput">
                                <div class="mt-4 gallery-preview-wrap" id="galleryPreviewWrap" style="display: none;">
                                    <p class="mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">
                                        <i class="fas fa-sort mr-1"></i> Sürükleyerek sıralayın. 1 numara ana görsel.
                                    </p>
                                    <div class="image-grid" id="productGalleryGrid"></div>
                                    <p class="mt-2 text-sm text-gray-500 dark:text-gray-400" id="galleryCountText"></p>
                                </div>
                            </div>

                            <div>
                                <h3 class="mb-3 text-lg font-semibold text-gray-900 dark:text-white"><i class="fas fa-video mr-2 text-blue-600"></i>Videolar</h3>
                                <p class="mb-3 text-sm text-gray-600 dark:text-gray-400">Her satırda YouTube linki veya dosya seçebilirsiniz. Sürükleyerek sıralayın.</p>
                                <input type="hidden" name="video_rows_data" id="videoRowsData" value="">
                                <input type="file" name="gallery_videos[]" multiple class="hidden" id="videoSubmitInput">
                                <div class="mb-3">
                                    <button type="button" id="videoRowAdd" 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="videoRowsList" class="space-y-2"></div>
                            </div>

                            <div class="step-footer">
                                <button type="button" @click="prevStep()" class="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-5 py-2.5 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-arrow-left"></i> Geri
                                </button>
                                <button type="button" @click="nextStep()" class="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-5 py-2.5 text-sm font-medium text-white hover:bg-blue-700">
                                    İleri <i class="fas fa-arrow-right"></i>
                                </button>
                            </div>
                        </div>
                    </div>

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

                            <div class="mb-4">
                                <button type="button" id="faqRowAdd" 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="faqRowsList" class="space-y-3"></div>

                            <div class="step-footer">
                                <button type="button" @click="prevStep()" class="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-5 py-2.5 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-arrow-left"></i> Geri
                                </button>
                                <button type="submit" class="inline-flex items-center gap-2 rounded-lg bg-green-600 px-6 py-2.5 text-sm font-medium text-white hover:bg-green-700">
                                    <i class="fas fa-upload"></i> Ürünü kaydet
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            @endif
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
    <script>
        (function() {
            var MAX_SIZE = 5 * 1024 * 1024;
            var galleryMap = new Map();
            var idCounter = 0;
            var sortableInstance = null;
            function getGrid() { return document.getElementById('productGalleryGrid'); }
            function getWrap() { return document.getElementById('galleryPreviewWrap'); }
            function getCountText() { return document.getElementById('galleryCountText'); }
            function updateBadges() {
                var grid = getGrid();
                if (!grid) return;
                var items = grid.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);
                }
                var wrap = getWrap();
                var countEl = getCountText();
                if (wrap) wrap.style.display = items.length ? 'block' : 'none';
                if (countEl) countEl.textContent = 'Toplam ' + items.length + ' görsel';
            }
            function initSortableOnce() {
                var grid = getGrid();
                if (!grid || sortableInstance || typeof Sortable === 'undefined') return;
                sortableInstance = new Sortable(grid, { animation: 150, draggable: '.image-item', filter: '.delete-btn', ghostClass: 'sortable-ghost', dragClass: 'sortable-drag', onEnd: function() { updateBadges(); } });
            }
            function addFile(file, url) {
                var id = 'g' + (++idCounter) + '-' + Date.now();
                galleryMap.set(id, { file: file, url: url });
                var grid = getGrid();
                if (!grid) return;
                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;
                grid.appendChild(div);
                updateBadges();
                initSortableOnce();
            }
            function processFiles(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) { addFile(file, e.target.result); };
                    reader.readAsDataURL(file);
                });
            }
            function setupGallery() {
                var dropzone = document.getElementById('galleryDropzone');
                var fileInput = document.getElementById('galleryFileInput');
                var grid = getGrid();
                var form = document.getElementById('wizardForm');
                var submitInput = document.getElementById('gallerySubmitInput');
                if (!dropzone || !fileInput || !grid || !form) return;
                dropzone.addEventListener('click', function(e) { if (!e.target.closest('.delete-btn')) 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'); processFiles(e.dataTransfer.files); });
                fileInput.addEventListener('change', function() { processFiles(this.files); this.value = ''; });
                grid.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) galleryMap.delete(id);
                    item.remove();
                    updateBadges();
                });
                form.addEventListener('submit', function() {
                    var items = grid.querySelectorAll('.image-item');
                    if (items.length === 0) return;
                    var dt = new DataTransfer();
                    items.forEach(function(el) {
                        var id = el.getAttribute('data-id');
                        var rec = galleryMap.get(id);
                        if (rec && rec.file) dt.items.add(rec.file);
                    });
                    if (submitInput) submitInput.files = dt.files;
                    if (window._buildVideoRowsData) window._buildVideoRowsData();
                });
            }

            (function setupVideoRows() {
                var videoRowId = 0;
                var videoFileMap = new Map();
                var listEl = document.getElementById('videoRowsList');
                var addBtn = document.getElementById('videoRowAdd');
                var form = document.getElementById('wizardForm');
                var videoRowsDataInput = document.getElementById('videoRowsData');
                var videoSubmitInput = document.getElementById('videoSubmitInput');
                if (!listEl || !addBtn || !form) return;

                function addRow() {
                    var id = 'vr' + (++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._buildVideoRowsData = 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 setupFaqRows() {
                var faqRowId = 0;
                var listEl = document.getElementById('faqRowsList');
                var addBtn = document.getElementById('faqRowAdd');
                if (!listEl || !addBtn) return;

                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(); });
                }

                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]';
                    });
                }

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

                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.addEventListener('DOMContentLoaded', function() {
                setupGallery();
                var priceFrom = document.getElementById('price_from');
                var priceOriginal = document.getElementById('price_original');
                var discountText = document.getElementById('price_discount_text');
                function updateDiscount() {
                    if (!discountText || !priceFrom || !priceOriginal) return;
                    var from = parseFloat(priceFrom.value);
                    var orig = parseFloat(priceOriginal.value);
                    if (orig > 0 && from >= 0 && orig > from) {
                        var pct = Math.round((1 - from / orig) * 100);
                        discountText.textContent = from + ' TL (' + orig + ' TL\'den %' + pct + ' indirimli)';
                        discountText.style.display = 'block';
                    } else { discountText.style.display = 'none'; }
                }
                if (priceFrom) priceFrom.addEventListener('input', updateDiscount);
                if (priceOriginal) priceOriginal.addEventListener('input', updateDiscount);
            });
        })();
    </script>
@endpush