@if($isModal ?? false)
    <!-- Beautiful Tailwind form layout for Modal -->
    <div class="space-y-5">
        <!-- Product Name -->
        <div>
            <label for="modal_name" class="block text-sm font-semibold text-zinc-700 dark:text-zinc-300 mb-1.5">Product Name</label>
            <input type="text"
                   name="name"
                   id="modal_name"
                   value="{{ old('name', $product->name ?? '') }}"
                   class="block w-full rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-3.5 py-2 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 outline-none transition-colors"
                   placeholder="e.g. Red Rose Bouquet"
                   required>
            @error('name') <div class="text-red-500 text-xs mt-1">{{ $message }}</div> @enderror
        </div>

        <!-- Category & Price in 2 Columns -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <!-- Category -->
            <div>
                <label for="modal_category" class="block text-sm font-semibold text-zinc-700 dark:text-zinc-300 mb-1.5">Category</label>
                <select name="category"
                        id="modal_category"
                        class="block w-full rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-3.5 py-2 text-sm text-zinc-900 dark:text-zinc-100 focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 outline-none transition-colors"
                        required>
                    <option value="">Select a category</option>
                    @foreach($categories as $cat)
                        <option value="{{ $cat->id }}"
                            {{ old('category', $product->category_id ?? '') == $cat->id ? 'selected' : '' }}>
                            {{ $cat->name }}
                        </option>
                    @endforeach
                </select>
                @error('category') <div class="text-red-500 text-xs mt-1">{{ $message }}</div> @enderror
            </div>

            <!-- Price -->
            <div>
                <label for="modal_price" class="block text-sm font-semibold text-zinc-700 dark:text-zinc-300 mb-1.5">Price ($)</label>
                <div class="relative">
                    <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-zinc-500 text-sm pointer-events-none">$</span>
                    <input type="number"
                           step="0.01"
                           name="price"
                           id="modal_price"
                           value="{{ old('price', $product->price ?? '') }}"
                           class="block w-full rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 pl-8 pr-3.5 py-2 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 outline-none transition-colors"
                           placeholder="0.00"
                           required>
                </div>
                @error('price') <div class="text-red-500 text-xs mt-1">{{ $message }}</div> @enderror
            </div>
        </div>

        <!-- Description -->
        <div>
            <label for="modal_description" class="block text-sm font-semibold text-zinc-700 dark:text-zinc-300 mb-1.5">Description</label>
            <textarea name="description"
                      id="modal_description"
                      rows="3"
                      class="block w-full rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-3.5 py-2 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 outline-none transition-colors"
                      placeholder="Describe the product details..."
                      required>{{ old('description', $product->description ?? '') }}</textarea>
            @error('description') <div class="text-red-500 text-xs mt-1">{{ $message }}</div> @enderror
        </div>

        <!-- Images Section -->
        <div>
            <label class="block text-sm font-semibold text-zinc-700 dark:text-zinc-300 mb-1.5">Product Images</label>
            <div class="file-upload-area relative border-2 border-dashed border-zinc-300 dark:border-zinc-700 hover:border-zinc-400 dark:hover:border-zinc-500 rounded-xl p-6 bg-zinc-50 dark:bg-zinc-800/40 text-center transition-colors cursor-pointer">
                <svg class="mx-auto h-8 w-8 text-zinc-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/>
                </svg>
                <p class="mt-2 text-sm font-medium text-zinc-700 dark:text-zinc-300">Drag and drop images here or click to browse</p>
                <p class="mt-1 text-xs text-zinc-500">JPG, JPEG, PNG (Max 2MB each)</p>
                <input type="file"
                       name="images[]"
                       multiple
                       accept="image/jpeg,image/jpg,image/png"
                       id="image-upload"
                       class="absolute inset-0 w-full h-full opacity-0 cursor-pointer">
            </div>

            <!-- Image Preview Grid -->
            <div id="image-preview" class="grid grid-cols-3 sm:grid-cols-4 gap-3 mt-4"></div>
        </div>
    </div>
@else
    <!-- Premium Tailwind CSS Form Layout for Pages -->
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
        <!-- Left Column: Product Details & Images -->
        <div class="lg:col-span-8 space-y-6">
            <!-- Product Information Card -->
            <div class="bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800/80 rounded-2xl shadow-sm overflow-hidden">
                <div class="px-6 py-4 border-b border-zinc-200 dark:border-zinc-800/80 bg-zinc-50/50 dark:bg-zinc-950/20 flex items-center gap-2">
                    <i class="uil uil-info-circle text-emerald-600 dark:text-emerald-400"></i>
                    <h2 class="text-sm font-bold text-zinc-800 dark:text-zinc-200">Product Information</h2>
                </div>
                <div class="p-6 space-y-5">
                    <!-- Product Name -->
                    <div>
                        <label for="name" class="block text-sm font-semibold text-zinc-700 dark:text-zinc-300 mb-1.5">Product Name</label>
                        <input type="text"
                               name="name"
                               id="name"
                               value="{{ old('name', $product->name ?? '') }}"
                               class="block w-full rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-3.5 py-2 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 outline-none transition-colors"
                               placeholder="e.g. Red Rose Bouquet"
                               required>
                        @error('name') <div class="text-red-500 text-xs mt-1">{{ $message }}</div> @enderror
                    </div>

                    <!-- Description -->
                    <div>
                        <label for="description" class="block text-sm font-semibold text-zinc-700 dark:text-zinc-300 mb-1.5">Description</label>
                        <textarea name="description"
                                  id="description"
                                  rows="5"
                                  class="block w-full rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-3.5 py-2 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 outline-none transition-colors"
                                  placeholder="Describe the product details, floral arrangement composition, sizes..."
                                  required>{{ old('description', $product->description ?? '') }}</textarea>
                        @error('description') <div class="text-red-500 text-xs mt-1">{{ $message }}</div> @enderror
                    </div>
                </div>
            </div>

            <!-- Product Images Card -->
            <div class="bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800/80 rounded-2xl shadow-sm overflow-hidden">
                <div class="px-6 py-4 border-b border-zinc-200 dark:border-zinc-800/80 bg-zinc-50/50 dark:bg-zinc-950/20 flex items-center gap-2">
                    <i class="uil uil-camera text-emerald-600 dark:text-emerald-400"></i>
                    <h2 class="text-sm font-bold text-zinc-800 dark:text-zinc-200">Product Images</h2>
                </div>
                <div class="p-6">
                    <label class="block text-sm font-semibold text-zinc-700 dark:text-zinc-300 mb-1.5">Upload Images</label>
                    <div class="file-upload-area relative border-2 border-dashed border-zinc-300 dark:border-zinc-700 hover:border-zinc-400 dark:hover:border-zinc-500 rounded-xl p-6 bg-zinc-50 dark:bg-zinc-800/40 text-center transition-colors cursor-pointer">
                        <svg class="mx-auto h-8 w-8 text-zinc-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/>
                        </svg>
                        <p class="mt-2 text-sm font-medium text-zinc-700 dark:text-zinc-300">Drag and drop images here or click to browse</p>
                        <p class="mt-1 text-xs text-zinc-500">JPG, JPEG, PNG (Max 2MB each)</p>
                        <input type="file"
                               name="images[]"
                               multiple
                               accept="image/jpeg,image/jpg,image/png"
                               id="image-upload"
                               class="absolute inset-0 w-full h-full opacity-0 cursor-pointer">
                    </div>

                    <!-- Image Preview Grid -->
                    <div id="image-preview" class="grid grid-cols-2 sm:grid-cols-3 gap-3 mt-4"></div>
                    <input type="hidden" name="upload_type" value="file">

                    @error('images') <div class="text-red-500 text-xs mt-2">{{ $message }}</div> @enderror
                    @error('images.*') <div class="text-red-500 text-xs mt-2">{{ $message }}</div> @enderror
                </div>
            </div>
        </div>

        <!-- Right Column: Classification, Pricing & Existing Images -->
        <div class="lg:col-span-4 space-y-6">
            <!-- Category Card -->
            <div class="bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800/80 rounded-2xl shadow-sm overflow-hidden">
                <div class="px-6 py-4 border-b border-zinc-200 dark:border-zinc-800/80 bg-zinc-50/50 dark:bg-zinc-950/20 flex items-center gap-2">
                    <i class="uil uil-tags text-emerald-600 dark:text-emerald-400"></i>
                    <h2 class="text-sm font-bold text-zinc-800 dark:text-zinc-200">Category</h2>
                </div>
                <div class="p-6">
                    <label for="category" class="block text-sm font-semibold text-zinc-700 dark:text-zinc-300 mb-1.5">Product Category</label>
                    <select name="category"
                            id="category"
                            class="block w-full rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-3.5 py-2 text-sm text-zinc-900 dark:text-zinc-100 focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 outline-none transition-colors cursor-pointer"
                            required>
                        <option value="">Select a category</option>
                        @foreach($categories as $cat)
                            <option value="{{ $cat->id }}"
                                {{ old('category', $product->category_id ?? '') == $cat->id ? 'selected' : '' }}>
                                {{ $cat->name }}
                            </option>
                        @endforeach
                    </select>
                    @error('category') <div class="text-red-500 text-xs mt-1">{{ $message }}</div> @enderror
                </div>
            </div>

            <!-- Pricing Card -->
            <div class="bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800/80 rounded-2xl shadow-sm overflow-hidden">
                <div class="px-6 py-4 border-b border-zinc-200 dark:border-zinc-800/80 bg-zinc-50/50 dark:bg-zinc-950/20 flex items-center gap-2">
                    <i class="uil uil-dollar-sign-alt text-emerald-600 dark:text-emerald-400"></i>
                    <h2 class="text-sm font-bold text-zinc-800 dark:text-zinc-200">Pricing</h2>
                </div>
                <div class="p-6">
                    <label for="price" class="block text-sm font-semibold text-zinc-700 dark:text-zinc-300 mb-1.5">Price ($)</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-zinc-500 text-sm pointer-events-none">$</span>
                        <input type="number"
                               step="0.01"
                               name="price"
                               id="price"
                               value="{{ old('price', $product->price ?? '') }}"
                               class="block w-full rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 pl-8 pr-3.5 py-2 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 outline-none transition-colors"
                               placeholder="0.00"
                               required>
                    </div>
                    @error('price') <div class="text-red-500 text-xs mt-1">{{ $message }}</div> @enderror
                </div>
            </div>

            <!-- Existing Images Section -->
            @if(isset($product) && $product->images->isNotEmpty())
                <div class="bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800/80 rounded-2xl shadow-sm overflow-hidden">
                    <div class="px-6 py-4 border-b border-zinc-200 dark:border-zinc-800/80 bg-zinc-50/50 dark:bg-zinc-950/20 flex items-center gap-2">
                        <i class="uil uil-image text-emerald-600 dark:text-emerald-400"></i>
                        <h2 class="text-sm font-bold text-zinc-800 dark:text-zinc-200">Existing Images ({{ $product->images->count() }})</h2>
                    </div>
                    <div class="p-6">
                        <div class="grid grid-cols-2 gap-3">
                            @foreach($product->images as $image)
                                <div class="relative aspect-square w-full rounded-xl overflow-hidden border border-zinc-200 dark:border-zinc-800 group shadow-sm bg-zinc-50 dark:bg-zinc-950">
                                    <img src="{{ asset('storage/' . $image->path) }}"
                                         class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                                         alt="Product Image">
                                    <div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center justify-center">
                                        <button type="button"
                                                class="p-2.5 bg-rose-600 hover:bg-rose-500 text-white rounded-full transition-transform scale-75 group-hover:scale-100 duration-200 shadow-lg cursor-pointer"
                                                onclick="deleteImage({{ $image->id }})"
                                                title="Remove image">
                                            <i class="uil uil-trash-alt text-sm"></i>
                                        </button>
                                    </div>
                                    <div class="absolute bottom-0 inset-x-0 bg-zinc-950/70 backdrop-blur-xs py-1 px-2 text-center">
                                        <p class="text-[9px] text-zinc-300 font-medium truncate">{{ $image->created_at->format('M j, Y') }}</p>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>

                <form id="delete-image-form" method="POST" style="display: none;">
                    @csrf
                    @method('DELETE')
                </form>

                <script>
                    async function deleteImage(imageId) {
                        const result = await window.showConfirm('Remove this image?', 'Are you sure you want to delete this image? This action cannot be undone.', 'warning', 'Yes, delete it!');
                        if (result.isConfirmed) {
                            const form = document.getElementById('delete-image-form');
                            form.action = "/products/images/" + imageId;
                            form.submit();
                        }
                    }
                </script>
            @endif
        </div>
    </div>
@endif

{{-- Image Preview Script & Drag and Drop --}}
@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const imageUpload = document.getElementById('image-upload');
            const imagePreview = document.getElementById('image-preview');

            if (!imageUpload || !imagePreview) return;

            imageUpload.addEventListener('change', function(e) {
                imagePreview.innerHTML = '';

                if (this.files && this.files.length > 0) {
                    const uploadArea = this.closest('.file-upload-area');
                    const originalText = uploadArea.querySelector('p');
                    if (originalText) {
                        originalText.textContent = `${this.files.length} file(s) selected`;
                    }

                    for (let i = 0; i < this.files.length; i++) {
                        const file = this.files[i];

                        if (file.size > 2 * 1024 * 1024) {
                            window.showToast('error', `File "${file.name}" is too large. Maximum size is 2MB.`);
                            continue;
                        }

                        const reader = new FileReader();

                        reader.onload = function(e) {
                            const col = document.createElement('div');
                            col.className = 'relative rounded-xl overflow-hidden border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-sm p-1.5 flex flex-col justify-between';
                            col.innerHTML = `
                                <div class="aspect-square w-full bg-zinc-100 dark:bg-zinc-800 rounded-lg overflow-hidden">
                                    <img src="${e.target.result}" class="w-full h-full object-cover">
                                </div>
                                <div class="p-1 text-center text-[10px] mt-1.5">
                                    <p class="font-semibold text-zinc-700 dark:text-zinc-300 truncate" title="${file.name}">${file.name}</p>
                                    <p class="text-zinc-400 mt-0.5">${(file.size / 1024).toFixed(1)} KB</p>
                                </div>
                            `;
                            imagePreview.appendChild(col);
                        };

                        reader.onerror = function() {
                            console.error('Error reading file:', file.name);
                        };

                        reader.readAsDataURL(file);
                    }
                } else {
                    const uploadArea = imageUpload.closest('.file-upload-area');
                    const originalText = uploadArea.querySelector('p');
                    if (originalText) {
                        originalText.textContent = 'Drag and drop images here or click to browse';
                    }
                }
            });

            const uploadArea = imageUpload.closest('.file-upload-area');
            if (uploadArea) {
                uploadArea.addEventListener('dragover', function(e) {
                    e.preventDefault();
                    this.classList.add('dragover');
                });

                uploadArea.addEventListener('dragleave', function(e) {
                    e.preventDefault();
                    this.classList.remove('dragover');
                });

                uploadArea.addEventListener('drop', function(e) {
                    e.preventDefault();
                    this.classList.remove('dragover');

                    if (e.dataTransfer.files.length > 0) {
                        imageUpload.files = e.dataTransfer.files;
                        imageUpload.dispatchEvent(new Event('change'));
                    }
                });
            }
        });
    </script>

    <style>
        .file-upload-area {
            transition: background-color 0.3s ease, border-color 0.3s ease;
        }
        .file-upload-area.dragover {
            border-color: #10b981 !important; /* Emerald color for dragover */
            background-color: rgba(16, 185, 129, 0.05) !important;
        }
    </style>
@endpush