@extends('admin.layouts.app')

@section('title', 'Add New Product')
@section('header_title', 'Create Product')

@section('content')
<div class="max-w-4xl mx-auto space-y-6">

    <!-- Header Breadcrumb & Title -->
    <div class="flex items-center justify-between">
        <div>
            <h2 class="font-serif text-2xl font-bold text-slate-900">Add New Jewellery Product</h2>
            <p class="text-xs text-slate-500">Fill in product details, pricing, stock, flags, and upload images.</p>
        </div>
        <a href="{{ route('admin.products.index') }}" class="px-4 py-2 bg-slate-100 text-slate-600 rounded-xl text-xs font-bold hover:bg-slate-200 transition-colors">
            ← BACK TO PRODUCTS
        </a>
    </div>

    <!-- FORM CARD -->
    <form action="{{ route('admin.products.store') }}" method="POST" enctype="multipart/form-data" class="bg-white rounded-3xl p-6 lg:p-8 border border-amber-900/10 shadow-xs space-y-8">
        @csrf

        <!-- SECTION 1: Basic Information -->
        <div class="space-y-4">
            <h3 class="font-serif text-base font-bold text-gold-700 uppercase tracking-wider border-b border-amber-900/10 pb-2">
                1. Basic Information
            </h3>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                <!-- Product Name -->
                <div class="md:col-span-2">
                    <label class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-2">
                        Product Name <span class="text-red-500">*</span>
                    </label>
                    <input type="text" name="name" value="{{ old('name') }}" placeholder="e.g. 24 Inch Moppu Chain" required class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-xs lg:text-sm text-slate-900 focus:outline-none focus:border-gold-500 focus:bg-white transition-all">
                    @error('name')<p class="text-[11px] text-red-500 mt-1">{{ $message }}</p>@enderror
                </div>

                <!-- SKU -->
                <div>
                    <label class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-2">SKU Code</label>
                    <input type="text" name="sku" value="{{ old('sku') }}" placeholder="e.g. DWR-CHN-001" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-xs lg:text-sm text-slate-900 focus:outline-none focus:border-gold-500 focus:bg-white transition-all">
                    @error('sku')<p class="text-[11px] text-red-500 mt-1">{{ $message }}</p>@enderror
                </div>

                <!-- Product Type -->
                <div>
                    <label class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-2">
                        Product Type <span class="text-red-500">*</span>
                    </label>
                    <select name="product_type" required class="w-full px-4 py-3 bg-amber-50/60 border border-amber-300 rounded-xl text-xs lg:text-sm text-slate-900 font-bold focus:outline-none focus:border-gold-500 focus:bg-white transition-all">
                        <option value="normal" {{ old('product_type', 'normal') == 'normal' ? 'selected' : '' }}>Normal Product</option>
                        <option value="impon" {{ old('product_type') == 'impon' ? 'selected' : '' }}>Impon Product</option>
                    </select>
                    @error('product_type')<p class="text-[11px] text-red-500 mt-1">{{ $message }}</p>@enderror
                </div>

                <!-- Category -->
                <div>
                    <label class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-2">
                        Category <span class="text-red-500">*</span>
                    </label>
                    <select name="category_id" required class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-xs lg:text-sm text-slate-900 focus:outline-none focus:border-gold-500 focus:bg-white transition-all">
                        <option value="">Select Category</option>
                        @foreach($categories as $cat)
                            <option value="{{ $cat->id }}" {{ old('category_id') == $cat->id ? 'selected' : '' }}>
                                {{ $cat->name }}
                            </option>
                        @endforeach
                    </select>
                    @error('category_id')<p class="text-[11px] text-red-500 mt-1">{{ $message }}</p>@enderror
                </div>

                <!-- Short Summary -->
                <div class="md:col-span-2">
                    <label class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-2">Short Summary</label>
                    <input type="text" name="short_description" value="{{ old('short_description') }}" placeholder="Brief 1-line feature highlight" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-xs text-slate-900 focus:outline-none focus:border-gold-500 transition-all">
                </div>

                <!-- Detailed Description -->
                <div class="md:col-span-2">
                    <label class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-2">Detailed Description</label>
                    <textarea name="description" rows="4" placeholder="Full product description, materials, micro gold plating details..." class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-xs text-slate-900 focus:outline-none focus:border-gold-500 transition-all">{{ old('description') }}</textarea>
                </div>
            </div>
        </div>

        <!-- SECTION 2: Pricing & Stock -->
        <div class="space-y-4">
            <h3 class="font-serif text-base font-bold text-gold-700 uppercase tracking-wider border-b border-amber-900/10 pb-2">
                2. Pricing & Inventory
            </h3>

            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-5">
                
                <!-- Selling Price -->
                <div>
                    <label class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-2">
                        Selling Price (₹) <span class="text-red-500">*</span>
                    </label>
                    <input type="number" step="0.01" name="price" value="{{ old('price') }}" placeholder="650.00" required class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-xs font-bold text-slate-900 focus:outline-none focus:border-gold-500 transition-all">
                    @error('price')<p class="text-[11px] text-red-500 mt-1">{{ $message }}</p>@enderror
                </div>

                <!-- MRP / Original Price -->
                <div>
                    <label class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-2">MRP / Original Price (₹)</label>
                    <input type="number" step="0.01" name="original_price" value="{{ old('original_price') }}" placeholder="1199.00" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-xs text-slate-900 focus:outline-none focus:border-gold-500 transition-all">
                </div>

                <!-- Stock Quantity -->
                <div>
                    <label class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-2">
                        Stock Quantity <span class="text-red-500">*</span>
                    </label>
                    <input type="number" name="stock" value="{{ old('stock', 25) }}" required class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-xs font-bold text-slate-900 focus:outline-none focus:border-gold-500 transition-all">
                    @error('stock')<p class="text-[11px] text-red-500 mt-1">{{ $message }}</p>@enderror
                </div>

                <!-- Status -->
                <div>
                    <label class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-2">
                        Status <span class="text-red-500">*</span>
                    </label>
                    <select name="status" required class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-xs font-semibold text-slate-900 focus:outline-none focus:border-gold-500 transition-all">
                        <option value="active" {{ old('status') == 'active' ? 'selected' : '' }}>Active</option>
                        <option value="inactive" {{ old('status') == 'inactive' ? 'selected' : '' }}>Inactive</option>
                        <option value="sold_out" {{ old('status') == 'sold_out' ? 'selected' : '' }}>Sold Out</option>
                    </select>
                </div>

            </div>
        </div>

        <!-- SECTION 3: Display Flags -->
        <div class="space-y-4">
            <h3 class="font-serif text-base font-bold text-gold-700 uppercase tracking-wider border-b border-amber-900/10 pb-2">
                3. Display Flags & Tags
            </h3>

            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4">
                <label class="flex items-center space-x-2 p-3 rounded-xl border border-slate-200 bg-slate-50 cursor-pointer hover:bg-amber-50/50">
                    <input type="checkbox" name="is_new" value="1" {{ old('is_new') ? 'checked' : '' }} class="w-4 h-4 text-gold-600 rounded">
                    <span class="text-xs font-semibold text-slate-800">New Arrival</span>
                </label>

                <label class="flex items-center space-x-2 p-3 rounded-xl border border-slate-200 bg-slate-50 cursor-pointer hover:bg-amber-50/50">
                    <input type="checkbox" name="is_best_seller" value="1" {{ old('is_best_seller') ? 'checked' : '' }} class="w-4 h-4 text-gold-600 rounded">
                    <span class="text-xs font-semibold text-slate-800">Best Seller</span>
                </label>

                <label class="flex items-center space-x-2 p-3 rounded-xl border border-slate-200 bg-slate-50 cursor-pointer hover:bg-amber-50/50">
                    <input type="checkbox" name="is_featured" value="1" {{ old('is_featured') ? 'checked' : '' }} class="w-4 h-4 text-gold-600 rounded">
                    <span class="text-xs font-semibold text-slate-800">Featured</span>
                </label>

                <label class="flex items-center space-x-2 p-3 rounded-xl border border-slate-200 bg-slate-50 cursor-pointer hover:bg-amber-50/50">
                    <input type="checkbox" name="is_trending" value="1" {{ old('is_trending') ? 'checked' : '' }} class="w-4 h-4 text-gold-600 rounded">
                    <span class="text-xs font-semibold text-slate-800">Trending</span>
                </label>

                <label class="flex items-center space-x-2 p-3 rounded-xl border border-slate-200 bg-slate-50 cursor-pointer hover:bg-amber-50/50">
                    <input type="checkbox" name="is_sold_out" value="1" {{ old('is_sold_out') ? 'checked' : '' }} class="w-4 h-4 text-gold-600 rounded">
                    <span class="text-xs font-semibold text-slate-800">Force Sold Out</span>
                </label>
            </div>
        </div>

        <!-- SECTION 4: Image Management (Drag & Drop + File Upload) -->
        <div class="space-y-6">
            <h3 class="font-serif text-base font-bold text-gold-700 uppercase tracking-wider border-b border-amber-900/10 pb-2">
                4. Images & Media (File Upload & Drag Drop)
            </h3>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                
                <!-- PRIMARY IMAGE DROPZONE -->
                <div class="space-y-2">
                    <label class="block text-xs font-bold uppercase tracking-wider text-slate-700">
                        Primary Product Image <span class="text-red-500">*</span>
                    </label>
                    
                    <div id="primary-dropzone" onclick="document.getElementById('primary_file_input').click()" 
                         class="border-2 border-dashed border-gold-500/40 bg-amber-50/30 hover:bg-amber-50/70 rounded-2xl p-6 text-center cursor-pointer transition-all relative overflow-hidden group">
                        
                        <input type="file" id="primary_file_input" name="primary_image_file" accept="image/jpeg,image/png,image/webp,image/jpg" class="hidden" onchange="previewSingleImage(this, 'primary-preview-img', 'primary-dropzone-content')">
                        
                        <div id="primary-dropzone-content" class="space-y-2">
                            <div class="w-12 h-12 rounded-full bg-amber-100 text-gold-700 flex items-center justify-center mx-auto text-xl font-bold">
                                <i class="fa-solid fa-cloud-arrow-up"></i>
                            </div>
                            <p class="text-xs font-bold text-slate-800">Upload Primary Image</p>
                            <p class="text-[11px] text-slate-500">Drag & Drop or Browse (JPG, PNG, WEBP max 5MB)</p>
                        </div>

                        <div id="primary-preview-container" class="hidden relative">
                            <img id="primary-preview-img" src="" alt="Primary Preview" class="max-h-48 mx-auto rounded-xl object-contain shadow-md">
                            <div class="mt-3 flex items-center justify-center space-x-2">
                                <span class="px-3 py-1 bg-gold-500 text-obsidian-900 font-bold text-[10px] rounded-full uppercase">Primary Image</span>
                                <button type="button" onclick="event.stopPropagation(); clearSingleImage('primary_file_input', 'primary-preview-img', 'primary-dropzone-content')" class="px-3 py-1 bg-red-500 text-white font-bold text-[10px] rounded-full hover:bg-red-600">
                                    Remove
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- HOVER IMAGE DROPZONE -->
                <div class="space-y-2">
                    <label class="block text-xs font-bold uppercase tracking-wider text-slate-700">
                        Hover Product Image (Alternate View)
                    </label>

                    <div id="hover-dropzone" onclick="document.getElementById('hover_file_input').click()" 
                         class="border-2 border-dashed border-slate-300 bg-slate-50 hover:bg-slate-100/70 rounded-2xl p-6 text-center cursor-pointer transition-all relative overflow-hidden group">
                        
                        <input type="file" id="hover_file_input" name="hover_image_file" accept="image/jpeg,image/png,image/webp,image/jpg" class="hidden" onchange="previewSingleImage(this, 'hover-preview-img', 'hover-dropzone-content')">
                        
                        <div id="hover-dropzone-content" class="space-y-2">
                            <div class="w-12 h-12 rounded-full bg-slate-200 text-slate-600 flex items-center justify-center mx-auto text-xl font-bold">
                                <i class="fa-solid fa-images"></i>
                            </div>
                            <p class="text-xs font-bold text-slate-800">Upload Hover Image</p>
                            <p class="text-[11px] text-slate-500">Displayed on mouse hover (JPG, PNG, WEBP)</p>
                        </div>

                        <div id="hover-preview-container" class="hidden relative">
                            <img id="hover-preview-img" src="" alt="Hover Preview" class="max-h-48 mx-auto rounded-xl object-contain shadow-md">
                            <div class="mt-3 flex items-center justify-center space-x-2">
                                <span class="px-3 py-1 bg-slate-700 text-white font-bold text-[10px] rounded-full uppercase">Hover View</span>
                                <button type="button" onclick="event.stopPropagation(); clearSingleImage('hover_file_input', 'hover-preview-img', 'hover-dropzone-content')" class="px-3 py-1 bg-red-500 text-white font-bold text-[10px] rounded-full hover:bg-red-600">
                                    Remove
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <!-- MULTIPLE GALLERY IMAGES UPLOAD AREA -->
            <div class="space-y-3 pt-4 border-t border-slate-100">
                <div class="flex items-center justify-between">
                    <div>
                        <label class="block text-xs font-bold uppercase tracking-wider text-slate-700">
                            Additional Product Gallery Images
                        </label>
                        <p class="text-[11px] text-slate-500">Upload multiple photos for thumbnail slider on Product Details page</p>
                    </div>
                    <button type="button" onclick="document.getElementById('gallery_files_input').click()" class="px-4 py-2 bg-obsidian-900 hover:bg-obsidian-800 text-white font-bold text-xs rounded-xl flex items-center space-x-2 transition-colors">
                        <i class="fa-solid fa-plus text-xs"></i>
                        <span>ADD MORE IMAGES</span>
                    </button>
                </div>

                <input type="file" id="gallery_files_input" name="gallery_files[]" multiple accept="image/jpeg,image/png,image/webp,image/jpg" class="hidden" onchange="previewGalleryImages(this)">

                <div id="gallery-preview-grid" class="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-6 gap-4 min-h-[100px] p-4 bg-slate-50 rounded-2xl border border-slate-200">
                    <div id="gallery-empty-state" class="col-span-full py-6 text-center text-slate-400 text-xs">
                        No additional gallery images selected yet. Click <strong>+ ADD MORE IMAGES</strong> to upload.
                    </div>
                </div>
            </div>

            <!-- Optional Image URL Backup Fields -->
            <div class="pt-4 border-t border-slate-100 space-y-3">
                <button type="button" onclick="document.getElementById('url-backup-section').classList.toggle('hidden')" class="text-xs font-semibold text-gold-700 hover:underline flex items-center space-x-1">
                    <span>+ Optional: Use External Image URLs Instead</span>
                </button>
                <div id="url-backup-section" class="hidden grid grid-cols-1 md:grid-cols-2 gap-4 p-4 bg-amber-50/50 rounded-2xl border border-amber-200">
                    <div>
                        <label class="block text-[11px] font-bold text-slate-700 mb-1">Primary Image URL</label>
                        <input type="url" name="image" id="primary_url_input" placeholder="https://..." class="w-full px-3 py-2 text-xs bg-white border border-slate-200 rounded-xl" oninput="previewUrlImage(this.value, 'primary-preview-img', 'primary-dropzone-content')">
                    </div>
                    <div>
                        <label class="block text-[11px] font-bold text-slate-700 mb-1">Hover Image URL</label>
                        <input type="url" name="hover_image" id="hover_url_input" placeholder="https://..." class="w-full px-3 py-2 text-xs bg-white border border-slate-200 rounded-xl" oninput="previewUrlImage(this.value, 'hover-preview-img', 'hover-dropzone-content')">
                    </div>
                </div>
            </div>

        </div>

        <!-- Submit & Cancel Actions -->
        <div class="pt-6 border-t border-slate-100 flex items-center justify-end space-x-4">
            <a href="{{ route('admin.products.index') }}" class="px-6 py-3 rounded-xl border border-slate-300 text-slate-600 font-semibold text-xs hover:bg-slate-50 transition-colors">
                CANCEL
            </a>
            <button type="submit" class="px-8 py-3 rounded-xl gold-gradient-bg text-obsidian-900 font-bold text-xs uppercase tracking-widest shadow-md hover:scale-[1.01] transition-transform">
                SAVE PRODUCT
            </button>
        </div>

    </form>

</div>

@push('scripts')
<script>
    // Preview Single Image (Primary & Hover)
    function previewSingleImage(input, imgId, contentId) {
        if (input.files && input.files[0]) {
            const reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById(imgId).src = e.target.result;
                document.getElementById(contentId).classList.add('hidden');
                document.getElementById(imgId).parentElement.classList.remove('hidden');
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

    function previewUrlImage(url, imgId, contentId) {
        if (url && (url.startsWith('http://') || url.startsWith('https://'))) {
            document.getElementById(imgId).src = url;
            document.getElementById(contentId).classList.add('hidden');
            document.getElementById(imgId).parentElement.classList.remove('hidden');
        }
    }

    function clearSingleImage(inputId, imgId, contentId) {
        document.getElementById(inputId).value = "";
        document.getElementById(imgId).src = "";
        document.getElementById(imgId).parentElement.classList.add('hidden');
        document.getElementById(contentId).classList.remove('hidden');
    }

    // Preview Multiple Gallery Images
    function previewGalleryImages(input) {
        const grid = document.getElementById('gallery-preview-grid');
        const emptyState = document.getElementById('gallery-empty-state');

        if (emptyState) emptyState.classList.add('hidden');

        if (input.files) {
            Array.from(input.files).forEach((file, index) => {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const card = document.createElement('div');
                    card.className = "relative group rounded-xl overflow-hidden border border-slate-200 bg-white aspect-square shadow-xs flex items-center justify-center p-1";
                    card.innerHTML = `
                        <img src="${e.target.result}" class="w-full h-full object-cover rounded-lg">
                        <button type="button" onclick="this.parentElement.remove()" class="absolute top-1 right-1 w-6 h-6 rounded-full bg-red-600 text-white text-[10px] font-bold flex items-center justify-center opacity-90 hover:opacity-100 shadow-md">
                            ×
                        </button>
                    `;
                    grid.appendChild(card);
                }
                reader.readAsDataURL(file);
            });
        }
    }
</script>
@endpush
@endsection