@extends('admin.layouts.app')

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

@section('content')
    <div class="max-w-6xl mx-auto space-y-6" x-data="productForm()">
        <!-- 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">Add Product</h1>
                <p class="text-slate-400 mt-1">Create a new product listing in your catalog.</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.store') }}" method="POST" enctype="multipart/form-data"
            x-on:submit.prevent="submitForm($el)" id="product-create-form">
            @csrf

            <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 }}">{{ $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"></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 placeholder="e.g., Premium Astro Gemstone"
                                    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 placeholder="0.00"
                                            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 placeholder="0.00"
                                            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" placeholder="Defaults to SP"
                                            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="1" 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>

                    <!-- Description & Images -->
                    <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>

                            <div class="space-y-4">
                                <label
                                    class="form-label text-slate-400 text-[10px] uppercase font-bold tracking-widest">Gallery
                                    Upload</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 or drag gallery</p>
                                        <p class="text-[10px] text-slate-500 uppercase tracking-widest">PNG, JPG, WEBP (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">
                                    <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-between opacity-0 group-hover:opacity-100 transition-opacity">
                                                <button type="button" x-on:click="setAsDefault(index)"
                                                    class="p-1 text-slate-400 hover:text-yellow-400 transition-colors"
                                                    :class="index === 0 ? 'text-yellow-400' : ''">
                                                    <i data-lucide="star" class="w-3.5 h-3.5"
                                                        :fill="index === 0 ? 'currentColor' : 'none'"></i>
                                                </button>
                                                <button type="button" x-on:click="removeImage(index)"
                                                    class="p-1 text-slate-400 hover:text-rose-400 transition-colors">
                                                    <i data-lucide="trash-2" class="w-3.5 h-3.5"></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" required rows="3"
                                    placeholder="Brief tagline or summary..."
                                    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"></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" rows="6" placeholder="Detailed product details..."
                                    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"></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">Meta
                                        Title</label>
                                    <input type="text" name="meta_title" placeholder="SEO optimized 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" placeholder="SEO optimized description"
                                        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"></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"
                                        placeholder='{"&#64;context": "https://schema.org/", ...}'
                                        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"></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">
                                                        <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="3"
                                        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="India"
                                        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" 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
                        </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">
                            Create Listing
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@push('scripts')
    <script>
        function productForm() {
            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: [],
                attributes: [],
                newAttribute: '',
                variations: [],
                previewImages: [],
                selectedFiles: [],
                sp: '',
                taxCode: '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: 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());
                },
                removeImage(idx) {
                    this.selectedFiles.splice(idx, 1);
                    this.updatePreviews();
                    this.syncFileInput();
                },
                setAsDefault(idx) {
                    if (idx === 0) return;
                    const file = this.selectedFiles.splice(idx, 1)[0];
                    this.selectedFiles.unshift(file);
                    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) {
                    form.submit();
                }
            }
        }
    </script>
@endpush