@extends('layouts.admin')

@section('title', 'Add Product - Orange Groceries Admin')
@section('header_title', 'Create New Product')

@section('content')
<div class="max-w-4xl mx-auto bg-white rounded-3xl p-8 border border-slate-200/80 shadow-sm space-y-6">
    <div class="flex items-center justify-between border-b border-slate-100 pb-4">
        <h3 class="font-extrabold text-slate-900 text-lg">Product Details Form</h3>
        <a href="{{ route('admin.products.index') }}" class="text-xs font-bold text-slate-500 hover:underline">Back to List</a>
    </div>

    @if ($errors->any())
        <div class="bg-rose-50 border border-rose-200 text-rose-800 p-4 rounded-2xl space-y-2">
            <div class="flex items-center gap-2 font-extrabold text-xs uppercase tracking-wider">
                <i class="fa-solid fa-triangle-exclamation text-rose-600 text-sm"></i>
                <span>Please fix the following validation errors:</span>
            </div>
            <ul class="list-disc list-inside text-xs font-semibold text-rose-700 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" class="space-y-6" 
          x-data="{ 
              categories: {{ json_encode($categories) }},
              selectedCategory: '{{ old('category_id', $categories->first()->id ?? '') }}',
              selectedSubcategory: '{{ old('subcategory_id', '') }}',
              get currentSubcategories() {
                  const cat = this.categories.find(c => c.id == this.selectedCategory);
                  return cat ? (cat.subcategories || []) : [];
              },
              variants: [],
              addVariant(name = '', mrp = '', disc = '', stock = 50) {
                  this.variants.push({
                      name: name,
                      selling_price: mrp,
                      discount_price: disc,
                      stock_quantity: stock,
                      sku: ''
                  });
              },
              removeVariant(index) {
                  this.variants.splice(index, 1);
              }
          }">
        @csrf

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-xs font-medium">
            <div>
                <label class="block font-bold text-slate-700 uppercase tracking-wider mb-1">Product Name *</label>
                <input type="text" name="name" required value="{{ old('name') }}" placeholder="e.g. Lasa Lamsa Mix Tea" class="w-full px-4 py-3 rounded-xl border @error('name') border-rose-500 bg-rose-50/20 @else border-slate-200 @enderror text-sm font-semibold">
                @error('name')
                    <p class="text-rose-600 font-bold text-[11px] mt-1"><i class="fa-solid fa-circle-exclamation"></i> {{ $message }}</p>
                @enderror
            </div>

            <div>
                <label class="block font-bold text-slate-700 uppercase tracking-wider mb-1">URL Slug / Permalink</label>
                <input type="text" name="slug" value="{{ old('slug') }}" placeholder="e.g. lasa-lamsa-mix-tea (auto-generated if empty)" class="w-full px-4 py-3 rounded-xl border @error('slug') border-rose-500 bg-rose-50/20 @else border-slate-200 @enderror text-sm font-mono text-slate-600">
                <p class="text-[10px] text-slate-400 mt-1">Leave empty to auto-generate a clean SEO slug from the product name.</p>
                @error('slug')
                    <p class="text-rose-600 font-bold text-[11px] mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label class="block font-bold text-slate-700 uppercase tracking-wider mb-1">Category *</label>
                <select name="category_id" x-model="selectedCategory" @change="selectedSubcategory = ''" required class="w-full px-4 py-3 rounded-xl border @error('category_id') border-rose-500 bg-rose-50/20 @else border-slate-200 @enderror font-bold">
                    <option value="">-- Select Category --</option>
                    <template x-for="cat in categories" :key="cat.id">
                        <option :value="cat.id" x-text="cat.name" :selected="cat.id == selectedCategory"></option>
                    </template>
                </select>
                @error('category_id')
                    <p class="text-rose-600 font-bold text-[11px] mt-1"><i class="fa-solid fa-circle-exclamation"></i> {{ $message }}</p>
                @enderror
            </div>

            <div>
                <label class="block font-bold text-slate-700 uppercase tracking-wider mb-1">Subcategory</label>
                <select name="subcategory_id" x-model="selectedSubcategory" class="w-full px-4 py-3 rounded-xl border @error('subcategory_id') border-rose-500 bg-rose-50/20 @else border-slate-200 @enderror font-medium">
                    <option value="">-- Optional Subcategory --</option>
                    <template x-for="sub in currentSubcategories" :key="sub.id">
                        <option :value="sub.id" x-text="sub.name" :selected="sub.id == selectedSubcategory"></option>
                    </template>
                </select>
                @error('subcategory_id')
                    <p class="text-rose-600 font-bold text-[11px] mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label class="block font-bold text-slate-700 uppercase tracking-wider mb-1">Brand Name</label>
                <input type="text" name="brand" value="{{ old('brand') }}" placeholder="e.g. FarmFresh, Amul" class="w-full px-4 py-2.5 rounded-xl border @error('brand') border-rose-500 @else border-slate-200 @enderror">
                @error('brand')
                    <p class="text-rose-600 font-bold text-[11px] mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label class="block font-bold text-slate-700 uppercase tracking-wider mb-1">Weight / Unit Label</label>
                <input type="text" name="weight" value="{{ old('weight') }}" placeholder="e.g. 1 KG, 500 ml, 250 g" class="w-full px-4 py-2.5 rounded-xl border @error('weight') border-rose-500 @else border-slate-200 @enderror">
                @error('weight')
                    <p class="text-rose-600 font-bold text-[11px] mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label class="block font-bold text-slate-700 uppercase tracking-wider mb-1">SKU Code</label>
                <input type="text" name="sku" value="{{ old('sku') }}" placeholder="Auto-generated if empty" class="w-full px-4 py-2.5 rounded-xl border @error('sku') border-rose-500 @else border-slate-200 @enderror font-mono">
                @error('sku')
                    <p class="text-rose-600 font-bold text-[11px] mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label class="block font-bold text-slate-700 uppercase tracking-wider mb-1">Barcode Code</label>
                <input type="text" name="barcode" value="{{ old('barcode') }}" placeholder="Auto-generated if empty" class="w-full px-4 py-2.5 rounded-xl border @error('barcode') border-rose-500 @else border-slate-200 @enderror font-mono">
                @error('barcode')
                    <p class="text-rose-600 font-bold text-[11px] mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label class="block font-bold text-slate-700 uppercase tracking-wider mb-1">Purchase Price (Cost)</label>
                <input type="number" step="0.01" name="purchase_price" value="{{ old('purchase_price', '0.00') }}" class="w-full px-4 py-2.5 rounded-xl border @error('purchase_price') border-rose-500 @else border-slate-200 @enderror font-bold">
                @error('purchase_price')
                    <p class="text-rose-600 font-bold text-[11px] mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label class="block font-bold text-slate-700 uppercase tracking-wider mb-1">Selling Price (MRP) *</label>
                <input type="number" step="0.01" name="selling_price" required value="{{ old('selling_price') }}" placeholder="100.00" class="w-full px-4 py-2.5 rounded-xl border @error('selling_price') border-rose-500 bg-rose-50/20 @else border-slate-200 @enderror font-bold text-slate-900">
                @error('selling_price')
                    <p class="text-rose-600 font-bold text-[11px] mt-1"><i class="fa-solid fa-circle-exclamation"></i> {{ $message }}</p>
                @enderror
            </div>

            <div>
                <label class="block font-bold text-slate-700 uppercase tracking-wider mb-1">Discount Price (Offer Price)</label>
                <input type="number" step="0.01" name="discount_price" value="{{ old('discount_price') }}" placeholder="89.00" class="w-full px-4 py-2.5 rounded-xl border @error('discount_price') border-rose-500 @else border-slate-200 @enderror font-bold text-brand-700">
                @error('discount_price')
                    <p class="text-rose-600 font-bold text-[11px] mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label class="block font-bold text-slate-700 uppercase tracking-wider mb-1">GST %</label>
                <input type="number" step="0.01" name="gst_percent" value="{{ old('gst_percent', '0.00') }}" class="w-full px-4 py-2.5 rounded-xl border @error('gst_percent') border-rose-500 @else border-slate-200 @enderror font-bold">
                @error('gst_percent')
                    <p class="text-rose-600 font-bold text-[11px] mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label class="block font-bold text-slate-700 uppercase tracking-wider mb-1">Initial Stock Quantity *</label>
                <input type="number" name="stock_quantity" required value="{{ old('stock_quantity', '50') }}" class="w-full px-4 py-2.5 rounded-xl border @error('stock_quantity') border-rose-500 bg-rose-50/20 @else border-slate-200 @enderror font-bold">
                @error('stock_quantity')
                    <p class="text-rose-600 font-bold text-[11px] mt-1"><i class="fa-solid fa-circle-exclamation"></i> {{ $message }}</p>
                @enderror
            </div>

            <div>
                <label class="block font-bold text-slate-700 uppercase tracking-wider mb-1">Low Stock Alert Limit</label>
                <input type="number" name="min_stock_alert" value="{{ old('min_stock_alert', '5') }}" class="w-full px-4 py-2.5 rounded-xl border @error('min_stock_alert') border-rose-500 @else border-slate-200 @enderror font-bold">
                @error('min_stock_alert')
                    <p class="text-rose-600 font-bold text-[11px] mt-1">{{ $message }}</p>
                @enderror
            </div>

            <!-- BigBasket-Style Pack Sizes & Weight Variants Builder -->
            <div class="sm:col-span-2 bg-gradient-to-br from-emerald-50/60 to-teal-50/40 p-5 rounded-2xl border border-emerald-200/80 space-y-4">
                <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-2 border-b border-emerald-200/70 pb-3">
                    <div class="flex items-center gap-2.5">
                        <div class="w-8 h-8 rounded-xl bg-emerald-600 text-white flex items-center justify-center text-xs font-black shadow-sm">
                            <i class="fa-solid fa-boxes-stacked"></i>
                        </div>
                        <div>
                            <span class="font-black text-slate-900 text-xs uppercase tracking-wider">Pack Sizes & Weight Variants</span>
                            <span class="text-[10px] text-emerald-800 font-bold bg-emerald-100/70 px-2 py-0.5 rounded-md ml-1.5">BigBasket Style</span>
                            <p class="text-[11px] text-slate-500 font-medium mt-0.5">Add pack options (e.g. 250g, 500g, 1kg) so customers can switch pack sizes with dynamic pricing & stock!</p>
                        </div>
                    </div>
                    
                    <button type="button" @click="addVariant('', '', '', 50)" class="bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-extrabold px-3 py-1.5 rounded-xl transition shadow-xs flex items-center gap-1.5 w-fit">
                        <i class="fa-solid fa-plus text-[10px]"></i> Add Custom Pack
                    </button>
                </div>

                <!-- Quick Preset Buttons -->
                <div class="flex items-center gap-1.5 flex-wrap text-xs">
                    <span class="text-[11px] font-bold text-slate-500 mr-1">Quick Add Presets:</span>
                    <button type="button" @click="addVariant('100 g', '', '', 50)" class="px-2.5 py-1 rounded-lg bg-white border border-emerald-200 text-emerald-800 hover:bg-emerald-600 hover:text-white font-bold text-[11px] transition shadow-2xs">+ 100g</button>
                    <button type="button" @click="addVariant('250 g', '', '', 50)" class="px-2.5 py-1 rounded-lg bg-white border border-emerald-200 text-emerald-800 hover:bg-emerald-600 hover:text-white font-bold text-[11px] transition shadow-2xs">+ 250g</button>
                    <button type="button" @click="addVariant('500 g', '', '', 50)" class="px-2.5 py-1 rounded-lg bg-white border border-emerald-200 text-emerald-800 hover:bg-emerald-600 hover:text-white font-bold text-[11px] transition shadow-2xs">+ 500g</button>
                    <button type="button" @click="addVariant('1 KG', '', '', 50)" class="px-2.5 py-1 rounded-lg bg-white border border-emerald-200 text-emerald-800 hover:bg-emerald-600 hover:text-white font-bold text-[11px] transition shadow-2xs">+ 1 KG</button>
                    <button type="button" @click="addVariant('2 KG', '', '', 50)" class="px-2.5 py-1 rounded-lg bg-white border border-emerald-200 text-emerald-800 hover:bg-emerald-600 hover:text-white font-bold text-[11px] transition shadow-2xs">+ 2 KG</button>
                    <button type="button" @click="addVariant('5 KG', '', '', 50)" class="px-2.5 py-1 rounded-lg bg-white border border-emerald-200 text-emerald-800 hover:bg-emerald-600 hover:text-white font-bold text-[11px] transition shadow-2xs">+ 5 KG</button>
                </div>

                <!-- Variants Table -->
                <template x-if="variants.length > 0">
                    <div class="overflow-x-auto bg-white rounded-2xl border border-emerald-200/80 p-3 shadow-xs">
                        <table class="w-full text-left text-xs">
                            <thead>
                                <tr class="text-slate-500 font-extrabold uppercase text-[10px] border-b border-slate-100 pb-2">
                                    <th class="pb-2 px-2">Pack Name / Weight *</th>
                                    <th class="pb-2 px-2">Selling Price (MRP ₹) *</th>
                                    <th class="pb-2 px-2">Discount Price (Offer ₹)</th>
                                    <th class="pb-2 px-2">Stock Qty</th>
                                    <th class="pb-2 px-2">SKU Code</th>
                                    <th class="pb-2 px-2 text-center">Remove</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-100">
                                <template x-for="(v, index) in variants" :key="index">
                                    <tr>
                                        <td class="py-2 px-2">
                                            <input type="text" :name="'variants[' + index + '][name]'" x-model="v.name" required placeholder="e.g. 250 g - Pouch" class="w-full px-2.5 py-1.5 rounded-lg border border-slate-200 text-xs font-bold">
                                        </td>
                                        <td class="py-2 px-2">
                                            <input type="number" step="0.01" :name="'variants[' + index + '][selling_price]'" x-model="v.selling_price" required placeholder="50.00" class="w-full px-2.5 py-1.5 rounded-lg border border-slate-200 text-xs font-black text-slate-900">
                                        </td>
                                        <td class="py-2 px-2">
                                            <input type="number" step="0.01" :name="'variants[' + index + '][discount_price]'" x-model="v.discount_price" placeholder="45.00" class="w-full px-2.5 py-1.5 rounded-lg border border-slate-200 text-xs font-bold text-emerald-700">
                                        </td>
                                        <td class="py-2 px-2">
                                            <input type="number" :name="'variants[' + index + '][stock_quantity]'" x-model="v.stock_quantity" placeholder="50" class="w-full px-2.5 py-1.5 rounded-lg border border-slate-200 text-xs font-bold">
                                        </td>
                                        <td class="py-2 px-2">
                                            <input type="text" :name="'variants[' + index + '][sku]'" x-model="v.sku" placeholder="Optional SKU" class="w-full px-2.5 py-1.5 rounded-lg border border-slate-200 text-xs font-mono">
                                        </td>
                                        <td class="py-2 px-2 text-center">
                                            <button type="button" @click="removeVariant(index)" class="w-7 h-7 rounded-lg bg-rose-50 hover:bg-rose-500 text-rose-600 hover:text-white transition flex items-center justify-center mx-auto cursor-pointer" title="Delete Variant">
                                                <i class="fa-solid fa-trash text-xs"></i>
                                            </button>
                                        </td>
                                    </tr>
                                </template>
                            </tbody>
                        </table>
                    </div>
                </template>

                <template x-if="variants.length === 0">
                    <div class="p-4 rounded-xl bg-white/70 border border-emerald-200/50 text-center text-slate-500 text-xs font-medium">
                        No pack size variants added yet. (If none added, the single default price & weight above will be used).
                    </div>
                </template>
            </div>

            <!-- Upload Product Image File & Multiple Images -->
            <div class="sm:col-span-2 bg-slate-50 p-5 rounded-2xl border border-slate-200 space-y-4">
                <div class="flex items-center justify-between border-b border-slate-200 pb-2">
                    <span class="font-extrabold text-slate-800 text-xs uppercase tracking-wider">Product Image Gallery Settings</span>
                    <span class="text-[11px] font-bold text-brand-600 bg-brand-50 px-2.5 py-0.5 rounded-full">Primary & Gallery Support</span>
                </div>
                
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label class="block font-bold text-slate-700 uppercase tracking-wider mb-1">Primary Cover Image File</label>
                        <input type="file" name="image_file" accept="image/*" class="w-full text-xs text-slate-500 file:mr-3 file:py-2 file:px-3 file:rounded-xl file:border-0 file:text-xs file:font-bold file:bg-slate-900 file:text-white hover:file:bg-slate-800 cursor-pointer border border-slate-200 rounded-xl bg-white">
                        @error('image_file')
                            <p class="text-rose-600 font-bold text-[11px] mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                    <div>
                        <label class="block font-bold text-slate-700 uppercase tracking-wider mb-1">OR Primary Image URL</label>
                        <input type="text" name="image_url" value="{{ old('image_url') }}" placeholder="https://images.unsplash.com/..." class="w-full px-4 py-2 rounded-xl border border-slate-200 bg-white">
                        @error('image_url')
                            <p class="text-rose-600 font-bold text-[11px] mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <div class="border-t border-slate-200/80 pt-3 grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label class="block font-bold text-slate-700 uppercase tracking-wider mb-1">Upload Additional Gallery Images (Multiple)</label>
                        <input type="file" name="multiple_image_files[]" multiple accept="image/*" class="w-full text-xs text-slate-500 file:mr-3 file:py-2 file:px-3 file:rounded-xl file:border-0 file:text-xs file:font-bold file:bg-brand-600 file:text-white hover:file:bg-brand-700 cursor-pointer border border-slate-200 rounded-xl bg-white">
                        <p class="text-[10px] text-slate-400 font-semibold mt-1">Hold Ctrl/Cmd to select multiple image files at once.</p>
                    </div>
                    <div>
                        <label class="block font-bold text-slate-700 uppercase tracking-wider mb-1">OR Additional Image URLs (Separated by commas/newlines)</label>
                        <textarea name="multiple_image_urls" rows="2" placeholder="https://img1.com/a.jpg, https://img2.com/b.jpg" class="w-full px-4 py-2 rounded-xl border border-slate-200 bg-white text-xs">{{ old('multiple_image_urls') }}</textarea>
                    </div>
                </div>
            </div>

            <div class="sm:col-span-2">
                <label class="block font-bold text-slate-700 uppercase tracking-wider mb-1">Description</label>
                <textarea name="description" rows="3" class="w-full px-4 py-2.5 rounded-xl border @error('description') border-rose-500 @else border-slate-200 @enderror" placeholder="Product features & grocery origin details...">{{ old('description') }}</textarea>
                @error('description')
                    <p class="text-rose-600 font-bold text-[11px] mt-1">{{ $message }}</p>
                @enderror
            </div>

            <!-- SEO & Meta Tags Optimization (Optional Override) -->
            <div class="sm:col-span-2 bg-gradient-to-br from-emerald-50/50 to-teal-50/40 p-5 rounded-2xl border border-emerald-200/80 space-y-4" x-data="{ openSeo: false }">
                <div class="flex items-center justify-between cursor-pointer" @click="openSeo = !openSeo">
                    <div class="flex items-center gap-2">
                        <div class="w-7 h-7 rounded-lg bg-emerald-100 text-emerald-700 flex items-center justify-center text-xs font-bold">
                            <i class="fa-solid fa-magnifying-glass-chart"></i>
                        </div>
                        <div>
                            <span class="font-extrabold text-slate-900 text-xs uppercase tracking-wider">SEO & Dynamic Meta Tags</span>
                            <span class="text-[10px] text-slate-400 font-semibold ml-2">(Optional Custom Overrides)</span>
                        </div>
                    </div>
                    <button type="button" class="text-xs font-bold text-emerald-700 flex items-center gap-1">
                        <span x-text="openSeo ? 'Hide SEO Fields' : 'Customize SEO'"></span>
                        <i class="fa-solid fa-chevron-down transition-transform" :class="openSeo ? 'rotate-180' : ''"></i>
                    </button>
                </div>

                <div x-show="openSeo" x-transition class="space-y-3 pt-3 border-t border-emerald-100 text-xs">
                    <div>
                        <label class="block font-bold text-slate-700 uppercase tracking-wider text-[11px] mb-1">Custom Meta Title</label>
                        <input type="text" name="meta_title" value="{{ old('meta_title') }}" placeholder="e.g. Lasa Lamsa Tea (500g) - Orange Groceries" class="w-full px-4 py-2.5 rounded-xl border border-slate-200 bg-white font-medium">
                        <p class="text-[10px] text-slate-400 mt-0.5">Leave empty to use automatic SEO title: "{Product Name} ({Weight}) - {Store Name}"</p>
                    </div>

                    <div>
                        <label class="block font-bold text-slate-700 uppercase tracking-wider text-[11px] mb-1">Custom Meta Description</label>
                        <textarea name="meta_description" rows="2" placeholder="e.g. Buy authentic Lasa Lamsa Tea online at best discounted price with fast 30-min express delivery..." class="w-full px-4 py-2 rounded-xl border border-slate-200 bg-white font-medium">{{ old('meta_description') }}</textarea>
                        <p class="text-[10px] text-slate-400 mt-0.5">Leave empty to auto-generate from product description & price.</p>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                        <div>
                            <label class="block font-bold text-slate-700 uppercase tracking-wider text-[11px] mb-1">Custom Meta Keywords</label>
                            <input type="text" name="meta_keywords" value="{{ old('meta_keywords') }}" placeholder="e.g. lasa lamsa tea, buy tea online, grocery" class="w-full px-4 py-2.5 rounded-xl border border-slate-200 bg-white font-medium">
                        </div>
                        <div>
                            <label class="block font-bold text-slate-700 uppercase tracking-wider text-[11px] mb-1">Custom Canonical URL</label>
                            <input type="text" name="canonical_url" value="{{ old('canonical_url') }}" placeholder="https://..." class="w-full px-4 py-2.5 rounded-xl border border-slate-200 bg-white font-medium">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Badges & Visibility -->
        <div class="border-t border-slate-100 pt-4 grid grid-cols-2 sm:grid-cols-4 gap-3 text-xs font-bold text-slate-700">
            <label class="flex items-center gap-2 cursor-pointer p-2.5">
                <input type="checkbox" name="is_featured" value="1" {{ old('is_featured') ? 'checked' : '' }} class="rounded text-brand-600">
                <span>Featured Product</span>
            </label>
            <label class="flex items-center gap-2 cursor-pointer p-2.5">
                <input type="checkbox" name="is_bestseller" value="1" {{ old('is_bestseller') ? 'checked' : '' }} class="rounded text-brand-600">
                <span>Best Seller</span>
            </label>
            <label class="flex items-center gap-2 cursor-pointer p-2.5">
                <input type="checkbox" name="is_trending" value="1" {{ old('is_trending') ? 'checked' : '' }} class="rounded text-brand-600">
                <span>Trending Product</span>
            </label>
            <label class="flex items-center gap-2 cursor-pointer p-2.5">
                <input type="checkbox" name="is_new_arrival" value="1" {{ old('is_new_arrival', 1) ? 'checked' : '' }} class="rounded text-brand-600">
                <span>New Arrival</span>
            </label>
        </div>

        <button type="submit" class="w-full bg-brand-600 hover:bg-brand-700 text-white font-extrabold text-sm py-4 rounded-2xl shadow-lg transition">
            Save Product To Catalog & Publish
        </button>
    </form>
</div>
@endsection