{% extends "base.html" %}
{% load static %}
{% load i18n %}

{% block content %}
<div class="container-fluid mt-3">
    <div class="row">
        <div class="col-12">
            <!-- En-tête -->
            <div class="mb-4">
                <h3>
                    <i class="bi bi-box-arrow-right"></i> 
                    {% translate "Traiter le bon de préparation" %} {{ preparation_order.order_number }}
                </h3>
                <p class="text-muted">
                    {% translate "Sélectionnez les emplacements et les quantités à sortir du stock" %}
                </p>
            </div>

            <form method="post" id="process-form">
                {% csrf_token %}

                {% if has_modified_items %}
                <div class="alert alert-warning shadow-sm mb-3" role="alert">
                    <h6 class="alert-heading mb-1"><i class="bi bi-exclamation-triangle-fill me-1"></i> {% translate "Attention : des quantités ont été modifiées" %}</h6>
                    <p class="mb-0 small">{% translate "Un ou plusieurs articles déjà préparés ont vu leur quantité modifiée. Veuillez vérifier les articles signalés ci-dessous." %}</p>
                </div>
                {% endif %}

                <!-- Liste des produits à traiter -->
                <div class="card mb-3 shadow-sm">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0 text-white">
                            <i class="bi bi-list-check"></i> {% translate "Produits à sortir" %}
                        </h5>
                    </div>
                    <div class="card-body">
                        {% for item_data in items_with_locations %}
                        <div class="card mb-3 {% if item_data.item.is_prepared %}border-success{% else %}border{% endif %} {% if item_data.item.quantity_modified %}border-warning{% endif %} product-card" 
                             id="card_{{ item_data.item.id }}" 
                             data-prepared="{% if item_data.item.is_prepared %}true{% else %}false{% endif %}"
                             {% if item_data.item.is_prepared %}style="border-width: 2px;"{% endif %}
                             {% if item_data.item.quantity_modified %}style="border-width: 3px; border-color: #ffc107 !important;"{% endif %}>
                            <div class="card-header {% if item_data.item.quantity_modified %}bg-warning text-dark{% else %}bg-light{% endif %}">
                                <div class="row align-items-center">
                                    <div class="col-md-6">
                                        <h6 class="mb-0">
                                            {% if item_data.item.quantity_modified %}
                                            <i class="bi bi-exclamation-triangle-fill text-danger me-1"></i>
                                            {% endif %}
                                            <strong>{{ item_data.item.product.name }}</strong>
                                            <span class="text-muted">({{ item_data.item.product.code }})</span>
                                        </h6>
                                        {% if item_data.item.quantity_modified %}
                                        <small class="text-danger fw-bold">
                                            <i class="bi bi-arrow-repeat me-1"></i>
                                            {% translate "Quantité modifiée" %} : {{ item_data.item.previous_quantity }} &rarr; {{ item_data.item.quantity }} {{ item_data.item.product.unit }}
                                        </small>
                                        {% endif %}
                                    </div>
                                    <div class="col-md-6 text-end">
                                        {% if item_data.item.quantity > 0 %}
                                        <span class="badge bg-primary">
                                            <i class="bi bi-box"></i> {% translate "Demandé" %}: {{ item_data.item.quantity }} {{ item_data.item.product.unit }}
                                        </span>
                                        {% else %}
                                        <span class="badge bg-secondary">
                                            <i class="bi bi-plus-circle"></i> {% translate "Ajouté" %}
                                        </span>
                                        {% endif %}
                                        <span class="badge bg-info" title="{% translate 'Quantité réservée' %}">
                                            <i class="bi bi-bookmark"></i> {% translate "Réservé" %}: {{ item_data.reserved }}
                                        </span>
                                        <span class="badge bg-dark" title="{% translate 'Quantité en commande' %}">
                                            <i class="bi bi-cart"></i> {% translate "En commande" %}: {{ item_data.pending_orders }}
                                        </span>
                                        <span class="badge {% if item_data.available >= item_data.item.quantity %}bg-success{% else %}bg-warning text-dark{% endif %} stock-badge"
                                              style="cursor: pointer;"
                                              onclick="openStockAdjustment({{ item_data.item.product.id }}, '{{ item_data.item.product.name|escapejs }}', '{{ item_data.item.product.code|escapejs }}', {{ item_data.item.id }})"
                                              title="{% translate 'Cliquer pour ajuster le stock' %}"
                                              data-product-id="{{ item_data.item.product.id }}"
                                              data-product-name="{{ item_data.item.product.name }}"
                                              data-product-code="{{ item_data.item.product.code }}">
                                            <i class="bi bi-box-seam"></i> {% translate "Disponible" %}: <span id="stock_display_{{ item_data.item.id }}">{{ item_data.available }}</span>
                                        </span>

                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                {% if item_data.stocks %}
                                {% with first_stock=item_data.stocks.0 %}
                                <input type="hidden" name="location_{{ item_data.item.id }}" id="location_{{ item_data.item.id }}" value="{{ first_stock.location.id }}">
                                <input type="hidden" name="quantity_{{ item_data.item.id }}" id="quantity_{{ item_data.item.id }}" value="{{ item_data.item.quantity }}">
                                <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                                    <div class="text-muted">
                                        <span class="me-4">
                                            <i class="bi bi-geo-alt"></i>
                                            <strong>{{ first_stock.location.warehouse.name }} &ndash; {{ first_stock.location.name }}</strong>
                                        </span>
                                        <span>
                                            <i class="bi bi-123"></i>
                                            {% translate "Quantité à sortir" %}: <strong>{{ item_data.item.quantity }} {{ item_data.item.product.unit }}</strong>
                                        </span>
                                    </div>
                                    <div class="d-flex gap-2 align-items-center">
                                        {% if item_data.production_order %}
                                            <a href="{% url 'stock:production_order_detail' item_data.production_order.pk %}"
                                               class="btn btn-sm {% if item_data.production_order.status == 'draft' %}btn-secondary{% elif item_data.production_order.status == 'to_process' %}btn-warning{% elif item_data.production_order.status == 'in_production' %}btn-info{% elif item_data.production_order.status == 'completed' %}btn-success{% elif item_data.production_order.status == 'cancelled' %}btn-danger{% else %}btn-outline-primary{% endif %}"
                                               title="{{ item_data.production_order.get_status_display }}">
                                                <i class="bi bi-tools"></i> {{ item_data.production_order.code }}
                                            </a>
                                        {% endif %}
                                        <button type="button"
                                                class="btn {% if item_data.item.is_prepared %}btn-outline-success{% else %}btn-outline-secondary{% endif %} prepare-btn"
                                                onclick="togglePrepared({{ item_data.item.id }})"
                                                id="prepare_btn_{{ item_data.item.id }}">
                                            {% if item_data.item.is_prepared %}
                                            <i class="bi bi-check-square-fill"></i>
                                            {% else %}
                                            <i class="bi bi-square"></i>
                                            {% endif %}
                                            {% translate "Préparé" %}
                                        </button>
                                    </div>
                                </div>
                                {% endwith %}
                                {% else %}
                                {% if item_data.fallback_locations %}
                                {# Aucun stock existant mais des emplacements sont disponibles #}
                                <input type="hidden" name="quantity_{{ item_data.item.id }}" id="quantity_{{ item_data.item.id }}" value="{{ item_data.item.quantity }}">
                                <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                                    <div class="text-muted">
                                        <span class="me-4">
                                            <i class="bi bi-geo-alt"></i>
                                            <select name="location_{{ item_data.item.id }}" id="location_{{ item_data.item.id }}" class="form-select form-select-sm d-inline-block" style="width:auto;">
                                                {% for loc in item_data.fallback_locations %}
                                                <option value="{{ loc.id }}">{{ loc.warehouse.name }} &ndash; {{ loc.name }}</option>
                                                {% endfor %}
                                            </select>
                                        </span>
                                        <span>
                                            <i class="bi bi-123"></i>
                                            {% translate "Quantité à sortir" %}: <strong>{{ item_data.item.quantity }} {{ item_data.item.product.unit }}</strong>
                                        </span>
                                    </div>
                                    <div class="d-flex gap-2 align-items-center">
                                        {% if item_data.production_order %}
                                            <a href="{% url 'stock:production_order_detail' item_data.production_order.pk %}"
                                               class="btn btn-sm {% if item_data.production_order.status == 'draft' %}btn-secondary{% elif item_data.production_order.status == 'to_process' %}btn-warning{% elif item_data.production_order.status == 'in_production' %}btn-info{% elif item_data.production_order.status == 'completed' %}btn-success{% elif item_data.production_order.status == 'cancelled' %}btn-danger{% else %}btn-outline-primary{% endif %}"
                                               title="{{ item_data.production_order.get_status_display }}">
                                                <i class="bi bi-tools"></i> {{ item_data.production_order.code }}
                                            </a>
                                        {% endif %}
                                        <button type="button"
                                                class="btn {% if item_data.item.is_prepared %}btn-outline-success{% else %}btn-outline-secondary{% endif %} prepare-btn"
                                                onclick="togglePrepared({{ item_data.item.id }})"
                                                id="prepare_btn_{{ item_data.item.id }}">
                                            {% if item_data.item.is_prepared %}
                                            <i class="bi bi-check-square-fill"></i>
                                            {% else %}
                                            <i class="bi bi-square"></i>
                                            {% endif %}
                                            {% translate "Préparé" %}
                                        </button>
                                    </div>
                                </div>
                                <div class="alert alert-warning mt-2 mb-0 py-1 small">
                                    <i class="bi bi-exclamation-triangle me-1"></i>
                                    {% translate "Aucun stock enregistré pour ce produit. Le stock passera en négatif après la sortie." %}
                                </div>
                                {% else %}
                                <div class="alert alert-warning mb-0">
                                    <i class="bi bi-exclamation-triangle"></i> 
                                    {% translate "Aucun stock disponible et aucun emplacement accessible pour ce produit" %}
                                </div>
                                {% endif %}
                                {% endif %}
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>

                <!-- Autres produits demandés -->
                {% if other_items %}
                <div class="card mb-3 shadow-sm">
                    <div class="card-header bg-warning text-dark">
                        <h5 class="mb-0">
                            <i class="bi bi-pencil-square"></i> {% translate "Autres produits demandés" %}
                            <span class="badge bg-dark ms-2">{{ other_items|length }}</span>
                        </h5>
                    </div>
                    <div class="card-body">
                        {% for oi_data in other_items %}
                        <div class="card mb-2 {% if oi_data.item.is_prepared %}border-success{% else %}border{% endif %} other-product-card"
                             id="other_card_{{ oi_data.item.id }}"
                             data-prepared="{% if oi_data.item.is_prepared %}true{% else %}false{% endif %}"
                             {% if oi_data.item.is_prepared %}style="border-width: 2px;"{% endif %}>
                            <div class="card-header bg-light py-2">
                                <div class="row align-items-center">
                                    <div class="col-md-6">
                                        <h6 class="mb-0">
                                            <strong>{{ oi_data.item.description }}</strong>
                                        </h6>
                                    </div>
                                    <div class="col-md-6 text-end">
                                        <span class="badge bg-warning text-dark">
                                            <i class="bi bi-box"></i> {{ oi_data.item.quantity }}
                                        </span>
                                        {% if oi_data.item.category %}
                                            <span class="badge bg-secondary">{{ oi_data.item.category.name_fr }}</span>
                                        {% endif %}
                                        {% if oi_data.item.sign_panel_type %}
                                            <span class="badge bg-info">{{ oi_data.item.sign_panel_type.code }}</span>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                            <div class="card-body py-2">
                                <div class="d-flex align-items-center justify-content-end gap-2">
                                    {% if oi_data.production_order %}
                                        <a href="{% url 'stock:production_order_detail' oi_data.production_order.pk %}"
                                           class="btn btn-sm {% if oi_data.production_order.status == 'draft' %}btn-secondary{% elif oi_data.production_order.status == 'to_process' %}btn-warning{% elif oi_data.production_order.status == 'in_production' %}btn-info{% elif oi_data.production_order.status == 'completed' %}btn-success{% elif oi_data.production_order.status == 'cancelled' %}btn-danger{% else %}btn-outline-primary{% endif %}"
                                           title="{{ oi_data.production_order.get_status_display }}">
                                            <i class="bi bi-tools"></i> {{ oi_data.production_order.code }}
                                        </a>
                                    {% endif %}
                                    <button type="button"
                                            class="btn {% if oi_data.item.is_prepared %}btn-outline-success{% else %}btn-outline-secondary{% endif %} prepare-btn"
                                            onclick="toggleOtherPrepared({{ oi_data.item.id }})"
                                            id="other_prepare_btn_{{ oi_data.item.id }}">
                                        {% if oi_data.item.is_prepared %}
                                        <i class="bi bi-check-square-fill"></i>
                                        {% else %}
                                        <i class="bi bi-square"></i>
                                        {% endif %}
                                        {% translate "Préparé" %}
                                    </button>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}

                <!-- Actions -->
                <div class="card shadow-sm mt-4">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <a href="{% url 'stock:preparation_order_detail' preparation_order.pk %}" class="btn btn-secondary">
                                <i class="bi bi-arrow-left"></i> {% translate "Retour" %}
                            </a>
                            <div>
                                <button type="submit" name="mark_as_processed" class="btn btn-success"
                                        onclick="return confirm('{% translate "Confirmer la sortie des produits et marquer le bon comme traité ?" %}');">
                                    <i class="bi bi-check-circle"></i> {% translate "Marquer comme traité" %}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal d'ajustement de stock -->
<div class="modal fade" id="stockAdjustmentModal" tabindex="-1" aria-labelledby="stockAdjustmentModalLabel" aria-hidden="true"
     data-allowed-locations='[{% for location in allowed_locations %}{"id": {{ location.id }}, "warehouse": "{{ location.warehouse.name|escapejs }}", "name": "{{ location.name|escapejs }}"}{% if not forloop.last %},{% endif %}{% endfor %}]'>
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="stockAdjustmentModalLabel">
                    <i class="bi bi-tools"></i> {% translate "Ajuster le stock" %}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="stock-adjustment-form">
                    {% csrf_token %}
                    <input type="hidden" id="adjustment_product_id" name="product_id">
                    
                    <div class="mb-3">
                        <label class="form-label fw-bold">{% translate "Produit" %}</label>
                        <p id="adjustment_product_name" class="form-control-plaintext"></p>
                    </div>
                    
                    <div class="mb-3">
                        <label for="adjustment_location" class="form-label">{% translate "Emplacement" %}</label>
                        <select id="adjustment_location" name="location_id" class="form-select" required>
                            <option value="">{% translate "Sélectionner..." %}</option>
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label for="adjustment_quantity" class="form-label">{% translate "Nouvelle quantité" %}</label>
                        <input type="number" id="adjustment_quantity" name="quantity" class="form-control" min="0" required>
                        <div class="form-text">
                            {% translate "Quantité actuelle" %}: <span id="current_quantity" class="fw-bold">0</span>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="adjustment_reason" class="form-label">{% translate "Raison" %}</label>
                        <textarea id="adjustment_reason" name="reason" class="form-control" rows="2">{% translate "Correction manuelle" %}</textarea>
                    </div>
                    
                    <div id="adjustment_error" class="alert alert-danger d-none"></div>
                    <div id="adjustment_success" class="alert alert-success d-none"></div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    {% translate "Annuler" %}
                </button>
                <button type="button" class="btn btn-primary" id="save-adjustment">
                    <i class="bi bi-check-circle"></i> {% translate "Enregistrer" %}
                </button>
            </div>
        </div>
    </div>
</div>

<script>
// Fonction pour marquer un "autre produit" comme préparé (AJAX)
function toggleOtherPrepared(itemId) {
    const card = document.getElementById('other_card_' + itemId);
    const btn = document.getElementById('other_prepare_btn_' + itemId);

    const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
    fetch(`/stock/preparation-order-other-items/${itemId}/toggle-prepared/`, {
        method: 'POST',
        headers: {
            'X-CSRFToken': csrfToken,
            'X-Requested-With': 'XMLHttpRequest',
        }
    })
    .then(r => r.json())
    .then(data => {
        if (!data.success) { console.error('Erreur toggle prepared:', data.error); return; }
        const prepared = data.is_prepared;
        card.setAttribute('data-prepared', prepared ? 'true' : 'false');
        if (prepared) {
            card.classList.remove('border');
            card.classList.add('border-success');
            card.style.borderWidth = '2px';
            btn.innerHTML = '<i class="bi bi-check-square-fill"></i> {% translate "Préparé" %}';
            btn.classList.remove('btn-outline-secondary');
            btn.classList.add('btn-outline-success');
        } else {
            card.classList.remove('border-success');
            card.classList.add('border');
            card.style.borderWidth = '';
            btn.innerHTML = '<i class="bi bi-square"></i> {% translate "Préparé" %}';
            btn.classList.remove('btn-outline-success');
            btn.classList.add('btn-outline-secondary');
        }
    })
    .catch(err => console.error('Erreur réseau:', err));
}


// Fonction pour marquer un produit comme préparé (AJAX)
function togglePrepared(itemId) {
    const card = document.getElementById('card_' + itemId);
    const btn = document.getElementById('prepare_btn_' + itemId);

    const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
    fetch(`/stock/preparation-order-items/${itemId}/toggle-prepared/`, {
        method: 'POST',
        headers: {
            'X-CSRFToken': csrfToken,
            'X-Requested-With': 'XMLHttpRequest',
        }
    })
    .then(r => r.json())
    .then(data => {
        if (!data.success) { console.error('Erreur toggle prepared:', data.error); return; }
        const prepared = data.is_prepared;
        card.setAttribute('data-prepared', prepared ? 'true' : 'false');
        if (prepared) {
            card.classList.remove('border');
            card.classList.add('border-success');
            card.style.borderWidth = '2px';
            btn.innerHTML = '<i class="bi bi-check-square-fill"></i> {% translate "Préparé" %}';
            btn.classList.remove('btn-outline-secondary');
            btn.classList.add('btn-outline-success');
        } else {
            card.classList.remove('border-success');
            card.classList.add('border');
            card.style.borderWidth = '';
            btn.innerHTML = '<i class="bi bi-square"></i> {% translate "Préparé" %}';
            btn.classList.remove('btn-outline-success');
            btn.classList.add('btn-outline-secondary');
        }
    })
    .catch(err => console.error('Erreur réseau:', err));
}



// Variables pour le modal d'ajustement de stock
let currentAdjustmentItemId = null;
const PRODUCT_LOCATIONS_API_BASE = '{% url "stock:product_locations_api" 0 %}'.replace('/0/', '/{id}/');

// Fonction pour ouvrir le modal d'ajustement de stock
function openStockAdjustment(productId, productName, productCode, itemId) {
    event.stopPropagation();
    
    currentAdjustmentItemId = itemId;
    
    // Remplir les infos produit
    document.getElementById('adjustment_product_id').value = productId;
    document.getElementById('adjustment_product_name').textContent = `${productName} (${productCode})`;
    
    // Récupérer le modal et l'emplacement courant
    const modalElement = document.getElementById('stockAdjustmentModal');
    const locationInput = document.getElementById('location_' + itemId);
    const currentLocationId = locationInput ? locationInput.value : null;

    const adjustmentLocationSelect = document.getElementById('adjustment_location');
    adjustmentLocationSelect.innerHTML = '<option value="">{% translate "Chargement..." %}</option>';

    // Charger les emplacements dynamiquement depuis l'API filtrée
    const url = PRODUCT_LOCATIONS_API_BASE.replace('{id}', productId);
    fetch(url)
        .then(r => r.json())
        .then(data => {
            const locations = data.locations || [];
            adjustmentLocationSelect.innerHTML = '<option value="">{% translate "Sélectionner..." %}</option>';

            locations.forEach(loc => {
                const option = document.createElement('option');
                option.value = loc.id;
                option.setAttribute('data-quantity', loc.quantity);
                option.textContent = `${loc.warehouse_name} - ${loc.name}`;
                if (String(loc.id) === String(currentLocationId)) {
                    option.selected = true;
                }
                adjustmentLocationSelect.appendChild(option);
            });
            updateCurrentQuantity();
        })
        .catch(err => {
            console.error('Erreur de chargement des emplacements:', err);
            adjustmentLocationSelect.innerHTML = '<option value="">{% translate "Erreur de chargement" %}</option>';
        });
    
    // Reset les messages
    document.getElementById('adjustment_error').classList.add('d-none');
    document.getElementById('adjustment_success').classList.add('d-none');
    
    // Ouvrir le modal avec l'API Bootstrap
    const modal = bootstrap.Modal.getOrCreateInstance(modalElement);
    modal.show();
}

// Mettre à jour la quantité actuelle affichée
function updateCurrentQuantity() {
    const locationSelect = document.getElementById('adjustment_location');
    const selectedOption = locationSelect.options[locationSelect.selectedIndex];
    const currentQuantitySpan = document.getElementById('current_quantity');
    
    if (selectedOption && selectedOption.value) {
        const quantity = selectedOption.getAttribute('data-quantity') || 0;
        currentQuantitySpan.textContent = quantity;
        document.getElementById('adjustment_quantity').value = quantity;
    } else {
        currentQuantitySpan.textContent = '0';
        document.getElementById('adjustment_quantity').value = '0';
    }
}

// Event listener pour le changement d'emplacement
document.getElementById('adjustment_location').addEventListener('change', updateCurrentQuantity);

// Sauvegarder l'ajustement
document.getElementById('save-adjustment').addEventListener('click', function() {
    const form = document.getElementById('stock-adjustment-form');
    const formData = new FormData(form);
    
    // Cacher les messages précédents
    document.getElementById('adjustment_error').classList.add('d-none');
    document.getElementById('adjustment_success').classList.add('d-none');
    
    fetch("{% url 'stock:quick_stock_adjustment' %}", {
        method: 'POST',
        body: formData,
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Afficher le message de succès
            const successDiv = document.getElementById('adjustment_success');
            successDiv.textContent = data.message;
            successDiv.classList.remove('d-none');
            
            // Mettre à jour l'affichage du stock dans le badge
            if (currentAdjustmentItemId) {
                const stockDisplay = document.getElementById('stock_display_' + currentAdjustmentItemId);
                if (stockDisplay) {
                    stockDisplay.textContent = data.new_quantity;
                }
            }
            
            // Fermer le modal après 1.5 secondes
            setTimeout(() => {
                const modalElement = document.getElementById('stockAdjustmentModal');
                const modal = bootstrap.Modal.getInstance(modalElement);
                if (modal) {
                    modal.hide();
                }
            }, 1500);
        } else {
            // Afficher l'erreur
            const errorDiv = document.getElementById('adjustment_error');
            errorDiv.textContent = data.error || '{% translate "Une erreur est survenue" %}';
            errorDiv.classList.remove('d-none');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        const errorDiv = document.getElementById('adjustment_error');
        errorDiv.textContent = '{% translate "Erreur de connexion" %}';
        errorDiv.classList.remove('d-none');
    });
});
</script>

<style>
.product-card[data-prepared="true"],
.other-product-card[data-prepared="true"] {
    border-color: #198754 !important;
    border-width: 2px !important;
}

.prepare-btn {
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

.prepare-btn:hover {
    opacity: 0.85;
}

.stock-badge {
    transition: all 0.2s;
}

.stock-badge:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

</style>
{% endblock content %}