@extends('admin.layouts.app')

@section('title', 'Edit Product')

@section('content')
    <div class="max-w-6xl mx-auto space-y-6" x-data="productEditForm()">
        <!-- Header -->
        <div class="flex items-center gap-4 mb-8">
            <a href="{{ route('admin.products.index') }}"
                class="p-2 bg-slate-800 border border-slate-700 rounded-xl text-slate-400 hover:text-white transition-all">
                <i data-lucide="arrow-left" class="w-5 h-5"></i>
            </a>
            <div>
                <h1 class="text-3xl font-bold text-white tracking-tight">Edit Product</h1>
                <p class="text-slate-400 mt-1">Modifying <span class="text-blue-400 font-bold">#{{ $product->name }}</span>
                </p>
            </div>
        </div>

        @if ($errors->any())
            <div class="bg-rose-500/10 border border-rose-500/20 text-rose-400 p-4 rounded-xl">
                <h4 class="text-sm font-bold uppercase tracking-widest mb-2 flex items-center gap-2">
                    <i data-lucide="alert-circle" class="w-4 h-4"></i>
                    Validation Errors
                </h4>
                <ul class="list-disc pl-5 text-sm space-y-1">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('admin.products.update', $product->id) }}" method="POST" enctype="multipart/form-data"
            id="product-edit-form" x-on:submit.prevent="submitForm($el)">
            @csrf
            @method('PUT')

            <div class="flex flex-col lg:flex-row gap-8">
                <!-- Sidebar Navigation -->
                <div class="lg:w-64 flex-shrink-0">
                    <div class="glass-card rounded-2xl p-2 border border-white/5 sticky top-24">
                        <template x-for="tab in tabs" :key="tab.id">
                            <button type="button" x-on:click="activeTab = tab.id"
                                class="w-full flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-medium transition-all"
                                :class="activeTab === tab.id ? 'bg-blue-600 text-white shadow-lg shadow-blue-500/20' : 'text-slate-400 hover:bg-white/5 hover:text-white'">
                                <i :data-lucide="tab.icon" class="w-4 h-4"></i>
                                <span x-text="tab.label"></span>
                            </button>
                        </template>
                    </div>
                </div>

                <!-- Content Area -->
                <div class="flex-1 space-y-8">
                    <!-- General Info -->
                    <div x-show="activeTab === 'general'"
                        class="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
                        <div class="glass-card rounded-3xl p-8 border border-white/5 space-y-8">
                            <h3 class="text-xl font-bold text-white flex items-center gap-3">
                                <i data-lucide="info" class="w-5 h-5 text-blue-400"></i>
                                General Information
                            </h3>

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                                <div class="space-y-2">
                                    <label
                                        class="form-label text-slate-400 text-[10px] uppercase font-bold tracking-widest">Category
                                        *</label>
                                    <select name="category_id" required
                                        x-on:change="updateSubcategories($event.target.value)"
                                        class="w-full bg-slate-800 border border-slate-700 rounded-xl px-4 py-3 text-sm text-white focus:ring-2 focus:ring-blue-500 outline-none">
                                        <option value="">Select Category</option>
                                        @foreach($categories as $cat)
                                            <option value="{{ $cat->id }}" {{ $product->category_id == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="space-y-2">
                                    <label
                                        class="form-label text-slate-400 text-[10px] uppercase font-bold tracking-widest">Subcategory
                                        (Optional)</label>
                                    <select name="subcategory_id"
                                        class="w-full bg-slate-800 border border-slate-700 rounded-xl px-4 py-3 text-sm text-white focus:ring-2 focus:ring-blue-500 outline-none">
                                        <option value="">Select Subcategory</option>
                                        <template x-for="sub in subcategories" :key="sub.id">
                                            <option :value="sub.id" x-text="sub.name"
                                                :selected="sub.id == {{ $product->subcategory_id ?? 'null' }}"></option>
                                        </template>
                                    </select>
                                </div>
                            </div>

                            <div class="space-y-2">
                                <label
                                    class="form-label text-slate-400 text-[10px] uppercase font-bold tracking-widest">Product
                                    Name *</label>
                                <input type="text" name="name" required value="{{ old('name', $product->name) }}"
                                    class="w-full bg-slate-800 border border-slate-700 rounded-xl px-4 py-3 text-sm text-white focus:ring-2 focus:ring-blue-500 outline-none">
                            </div>

                            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                                <div class="space-y-2">
                                    <label
                                        class="form-label text-slate-400 text-[10px] uppercase font-bold tracking-widest">MRP
                                        *</label>
                                    <div class="relative">
                                        <span class="absolute left-4 top-3.5 text-slate-500 text-sm font-bold">₹</span>
                                        <input type="number" step="0.01" name="mrp" required
                                            value="{{ old('mrp', $product->mrp) }}"
                                            class="w-full bg-slate-800 border border-slate-700 rounded-xl pl-8 pr-4 py-3 text-sm text-white focus:ring-2 focus:ring-blue-500 outline-none">
                                    </div>
                                </div>
                                <div class="space-y-2">
                                    <label
                                        class="form-label text-slate-400 text-[10px] uppercase font-bold tracking-widest">Selling
                                        Price (SP) *</label>
                                    <div class="relative">
                                        <span class="absolute left-4 top-3.5 text-slate-500 text-sm font-bold">₹</span>
                                        <input type="number" step="0.01" name="sp" x-model="sp" required
                                            class="w-full bg-slate-800 border border-slate-700 rounded-xl pl-8 pr-4 py-3 text-sm text-white focus:ring-2 focus:ring-blue-500 outline-none">
                                    </div>
                                </div>
                                <div class="space-y-2">
                                    <label
                                        class="form-label text-slate-400 text-[10px] uppercase font-bold tracking-widest">Reseller
                                        Price</label>
                                    <div class="relative">
                                        <span class="absolute left-4 top-3.5 text-slate-500 text-sm font-bold">₹</span>
                                        <input type="number" step="0.01" name="reseller_price"
                                            value="{{ old('reseller_price', $product->reseller_price) }}"
                                            class="w-full bg-slate-800 border border-slate-700 rounded-xl pl-8 pr-4 py-3 text-sm text-white focus:ring-2 focus:ring-blue-500 outline-none">
                                    </div>
                                </div>
                            </div>

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                                <div class="space-y-2">
                                    <label
                                        class="form-label text-slate-400 text-[10px] uppercase font-bold tracking-widest">Tax
                                        Code (%)</label>
                                    <select name="tax_code" x-model="taxCode"
                                        class="w-full bg-slate-800 border border-slate-700 rounded-xl px-4 py-3 text-sm text-white focus:ring-2 focus:ring-blue-500 outline-none">
                                        <option value="0">0% (GST Exempt)</option>
                                        @foreach(\App\Models\Tax::where('status', true)->get() as $rate)
                                            <option value="{{ $rate->rate }}">{{ $rate->name }} ({{ $rate->rate }}%)</option>
                                        @endforeach
                                    </select>
                                    <div x-show="sp > 0"
                                        class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mt-2 px-1">
                                        Base: ₹<span x-text="basePrice"></span> | GST: ₹<span x-text="taxAmount"></span>
                                    </div>
                                </div>
                                <div class="space-y-2">
                                    <label
                                        class="form-label text-slate-400 text-[10px] uppercase font-bold tracking-widest">Stock
                                        Units *</label>
                                    <input type="number" name="number_of_units" required
                                        value="{{ old('number_of_units', $product->number_of_units) }}" min="1"
                                        class="w-full bg-slate-800 border border-slate-700 rounded-xl px-4 py-3 text-sm text-white focus:ring-2 focus:ring-blue-500 outline-none">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Media Tab -->
                    <div x-show="activeTab === 'description'"
                        class="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
                        <div class="glass-card rounded-3xl p-8 border border-white/5 space-y-8">
                            <h3 class="text-xl font-bold text-white flex items-center gap-3">
                                <i data-lucide="image" class="w-5 h-5 text-purple-400"></i>
                                Media & Description
                            </h3>

                            <!-- Existing Images -->
                            <div class="space-y-4">
                                <label
                                    class="form-label text-slate-400 text-[10px] uppercase font-bold tracking-widest">Current
                                    Gallery</label>
                                <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
                                    @foreach($product->images as $image)
                                        <div class="relative aspect-square rounded-2xl overflow-hidden border border-white/10 group"
                                            id="image-{{ $image->id }}">
                                            <img src="{{ asset('storage/' . $image->image_path) }}"
                                                class="w-full h-full object-cover">
                                            <div
                                                class="absolute inset-0 bg-slate-900/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
                                                <button type="button"
                                                    x-on:click="setDefaultImage({{ $product->id }}, {{ $image->id }})"
                                                    class="p-2 bg-white/10 backdrop-blur-md rounded-xl text-white hover:text-yellow-400 transition-colors"
                                                    title="Set as Thumbnail">
                                                    <i data-lucide="star"
                                                        class="w-4 h-4 {{ $image->is_default ? 'fill-yellow-400 text-yellow-400' : '' }}"></i>
                                                </button>
                                                <button type="button" x-on:click="deleteImage({{ $image->id }})"
                                                    class="p-2 bg-white/10 backdrop-blur-md rounded-xl text-white hover:text-rose-400 transition-colors"
                                                    title="Delete Image">
                                                    <i data-lucide="trash-2" class="w-4 h-4"></i>
                                                </button>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>

                            <!-- New Uploads -->
                            <div class="space-y-4">
                                <label class="form-label text-slate-400 text-[10px] uppercase font-bold tracking-widest">Add
                                    New Images</label>
                                <label for="dropzone-file"
                                    class="group flex flex-col items-center justify-center w-full h-48 border-2 border-slate-700 border-dashed rounded-3xl cursor-pointer bg-slate-800/50 hover:bg-slate-800 transition-all hover:border-blue-500/50">
                                    <div class="flex flex-col items-center justify-center pt-5 pb-6">
                                        <div
                                            class="w-12 h-12 bg-blue-500/10 rounded-2xl flex items-center justify-center text-blue-400 mb-4 group-hover:scale-110 transition-transform">
                                            <i data-lucide="upload-cloud" class="w-6 h-6"></i>
                                        </div>
                                        <p class="mb-2 text-sm text-slate-300 font-bold">Click to upload more</p>
                                        <p class="text-[10px] text-slate-500 uppercase tracking-widest">WEBP, PNG, JPG (MAX.
                                            5MB per image)</p>
                                    </div>
                                    <input id="dropzone-file" name="images[]" type="file" multiple class="hidden"
                                        x-on:change="handleFileUpload" />
                                </label>

                                <div x-show="previewImages.length > 0"
                                    class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 animate-in zoom-in duration-300">
                                    <template x-for="(img, index) in previewImages" :key="index">
                                        <div
                                            class="relative aspect-square rounded-2xl overflow-hidden border border-white/10 group">
                                            <img :src="img.url" class="w-full h-full object-cover">
                                            <div
                                                class="absolute inset-x-0 bottom-0 bg-slate-900/80 backdrop-blur-sm p-1.5 flex items-center justify-end">
                                                <button type="button" x-on:click="removePreviewImage(index)"
                                                    class="p-1.5 text-slate-400 hover:text-rose-400 transition-colors">
                                                    <i data-lucide="trash-2" class="w-4 h-4"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </template>
                                </div>
                            </div>

                            <div class="space-y-4">
                                <label
                                    class="form-label text-slate-400 text-[10px] uppercase font-bold tracking-widest">Short
                                    Summary *</label>
                                <textarea name="short_description" id="short_description" required
                                    class="w-full bg-slate-800 border border-slate-700 rounded-2xl px-4 py-4 text-sm text-white focus:ring-2 focus:ring-blue-500 outline-none">{{ old('short_description', $product->short_description) }}</textarea>
                            </div>

                            <div class="space-y-4">
                                <label
                                    class="form-label text-slate-400 text-[10px] uppercase font-bold tracking-widest">Full
                                    Specification (Optional)</label>
                                <textarea name="long_description" id="long_description" rows="6"
                                    class="w-full bg-slate-800 border border-slate-700 rounded-2xl px-4 py-4 text-sm text-white focus:ring-2 focus:ring-blue-500 outline-none">{{ old('long_description', $product->long_description) }}</textarea>
                            </div>
                        </div>
                    </div>

                    <!-- SEO Tab -->
                    <div x-show="activeTab === 'seo'"
                        class="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
                        <div class="glass-card rounded-3xl p-8 border border-white/5 space-y-8">
                            <h3 class="text-xl font-bold text-white flex items-center gap-3">
                                <i data-lucide="search" class="w-5 h-5 text-emerald-400"></i>
                                Search Optimization
                            </h3>

                            <div class="space-y-6">
                                <div class="space-y-2">
                                    <label
                                        class="form-label text-slate-400 text-[10px] uppercase font-bold tracking-widest">URL
                                        Slug</label>
                                    <input type="text" name="slug" value="{{ old('slug', $product->slug) }}"
                                        class="w-full bg-slate-800 border border-slate-700 rounded-xl px-4 py-3 text-sm text-white focus:ring-2 focus:ring-blue-500 outline-none">
                                </div>
                                <div class="space-y-2">
                                    <label
                                        class="form-label text-slate-400 text-[10px] uppercase font-bold tracking-widest">Meta
                                        Title</label>
                                    <input type="text" name="meta_title"
                                        value="{{ old('meta_title', $product->meta_title) }}"
                                        class="w-full bg-slate-800 border border-slate-700 rounded-xl px-4 py-3 text-sm text-white focus:ring-2 focus:ring-blue-500 outline-none">
                                </div>
                                <div class="space-y-2">
                                    <label
                                        class="form-label text-slate-400 text-[10px] uppercase font-bold tracking-widest">Meta
                                        Description</label>
                                    <textarea name="meta_description" rows="3"
                                        class="w-full bg-slate-800 border border-slate-700 rounded-2xl px-4 py-4 text-sm text-white focus:ring-2 focus:ring-blue-500 outline-none">{{ old('meta_description', $product->meta_description) }}</textarea>
                                </div>
                                <div class="space-y-2">
                                    <label
                                        class="form-label text-slate-400 text-[10px] uppercase font-bold tracking-widest">Schema
                                        Markup (JSON-LD)</label>
                                    <textarea name="schema_markup" rows="3"
                                        class="w-full bg-slate-900 font-mono border border-slate-700 rounded-2xl px-4 py-4 text-[10px] text-emerald-400 focus:ring-2 focus:ring-blue-500 outline-none">{{ old('schema_markup', $product->schema_markup) }}</textarea>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Variations Tab -->
                    <div x-show="activeTab === 'variations'"
                        class="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
                        <div class="glass-card rounded-3xl p-8 border border-white/5 space-y-8">
                            <div class="flex items-center justify-between">
                                <h3 class="text-xl font-bold text-white flex items-center gap-3">
                                    <i data-lucide="layers" class="w-5 h-5 text-amber-400"></i>
                                    Product Variations
                                </h3>
                                <button type="button" x-on:click="addVariation()"
                                    class="text-xs font-bold text-blue-400 hover:text-blue-300 transition-colors flex items-center gap-2">
                                    <i data-lucide="plus-circle" class="w-4 h-4"></i>
                                    ADD VARIANT
                                </button>
                            </div>

                            <!-- Attributes Config -->
                            <div class="bg-slate-900/50 rounded-2xl p-6 border border-white/5">
                                <label
                                    class="form-label text-slate-400 text-[10px] uppercase font-bold tracking-widest block mb-4">Define
                                    Attributes (e.g., Size, Weight, Color)</label>
                                <div class="flex flex-wrap gap-2 mb-4">
                                    <template x-for="(attr, index) in attributes" :key="index">
                                        <div
                                            class="flex items-center gap-2 px-3 py-1.5 bg-blue-600/10 border border-blue-500/20 rounded-lg text-xs font-bold text-blue-400 animate-in zoom-in duration-200">
                                            <span x-text="attr"></span>
                                            <button type="button" x-on:click="removeAttribute(index)"
                                                class="hover:text-rose-400">
                                                <i data-lucide="x" class="w-3 h-3"></i>
                                            </button>
                                        </div>
                                    </template>
                                </div>
                                <div class="flex gap-2">
                                    <input type="text" x-model="newAttribute" x-on:keydown.enter.prevent="addAttribute()"
                                        placeholder="Add new attribute..."
                                        class="flex-1 bg-slate-800 border border-slate-700 rounded-xl px-4 py-2.5 text-xs text-white outline-none">
                                    <button type="button" x-on:click="addAttribute()"
                                        class="px-4 py-2.5 bg-blue-600 text-white rounded-xl text-xs font-bold hover:bg-blue-500">
                                        Define
                                    </button>
                                </div>
                            </div>

                            <!-- Variations Table -->
                            <div x-show="variations.length > 0"
                                class="glass-card rounded-2xl overflow-hidden border border-white/5 shadow-2xl animate-in fade-in duration-300">
                                <div class="overflow-x-auto">
                                    <table class="w-full text-left">
                                        <thead class="bg-white/5 border-b border-white/5">
                                            <tr>
                                                <th
                                                    class="px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-slate-500">
                                                    Configuration</th>
                                                <th
                                                    class="px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-slate-500">
                                                    Pricing (MRP/SP)</th>
                                                <th
                                                    class="px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-slate-500 text-center">
                                                    Stock</th>
                                                <th
                                                    class="px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-slate-500 text-right">
                                                    Action</th>
                                            </tr>
                                        </thead>
                                        <tbody class="divide-y divide-white/5">
                                            <template x-for="(v, vIndex) in variations" :key="v.id">
                                                <tr class="hover:bg-white/5 group transition-colors">
                                                    <td class="px-6 py-4">
                                                        <input type="hidden" :name="`variations[${vIndex}][id]`"
                                                            :value="typeof v.id === 'string' ? '' : v.id">
                                                        <div class="flex flex-col gap-2">
                                                            <template x-for="attr in attributes" :key="attr">
                                                                <div class="flex items-center gap-2">
                                                                    <span
                                                                        class="text-[10px] font-bold text-slate-500 uppercase w-16"
                                                                        x-text="attr + ':'"></span>
                                                                    <input type="text"
                                                                        :name="`variations[${vIndex}][attributes][${attr}]`"
                                                                        x-model="v.attributes[attr]" required
                                                                        class="flex-1 bg-slate-800/50 border border-slate-700/50 rounded-lg px-2 py-1 text-xs text-white focus:border-blue-500 outline-none">
                                                                </div>
                                                            </template>
                                                        </div>
                                                    </td>
                                                    <td class="px-6 py-4">
                                                        <div class="flex items-center gap-2">
                                                            <input type="number" step="0.01"
                                                                :name="`variations[${vIndex}][mrp]`" x-model="v.mrp"
                                                                placeholder="MRP"
                                                                class="w-20 bg-slate-800/50 border border-slate-700/50 rounded-lg px-2 py-1 text-xs text-white focus:border-blue-500 outline-none">
                                                            <span class="text-slate-600">/</span>
                                                            <input type="number" step="0.01"
                                                                :name="`variations[${vIndex}][sp]`" x-model="v.sp"
                                                                placeholder="SP"
                                                                class="w-20 bg-slate-800/50 border border-slate-700/50 rounded-lg px-2 py-1 text-xs text-white focus:border-blue-500 outline-none">
                                                        </div>
                                                    </td>
                                                    <td class="px-6 py-4">
                                                        <input type="number" :name="`variations[${vIndex}][stock]`"
                                                            x-model="v.stock"
                                                            class="w-16 mx-auto bg-slate-800/50 border border-slate-700/50 rounded-lg px-2 py-1 text-xs text-center text-white focus:border-blue-500 outline-none">
                                                    </td>
                                                    <td class="px-6 py-4 text-right">
                                                        <button type="button" x-on:click="removeVariation(vIndex)"
                                                            class="p-2 text-slate-500 hover:text-rose-400 hover:bg-rose-400/10 rounded-lg transition-all">
                                                            <i data-lucide="trash-2" class="w-4 h-4"></i>
                                                        </button>
                                                    </td>
                                                </tr>
                                            </template>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Logistics Tab -->
                    <div x-show="activeTab === 'additional'"
                        class="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
                        <div class="glass-card rounded-3xl p-8 border border-white/5 space-y-8">
                            <h3 class="text-xl font-bold text-white flex items-center gap-3">
                                <i data-lucide="truck" class="w-5 h-5 text-blue-400"></i>
                                Logistics & Policy
                            </h3>

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                                <div class="space-y-2">
                                    <label
                                        class="form-label text-slate-400 text-[10px] uppercase font-bold tracking-widest">Dispatch
                                        Days *</label>
                                    <input type="number" name="dispatch_days" required
                                        value="{{ old('dispatch_days', $product->dispatch_days) }}"
                                        class="w-full bg-slate-800 border border-slate-700 rounded-xl px-4 py-3 text-sm text-white focus:ring-2 focus:ring-blue-500 outline-none">
                                </div>
                                <div class="space-y-2">
                                    <label
                                        class="form-label text-slate-400 text-[10px] uppercase font-bold tracking-widest">Country
                                        of Origin</label>
                                    <input type="text" name="country_origin"
                                        value="{{ old('country_origin', $product->country_origin) }}"
                                        class="w-full bg-slate-800 border border-slate-700 rounded-xl px-4 py-3 text-sm text-white focus:ring-2 focus:ring-blue-500 outline-none">
                                </div>
                            </div>

                            <div class="space-y-4">
                                <label class="flex items-center gap-3 cursor-pointer group">
                                    <input type="checkbox" name="is_returnable" value="1" {{ $product->is_returnable ? 'checked' : '' }}
                                        class="w-5 h-5 rounded bg-slate-800 border-slate-700 text-blue-600 focus:ring-0">
                                    <span
                                        class="text-sm font-bold text-slate-400 group-hover:text-white transition-colors">This
                                        product is returnable</span>
                                </label>
                            </div>
                        </div>
                    </div>

                    <!-- Footer Actions -->
                    <div class="flex items-center justify-end gap-4 pb-12">
                        <a href="{{ route('admin.products.index') }}"
                            class="px-8 py-3 rounded-2xl border border-slate-700 text-slate-400 text-sm font-bold hover:bg-slate-800 transition-all">
                            Discard Changes
                        </a>
                        <button type="submit"
                            class="px-10 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-2xl shadow-xl shadow-blue-500/20 font-bold transition-all transform active:scale-95">
                            Save Changes
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <!-- Loader -->
    <div id="edit-loader"
        class="fixed inset-0 bg-slate-950/80 backdrop-blur-xl z-[9999] flex items-center justify-center pointer-events-none opacity-0 transition-opacity duration-300">
        <div class="flex flex-col items-center gap-6">
            <div class="relative w-24 h-24">
                <div class="absolute inset-0 rounded-full border-4 border-blue-500/10"></div>
                <div class="absolute inset-0 rounded-full border-4 border-t-blue-500 animate-spin"></div>
            </div>
            <div class="flex flex-col items-center">
                <h3 class="text-xl font-bold text-white uppercase tracking-widest">Updating Catalog</h3>
                <p class="text-slate-500 text-sm">Please wait while we sync your changes...</p>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        function productEditForm() {
            return {
                activeTab: 'general',
                tabs: [
                    { id: 'general', label: 'Basics', icon: 'info' },
                    { id: 'description', label: 'Media', icon: 'image' },
                    { id: 'additional', label: 'Logistics', icon: 'truck' },
                    { id: 'seo', label: 'SEO', icon: 'search' },
                    { id: 'variations', label: 'Inventory', icon: 'layers' }
                ],
                subcategories: {!! json_encode($subcategories) !!},
                attributes: {!! json_encode($variationAttributes) !!},
                variations: {!! json_encode($variationsData) !!},
                previewImages: [],
                selectedFiles: [],
                sp: '{{ $product->sp }}',
                taxCode: '{{ $product->tax_code ?? 18 }}',
                get basePrice() {
                    if (!this.sp) return 0;
                    return (parseFloat(this.sp) * (100 / (100 + parseFloat(this.taxCode)))).toFixed(2);
                },
                get taxAmount() {
                    if (!this.sp) return 0;
                    return (parseFloat(this.sp) - this.basePrice).toFixed(2);
                },
                async updateSubcategories(catId) {
                    if (!catId) { this.subcategories = []; return; }
                    const res = await fetch(`/admin/categories/${catId}/subcategories`);
                    this.subcategories = await res.json();
                },
                addAttribute() {
                    if (!this.newAttribute?.trim()) return;
                    if (this.attributes.includes(this.newAttribute)) return;
                    this.attributes.push(this.newAttribute);
                    this.newAttribute = '';
                    this.variations.forEach(v => {
                        v.attributes[this.attributes[this.attributes.length - 1]] = '';
                    });
                    this.$nextTick(() => lucide.createIcons());
                },
                removeAttribute(idx) {
                    const attr = this.attributes[idx];
                    this.attributes.splice(idx, 1);
                    this.variations.forEach(v => delete v.attributes[attr]);
                },
                addVariation() {
                    this.variations.push({
                        id: 'temp_' + Date.now(),
                        mrp: this.sp,
                        sp: this.sp,
                        stock: 100,
                        attributes: Object.fromEntries(this.attributes.map(a => [a, '']))
                    });
                    this.$nextTick(() => lucide.createIcons());
                },
                removeVariation(idx) {
                    this.variations.splice(idx, 1);
                },
                handleFileUpload(e) {
                    const files = Array.from(e.target.files);
                    this.selectedFiles = [...this.selectedFiles, ...files];
                    this.updatePreviews();
                },
                updatePreviews() {
                    this.previewImages = this.selectedFiles.map(file => ({
                        name: file.name,
                        url: URL.createObjectURL(file)
                    }));
                    this.$nextTick(() => lucide.createIcons());
                },
                removePreviewImage(idx) {
                    this.selectedFiles.splice(idx, 1);
                    this.updatePreviews();
                    this.syncFileInput();
                },
                syncFileInput() {
                    const dt = new DataTransfer();
                    this.selectedFiles.forEach(f => dt.items.add(f));
                    document.getElementById('dropzone-file').files = dt.files;
                },
                submitForm(form) {
                    document.getElementById('edit-loader').classList.remove('opacity-0');
                    document.getElementById('edit-loader').classList.add('opacity-100');
                    form.submit();
                }
            }
        }

        async function deleteImage(imageId) {
            if (!confirm('Permanently remove this image?')) return;
            const res = await fetch(`/admin/products/images/${imageId}`, {
                method: 'DELETE',
                headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
            });
            const data = await res.json();
            if (data.success) document.getElementById(`image-${imageId}`).remove();
        }

        async function setDefaultImage(productId, imageId) {
            const res = await fetch(`/admin/products/${productId}/images/${imageId}/default`, {
                method: 'POST',
                headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
            });
            if (res.ok) window.location.reload();
        }
    </script>
    <script src="https://cdn.ckeditor.com/ckeditor5/35.1.0/classic/ckeditor.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            ClassicEditor.create(document.querySelector('#short_description')).catch(console.error);
            ClassicEditor.create(document.querySelector('#long_description')).catch(console.error);
        });
    </script>
@endpush