{% extends "base.html" %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2 class="text-gradient">
        <i class="fas fa-tshirt me-2"></i> Product Inventory
    </h2>
    <div>
        <button class="btn btn-danger me-2" id="bulkDeleteBtn" style="display: none;">
            <i class="fas fa-trash me-1"></i> Delete Selected
        </button>
        <button class="btn btn-primary glow" data-bs-toggle="modal" data-bs-target="#addProductModal">
            <i class="fas fa-plus me-1"></i> Add New Product
        </button>
    </div>
</div>

<!-- Search and Filter Section -->
<div class="search-controls mb-4">
    <div class="row">
        <div class="col-md-4">
            <div class="input-group">
                <input type="text" id="productSearch" class="form-control" 
                       placeholder="🔍 Search by Lot Details, Product Name, or Category...">
                <button class="btn btn-outline-secondary" type="button" id="clearSearch">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </div>
        <!-- Category filter removed - now integrated into main search as keywords -->
        <div class="col-md-3">
            <input type="date" id="dateFrom" class="form-control" placeholder="From Date">
        </div>
        <div class="col-md-3">
            <input type="date" id="dateTo" class="form-control" placeholder="To Date">
        </div>
    </div>
</div>

<div class="garments-card">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th>
                            <input type="checkbox" id="selectAllProducts" class="form-check-input" title="Select All">
                        </th>
                        <th>🖼️ Images</th>
                        <th>📦 Lot Details</th>
                        <th>📛 Product Name</th>
                        <th>📂 Category</th>
                        <th>🎨 Colors</th>
                        <th>📏 Sizes</th>
                        <th>📊 Total Stock</th>
                        <th>📈 Total Sales</th>
                        <th>💰 Price</th>
                        <th>📅 Date Added</th>
                        <th>⚡ Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for product in products %}
                    <tr class="hover-lift" data-category="{{ product.category or '' }}" data-created-date="{{ product.created_at.strftime('%Y-%m-%d') if product.created_at else '' }}">
                        <td>
                            <input type="checkbox" class="form-check-input product-checkbox" 
                                   data-product-id="{{ product.id }}" 
                                   data-has-sales="{{ 'true' if product.total_sales > 0 else 'false' }}">
                        </td>
                        <td>
                            <div class="product-images-preview" data-product-id="{{ product.id }}">
                                {% if product.variants %}
                                    {% set main_variant = (product.variants | selectattr('image_path') | list | first) or product.variants[0] %}
                                    {% if main_variant.image_path %}
                                        {% if main_variant.image_path.startswith('http') %}
                                        <img src="{{ main_variant.image_path | optimize_image(150) }}" 
                                             class="product-image-thumb main-product-image clickable-image"
                                             title="{{ main_variant.color }}"
                                             loading="lazy"
                                             alt="{{ product.product_name }}"
                                             onclick="openProductGallery({{ product.id }}, 0)"
                                             style="cursor: pointer;">
                                        {% else %}
                                        <img src="{{ url_for('static', filename=main_variant.image_path) }}" 
                                             class="product-image-thumb main-product-image clickable-image"
                                             title="{{ main_variant.color }}"
                                             loading="lazy"
                                             alt="{{ product.product_name }}"
                                             onclick="openProductGallery({{ product.id }}, 0)"
                                             style="cursor: pointer;">
                                        {% endif %}
                                        {% if product.variants|length > 1 %}
                                        <div class="color-count-badge" title="{{ product.variants|length }} colors available - Click to browse">
                                            <i class="fas fa-palette"></i> {{ product.variants|length }}
                                        </div>
                                        {% endif %}
                                    {% else %}
                                        <div class="image-placeholder-small">
                                            <i class="fas fa-image"></i>
                                        </div>
                                    {% endif %}
                                {% else %}
                                    <div class="image-placeholder-small">
                                        <i class="fas fa-image"></i>
                                    </div>
                                {% endif %}
                            </div>
                        </td>
                        <td><span class="badge bg-info">{{ product.lot_details or 'N/A' }}</span></td>
                        <td>
                            <strong class="text-dark">{{ product.product_name }}</strong>
                            {% if product.description %}
                            <br><small class="text-muted">{{ product.description[:50] }}{% if product.description|length > 50 %}...{% endif %}</small>
                            {% endif %}
                        </td>
                        <td>
                            {% if product.category %}
                            <span class="badge bg-secondary">{{ product.category }}</span>
                            {% else %}
                            <span class="text-muted">N/A</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if product.variants and product.variants|length > 0 %}
                                {% set main_variant = product.variants[0] %}
                                <span class="color-text-badge">{{ main_variant.color | clean_text or 'N/A' }}</span>
                            {% else %}
                                <span class="text-muted">No colors</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if product.variants and product.variants|length > 0 %}
                                {% set main_variant = product.variants[0] %}
                                <span class="badge bg-warning text-dark">{{ main_variant.size | clean_text or 'N/A' }}</span>
                            {% else %}
                                <span class="text-muted">No sizes</span>
                            {% endif %}
                        </td>
                        <td>
                            {% set total_stock = product.total_stock or 0 %}
                            <span class="badge {% if total_stock < 10 %}bg-danger{% elif total_stock < 50 %}bg-warning{% else %}bg-success{% endif %}">
                                📦 {{ total_stock }}
                            </span>
                        </td>
                        <td>
                            {% set total_sales = product.total_sales or 0 %}
                            <span class="badge bg-info">
                                📊 {{ total_sales }}
                            </span>
                        </td>
                        <td>
                            <strong>AED {{ "{:,.2f}".format(product.avg_price or 0) }}</strong>
                        </td>
                        <td>
                            <small class="text-muted">{{ product.created_at.strftime('%Y-%m-%d') if product.created_at else 'N/A' }}</small>
                        </td>
                        <td>
                            <div class="btn-group btn-group-sm" role="group">
                                <button class="btn btn-outline-info view-product-btn" 
                                        data-product-id="{{ product.id }}"
                                        title="View Details">
                                    <i class="fas fa-expand-alt"></i> 
                                </button>
                                
                                <button class="btn btn-outline-warning edit-product-btn" 
                                        data-product-id="{{ product.id }}"
                                        title="Edit Product">
                                    <i class="fas fa-edit"></i>
                                </button>
                                
                                <!-- Updated visibility toggle button -->
                                <form method="POST" action="{{ url_for('toggle_product_visibility', product_id=product.id) }}" class="d-inline">
                                    <button type="submit" class="btn btn-{{ 'success' if product.is_visible else 'secondary' }}"
                                            title="{{ 'Hide from outlet' if product.is_visible else 'Show in outlet' }}">
                                        <i class="fas fa-{{ 'eye' if product.is_visible else 'eye-slash' }}"></i>
                                    </button>
                                </form>
                                
                                {% if product.total_sales > 0 %}
                                <button class="btn btn-outline-secondary" 
                                        title="Cannot delete - has sales records"
                                        disabled>
                                    <i class="fas fa-trash"></i>
                                </button>
                                {% else %}
                                <button class="btn btn-outline-danger delete-product-btn" 
                                        data-product-id="{{ product.id }}"
                                        data-product-name="{{ product.product_name }}"
                                        title="Delete Product">
                                    <i class="fas fa-trash"></i>
                                </button>
                                {% endif %}
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        
        <!-- Client-Side Pagination Controls -->
        <div class="d-flex justify-content-between align-items-center mt-3" id="paginationControls">
            <div>
                <p class="text-muted mb-0" id="paginationInfo">Showing 0 products</p>
            </div>
            <nav aria-label="Product navigation">
                <ul class="pagination mb-0" id="paginationButtons">
                    <!-- Pagination buttons will be generated by JavaScript -->
                </ul>
            </nav>
        </div>
    </div>
</div>

<!-- Lot-wise Inventory Summary -->
<div class="garments-card mt-4">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0"><i class="fas fa-layer-group me-2"></i> Lot-wise Inventory Summary</h5>
        <div class="d-flex gap-2 align-items-center">
            <select class="form-select" id="lotSelector" style="min-width: 240px;">
                <option value="">Select a lot...</option>
            </select>
            <button class="btn btn-outline-primary" id="refreshLotSummary">
                <i class="fas fa-sync"></i>
            </button>
        </div>
    </div>
    <div class="card-body" id="lotSummaryBody">
        <div class="text-muted">Select a lot to view total arrived, sold, and remaining quantities.</div>
    </div>
</div>

<!-- Enhanced Image Gallery Modal with Navigation -->
<div id="imageModal" class="image-modal" onclick="closeImageModal(event)">
    <button class="modal-close-btn" onclick="closeImageModal(event)" aria-label="Close">
        <i class="fas fa-times"></i>
    </button>
    
    <!-- Navigation arrows for multiple images -->
    <button class="modal-nav-btn modal-nav-left" onclick="navigateGallery(-1, event)" aria-label="Previous">
        <i class="fas fa-chevron-left"></i>
    </button>
    <button class="modal-nav-btn modal-nav-right" onclick="navigateGallery(1, event)" aria-label="Next">
        <i class="fas fa-chevron-right"></i>
    </button>
    
    <div class="modal-image-wrapper">
        <img id="modalImage" src="" alt="Product Image" class="modal-img">
        <div id="modalCaption" class="modal-caption"></div>
        <div id="modalCounter" class="modal-counter"></div>
    </div>
</div>

<!-- View Product Details Modal -->
<div class="modal fade" id="viewProductModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fas fa-info-circle me-2"></i> Product Details</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="viewProductContent">
                <!-- Content will be loaded dynamically -->
            </div>
        </div>
    </div>
</div>

<!-- Edit Product Modal -->
<div class="modal fade" id="editProductModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fas fa-edit me-2"></i> Edit Product</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="" id="editProductForm" enctype="multipart/form-data">
                <div class="modal-body" id="editProductContent">
                    <!-- Content will be loaded dynamically -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-1"></i> Cancel
                    </button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save me-1"></i> Save Changes
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Add Product Modal -->
<div class="modal fade" id="addProductModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fas fa-plus me-2"></i>Add New Product</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ url_for('add_product') }}" enctype="multipart/form-data" id="addProductForm">
                <div class="modal-body">
                    <h6 class="text-primary mb-3"><i class="fas fa-cube me-1"></i> Product Information</h6>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">📛 Product Name *</label>
                                <input type="text" class="form-control" name="product_name" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">📦 Lot Details *</label>
                                <input type="text" class="form-control" name="lot_details" required placeholder="e.g., LOT-2024-001, Batch #123, SH-07">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">📂 Category *</label>
                                <input type="text" class="form-control" name="category" required placeholder="e.g., T-Shirt, Jeans, Jacket">
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">📝 Description</label>
                        <textarea class="form-control" name="description" rows="2" placeholder="Product description..."></textarea>
                    </div>

                    <hr class="my-4">
                    <h6 class="text-primary mb-3"><i class="fas fa-box me-1"></i> Product Details</h6>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">🎨 Colors *</label>
                                <input type="text" class="form-control" name="colors_text" required 
                                       placeholder='e.g., "RED,BLACK,WHITE" or "4 COLORS"'>
                                <small class="text-muted">Enter color names separated by commas, or a description like "4 COLORS"</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">📏 Sizes *</label>
                                <input type="text" class="form-control" name="sizes_text" required 
                                       placeholder='e.g., "S,M,L,XL" or "4 SIZES"'>
                                <small class="text-muted">Enter size names separated by commas, or a description like "4 SIZES"</small>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">📦 Total Quantity *</label>
                                <input type="number" class="form-control" name="quantity" required min="0" value="0">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">💰 Buying Price (AED) *</label>
                                <input type="number" class="form-control" name="buying_price" required min="0" step="0.01" placeholder="0.00">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">💵 Selling Price (AED) *</label>
                                <input type="number" class="form-control" name="selling_price" required min="0" step="0.01" placeholder="0.00">
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">🖼️ Product Images</label>
                        <div id="imageUploadContainer">
                            <div class="image-upload-row mb-2">
                                <div class="row g-2">
                                    <div class="col-10">
                                        <input type="file" class="form-control image-input" name="images" accept="image/*">
                                    </div>
                                    <div class="col-2">
                                        <button type="button" class="btn btn-outline-success add-image-btn w-100" title="Add Another Image">
                                            <i class="fas fa-plus"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <small class="text-muted">Click + to add more images one by one.</small>
                    </div>
                    
                    <div class="alert alert-info mt-3">
                        <small><i class="fas fa-lightbulb me-1"></i> 
                            <strong>Wholesale Product Entry:</strong> 
                            <ul class="mb-0 mt-1">
                                <li>Enter colors as comma-separated values (e.g., "Red,Blue,Black") or as a count (e.g., "4 COLORS")</li>
                                <li>Enter sizes as comma-separated values (e.g., "S,M,L,XL") or as a count (e.g., "4 SIZES")</li>
                                <li>Total quantity represents the entire lot/batch</li>
                                <li>Buying and selling prices are per unit</li>
                                <li>You can upload multiple product images at once</li>
                            </ul>
                        </small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"><i class="fas fa-times me-1"></i> Close</button>
                    <button type="submit" class="btn btn-primary"><i class="fas fa-check me-1"></i> Add Product</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
// Add validation feedback and submission handling for add product form
document.addEventListener('DOMContentLoaded', function() {
    const addProductForm = document.getElementById('addProductForm');
    if (addProductForm) {
        addProductForm.addEventListener('submit', function(e) {
            // Perform basic validation
            if (!this.checkValidity()) {
                e.preventDefault();
                e.stopPropagation();
                this.classList.add('was-validated');
                alert('Please fill in all required fields marked with *');
                return false;
            }
        });
        
        // Reset form when modal is closed
        const addProductModal = document.getElementById('addProductModal');
        if (addProductModal) {
            addProductModal.addEventListener('hidden.bs.modal', function() {
                addProductForm.classList.remove('was-validated');
            });
        }
    }
});
</script>
<div class="modal fade" id="deleteConfirmModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title"><i class="fas fa-exclamation-triangle me-2"></i> Confirm Deletion</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p id="deleteMessage">Are you sure you want to delete this item?</p>
                <div class="alert alert-warning">
                    <strong>Warning:</strong> This action cannot be undone!
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"><i class="fas fa-times me-1"></i> Cancel</button>
                <form id="deleteForm" method="POST" style="display: inline;">
                    <button type="submit" class="btn btn-danger"><i class="fas fa-trash me-1"></i> Delete</button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// Toast notification function
function showToast(type, message) {
    // Create toast container if it doesn't exist
    let toastContainer = document.getElementById('toastContainer');
    if (!toastContainer) {
        toastContainer = document.createElement('div');
        toastContainer.id = 'toastContainer';
        toastContainer.className = 'toast-container position-fixed top-0 end-0 p-3';
        document.body.appendChild(toastContainer);
    }
    
    const toastId = 'toast-' + Date.now();
    const bgClass = type === 'success' ? 'bg-success' : 'bg-danger';
    
    const toastHtml = `
        <div id="${toastId}" class="toast align-items-center text-white ${bgClass} border-0" role="alert">
            <div class="d-flex">
                <div class="toast-body">
                    <i class="fas ${type === 'success' ? 'fa-check-circle' : 'fa-exclamation-triangle'} me-2"></i>
                    ${message}
                </div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
            </div>
        </div>
    `;
    
    toastContainer.insertAdjacentHTML('beforeend', toastHtml);
    
    const toastElement = document.getElementById(toastId);
    const toast = new bootstrap.Toast(toastElement, { delay: 3000 });
    toast.show();
    
    // Remove toast from DOM after it hides
    toastElement.addEventListener('hidden.bs.toast', function() {
        toastElement.remove();
    });
}

// Enhanced gallery modal with navigation
let modal, modalImg, modalCaption, modalCounter;
let isModalOpen = false;
let currentGallery = [];
let currentGalleryIndex = 0;
let productImagesCache = {}; // Cache for product images

// Initialize modal variables when DOM is ready
function initImageModal() {
    modal = document.getElementById('imageModal');
    modalImg = document.getElementById('modalImage');
    modalCaption = document.getElementById('modalCaption');
    modalCounter = document.getElementById('modalCounter');
    
    if (!modal || !modalImg || !modalCaption) {
        console.error('Image modal elements not found in DOM');
        return false;
    }
    return true;
}

// Fetch and cache product images
async function fetchProductImages(productId) {
    if (productImagesCache[productId]) {
        return productImagesCache[productId];
    }

    try {
        const response = await fetch('/get_product_details/' + productId);
        const data = await response.json();

        if (data.success && data.product && data.product.variants) {
            const images = [];
            const seenImages = new Set();

            // Get all unique images from variants
            data.product.variants.forEach(variant => {
                if (variant.image_path && !seenImages.has(variant.image_path)) {
                    seenImages.add(variant.image_path);

                    let imageSrc = variant.image_path;
                    // Optimize Cloudinary images
                    if (imageSrc.startsWith('http') && imageSrc.includes('/upload/')) {
                        imageSrc = imageSrc.replace('/upload/', '/upload/w_1200,q_auto,f_auto,c_limit/');
                    }

                    images.push({
                        src: imageSrc,
                        caption: `${data.product.product_name} - ${variant.color}`,
                        color: variant.color
                    });
                }
            });

            productImagesCache[productId] = images;
            console.log(`Fetched ${images.length} unique images for product ${productId}`);
            return images;
        }
    } catch (error) {
        console.error('Error fetching product images:', error);
    }

    return [];
}

// Open product gallery with navigation
async function openProductGallery(productId, startIndex = 0) {
    // Initialize modal if not already done
    if (!modal) {
        if (!initImageModal()) {
            console.error('Failed to initialize image modal');
            return;
        }
    }

    if (isModalOpen) return;

    // Get modal instances
    const productDetailsModal = bootstrap.Modal.getInstance(document.getElementById('viewProductModal'));
    const wasProductModalOpen = productDetailsModal && productDetailsModal._isShown;

    if (wasProductModalOpen) {
        productDetailsModal.hide();
    }

    // Show loading state
    modal.style.display = 'flex';
    modalCaption.textContent = 'Loading images...';
    modalImg.style.opacity = '0.3';
    isModalOpen = true;

    // Fetch product images
    const images = await fetchProductImages(productId);

    if (!images || images.length === 0) {
        modalCaption.textContent = 'No images available';
        setTimeout(() => closeImageModal({}), 1500);
        return;
    }

    // Setup gallery
    currentGallery = images;
    currentGalleryIndex = Math.max(0, Math.min(startIndex, images.length - 1));

    // Show navigation arrows only if multiple images
    const navButtons = modal.querySelectorAll('.modal-nav-btn');
    const showNav = images.length > 1;
    console.log(`Gallery has ${images.length} images, showing navigation: ${showNav}`);
    navButtons.forEach(btn => {
        btn.style.display = showNav ? 'flex' : 'none';
    });

    // Store state for reopening product modal
    modal.dataset.reopenProductModal = wasProductModalOpen ? 'true' : 'false';

    // Load first image
    loadGalleryImage(currentGalleryIndex);
}

// Load specific image in gallery
function loadGalleryImage(index) {
    if (!currentGallery || currentGallery.length === 0) return;
    
    const image = currentGallery[index];
    modalImg.style.opacity = '0.3';
    modalCaption.textContent = 'Loading...';
    
    // Preload image
    const tempImg = new Image();
    
    tempImg.onload = function() {
        modalImg.src = image.src;
        modalCaption.textContent = image.caption;
        modalImg.style.opacity = '1';
        
        // Update counter
        if (currentGallery.length > 1) {
            modalCounter.textContent = `${index + 1} / ${currentGallery.length}`;
            modalCounter.style.display = 'block';
        } else {
            modalCounter.style.display = 'none';
        }
        
        setTimeout(() => {
            modal.classList.add('active');
            document.body.style.overflow = 'hidden';
        }, 0);
    };
    
    tempImg.onerror = function() {
        console.error('Failed to load image:', image.src);
        modalCaption.textContent = `Failed to load: ${image.color}`;
        modalImg.style.opacity = '0.3';
        
        setTimeout(() => {
            modal.classList.add('active');
            document.body.style.overflow = 'hidden';
        }, 0);
    };
    
    tempImg.src = image.src;
}

// Navigate through gallery
function navigateGallery(direction, event) {
    if (event) {
        event.stopPropagation();
    }
    
    if (!currentGallery || currentGallery.length <= 1) return;
    
    currentGalleryIndex += direction;
    
    // Wrap around
    if (currentGalleryIndex < 0) {
        currentGalleryIndex = currentGallery.length - 1;
    } else if (currentGalleryIndex >= currentGallery.length) {
        currentGalleryIndex = 0;
    }
    
    loadGalleryImage(currentGalleryIndex);
}

// Legacy function for backward compatibility
function openImageModal(imageSrc, caption) {
    // Initialize modal if not already done
    if (!modal) {
        if (!initImageModal()) {
            console.error('Failed to initialize image modal');
            return;
        }
    }
    
    if (isModalOpen) return;
    
    // Validate image source
    if (!imageSrc || imageSrc === '' || imageSrc === 'None') {
        console.error('Invalid image source:', imageSrc);
        return;
    }
    
    // Setup as single-image gallery
    currentGallery = [{ src: imageSrc, caption: caption }];
    currentGalleryIndex = 0;
    
    // Get modal instances
    const productDetailsModal = bootstrap.Modal.getInstance(document.getElementById('viewProductModal'));
    const wasProductModalOpen = productDetailsModal && productDetailsModal._isShown;
    
    if (wasProductModalOpen) {
        productDetailsModal.hide();
    }
    
    isModalOpen = true;
    
    // Hide navigation for single image
    const navButtons = modal.querySelectorAll('.modal-nav-btn');
    navButtons.forEach(btn => btn.style.display = 'none');
    
    // Show modal first with loading state
    modal.style.display = 'flex';
    modalCaption.textContent = 'Loading...';
    modalImg.style.opacity = '0.3';
    
    // Preload image before showing
    const tempImg = new Image();
    
    tempImg.onload = function() {
        console.log('Image loaded successfully');
        modalImg.src = imageSrc;
        modalCaption.textContent = caption;
        modalImg.style.opacity = '1';
        modalCounter.style.display = 'none';
        
        setTimeout(() => {
            modal.classList.add('active');
            document.body.style.overflow = 'hidden';
        }, 0);
    };
    
    tempImg.onerror = function() {
        console.error('Failed to load image:', imageSrc);
        modalCaption.textContent = 'Failed to load image';
        modalImg.style.opacity = '0.3';
        
        // Still show the modal with error message
        setTimeout(() => {
            modal.classList.add('active');
            document.body.style.overflow = 'hidden';
        }, 0);
        
        // Auto-close after 2 seconds on error
        setTimeout(() => {
            closeImageModal({});
        }, 2000);
    };
    
    // Store state for reopening product modal
    modal.dataset.reopenProductModal = wasProductModalOpen ? 'true' : 'false';
    
    // Start loading the image
    tempImg.src = imageSrc;
}

function closeImageModal(event) {
    if (!modal) return;
    
    if (event && event.target !== modal && event.target.closest('.modal-close-btn') === null && event.target !== event.currentTarget) {
        return;
    }
    
    if (!isModalOpen) return;
    
    modal.classList.remove('active');
    setTimeout(() => {
        modal.style.display = 'none';
        modalImg.src = '';
        modalImg.style.opacity = '1'; // Reset opacity
        document.body.style.overflow = '';
        isModalOpen = false;
        
        // Reset gallery
        currentGallery = [];
        currentGalleryIndex = 0;
        
        // Reopen product modal if it was open before
        if (modal.dataset.reopenProductModal === 'true') {
            const productDetailsModal = bootstrap.Modal.getInstance(document.getElementById('viewProductModal'));
            if (productDetailsModal) {
                productDetailsModal.show();
            }
            modal.dataset.reopenProductModal = '';
        }
    }, 200);
}

// Close on escape key and arrow key navigation
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape' && isModalOpen) {
        closeImageModal(e);
    } else if (e.key === 'ArrowLeft' && isModalOpen && currentGallery.length > 1) {
        navigateGallery(-1, e);
    } else if (e.key === 'ArrowRight' && isModalOpen && currentGallery.length > 1) {
        navigateGallery(1, e);
    }
}, { passive: true });

// Client-Side Pagination and Search
let allRows = [];
let filteredRows = [];
let currentPage = 1;
const rowsPerPage = 12;

function initializeClientPagination() {
    const table = document.querySelector('.table tbody');
    if (!table) return;
    
    allRows = Array.from(table.getElementsByTagName('tr'));
    filteredRows = [...allRows];
    displayPage(1);
}

function performSearch() {
    const searchTerm = document.getElementById('productSearch').value.toLowerCase().trim();
    const dateFrom = document.getElementById('dateFrom').value;
    const dateTo = document.getElementById('dateTo').value;
    
    filteredRows = allRows.filter(row => {
        const productCode = row.cells[2]?.textContent.toLowerCase() || '';
        const productName = row.cells[3]?.textContent.toLowerCase() || '';
        const productCategory = row.getAttribute('data-category') || '';
        const productDate = row.getAttribute('data-created-date') || ''; // Get from data attribute

        const matchesSearch = !searchTerm ||
                            productCode.includes(searchTerm) ||
                            productName.includes(searchTerm) ||
                            productCategory.toLowerCase().includes(searchTerm);
        
        let matchesDateRange = true;
        if (dateFrom || dateTo) {
            if (productDate && productDate !== '') {
                const rowDate = new Date(productDate);
                if (dateFrom) {
                    const fromDate = new Date(dateFrom);
                    if (rowDate < fromDate) matchesDateRange = false;
                }
                if (dateTo) {
                    const toDate = new Date(dateTo);
                    toDate.setHours(23, 59, 59); // Include entire end date
                    if (rowDate > toDate) matchesDateRange = false;
                }
            } else {
                matchesDateRange = false;
            }
        }

        return matchesSearch && matchesDateRange;
    });
    
    currentPage = 1;
    displayPage(1);
}

function displayPage(page) {
    currentPage = page;
    const start = (page - 1) * rowsPerPage;
    const end = start + rowsPerPage;
    
    // Hide all rows first
    allRows.forEach(row => row.style.display = 'none');
    
    // Show only rows for current page
    filteredRows.slice(start, end).forEach(row => row.style.display = '');
    
    updatePaginationControls();
}

function updatePaginationControls() {
    const totalPages = Math.ceil(filteredRows.length / rowsPerPage);
    const paginationInfo = document.getElementById('paginationInfo');
    const paginationButtons = document.getElementById('paginationButtons');
    const paginationControls = document.getElementById('paginationControls');
    
    // Update info text
    const start = (currentPage - 1) * rowsPerPage + 1;
    const end = Math.min(currentPage * rowsPerPage, filteredRows.length);
    paginationInfo.textContent = `Showing ${start}-${end} of ${filteredRows.length} products`;
    
    // Show/hide pagination controls
    if (totalPages <= 1) {
        paginationControls.style.display = 'none';
        return;
    }
    paginationControls.style.display = 'flex';
    
    // Build pagination buttons
    let html = '';
    
    // Previous button
    html += `<li class="page-item ${currentPage === 1 ? 'disabled' : ''}">
        <a class="page-link" href="#" onclick="displayPage(${currentPage - 1}); return false;" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
        </a>
    </li>`;
    
    // Page numbers with ellipsis
    for (let i = 1; i <= totalPages; i++) {
        if (i === 1 || i === totalPages || (i >= currentPage - 2 && i <= currentPage + 2)) {
            html += `<li class="page-item ${i === currentPage ? 'active' : ''}">
                <a class="page-link" href="#" onclick="displayPage(${i}); return false;">${i}</a>
            </li>`;
        } else if (i === currentPage - 3 || i === currentPage + 3) {
            html += `<li class="page-item disabled"><span class="page-link">...</span></li>`;
        }
    }
    
    // Next button
    html += `<li class="page-item ${currentPage === totalPages ? 'disabled' : ''}">
        <a class="page-link" href="#" onclick="displayPage(${currentPage + 1}); return false;" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
        </a>
    </li>`;
    
    paginationButtons.innerHTML = html;
}

// Main DOM loaded event
document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM loaded, initializing event listeners...');
    
    // Initialize tooltips
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
    
    // Initialize client-side pagination
    initializeClientPagination();
    
    // Initialize search functionality
    const searchInput = document.getElementById('productSearch');
    const clearSearchBtn = document.getElementById('clearSearch');
    const dateFrom = document.getElementById('dateFrom');
    const dateTo = document.getElementById('dateTo');

    if (searchInput) {
        searchInput.addEventListener('input', performSearch);
    }

    if (clearSearchBtn) {
        clearSearchBtn.addEventListener('click', function() {
            searchInput.value = '';
            dateFrom.value = '';
            dateTo.value = '';
            performSearch();
            searchInput.focus();
        });
    }
    
    if (dateFrom) {
        dateFrom.addEventListener('change', performSearch);
    }
    
    if (dateTo) {
        dateTo.addEventListener('change', performSearch);
    }
    
    // Handle multiple image uploads - one by one
    function initImageUploader(container) {
        const addImageBtn = container.querySelector('.add-image-btn');
        if (addImageBtn) {
            addImageBtn.addEventListener('click', function() {
                const imageContainer = document.getElementById('imageUploadContainer');
                const newRow = document.createElement('div');
                newRow.className = 'image-upload-row mb-2';
                newRow.innerHTML = `
                    <div class="row g-2">
                        <div class="col-10">
                            <input type="file" class="form-control image-input" name="images" accept="image/*">
                        </div>
                        <div class="col-2">
                            <button type="button" class="btn btn-outline-danger remove-image-btn w-100" title="Remove">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    </div>
                `;
                imageContainer.appendChild(newRow);
                
                // Add remove handler
                newRow.querySelector('.remove-image-btn').addEventListener('click', function() {
                    newRow.remove();
                });
            });
        }
    }
    
    // Initialize image uploader for add product modal
    const imageUploadContainer = document.getElementById('imageUploadContainer');
    if (imageUploadContainer) {
        initImageUploader(imageUploadContainer.parentElement);
    }
    
    // View Product Details
    var viewProductButtons = document.querySelectorAll('.view-product-btn');
    var viewProductModal = new bootstrap.Modal(document.getElementById('viewProductModal'));
    var viewProductContent = document.getElementById('viewProductContent');

    viewProductButtons.forEach(function(button) {
        button.addEventListener('click', function() {
            var productId = this.getAttribute('data-product-id');
            
            // Show loading
            viewProductContent.innerHTML = `
                <div class="text-center py-4">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <p class="mt-2">Loading product details...</p>
                </div>
            `;
            
            viewProductModal.show();
            
            // Fetch product details
            fetch('/get_product_details/' + productId)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        displayProductDetails(data.product);
                    } else {
                        viewProductContent.innerHTML = `
                            <div class="alert alert-danger">
                                <i class="fas fa-exclamation-triangle me-2"></i>
                                Error loading product details.
                            </div>
                        `;
                    }
                })
                .catch(error => {
                    viewProductContent.innerHTML = `
                        <div class="alert alert-danger">
                            <i class="fas fa-exclamation-triangle me-2"></i>
                            Error loading product details.
                        </div>
                    `;
                });
        });
    });

    function displayProductDetails(product) {
        console.log('Product variants received:', product.variants);
        
        // Get first variant for wholesale info
        const mainVariant = product.variants && product.variants.length > 0 ? product.variants[0] : null;
        
        // Collect all images from variants
        const allImages = [];
        if (product.variants) {
            product.variants.forEach(v => {
                if (v.image_path) {
                    allImages.push({
                        path: v.image_path,
                        caption: `${product.product_name}`
                    });
                }
            });
        }
        
        let imagesHtml = '';
        if (allImages.length > 0) {
            imagesHtml = '<div class="row mb-3">';
            allImages.forEach((img, index) => {
                const imgSrc = img.path.startsWith('http') 
                    ? img.path.replace('/upload/', '/upload/w_400,q_auto,f_auto,c_limit/')
                    : `{{ url_for('static', filename='') }}${img.path}`;
                imagesHtml += `
                    <div class="col-md-3 mb-2">
                        <img src="${imgSrc}" 
                             class="img-thumbnail variant-image clickable-image"
                             loading="lazy"
                             alt="${img.caption}"
                             onclick="openImageModal('${img.path.startsWith('http') ? img.path.replace('/upload/', '/upload/w_1200,q_auto,f_auto,c_limit/') : '{{ url_for('static', filename='') }}' + img.path}', '${img.caption}')"
                             style="cursor: pointer; max-height: 150px; object-fit: cover;">
                    </div>
                `;
            });
            imagesHtml += '</div>';
        }

        viewProductContent.innerHTML = `
            <div class="product-details">
                <div class="row mb-4">
                    <div class="col-md-8">
                        <h4>${product.product_name}</h4>
                        <p class="text-muted mb-1">Lot: ${product.lot_details || 'N/A'}</p>
                        ${product.category ? `<p class="text-muted mb-1">Category: ${product.category}</p>` : ''}
                        ${product.description ? `<p class="mb-2">${product.description}</p>` : ''}
                    </div>
                    <div class="col-md-4 text-end">
                        <div class="stats-card p-3 bg-light rounded">
                            <h5 class="mb-3">Product Summary</h5>
                            <div class="row text-center">
                                <div class="col-6">
                                    <div class="text-primary fw-bold">${product.total_stock || 0}</div>
                                    <small>Total Stock</small>
                                </div>
                                <div class="col-6">
                                    <div class="text-success fw-bold">${product.total_sales || 0}</div>
                                    <small>Total Sales</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                ${imagesHtml ? '<h5 class="mb-3"><i class="fas fa-images me-2"></i>Product Images</h5>' + imagesHtml : ''}

                ${mainVariant ? `
                <h5 class="mb-3"><i class="fas fa-box me-2"></i>Product Details</h5>
                <div class="row">
                    <div class="col-md-6">
                        <div class="detail-card p-3 border rounded mb-3">
                            <h6 class="text-primary">Colors</h6>
                            <p class="mb-0">${(mainVariant.color || 'N/A').replace(/\s*\(Photo\s+\d+\)\s*/g, '').trim()}</p>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="detail-card p-3 border rounded mb-3">
                            <h6 class="text-primary">Sizes</h6>
                            <p class="mb-0">${(mainVariant.size || 'N/A').replace(/\s*\(Photo\s+\d+\)\s*/g, '').trim()}</p>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="detail-card p-3 border rounded mb-3">
                            <h6 class="text-warning">Buying Price</h6>
                            <p class="mb-0 fw-bold">AED ${parseFloat(mainVariant.buying_price || 0).toFixed(2)}</p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="detail-card p-3 border rounded mb-3">
                            <h6 class="text-success">Selling Price</h6>
                            <p class="mb-0 fw-bold">AED ${parseFloat(mainVariant.selling_price || 0).toFixed(2)}</p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="detail-card p-3 border rounded mb-3">
                            <h6 class="text-info">Quantity</h6>
                            <p class="mb-0 fw-bold">${mainVariant.quantity || 0} pcs</p>
                        </div>
                    </div>
                </div>
                ` : '<div class="alert alert-info">No product details available.</div>'}
            </div>
        `;
    }

    // Delete Product Confirmation
    var deleteProductButtons = document.querySelectorAll('.delete-product-btn');
    var deleteConfirmModal = document.getElementById('deleteConfirmModal');
    var deleteForm = document.getElementById('deleteForm');
    var deleteMessage = document.getElementById('deleteMessage');

    deleteProductButtons.forEach(function(button) {
        button.addEventListener('click', function() {
            var productId = this.getAttribute('data-product-id');
            var productName = this.getAttribute('data-product-name');
            
            deleteMessage.innerHTML = `Are you sure you want to delete the product <strong>"${productName}"</strong>? This will also delete all its variants.`;
            deleteForm.action = "{{ url_for('delete_product', product_id=0) }}".replace('0', productId);
            
            var modal = new bootstrap.Modal(deleteConfirmModal);
            modal.show();
        });
    });
    
    // Edit Product Handler
    var editProductButtons = document.querySelectorAll('.edit-product-btn');
    editProductButtons.forEach(function(button) {
        button.addEventListener('click', async function() {
            const productId = this.getAttribute('data-product-id');
            const editModal = new bootstrap.Modal(document.getElementById('editProductModal'));
            const editContent = document.getElementById('editProductContent');
            const editForm = document.getElementById('editProductForm');
            
            // Show loading state
            editContent.innerHTML = '<div class="text-center p-5"><i class="fas fa-spinner fa-spin fa-3x"></i></div>';
            editModal.show();
            
            try {
                const response = await fetch('/get_product_details/' + productId);
                const data = await response.json();
                
                if (data.success && data.product) {
                    const product = data.product;
                    editForm.action = '/edit_product/' + productId;
                    
                    // Get main variant data
                    const mainVariant = product.variants && product.variants.length > 0 ? product.variants[0] : {
                        color: '',
                        size: '',
                        quantity: 0,
                        buying_price: 0,
                        selling_price: 0,
                        id: ''
                    };
                    
                    // Collect all images
                    const allImages = [];
                    if (product.variants) {
                        product.variants.forEach(v => {
                            if (v.image_path) {
                                allImages.push(v.image_path);
                            }
                        });
                    }
                    
                    let imagesHtml = '';
                    if (allImages.length > 0) {
                        imagesHtml = '<div class="row">';
                        allImages.forEach(imgPath => {
                            const imgSrc = imgPath.startsWith('http') ? imgPath : '/static/' + imgPath;
                            imagesHtml += `
                                <div class="col-md-3 mb-2">
                                    <img src="${imgSrc}" class="img-thumbnail" style="max-height: 100px;">
                                </div>
                            `;
                        });
                        imagesHtml += '</div>';
                    }
                    
                    editContent.innerHTML = `
                        <h6 class="text-primary mb-3"><i class="fas fa-cube me-1"></i> Product Information</h6>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">📛 Product Name *</label>
                                    <input type="text" class="form-control" name="product_name" value="${product.product_name}" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">📦 Lot Details *</label>
                                    <input type="text" class="form-control" name="lot_details" value="${product.lot_details || ''}" required>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">📂 Category *</label>
                                    <input type="text" class="form-control" name="category" value="${product.category || ''}" required>
                                </div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">📝 Description</label>
                            <textarea class="form-control" name="description" rows="2">${product.description || ''}</textarea>
                        </div>

                        <hr class="my-4">
                        <h6 class="text-primary mb-3"><i class="fas fa-box me-1"></i> Product Details</h6>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">🎨 Colors *</label>
                                    <input type="text" class="form-control" name="colors_text" required 
                                           value="${mainVariant.color || ''}"
                                           placeholder='e.g., "RED,BLACK,WHITE" or "4 COLORS"'>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">📏 Sizes *</label>
                                    <input type="text" class="form-control" name="sizes_text" required 
                                           value="${mainVariant.size || ''}"
                                           placeholder='e.g., "S,M,L,XL" or "4 SIZES"'>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label class="form-label">📦 Total Quantity *</label>
                                    <input type="number" class="form-control" name="quantity" required min="0" 
                                           value="${mainVariant.quantity || 0}">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label class="form-label">💰 Buying Price (AED) *</label>
                                    <input type="number" class="form-control" name="buying_price" required min="0" step="0.01" 
                                           value="${mainVariant.buying_price || 0}">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label class="form-label">💵 Selling Price (AED) *</label>
                                    <input type="number" class="form-control" name="selling_price" required min="0" step="0.01" 
                                           value="${mainVariant.selling_price || 0}">
                                </div>
                            </div>
                        </div>

                        ${allImages.length > 0 ? `
                        <div class="mb-3">
                            <label class="form-label">🖼️ Current Images</label>
                            ${imagesHtml}
                        </div>
                        ` : ''}

                        <div class="mb-3">
                            <label class="form-label">🖼️ Add New Images</label>
                            <div id="editImageUploadContainer">
                                <div class="image-upload-row mb-2">
                                    <div class="row g-2">
                                        <div class="col-10">
                                            <input type="file" class="form-control image-input" name="images" accept="image/*">
                                        </div>
                                        <div class="col-2">
                                            <button type="button" class="btn btn-outline-success add-image-btn-edit w-100" title="Add Another Image">
                                                <i class="fas fa-plus"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <small class="text-muted">Add new images. Existing images will be kept.</small>
                        </div>
                        
                        <input type="hidden" name="variant_id" value="${mainVariant.id || ''}">
                    `;
                    
                    // Add image uploader functionality for edit modal
                    const editAddImageBtn = editContent.querySelector('.add-image-btn-edit');
                    if (editAddImageBtn) {
                        editAddImageBtn.addEventListener('click', function() {
                            const editImageContainer = document.getElementById('editImageUploadContainer');
                            const newRow = document.createElement('div');
                            newRow.className = 'image-upload-row mb-2';
                            newRow.innerHTML = `
                                <div class="row g-2">
                                    <div class="col-10">
                                        <input type="file" class="form-control image-input" name="images" accept="image/*">
                                    </div>
                                    <div class="col-2">
                                        <button type="button" class="btn btn-outline-danger remove-image-btn w-100" title="Remove">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>
                                </div>
                            `;
                            editImageContainer.appendChild(newRow);
                            
                            newRow.querySelector('.remove-image-btn').addEventListener('click', function() {
                                newRow.remove();
                            });
                        });
                    }
                    
                } else {
                    editContent.innerHTML = '<div class="alert alert-danger">Failed to load product details</div>';
                }
            } catch (error) {
                console.error('Error loading product:', error);
                editContent.innerHTML = '<div class="alert alert-danger">Error loading product details</div>';
            }
        });
    });
    
    // Bulk Delete Functionality
    const selectAllCheckbox = document.getElementById('selectAllProducts');
    const bulkDeleteBtn = document.getElementById('bulkDeleteBtn');
    
    // Helper to get visible checkboxes only (not hidden by filters)
    function getVisibleCheckboxes() {
        return document.querySelectorAll('tbody tr:not([style*="display: none"]) .product-checkbox');
    }
    
    // Select/Deselect all VISIBLE products on current page
    if (selectAllCheckbox) {
        selectAllCheckbox.addEventListener('change', function() {
            const visibleCheckboxes = getVisibleCheckboxes();
            visibleCheckboxes.forEach(checkbox => {
                checkbox.checked = this.checked;
            });
            updateBulkDeleteButton();
        });
    }
    
    // Update button visibility when individual checkboxes change
    document.addEventListener('change', function(e) {
        if (e.target.classList.contains('product-checkbox')) {
            updateBulkDeleteButton();
            // Update select all checkbox state based on visible products only
            const visibleCheckboxes = getVisibleCheckboxes();
            const allVisibleChecked = Array.from(visibleCheckboxes).every(cb => cb.checked);
            const anyVisibleChecked = Array.from(visibleCheckboxes).some(cb => cb.checked);
            if (selectAllCheckbox) {
                selectAllCheckbox.checked = allVisibleChecked && visibleCheckboxes.length > 0;
                selectAllCheckbox.indeterminate = anyVisibleChecked && !allVisibleChecked;
            }
        }
    });
    
    function updateBulkDeleteButton() {
        const checkedCount = document.querySelectorAll('.product-checkbox:checked').length;
        if (bulkDeleteBtn) {
            bulkDeleteBtn.style.display = checkedCount > 0 ? 'inline-block' : 'none';
            bulkDeleteBtn.innerHTML = `<i class="fas fa-trash me-1"></i> Delete Selected (${checkedCount})`;
        }
    }
    
    // Bulk delete button click
    if (bulkDeleteBtn) {
        bulkDeleteBtn.addEventListener('click', async function() {
            const checkedBoxes = document.querySelectorAll('.product-checkbox:checked');
            const productIds = Array.from(checkedBoxes).map(cb => cb.dataset.productId);
            
            if (productIds.length === 0) return;
            
            const confirmMsg = `Are you sure you want to delete ${productIds.length} product(s)? Products with sales records will be skipped.`;
            
            if (!confirm(confirmMsg)) return;
            
            try {
                const response = await fetch('/bulk_delete_products', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ product_ids: productIds })
                });
                
                const data = await response.json();
                
                if (data.success) {
                    showToast('success', data.message);
                    // Reload page after a short delay
                    setTimeout(() => location.reload(), 1500);
                } else {
                    showToast('danger', data.message || 'Error deleting products');
                }
            } catch (error) {
                console.error('Error:', error);
                showToast('danger', 'Error deleting products');
            }
        });
    }

    // Lot-wise inventory summary
    const lotSelector = document.getElementById('lotSelector');
    const lotSummaryBody = document.getElementById('lotSummaryBody');
    const refreshLotSummary = document.getElementById('refreshLotSummary');

    function fmt(num) {
        return Number(num || 0).toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 2 });
    }

    // Load unique lots into dropdown
    async function loadUniqueLots() {
        try {
            const res = await fetch('/api/get_unique_lots');
            const data = await res.json();
            if (data.success && data.lots) {
                lotSelector.innerHTML = '<option value="">Select a lot...</option>';
                data.lots.forEach(lot => {
                    const option = document.createElement('option');
                    option.value = lot.lot_details;
                    option.textContent = `${lot.lot_details} (${lot.product_count} product${lot.product_count > 1 ? 's' : ''})`;
                    lotSelector.appendChild(option);
                });
            }
        } catch (err) {
            console.error('Failed to load lots:', err);
        }
    }

    async function renderLotSummary() {
        if (!lotSelector || !lotSummaryBody) return;
        const lotDetails = lotSelector.value;
        if (!lotDetails) {
            lotSummaryBody.innerHTML = '<div class="text-muted">Select a lot to view details.</div>';
            return;
        }

        lotSummaryBody.innerHTML = `
            <div class="text-center py-3">
                <div class="spinner-border text-primary" role="status"></div>
                <p class="mt-2 text-muted">Loading lot summary...</p>
            </div>
        `;

        try {
            const res = await fetch(`/lot_summary/${encodeURIComponent(lotDetails)}`);
            const data = await res.json();
            if (!data.success) throw new Error(data.message || 'Failed to load');

            const lotTotal = data.lot_total;
            const products = data.products || [];
            
            const totalRemaining = lotTotal.total_remaining_qty || 0;
            const totalSold = lotTotal.total_sold_qty || 0;
            const totalArrived = lotTotal.total_arrived || 0;

            const productRows = products.length ? products.map(p => `
                <tr>
                    <td><strong>${p.product_name}</strong></td>
                    <td>${p.category || '-'}</td>
                    <td>${p.colors || '-'}</td>
                    <td>${p.sizes || '-'}</td>
                    <td class="text-end">${fmt(p.total_arrived)}</td>
                    <td class="text-end">${fmt(p.sold_qty)}</td>
                    <td class="text-end">${fmt(p.remaining_qty)}</td>
                    <td class="text-end">AED ${Number(p.sales_value || 0).toFixed(2)}</td>
                </tr>
            `).join('') : '<tr><td colspan="8" class="text-center text-muted">No products found in this lot</td></tr>';

            lotSummaryBody.innerHTML = `
                <div class="mb-3">
                    <h5 class="text-primary">📦 Lot: ${lotTotal.lot_details}</h5>
                    <p class="text-muted mb-0">${lotTotal.total_products} product${lotTotal.total_products > 1 ? 's' : ''} in this lot</p>
                </div>

                <div class="row g-3 mb-4">
                    <div class="col-md-3">
                        <div class="p-3 rounded border h-100 bg-light">
                            <div class="text-dark small fw-semibold">Total Arrived</div>
                            <div class="h4 mb-0 text-dark">${fmt(totalArrived)}</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="p-3 rounded border h-100" style="background-color: #6366f1;">
                            <div class="text-white small fw-semibold opacity-90">Total Sold</div>
                            <div class="h4 mb-0 text-white fw-bold">${fmt(totalSold)}</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="p-3 rounded border h-100" style="background-color: #10b981;">
                            <div class="text-white small fw-semibold opacity-90">Remaining</div>
                            <div class="h4 mb-0 text-white fw-bold">${fmt(totalRemaining)}</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="p-3 rounded border h-100" style="background-color: #3b82f6;">
                            <div class="text-white small fw-semibold opacity-90">Total Sales Value</div>
                            <div class="h4 mb-0 text-white fw-bold">AED ${Number(lotTotal.total_sales_value || 0).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</div>
                            <div class="small text-white opacity-75">Last sale: ${lotTotal.last_sale_date || 'N/A'}</div>
                        </div>
                    </div>
                </div>

                <h6 class="mb-3">📋 Product-wise Breakdown</h6>
                <div class="table-responsive">
                    <table class="table table-sm table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Product Name</th>
                                <th>Category</th>
                                <th>Colors</th>
                                <th>Sizes</th>
                                <th class="text-end">Total Arrived</th>
                                <th class="text-end">Sold</th>
                                <th class="text-end">Remaining</th>
                                <th class="text-end">Sales Value</th>
                            </tr>
                        </thead>
                        <tbody>
                            ${productRows}
                        </tbody>
                    </table>
                </div>
            `;
        } catch (err) {
            console.error(err);
            lotSummaryBody.innerHTML = `<div class="alert alert-danger mb-0">${err.message || 'Failed to load lot summary'}</div>`;
        }
    }

    if (lotSelector && lotSummaryBody) {
        // Load unique lots on page load
        loadUniqueLots();
        
        lotSelector.addEventListener('change', renderLotSummary);
        if (refreshLotSummary) {
            refreshLotSummary.addEventListener('click', function(e) {
                e.preventDefault();
                loadUniqueLots().then(() => renderLotSummary());
            });
        }
    }
});
</script>

<style>
/* ULTRA-OPTIMIZED MOBILE-FIRST MODAL - INSTANT PERFORMANCE */

/* Product image styles - Single main image */
.product-images-preview {
    position: relative;
    display: inline-block;
}

.main-product-image {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid #e2e8f0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.main-product-image:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.color-count-badge {
    position: absolute;
    bottom: -5px;
    right: -5px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.4);
    cursor: help;
}

.color-count-badge i {
    font-size: 0.65rem;
    margin-right: 2px;
}

/* Variant image in modal - optimized */
.variant-image {
    width: 100%;
    height: auto;
    max-height: 250px;
    object-fit: cover;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.clickable-image {
    cursor: pointer;
}

.clickable-image:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Smooth fade-in animation for color cards */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeInUp 0.4s ease-out both;
}

/* Color badge in modal */
.color-badge-large {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    vertical-align: middle;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .main-product-image {
        width: 60px;
        height: 60px;
    }
    
    .color-count-badge {
        font-size: 0.65rem;
        padding: 2px 6px;
    }
    
    .variant-image {
        max-height: 200px;
    }
    
    .color-variant-card {
        margin-bottom: 1rem !important;
    }
}
.image-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.image-modal.active {
    background: rgba(0, 0, 0, 0.95);
}

.modal-image-wrapper {
    position: relative;
    max-width: 90%;
    max-height: 90vh;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.image-modal.active .modal-image-wrapper {
    opacity: 1;
    transform: scale(1);
}

.modal-img {
    max-width: 100%;
    max-height: 85vh;
    width: auto;
    height: auto;
    display: block;
    border-radius: 8px;
    object-fit: contain;
    transition: opacity 0.3s ease;
    background: rgba(255, 255, 255, 0.1);
    min-height: 200px;
}

.modal-caption {
    color: white;
    text-align: center;
    padding: 15px;
    font-size: 1rem;
    font-weight: 500;
    min-height: 50px;
}

.modal-close-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s ease;
}

.modal-close-btn:active {
    transform: scale(0.95);
}

.modal-close-btn i {
    font-size: 1.3rem;
    color: #000;
}

/* Gallery Navigation Buttons */
.modal-nav-btn {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10000;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s ease, background 0.15s ease;
}

.modal-nav-btn:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-50%) scale(1.1);
}

.modal-nav-btn:active {
    transform: translateY(-50%) scale(0.95);
}

.modal-nav-left {
    left: 20px;
}

.modal-nav-right {
    right: 20px;
}

.modal-nav-btn i {
    font-size: 1.5rem;
    color: #000;
}

/* Gallery Counter */
.modal-counter {
    position: absolute;
    bottom: -45px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    background: rgba(0, 0, 0, 0.7);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    display: none;
}

@media (max-width: 768px) {
    .modal-img {
        max-height: 80vh;
        min-height: 150px;
    }
    
    .modal-close-btn {
        top: 15px;
        right: 15px;
        width: 40px;
        height: 40px;
    }
    
    .modal-nav-btn {
        width: 40px;
        height: 40px;
    }
    
    .modal-nav-left {
        left: 10px;
    }
    
    .modal-nav-right {
        right: 10px;
    }
    
    .modal-nav-btn i {
        font-size: 1.2rem;
    }
    
    .modal-counter {
        font-size: 0.8rem;
        padding: 4px 12px;
    }
}
</style>
{% endblock %}