@extends('layouts.admin')

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

@section('page-title', 'Add Wholesale Product')

@section('content')
<div class="py-6" x-data="{
    activeTab: 'product-info',
    wholesalePrices: [{ min_qty: 1, max_qty: '', price: '' }],
    addWholesalePrice() {
        this.wholesalePrices.push({ min_qty: '', max_qty: '', price: '' });
    },
    removeWholesalePrice(index) {
        if (this.wholesalePrices.length > 1) this.wholesalePrices.splice(index, 1);
    },
    generateBarcode() {
        this.$refs.barcode.value = 'WP-' + Date.now().toString().slice(-8) + Math.floor(Math.random() * 100);
    },
    generateSku() {
        this.$refs.sku.value = 'SKU-' + Date.now().toString().slice(-6) + Math.floor(Math.random() * 100);
    }
}">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {{-- Tabs Navigation --}}
        <div class="mb-6 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200">
                <nav class="flex gap-1 overflow-x-auto" role="tablist">
                    @php
                        $tabs = [
                            ['id' => 'product-info', 'label' => 'Product Information'],
                            ['id' => 'images-videos', 'label' => 'Images & Videos'],
                            ['id' => 'price-stock', 'label' => 'Price & Stock'],
                            ['id' => 'description', 'label' => 'Description'],
                            ['id' => 'shipping', 'label' => 'Shipping Info'],
                            ['id' => 'others', 'label' => 'Others'],
                            ['id' => 'seo', 'label' => 'SEO'],
                        ];
                    @endphp
                    @foreach($tabs as $tab)
                    <button type="button"
                        @click="activeTab = '{{ $tab['id'] }}'"
                        :class="activeTab === '{{ $tab['id'] }}' ? 'bg-indigo-50 text-indigo-700 border-indigo-600' : 'text-gray-600 border-transparent hover:text-gray-800 hover:border-gray-300'"
                        class="px-4 py-2 text-sm font-medium border-b-2 transition-colors whitespace-nowrap rounded-t-lg">
                        {{ $tab['label'] }}
                    </button>
                    @endforeach
                </nav>
            </div>
        </div>

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

            {{-- Product Information Tab --}}
            <div x-show="activeTab === 'product-info'" x-cloak>
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200">
                        <h2 class="text-lg font-semibold text-gray-900">Product Information</h2>
                    </div>
                    <div class="p-6 space-y-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Product Name <span class="text-red-500">*</span></label>
                            <input type="text" name="name" required class="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm" placeholder="Product Name">
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Category</label>
                                <select name="category_id" class="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm bg-white">
                                    <option value="">Select Category</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Brand</label>
                                <select name="brand_id" class="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm bg-white">
                                    <option value="">Select Brand</option>
                                </select>
                            </div>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Unit <span class="text-red-500">*</span></label>
                                <input type="text" name="unit" required class="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm" placeholder="Unit (e.g. kg, pc, etc)">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Min. Order Quantity <span class="text-red-500">*</span></label>
                                <input type="number" name="min_order_quantity" value="1" min="1" class="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm">
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Barcode</label>
                            <div class="flex gap-2">
                                <input type="text" name="barcode" x-ref="barcode" class="flex-1 px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm" placeholder="Enter product barcode">
                                <button type="button" @click="generateBarcode()" class="px-4 py-2.5 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors text-sm font-medium">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-18.357-5.349m0 0A8.001 8.001 0 0115 4.582M12 2v4"/></svg>
                                </button>
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Slug</label>
                            <input type="text" name="slug" class="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm" placeholder="Product Slug">
                        </div>
                    </div>
                </div>
            </div>

            {{-- Images & Videos Tab --}}
            <div x-show="activeTab === 'images-videos'" x-cloak>
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden mb-6">
                    <div class="px-6 py-4 border-b border-gray-200">
                        <h2 class="text-lg font-semibold text-gray-900">Product Images</h2>
                    </div>
                    <div class="p-6">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Thumbnail Image <span class="text-red-500">*</span></label>
                                <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg hover:border-indigo-400 transition-colors cursor-pointer" onclick="document.getElementById('thumbnail').click()">
                                    <div class="space-y-1 text-center" id="thumbnail-preview">
                                        <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48"><path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                                        <div class="text-sm text-gray-600">
                                            <span class="font-medium text-indigo-600">Click to upload</span>
                                        </div>
                                        <p class="text-xs text-gray-500">PNG, JPG up to 5MB</p>
                                    </div>
                                </div>
                                <input type="file" name="thumbnail" id="thumbnail" accept="image/*" class="hidden" onchange="previewImage(this, 'thumbnail-preview')">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Gallery Images</label>
                                <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg hover:border-indigo-400 transition-colors cursor-pointer" onclick="document.getElementById('gallery').click()">
                                    <div class="space-y-1 text-center" id="gallery-preview">
                                        <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48"><path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                                        <div class="text-sm text-gray-600">
                                            <span class="font-medium text-indigo-600">Click to upload</span>
                                        </div>
                                        <p class="text-xs text-gray-500">Multiple images, PNG, JPG up to 5MB each</p>
                                    </div>
                                </div>
                                <input type="file" name="gallery[]" id="gallery" accept="image/*" multiple class="hidden" onchange="previewMultipleImages(this, 'gallery-preview')">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200">
                        <h2 class="text-lg font-semibold text-gray-900">Product Video</h2>
                    </div>
                    <div class="p-6">
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Video Provider</label>
                                <select name="video_provider" class="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm bg-white">
                                    <option value="">Select provider</option>
                                    <option value="youtube">YouTube</option>
                                    <option value="vimeo">Vimeo</option>
                                    <option value="mp4">MP4</option>
                                </select>
                            </div>
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-2">Video URL</label>
                                <input type="text" name="video_url" class="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm" placeholder="https://">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Price & Stock Tab --}}
            <div x-show="activeTab === 'price-stock'" x-cloak>
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden mb-6">
                    <div class="px-6 py-4 border-b border-gray-200">
                        <h2 class="text-lg font-semibold text-gray-900">Product Price</h2>
                    </div>
                    <div class="p-6 space-y-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Unit Price <span class="text-red-500">*</span></label>
                            <input type="number" name="price" required min="0" step="any" class="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm" placeholder="0">
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden mb-6">
                    <div class="px-6 py-4 border-b border-gray-200">
                        <h2 class="text-lg font-semibold text-gray-900">Wholesale Prices</h2>
                    </div>
                    <div class="p-6">
                        <template x-for="(wp, index) in wholesalePrices" :key="index">
                            <div class="flex gap-4 items-end mb-4">
                                <div class="flex-1">
                                    <label class="block text-sm font-medium text-gray-700 mb-1">Min Qty</label>
                                    <input type="number" x-model="wp.min_qty" :name="'wholesale[' + index + '][min_qty]'" min="0" class="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm" placeholder="Minimum QTY">
                                </div>
                                <div class="flex-1">
                                    <label class="block text-sm font-medium text-gray-700 mb-1">Max Qty</label>
                                    <input type="number" x-model="wp.max_qty" :name="'wholesale[' + index + '][max_qty]'" min="0" class="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm" placeholder="Maximum QTY">
                                </div>
                                <div class="flex-1">
                                    <label class="block text-sm font-medium text-gray-700 mb-1">Price per unit</label>
                                    <input type="number" x-model="wp.price" :name="'wholesale[' + index + '][price]'" min="0" step="any" class="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm" placeholder="Price">
                                </div>
                                <button type="button" @click="removeWholesalePrice(index)" x-show="wholesalePrices.length > 1" class="px-3 py-2.5 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                                </button>
                            </div>
                        </template>
                        <button type="button" @click="addWholesalePrice()" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors text-sm font-medium">Add More</button>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200">
                        <h2 class="text-lg font-semibold text-gray-900">Product Stock</h2>
                    </div>
                    <div class="p-6">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">SKU</label>
                                <div class="flex gap-2">
                                    <input type="text" name="sku" x-ref="sku" class="flex-1 px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm" placeholder="Enter product SKU">
                                    <button type="button" @click="generateSku()" class="px-4 py-2.5 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors text-sm font-medium">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-18.357-5.349m0 0A8.001 8.001 0 0115 4.582M12 2v4"/></svg>
                                    </button>
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Current Stock</label>
                                <input type="number" name="current_stock" min="0" class="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm" placeholder="Enter current stock">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Low Stock Warning</label>
                                <input type="number" name="low_stock_threshold" min="0" class="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm" placeholder="Min stock alert">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Stock Visibility</label>
                                <select name="stock_visibility" class="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm bg-white">
                                    <option value="hide_stock">Hide Stock</option>
                                    <option value="visible_with_quantity">Visible with quantity</option>
                                    <option value="visible_with_text">Visible with text</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Description Tab --}}
            <div x-show="activeTab === 'description'" x-cloak>
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden mb-6">
                    <div class="px-6 py-4 border-b border-gray-200">
                        <h2 class="text-lg font-semibold text-gray-900">Short Description</h2>
                    </div>
                    <div class="p-6">
                        <textarea name="short_description" rows="3" maxlength="200" class="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm" placeholder="Brief product description (max 200 characters)" oninput="this.nextElementSibling.textContent = 200 - this.value.length"></textarea>
                        <p class="mt-1 text-xs text-gray-500 text-right"><span>200</span> characters left</p>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden mb-6">
                    <div class="px-6 py-4 border-b border-gray-200">
                        <h2 class="text-lg font-semibold text-gray-900">Long Description</h2>
                    </div>
                    <div class="p-6">
                        <textarea name="description" rows="8" class="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm" placeholder="Detailed product description..."></textarea>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200">
                        <h2 class="text-lg font-semibold text-gray-900">PDF Specification</h2>
                    </div>
                    <div class="p-6">
                        <input type="file" name="pdf_specification" accept=".pdf" class="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm file:mr-4 file:py-1 file:px-3 file:rounded-md file:border-0 file:text-sm file:font-medium file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100">
                    </div>
                </div>
            </div>

            {{-- Shipping Info Tab --}}
            <div x-show="activeTab === 'shipping'" x-cloak>
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200">
                        <h2 class="text-lg font-semibold text-gray-900">Shipping Information</h2>
                    </div>
                    <div class="p-6 space-y-6">
                        <div class="flex items-center justify-between py-3 px-4 bg-amber-50 border border-amber-200 rounded-lg">
                            <p class="text-sm text-amber-800">Product-based shipping fee is disabled. Configure your shipping fee in</p>
                            <a href="#" class="text-sm font-medium text-indigo-600 hover:text-indigo-800">Shipping Configuration</a>
                        </div>
                        <div class="flex items-center justify-between">
                            <div>
                                <label class="text-sm font-medium text-gray-700">Cash On Delivery</label>
                                <p class="text-xs text-gray-500 mt-1">Collect cash after delivery</p>
                            </div>
                            <label class="relative inline-flex items-center cursor-pointer">
                                <input type="checkbox" name="cash_on_delivery" value="1" class="sr-only peer">
                                <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
                            </label>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Estimated Shipping Days</label>
                            <input type="number" name="shipping_days" min="0" class="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm" placeholder="0">
                        </div>
                    </div>
                </div>
            </div>

            {{-- Others Tab --}}
            <div x-show="activeTab === 'others'" x-cloak>
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200">
                        <h2 class="text-lg font-semibold text-gray-900">Statuses</h2>
                    </div>
                    <div class="p-6 space-y-6">
                        <div class="flex items-center justify-between">
                            <div>
                                <label class="text-sm font-medium text-gray-700">Refundable</label>
                                <p class="text-xs text-gray-500 mt-1">Is this product refundable?</p>
                            </div>
                            <label class="relative inline-flex items-center cursor-pointer">
                                <input type="checkbox" name="is_refundable" value="1" class="sr-only peer">
                                <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
                            </label>
                        </div>
                        <hr class="border-gray-100">
                        <div class="flex items-center justify-between">
                            <div>
                                <label class="text-sm font-medium text-gray-700">Featured</label>
                                <p class="text-xs text-gray-500 mt-1">Add to featured products</p>
                            </div>
                            <label class="relative inline-flex items-center cursor-pointer">
                                <input type="checkbox" name="is_featured" value="1" class="sr-only peer">
                                <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
                            </label>
                        </div>
                        <hr class="border-gray-100">
                        <div class="flex items-center justify-between">
                            <div>
                                <label class="text-sm font-medium text-gray-700">Today's Deal</label>
                                <p class="text-xs text-gray-500 mt-1">Add to today's deals</p>
                            </div>
                            <label class="relative inline-flex items-center cursor-pointer">
                                <input type="checkbox" name="todays_deal" value="1" class="sr-only peer">
                                <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            {{-- SEO Tab --}}
            <div x-show="activeTab === 'seo'" x-cloak>
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200">
                        <h2 class="text-lg font-semibold text-gray-900">SEO Information</h2>
                    </div>
                    <div class="p-6 space-y-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Meta Title</label>
                            <input type="text" name="meta_title" class="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm" placeholder="Meta Title">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Meta Description</label>
                            <textarea name="meta_description" rows="4" class="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm" placeholder="Meta Description"></textarea>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Meta Keywords</label>
                            <input type="text" name="meta_keywords" class="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm" placeholder="Comma separated keywords">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Meta Image (Open Graph)</label>
                            <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg hover:border-indigo-400 transition-colors cursor-pointer" onclick="document.getElementById('meta_image').click()">
                                <div class="space-y-1 text-center" id="meta-image-preview">
                                    <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48"><path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                                    <div class="text-sm text-gray-600">
                                        <span class="font-medium text-indigo-600">Click to upload</span>
                                    </div>
                                </div>
                            </div>
                            <input type="file" name="meta_image" id="meta_image" accept="image/*" class="hidden" onchange="previewImage(this, 'meta-image-preview')">
                        </div>
                    </div>
                </div>
            </div>

            {{-- Action Buttons --}}
            <div class="mt-6 flex justify-end gap-3 pb-6">
                <a href="{{ route('admin.wholesale.index') }}" class="px-6 py-2.5 bg-gray-100 text-gray-700 font-medium rounded-lg hover:bg-gray-200 transition-colors">Cancel</a>
                <button type="submit" name="status" value="unpublished" class="px-6 py-2.5 bg-indigo-100 text-indigo-700 font-medium rounded-lg hover:bg-indigo-200 transition-colors">Save & Unpublished</button>
                <button type="submit" name="status" value="published" class="px-6 py-2.5 bg-indigo-600 text-white font-medium rounded-lg hover:bg-indigo-700 transition-colors">Save & Publish</button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
function previewImage(input, previewId) {
    const preview = document.getElementById(previewId);
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        reader.onload = function(e) {
            preview.innerHTML = '<img src="' + e.target.result + '" class="mx-auto h-40 w-auto object-cover rounded-lg shadow-sm">';
        };
        reader.readAsDataURL(input.files[0]);
    }
}

function previewMultipleImages(input, previewId) {
    const preview = document.getElementById(previewId);
    if (input.files) {
        let html = '<div class="grid grid-cols-3 gap-2">';
        Array.from(input.files).forEach(file => {
            const reader = new FileReader();
            reader.onload = function(e) {
                html += '<img src="' + e.target.result + '" class="h-20 w-full object-cover rounded-lg shadow-sm">';
                if (Array.from(input.files).indexOf(file) === input.files.length - 1) {
                    html += '</div>';
                    preview.innerHTML = html;
                }
            };
            reader.readAsDataURL(file);
        });
    }
}
</script>
@endpush
@endsection