@extends('layouts.admin')

@section('title', isset($product) ? 'Edit Product' : 'Create Product')

@section('admin_content')
    <div class="max-w-5xl mx-auto">
        <div class="flex items-center space-x-4 mb-10">
            <a href="{{ route('admin.products.index') }}" class="w-10 h-10 rounded-xl bg-white/5 flex items-center justify-center text-secondary hover:text-primary transition-all">
                <i class="fas fa-arrow-left"></i>
            </a>
            <div>
                <h3 class="text-2xl font-bold">{{ isset($product) ? 'Edit Product' : 'New Product' }}</h3>
                <p class="text-secondary text-sm">Fill in the specifications for your showcase item.</p>
            </div>
        </div>

        <div class="admin-card p-10 rounded-[2.5rem]">
            <form action="{{ isset($product) ? route('admin.products.update', $product) : route('admin.products.store') }}" method="POST" enctype="multipart/form-data" class="space-y-8">
                @csrf
                @if(isset($product))
                    @method('PUT')
                @endif

                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div class="space-y-2">
                        <label class="text-xs uppercase tracking-widest font-bold text-secondary">Product Name</label>
                        <input type="text" name="name" value="{{ old('name', $product->name ?? '') }}" required class="w-full px-6 py-4 rounded-2xl bg-white/5 border border-white/10 text-white focus:border-primary outline-none transition-all" placeholder="Enter product name">
                    </div>

                    <div class="space-y-2">
                        <label class="text-xs uppercase tracking-widest font-bold text-secondary">Status</label>
                        <select name="status" class="w-full px-6 py-4 rounded-2xl bg-white/5 border border-white/10 text-white focus:border-primary outline-none transition-all appearance-none cursor-pointer">
                            <option value="1" {{ old('status', $product->status ?? 1) == 1 ? 'selected' : '' }}>Active</option>
                            <option value="0" {{ old('status', $product->status ?? 1) == 0 ? 'selected' : '' }}>Inactive</option>
                        </select>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div class="space-y-2">
                        <label class="text-xs uppercase tracking-widest font-bold text-secondary">Category</label>
                        <select name="category_id" required class="w-full px-6 py-4 rounded-2xl bg-white/5 border border-white/10 text-white focus:border-primary outline-none transition-all appearance-none cursor-pointer">
                            <option value="">Select Category</option>
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}" {{ (old('category_id', $product->category_id ?? '') == $category->id) ? 'selected' : '' }}>{{ $category->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="space-y-2">
                        <label class="text-xs uppercase tracking-widest font-bold text-secondary">Subcategory</label>
                        <select name="subcategory_id" class="w-full px-6 py-4 rounded-2xl bg-white/5 border border-white/10 text-white focus:border-primary outline-none transition-all appearance-none cursor-pointer">
                            <option value="">Select Subcategory (Optional)</option>
                            @foreach($subcategories as $subcategory)
                                <option value="{{ $subcategory->id }}" {{ (old('subcategory_id', $product->subcategory_id ?? '') == $subcategory->id) ? 'selected' : '' }}>{{ $subcategory->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="space-y-2">
                    <label class="text-xs uppercase tracking-widest font-bold text-secondary">Description</label>
                    <textarea name="description" rows="5" class="w-full px-6 py-4 rounded-2xl bg-white/5 border border-white/10 text-white focus:border-primary outline-none transition-all" placeholder="Describe the product material, fit, and features...">{{ old('description', $product->description ?? '') }}</textarea>
                </div>

                <div class="space-y-4">
                    <label class="text-xs uppercase tracking-widest font-bold text-secondary">Product Main Image</label>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
                        <label class="flex flex-col items-center justify-center w-full h-40 border-2 border-white/5 border-dashed rounded-[1.5rem] cursor-pointer hover:bg-white/[0.02] transition-all">
                            <div class="flex flex-col items-center justify-center pt-5 pb-6">
                                <i class="fas fa-image text-3xl text-primary mb-4 opacity-50"></i>
                                <p class="text-xs text-secondary italic">Upload display image</p>
                            </div>
                            <input type="file" name="main_image" id="product-image-input" class="hidden" {{ isset($product) ? '' : 'required' }} accept="image/*" />
                        </label>
                        <div class="space-y-2">
                            <label class="text-xs uppercase tracking-widest font-bold text-secondary">Main Image Preview</label>
                            <div id="product-image-preview" class="w-40 h-40 rounded-3xl overflow-hidden shadow-lg border-2 border-white/10 bg-white/5 {{ isset($product) && $product->main_image ? '' : 'hidden' }}">
                                <img src="{{ isset($product) && $product->main_image ? asset('storage/' . $product->main_image) : '' }}" class="w-full h-full object-cover">
                            </div>
                            <div id="product-preview-placeholder" class="w-40 h-40 rounded-3xl border-2 border-white/5 border-dashed flex items-center justify-center text-secondary/30 {{ isset($product) && $product->main_image ? 'hidden' : '' }}">
                                <i class="fas fa-image text-4xl"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Gallery Section -->
                <div class="space-y-6 pt-6 border-t border-white/5">
                    <div class="flex items-center justify-between">
                        <label class="text-xs uppercase tracking-widest font-bold text-secondary">Product Gallery</label>
                        <span class="text-[10px] text-secondary opacity-50 uppercase tracking-widest">Manage gallery images</span>
                    </div>

                    <!-- Existing Gallery -->
                    <div class="flex flex-wrap gap-4" id="existing-gallery">
                        @foreach($product->images as $image)
                            <div class="w-24 h-24 rounded-xl overflow-hidden border border-white/10 relative group" id="image-container-{{ $image->id }}">
                                <img src="{{ asset('storage/' . $image->image_path) }}" class="w-full h-full object-cover">
                                <button type="button" onclick="deleteGalleryImage({{ $image->id }})" class="absolute inset-0 bg-red-500/80 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center text-white">
                                    <i class="fas fa-trash-alt"></i>
                                </button>
                            </div>
                        @endforeach
                    </div>

                    <!-- Upload New Gallery Images -->
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 pt-4 border-t border-white/5">
                        <div class="md:col-span-1">
                            <label class="flex flex-col items-center justify-center w-full h-32 border-2 border-white/5 border-dashed rounded-2xl cursor-pointer hover:bg-white/[0.02] transition-all bg-white/5">
                                <div class="flex flex-col items-center justify-center text-center px-2">
                                    <i class="fas fa-plus text-primary/50 text-xl mb-2"></i>
                                    <p class="text-[10px] text-secondary uppercase font-bold tracking-widest">Add More</p>
                                </div>
                                <input type="file" name="gallery[]" id="gallery-input" class="hidden" multiple accept="image/*" />
                            </label>
                        </div>
                        <div id="gallery-previews" class="md:col-span-3 flex flex-wrap gap-4">
                            <!-- New Gallery Previews will appear here -->
                        </div>
                    </div>
                </div>

                <div class="pt-8 flex space-x-4">
                    <button type="submit" class="flex-1 py-5 bg-primary text-black font-black uppercase tracking-[0.2em] rounded-2xl hover:bg-primary/90 transition-all shadow-xl shadow-primary/20">
                        {{ isset($product) ? 'Update Product Details' : 'Publish Product' }}
                    </button>
                    <a href="{{ route('admin.products.index') }}" class="px-10 py-5 rounded-2xl border border-white/10 text-secondary hover:text-white hover:bg-white/5 transition-all flex items-center justify-center font-bold uppercase tracking-widest text-xs">
                        Cancel
                    </a>
                </div>
            </form>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Main Image Preview
            const imageInput = document.getElementById('product-image-input');
            const imagePreview = document.getElementById('product-image-preview');
            const previewImg = imagePreview.querySelector('img');
            const previewPlaceholder = document.getElementById('product-preview-placeholder');

            imageInput.addEventListener('change', function() {
                const file = this.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        previewImg.src = e.target.result;
                        imagePreview.classList.remove('hidden');
                        previewPlaceholder.classList.add('hidden');
                    };
                    reader.readAsDataURL(file);
                }
            });

            // New Gallery Previews
            const galleryInput = document.getElementById('gallery-input');
            const galleryPreviews = document.getElementById('gallery-previews');

            galleryInput.addEventListener('change', function() {
                galleryPreviews.innerHTML = '';
                const files = this.files;
                
                if (files) {
                    Array.from(files).forEach(file => {
                        const reader = new FileReader();
                        reader.onload = function(e) {
                            const container = document.createElement('div');
                            container.className = 'w-24 h-24 rounded-xl overflow-hidden border border-white/10 relative group';
                            container.innerHTML = `
                                <img src="${e.target.result}" class="w-full h-full object-cover">
                                <div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                                    <i class="fas fa-check text-primary"></i>
                                </div>
                            `;
                            galleryPreviews.appendChild(container);
                        };
                        reader.readAsDataURL(file);
                    });
                }
            });
        });

        // Delete Gallery Image function
        async function deleteGalleryImage(id) {
            if (!confirm('Are you sure you want to delete this gallery image?')) return;

            try {
                const response = await fetch(`{{ url('admin/products/image') }}/${id}`, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                    }
                });

                const result = await response.json();
                if (result.success) {
                    const container = document.getElementById(`image-container-${id}`);
                    container.classList.add('opacity-0', 'scale-90');
                    setTimeout(() => container.remove(), 300);
                }
            } catch (error) {
                console.error('Error deleting image:', error);
                alert('Failed to delete image. Please try again.');
            }
        }
    </script>
@endsection