@extends('admin.layouts.app')

@section('title', 'Add 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">Add Product</h1>
            <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">Create a new product</p>
        </div>
    </div>

    <form action="{{ route('admin.products.store') }}" method="POST" enctype="multipart/form-data">
        @csrf
        
        <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') }}" 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">
                            @error('name')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                        </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') }}"
                                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') }}</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', 0) }}" 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') }}" 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', 0) }}" 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">
                        <!-- Main Image -->
                        <div x-data="mainImageUploader()">
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Main Image *</label>
                            <div class="border-2 border-dashed rounded-xl p-6 text-center transition-colors"
                                 :class="isDragging ? 'border-indigo-500 bg-indigo-50 dark:bg-indigo-900/20' : 'border-slate-300 dark:border-slate-600 hover:border-indigo-500'"
                                 @dragenter.prevent="isDragging = true"
                                 @dragover.prevent="isDragging = true"
                                 @dragleave.prevent="isDragging = false"
                                 @drop.prevent="handleDrop($event)">
                                <input type="file" name="image" id="mainImage" accept="image/*" class="hidden" 
                                       :required="!hasImage"
                                       @change="handleFileSelect($event)">
                                
                                <!-- Preview with delete button -->
                                <div x-show="hasImage" class="mb-4">
                                    <div class="relative inline-block">
                                        <img :src="previewUrl" alt="Preview" class="max-h-48 mx-auto rounded-lg">
                                        <button type="button" 
                                                @click="removeImage()"
                                                class="absolute -top-2 -right-2 w-7 h-7 bg-red-500 text-white rounded-full flex items-center justify-center hover:bg-red-600 transition-colors shadow-lg">
                                            <i data-lucide="x" class="w-4 h-4"></i>
                                        </button>
                                    </div>
                                    <label for="mainImage" class="cursor-pointer inline-flex items-center px-3 py-1.5 bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300 rounded-lg text-sm hover:bg-slate-200 dark:hover:bg-slate-600 transition-colors mt-3">
                                        <i data-lucide="upload" class="w-4 h-4 mr-1"></i>
                                        Change Image
                                    </label>
                                </div>
                                
                                <!-- Upload prompt -->
                                <label for="mainImage" class="cursor-pointer" x-show="!hasImage">
                                    <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>

                        <!-- Gallery Images -->
                        <div x-data="galleryImageUploader()">
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">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" @change="handleFileSelect($event)">
                                
                                <!-- Gallery Preview -->
                                <div x-show="images.length > 0" class="flex flex-wrap gap-3 justify-center mb-4">
                                    <template x-for="(img, index) in images" :key="index">
                                        <div class="relative">
                                            <img :src="img.url" alt="Gallery" class="w-20 h-20 object-cover rounded-lg">
                                            <button type="button" 
                                                    @click="removeImage(index)"
                                                    class="absolute -top-2 -right-2 w-5 h-5 bg-red-500 text-white rounded-full flex items-center justify-center hover:bg-red-600 transition-colors shadow-lg">
                                                <i data-lucide="x" class="w-3 h-3"></i>
                                            </button>
                                        </div>
                                    </template>
                                </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', 0) }}" 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 }}" 
                                        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 }}"
                                        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" 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"
                                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"
                                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 }}">{{ $category->name }}</option>
                                @if($category->children->count())
                                    @foreach($category->children as $child)
                                    <option value="{{ $child->id }}">-- {{ $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 }}">{{ $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">
                    <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">
                        Create Product
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>

@push('scripts')
<script>
function mainImageUploader() {
    return {
        isDragging: false,
        previewUrl: null,
        hasImage: false,
        
        handleFileSelect(event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = (e) => {
                    this.previewUrl = e.target.result;
                    this.hasImage = true;
                    this.$nextTick(() => {
                        if (typeof reinitIcons !== 'undefined') reinitIcons();
                    });
                };
                reader.readAsDataURL(file);
            }
        },
        
        handleDrop(event) {
            this.isDragging = false;
            const file = event.dataTransfer.files[0];
            if (file && file.type.startsWith('image/')) {
                const input = document.getElementById('mainImage');
                const dt = new DataTransfer();
                dt.items.add(file);
                input.files = dt.files;
                input.dispatchEvent(new Event('change'));
            }
        },
        
        removeImage() {
            this.previewUrl = null;
            this.hasImage = false;
            document.getElementById('mainImage').value = '';
            this.$nextTick(() => {
                if (typeof reinitIcons !== 'undefined') reinitIcons();
            });
        }
    }
}

function galleryImageUploader() {
    return {
        images: [],
        files: [],
        
        handleFileSelect(event) {
            const newFiles = Array.from(event.target.files).slice(0, 5);
            this.images = [];
            this.files = newFiles;
            
            newFiles.forEach((file, index) => {
                const reader = new FileReader();
                reader.onload = (e) => {
                    this.images.push({ url: e.target.result, file: file });
                    this.$nextTick(() => {
                        if (typeof reinitIcons !== 'undefined') reinitIcons();
                    });
                };
                reader.readAsDataURL(file);
            });
        },
        
        removeImage(index) {
            this.images.splice(index, 1);
            this.files.splice(index, 1);
            
            // Update the file input
            const input = document.getElementById('galleryImages');
            const dt = new DataTransfer();
            this.files.forEach(file => dt.items.add(file));
            input.files = dt.files;
            
            this.$nextTick(() => {
                if (typeof reinitIcons !== 'undefined') reinitIcons();
            });
        }
    }
}
</script>
@endpush
@endsection