@extends('admin.layouts.app')

@section('title', 'Edit Product')
@section('header_title', 'Edit 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">Edit Product: {{ $product->name }}</h2>
            <p class="text-xs text-slate-500">Update pricing, stock levels, category, flags, or gallery 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.update', $product->id) }}" 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
        @method('PUT')

        <!-- 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', $product->name) }}" 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', $product->sku) }}" 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', $product->product_type ?? 'normal') == 'normal' ? 'selected' : '' }}>Normal Product</option>
                        <option value="impon" {{ old('product_type', $product->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', $product->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 Description -->
                <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', $product->short_description) }}" 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>

                <!-- Full 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" 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', $product->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', $product->price) }}" 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', $product->original_price) }}" 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', $product->stock) }}" 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', $product->status) == 'active' ? 'selected' : '' }}>Active</option>
                        <option value="inactive" {{ old('status', $product->status) == 'inactive' ? 'selected' : '' }}>Inactive</option>
                        <option value="sold_out" {{ old('status', $product->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', $product->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', $product->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', $product->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', $product->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', $product->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 -->
        <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 Upload
            </h3>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                
                <!-- PRIMARY IMAGE -->
                <div class="space-y-2">
                    <label class="block text-xs font-bold uppercase tracking-wider text-slate-700">Primary Image</label>
                    <div class="p-4 bg-slate-50 rounded-2xl border border-slate-200 text-center space-y-3">
                        <img id="primary-edit-preview" src="{{ $product->primary_image_url }}" alt="Primary Image" class="max-h-40 mx-auto rounded-xl object-contain shadow-xs">
                        <input type="file" name="primary_image_file" accept="image/*" class="w-full text-xs text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-xl file:border-0 file:text-xs file:font-bold file:bg-gold-500 file:text-obsidian-900 hover:file:bg-gold-600">
                    </div>
                </div>

                <!-- HOVER IMAGE -->
                <div class="space-y-2">
                    <label class="block text-xs font-bold uppercase tracking-wider text-slate-700">Hover Image</label>
                    <div class="p-4 bg-slate-50 rounded-2xl border border-slate-200 text-center space-y-3">
                        <img id="hover-edit-preview" src="{{ $product->hover_image_url }}" alt="Hover Image" class="max-h-40 mx-auto rounded-xl object-contain shadow-xs">
                        <input type="file" name="hover_image_file" accept="image/*" class="w-full text-xs text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-xl file:border-0 file:text-xs file:font-bold file:bg-slate-700 file:text-white hover:file:bg-slate-800">
                    </div>
                </div>

            </div>

            <!-- EXISTING GALLERY IMAGES & ADD NEW -->
            <div class="space-y-4 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">Product Gallery Images</label>
                        <p class="text-[11px] text-slate-500">Manage existing gallery photos or upload additional ones</p>
                    </div>
                    <button type="button" onclick="document.getElementById('edit_gallery_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">
                        <i class="fa-solid fa-plus text-xs"></i>
                        <span>UPLOAD MORE IMAGES</span>
                    </button>
                    <input type="file" id="edit_gallery_input" name="gallery_files[]" multiple accept="image/*" class="hidden">
                </div>

                <!-- Existing Images Grid -->
                <div class="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-6 gap-4 p-4 bg-slate-50 rounded-2xl border border-slate-200">
                    @forelse($product->images as $imgRecord)
                        <div class="relative group rounded-xl overflow-hidden border border-slate-200 bg-white aspect-square shadow-xs flex items-center justify-center p-1">
                            <img src="{{ $imgRecord->url }}" class="w-full h-full object-cover rounded-lg">
                            <span class="absolute bottom-1 left-1 px-1.5 py-0.5 text-[9px] font-bold rounded bg-obsidian-900/80 text-gold-400 uppercase">
                                {{ $imgRecord->image_type }}
                            </span>
                            <form action="{{ route('admin.products.images.destroy', $imgRecord->id) }}" method="POST" class="absolute top-1 right-1">
                                @csrf
                                @method('DELETE')
                                <button type="submit" onclick="return confirm('Remove this image?')" class="w-6 h-6 rounded-full bg-red-600 text-white text-[10px] font-bold flex items-center justify-center shadow-md hover:bg-red-700">
                                    ×
                                </button>
                            </form>
                        </div>
                    @empty
                        <div class="col-span-full py-4 text-center text-slate-400 text-xs">
                            No additional gallery records stored yet.
                        </div>
                    @endforelse
                </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">
                UPDATE PRODUCT
            </button>
        </div>

    </form>

</div>
@endsection