Categories - SimpleRHost


<style>
    .sortable-list {
        list-style: none;
        padding: 0;
    }
    
    .sortable-item {
        border: 1px solid #e0e0e0;
        border-radius: 6px;
        margin-bottom: 8px;
        background-color: #fff;
        position: relative;
        cursor: move;
        transition: all 0.2s ease;
    }
    
    .sortable-item:hover {
        box-shadow: 0 3px 8px rgba(0,0,0,0.15);
        border-color: #ccc;
    }
    
    .sortable-item::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 5px;
        background-color: #e0e0e0;
        border-top-left-radius: 6px;
        border-bottom-left-radius: 6px;
        transition: background-color 0.2s;
    }
    
    .sortable-item:hover::before {
        background-color: #0d6efd;
    }
    
    .sortable-handle {
        display: inline-block;
        padding: 10px;
        color: #aaa;
        cursor: move;
    }
    
    .sortable-handle:hover {
        color: #0d6efd;
    }
    
    .sortable-content {
        display: flex;
        align-items: center;
        padding: 12px;
        width: 100%;
    }
    
    .ghost {
        opacity: 0.5;
        background: #f8f9fa;
    }
    
    .category-info {
        flex: 1;
    }
    
    .category-title {
        font-weight: 500;
        margin-bottom: 0;
        display: flex;
        align-items: center;
    }
    
    .category-title .icon {
        margin-right: 8px;
    }
    
    .category-type {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 0.75rem;
        font-weight: 500;
        margin-left: 8px;
    }
    
    .category-type.required {
        background-color: #e3f2fd;
        color: #0d6efd;
    }
    
    .category-type.additional {
        background-color: #e8f5e9;
        color: #28a745;
    }
    
    .category-status {
        margin-left: 15px;
        display: flex;
        align-items: center;
    }
    
    .sorting-info {
        background-color: #f8f9fa;
        padding: 12px;
        margin-bottom: 15px;
        border-radius: 6px;
        border-left: 4px solid #0d6efd;
    }
    
    .order-badge {
        display: inline-block;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background-color: #f0f0f0;
        border-radius: 50%;
        margin-right: 10px;
        font-weight: bold;
    }
    
    .drag-hint {
        display: none;
        position: absolute;
        right: 10px;
        top: 10px;
        background-color: rgba(13, 110, 253, 0.1);
        color: #0d6efd;
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 0.75rem;
        font-weight: 500;
    }
    
    .sortable-item:hover .drag-hint {
        display: block;
    }
</style>



<div class="row mb-4">
    <div class="col-md-8">
        <h1>Categories</h1>
        <p class="text-muted">Manage and order all system categories.</p>
    </div>
    <div class="col-md-4 text-end">
        <a href="/categories/additional/new/" class="btn btn-primary">
            <i class="bi bi-plus-circle"></i> New Additional Category
        </a>
    </div>
</div>

<div class="sorting-info">
    <h5><i class="bi bi-info-circle me-2"></i> Categories</h5>
    <p class="mb-0">
        <i class="bi bi-arrow-down-up me-1"></i>
        If unchecked, this category will not appear in tablet and fullscreen modes
        <strong>Categories</strong> (Categories) Drag to reorder
        Changes are saved automatically.
    </p>
    <div class="mt-2">
        <button id="normalizeOrderBtn" class="btn btn-sm btn-outline-primary">
            <i class="bi bi-sort-numeric-down"></i> Normalize Order
        </button>
        <small class="text-muted ms-2">Use this button if the order numbering is inconsistent</small>
    </div>
</div>

<div class="card mb-4">
    <div class="card-header bg-primary text-white">
        <h5 class="mb-0"><i class="bi bi-list-ul me-2"></i>Categories</h5>
    </div>
    
    <div class="card-body">
        <ul id="sortable-categories" class="sortable-list">
            
            <li class="sortable-item" data-id="1" data-type="post_type" data-order="1" data-is-subcategory="false">
                <div class="sortable-content">
                    <div class="sortable-handle">
                        <i class="bi bi-grip-vertical"></i>
                    </div>
                    <div class="order-badge">1</div>
                    <div class="category-info">
                        <h5 class="category-title">
                            
                            <i class="bi bi-info-circle icon"></i>
                            
                            House Manual
                            <span class="category-type required">Required</span>
                            <span class="category-type" style="background-color: #f0f0f0; color: #555;">Categories</span>
                            <div class="category-status">
                                
                                <span class="badge bg-success">Active</span>
                                
                            </div>
                        </h5>
                        <div class="category-details mt-1">
                            <span class="badge bg-light text-dark me-2">0 posts</span>
                            <span class="badge bg-light text-dark">
                                
                                
                                4 subcategorys
                                
                                
                            </span>
                            
                            <small class="text-muted d-block mt-1">Informações gerais sobre o imóvel</small>
                            
                        </div>
                    </div>
                    <div>
                        <a href="/categories/additional/new/?post_type=1" class="btn btn-sm btn-outline-primary" title="Add subcategory">
                            <i class="bi bi-plus-circle"></i> Subcategory
                        </a>
                        <form class="d-inline toggle-active-form" data-id="1" data-type="post_type">
                            <input type="hidden" name="csrfmiddlewaretoken" value="hyAPM9Dktf5r6OL648JkJSJPX2FpPo7Resw470pMjB96Y4Afs8kTB7LsHjaT8iu3">
                            <button type="button" class="btn btn-sm btn-outline-warning toggle-active-btn" title="Deactivate category">
                                <i class="bi bi-toggle-on"></i>
                            </button>
                        </form>
                    </div>
                    <div class="drag-hint">
                        <i class="bi bi-arrow-down-up"></i> Drag to reorder
                    </div>
                </div>
            </li>
            
            <li class="sortable-item" data-id="2" data-type="post_type" data-order="1" data-is-subcategory="false">
                <div class="sortable-content">
                    <div class="sortable-handle">
                        <i class="bi bi-grip-vertical"></i>
                    </div>
                    <div class="order-badge">1</div>
                    <div class="category-info">
                        <h5 class="category-title">
                            
                            <i class="star icon"></i>
                            
                            Recommendations
                            <span class="category-type required">Required</span>
                            <span class="category-type" style="background-color: #f0f0f0; color: #555;">Categories</span>
                            <div class="category-status">
                                
                                <span class="badge bg-success">Active</span>
                                
                            </div>
                        </h5>
                        <div class="category-details mt-1">
                            <span class="badge bg-light text-dark me-2">0 posts</span>
                            <span class="badge bg-light text-dark">
                                
                                
                                No subcategories
                                
                                
                            </span>
                            
                            <small class="text-muted d-block mt-1">Recomendações e dicas para os hóspedes</small>
                            
                        </div>
                    </div>
                    <div>
                        <a href="/categories/additional/new/?post_type=2" class="btn btn-sm btn-outline-primary" title="Add subcategory">
                            <i class="bi bi-plus-circle"></i> Subcategory
                        </a>
                        <form class="d-inline toggle-active-form" data-id="2" data-type="post_type">
                            <input type="hidden" name="csrfmiddlewaretoken" value="hyAPM9Dktf5r6OL648JkJSJPX2FpPo7Resw470pMjB96Y4Afs8kTB7LsHjaT8iu3">
                            <button type="button" class="btn btn-sm btn-outline-warning toggle-active-btn" title="Deactivate category">
                                <i class="bi bi-toggle-on"></i>
                            </button>
                        </form>
                    </div>
                    <div class="drag-hint">
                        <i class="bi bi-arrow-down-up"></i> Drag to reorder
                    </div>
                </div>
            </li>
            
            <li class="sortable-item" data-id="3" data-type="post_type" data-order="2" data-is-subcategory="false">
                <div class="sortable-content">
                    <div class="sortable-handle">
                        <i class="bi bi-grip-vertical"></i>
                    </div>
                    <div class="order-badge">2</div>
                    <div class="category-info">
                        <h5 class="category-title">
                            
                            <i class="bi bi-tools icon"></i>
                            
                            Guidelines
                            <span class="category-type required">Required</span>
                            <span class="category-type" style="background-color: #f0f0f0; color: #555;">Categories</span>
                            <div class="category-status">
                                
                                <span class="badge bg-success">Active</span>
                                
                            </div>
                        </h5>
                        <div class="category-details mt-1">
                            <span class="badge bg-light text-dark me-2">0 posts</span>
                            <span class="badge bg-light text-dark">
                                
                                
                                No subcategories
                                
                                
                            </span>
                            
                            <small class="text-muted d-block mt-1">Informações sobre utilidades disponíveis no imóvel</small>
                            
                        </div>
                    </div>
                    <div>
                        <a href="/categories/additional/new/?post_type=3" class="btn btn-sm btn-outline-primary" title="Add subcategory">
                            <i class="bi bi-plus-circle"></i> Subcategory
                        </a>
                        <form class="d-inline toggle-active-form" data-id="3" data-type="post_type">
                            <input type="hidden" name="csrfmiddlewaretoken" value="hyAPM9Dktf5r6OL648JkJSJPX2FpPo7Resw470pMjB96Y4Afs8kTB7LsHjaT8iu3">
                            <button type="button" class="btn btn-sm btn-outline-warning toggle-active-btn" title="Deactivate category">
                                <i class="bi bi-toggle-on"></i>
                            </button>
                        </form>
                    </div>
                    <div class="drag-hint">
                        <i class="bi bi-arrow-down-up"></i> Drag to reorder
                    </div>
                </div>
            </li>
            
            <li class="sortable-item" data-id="4" data-type="post_type" data-order="3" data-is-subcategory="false">
                <div class="sortable-content">
                    <div class="sortable-handle">
                        <i class="bi bi-grip-vertical"></i>
                    </div>
                    <div class="order-badge">3</div>
                    <div class="category-info">
                        <h5 class="category-title">
                            
                            <i class="utensils icon"></i>
                            
                            Extras
                            <span class="category-type required">Required</span>
                            <span class="category-type" style="background-color: #f0f0f0; color: #555;">Categories</span>
                            <div class="category-status">
                                
                                <span class="badge bg-success">Active</span>
                                
                            </div>
                        </h5>
                        <div class="category-details mt-1">
                            <span class="badge bg-light text-dark me-2">0 posts</span>
                            <span class="badge bg-light text-dark">
                                
                                
                                No subcategories
                                
                                
                            </span>
                            
                            <small class="text-muted d-block mt-1">Itens extras disponíveis para compra</small>
                            
                        </div>
                    </div>
                    <div>
                        <a href="/categories/additional/new/?post_type=4" class="btn btn-sm btn-outline-primary" title="Add subcategory">
                            <i class="bi bi-plus-circle"></i> Subcategory
                        </a>
                        <form class="d-inline toggle-active-form" data-id="4" data-type="post_type">
                            <input type="hidden" name="csrfmiddlewaretoken" value="hyAPM9Dktf5r6OL648JkJSJPX2FpPo7Resw470pMjB96Y4Afs8kTB7LsHjaT8iu3">
                            <button type="button" class="btn btn-sm btn-outline-warning toggle-active-btn" title="Deactivate category">
                                <i class="bi bi-toggle-on"></i>
                            </button>
                        </form>
                    </div>
                    <div class="drag-hint">
                        <i class="bi bi-arrow-down-up"></i> Drag to reorder
                    </div>
                </div>
            </li>
            
            
            
            
            
            
            
            
            
            
            
        </ul>
    </div>
</div>

<div class="card">
    <div class="card-header bg-light">
        <h5 class="mb-0"><i class="bi bi-diagram-3 me-2"></i>Categories</h5>
    </div>
    <div class="card-body">
        <div class="alert alert-info">
            <i class="bi bi-info-circle me-2"></i>
            Subcategories are displayed within their main categories and don't appear in the main listing.
            <strong>Required categories cannot be edited.</strong> - only main categories can have their order changed.
        </div>
        
        <div class="row">
            <!-- Subcategories for required categories -->
            <div class="col-md-6">
                <h6 class="border-bottom pb-2">Subcategories of Required Categories</h6>
                
                    
                    
                    <div class="mb-4">
                        <h6 class="fw-bold">
                            
                            <i class="bi bi-info-circle me-1"></i>
                            
                            House Manual
                        </h6>
                        <div class="table-responsive">
                            <table class="table table-sm table-hover">
                                <thead class="table-light">
                                    <tr>
                                        <th>Categories</th>
                                        <th class="text-center">Status</th>
                                        <th class="text-center">View</th>
                                        <th class="text-end">Start Conversation</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <i class="bi bi-arrow-return-right me-2 text-muted"></i>
                                                Instruções Gerais
                                                <span class="badge rounded-pill bg-secondary ms-2" style="font-size: 0.7rem;">Categories</span>
                                            </div>
                                        </td>
                                        <td class="text-center">
                                            
                                            <span class="badge bg-success">Active</span>
                                            
                                        </td>
                                        <td class="text-center">0</td>
                                        <td class="text-end">
                                            <a href="/categories/additional/1/" class="btn btn-sm btn-outline-secondary" title="View details">
                                                <i class="bi bi-eye"></i>
                                            </a>
                                            <a href="/categories/additional/1/edit/" class="btn btn-sm btn-outline-success" title="Edit">
                                                <i class="bi bi-pencil"></i>
                                            </a>
                                            <a href="/categories/additional/1/delete/" class="btn btn-sm btn-outline-danger" title="Delete">
                                                <i class="bi bi-trash"></i>
                                            </a>
                                            <form class="d-inline toggle-active-form" data-id="1" data-type="category">
                                                <input type="hidden" name="csrfmiddlewaretoken" value="hyAPM9Dktf5r6OL648JkJSJPX2FpPo7Resw470pMjB96Y4Afs8kTB7LsHjaT8iu3">
                                                <button type="button" class="btn btn-sm btn-outline-warning toggle-active-btn" title="Deactivate subcategory">
                                                    <i class="bi bi-toggle-on"></i>
                                                </button>
                                            </form>
                                        </td>
                                    </tr>
                                    
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <i class="bi bi-arrow-return-right me-2 text-muted"></i>
                                                Eletrodomésticos
                                                <span class="badge rounded-pill bg-secondary ms-2" style="font-size: 0.7rem;">Categories</span>
                                            </div>
                                        </td>
                                        <td class="text-center">
                                            
                                            <span class="badge bg-success">Active</span>
                                            
                                        </td>
                                        <td class="text-center">0</td>
                                        <td class="text-end">
                                            <a href="/categories/additional/2/" class="btn btn-sm btn-outline-secondary" title="View details">
                                                <i class="bi bi-eye"></i>
                                            </a>
                                            <a href="/categories/additional/2/edit/" class="btn btn-sm btn-outline-success" title="Edit">
                                                <i class="bi bi-pencil"></i>
                                            </a>
                                            <a href="/categories/additional/2/delete/" class="btn btn-sm btn-outline-danger" title="Delete">
                                                <i class="bi bi-trash"></i>
                                            </a>
                                            <form class="d-inline toggle-active-form" data-id="2" data-type="category">
                                                <input type="hidden" name="csrfmiddlewaretoken" value="hyAPM9Dktf5r6OL648JkJSJPX2FpPo7Resw470pMjB96Y4Afs8kTB7LsHjaT8iu3">
                                                <button type="button" class="btn btn-sm btn-outline-warning toggle-active-btn" title="Deactivate subcategory">
                                                    <i class="bi bi-toggle-on"></i>
                                                </button>
                                            </form>
                                        </td>
                                    </tr>
                                    
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <i class="bi bi-arrow-return-right me-2 text-muted"></i>
                                                Regras da Casa
                                                <span class="badge rounded-pill bg-secondary ms-2" style="font-size: 0.7rem;">Categories</span>
                                            </div>
                                        </td>
                                        <td class="text-center">
                                            
                                            <span class="badge bg-success">Active</span>
                                            
                                        </td>
                                        <td class="text-center">0</td>
                                        <td class="text-end">
                                            <a href="/categories/additional/3/" class="btn btn-sm btn-outline-secondary" title="View details">
                                                <i class="bi bi-eye"></i>
                                            </a>
                                            <a href="/categories/additional/3/edit/" class="btn btn-sm btn-outline-success" title="Edit">
                                                <i class="bi bi-pencil"></i>
                                            </a>
                                            <a href="/categories/additional/3/delete/" class="btn btn-sm btn-outline-danger" title="Delete">
                                                <i class="bi bi-trash"></i>
                                            </a>
                                            <form class="d-inline toggle-active-form" data-id="3" data-type="category">
                                                <input type="hidden" name="csrfmiddlewaretoken" value="hyAPM9Dktf5r6OL648JkJSJPX2FpPo7Resw470pMjB96Y4Afs8kTB7LsHjaT8iu3">
                                                <button type="button" class="btn btn-sm btn-outline-warning toggle-active-btn" title="Deactivate subcategory">
                                                    <i class="bi bi-toggle-on"></i>
                                                </button>
                                            </form>
                                        </td>
                                    </tr>
                                    
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <i class="bi bi-arrow-return-right me-2 text-muted"></i>
                                                Emergências
                                                <span class="badge rounded-pill bg-secondary ms-2" style="font-size: 0.7rem;">Categories</span>
                                            </div>
                                        </td>
                                        <td class="text-center">
                                            
                                            <span class="badge bg-success">Active</span>
                                            
                                        </td>
                                        <td class="text-center">0</td>
                                        <td class="text-end">
                                            <a href="/categories/additional/4/" class="btn btn-sm btn-outline-secondary" title="View details">
                                                <i class="bi bi-eye"></i>
                                            </a>
                                            <a href="/categories/additional/4/edit/" class="btn btn-sm btn-outline-success" title="Edit">
                                                <i class="bi bi-pencil"></i>
                                            </a>
                                            <a href="/categories/additional/4/delete/" class="btn btn-sm btn-outline-danger" title="Delete">
                                                <i class="bi bi-trash"></i>
                                            </a>
                                            <form class="d-inline toggle-active-form" data-id="4" data-type="category">
                                                <input type="hidden" name="csrfmiddlewaretoken" value="hyAPM9Dktf5r6OL648JkJSJPX2FpPo7Resw470pMjB96Y4Afs8kTB7LsHjaT8iu3">
                                                <button type="button" class="btn btn-sm btn-outline-warning toggle-active-btn" title="Deactivate subcategory">
                                                    <i class="bi bi-toggle-on"></i>
                                                </button>
                                            </form>
                                        </td>
                                    </tr>
                                    
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                    
                
                    
                    
                    
                
                    
                    
                    
                
                    
                    
                    
                
                
                
            </div>
            
            <!-- Subcategories for additional categories -->
            <div class="col-md-6">
                <h6 class="border-bottom pb-2">Additional Services</h6>
                
                    
                
                    
                
                    
                
                    
                
                
                
            </div>
        </div>
        
        
    </div>
</div>

<div class="card mt-4">
    <div class="card-header">
        <h5 class="mb-0">Duration</h5>
    </div>
    <div class="card-body">
        <h6>Subcategories of Required Categories</h6>
        <ul>
            <li><strong>House Manual</strong> - Calendar not available for this property.</li>
            <li><strong>Recommendations</strong> - No conversations found for this login.</li>
            <li><strong>Guidelines</strong> - Calendar not available for this property.</li>
            <li><strong>Extras</strong> - This product is not available for purchase.</li>
        </ul>
        <p class="alert alert-warning mb-3">
            <i class="bi bi-exclamation-triangle me-2"></i>
            These categories are fixed and cannot be renamed, edited, or deleted.
        </p>
        <h6>Categories</h6>
        <p>Ad plan created.</p>
        <ul>
            <li><strong>Parent Category (for subcategories)</strong> - Select another additional category as main category</li>
            <li><strong>Select another additional category as main category</strong> - Select another additional category as main category</li>
        </ul>
    </div>
    <div class="card-footer">
        <div class="d-grid">
            <a href="/properties/" class="btn btn-outline-primary">
                <i class="bi bi-house-door"></i> Back to store
            </a>
        </div>
    </div>
</div>



<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Set up Sortable.js for the categories list
        var sortableList = document.getElementById('sortable-categories');
        
        if (sortableList) {
            var sortable = new Sortable(sortableList, {
                animation: 150,
                ghostClass: 'ghost',
                handle: '.sortable-handle',
                onEnd: function(evt) {
                    updateCategoriesOrder();
                }
            });
        }
        
        // Initialize order badges to ensure they start from 1
        adjustOrderBadges();
        
        // Button to normalize order
        document.getElementById('normalizeOrderBtn').addEventListener('click', function() {
            // Show loading indicator
            const loadingToast = showToast('Normalizing categories order...', 'info');
            
            fetch('/categories/normalize-order/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': getCookie('csrftoken')
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Hide loading indicator and show success
                    hideToast(loadingToast);
                    showToast('Categories order normalized successfully!', 'success');
                    
                    // Reload the page to show the updated order
                    setTimeout(() => {
                        window.location.reload();
                    }, 1000);
                } else {
                    // Show error message
                    hideToast(loadingToast);
                    showToast('Error normalizing order: ' + data.message, 'error');
                }
            })
            .catch(error => {
                // Show error message
                hideToast(loadingToast);
                showToast('Error ' + error, 'error');
            });
        });
        
        // Function to adjust order badges to start from 1
        function adjustOrderBadges() {
            const items = document.querySelectorAll('#sortable-categories .sortable-item');
            
            // First check if any item already has order 0 (if not, we don't need to fix)
            let hasZeroOrder = false;
            items.forEach((item) => {
                const orderBadge = item.querySelector('.order-badge');
                if (orderBadge && parseInt(orderBadge.textContent) === 0) {
                    hasZeroOrder = true;
                }
            });
            
            // If we found an order 0, adjust all to start from 1
            if (hasZeroOrder) {
                items.forEach((item, index) => {
                    const orderBadge = item.querySelector('.order-badge');
                    if (orderBadge) {
                        orderBadge.textContent = index + 1;
                    }
                    item.dataset.order = index + 1;
                });
                
                // Update order on the server too
                updateCategoriesOrder();
            }
        }
        
        // Function to update categories order on the server
        function updateCategoriesOrder() {
            const items = document.querySelectorAll('#sortable-categories .sortable-item');
            const categoriesOrder = [];
            
            items.forEach((item, index) => {
                const categoryId = item.dataset.id;
                const categoryType = item.dataset.type;
                const isSubcategory = item.dataset.isSubcategory === 'true';
                
                if (categoryId && categoryType) {
                    // Ensure order starts from 1
                    const orderValue = index + 1;
                    
                    categoriesOrder.push({
                        id: categoryId,
                        type: categoryType,
                        order: orderValue,
                        is_subcategory: isSubcategory
                    });
                    
                    // Update the displayed order number
                    const orderBadge = item.querySelector('.order-badge');
                    if (orderBadge) {
                        orderBadge.textContent = orderValue;
                    }
                }
            });
            
            if (categoriesOrder.length > 0) {
                // Show loading indicator
                const loadingToast = showToast('Updating order...', 'info');
                
                // DEBUG: Show data to be sent
                console.log('Sending order data:', categoriesOrder);
                
                // Send the new order to the server via AJAX
                fetch('/categories/update-order/', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRFToken': getCookie('csrftoken')
                    },
                    body: JSON.stringify({
                        categories_order: categoriesOrder
                    })
                })
                .then(response => {
                    console.log('Response status:', response.status);
                    return response.json();
                })
                .then(data => {
                    console.log('Server response:', data);
                    if (data.success) {
                        // Hide loading indicator and show success
                        hideToast(loadingToast);
                        showToast('Categories order updated successfully!', 'success');
                        
                        // Don't reload page after normal ordering
                        // Just update visible order numbers
                        items.forEach((item, index) => {
                            const orderBadge = item.querySelector('.order-badge');
                            if (orderBadge) {
                                orderBadge.textContent = index + 1;
                            }
                        });
                    } else {
                        // Show error message
                        hideToast(loadingToast);
                        showToast('Error updating order: ' + data.message, 'error');
                    }
                })
                .catch(error => {
                    // Show error message
                    hideToast(loadingToast);
                    showToast('Opening chat... ' + error, 'error');
                });
            }
        }
        
        // Function to create and show a toast
        function showToast(message, type) {
            // Check if the toast container exists, if not, create it
            let toastContainer = document.querySelector('.toast-container');
            if (!toastContainer) {
                toastContainer = document.createElement('div');
                toastContainer.className = 'toast-container position-fixed bottom-0 end-0 p-3';
                document.body.appendChild(toastContainer);
            }
            
            // Create the toast
            const toastId = 'toast-' + Date.now();
            const toast = document.createElement('div');
            toast.className = `toast show bg-${type === 'error' ? 'danger' : type}`;
            toast.id = toastId;
            toast.setAttribute('role', 'alert');
            toast.setAttribute('aria-live', 'assertive');
            toast.setAttribute('aria-atomic', 'true');
            
            toast.innerHTML = `
                <div class="toast-header">
                    <strong class="me-auto">${type === 'error' ? 'Error' : (type === 'success' ? 'Success!' : 'Duration')}</strong>
                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close" onclick="document.getElementById('${toastId}').remove()"></button>
                </div>
                <div class="toast-body text-white">
                    ${message}
                </div>
            `;
            
            toastContainer.appendChild(toast);
            
            // Auto-remove toast after 5 seconds if not a loading toast
            if (type !== 'info') {
                setTimeout(() => {
                    hideToast(toastId);
                }, 5000);
            }
            
            return toastId;
        }
        
        // Function to hide a toast
        function hideToast(toastId) {
            const toast = document.getElementById(toastId);
            if (toast) {
                toast.remove();
            }
        }
        
        // Function to get the CSRF cookie
        function getCookie(name) {
            let cookieValue = null;
            if (document.cookie && document.cookie !== '') {
                const cookies = document.cookie.split(';');
                for (let i = 0; i < cookies.length; i++) {
                    const cookie = cookies[i].trim();
                    if (cookie.substring(0, name.length + 1) === (name + '=')) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        }

        // Event handler for activate/deactivate buttons
        document.querySelectorAll('.toggle-active-btn').forEach(button => {
            button.addEventListener('click', function() {
                const form = this.closest('.toggle-active-form');
                const id = form.dataset.id;
                const type = form.dataset.type;
                
                // URL for the AJAX request
                const url = type === 'post_type' 
                    ? `/categories/toggle-active/0/`.replace('0', id)
                    : `/categories/additional/toggle-active/0/`.replace('0', id);
                
                // Show loading indicator
                const loadingToast = showToast('Updating status...', 'info');
                
                // Make the AJAX request
                fetch(url, {
                    method: 'POST',
                    headers: {
                        'X-CSRFToken': getCookie('csrftoken'),
                        'Content-Type': 'application/json'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    hideToast(loadingToast);
                    
                    if (data.success) {
                        // Update the button
                        const newClass = data.is_active ? 'warning' : 'success';
                        const oldClass = data.is_active ? 'success' : 'warning';
                        const newIcon = data.is_active ? 'toggle-on' : 'toggle-off';
                        const newTitle = data.is_active ? 'Deactivate' : 'Activate';
                        
                        button.classList.remove(`btn-outline-${oldClass}`);
                        button.classList.add(`btn-outline-${newClass}`);
                        button.innerHTML = `<i class="bi bi-${newIcon}"></i> ${newTitle}`;
                    } else {
                        // Show error message
                        showToast('Error deleting listings: ' + data.message, 'error');
                    }
                })
                .catch(error => {
                    // Show error message
                    showToast('Error ' + error, 'error');
                });
            });
        });
    });
</script>