@extends('admin.layouts.app')

@section('title', 'নতুন প্রোডাক্ট')
@section('page-title', 'নতুন প্রোডাক্ট')

@section('content')

    {{-- Validation Errors --}}
    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show mb-4" role="alert">
            <i class="bi bi-exclamation-triangle me-2"></i>
            <strong>ত্রুটি!</strong> অনুগ্রহ করে নিচের সমস্যাগুলো সমাধান করুন:
            <ul class="mb-0 mt-2">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

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

        {{-- Section 1: মৌলিক তথ্য (Basic Info) --}}
        <div class="admin-form-card">
            <h6><i class="bi bi-info-circle me-2"></i>মৌলিক তথ্য</h6>

            <div class="row g-3">
                {{-- নাম --}}
                <div class="col-md-6">
                    <label for="name" class="form-label">নাম <span class="text-danger">*</span></label>
                    <input type="text" name="name" id="name" class="form-control @error('name') is-invalid @enderror"
                           value="{{ old('name') }}" required
                           oninput="document.getElementById('slug').value = this.value.toLowerCase().replace(/[^a-z0-9ঀ-৿\s-]/g, '').replace(/\s+/g, '-')">
                    @error('name')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                {{-- স্লাগ --}}
                <div class="col-md-6">
                    <label for="slug" class="form-label">স্লাগ</label>
                    <input type="text" name="slug" id="slug" class="form-control @error('slug') is-invalid @enderror"
                           value="{{ old('slug') }}">
                    @error('slug')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                {{-- ক্যাটাগরি --}}
                <div class="col-md-4">
                    <label for="category_id" class="form-label">ক্যাটাগরি</label>
                    <select name="category_id" id="category_id" class="form-select @error('category_id') is-invalid @enderror">
                        <option value="">ক্যাটাগরি নির্বাচন করুন</option>
                        @foreach($categories as $category)
                            <option value="{{ $category->id }}" {{ old('category_id') == $category->id ? 'selected' : '' }}>
                                {{ $category->name }}
                            </option>
                        @endforeach
                    </select>
                    @error('category_id')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                {{-- ব্র্যান্ড --}}
                <div class="col-md-4">
                    <label for="brand_id" class="form-label">ব্র্যান্ড</label>
                    <select name="brand_id" id="brand_id" class="form-select @error('brand_id') is-invalid @enderror">
                        <option value="">ব্র্যান্ড নির্বাচন করুন</option>
                        @foreach($brands as $brand)
                            <option value="{{ $brand->id }}" {{ old('brand_id') == $brand->id ? 'selected' : '' }}>
                                {{ $brand->name }}
                            </option>
                        @endforeach
                    </select>
                    @error('brand_id')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                {{-- SKU --}}
                <div class="col-md-2">
                    <label for="sku" class="form-label">SKU</label>
                    <input type="text" name="sku" id="sku" class="form-control @error('sku') is-invalid @enderror"
                           value="{{ old('sku') }}">
                    @error('sku')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                {{-- স্ট্যাটাস --}}
                <div class="col-md-2">
                    <label for="status" class="form-label">স্ট্যাটাস</label>
                    <select name="status" id="status" class="form-select @error('status') is-invalid @enderror">
                        <option value="published" {{ old('status', 'published') == 'published' ? 'selected' : '' }}>প্রকাশিত</option>
                        <option value="draft" {{ old('status') == 'draft' ? 'selected' : '' }}>খসড়া</option>
                    </select>
                    @error('status')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>
        </div>

        {{-- Section 2: মূল্য ও স্টক (Price & Stock) --}}
        <div class="admin-form-card">
            <h6><i class="bi bi-currency-exchange me-2"></i>মূল্য ও স্টক</h6>

            <div class="row g-3">
                {{-- নিয়মিত মূল্য --}}
                <div class="col-md-4">
                    <label for="regular_price" class="form-label">নিয়মিত মূল্য (৳) <span class="text-danger">*</span></label>
                    <input type="number" name="regular_price" id="regular_price" step="0.01" min="0"
                           class="form-control @error('regular_price') is-invalid @enderror"
                           value="{{ old('regular_price') }}" required>
                    @error('regular_price')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                {{-- বিক্রয় মূল্য --}}
                <div class="col-md-4">
                    <label for="sale_price" class="form-label">বিক্রয় মূল্য (৳)</label>
                    <input type="number" name="sale_price" id="sale_price" step="0.01" min="0"
                           class="form-control @error('sale_price') is-invalid @enderror"
                           value="{{ old('sale_price') }}">
                    @error('sale_price')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                {{-- স্টক পরিমাণ --}}
                <div class="col-md-4">
                    <label for="stock_quantity" class="form-label">স্টক পরিমাণ</label>
                    <input type="number" name="stock_quantity" id="stock_quantity" min="0"
                           class="form-control @error('stock_quantity') is-invalid @enderror"
                           value="{{ old('stock_quantity', 0) }}">
                    @error('stock_quantity')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>
        </div>

        {{-- Section 3: ছবি (Images) --}}
        <div class="admin-form-card" x-data="imageUploader()">
            <h6><i class="bi bi-images me-2"></i>ছবি</h6>

            <div class="mb-3">
                <label for="images" class="form-label">প্রোডাক্ট ছবি আপলোড করুন</label>
                <input type="file" name="images[]" id="images" class="form-control @error('images.*') is-invalid @enderror"
                       accept="image/*" multiple @change="previewImages($event)">
                @error('images.*')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
                <small class="form-text text-muted">
                    <i class="bi bi-info-circle me-1"></i>প্রথম ছবিটি প্রাইমারি ছবি হিসেবে সেট হবে
                </small>
            </div>

            {{-- Image Preview Area --}}
            <div class="d-flex flex-wrap gap-3" x-show="previews.length > 0">
                <template x-for="(preview, index) in previews" :key="index">
                    <div class="position-relative">
                        <img :src="preview" class="rounded border" style="width: 100px; height: 100px; object-fit: cover;">
                        <span x-show="index === 0" class="position-absolute top-0 start-0 badge bg-primary" style="font-size: 0.65rem;">
                            প্রাইমারি
                        </span>
                        <button type="button" @click="removeImage(index)"
                                class="position-absolute top-0 end-0 btn btn-sm btn-danger rounded-circle"
                                style="width: 22px; height: 22px; padding: 0; font-size: 0.7rem; line-height: 1;">
                            <i class="bi bi-x"></i>
                        </button>
                    </div>
                </template>
            </div>
        </div>

        {{-- Section 4: বিবরণ (Description) --}}
        <div class="admin-form-card">
            <h6><i class="bi bi-text-paragraph me-2"></i>বিবরণ</h6>

            <div class="row g-3">
                {{-- সংক্ষিপ্ত বিবরণ --}}
                <div class="col-12">
                    <label for="short_description" class="form-label">সংক্ষিপ্ত বিবরণ</label>
                    <textarea name="short_description" id="short_description" rows="3"
                              class="form-control @error('short_description') is-invalid @enderror">{{ old('short_description') }}</textarea>
                    @error('short_description')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                {{-- পূর্ণ বিবরণ --}}
                <div class="col-12">
                    <label for="description" class="form-label">পূর্ণ বিবরণ</label>
                    <textarea name="description" id="description" rows="8"
                              class="form-control @error('description') is-invalid @enderror">{{ old('description') }}</textarea>
                    @error('description')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                {{-- স্পেসিফিকেশন --}}
                <div class="col-12">
                    <label for="specifications" class="form-label">স্পেসিফিকেশন</label>
                    <textarea name="specifications" id="specifications" rows="5"
                              class="form-control @error('specifications') is-invalid @enderror"
                              placeholder='{"ওজন": "500g", "রং": "লাল", "সাইজ": "XL"}'>{{ old('specifications') }}</textarea>
                    <small class="form-text text-muted">
                        <i class="bi bi-info-circle me-1"></i>JSON ফরম্যাটে লিখুন, যেমন: {"key": "value", "key2": "value2"}
                    </small>
                    @error('specifications')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>
        </div>

        {{-- Section 5: ব্যাজ সেটিংস (Badge Settings) --}}
        <div class="admin-form-card">
            <h6><i class="bi bi-bookmark-star me-2"></i>ব্যাজ সেটিংস</h6>

            <div class="row g-3">
                {{-- ব্যাজ টেক্সট --}}
                <div class="col-md-5">
                    <label for="badge_text" class="form-label">ব্যাজ টেক্সট</label>
                    <input type="text" name="badge_text" id="badge_text"
                           class="form-control @error('badge_text') is-invalid @enderror"
                           value="{{ old('badge_text') }}" placeholder="জনপ্রিয়, নতুন, অফার">
                    @error('badge_text')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                {{-- ব্যাজ রঙ --}}
                <div class="col-md-3">
                    <label for="badge_color" class="form-label">ব্যাজ রঙ</label>
                    <input type="color" name="badge_color" id="badge_color"
                           class="form-control form-control-color @error('badge_color') is-invalid @enderror"
                           value="{{ old('badge_color', '#28a745') }}">
                    @error('badge_color')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                {{-- ব্যাজ দেখান --}}
                <div class="col-md-4 d-flex align-items-end">
                    <div class="form-check">
                        <input type="hidden" name="badge_visible" value="0">
                        <input type="checkbox" name="badge_visible" id="badge_visible" value="1"
                               class="form-check-input" {{ old('badge_visible', '1') == '1' ? 'checked' : '' }}>
                        <label for="badge_visible" class="form-check-label">ব্যাজ দেখান</label>
                    </div>
                </div>
            </div>
        </div>

        {{-- Section 6: বৈশিষ্ট্য (Features) --}}
        <div class="admin-form-card">
            <h6><i class="bi bi-stars me-2"></i>বৈশিষ্ট্য</h6>

            <div class="row g-3">
                <div class="col-auto">
                    <div class="form-check">
                        <input type="hidden" name="is_featured" value="0">
                        <input type="checkbox" name="is_featured" id="is_featured" value="1"
                               class="form-check-input" {{ old('is_featured') == '1' ? 'checked' : '' }}>
                        <label for="is_featured" class="form-check-label">ফিচার্ড</label>
                    </div>
                </div>

                <div class="col-auto">
                    <div class="form-check">
                        <input type="hidden" name="is_popular" value="0">
                        <input type="checkbox" name="is_popular" id="is_popular" value="1"
                               class="form-check-input" {{ old('is_popular') == '1' ? 'checked' : '' }}>
                        <label for="is_popular" class="form-check-label">জনপ্রিয়</label>
                    </div>
                </div>

                <div class="col-auto">
                    <div class="form-check">
                        <input type="hidden" name="is_new_arrival" value="0">
                        <input type="checkbox" name="is_new_arrival" id="is_new_arrival" value="1"
                               class="form-check-input" {{ old('is_new_arrival', '1') == '1' ? 'checked' : '' }}>
                        <label for="is_new_arrival" class="form-check-label">নতুন আগমন</label>
                    </div>
                </div>

                <div class="col-auto">
                    <div class="form-check">
                        <input type="hidden" name="is_best_selling" value="0">
                        <input type="checkbox" name="is_best_selling" id="is_best_selling" value="1"
                               class="form-check-input" {{ old('is_best_selling') == '1' ? 'checked' : '' }}>
                        <label for="is_best_selling" class="form-check-label">বেস্ট সেলিং</label>
                    </div>
                </div>
            </div>
        </div>

        {{-- Section 7: ভিডিও ও সাইজ গাইড --}}
        <div class="admin-form-card">
            <h6><i class="bi bi-play-circle me-2"></i>ভিডিও ও সাইজ গাইড</h6>

            <div class="row g-3">
                {{-- ভিডিও URL --}}
                <div class="col-md-6">
                    <label for="video_url" class="form-label">ভিডিও URL</label>
                    <input type="text" name="video_url" id="video_url"
                           class="form-control @error('video_url') is-invalid @enderror"
                           value="{{ old('video_url') }}" placeholder="YouTube/Vimeo URL">
                    @error('video_url')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                {{-- সাইজ গাইড --}}
                <div class="col-md-6">
                    <label for="size_guide" class="form-label">সাইজ গাইড</label>
                    <textarea name="size_guide" id="size_guide" rows="3"
                              class="form-control @error('size_guide') is-invalid @enderror">{{ old('size_guide') }}</textarea>
                    @error('size_guide')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>
        </div>

        {{-- Section 8: ভ্যারিয়েশন (Variations) --}}
        <div class="admin-form-card" x-data="variationManager()">
            <h6><i class="bi bi-diagram-3 me-2"></i>ভ্যারিয়েশন</h6>

            <div class="mb-3">
                <button type="button" class="btn btn-sm btn-outline-success" @click="addVariation()">
                    <i class="bi bi-plus-lg me-1"></i>ভ্যারিয়েশন যোগ করুন
                </button>
            </div>

            <template x-for="(variation, vIndex) in variations" :key="vIndex">
                <div class="border rounded p-3 mb-3 bg-light">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <strong class="text-muted" x-text="'ভ্যারিয়েশন #' + (vIndex + 1)"></strong>
                        <button type="button" class="btn btn-sm btn-outline-danger" @click="removeVariation(vIndex)">
                            <i class="bi bi-trash me-1"></i>মুছুন
                        </button>
                    </div>

                    <div class="row g-3">
                        {{-- Attribute Values --}}
                        @if(isset($attributes) && $attributes->count())
                            @foreach($attributes as $attribute)
                                <div class="col-md-4">
                                    <label class="form-label">{{ $attribute->name }}</label>
                                    <div class="d-flex flex-wrap gap-2">
                                        @foreach($attribute->values as $value)
                                            <div class="form-check">
                                                <input type="checkbox" class="form-check-input"
                                                       :name="'variations[' + vIndex + '][attribute_values][]'"
                                                       value="{{ $value->id }}"
                                                       :id="'var_' + vIndex + '_attr_{{ $value->id }}'">
                                                <label class="form-check-label" :for="'var_' + vIndex + '_attr_{{ $value->id }}'">
                                                    {{ $value->value }}
                                                </label>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @endforeach
                        @endif

                        {{-- দাম --}}
                        <div class="col-md-4">
                            <label class="form-label">দাম (৳)</label>
                            <input type="number" step="0.01" min="0" class="form-control"
                                   :name="'variations[' + vIndex + '][price]'"
                                   x-model="variation.price">
                        </div>

                        {{-- স্টক --}}
                        <div class="col-md-4">
                            <label class="form-label">স্টক</label>
                            <input type="number" min="0" class="form-control"
                                   :name="'variations[' + vIndex + '][stock_quantity]'"
                                   x-model="variation.stock_quantity">
                        </div>

                        {{-- SKU --}}
                        <div class="col-md-4">
                            <label class="form-label">SKU</label>
                            <input type="text" class="form-control"
                                   :name="'variations[' + vIndex + '][sku]'"
                                   x-model="variation.sku">
                        </div>
                    </div>
                </div>
            </template>

            <p class="text-muted mb-0" x-show="variations.length === 0">
                <i class="bi bi-info-circle me-1"></i>কোনো ভ্যারিয়েশন যোগ করা হয়নি।
            </p>
        </div>

        {{-- Section 9: অ্যাফিলিয়েট লিংক (Affiliate Links) --}}
        <div class="admin-form-card" x-data="affiliateLinkManager()">
            <h6><i class="bi bi-link-45deg me-2"></i>অ্যাফিলিয়েট লিংক</h6>

            <div class="mb-3">
                <button type="button" class="btn btn-sm btn-outline-success" @click="addLink()">
                    <i class="bi bi-plus-lg me-1"></i>অ্যাফিলিয়েট লিংক যোগ করুন
                </button>
            </div>

            <template x-for="(link, lIndex) in links" :key="lIndex">
                <div class="border rounded p-3 mb-3 bg-light">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <strong class="text-muted" x-text="'লিংক #' + (lIndex + 1)"></strong>
                        <button type="button" class="btn btn-sm btn-outline-danger" @click="removeLink(lIndex)">
                            <i class="bi bi-trash me-1"></i>মুছুন
                        </button>
                    </div>

                    <div class="row g-3">
                        {{-- স্টোরের নাম --}}
                        <div class="col-md-4">
                            <label class="form-label">স্টোরের নাম</label>
                            <input type="text" class="form-control"
                                   :name="'affiliate_links[' + lIndex + '][store_name]'"
                                   x-model="link.store_name" placeholder="যেমন: Daraz, AjkerDeal">
                        </div>

                        {{-- মূল্য --}}
                        <div class="col-md-4">
                            <label class="form-label">মূল্য (৳)</label>
                            <input type="number" step="0.01" min="0" class="form-control"
                                   :name="'affiliate_links[' + lIndex + '][price]'"
                                   x-model="link.price">
                        </div>

                        {{-- অ্যাফিলিয়েট URL --}}
                        <div class="col-md-4">
                            <label class="form-label">অ্যাফিলিয়েট URL</label>
                            <input type="url" class="form-control"
                                   :name="'affiliate_links[' + lIndex + '][affiliate_url]'"
                                   x-model="link.affiliate_url" placeholder="https://...">
                        </div>

                        {{-- বাটন টেক্সট --}}
                        <div class="col-md-4">
                            <label class="form-label">বাটন টেক্সট</label>
                            <input type="text" class="form-control"
                                   :name="'affiliate_links[' + lIndex + '][button_text]'"
                                   x-model="link.button_text" placeholder="এখনই কিনুন">
                        </div>

                        {{-- নোট --}}
                        <div class="col-md-4">
                            <label class="form-label">নোট</label>
                            <input type="text" class="form-control"
                                   :name="'affiliate_links[' + lIndex + '][note]'"
                                   x-model="link.note">
                        </div>

                        {{-- সক্রিয় --}}
                        <div class="col-md-4 d-flex align-items-end">
                            <div class="form-check">
                                <input type="hidden" :name="'affiliate_links[' + lIndex + '][is_active]'" value="0">
                                <input type="checkbox" class="form-check-input"
                                       :name="'affiliate_links[' + lIndex + '][is_active]'" value="1"
                                       :id="'aff_active_' + lIndex" :checked="link.is_active">
                                <label class="form-check-label" :for="'aff_active_' + lIndex">সক্রিয়</label>
                            </div>
                        </div>
                    </div>
                </div>
            </template>

            <p class="text-muted mb-0" x-show="links.length === 0">
                <i class="bi bi-info-circle me-1"></i>কোনো অ্যাফিলিয়েট লিংক যোগ করা হয়নি।
            </p>
        </div>

        {{-- Section 10: কাস্টম ট্যাব (Custom Tabs) --}}
        <div class="admin-form-card" x-data="customTabManager()">
            <h6><i class="bi bi-layout-text-sidebar me-2"></i>কাস্টম ট্যাব</h6>

            <div class="mb-3">
                <button type="button" class="btn btn-sm btn-outline-success" @click="addTab()">
                    <i class="bi bi-plus-lg me-1"></i>ট্যাব যোগ করুন
                </button>
            </div>

            <template x-for="(tab, tIndex) in tabs" :key="tIndex">
                <div class="border rounded p-3 mb-3 bg-light">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <strong class="text-muted" x-text="'ট্যাব #' + (tIndex + 1)"></strong>
                        <button type="button" class="btn btn-sm btn-outline-danger" @click="removeTab(tIndex)">
                            <i class="bi bi-trash me-1"></i>মুছুন
                        </button>
                    </div>

                    <div class="row g-3">
                        {{-- ট্যাব শিরোনাম --}}
                        <div class="col-md-4">
                            <label class="form-label">ট্যাব শিরোনাম</label>
                            <input type="text" class="form-control"
                                   :name="'custom_tabs[' + tIndex + '][title]'"
                                   x-model="tab.title" placeholder="ট্যাবের শিরোনাম">
                        </div>

                        {{-- ট্যাব কন্টেন্ট --}}
                        <div class="col-md-8">
                            <label class="form-label">ট্যাব কন্টেন্ট</label>
                            <textarea class="form-control" rows="3"
                                      :name="'custom_tabs[' + tIndex + '][content]'"
                                      x-model="tab.content" placeholder="ট্যাবের বিষয়বস্তু"></textarea>
                        </div>
                    </div>
                </div>
            </template>

            <p class="text-muted mb-0" x-show="tabs.length === 0">
                <i class="bi bi-info-circle me-1"></i>কোনো কাস্টম ট্যাব যোগ করা হয়নি।
            </p>
        </div>

        {{-- Section 11: SEO --}}
        <div class="admin-form-card">
            <h6><i class="bi bi-search me-2"></i>SEO</h6>

            <div class="row g-3">
                {{-- মেটা টাইটেল --}}
                <div class="col-md-6">
                    <label for="meta_title" class="form-label">মেটা টাইটেল</label>
                    <input type="text" name="meta_title" id="meta_title"
                           class="form-control @error('meta_title') is-invalid @enderror"
                           value="{{ old('meta_title') }}">
                    @error('meta_title')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                {{-- OG ছবি --}}
                <div class="col-md-6">
                    <label for="og_image" class="form-label">OG ছবি</label>
                    <input type="file" name="og_image" id="og_image"
                           class="form-control @error('og_image') is-invalid @enderror" accept="image/*">
                    @error('og_image')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                {{-- মেটা বিবরণ --}}
                <div class="col-12">
                    <label for="meta_description" class="form-label">মেটা বিবরণ</label>
                    <textarea name="meta_description" id="meta_description" rows="3"
                              class="form-control @error('meta_description') is-invalid @enderror">{{ old('meta_description') }}</textarea>
                    @error('meta_description')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>
        </div>

        {{-- Submit Button --}}
        <div class="text-end mb-4">
            <a href="{{ route('admin.products.index') }}" class="btn btn-outline-secondary btn-lg me-2">
                <i class="bi bi-arrow-left me-1"></i>বাতিল
            </a>
            <button type="submit" class="btn btn-primary btn-lg">
                <i class="bi bi-check-lg me-1"></i>প্রোডাক্ট তৈরি করুন
            </button>
        </div>

    </form>

@endsection

@push('scripts')
<script>
    {{-- Image Upload Preview --}}
    function imageUploader() {
        return {
            previews: [],
            previewImages(event) {
                this.previews = [];
                const files = event.target.files;
                for (let i = 0; i < files.length; i++) {
                    const reader = new FileReader();
                    reader.onload = (e) => {
                        this.previews.push(e.target.result);
                    };
                    reader.readAsDataURL(files[i]);
                }
            },
            removeImage(index) {
                this.previews.splice(index, 1);
            }
        };
    }

    {{-- Variation Manager --}}
    function variationManager() {
        return {
            variations: [],
            addVariation() {
                this.variations.push({
                    attribute_values: [],
                    price: '',
                    stock_quantity: '',
                    sku: ''
                });
            },
            removeVariation(index) {
                this.variations.splice(index, 1);
            }
        };
    }

    {{-- Affiliate Link Manager --}}
    function affiliateLinkManager() {
        return {
            links: [],
            addLink() {
                this.links.push({
                    store_name: '',
                    price: '',
                    affiliate_url: '',
                    button_text: '',
                    note: '',
                    is_active: true
                });
            },
            removeLink(index) {
                this.links.splice(index, 1);
            }
        };
    }

    {{-- Custom Tab Manager --}}
    function customTabManager() {
        return {
            tabs: [],
            addTab() {
                this.tabs.push({
                    title: '',
                    content: ''
                });
            },
            removeTab(index) {
                this.tabs.splice(index, 1);
            }
        };
    }
</script>
@endpush