@extends('admin.layouts.app')

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

@section('content')
<div class="space-y-6">
    <!-- Page Header -->
    <div class="flex items-center space-x-3">
        <a href="{{ route('admin.products.index') }}" class="p-2 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-lg transition-colors">
            <i data-lucide="arrow-left" class="w-5 h-5 text-slate-500"></i>
        </a>
        <div>
            <h1 class="text-2xl font-bold text-slate-800 dark:text-white">Edit Product</h1>
            <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">{{ $product->name }}</p>
        </div>
    </div>

    <form action="{{ route('admin.products.update', $product) }}" method="POST" enctype="multipart/form-data">
        @csrf
        @method('PUT')
        
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- Main Content -->
            <div class="lg:col-span-2 space-y-6">
                <!-- Basic Info -->
                <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
                    <h2 class="text-lg font-semibold text-slate-800 dark:text-white mb-4">Basic Information</h2>
                    
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Product Name *</label>
                            <input type="text" name="name" value="{{ old('name', $product->name) }}" required
                                class="w-full px-4 py-2 bg-slate-50 dark:bg-slate-700 border border-slate-200 dark:border-slate-600 rounded-xl text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">SKU</label>
                            <input type="text" name="sku" value="{{ old('sku', $product->sku) }}"
                                class="w-full px-4 py-2 bg-slate-50 dark:bg-slate-700 border border-slate-200 dark:border-slate-600 rounded-xl text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Description</label>
                            <textarea name="description" rows="4"
                                class="w-full px-4 py-2 bg-slate-50 dark:bg-slate-700 border border-slate-200 dark:border-slate-600 rounded-xl text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent">{{ old('description', $product->description) }}</textarea>
                        </div>
                    </div>
                </div>

                <!-- Pricing -->
                <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
                    <h2 class="text-lg font-semibold text-slate-800 dark:text-white mb-4">Pricing</h2>
                    
                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Purchase Price *</label>
                            <input type="number" name="purchase_price" value="{{ old('purchase_price', $product->purchase_price) }}" step="0.01" required
                                class="w-full px-4 py-2 bg-slate-50 dark:bg-slate-700 border border-slate-200 dark:border-slate-600 rounded-xl text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Old Price</label>
                            <input type="number" name="old_price" value="{{ old('old_price', $product->old_price) }}" step="0.01"
                                class="w-full px-4 py-2 bg-slate-50 dark:bg-slate-700 border border-slate-200 dark:border-slate-600 rounded-xl text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Selling Price *</label>
                            <input type="number" name="new_price" value="{{ old('new_price', $product->new_price) }}" step="0.01" required
                                class="w-full px-4 py-2 bg-slate-50 dark:bg-slate-700 border border-slate-200 dark:border-slate-600 rounded-xl text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
                        </div>
                    </div>
                </div>

                <!-- Product Images -->
                <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
                    <h2 class="text-lg font-semibold text-slate-800 dark:text-white mb-4">Product Images</h2>
                    
                    <div class="space-y-4">
                        <!-- Current Main Image -->
                        @if($product->image)
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Current Main Image</label>
                            <div class="relative inline-block">
                                <img src="{{ asset('storage/' . $product->image) }}" alt="{{ $product->name }}" class="w-32 h-32 object-cover rounded-xl border border-slate-200 dark:border-slate-700">
                                <label class="absolute -top-2 -right-2 p-1 bg-red-500 text-white rounded-full cursor-pointer hover:bg-red-600">
                                    <input type="checkbox" name="remove_image" value="1" class="sr-only">
                                    <i data-lucide="x" class="w-4 h-4"></i>
                                </label>
                            </div>
                        </div>
                        @endif

                        <!-- Upload New Main Image -->
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">{{ $product->image ? 'Replace Main Image' : 'Main Image *' }}</label>
                            <div class="border-2 border-dashed border-slate-300 dark:border-slate-600 rounded-xl p-6 text-center hover:border-indigo-500 transition-colors" id="mainImageDropzone">
                                <input type="file" name="image" id="mainImage" accept="image/*" class="hidden" onchange="previewMainImage(this)">
                                <div id="mainImagePreview" class="hidden mb-4">
                                    <img src="" alt="Preview" class="max-h-48 mx-auto rounded-lg">
                                </div>
                                <label for="mainImage" class="cursor-pointer">
                                    <i data-lucide="upload-cloud" class="w-12 h-12 text-slate-400 mx-auto mb-2"></i>
                                    <p class="text-sm text-slate-600 dark:text-slate-400">Click to upload or drag and drop</p>
                                    <p class="text-xs text-slate-400 mt-1">PNG, JPG, WEBP up to 2MB</p>
                                </label>
                            </div>
                            @error('image')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                        </div>

                        <!-- Current Gallery Images -->
                        @if($product->gallery->count() > 0)
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Current Gallery Images</label>
                            <div class="flex flex-wrap gap-2">
                                @foreach($product->gallery as $galleryImage)
                                <div class="relative">
                                    <img src="{{ asset('storage/' . $galleryImage->image) }}" alt="Gallery {{ $loop->iteration }}" class="w-20 h-20 object-cover rounded-lg border border-slate-200 dark:border-slate-700">
                                    <label class="absolute -top-2 -right-2 p-1 bg-red-500 text-white rounded-full cursor-pointer hover:bg-red-600">
                                        <input type="checkbox" name="remove_gallery[]" value="{{ $galleryImage->id }}" class="sr-only">
                                        <i data-lucide="x" class="w-3 h-3"></i>
                                    </label>
                                </div>
                                @endforeach
                            </div>
                        </div>
                        @endif

                        <!-- Upload Gallery Images -->
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Add Gallery Images</label>
                            <div class="border-2 border-dashed border-slate-300 dark:border-slate-600 rounded-xl p-6 text-center hover:border-indigo-500 transition-colors">
                                <input type="file" name="gallery[]" id="galleryImages" accept="image/*" multiple class="hidden" onchange="previewGalleryImages(this)">
                                <div id="galleryPreview" class="flex flex-wrap gap-2 mb-4 hidden"></div>
                                <label for="galleryImages" class="cursor-pointer">
                                    <i data-lucide="images" class="w-10 h-10 text-slate-400 mx-auto mb-2"></i>
                                    <p class="text-sm text-slate-600 dark:text-slate-400">Upload multiple images</p>
                                    <p class="text-xs text-slate-400 mt-1">Select up to 5 images</p>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Inventory -->
                <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
                    <h2 class="text-lg font-semibold text-slate-800 dark:text-white mb-4">Inventory</h2>
                    
                    <div>
                        <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Stock Quantity *</label>
                        <input type="number" name="stock" value="{{ old('stock', $product->stock) }}" required
                            class="w-full px-4 py-2 bg-slate-50 dark:bg-slate-700 border border-slate-200 dark:border-slate-600 rounded-xl text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
                    </div>
                </div>

                <!-- Variants -->
                <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
                    <h2 class="text-lg font-semibold text-slate-800 dark:text-white mb-4">Variants</h2>
                    
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Colors</label>
                            <div class="space-y-2">
                                @foreach($colors as $color)
                                <label class="flex items-center">
                                    <input type="checkbox" name="colors[]" value="{{ $color->id }}" 
                                        {{ $product->colors->contains($color->id) ? 'checked' : '' }}
                                        class="w-4 h-4 text-indigo-600 border-slate-300 rounded focus:ring-indigo-500">
                                    <span class="ml-2 text-sm text-slate-600 dark:text-slate-300 flex items-center">
                                        <span class="w-4 h-4 rounded-full mr-2" style="background-color: {{ $color->hex_code }}"></span>
                                        {{ $color->name }}
                                    </span>
                                </label>
                                @endforeach
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Sizes</label>
                            <div class="space-y-2">
                                @foreach($sizes as $size)
                                <label class="flex items-center">
                                    <input type="checkbox" name="sizes[]" value="{{ $size->id }}"
                                        {{ $product->sizes->contains($size->id) ? 'checked' : '' }}
                                        class="w-4 h-4 text-indigo-600 border-slate-300 rounded focus:ring-indigo-500">
                                    <span class="ml-2 text-sm text-slate-600 dark:text-slate-300">{{ $size->name }}</span>
                                </label>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="space-y-6">
                <!-- Status -->
                <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
                    <h2 class="text-lg font-semibold text-slate-800 dark:text-white mb-4">Status</h2>
                    
                    <div class="space-y-4">
                        <label class="flex items-center">
                            <input type="checkbox" name="status" value="1" {{ $product->status ? 'checked' : '' }}
                                class="w-4 h-4 text-indigo-600 border-slate-300 rounded focus:ring-indigo-500">
                            <span class="ml-2 text-sm text-slate-600 dark:text-slate-300">Active</span>
                        </label>
                        <label class="flex items-center">
                            <input type="checkbox" name="hot_deal" value="1" {{ $product->hot_deal ? 'checked' : '' }}
                                class="w-4 h-4 text-indigo-600 border-slate-300 rounded focus:ring-indigo-500">
                            <span class="ml-2 text-sm text-slate-600 dark:text-slate-300">Hot Deal</span>
                        </label>
                        <label class="flex items-center">
                            <input type="checkbox" name="free_shipping" value="1" {{ $product->free_shipping ? 'checked' : '' }}
                                class="w-4 h-4 text-indigo-600 border-slate-300 rounded focus:ring-indigo-500">
                            <span class="ml-2 text-sm text-slate-600 dark:text-slate-300">Free Shipping</span>
                        </label>
                    </div>
                </div>

                <!-- Category -->
                <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
                    <h2 class="text-lg font-semibold text-slate-800 dark:text-white mb-4">Organization</h2>
                    
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Category *</label>
                            <select name="category_id" required
                                class="w-full px-4 py-2 bg-slate-50 dark:bg-slate-700 border border-slate-200 dark:border-slate-600 rounded-xl text-sm focus:ring-2 focus:ring-indigo-500">
                                <option value="">Select Category</option>
                                @foreach($categories as $category)
                                <option value="{{ $category->id }}" {{ $product->category_id == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                                @if($category->children->count())
                                    @foreach($category->children as $child)
                                    <option value="{{ $child->id }}" {{ $product->category_id == $child->id ? 'selected' : '' }}>-- {{ $child->name }}</option>
                                    @endforeach
                                @endif
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Brand</label>
                            <select name="brand_id"
                                class="w-full px-4 py-2 bg-slate-50 dark:bg-slate-700 border border-slate-200 dark:border-slate-600 rounded-xl text-sm focus:ring-2 focus:ring-indigo-500">
                                <option value="">Select Brand</option>
                                @foreach($brands as $brand)
                                <option value="{{ $brand->id }}" {{ $product->brand_id == $brand->id ? 'selected' : '' }}>{{ $brand->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>

                <!-- Actions -->
                <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-6 space-y-3">
                    <button type="submit" class="w-full px-4 py-3 bg-indigo-600 text-white rounded-xl text-sm font-medium hover:bg-indigo-700 transition-colors">
                        Update Product
                    </button>
                    <a href="{{ route('admin.products.index') }}" class="w-full px-4 py-3 bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300 rounded-xl text-sm font-medium hover:bg-slate-200 dark:hover:bg-slate-600 transition-colors block text-center">
                        Cancel
                    </a>
                </div>
            </div>
        </div>
    </form>
</div>

@push('scripts')
<script>
function previewMainImage(input) {
    const preview = document.getElementById('mainImagePreview');
    const img = preview.querySelector('img');
    
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        reader.onload = function(e) {
            img.src = e.target.result;
            preview.classList.remove('hidden');
        }
        reader.readAsDataURL(input.files[0]);
    }
}

function previewGalleryImages(input) {
    const preview = document.getElementById('galleryPreview');
    preview.innerHTML = '';
    
    if (input.files && input.files.length > 0) {
        preview.classList.remove('hidden');
        
        Array.from(input.files).slice(0, 5).forEach(file => {
            const reader = new FileReader();
            reader.onload = function(e) {
                const div = document.createElement('div');
                div.className = 'relative';
                div.innerHTML = `<img src="${e.target.result}" class="w-20 h-20 object-cover rounded-lg">`;
                preview.appendChild(div);
            }
            reader.readAsDataURL(file);
        });
    }
}
</script>
@endpush
@endsection