@extends('admin.layouts.layout')
@section('title')محصول جدید@endsection

@section('customhead')
<link rel="stylesheet" href="{{ url('theme/admin') }}/vendor/libs/quill/editor.css" />
<link rel="stylesheet" href="{{ url('theme/admin') }}/vendor/libs/quill/typography.css" />
@endsection

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">

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

        <div class="d-flex align-items-center justify-content-between mb-4 flex-wrap gap-2">
            <div class="d-flex align-items-center gap-2">
                <a href="{{ route('admin.products.index') }}" class="btn btn-outline-secondary btn-sm">
                    <i class="ti ti-arrow-right ti-xs"></i>
                </a>
                <h4 class="mb-0">محصول جدید</h4>
            </div>
            <div class="d-flex align-items-center gap-2">
                <button type="button" class="btn btn-info" id="aiProductGenBtn">
                    <i class="ti ti-sparkles me-1"></i> تولید محتوا توسط هوش مصنوعی
                </button>
                <button type="submit" class="btn btn-primary">
                    <i class="ti ti-device-floppy me-1"></i> ذخیره محصول
                </button>
            </div>
        </div>

        @if($errors->any())
            @foreach($errors->all() as $error)
                <div class="alert alert-danger alert-dismissible mb-3">
                    {{ $error }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endforeach
        @endif

        <div class="row g-4">

            {{-- ==================== ستون اصلی ==================== --}}
            <div class="col-lg-8">

                {{-- اطلاعات اصلی --}}
                <div class="card mb-4">
                    <div class="card-header"><h5 class="mb-0">اطلاعات اصلی</h5></div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">عنوان محصول <span class="text-danger">*</span></label>
                                <input type="text" name="title" id="product-title" class="form-control"
                                       value="{{ old('title') }}" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">عنوان انگلیسی</label>
                                <input type="text" name="title_en" id="product-title-en" class="form-control" dir="ltr"
                                       value="{{ old('title_en') }}" placeholder="Product English Title">
                            </div>
                            <div class="col-md-8">
                                <label class="form-label">Slug</label>
                                <input type="text" name="slug" id="product-slug" class="form-control" dir="ltr"
                                       value="{{ old('slug') }}" placeholder="auto-generated-from-title">
                                <div class="form-text">خالی بگذارید تا خودکار از عنوان ساخته شود</div>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">گارانتی</label>
                                <input type="text" name="warranty" class="form-control"
                                       value="{{ old('warranty') }}" placeholder="مثال: ۱۸ ماه گارانتی">
                            </div>
                        </div>
                    </div>
                </div>

                {{-- ویژگی‌های محصول (متغیر) --}}
                <div id="attrs-card" class="card mb-4">
                    <div class="card-header d-flex align-items-center justify-content-between">
                        <h5 class="mb-0">ویژگی‌های محصول</h5>
                        <button type="button" id="add-attr-btn" class="btn btn-outline-secondary btn-sm">
                            <i class="ti ti-plus me-1"></i> افزودن ویژگی
                        </button>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-bordered align-middle mb-0 attrs-table">
                                <thead class="table-light">
                                    <tr>
                                        <th class="attr-col-name">نام ویژگی</th>
                                        <th>مقادیر <small class="text-muted fw-normal">(با | جدا کنید)</small></th>
                                        <th class="attr-col-specs text-center">نمایش در صفحه</th>
                                        <th class="attr-col-actions"></th>
                                    </tr>
                                </thead>
                                <tbody id="attrs-tbody">
                                    <tr id="attrs-empty-row">
                                        <td colspan="4" class="text-center text-muted small py-3">
                                            <i class="ti ti-tags me-1"></i>
                                            هنوز ویژگی‌ای تعریف نشده. با دکمه «افزودن ویژگی» شروع کنید.
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                {{-- نوع محصول --}}
                <div class="card mb-4">
                    <div class="card-header"><h5 class="mb-0">نوع محصول و موجودی</h5></div>
                    <div class="card-body">
                        <div class="product-type-selector mb-4">
                            <label class="product-type-option">
                                <input type="radio" name="type" value="simple"
                                       {{ old('type', 'simple') === 'simple' ? 'checked' : '' }}>
                                <div class="product-type-card">
                                    <i class="ti ti-box fs-4"></i>
                                    <span>ساده</span>
                                </div>
                            </label>
                            <label class="product-type-option">
                                <input type="radio" name="type" value="variable"
                                       {{ old('type') === 'variable' ? 'checked' : '' }}>
                                <div class="product-type-card">
                                    <i class="ti ti-layers-intersect fs-4"></i>
                                    <span>متغیر</span>
                                </div>
                            </label>
                        </div>

                        {{-- محصول ساده --}}
                        <div id="simple-fields" class="{{ old('type') === 'variable' ? 'd-none' : '' }}">
                            <div class="row g-3">
                                <div class="col-6 col-md-3">
                                    <label class="form-label">قیمت (تومان)</label>
                                    <input type="number" name="simple_price" class="form-control" dir="ltr"
                                           min="0" step="1" value="{{ old('simple_price') }}">
                                </div>
                                <div class="col-6 col-md-3">
                                    <label class="form-label">قیمت با تخفیف</label>
                                    <input type="number" name="simple_discount_price" class="form-control" dir="ltr"
                                           min="0" step="1" value="{{ old('simple_discount_price') }}">
                                </div>
                                <div class="col-6 col-md-3">
                                    <label class="form-label">موجودی</label>
                                    <input type="number" name="simple_stock" class="form-control" dir="ltr"
                                           min="0" value="{{ old('simple_stock', 0) }}">
                                </div>
                                <div class="col-6 col-md-3">
                                    <label class="form-label">وزن (گرم)</label>
                                    <input type="number" name="simple_weight" class="form-control" dir="ltr"
                                           min="0" value="{{ old('simple_weight') }}">
                                </div>
                                <div class="col-4">
                                    <label class="form-label">طول (سانتیمتر)</label>
                                    <input type="number" name="simple_length" class="form-control" dir="ltr"
                                           min="0" value="{{ old('simple_length') }}">
                                </div>
                                <div class="col-4">
                                    <label class="form-label">عرض (سانتیمتر)</label>
                                    <input type="number" name="simple_width" class="form-control" dir="ltr"
                                           min="0" value="{{ old('simple_width') }}">
                                </div>
                                <div class="col-4">
                                    <label class="form-label">ارتفاع (سانتیمتر)</label>
                                    <input type="number" name="simple_height" class="form-control" dir="ltr"
                                           min="0" value="{{ old('simple_height') }}">
                                </div>
                            </div>
                        </div>

                        {{-- محصول متغیر --}}
                        <div id="variable-fields" class="{{ old('type') !== 'variable' ? 'd-none' : '' }}">

                            <div>
                                <div class="d-flex align-items-center gap-2 mb-3 flex-wrap">
                                    <span class="fw-semibold">متغیرها</span>
                                    <select id="attr-selector" class="form-select form-select-sm attr-selector-select">
                                        <option value="">انتخاب ویژگی برای تولید خودکار...</option>
                                    </select>
                                    <button type="button" id="generate-variants-btn" class="btn btn-primary btn-sm text-nowrap">
                                        <i class="ti ti-wand me-1"></i> تولید متغیرها
                                    </button>
                                </div>
                                <div class="table-responsive">
                                    <table class="table table-bordered align-middle mb-2 variants-table">
                                        <thead class="table-light">
                                            <tr>
                                                <th>مقدار متغیر</th>
                                                <th>تصویر</th>
                                                <th>رنگ</th>
                                                <th>قیمت (ت)</th>
                                                <th>تخفیف (ت)</th>
                                                <th>موجودی</th>
                                                <th>وزن (گ)</th>
                                                <th>ابعاد ط×ع×ا</th>
                                                <th class="text-center">فعال</th>
                                                <th class="text-center">پیشفرض</th>
                                                <th></th>
                                            </tr>
                                        </thead>
                                        <tbody id="variants-tbody">
                                            <tr id="variants-empty-row">
                                                <td colspan="11" class="text-center text-muted small py-3">
                                                    ابتدا ویژگی تعریف کنید، سپس «تولید متغیرها» را بزنید.
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <button type="button" id="add-variant" class="btn btn-outline-secondary btn-sm">
                                    <i class="ti ti-plus me-1"></i> افزودن ردیف دستی
                                </button>
                            </div>

                        </div>
                    </div>
                </div>

                {{-- توضیحات --}}
                <div class="card mb-4">
                    <div class="card-header"><h5 class="mb-0">توضیحات محصول</h5></div>
                    <div class="card-body">
                        <div id="description-editor" class="quill-editor-wrap" dir="rtl"></div>
                        <input type="hidden" name="description" id="description-input">
                    </div>
                </div>

                {{-- ویژگی‌های اصلی --}}
                <div class="card mb-4">
                    <div class="card-header"><h5 class="mb-0">ویژگی‌های اصلی</h5></div>
                    <div class="card-body">
                        <div id="features-editor" class="quill-editor-wrap" dir="rtl"></div>
                        <input type="hidden" name="features" id="features-input">
                    </div>
                </div>

                {{-- گالری --}}
                <div class="card mb-4">
                    <div class="card-header"><h5 class="mb-0">گالری تصاویر</h5></div>
                    <div class="card-body">
                        <div id="gallery-container" class="row g-3 mb-3"></div>
                        <button type="button" id="add-gallery-btn" class="btn btn-outline-secondary btn-sm">
                            <i class="ti ti-photo-plus me-1"></i> افزودن تصویر
                        </button>
                        <p class="text-muted small mt-2 mb-0">
                            برای تغییر ترتیب، تصاویر را بکشید. Alt هر تصویر برای سئو مهم است.
                        </p>
                    </div>
                </div>

                {{-- سئو --}}
                <div class="card mb-4">
                    <div class="card-header"><h5 class="mb-0">سئو و متادیتا</h5></div>
                    <div class="card-body row g-3">
                        <div class="col-12">
                            <label class="form-label">عنوان سئو <small class="text-muted">(Title Tag)</small></label>
                            <input type="text" name="seo_title" id="product-seo-title" class="form-control"
                                   value="{{ old('seo_title') }}" maxlength="255">
                            <div class="form-text">پیشنهاد: ۵۰–۶۰ کاراکتر</div>
                        </div>
                        <div class="col-12">
                            <label class="form-label">توضیحات متا <small class="text-muted">(Meta Description)</small></label>
                            <textarea name="seo_description" id="product-seo-description" class="form-control" rows="3"
                                      maxlength="500">{{ old('seo_description') }}</textarea>
                            <div class="form-text">پیشنهاد: ۱۵۰–۱۶۰ کاراکتر</div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">کلمات کلیدی <small class="text-muted">(Meta Keywords)</small></label>
                            <input type="text" name="seo_keywords" id="product-seo-keywords" class="form-control"
                                   value="{{ old('seo_keywords') }}" placeholder="کلمه۱، کلمه۲، کلمه۳">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">تگ‌های محصول</label>
                            <input type="text" name="tags" id="product-tags" class="form-control"
                                   value="{{ old('tags') }}" placeholder="با کاما جدا کنید">
                        </div>
                        <div class="col-12">
                            <div class="d-flex align-items-center justify-content-between mb-1">
                                <label class="form-label mb-0">
                                    Schema.org JSON-LD
                                    <small class="text-muted">— داده ساختاریافته برای موتورهای جستجو</small>
                                </label>
                                <button type="button" id="schema-fill-btn" class="btn btn-outline-secondary btn-sm">
                                    <i class="ti ti-wand me-1"></i> تولید خودکار
                                </button>
                            </div>
                            <textarea name="seo_schema" id="seo-schema" class="seo-schema-textarea form-control"
                                      dir="ltr" rows="10">{{ old('seo_schema') }}</textarea>
                        </div>
                    </div>
                </div>

            </div>

            {{-- ==================== ستون جانبی ==================== --}}
            <div class="col-lg-4">

                {{-- انتشار --}}
                <div class="card mb-4">
                    <div class="card-header"><h5 class="mb-0">انتشار</h5></div>
                    <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between mb-3">
                            <label class="form-label mb-0">وضعیت</label>
                            <div class="form-check form-switch mb-0">
                                <input class="form-check-input" type="checkbox" name="is_active"
                                       value="1" id="is-active-switch" checked>
                                <label class="form-check-label" for="is-active-switch">فعال</label>
                            </div>
                        </div>

                        <hr class="my-3">

                        <div class="mb-2">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="is_amazing_special"
                                       value="1" id="is-amazing-switch"
                                       {{ old('is_amazing_special') ? 'checked' : '' }}
                                       onchange="document.getElementById('amazing-date-wrap').style.display=this.checked?'block':'none'">
                                <label class="form-check-label fw-semibold" for="is-amazing-switch">
                                    <i class="ti ti-bolt me-1 text-warning"></i>محصول شگفت‌انگیز ویژه
                                </label>
                            </div>
                            <div class="text-muted small mt-1 me-4">در اسلایدر پیشنهاد ویژه صفحه اصلی نمایش داده می‌شود</div>
                        </div>

                        <div id="amazing-date-wrap" class="mb-3" style="display:{{ old('is_amazing_special') ? 'block' : 'none' }}">
                            <label class="form-label form-label-sm mb-1">تاریخ پایان پیشنهاد</label>
                            <input type="datetime-local" class="form-control form-control-sm"
                                   name="special_offer_ends_at"
                                   value="{{ old('special_offer_ends_at') }}" dir="ltr">
                            <div class="form-text">اختیاری — برای نمایش تایمر شمارش معکوس</div>
                        </div>

                        <div class="mb-2">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="is_amazing_offer"
                                       value="1" id="is-amazing-offer-switch"
                                       {{ old('is_amazing_offer') ? 'checked' : '' }}>
                                <label class="form-check-label fw-semibold" for="is-amazing-offer-switch">
                                    <i class="ti ti-stars me-1 text-warning"></i>پیشنهاد شگفت‌انگیز
                                </label>
                            </div>
                            <div class="text-muted small mt-1 me-4">در بخش پیشنهادات شگفت‌انگیز صفحه اصلی نمایش داده می‌شود</div>
                        </div>

                        <hr class="my-3">

                        <div class="mb-3">
                            <label class="form-label mb-1" for="sales-input">
                                <i class="ti ti-shopping-bag me-1 text-success"></i>تعداد فروش
                            </label>
                            <input type="number" class="form-control" id="sales-input"
                                   name="sales" min="0" value="{{ old('sales', 0) }}" dir="ltr">
                            <div class="form-text">می‌توانید تعداد فروش را دستی تنظیم کنید</div>
                        </div>

                        <button type="submit" class="btn btn-primary w-100">
                            <i class="ti ti-device-floppy me-1"></i> ذخیره محصول
                        </button>
                        <a href="{{ route('admin.products.index') }}" class="btn btn-outline-secondary w-100 mt-2">
                            انصراف
                        </a>
                    </div>
                </div>

                {{-- نوع بسته‌بندی --}}
                <div class="card mb-4">
                    <div class="card-header"><h5 class="mb-0">نوع بسته‌بندی <span class="text-danger">*</span></h5></div>
                    <div class="card-body">
                        <select name="package_type" class="form-select @error('package_type') is-invalid @enderror" required>
                            <option value="">— انتخاب کنید —</option>
                            @foreach($packageTypes as $id => $label)
                                <option value="{{ $id }}" {{ old('package_type') == $id ? 'selected' : '' }}>
                                    {{ $label }}
                                </option>
                            @endforeach
                        </select>
                        @error('package_type')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                {{-- نوع مرسوله --}}
                <div class="card mb-4">
                    <div class="card-header"><h5 class="mb-0">نوع مرسوله <span class="text-danger">*</span></h5></div>
                    <div class="card-body">
                        @php $productTypes = [1=>'پوشاک',2=>'مواد غذایی',3=>'لوازم خانگی',4=>'صنایع دستی',5=>'عطاری',6=>'آرایشی و بهداشتی',7=>'فرهنگی، آموزشی و سرگرمی',8=>'ورزش و سفر',9=>'موبایل و لوازم جانبی',10=>'ابزار آلات',11=>'الکترونیک',12=>'زیورآلات']; @endphp
                        <select name="amadast_product_type_id" class="form-select @error('amadast_product_type_id') is-invalid @enderror" required>
                            @foreach($productTypes as $id => $label)
                                <option value="{{ $id }}" {{ old('amadast_product_type_id', 1) == $id ? 'selected' : '' }}>{{ $label }}</option>
                            @endforeach
                        </select>
                        @error('amadast_product_type_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                {{-- برند --}}
                <div class="card mb-4">
                    <div class="card-header"><h5 class="mb-0">برند</h5></div>
                    <div class="card-body">
                        <select name="brand_id" id="brand-select" class="form-select mb-3">
                            <option value="">— بدون برند —</option>
                            @foreach($brands as $brand)
                                <option value="{{ $brand->id }}"
                                    {{ old('brand_id') == $brand->id ? 'selected' : '' }}>
                                    {{ $brand->name }}
                                </option>
                            @endforeach
                        </select>
                        <div class="input-group input-group-sm mb-2">
                            <input type="text" id="new-brand-name" class="form-control" placeholder="نام برند جدید...">
                            <button type="button" id="add-brand-btn" class="btn btn-outline-primary">افزودن</button>
                        </div>
                        <input type="file" id="new-brand-image" class="form-control form-control-sm" accept="image/*">
                        <small class="text-muted">اختیاری — تصویر لوگو برند (حداکثر ۲MB)</small>
                        <div id="brand-error"   class="text-danger small mt-1 d-none"></div>
                        <div id="brand-success" class="text-success small mt-1 d-none"></div>
                    </div>
                </div>

                {{-- دسته‌بندی‌ها --}}
                <div class="card mb-4">
                    <div class="card-header"><h5 class="mb-0">دسته‌بندی‌ها</h5></div>
                    <div class="card-body cat-checkbox-scroll">
                        @if($categories->isNotEmpty())
                            @include('admin.products._category-checkboxes', [
                                'items'    => $categories,
                                'selected' => [],
                            ])
                        @else
                            <p class="text-muted small mb-0">هیچ دسته‌بندی‌ای وجود ندارد.</p>
                        @endif
                    </div>
                </div>

                @include('admin.products._similar-products', [
                    'selectedSimilar'  => $selectedSimilar,
                    'excludeProductId' => null,
                ])

                {{-- تصویر شاخص --}}
                <div class="card mb-4">
                    <div class="card-header"><h5 class="mb-0">تصویر شاخص</h5></div>
                    <div class="card-body">
                        <div id="featured-preview-wrap" class="featured-preview-wrap mb-3">
                            <img id="featured-preview" src="" alt="" class="featured-preview-img rounded">
                        </div>
                        <label class="form-label">انتخاب تصویر</label>
                        <input type="file" name="featured_image" id="featured-image-input"
                               accept="image/*" class="form-control mb-2">
                        <label class="form-label">Alt تصویر <small class="text-muted">(سئو)</small></label>
                        <input type="text" name="featured_image_alt" class="form-control form-control-sm"
                               placeholder="توضیح کوتاه تصویر برای موتورهای جستجو"
                               value="{{ old('featured_image_alt') }}">
                    </div>
                </div>

            </div>
        </div>
    </form>

</div>
@endsection

@section('customjs')
<style>
    .ai-progress-wrap { text-align: right; direction: rtl; }
    .ai-progress-meta { display:flex; justify-content:space-between; align-items:center; gap:.75rem; margin-bottom:.5rem; font-size:.9rem; }
    .ai-progress-bar { height: .85rem; border-radius: 999px; overflow: hidden; background: rgba(115,103,240,.12); }
    .ai-progress-bar > span {
        display:block; height:100%; width:0%;
        background: linear-gradient(90deg, #7367f0, #00cfe8);
        transition: width .35s ease;
    }
    .ai-stage-list { list-style:none; padding:0; margin:1rem 0 0; text-align:right; }
    .ai-stage-list li {
        display:flex; align-items:center; gap:.5rem;
        padding:.35rem 0; font-size:.875rem; color:#6f6b7d;
    }
    .ai-stage-list li .ai-dot {
        width:.7rem; height:.7rem; border-radius:50%;
        background:#d9d9e3; flex:0 0 auto;
    }
    .ai-stage-list li.is-done { color:#28c76f; }
    .ai-stage-list li.is-done .ai-dot { background:#28c76f; }
    .ai-stage-list li.is-current { color:#7367f0; font-weight:600; }
    .ai-stage-list li.is-current .ai-dot {
        background:#7367f0;
        box-shadow: 0 0 0 3px rgba(115,103,240,.2);
        animation: aiPulse 1.2s ease-in-out infinite;
    }
    @keyframes aiPulse {
        0%, 100% { box-shadow: 0 0 0 3px rgba(115,103,240,.15); }
        50% { box-shadow: 0 0 0 6px rgba(115,103,240,.08); }
    }
</style>
<script src="{{ url('theme/admin') }}/vendor/libs/quill/quill.js"></script>
<script src="{{ url('theme/admin') }}/vendor/libs/sortablejs/sortable.js"></script>
<script>
(function () {
    var csrfToken = '{{ csrf_token() }}';

    /* ---- Slug auto-generate ---- */
    document.getElementById('product-title').addEventListener('input', function () {
        var slugField = document.getElementById('product-slug');
        if (!slugField._touched) {
            slugField.value = this.value.trim().replace(/\s+/g, '-');
        }
    });
    document.getElementById('product-slug').addEventListener('input', function () {
        this._touched = this.value.length > 0;
    });

    /* ---- Quill editors ---- */
    var toolbarOptions = [
        [{ header: [1, 2, 3, 4, false] }],
        ['bold', 'italic', 'underline', 'strike'],
        [{ color: [] }, { background: [] }],
        ['blockquote'],
        [{ list: 'ordered' }, { list: 'bullet' }],
        [{ align: [] }, { direction: 'rtl' }],
        ['link'],
        ['clean']
    ];

    var descEditor = new Quill('#description-editor', {
        theme: 'snow',
        placeholder: 'توضیحات کامل محصول را اینجا وارد کنید...',
        modules: { toolbar: toolbarOptions }
    });
    var featEditor = new Quill('#features-editor', {
        theme: 'snow',
        placeholder: 'ویژگی‌های اصلی محصول...',
        modules: { toolbar: toolbarOptions }
    });

    descEditor.format('direction', 'rtl');
    descEditor.format('align', 'right');
    featEditor.format('direction', 'rtl');
    featEditor.format('align', 'right');

    document.getElementById('product-form').addEventListener('submit', function () {
        document.getElementById('description-input').value = descEditor.root.innerHTML;
        document.getElementById('features-input').value    = featEditor.root.innerHTML;
    });

    function setQuillHtml(editor, html) {
        var safe = (html && String(html).trim()) ? String(html) : '<p><br></p>';
        // Prefer direct HTML so <img> tags from AI survive Quill clipboard sanitizers.
        editor.root.innerHTML = safe;
        editor.update('silent');
        editor.format('direction', 'rtl');
        editor.format('align', 'right');
    }

    /* ---- AI product content generation ---- */
    (function () {
        var aiBtn = document.getElementById('aiProductGenBtn');
        if (!aiBtn) return;

        var aiEndpoint = @json(route('admin.products.ai-generate'));
        var progressUrlTpl = @json(route('admin.products.ai-generate.progress', ['jobId' => '__JOB__']));
        var defaultStages = @json(\App\Services\AiProductGenerator::stages());
        var stageOrder = defaultStages.map(function (s) { return s.key; });

        function makeJobId() {
            if (window.crypto && crypto.randomUUID) {
                return crypto.randomUUID().replace(/-/g, '');
            }
            return 'job_' + Date.now().toString(36) + Math.random().toString(36).slice(2, 10);
        }

        function progressUrl(jobId) {
            return progressUrlTpl.replace('__JOB__', encodeURIComponent(jobId));
        }

        function stageIndex(key) {
            var i = stageOrder.indexOf(key);
            return i === -1 ? -1 : i;
        }

        function buildProgressHtml(percent, label, stage, stages) {
            stages = stages && stages.length ? stages : defaultStages;
            var currentIdx = stageIndex(stage);
            var list = stages.map(function (s, idx) {
                var cls = '';
                if (stage === 'done' || (currentIdx > idx && stage !== 'error')) cls = 'is-done';
                else if (s.key === stage) cls = 'is-current';
                return '<li class="' + cls + '"><span class="ai-dot"></span><span>' + s.label + '</span></li>';
            }).join('');

            return (
                '<div class="ai-progress-wrap">' +
                    '<div class="ai-progress-meta">' +
                        '<span id="aiProgressLabel">' + (label || 'در حال تولید…') + '</span>' +
                        '<strong id="aiProgressPct">' + percent + '٪</strong>' +
                    '</div>' +
                    '<div class="ai-progress-bar"><span id="aiProgressFill" style="width:' + percent + '%"></span></div>' +
                    '<ul class="ai-stage-list" id="aiStageList">' + list + '</ul>' +
                    '<p class="text-muted small mt-3 mb-0">این فرایند ممکن است چند دقیقه طول بکشد. صفحه را نبندید.</p>' +
                '</div>'
            );
        }

        function updateProgressUi(data) {
            var percent = Math.max(0, Math.min(100, parseInt(data.percent || 0, 10) || 0));
            var label = data.label || 'در حال تولید…';
            var stage = data.stage || 'prepare';
            var stages = data.stages && data.stages.length ? data.stages : defaultStages;
            if (typeof Swal !== 'undefined' && Swal.isVisible && Swal.isVisible()) {
                Swal.update({ html: buildProgressHtml(percent, label, stage, stages) });
            }
        }

        function applyGenerated(data) {
            if (!data) return;
            if (data.description) setQuillHtml(descEditor, data.description);
            if (data.features) setQuillHtml(featEditor, data.features);

            var seoTitle = document.getElementById('product-seo-title');
            var seoDesc = document.getElementById('product-seo-description');
            var seoKw = document.getElementById('product-seo-keywords');
            var seoSchema = document.getElementById('seo-schema');
            var tags = document.getElementById('product-tags');
            var slug = document.getElementById('product-slug');
            var titleEn = document.getElementById('product-title-en');

            if (seoTitle && data.seo_title) seoTitle.value = data.seo_title;
            if (seoDesc && data.seo_description) seoDesc.value = data.seo_description;
            if (seoKw && data.seo_keywords) seoKw.value = data.seo_keywords;
            if (seoSchema && data.seo_schema) seoSchema.value = data.seo_schema;
            if (tags && data.tags) tags.value = data.tags;
            if (titleEn && data.title_en && !titleEn.value.trim()) titleEn.value = data.title_en;
            if (slug && data.slug && (!slug.value.trim() || !slug._touched)) {
                slug.value = data.slug;
                slug._touched = true;
            }
        }

        aiBtn.addEventListener('click', function () {
            var titleEl = document.getElementById('product-title');
            var title = titleEl ? titleEl.value.trim() : '';
            if (!title) {
                Swal.fire({
                    icon: 'warning',
                    title: 'عنوان محصول خالی است',
                    text: 'ابتدا عنوان محصول را در بخش اطلاعات اصلی وارد کنید.',
                });
                titleEl && titleEl.focus();
                return;
            }

            var brandSel = document.getElementById('brand-select');
            var brandId = brandSel ? brandSel.value : '';
            var jobId = makeJobId();
            var pollTimer = null;
            var finished = false;

            function stopPolling() {
                if (pollTimer) {
                    clearInterval(pollTimer);
                    pollTimer = null;
                }
            }

            function pollProgress() {
                fetch(progressUrl(jobId), {
                    method: 'GET',
                    credentials: 'same-origin',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json',
                    },
                    cache: 'no-store',
                })
                .then(function (res) {
                    if (!res.ok) throw new Error('progress ' + res.status);
                    return res.json();
                })
                .then(function (data) {
                    if (!data || !data.ok || finished) return;
                    updateProgressUi(data);
                })
                .catch(function () { /* ignore transient poll errors */ });
            }

            Swal.fire({
                title: 'تولید محتوای محصول',
                html: buildProgressHtml(1, 'شروع تولید محتوا…', 'prepare', defaultStages),
                width: 560,
                allowOutsideClick: false,
                allowEscapeKey: false,
                showConfirmButton: false,
                didOpen: function () {
                    pollProgress();
                    pollTimer = setInterval(pollProgress, 800);
                },
                willClose: function () {
                    stopPolling();
                },
            });

            fetch(aiEndpoint, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken,
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json',
                },
                body: JSON.stringify({
                    _token: csrfToken,
                    title: title,
                    brand_id: brandId || null,
                    job_id: jobId,
                }),
            })
            .then(function (res) {
                return res.json().then(function (json) { return { status: res.status, json: json }; });
            })
            .then(function (r) {
                finished = true;
                stopPolling();

                if (r.json && r.json.ok && r.json.data) {
                    updateProgressUi({
                        percent: 100,
                        stage: 'done',
                        label: 'تولید با موفقیت انجام شد',
                        status: 'done',
                        stages: defaultStages,
                    });
                    applyGenerated(r.json.data);
                    Swal.fire({
                        icon: 'success',
                        title: 'تولید شد',
                        text: r.json.message || 'توضیحات، ویژگی‌ها و سئو پر شد.',
                        timer: 1600,
                        showConfirmButton: false,
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'تولید ناموفق',
                        text: (r.json && r.json.message) || 'خطای ناشناخته در تولید محتوا.',
                    });
                }
            })
            .catch(function (err) {
                finished = true;
                stopPolling();
                Swal.fire({
                    icon: 'error',
                    title: 'خطای شبکه',
                    text: err.message || 'ارتباط با سرور برقرار نشد.',
                });
            });
        });
    })();

    /* ---- Product type toggle ---- */
    document.querySelectorAll('input[name="type"]').forEach(function (radio) {
        radio.addEventListener('change', function () {
            var isVariable = this.value === 'variable';
            document.getElementById('simple-fields').classList.toggle('d-none', isVariable);
            document.getElementById('variable-fields').classList.toggle('d-none', !isVariable);
        });
    });

    /* ---- Attributes ---- */
    var attrIdx    = 0;
    var variantIdx = 0;

    function escapeHtml(s) {
        return String(s)
            .replace(/&/g, '&amp;').replace(/</g, '&lt;')
            .replace(/>/g, '&gt;').replace(/"/g, '&quot;');
    }

    function makeAttrRow(idx) {
        return '<tr class="attr-row" data-idx="' + idx + '">' +
            '<td>' +
                '<input type="text" name="attrs[' + idx + '][name]" ' +
                    'class="form-control form-control-sm attr-name-input" ' +
                    'placeholder="مثال: رنگ">' +
            '</td>' +
            '<td>' +
                '<input type="text" name="attrs[' + idx + '][values]" ' +
                    'class="form-control form-control-sm attr-values-input" ' +
                    'placeholder="زرد|آبی|مشکی" dir="rtl">' +
            '</td>' +
            '<td class="text-center">' +
                '<input type="hidden" name="attrs[' + idx + '][show_in_specs]" value="0">' +
                '<input type="checkbox" name="attrs[' + idx + '][show_in_specs]" value="1" ' +
                    'class="form-check-input" id="attr-specs-' + idx + '" checked>' +
            '</td>' +
            '<td>' +
                '<button type="button" class="btn btn-sm btn-outline-danger remove-attr">' +
                    '<i class="ti ti-trash ti-xs"></i>' +
                '</button>' +
            '</td>' +
        '</tr>';
    }

    function syncAttrSelector() {
        var sel  = document.getElementById('attr-selector');
        var prev = sel.value;
        while (sel.options.length > 1) sel.remove(1);
        document.querySelectorAll('#attrs-tbody .attr-row').forEach(function (row) {
            var idx  = row.dataset.idx;
            var name = (row.querySelector('.attr-name-input') || {}).value || '';
            sel.add(new Option(name.trim() || '(بدون نام)', idx));
        });
        sel.value = prev;
    }

    document.getElementById('add-attr-btn').addEventListener('click', function () {
        var emptyRow = document.getElementById('attrs-empty-row');
        if (emptyRow) emptyRow.remove();
        document.getElementById('attrs-tbody').insertAdjacentHTML('beforeend', makeAttrRow(attrIdx++));
        syncAttrSelector();
    });

    document.getElementById('attrs-tbody').addEventListener('click', function (e) {
        if (e.target.closest('.remove-attr')) {
            e.target.closest('.attr-row').remove();
            syncAttrSelector();
        }
    });

    document.getElementById('attrs-tbody').addEventListener('input', function (e) {
        if (e.target.matches('.attr-name-input') || e.target.matches('.attr-values-input')) {
            syncAttrSelector();
        }
    });

    /* ---- Generate variants from attribute ---- */
    document.getElementById('generate-variants-btn').addEventListener('click', function () {
        var sel        = document.getElementById('attr-selector');
        var selectedIdx = sel.value;
        if (!selectedIdx) return;

        var row = document.querySelector('#attrs-tbody .attr-row[data-idx="' + selectedIdx + '"]');
        if (!row) return;

        var valInput = row.querySelector('.attr-values-input');
        var values   = (valInput ? valInput.value : '')
            .split('|').map(function (v) { return v.trim(); }).filter(Boolean);
        if (!values.length) return;

        var tbody = document.getElementById('variants-tbody');
        var emptyRow = document.getElementById('variants-empty-row');
        if (emptyRow) emptyRow.remove();
        tbody.innerHTML = '';
        variantIdx = 0;
        values.forEach(function (val) {
            tbody.insertAdjacentHTML('beforeend', makeVariantRow(variantIdx++, val, selectedIdx));
        });
    });

    /* ---- Variants ---- */
    function makeVariantRow(idx, name, attrIdxVal) {
        name        = name        !== undefined ? name        : '';
        attrIdxVal  = attrIdxVal  !== undefined ? attrIdxVal  : '';
        return '<tr class="variant-row">' +
            '<td>' +
                '<input type="hidden" name="variants[' + idx + '][attr_idx]" value="' + escapeHtml(attrIdxVal) + '">' +
                '<input type="text" name="variants[' + idx + '][name]" ' +
                    'class="form-control form-control-sm" value="' + escapeHtml(name) + '" placeholder="مقدار">' +
            '</td>' +
            '<td class="variant-img-col">' +
                '<input type="file" name="variants[' + idx + '][image]" accept="image/*" class="form-control form-control-sm mb-1">' +
                '<input type="text" name="variants[' + idx + '][image_alt]" class="form-control form-control-sm" placeholder="alt تصویر">' +
            '</td>' +
            '<td>' +
                '<div class="d-flex align-items-center gap-1">' +
                    '<input type="color" name="variants[' + idx + '][color]" class="variant-color-input" value="#696cff">' +
                    '<span class="variant-color-label small text-muted">#696cff</span>' +
                '</div>' +
            '</td>' +
            '<td><input type="number" name="variants[' + idx + '][price]" class="form-control form-control-sm" min="0" step="1" dir="ltr"></td>' +
            '<td><input type="number" name="variants[' + idx + '][discount_price]" class="form-control form-control-sm" min="0" step="1" dir="ltr"></td>' +
            '<td><input type="number" name="variants[' + idx + '][stock]" class="form-control form-control-sm" min="0" value="0" dir="ltr"></td>' +
            '<td><input type="number" name="variants[' + idx + '][weight]" class="form-control form-control-sm" min="0" placeholder="گرم" dir="ltr"></td>' +
            '<td>' +
                '<div class="d-flex gap-1">' +
                    '<input type="number" name="variants[' + idx + '][length]" class="form-control form-control-sm dim-input" min="0" placeholder="ط" dir="ltr">' +
                    '<input type="number" name="variants[' + idx + '][width]"  class="form-control form-control-sm dim-input" min="0" placeholder="ع" dir="ltr">' +
                    '<input type="number" name="variants[' + idx + '][height]" class="form-control form-control-sm dim-input" min="0" placeholder="ا" dir="ltr">' +
                '</div>' +
            '</td>' +
            '<td class="text-center">' +
                '<input type="hidden" name="variants[' + idx + '][is_active]" value="0">' +
                '<input type="checkbox" name="variants[' + idx + '][is_active]" value="1" class="form-check-input" checked>' +
            '</td>' +
            '<td class="text-center">' +
                '<input type="radio" name="default_variant" value="' + idx + '" class="form-check-input">' +
            '</td>' +
            '<td>' +
                '<button type="button" class="btn btn-sm btn-outline-danger remove-variant">' +
                    '<i class="ti ti-trash ti-xs"></i>' +
                '</button>' +
            '</td>' +
        '</tr>';
    }

    document.getElementById('add-variant').addEventListener('click', function () {
        var emptyRow = document.getElementById('variants-empty-row');
        if (emptyRow) emptyRow.remove();
        document.getElementById('variants-tbody').insertAdjacentHTML('beforeend', makeVariantRow(variantIdx++));
    });

    document.getElementById('variants-tbody').addEventListener('click', function (e) {
        if (e.target.closest('.remove-variant')) {
            e.target.closest('.variant-row').remove();
        }
    });

    document.getElementById('variants-tbody').addEventListener('input', function (e) {
        if (e.target.matches('.variant-color-input')) {
            e.target.nextElementSibling.textContent = e.target.value;
        }
    });

    /* ---- Gallery ---- */
    var galleryIdx = 0;

    Sortable.create(document.getElementById('gallery-container'), {
        animation: 150,
        handle: '.gallery-img-wrap',
        ghostClass: 'gallery-ghost',
    });

    document.getElementById('add-gallery-btn').addEventListener('click', addGallerySlot);

    function addGallerySlot() {
        var idx = galleryIdx++;
        var col = document.createElement('div');
        col.className = 'col-6 col-md-3 gallery-item';
        col.innerHTML =
            '<div class="gallery-card">' +
                '<div class="gallery-img-wrap">' +
                    '<img class="gallery-thumb d-none" id="gthumb-' + idx + '" alt="">' +
                    '<div class="gallery-placeholder" id="gph-' + idx + '">' +
                        '<i class="ti ti-photo fs-3 text-muted"></i>' +
                        '<span class="small text-muted">انتخاب تصویر</span>' +
                    '</div>' +
                '</div>' +
                '<input type="file" name="gallery_images[]" accept="image/*" class="gallery-file d-none" data-idx="' + idx + '">' +
                '<input type="text" name="gallery_alts[]" class="form-control form-control-sm mt-2" placeholder="Alt (سئو)">' +
                '<button type="button" class="btn btn-outline-danger btn-sm w-100 mt-1 remove-gallery">' +
                    '<i class="ti ti-trash ti-xs me-1"></i>حذف' +
                '</button>' +
            '</div>';
        document.getElementById('gallery-container').appendChild(col);

        var fileInput = col.querySelector('.gallery-file');
        fileInput.addEventListener('change', function () {
            if (this.files && this.files[0]) {
                var reader = new FileReader();
                var tidx   = this.dataset.idx;
                reader.onload = function (e) {
                    document.getElementById('gthumb-' + tidx).src = e.target.result;
                    document.getElementById('gthumb-' + tidx).classList.remove('d-none');
                    document.getElementById('gph-' + tidx).classList.add('d-none');
                };
                reader.readAsDataURL(this.files[0]);
            }
        });
        fileInput.click();

        col.querySelector('.remove-gallery').addEventListener('click', function () { col.remove(); });
    }

    /* ---- Featured image preview ---- */
    document.getElementById('featured-image-input').addEventListener('change', function () {
        if (this.files && this.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                document.getElementById('featured-preview').src = e.target.result;
                document.getElementById('featured-preview-wrap').classList.add('has-image');
            };
            reader.readAsDataURL(this.files[0]);
        }
    });

    /* ---- Brand AJAX quick-create ---- */
    document.getElementById('add-brand-btn').addEventListener('click', addBrand);
    document.getElementById('new-brand-name').addEventListener('keydown', function (e) {
        if (e.key === 'Enter') { e.preventDefault(); addBrand(); }
    });

    function addBrand() {
        var nameInput = document.getElementById('new-brand-name');
        var imgInput  = document.getElementById('new-brand-image');
        var errEl     = document.getElementById('brand-error');
        var okEl      = document.getElementById('brand-success');
        var btn       = document.getElementById('add-brand-btn');
        var name      = nameInput.value.trim();
        errEl.classList.add('d-none');
        okEl.classList.add('d-none');
        if (!name) return;
        btn.disabled = true;

        var fd = new FormData();
        fd.append('name', name);
        fd.append('_token', csrfToken);
        if (imgInput && imgInput.files && imgInput.files[0]) {
            fd.append('image', imgInput.files[0]);
        }

        fetch('{{ route('admin.brands.quick-create') }}', {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' },
            body: fd
        })
        .then(function (r) { return r.json().then(function (d) { return { ok: r.ok, data: d }; }); })
        .then(function (res) {
            if (res.ok) {
                var sel = document.getElementById('brand-select');
                sel.add(new Option(res.data.name, res.data.id, true, true));
                nameInput.value = '';
                if (imgInput) imgInput.value = '';
                okEl.textContent = 'برند «' + res.data.name + '» اضافه شد.';
                okEl.classList.remove('d-none');
            } else {
                var msgs = res.data.errors ? Object.values(res.data.errors).flat() : ['خطا'];
                errEl.textContent = msgs[0];
                errEl.classList.remove('d-none');
            }
        })
        .finally(function () { btn.disabled = false; });
    }

    /* ---- Schema auto-fill ---- */
    document.getElementById('schema-fill-btn').addEventListener('click', function () {
        var title  = document.getElementById('product-title').value || '';
        var sel    = document.getElementById('brand-select');
        var brand  = sel.options[sel.selectedIndex] ? sel.options[sel.selectedIndex].text : '';
        if (brand === '— بدون برند —') brand = '';
        var schema = {
            "@@context": "https://schema.org",
            "@@type": "Product",
            "name": title,
            "description": "",
            "brand": { "@@type": "Brand", "name": brand },
            "offers": {
                "@@type": "Offer",
                "priceCurrency": "IRR",
                "price": "",
                "availability": "https://schema.org/InStock",
                "seller": { "@@type": "Organization", "name": "{{ config('app.name') }}" }
            }
        };
        document.getElementById('seo-schema').value = JSON.stringify(schema, null, 2);
    });

}());
</script>

@include('admin.products._similar-products-js')

@endsection
