@extends('layouts.admin')

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

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- Header -->
    <div class="mb-8">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
            <div>
                <h1 class="text-3xl font-bold text-gray-900">Edit Produk</h1>
                <p class="mt-1 text-sm text-gray-600">Edit produk: {{ $product->name }}</p>
            </div>
            <div class="mt-4 sm:mt-0 flex space-x-3">
                <a href="{{ route('admin.products.index') }}" 
                   class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out">
                    <i class="fas fa-arrow-left mr-2"></i>
                    Kembali
                </a>
                <a href="{{ route('admin.products.show', $product) }}" 
                   class="inline-flex items-center px-4 py-2 border border-transparent rounded-lg text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out">
                    <i class="fas fa-eye mr-2"></i>
                    Lihat Detail
                </a>
            </div>
        </div>
    </div>

    <!-- Form -->
    <form action="{{ route('admin.products.update', $product) }}" method="POST" enctype="multipart/form-data" class="space-y-8">
        @csrf
        @method('PUT')
        
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- Main Content -->
            <div class="lg:col-span-2 space-y-6">
                <!-- Basic Information -->
                <div class="bg-white overflow-hidden shadow-sm border border-gray-200 rounded-lg">
                    <div class="px-6 py-4 border-b border-gray-200">
                        <h3 class="text-lg font-medium text-gray-900">Informasi Dasar</h3>
                    </div>
                    <div class="px-6 py-4 space-y-6">
                        <!-- Product Name -->
                        <div>
                            <label for="name" class="block text-sm font-medium text-gray-700 mb-2">Nama Produk *</label>
                            <input type="text" name="name" id="name" required
                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('name') border-red-500 @enderror"
                                   value="{{ old('name', $product->name) }}" placeholder="Masukkan nama produk">
                            @error('name')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Slug -->
                        <div>
                            <label for="slug" class="block text-sm font-medium text-gray-700 mb-2">Slug</label>
                            <input type="text" name="slug" id="slug"
                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('slug') border-red-500 @enderror"
                                   value="{{ old('slug', $product->slug) }}" placeholder="URL-friendly name">
                            <p class="mt-1 text-xs text-gray-500">Kosongkan untuk generate otomatis dari nama produk</p>
                            @error('slug')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Category and Brand -->
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                                <label for="product_category_id" class="block text-sm font-medium text-gray-700 mb-2">Kategori *</label>
                                <select name="product_category_id" id="product_category_id" required
                                        class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('product_category_id') border-red-500 @enderror">
                                    <option value="">Pilih Kategori</option>
                                    @foreach($categories as $category)
                                        <option value="{{ $category->id }}" {{ old('product_category_id', $product->product_category_id) == $category->id ? 'selected' : '' }}>
                                            {{ $category->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('product_category_id')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                            <div>
                                <label for="brand" class="block text-sm font-medium text-gray-700 mb-2">Brand/Merek</label>
                                <input type="text" name="brand" id="brand"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('brand') border-red-500 @enderror"
                                       value="{{ old('brand', $product->brand) }}" placeholder="Nama brand/merek">
                                @error('brand')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <!-- Short Description -->
                        <div>
                            <label for="short_description" class="block text-sm font-medium text-gray-700 mb-2">Deskripsi Singkat</label>
                            <textarea name="short_description" id="short_description" rows="3"
                                      class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('short_description') border-red-500 @enderror"
                                      placeholder="Deskripsi singkat produk">{{ old('short_description', $product->short_description) }}</textarea>
                            @error('short_description')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Description -->
                        <div>
                            <label for="description" class="block text-sm font-medium text-gray-700 mb-2">Deskripsi Lengkap</label>
                            <textarea name="description" id="description" rows="6"
                                      class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('description') border-red-500 @enderror"
                                      placeholder="Deskripsi lengkap produk">{{ old('description', $product->description) }}</textarea>
                            @error('description')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Specifications -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Spesifikasi</label>
                            <div id="specifications-container" class="space-y-3">
                                @if(old('specifications') || (isset($product->specifications) && is_array($product->specifications)))
                                    @php
                                        $specifications = old('specifications', $product->specifications ?? []);
                                    @endphp
                                    @foreach($specifications as $index => $spec)
                                        @if(is_array($spec) && isset($spec['key']) && isset($spec['value']))
                                            <div class="specification-row flex gap-2">
                                                <input type="text" name="specifications[{{ $index }}][key]" value="{{ $spec['key'] }}" placeholder="Nama spesifikasi"
                                                       class="flex-1 px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                                <input type="text" name="specifications[{{ $index }}][value]" value="{{ $spec['value'] }}" placeholder="Nilai spesifikasi"
                                                       class="flex-1 px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                                <button type="button" class="remove-specification px-3 py-2 text-red-600 hover:text-red-800 hover:bg-red-50 rounded-lg transition duration-150 ease-in-out">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </div>
                                        @endif
                                    @endforeach
                                @endif
                                
                                <!-- Default specification row if no existing specs -->
                                @if(!old('specifications') && (!isset($product->specifications) || !is_array($product->specifications) || empty($product->specifications)))
                                    <div class="specification-row flex gap-2">
                                        <input type="text" name="specifications[0][key]" placeholder="Nama spesifikasi"
                                               class="flex-1 px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                        <input type="text" name="specifications[0][value]" placeholder="Nilai spesifikasi"
                                               class="flex-1 px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                        <button type="button" class="remove-specification px-3 py-2 text-red-600 hover:text-red-800 hover:bg-red-50 rounded-lg transition duration-150 ease-in-out">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                @endif
                            </div>
                            <button type="button" id="add-specification" 
                                    class="mt-3 inline-flex items-center px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out">
                                <i class="fas fa-plus mr-2"></i>
                                Tambah Spesifikasi
                            </button>
                            @error('specifications')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Condition -->
                        <div>
                            <label for="condition" class="block text-sm font-medium text-gray-700 mb-2">Kondisi *</label>
                            <select name="condition" id="condition" required
                                    class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('condition') border-red-500 @enderror">
                                <option value="">Pilih Kondisi</option>
                                <option value="new" {{ old('condition', $product->condition) == 'new' ? 'selected' : '' }}>Baru</option>
                                <option value="used" {{ old('condition', $product->condition) == 'used' ? 'selected' : '' }}>Bekas</option>
                                <option value="refurbished" {{ old('condition', $product->condition) == 'refurbished' ? 'selected' : '' }}>Refurbished</option>
                            </select>
                            @error('condition')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Pricing & Inventory -->
                <div class="bg-white overflow-hidden shadow-sm border border-gray-200 rounded-lg">
                    <div class="px-6 py-4 border-b border-gray-200">
                        <h3 class="text-lg font-medium text-gray-900">Harga & Stok</h3>
                    </div>
                    <div class="px-6 py-4 space-y-6">
                        <!-- Price & Discount -->
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                                <label for="price" class="block text-sm font-medium text-gray-700 mb-2">Harga (Rp) *</label>
                                <input type="number" name="price" id="price" required min="0" step="0.01"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('price') border-red-500 @enderror"
                                       value="{{ old('price', $product->price) }}" placeholder="0">
                                @error('price')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                            <div>
                                <label for="discount_price" class="block text-sm font-medium text-gray-700 mb-2">Harga Diskon (Rp)</label>
                                <input type="number" name="discount_price" id="discount_price" min="0" step="0.01"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('discount_price') border-red-500 @enderror"
                                       value="{{ old('discount_price', $product->discount_price) }}" placeholder="0">
                                @error('discount_price')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <!-- Stock & SKU -->
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                                <label for="stock" class="block text-sm font-medium text-gray-700 mb-2">Stok</label>
                                <input type="number" name="stock" id="stock" min="0"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('stock') border-red-500 @enderror"
                                       value="{{ old('stock', $product->stock) }}" placeholder="0">
                                @error('stock')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                            <div>
                                <label for="sku" class="block text-sm font-medium text-gray-700 mb-2">SKU</label>
                                <input type="text" name="sku" id="sku"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('sku') border-red-500 @enderror"
                                       value="{{ old('sku', $product->sku) }}" placeholder="SKU produk">
                                @error('sku')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Marketplace Links -->
                <div class="bg-white overflow-hidden shadow-sm border border-gray-200 rounded-lg">
                    <div class="px-6 py-4 border-b border-gray-200">
                        <h3 class="text-lg font-medium text-gray-900">Link Marketplace</h3>
                    </div>
                    <div class="px-6 py-4 space-y-4">
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                                <label for="shopee_url" class="block text-sm font-medium text-gray-700 mb-2">Shopee URL</label>
                                <input type="url" name="shopee_url" id="shopee_url"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('shopee_url') border-red-500 @enderror"
                                       value="{{ old('shopee_url', $product->shopee_url) }}" placeholder="https://shopee.co.id/...">
                                @error('shopee_url')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                            <div>
                                <label for="tokopedia_url" class="block text-sm font-medium text-gray-700 mb-2">Tokopedia URL</label>
                                <input type="url" name="tokopedia_url" id="tokopedia_url"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('tokopedia_url') border-red-500 @enderror"
                                       value="{{ old('tokopedia_url', $product->tokopedia_url) }}" placeholder="https://tokopedia.com/...">
                                @error('tokopedia_url')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                                <label for="bukalapak_url" class="block text-sm font-medium text-gray-700 mb-2">Bukalapak URL</label>
                                <input type="url" name="bukalapak_url" id="bukalapak_url"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('bukalapak_url') border-red-500 @enderror"
                                       value="{{ old('bukalapak_url', $product->bukalapak_url) }}" placeholder="https://bukalapak.com/...">
                                @error('bukalapak_url')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                            <div>
                                <label for="lazada_url" class="block text-sm font-medium text-gray-700 mb-2">Lazada URL</label>
                                <input type="url" name="lazada_url" id="lazada_url"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('lazada_url') border-red-500 @enderror"
                                       value="{{ old('lazada_url', $product->lazada_url) }}" placeholder="https://lazada.co.id/...">
                                @error('lazada_url')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="lg:col-span-1 space-y-6">
                <!-- Publishing Options -->
                <div class="bg-white overflow-hidden shadow-sm border border-gray-200 rounded-lg">
                    <div class="px-6 py-4 border-b border-gray-200">
                        <h3 class="text-lg font-medium text-gray-900">Opsi Publikasi</h3>
                    </div>
                    <div class="px-6 py-4 space-y-4">
                        <!-- Status Toggles -->
                        <div class="space-y-3">
                            <div class="flex items-center">
                                <input type="checkbox" name="is_active" id="is_active" value="1" 
                                       class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                                       {{ old('is_active', $product->is_active) ? 'checked' : '' }}>
                                <label for="is_active" class="ml-2 block text-sm text-gray-900">Aktif</label>
                            </div>
                            <div class="flex items-center">
                                <input type="checkbox" name="is_featured" id="is_featured" value="1" 
                                       class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                                       {{ old('is_featured', $product->is_featured) ? 'checked' : '' }}>
                                <label for="is_featured" class="ml-2 block text-sm text-gray-900">Produk Unggulan</label>
                            </div>
                        </div>

                        <!-- SEO Meta -->
                        <div>
                            <label for="meta_title" class="block text-sm font-medium text-gray-700 mb-2">Meta Title (SEO)</label>
                            <input type="text" name="meta_title" id="meta_title"
                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('meta_title') border-red-500 @enderror"
                                   value="{{ old('meta_title', $product->meta_title) }}" placeholder="SEO title">
                            @error('meta_title')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="meta_description" class="block text-sm font-medium text-gray-700 mb-2">Meta Description (SEO)</label>
                            <textarea name="meta_description" id="meta_description" rows="3"
                                      class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('meta_description') border-red-500 @enderror"
                                      placeholder="SEO description">{{ old('meta_description', $product->meta_description) }}</textarea>
                            @error('meta_description')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Current Images -->
                @if($product->featured_image || $product->gallery)
                <div class="bg-white overflow-hidden shadow-sm border border-gray-200 rounded-lg">
                    <div class="px-6 py-4 border-b border-gray-200">
                        <h3 class="text-lg font-medium text-gray-900">Gambar Saat Ini</h3>
                    </div>
                    <div class="px-6 py-4 space-y-4">
                        @if($product->featured_image)
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Gambar Utama:</label>
                            <div class="space-y-2">
                                <img src="{{ Storage::url($product->featured_image) }}" 
                                     class="w-full h-auto rounded-lg border border-gray-300" 
                                     alt="Featured Image">
                                <div class="flex items-center">
                                    <input type="checkbox" name="remove_featured_image" id="remove_featured_image" value="1" 
                                           class="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300 rounded">
                                    <label for="remove_featured_image" class="ml-2 block text-sm text-red-600">Hapus gambar utama</label>
                                </div>
                            </div>
                        </div>
                        @endif

                        @if($product->gallery && is_array($product->gallery) && count($product->gallery) > 0)
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Galeri:</label>
                            <div class="grid grid-cols-2 gap-2">
                                @foreach($product->gallery as $index => $image)
                                <div class="space-y-1">
                                    <img src="{{ Storage::url($image) }}" 
                                         class="w-full h-20 object-cover rounded border border-gray-300" 
                                         alt="Gallery Image">
                                    <div class="flex items-center">
                                        <input type="checkbox" name="remove_gallery_images[]" value="{{ $index }}" 
                                               class="h-3 w-3 text-red-600 focus:ring-red-500 border-gray-300 rounded">
                                        <label class="ml-1 block text-xs text-red-600">Hapus</label>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
                @endif

                <!-- Upload New Images -->
                <div class="bg-white overflow-hidden shadow-sm border border-gray-200 rounded-lg">
                    <div class="px-6 py-4 border-b border-gray-200">
                        <h3 class="text-lg font-medium text-gray-900">Upload Gambar Baru</h3>
                    </div>
                    <div class="px-6 py-4 space-y-4">
                        <!-- Featured Image Upload -->
                        <div>
                            <label for="featured_image" class="block text-sm font-medium text-gray-700 mb-2">Gambar Utama Baru</label>
                            <div class="image-upload-container">
                                <label for="featured_image" class="cursor-pointer">
                                    <div id="featured_upload_area" class="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center hover:border-gray-400 transition-colors">
                                        <i class="fas fa-cloud-upload-alt text-gray-400 text-2xl mb-2"></i>
                                        <p class="text-sm text-gray-600">Klik untuk upload</p>
                                        <p class="text-xs text-gray-500">PNG, JPG, JPEG hingga 2MB</p>
                                    </div>
                                </label>
                                <input type="file" name="featured_image" id="featured_image" accept="image/*" class="hidden">
                                
                                <!-- Preview Container -->
                                <div id="featured_preview" class="mt-3 hidden">
                                    <p class="text-sm font-medium text-gray-700 mb-2">Preview Baru:</p>
                                    <div class="relative">
                                        <img id="featured_preview_img" src="" alt="Preview" class="w-full h-32 object-cover rounded border border-gray-300">
                                        <button type="button" onclick="removeFeaturedPreview()" class="absolute top-1 right-1 bg-red-500 hover:bg-red-600 text-white rounded-full p-1 w-5 h-5 flex items-center justify-center text-xs">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>
                                </div>
                                
                                @error('featured_image')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <!-- Gallery Images Upload -->
                        <div>
                            <label for="gallery" class="block text-sm font-medium text-gray-700 mb-2">Tambah Gambar Galeri</label>
                            <div class="image-upload-container">
                                <label for="gallery" class="cursor-pointer">
                                    <div id="gallery_upload_area" class="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center hover:border-gray-400 transition-colors">
                                        <i class="fas fa-images text-gray-400 text-2xl mb-2"></i>
                                        <p class="text-sm text-gray-600">Klik untuk upload</p>
                                        <p class="text-xs text-gray-500">Pilih beberapa gambar</p>
                                    </div>
                                </label>
                                <input type="file" name="gallery[]" id="gallery" accept="image/*" multiple class="hidden">
                                
                                <!-- Preview Container -->
                                <div id="gallery_preview" class="mt-3 hidden">
                                    <p class="text-sm font-medium text-gray-700 mb-2">Preview Galeri Baru:</p>
                                    <div id="gallery_preview_container" class="grid grid-cols-2 gap-2"></div>
                                    <button type="button" onclick="removeAllGalleryPreviews()" class="mt-2 text-sm text-red-600 hover:text-red-800">
                                        <i class="fas fa-trash mr-1"></i>Hapus Semua
                                    </button>
                                </div>
                                
                                @error('gallery.*')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Form Actions -->
        <div class="flex items-center justify-end space-x-4 pt-6 border-t border-gray-200">
            <a href="{{ route('admin.products.index') }}" 
               class="inline-flex items-center px-6 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out">
                <i class="fas fa-times mr-2"></i>
                Batal
            </a>
            <button type="submit" id="submit-btn"
                    class="inline-flex items-center px-6 py-2 border border-transparent rounded-lg text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out disabled:opacity-50 disabled:cursor-not-allowed">
                <i class="fas fa-save mr-2" id="submit-icon"></i>
                <span id="submit-text">Update Produk</span>
            </button>
        </div>
    </form>
</div>

<!-- JavaScript for Enhanced UX -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Auto generate slug from name
    const nameInput = document.getElementById('name');
    const slugInput = document.getElementById('slug');
    
    nameInput.addEventListener('input', function() {
        const name = this.value;
        const slug = name.toLowerCase()
            .replace(/[^a-z0-9 -]/g, '') // remove invalid chars
            .replace(/\s+/g, '-') // collapse whitespace and replace by -
            .replace(/-+/g, '-'); // collapse dashes
        slugInput.value = slug;
    });

    // Price validation
    const priceInput = document.getElementById('price');
    const discountPriceInput = document.getElementById('discount_price');
    
    discountPriceInput.addEventListener('input', function() {
        const price = parseFloat(priceInput.value) || 0;
        const discountPrice = parseFloat(this.value) || 0;
        
        if (discountPrice > price && price > 0) {
            alert('Harga diskon tidak boleh lebih besar dari harga normal');
            this.value = '';
        }
    });

    // Featured Image Preview
    const featuredImageInput = document.getElementById('featured_image');
    const featuredPreview = document.getElementById('featured_preview');
    const featuredPreviewImg = document.getElementById('featured_preview_img');
    const featuredUploadArea = document.getElementById('featured_upload_area');
    
    featuredImageInput.addEventListener('change', function() {
        const file = this.files[0];
        if (file) {
            // Validate file size (2MB)
            if (file.size > 2 * 1024 * 1024) {
                alert('Ukuran file terlalu besar. Maksimal 2MB.');
                this.value = '';
                return;
            }
            
            // Validate file type
            if (!file.type.startsWith('image/')) {
                alert('File harus berupa gambar.');
                this.value = '';
                return;
            }
            
            const reader = new FileReader();
            reader.onload = function(e) {
                featuredPreviewImg.src = e.target.result;
                featuredPreview.classList.remove('hidden');
                featuredUploadArea.classList.add('hidden');
            };
            reader.readAsDataURL(file);
        } else {
            featuredPreview.classList.add('hidden');
            featuredUploadArea.classList.remove('hidden');
        }
    });

    // Gallery Images Preview
    const galleryInput = document.getElementById('gallery');
    const galleryPreview = document.getElementById('gallery_preview');
    const galleryPreviewContainer = document.getElementById('gallery_preview_container');
    const galleryUploadArea = document.getElementById('gallery_upload_area');
    
    galleryInput.addEventListener('change', function() {
        const files = this.files;
        
        // Clear existing previews
        galleryPreviewContainer.innerHTML = '';
        
        if (files.length > 0) {
            let validFiles = 0;
            
            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                
                // Validate file size (2MB)
                if (file.size > 2 * 1024 * 1024) {
                    alert(`File ${file.name} terlalu besar. Maksimal 2MB per file.`);
                    continue;
                }
                
                // Validate file type
                if (!file.type.startsWith('image/')) {
                    alert(`File ${file.name} harus berupa gambar.`);
                    continue;
                }
                
                validFiles++;
                const reader = new FileReader();
                reader.onload = function(e) {
                    const previewDiv = document.createElement('div');
                    previewDiv.className = 'relative';
                    previewDiv.innerHTML = `
                        <img src="${e.target.result}" alt="Gallery Preview" class="w-full h-20 object-cover rounded border border-gray-300">
                        <button type="button" onclick="removeGalleryPreview(this)" class="absolute top-1 right-1 bg-red-500 hover:bg-red-600 text-white rounded-full p-1 w-5 h-5 flex items-center justify-center text-xs">
                            <i class="fas fa-times"></i>
                        </button>
                    `;
                    galleryPreviewContainer.appendChild(previewDiv);
                };
                reader.readAsDataURL(file);
            }
            
            if (validFiles > 0) {
                galleryPreview.classList.remove('hidden');
                galleryUploadArea.classList.add('hidden');
            }
        } else {
            galleryPreview.classList.add('hidden');
            galleryUploadArea.classList.remove('hidden');
        }
    });
});

// Remove featured image preview
function removeFeaturedPreview() {
    const featuredImageInput = document.getElementById('featured_image');
    const featuredPreview = document.getElementById('featured_preview');
    const featuredUploadArea = document.getElementById('featured_upload_area');
    
    featuredImageInput.value = '';
    featuredPreview.classList.add('hidden');
    featuredUploadArea.classList.remove('hidden');
}

// Remove single gallery preview
function removeGalleryPreview(button) {
    const previewDiv = button.parentElement;
    previewDiv.remove();
    
    // Check if no more previews left
    const galleryPreviewContainer = document.getElementById('gallery_preview_container');
    if (galleryPreviewContainer.children.length === 0) {
        removeAllGalleryPreviews();
    }
}

// Remove all gallery previews
function removeAllGalleryPreviews() {
    const galleryInput = document.getElementById('gallery');
    const galleryPreview = document.getElementById('gallery_preview');
    const galleryPreviewContainer = document.getElementById('gallery_preview_container');
    const galleryUploadArea = document.getElementById('gallery_upload_area');
    
    galleryInput.value = '';
    galleryPreviewContainer.innerHTML = '';
    galleryPreview.classList.add('hidden');
    galleryUploadArea.classList.remove('hidden');
}

    // Specifications management
    let specificationIndex = {{ isset($product->specifications) && is_array($product->specifications) ? count($product->specifications) : 1 }};
    
    // Add specification
    document.getElementById('add-specification').addEventListener('click', function() {
        const container = document.getElementById('specifications-container');
        const newRow = document.createElement('div');
        newRow.className = 'specification-row flex gap-2';
        newRow.innerHTML = `
            <input type="text" name="specifications[${specificationIndex}][key]" placeholder="Nama spesifikasi"
                   class="flex-1 px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
            <input type="text" name="specifications[${specificationIndex}][value]" placeholder="Nilai spesifikasi"
                   class="flex-1 px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
            <button type="button" class="remove-specification px-3 py-2 text-red-600 hover:text-red-800 hover:bg-red-50 rounded-lg transition duration-150 ease-in-out">
                <i class="fas fa-trash"></i>
            </button>
        `;
        container.appendChild(newRow);
        specificationIndex++;
        
        // Add event listener to remove button
        newRow.querySelector('.remove-specification').addEventListener('click', function() {
            newRow.remove();
        });
    });
    
    // Add event listener to existing remove buttons
    document.addEventListener('click', function(e) {
        if (e.target.classList.contains('remove-specification') || e.target.closest('.remove-specification')) {
            const button = e.target.classList.contains('remove-specification') ? e.target : e.target.closest('.remove-specification');
            const row = button.closest('.specification-row');
            if (row) {
                row.remove();
            }
        }
    });

    // Handle form submission
    const form = document.querySelector('form');
    const submitBtn = document.getElementById('submit-btn');
    const submitIcon = document.getElementById('submit-icon');
    const submitText = document.getElementById('submit-text');
    
    if (form && submitBtn) {
        form.addEventListener('submit', function() {
            // Disable button and change text
            submitBtn.disabled = true;
            submitIcon.className = 'fas fa-spinner fa-spin mr-2';
            submitText.textContent = 'Menyimpan...';
            
            // Prevent double submission
            setTimeout(() => {
                if (!form.checkValidity()) {
                    // Re-enable if form is invalid
                    submitBtn.disabled = false;
                    submitIcon.className = 'fas fa-save mr-2';
                    submitText.textContent = 'Update Produk';
                }
            }, 100);
        });
    }
 
</script>
@endsection