{# templates/admin/catalog/index.html.twig #}
{% extends 'baseadmin.html.twig' %}

{% set placeofpurchase = {
    "ingame": "In-Game Only",
    "webstore": "Web Store Only",
    "both": "In-Game & Web Store"
} %}

{% set frequency = {
    "onetime": "One-Time",
    "monthly": "Monthly",
} %}

{% block title %}
    {{ parent() }} - Catalog
{% endblock %}

{% block styles %}
    {{ parent() }}
    <style>
        .product-item {
            cursor: grab;
            padding: 10px;
            border-radius: 4px;
        }
        
        .product-item:active {
            cursor: grabbing;
        }
        
        .product-item.disabled {
            opacity: 0.6;
        }

        .game-card-title {
          display: flex;
          flex-direction: column;
        }
        
        .category-container {
            min-height: 50px;
            padding: 10px;
        }
        
        .dropzone-active {
            background-color: rgba(0, 123, 255, 0.1);
        }
        
        .bulk-actions {
            /* background-color: #f8f9fa; */
            padding: 10px;
            margin-bottom: 15px;
            border-radius: 4px;
            pointer-events: none;
            opacity: 0.5;
            transition: opacity 0.3s;
        }
        
        .selected {
            background-color: rgba(0, 123, 255, 0.1);
        }
        
        .checkbox-container {
            width: 30px;
        }

        /* Position indicator styles */
        .weight-indicator {
            display: inline-block;
            width: 24px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            /* background-color: #f0f0f0; */
            border: 1px solid #ccc;
            border-radius: 50%;
            font-size: 12px;
            margin-right: 10px;
        }
    </style>
{% endblock %}


{% block breadcrumb %}
  {{ parent() }}
  <li class="breadcrumb-item active" aria-current="page">Catalog</li>
{% endblock %}

{% block content %}
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">Store Catalog</h1>
    </div>

    <div id="flashBagDisplay">
    {% for label, messages in app.flashes %}
        {% for message in messages %}
            <div class="alert alert-{{ label }} alert-dismissible fade show">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endfor %}
    {% endfor %}
    </div>
    
    <!-- Bulk Actions Panel -->
    <div class="bulk-actions" id="bulk-actions-panel">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <span class="badge bg-primary" id="selected-count">0</span> items selected
            </div>
            <div>
                <div class="btn-group">
                    <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                        Change Category
                    </button>
                    <ul class="dropdown-menu category-dropdown">
                        {% for game in games %}
                            <li><h6 class="dropdown-header">{{ game.name }}</h6></li>
                            {% for category in game.categories %}
                                <li><a class="dropdown-item bulk-move-category" href="#" data-category-id="{{ category.id }}">{{ category.name }}</a></li>
                            {% endfor %}
                            {% if not loop.last %}
                                <li><hr class="dropdown-divider"></li>
                            {% endif %}
                        {% endfor %}
                    </ul>
                </div>
                
                <div class="btn-group mx-2">
                    <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                        Place of Purchase
                    </button>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item bulk-update-place" data-value="ingame" href="#">In-Game Only</a></li>
                        <li><a class="dropdown-item bulk-update-place" data-value="webstore" href="#">Web Store Only</a></li>
                        <li><a class="dropdown-item bulk-update-place" data-value="both" href="#">In-Game & Web Store</a></li>
                    </ul>
                </div>
                
                <div class="btn-group">
                    <button class="btn btn-sm btn-success bulk-enable">Enable</button>
                    <button class="btn btn-sm btn-warning bulk-disable">Disable</button>
                </div>
                
                <button class="btn btn-sm btn-danger ms-2 bulk-delete">Delete</button>
                <button class="btn btn-sm btn-secondary ms-2 bulk-cancel">Cancel</button>
            </div>
        </div>
    </div>
    
    <!-- Game List -->
    {% for game in games %}
        <div class="card mb-4">
            <div class="card-header d-flex justify-content-between">
                <div class="game-card-title d-flex flex-column">
                  <div>
                    <i class="fas fa-gamepad"></i> {{ game.name }}
                  </div>
                  <div>
                    <small class="text-muted">{{ game.description }}</small>
                  </div>
                </div>
                <div class="d-flex justify-content-end">
                    <div class="dropdown">
                        <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                            Create
                        </button>
                        <ul class="dropdown-menu">
                            <li>
                                <a class="dropdown-item" href="{{ path("admin.catalog.category.create", {"game": game.id}) }}">
                                    <i class="fas fa-layer-group"></i>
                                    Category
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="{{ path("admin.catalog.product.create", {"id": game.id}) }}">
                                    <i class="fas fa-cubes"></i>
                                    Product
                                </a>
                            </li>
                        </ul>
                    </div>
                    <button class="btn btn-primary ms-2 select-all-game" data-game-id="{{ game.id }}">Select All</button>
                </div>
            </div>
            
            <div class="list-group list-group-flush">
                {% for category in game.categories %}
                    <div class="list-group-item list-group-item-action bg-gradient text-white">
                        <div class="d-flex w-100 justify-content-between align-items-center">
                            <div class="d-flex flex-column justify-content-center me-3">
                                <i class="fas fa-layer-group"></i>
                            </div>
                            <div class="d-flex flex-column justify-content-center me-auto">
                                <small class="text-muted">Category</small>
                                <h5 class="mb-0">{{ category.name }}</h5>
                            </div>
                            <div>
                                <a href="{{ path('admin.catalog.category.edit', {'id': category.id}) }}" class="btn btn-sm btn-outline-secondary">
                                    <i class="fas fa-edit"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                    
                    <div class="category-container" data-category-id="{{ category.id }}">
                        {% set sortedProducts = category.products|sort((a, b) => a.weight <=> b.weight) %}
                        {% for product in sortedProducts %}
                            <div class="product-item {{ product.enabled ? '' : 'disabled' }}" 
                                 data-product-id="{{ product.id }}"
                                 data-product-name="{{ product.name }}"
                                 data-placeofpurchase="{{ product.placeofpurchase }}"
                                 data-weight="{{ product.weight }}"
                                 data-enabled="{{ product.enabled ? 'true' : 'false' }}">
                                <div class="d-flex w-100 justify-content-between align-items-center">
                                    <div class="checkbox-container">
                                        <input type="checkbox" class="product-checkbox" data-product-id="{{ product.id }}">
                                    </div>
                                    <div class="weight-indicator">{{ product.weight }}</div>
                                    <div class="d-flex flex-column justify-content-center mx-3">
                                        <i class="fas fa-cube"></i>
                                    </div>
                                    <div class="d-flex flex-column justify-content-center me-auto">
                                        <small class="text-muted">
                                            {{ (product.price / 100)|format_currency('USD') }}
                                        </small>
                                        <b>{{ product.name }}</b>
                                    </div>
                                    <div class="btn-group">
                                        <a href="{{ path('admin.catalog.product.edit', {'id': product.id}) }}" class="btn btn-sm btn-outline-secondary">
                                            <i class="fas fa-edit fa-fw"></i>
                                        </a>
                                        <button class="btn btn-sm btn-outline-secondary toggle-status" 
                                                data-product-id="{{ product.id }}" 
                                                data-current-status="{{ product.enabled ? 'true' : 'false' }}">
                                            <i class="fas fa-fw {{ product.enabled ? 'fa-times' : 'fa-check' }}"></i>
                                        </button>
                                        <button class="btn btn-sm btn-outline-secondary delete-product" 
                                                data-product-id="{{ product.id }}"
                                                data-product-name="{{ product.name }}">
                                            <i class="fas fa-fw fa-trash"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                {% endfor %}
            </div>
        </div>
    {% endfor %}

    <!-- Delete Product Modal -->
    <div class="modal fade" id="deleteProductModal" tabindex="-1" aria-labelledby="deleteProductModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteProductModalLabel">Confirm Deletion</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p class="text-danger">You are about to delete <strong id="productNameToDelete"></strong>.</p>
                    <p>This action cannot be undone. To confirm deletion, please type the product name below:</p>
                    <div class="d-flex align-items-center mb-3">
                        <span class="me-2" id="productName"></span>
                        <button class="btn btn-sm btn-outline-secondary" id="copyProductName">
                            <i class="fas fa-copy"></i>
                        </button>
                    </div>

                    <input type="text" class="form-control" id="confirmProductName" placeholder="Enter product name">
                    <input type="hidden" id="productIdToDelete">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger" id="confirmDeleteBtn" disabled>Delete</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Bulk Delete Modal -->
    <div class="modal fade" id="bulkDeleteModal" tabindex="-1" aria-labelledby="bulkDeleteModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="bulkDeleteModalLabel">Confirm Bulk Deletion</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p class="text-danger">You are about to delete <strong id="bulkDeleteCount"></strong> products.</p>
                    <p>This action cannot be undone. To confirm deletion, please type this confirmation code:</p>
                    <div class="d-flex align-items-center mb-3">
                        <span class="me-2" id="verificationCode"></span>
                        <button class="btn btn-sm btn-outline-secondary" id="copyVerificationCode">
                            <i class="fas fa-copy"></i>
                        </button>
                    </div>
                    <input type="text" class="form-control" id="confirmBulkDeleteCode" placeholder="Enter verification code">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger" id="confirmBulkDeleteBtn" disabled>Delete All</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block scripts %}
    {{ parent() }}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            setupDragAndDrop();
            setupBulkActions();
            setupDeleteFunctions();
            
            function setupDragAndDrop() {
                // Initialize Sortable on each category container
                document.querySelectorAll('.category-container').forEach(container => {
                    new Sortable(container, {
                        group: 'products',
                        animation: 150,
                        ghostClass: 'dropzone-active',
                        onEnd: function(evt) {
                            const categoryId = evt.to.dataset.categoryId;
                            
                            // Update weights for all products in the category
                            updateWeights(categoryId);
                            
                            if (evt.from !== evt.to) {
                                const productId = evt.item.dataset.productId;
                                
                                // Call API to update product category
                                updateProductCategory(productId, categoryId);
                            }
                        }
                    });
                });
            }
            
            function updateWeights(categoryId) {
                const container = document.querySelector(`.category-container[data-category-id="${categoryId}"]`);
                const products = container.querySelectorAll('.product-item');
                const weightUpdates = [];
                
                // Update weight indicators and data attributes
                // products.forEach((product, index) => {
                //     const productId = product.dataset.productId;
                //     const oldWeight = parseInt(product.dataset.weight);
                    
                //     // Update weight data attribute
                //     product.dataset.weight = index;
                    
                //     // Update visual weight indicator
                //     const weightIndicator = product.querySelector('.weight-indicator');
                //     weightIndicator.textContent = index;
                    
                //     // Add to updates if weight changed
                //     if (oldWeight !== index) {
                //         weightUpdates.push([parseInt(productId), index]);
                //     }
                // });

                // Instead of the above, we want to send every products new weight to ensure consistency, since multiple products can change position during a drag-and-drop action
                products.forEach((product, index) => {
                    const productId = product.dataset.productId;
                    
                    // Update weight data attribute
                    product.dataset.weight = index;
                    
                    // Update visual weight indicator
                    const weightIndicator = product.querySelector('.weight-indicator');
                    weightIndicator.textContent = index;
                    
                    // Add to updates
                    weightUpdates.push([parseInt(productId), index]);
                })
                
                // If we have updates, send them to the server
                if (weightUpdates.length > 0) {
                    updateProductWeights(weightUpdates, categoryId);
                }
            }
            
            function updateProductWeights(weightUpdates, categoryId) {
                fetch('{{ path("admin_action.catalog.product.update_weights") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        weights: weightUpdates,
                        categoryId: categoryId
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showFlashMessage('success', data.message || 'Product weights updated successfully');
                    } else {
                        showFlashMessage('danger', data.message || 'Error updating product weights');
                    }
                })
                .catch(error => {
                    showFlashMessage('danger', 'Error updating product weights: ' + error);
                });
            }
            
            function updateProductCategory(productId, categoryId) {
                fetch('{{ path("admin_action.catalog.product.update_category") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        productId: productId,
                        categoryId: categoryId
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showFlashMessage('success', data.message);
                    } else {
                        showFlashMessage('danger', data.message);
                    }
                })
                .catch(error => {
                    showFlashMessage('danger', 'Error moving product: ' + error);
                });
            }
            
            function setupBulkActions() {
                // Setup product selection
                document.addEventListener('change', function(e) {
                    if (e.target.classList.contains('product-checkbox')) {
                        const productElement = e.target.closest('.product-item');
                        
                        if (e.target.checked) {
                            productElement.classList.add('selected');
                        } else {
                            productElement.classList.remove('selected');
                        }
                        
                        updateBulkActionPanel();
                    }
                });
                
                // Select all products in a game
                document.querySelectorAll('.select-all-game').forEach(btn => {
                    btn.addEventListener('click', function() {
                        const gameId = this.dataset.gameId;
                        const gameCard = this.closest('.card');
                        const checkboxes = gameCard.querySelectorAll('.product-checkbox');
                        
                        // Check if all are selected
                        const allSelected = Array.from(checkboxes).every(cb => cb.checked);
                        
                        // Toggle all checkboxes
                        checkboxes.forEach(cb => {
                            cb.checked = !allSelected;
                            const productItem = cb.closest('.product-item');
                            if (!allSelected) {
                                productItem.classList.add('selected');
                            } else {
                                productItem.classList.remove('selected');
                            }
                        });
                        
                        updateBulkActionPanel();
                    });
                });
                
                // Cancel bulk selection
                document.querySelector('.bulk-cancel').addEventListener('click', function() {
                    document.querySelectorAll('.product-checkbox').forEach(cb => {
                        cb.checked = false;
                        cb.closest('.product-item').classList.remove('selected');
                    });
                    
                    updateBulkActionPanel();
                });
                
                // Update place of purchase in bulk
                document.querySelectorAll('.bulk-update-place').forEach(link => {
                    link.addEventListener('click', function(e) {
                        e.preventDefault();
                        const placeValue = this.dataset.value;
                        const selectedProducts = getSelectedProductIds();
                        
                        // Update place of purchase
                        updatePlaceOfPurchase(selectedProducts, placeValue);
                    });
                });
                
                // Enable products in bulk
                document.querySelector('.bulk-enable').addEventListener('click', function() {
                    const selectedProducts = getSelectedProductIds();
                    updateProductStatus(selectedProducts, true);
                });
                
                // Disable products in bulk
                document.querySelector('.bulk-disable').addEventListener('click', function() {
                    const selectedProducts = getSelectedProductIds();
                    updateProductStatus(selectedProducts, false);
                });
                
                // Toggle individual product status
                document.addEventListener('click', function(e) {
                    if (e.target.closest('.toggle-status')) {
                        const btn = e.target.closest('.toggle-status');
                        const productId = btn.dataset.productId;
                        const currentStatus = btn.dataset.currentStatus === 'true';
                        
                        updateProductStatus([productId], !currentStatus);
                    }
                });
                
                // Bulk move to category
                document.querySelectorAll('.bulk-move-category').forEach(link => {
                    link.addEventListener('click', function(e) {
                        e.preventDefault();
                        const categoryId = this.dataset.categoryId;
                        const selectedProducts = getSelectedProductIds();
                        
                        bulkMoveToCategory(selectedProducts, categoryId);
                    });
                });
            }
            
            function updateBulkActionPanel() {
                const selectedCount = document.querySelectorAll('.product-checkbox:checked').length;
                document.getElementById('selected-count').textContent = selectedCount;
                
                const bulkPanel = document.getElementById('bulk-actions-panel');
                if (selectedCount > 0) {
                    bulkPanel.style.opacity = '1';
                    bulkPanel.style.pointerEvents = 'auto';
                } else {
                    bulkPanel.style.opacity = '0.5';
                    bulkPanel.style.pointerEvents = 'none';
                }
            }
            
            function getSelectedProductIds() {
                const selected = [];
                document.querySelectorAll('.product-checkbox:checked').forEach(cb => {
                    selected.push(cb.dataset.productId);
                });
                return selected;
            }
            
            function updatePlaceOfPurchase(productIds, placeValue) {
                if (productIds.length === 0) return;
                
                fetch('{{ path("admin_action.catalog.product.update_place") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        productIds: productIds,
                        placeOfPurchase: placeValue
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showFlashMessage('success', data.message);
                        // Optional: refresh the page to see changes
                        // location.reload();
                    } else {
                        showFlashMessage('danger', data.message);
                    }
                })
                .catch(error => {
                    showFlashMessage('danger', 'Error updating place of purchase: ' + error);
                });
            }
            
            function updateProductStatus(productIds, enabled) {
                if (productIds.length === 0) return;
                
                fetch('{{ path("admin_action.catalog.product.update_status") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        productIds: productIds,
                        enabled: enabled
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showFlashMessage('success', data.message);
                        
                        // Update UI to reflect changes
                        productIds.forEach(id => {
                            const productItem = document.querySelector(`.product-item[data-product-id="${id}"]`);
                            if (productItem) {
                                if (enabled) {
                                    productItem.classList.remove('disabled');
                                } else {
                                    productItem.classList.add('disabled');
                                }
                                
                                const toggleBtn = productItem.querySelector('.toggle-status');
                                toggleBtn.dataset.currentStatus = enabled ? 'true' : 'false';
                                toggleBtn.className = `btn btn-sm btn-outline-secondary toggle-status`;
                                toggleBtn.querySelector('i').className = `fas fa-fw ${enabled ? 'fa-times' : 'fa-check'}`;
                            }
                        });
                    } else {
                        showFlashMessage('danger', data.message);
                    }
                })
                .catch(error => {
                    showFlashMessage('danger', `Error ${enabled ? 'enabling' : 'disabling'} products: ` + error);
                });
            }
            
            function bulkMoveToCategory(productIds, categoryId) {
                if (productIds.length === 0) return;
                
                fetch('{{ path("admin_action.catalog.product.bulk_move") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        productIds: productIds,
                        categoryId: categoryId
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showFlashMessage('success', data.message);
                        // Update the UI to reflect the changes or reload the page
                        location.reload();
                    } else {
                        showFlashMessage('error', data.message);
                    }
                })
                .catch(error => {
                    showFlashMessage('error', data.message);
                });
            }
            
            function setupDeleteFunctions() {
                // Individual product delete
                document.addEventListener('click', function(e) {
                    if (e.target.closest('.delete-product')) {
                        const btn = e.target.closest('.delete-product');
                        const productId = btn.dataset.productId;
                        const productName = btn.dataset.productName;
                        
                        // Set up delete modal
                        document.getElementById('productNameToDelete').textContent = productName;
                        document.getElementById('productIdToDelete').value = productId;
                        document.getElementById('confirmProductName').value = '';
                        document.getElementById('confirmDeleteBtn').disabled = true;
                        document.getElementById('productName').textContent = productName;

                        // Show modal
                        const deleteModal = new bootstrap.Modal(document.getElementById('deleteProductModal'));
                        deleteModal.show();
                    }
                });
                
                // Validate product name input
                document.getElementById('confirmProductName').addEventListener('input', function() {
                    const productName = document.getElementById('productNameToDelete').textContent;
                    document.getElementById('confirmDeleteBtn').disabled = this.value !== productName;
                });
                
                // Handle delete confirmation
                document.getElementById('confirmDeleteBtn').addEventListener('click', function() {
                    const productId = document.getElementById('productIdToDelete').value;
                    deleteProduct(productId);
                });
                
                // Bulk delete
                document.querySelector('.bulk-delete').addEventListener('click', function() {
                    const selectedProducts = getSelectedProductIds();
                    if (selectedProducts.length === 0) return;
                    
                    // Generate random 16 character string for verification
                    const verificationCode = generateRandomString(16);
                    
                    // Set up bulk delete modal
                    document.getElementById('bulkDeleteCount').textContent = selectedProducts.length;
                    document.getElementById('verificationCode').textContent = verificationCode;
                    document.getElementById('confirmBulkDeleteCode').value = '';
                    document.getElementById('confirmBulkDeleteBtn').disabled = true;
                    
                    // Show modal
                    const bulkDeleteModal = new bootstrap.Modal(document.getElementById('bulkDeleteModal'));
                    bulkDeleteModal.show();
                });
                
                // Copy verification code to clipboard
                document.getElementById('copyVerificationCode').addEventListener('click', function() {
                    const code = document.getElementById('verificationCode').textContent;
                    navigator.clipboard.writeText(code).then(() => {
                        this.innerHTML = '<i class="fas fa-check"></i>';
                        setTimeout(() => {
                            this.innerHTML = '<i class="fas fa-copy"></i>';
                        }, 1500);
                    });
                });

                // Copy product name to clipboard
                document.getElementById('copyProductName').addEventListener('click', function() {
                    const name = document.getElementById('productNameToDelete').textContent;
                    navigator.clipboard.writeText(name).then(() => {
                        this.innerHTML = '<i class="fas fa-check"></i>';
                        setTimeout(() => {
                            this.innerHTML = '<i class="fas fa-copy"></i>';
                        }, 1500);
                    });
                });
                
                // Validate bulk delete code
                document.getElementById('confirmBulkDeleteCode').addEventListener('input', function() {
                    const code = document.getElementById('verificationCode').textContent;
                    document.getElementById('confirmBulkDeleteBtn').disabled = this.value !== code;
                });
                
                // Handle bulk delete confirmation
                document.getElementById('confirmBulkDeleteBtn').addEventListener('click', function() {
                    const selectedProducts = getSelectedProductIds();
                    bulkDeleteProducts(selectedProducts);
                });
            }
            
            function deleteProduct(productId) {
                fetch(`{{ path("admin_action.catalog.product.delete") }}`, {
                    method: 'DELETE',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ productId })
                })
                .then(response => response.json())
                .then(data => {
                    // Close modal
                    const modal = bootstrap.Modal.getInstance(document.getElementById('deleteProductModal'));
                    modal.hide();
                    
                    if (data.success) {
                        // Remove product from UI
                        const productItem = document.querySelector(`.product-item[data-product-id="${productId}"]`);
                        if (productItem) {
                            const categoryId = productItem.closest('.category-container').dataset.categoryId;
                            productItem.remove();
                            
                            // Update weights for remaining products
                            updateWeights(categoryId);
                        }
                        showFlashMessage('success', data.message || 'Product successfully deleted');
                    } else {
                        showFlashMessage('danger', data.message || 'Error deleting product');
                    }
                })
                .catch(error => {
                    const modal = bootstrap.Modal.getInstance(document.getElementById('deleteProductModal'));
                    modal.hide();
                    showFlashMessage('danger', 'Error deleting product: ' + error);
                });
            }
            
            function bulkDeleteProducts(productIds) {
                if (productIds.length === 0) return;
                
                fetch('{{ path("admin_action.catalog.product.bulk_delete") }}', {
                    method: 'DELETE',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        productIds: productIds
                    })
                })
                .then(response => response.json())
                .then(data => {
                    // Close modal
                    const modal = bootstrap.Modal.getInstance(document.getElementById('bulkDeleteModal'));
                    modal.hide();
                    
                        if (data.success) {
                            // Track affected categories that will need weight updates
                            const affectedCategories = new Set();
                            
                            // Remove products from UI
                            productIds.forEach(id => {
                                const productItem = document.querySelector(`.product-item[data-product-id="${id}"]`);
                                if (productItem) {
                                    const categoryContainer = productItem.closest('.category-container');
                                    if (categoryContainer) {
                                        affectedCategories.add(categoryContainer.dataset.categoryId);
                                    }
                                    productItem.remove();
                                }
                            });
                            
                            // Update weights for each affected category
                            affectedCategories.forEach(categoryId => {
                                updateWeights(categoryId);
                            });
                            
                            // Reset bulk selection
                            document.querySelectorAll('.product-checkbox').forEach(cb => {
                                cb.checked = false;
                                cb.closest('.product-item').classList.remove('selected');
                            });
                            updateBulkActionPanel();
                            
                            showFlashMessage('success', data.message || `Successfully deleted ${productIds.length} products`);
                        } else {
                            showFlashMessage('danger', data.message || 'Error deleting products');
                        }
                    })
                    .catch(error => {
                        const modal = bootstrap.Modal.getInstance(document.getElementById('bulkDeleteModal'));
                        modal.hide();
                        showFlashMessage('danger', 'Error deleting products: ' + error);
                    });
            }
            
            function generateRandomString(length) {
                const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
                let result = '';
                for (let i = 0; i < length; i++) {
                    result += chars.charAt(Math.floor(Math.random() * chars.length));
                }
                return result;
            }
            
            function showFlashMessage(icon, text) {
              Toast.fire({ icon, text })
            }
        });
    </script>
{% endblock %}