{{-- Error Alert – only when NOT inside modal --}}
@if (!($isModal ?? false))
    @if ($errors->any())
        <div class="alert alert-danger border-0 shadow-sm mb-4">
            <div class="d-flex align-items-center">
                <i class="fas fa-exclamation-circle me-2"></i>
                <h6 class="mb-0">Please fix the following errors:</h6>
            </div>
            <ul class="mb-0 mt-2">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
@endif

<div class="row">
    <!-- Left Column - Product Details -->
    <div class="col-lg-8">
        <div class="card shadow-sm border-0 mb-4">
            <div class="card-header bg-light py-3">
                <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>Product Information</h5>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-12">
                        <label for="{{ $isModal ?? false ? 'modal_name' : 'name' }}" class="form-label">Product Name</label>
                        <input type="text"
                               class="form-control"
                               name="name"
                               id="{{ $isModal ?? false ? 'modal_name' : 'name' }}"
                               value="{{ old('name', $product->name ?? '') }}"
                               required>
                        @error('name') <div class="text-danger">{{ $message }}</div> @enderror
                    </div>

                    <div class="col-12">
                        <label for="{{ $isModal ?? false ? 'modal_description' : 'description' }}" class="form-label">Description</label>
                        <textarea class="form-control"
                                  name="description"
                                  id="{{ $isModal ?? false ? 'modal_description' : 'description' }}"
                                  rows="4"
                                  required>{{ old('description', $product->description ?? '') }}</textarea>
                        @error('description') <div class="text-danger">{{ $message }}</div> @enderror
                    </div>

                    <!-- IMAGE SECTION -->
                    <div class="col-12">
                        <label class="form-label">Product Images</label>

                        {{-- Enhanced file input with better styling --}}
                        <div class="file-upload-area border rounded p-4 bg-light text-center">
                            <i class="fas fa-cloud-upload-alt fa-2x text-muted mb-2"></i>
                            <p class="mb-1">Drag and drop images here or click to browse</p>
                            <small class="text-muted d-block mb-3">Supports JPG, JPEG, PNG files (Max 2MB each)</small>

                            <input type="file"
                                   name="images[]"
                                   class="form-control d-inline-block w-auto mx-auto"
                                   multiple
                                   accept="image/jpeg,image/jpg,image/png"
                                   id="image-upload">
                        </div>

                        {{-- Image preview container --}}
                        <div id="image-preview" class="row mt-3 g-2"></div>

                        {{-- Upload type hidden field --}}
                        <input type="hidden" name="upload_type" value="file">

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

    <!-- Right Column - Category, Pricing & Existing Images -->
    <div class="col-lg-4">
        <!-- Category Card -->
        <div class="card shadow-sm border-0 mb-4">
            <div class="card-header bg-light py-3">
                <h5 class="mb-0"><i class="fas fa-tags me-2"></i>Category</h5>
            </div>
            <div class="card-body">
                <label for="{{ $isModal ?? false ? 'modal_category' : 'category' }}" class="form-label">Product Category</label>
                <select class="form-select"
                        name="category"
                        id="{{ $isModal ?? false ? 'modal_category' : 'category' }}"
                        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-danger">{{ $message }}</div> @enderror
            </div>
        </div>

        <!-- Pricing Card -->
        <div class="card shadow-sm border-0 mb-4">
            <div class="card-header bg-light py-3">
                <h5 class="mb-0"><i class="fas fa-dollar-sign me-2"></i>Pricing</h5>
            </div>
            <div class="card-body">
                <label for="{{ $isModal ?? false ? 'modal_price' : 'price' }}" class="form-label">Price</label>
                <div class="input-group">
                    <span class="input-group-text">$</span>
                    <input type="number"
                           step="0.01"
                           class="form-control"
                           name="price"
                           id="{{ $isModal ?? false ? 'modal_price' : 'price' }}"
                           value="{{ old('price', $product->price ?? '') }}"
                           required>
                </div>
                @error('price') <div class="text-danger">{{ $message }}</div> @enderror
            </div>
        </div>

        <!-- Existing Images Section - Only show when editing and images exist -->
        @if(isset($product) && $product->images->isNotEmpty() && !($isModal ?? false))
            <div class="card shadow-sm border-0">
                <div class="card-header bg-light py-3">
                    <h5 class="mb-0"><i class="fas fa-images me-2"></i>Existing Images ({{ $product->images->count() }})</h5>
                </div>
                <div class="card-body">
                    <div class="row g-2">
                        @foreach($product->images as $image)
                            <div class="col-6 col-md-4 mb-2">
                                <div class="card border-0 shadow-sm h-100">
                                    <div class="position-relative">
                                        <img src="{{ asset('storage/' . $image->path) }}"
                                             class="card-img-top"
                                             style="height: 100px; object-fit: cover;"
                                             alt="Product Image">
                                        <div class="position-absolute top-0 end-0 p-1">
                                            <button type="button"
                                                    class="btn btn-sm btn-danger rounded-circle"
                                                    onclick="deleteImage({{ $image->id }})"
                                                    title="Remove image">
                                                <i class="fas fa-times"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="card-body p-2 text-center">
                                        <small class="text-muted d-block">Uploaded</small>
                                        <small class="text-muted">{{ $image->created_at->format('M j, Y') }}</small>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    @if($product->images->count() > 6)
                        <div class="mt-2 text-center">
                            <small class="text-muted">Showing {{ min($product->images->count(), 6) }} of {{ $product->images->count() }} images</small>
                        </div>
                    @endif
                </div>
            </div>

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

            <script>
                function deleteImage(imageId) {
                    if (confirm('Are you sure you want to remove this image?')) {
                        const form = document.getElementById('delete-image-form');
                        form.action = "{{ route('products.image.destroy', '') }}/" + imageId;
                        form.submit();
                    }
                }
            </script>
        @endif
    </div>
</div>

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

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

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

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

                        // Validate file size (2MB = 2 * 1024 * 1024 bytes)
                        if (file.size > 2 * 1024 * 1024) {
                            alert(`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 = 'col-6 col-md-4 col-lg-3 mb-2';
                            col.innerHTML = `
                                <div class="card border-0 shadow-sm h-100">
                                    <img src="${e.target.result}" class="card-img-top" style="height: 100px; object-fit: cover;">
                                    <div class="card-body p-2 text-center">
                                        <small class="card-text text-truncate d-block" title="${file.name}">${file.name}</small>
                                        <small class="text-muted">${(file.size / 1024).toFixed(1)} KB</small>
                                    </div>
                                </div>
                            `;
                            imagePreview.appendChild(col);
                        };

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

                        reader.readAsDataURL(file);
                    }
                } else {
                    // Reset upload area text if no files
                    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';
                    }
                }
            });

            // Add drag and drop functionality
            const uploadArea = imageUpload.closest('.file-upload-area');
            if (uploadArea) {
                uploadArea.addEventListener('dragover', function(e) {
                    e.preventDefault();
                    this.style.backgroundColor = '#e9ecef';
                });

                uploadArea.addEventListener('dragleave', function(e) {
                    e.preventDefault();
                    this.style.backgroundColor = '';
                });

                uploadArea.addEventListener('drop', function(e) {
                    e.preventDefault();
                    this.style.backgroundColor = '';

                    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: 2px dashed #dee2e6;
            cursor: pointer;
        }
        .file-upload-area:hover {
            border-color: #6c757d;
            background-color: #f8f9fa !important;
        }
        .file-upload-area.dragover {
            border-color: #007bff;
            background-color: #e7f3ff !important;
        }
        #image-preview .card,
        .card .card {
            transition: transform 0.2s;
        }
        #image-preview .card:hover,
        .card .card:hover {
            transform: translateY(-2px);
        }
        .card-header {
            border-bottom: 1px solid rgba(0,0,0,.125);
        }
    </style>
@endpush