{% 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 du produit -->
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h3 class="h3 d-flex align-items-center">
                    <i class="bi bi-box-seam"></i>
                    <span class="mx-2">{{ product.code }}</span>
                    <span class="mx-2">-</span>
                    <span class="mx-2">{{ product.name }}</span>
                    {% if not product.is_active %}
                        <span class="badge bg-danger ms-2"><i class="bi bi-x-circle me-1"></i>{% translate "Inactif" %}</span>
                    {% endif %}
                </h3>
                <div class="d-flex gap-2">
                    {% if is_stock_manager %}
                    <a href="{% url 'stock:product_edit' product.pk %}" class="btn btn-outline-primary">
                        <i class="bi bi-pencil"></i> {% translate "Modifier" %}
                    </a>
                    {% if product.is_active %}
                    <button type="button" class="btn btn-outline-danger"
                            data-bs-toggle="modal" data-bs-target="#deleteProductModal">
                        <i class="bi bi-trash"></i> {% translate "Supprimer" %}
                    </button>
                    {% endif %}
                    {% endif %}
                    <a href="{% url 'stock:warehouses' %}?tab=products" class="btn btn-light">
                        <i class="bi bi-arrow-left"></i> {% translate "Retour" %}
                    </a>
                </div>
            </div>

            {% if is_stock_manager %}
            <!-- Modal suppression -->
            <div class="modal fade" id="deleteProductModal" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title text-danger">
                                <i class="bi bi-exclamation-triangle"></i>
                                {% translate "Confirmer la désactivation" %}
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                            {% blocktranslate with name=product.name %}
                            Êtes-vous sûr de vouloir rendre le produit <strong>{{ name }}</strong> inactif ?
                            Il ne sera plus visible pour les nouvelles opérations de stock ou d'intervention, mais restera accessible dans l'historique.
                            {% endblocktranslate %}
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                {% translate "Annuler" %}
                            </button>
                            <form method="post" action="{% url 'stock:product_delete' product.pk %}">
                                {% csrf_token %}
                                <button type="submit" class="btn btn-danger">
                                    <i class="bi bi-x-circle me-1"></i> {% translate "Rendre inactif" %}
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            {% endif %}
            <hr>
            
            <!-- Informations principales -->
            <div class="row g-3 mb-4">
                <div class="col-md-3">
                    <div class="card">
                        <div class="card-body">
                            <h6 class="card-subtitle mb-2 text-muted">{% translate "Code" %}</h6>
                            <p class="card-text fs-5">{{ product.code }}</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card">
                        <div class="card-body">
                            <h6 class="card-subtitle mb-2 text-muted">SKU</h6>
                            <p class="card-text fs-5">{{ product.sku|default:"-" }}</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card">
                        <div class="card-body">
                            <h6 class="card-subtitle mb-2 text-muted">{% translate "Catégorie" %}</h6>
                            <p class="card-text fs-5">{{ product.category.name_fr|default:"-" }}</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card border-info">
                        <div class="card-body">
                            <h6 class="card-subtitle mb-2 text-muted">{% translate "Unité" %}</h6>
                            <p class="card-text fs-5">
                                <span class="badge bg-info text-white fs-6">{{ product.get_unit_display }}</span>
                                <small class="text-muted ms-1">({{ product.unit }})</small>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card">
                        <div class="card-body">
                            <h6 class="card-subtitle mb-2 text-muted">{% translate "Prix unitaire" %}</h6>
                            <p class="card-text fs-5">
                                {% if product.price %}
                                    {{ product.price|floatformat:2 }} €
                                {% else %}
                                    -
                                {% endif %}
                            </p>
                        </div>
                    </div>
                </div>
                {% if product.qr_code %}
                <div class="col-md-3">
                    <div class="card">
                        <div class="card-body text-center">
                            <h6 class="card-subtitle mb-2 text-muted">{% translate "QR Code" %}</h6>
                            <img src="{{ product.qr_code.url }}" alt="QR Code {{ product.code }}"
                                 style="width:120px;height:120px;" class="img-fluid">
                        </div>
                    </div>
                </div>
                {% endif %}
            </div>

            <div class="row g-3 mb-4">
                <div class="col-md-4">
                    <div class="card {% if product.total_stock < product.threshold %}border-warning{% endif %}">
                        <div class="card-body">
                            <h6 class="card-subtitle mb-2 text-muted">{% translate "Stock total" %}</h6>
                            <p class="card-text fs-4 fw-bold">{{ product.total_stock }} <small class="text-muted fs-6">{{ product.unit }}</small></p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-body">
                            <h6 class="card-subtitle mb-2 text-muted">{% translate "Seuil d'alerte" %}</h6>
                            <p class="card-text fs-4">{{ product.threshold }} <small class="text-muted fs-6">{{ product.unit }}</small></p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-body">
                            <h6 class="card-subtitle mb-2 text-muted">{% translate "Statut" %}</h6>
                            <p class="card-text fs-5">
                                {% if product.total_stock < product.threshold %}
                                    <span class="badge bg-warning text-dark">
                                        <i class="bi bi-exclamation-triangle"></i> 
                                        {% translate "Sous seuil" %}
                                    </span>
                                {% else %}
                                    <span class="badge bg-success">
                                        <i class="bi bi-check-circle"></i> 
                                        {% translate "Stock suffisant" %}
                                    </span>
                                {% endif %}
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Description -->
            {% if product.description %}
            <div class="card mb-4">
                <div class="card-body">
                    <h5 class="card-title">{% translate "Description" %}</h5>
                    <p class="card-text">{{ product.description }}</p>
                </div>
            </div>
            {% endif %}

            <!-- Emplacements autorisés -->
            <div class="card mb-4">
                <div class="card-body">
                    <h5 class="card-title">
                        <i class="bi bi-geo-alt-fill text-primary"></i>
                        {% translate "Emplacements autorisés" %}
                    </h5>
                    {% if product.authorized_locations.exists %}
                        <div class="d-flex flex-wrap gap-2 mt-2">
                            {% for loc in product.authorized_locations.all %}
                                <span class="badge bg-secondary p-2 fs-6">
                                    <i class="bi bi-buildings me-1"></i>{{ loc.warehouse.name }} &ndash; <strong>{{ loc.name }}</strong>
                                </span>
                            {% endfor %}
                        </div>
                    {% else %}
                        <p class="text-muted mb-0">
                            {% translate "Ce produit est autorisé dans tous les emplacements." %}
                        </p>
                    {% endif %}
                </div>
            </div>

            <!-- Alertes actives -->
            {% if alerts %}
            <div class="card mb-4 border-warning">
                <div class="card-body">
                    <h5 class="card-title">
                        <i class="bi bi-exclamation-triangle text-warning"></i>
                        {% translate "Alertes de stock actives" %}
                    </h5>
                    <ul class="list-group list-group-flush">
                        {% for alert in alerts %}
                        <li class="list-group-item">
                            <strong>{{ alert.warehouse.name }}</strong>: 
                            {% translate "Stock actuel:" %} {{ alert.current_stock }}
                            {% translate "| Seuil:" %} {{ alert.threshold }}
                        </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
            {% endif %}

            {% if is_stock_manager %}
            <!-- Modal ajustement de stock -->
            <div class="modal fade" id="adjustStockModal" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">
                                <i class="bi bi-sliders me-1"></i>
                                {% translate "Ajuster le stock" %}
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                            <input type="hidden" id="adj-location-id">
                            <div class="mb-3">
                                <label class="form-label text-muted small">{% translate "Emplacement" %}</label>
                                <p class="fw-semibold mb-0" id="adj-location-name"></p>
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-muted small">{% translate "Quantité actuelle" %}</label>
                                <p class="fs-5 fw-bold mb-0" id="adj-current-qty"></p>
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-semibold" for="adj-new-qty">
                                    {% translate "Nouvelle quantité" %} <span class="text-danger">*</span>
                                </label>
                                <input type="number" id="adj-new-qty" class="form-control" required>
                                <div class="form-text" id="adj-diff-hint"></div>
                            </div>
                            <div class="mb-1">
                                <label class="form-label fw-semibold" for="adj-reason">
                                    {% translate "Raison" %}
                                </label>
                                <input type="text" id="adj-reason" class="form-control"
                                       placeholder="{% translate 'Correction manuelle…' %}">
                            </div>
                        </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="adj-submit-btn">
                                <i class="bi bi-check-circle me-1"></i>{% translate "Valider" %}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            {% endif %}

            <!-- Onglets -->
            <ul class="nav nav-tabs" id="productTab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="stocks-tab" data-bs-toggle="tab" data-bs-target="#stocks" type="button" role="tab">
                        <i class="bi bi-box-seam"></i> {% translate "Stocks par emplacement" %}
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="movements-tab" data-bs-toggle="tab" data-bs-target="#movements" type="button" role="tab">
                        <i class="bi bi-arrow-left-right"></i> {% translate "Mouvements récents" %}
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="pending-orders-tab" data-bs-toggle="tab" data-bs-target="#pending-orders" type="button" role="tab">
                        <i class="bi bi-clock-history"></i> {% translate "Commandes en cours" %}
                        {% if pending_orders %}
                            <span class="badge bg-primary">{{ pending_orders.count }}</span>
                        {% endif %}
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="completed-orders-tab" data-bs-toggle="tab" data-bs-target="#completed-orders" type="button" role="tab">
                        <i class="bi bi-check-circle"></i> {% translate "Historique commandes" %}
                    </button>
                </li>
                {% if product.is_serialized %}
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="serialized-tab" data-bs-toggle="tab" data-bs-target="#serialized" type="button" role="tab">
                        <i class="bi bi-upc-scan"></i> {% translate "Articles tracés" %}
                        {% if serialized_items %}
                            <span class="badge bg-info text-dark">{{ serialized_items|length }}</span>
                        {% endif %}
                    </button>
                </li>
                {% endif %}
            </ul>

            <div class="tab-content mt-3 mb-4" id="productTabContent">
                <!-- Onglet Stocks -->
                <div class="tab-pane fade show active" id="stocks" role="tabpanel">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>{% translate "Entrepôt" %}</th>
                                    <th>{% translate "Emplacement" %}</th>
                                    <th class="text-end">{% translate "Quantité" %}</th>
                                    {% if is_stock_manager %}<th></th>{% endif %}
                                </tr>
                            </thead>
                            <tbody>
                                {% for stock in stocks %}
                                <tr>
                                    <td>
                                        <a href="{% url 'stock:warehouse_detail' stock.location.warehouse.id %}">
                                            {{ stock.location.warehouse.name }}
                                        </a>
                                    </td>
                                    <td>{{ stock.location.name }}</td>
                                    <td class="text-end">
                                        <span class="badge {% if stock.quantity > 0 %}bg-success{% elif stock.quantity < 0 %}bg-danger{% else %}bg-secondary{% endif %} stock-qty-badge"
                                              id="stock-qty-{{ stock.location.id }}">
                                            {{ stock.quantity }}
                                        </span>
                                    </td>
                                                                    {% if is_stock_manager %}
                                    <td class="text-end">
                                        {% if stock.can_administer %}
                                        <button type="button"
                                                class="btn btn-sm btn-outline-secondary adjust-stock-btn"
                                                data-location-id="{{ stock.location.id }}"
                                                data-location-name="{{ stock.location.warehouse.name }} — {{ stock.location.name }}"
                                                data-current-qty="{{ stock.quantity }}"
                                                data-bs-toggle="modal"
                                                data-bs-target="#adjustStockModal"
                                                title="{% translate 'Ajuster la quantité' %}">
                                            <i class="bi bi-sliders"></i>
                                        </button>
                                        {% endif %}
                                    </td>
                                    {% endif %}
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="{% if is_stock_manager %}4{% else %}3{% endif %}" class="text-center text-muted">
                                        {% translate "Aucun stock enregistré pour ce produit." %}
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Onglet Mouvements -->
                <div class="tab-pane fade" id="movements" role="tabpanel">
                    <div class="table-responsive">
                        <table class="table table-hover table-sm">
                            <thead>
                                <tr>
                                    <th>{% translate "Date" %}</th>
                                    <th>{% translate "Type" %}</th>
                                    <th>{% translate "Origine" %}</th>
                                    <th>{% translate "Destination" %}</th>
                                    <th class="text-end">{% translate "Quantité" %}</th>
                                    <th>{% translate "Raison" %}</th>
                                </tr>
                            </thead>
                            <tbody id="movements-tbody">
                                {% for movement in recent_movements %}
                                <tr>
                                    <td>{{ movement.date|date:"d/m/Y H:i" }}</td>
                                    <td>
                                        {% if movement.source_location and movement.destination_location %}
                                            <span class="badge bg-info">{{ movement.movement_type }}</span>
                                        {% elif movement.destination_location %}
                                            <span class="badge bg-success">{{ movement.movement_type }}</span>
                                        {% else %}
                                            <span class="badge bg-danger">{{ movement.movement_type }}</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if movement.source_location %}
                                            {{ movement.source_location.warehouse.name }} - {{ movement.source_location.name }}
                                        {% else %}
                                            -
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if movement.destination_location %}
                                            {{ movement.destination_location.warehouse.name }} - {{ movement.destination_location.name }}
                                        {% else %}
                                            -
                                        {% endif %}
                                    </td>
                                    <td class="text-end">
                                        {% if movement.source_location and movement.destination_location %}
                                            {{ movement.quantity }}
                                        {% elif movement.destination_location %}
                                            <span class="text-success">+{{ movement.quantity }}</span>
                                        {% else %}
                                            <span class="text-danger">{% if movement.quantity >= 0 %}-{% endif %}{{ movement.quantity }}</span>
                                        {% endif %}
                                    </td>
                                    <td>{{ movement.reason|default:"-" }}</td>
                                </tr>
                                {% empty %}
                                <tr id="no-movements-row">
                                    <td colspan="6" class="text-center text-muted">
                                        {% translate "Aucun mouvement enregistré." %}
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Onglet Commandes en cours -->
                <div class="tab-pane fade" id="pending-orders" role="tabpanel">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>{% translate "Commande" %}</th>
                                    <th>{% translate "Fournisseur" %}</th>
                                    <th>{% translate "Entrepôt" %}</th>
                                    <th>{% translate "Emplacement" %}</th>
                                    <th>{% translate "Date" %}</th>
                                    <th class="text-end">{% translate "Quantité" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for item in pending_orders %}
                                <tr>
                                    <td>#{{ item.purchase_order.id }}</td>
                                    <td>{{ item.purchase_order.supplier.name }}</td>
                                    <td>{{ item.purchase_order.warehouse.name }}</td>
                                    <td>{{ item.location.name }}</td>
                                    <td>{{ item.purchase_order.date_ordered|date:"d/m/Y" }}</td>
                                    <td class="text-end">
                                        <span class="badge bg-primary">{{ item.quantity }}</span>
                                    </td>
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="6" class="text-center text-muted">
                                        {% translate "Aucune commande en cours." %}
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Onglet Historique commandes -->
                <div class="tab-pane fade" id="completed-orders" role="tabpanel">
                    <div class="table-responsive">
                        <table class="table table-hover table-sm">
                            <thead>
                                <tr>
                                    <th>{% translate "Commande" %}</th>
                                    <th>{% translate "Fournisseur" %}</th>
                                    <th>{% translate "Entrepôt" %}</th>
                                    <th>{% translate "Date commande" %}</th>
                                    <th>{% translate "Statut" %}</th>
                                    <th class="text-end">{% translate "Quantité" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for item in completed_orders %}
                                <tr>
                                    <td>#{{ item.purchase_order.id }}</td>
                                    <td>{{ item.purchase_order.supplier.name }}</td>
                                    <td>{{ item.purchase_order.warehouse.name }}</td>
                                    <td>{{ item.purchase_order.date_ordered|date:"d/m/Y" }}</td>
                                    <td>
                                        {% if item.purchase_order.status == 'received' %}
                                            <span class="badge bg-success">{% translate "Reçue" %}</span>
                                        {% else %}
                                            <span class="badge bg-secondary">{% translate "Annulée" %}</span>
                                        {% endif %}
                                    </td>
                                    <td class="text-end">{{ item.quantity }}</td>
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="6" class="text-center text-muted">
                                        {% translate "Aucune commande dans l'historique." %}
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
                {% if product.is_serialized %}
                <!-- Onglet Articles tracés -->
                <div class="tab-pane fade" id="serialized" role="tabpanel">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span class="text-muted small">{{ serialized_items|length }} {% translate "article(s) enregistré(s)" %}</span>
                        {% if is_stock_manager %}
                        <a href="{% url 'stock:serialized_item_create_for_product' product.pk %}" class="btn btn-sm btn-primary">
                            <i class="bi bi-plus-circle"></i> {% translate "Enregistrer un article" %}
                        </a>
                        {% endif %}
                    </div>
                    <div class="table-responsive">
                        <table class="table table-hover table-sm">
                            <thead>
                                <tr>
                                    <th>{% translate "Numéro de série" %}</th>
                                    <th>{% translate "Statut" %}</th>
                                    <th>{% translate "Détenteur" %}</th>
                                    <th>{% translate "Emplacement" %}</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for si in serialized_items %}
                                <tr>
                                    <td class="font-monospace fw-semibold">{{ si.serial_number }}</td>
                                    <td>
                                        {% if si.status == 'available' %}<span class="badge bg-success">{{ si.get_status_display }}</span>
                                        {% elif si.status == 'assigned' %}<span class="badge bg-primary">{{ si.get_status_display }}</span>
                                        {% elif si.status == 'lost' %}<span class="badge bg-danger">{{ si.get_status_display }}</span>
                                        {% else %}<span class="badge bg-secondary">{{ si.get_status_display }}</span>{% endif %}
                                    </td>
                                    <td>{{ si.current_holder.name|default:"—" }}</td>
                                    <td>
                                        {% if si.current_location %}{{ si.current_location.warehouse.name }} — {{ si.current_location.name }}{% else %}—{% endif %}
                                    </td>
                                    <td class="text-end">
                                        <a href="{% url 'stock:serialized_item_detail' si.pk %}" class="btn btn-sm btn-outline-primary">
                                            <i class="bi bi-eye"></i>
                                        </a>
                                    </td>
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="5" class="text-center text-muted py-3">{% translate "Aucun article enregistré." %}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    <div class="mt-2">
                        <a href="{% url 'stock:serialized_items_list' %}?product={{ product.pk }}" class="btn btn-sm btn-outline-secondary">
                            <i class="bi bi-list"></i> {% translate "Voir tous les articles de ce produit" %}
                        </a>
                    </div>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock content %}

{% if is_stock_manager %}
{% block script %}
<script>
(function () {
    const ADJUST_URL = '{% url "stock:quick_stock_adjustment" %}';
    const CSRF_TOKEN = '{{ csrf_token }}';

    function escapeHtml(str) {
        if (!str) return '-';
        return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#039;');
    }

    const modal       = document.getElementById('adjustStockModal');
    const locationId  = document.getElementById('adj-location-id');
    const locationName = document.getElementById('adj-location-name');
    const currentQtyEl = document.getElementById('adj-current-qty');
    const newQtyInput  = document.getElementById('adj-new-qty');
    const reasonInput  = document.getElementById('adj-reason');
    const diffHint     = document.getElementById('adj-diff-hint');
    const submitBtn    = document.getElementById('adj-submit-btn');

    // Populate modal when an "Ajuster" button is clicked
    document.querySelectorAll('.adjust-stock-btn').forEach(function (btn) {
        btn.addEventListener('click', function () {
            locationId.value   = this.dataset.locationId;
            locationName.textContent = this.dataset.locationName;
            currentQtyEl.textContent = this.dataset.currentQty;
            newQtyInput.value  = this.dataset.currentQty;
            reasonInput.value  = '';
            diffHint.textContent = '';
            diffHint.className = 'form-text';
        });
    });

    // Live diff hint
    newQtyInput.addEventListener('input', function () {
        const current = parseInt(currentQtyEl.textContent, 10) || 0;
        const next    = parseInt(this.value, 10);
        if (isNaN(next)) { diffHint.textContent = ''; return; }
        const diff = next - current;
        if (diff > 0) {
            diffHint.textContent = '+' + diff + ' {% translate "(entrée)" %}';
            diffHint.className   = 'form-text text-success fw-semibold';
        } else if (diff < 0) {
            diffHint.textContent = diff + ' {% translate "(sortie)" %}';
            diffHint.className   = 'form-text text-danger fw-semibold';
        } else {
            diffHint.textContent = '{% translate "Aucune modification" %}';
            diffHint.className   = 'form-text text-muted';
        }
    });

    // Submit via AJAX
    submitBtn.addEventListener('click', function () {
        const locId  = locationId.value;
        const newQty = parseInt(newQtyInput.value, 10);
        const reason = reasonInput.value.trim() || '{% translate "Correction manuelle" %}';

        if (!locId || isNaN(newQty)) {
            newQtyInput.classList.add('is-invalid');
            return;
        }
        newQtyInput.classList.remove('is-invalid');
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>{% translate "Enregistrement…" %}';

        const body = new URLSearchParams({
            product_id: '{{ product.pk }}',
            location_id: locId,
            quantity: newQty,
            reason: reason,
            csrfmiddlewaretoken: CSRF_TOKEN,
        });

        fetch(ADJUST_URL, {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            body: body.toString(),
        })
        .then(function (r) { return r.json(); })
        .then(function (data) {
            submitBtn.disabled = false;
            submitBtn.innerHTML = '<i class="bi bi-check-circle me-1"></i>{% translate "Valider" %}';
            if (data.success) {
                // Update the badge in the table
                const badge = document.getElementById('stock-qty-' + locId);
                if (badge) {
                    badge.textContent = newQty;
                    badge.className = 'badge stock-qty-badge ' + (newQty > 0 ? 'bg-success' : (newQty < 0 ? 'bg-danger' : 'bg-secondary'));
                }
                // Update the button's data-current-qty
                const btn = document.querySelector('.adjust-stock-btn[data-location-id="' + locId + '"]');
                const oldQty = btn ? parseInt(btn.dataset.currentQty, 10) || 0 : 0;
                if (btn) btn.dataset.currentQty = newQty;

                // Prepend new movement to the table
                const diff = newQty - oldQty;
                if (diff !== 0) {
                    const tbody = document.getElementById('movements-tbody');
                    const noMovementsRow = document.getElementById('no-movements-row');
                    if (noMovementsRow) {
                        noMovementsRow.remove();
                    }

                    if (tbody) {
                        const now = new Date();
                        const dateStr = now.toLocaleDateString('fr-FR', { day: '2-digit', month: '2-digit', year: 'numeric' }) + ' ' +
                                        now.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });

                        const typeBadge = diff > 0 
                            ? `<span class="badge bg-success">{% translate "Entrée" %}</span>` 
                            : `<span class="badge bg-danger">{% translate "Sortie" %}</span>`;

                        const origin = diff < 0 ? escapeHtml(locationName.textContent) : '-';
                        const destination = diff > 0 ? escapeHtml(locationName.textContent) : '-';

                        const qtyDisplay = diff > 0 
                            ? `<span class="text-success">+${diff}</span>` 
                            : `<span class="text-danger">-${Math.abs(diff)}</span>`;

                        const tr = document.createElement('tr');
                        tr.innerHTML = `
                            <td>${dateStr}</td>
                            <td>${typeBadge}</td>
                            <td>${origin}</td>
                            <td>${destination}</td>
                            <td class="text-end">${qtyDisplay}</td>
                            <td>${escapeHtml(reason)}</td>
                        `;
                        tbody.insertBefore(tr, tbody.firstChild);
                    }
                }

                bootstrap.Modal.getInstance(modal).hide();
            } else {
                alert('{% translate "Erreur" %} : ' + (data.error || '{% translate "Une erreur est survenue." %}'));
            }
        })
        .catch(function () {
            submitBtn.disabled = false;
            submitBtn.innerHTML = '<i class="bi bi-check-circle me-1"></i>{% translate "Valider" %}';
            alert('{% translate "Une erreur réseau est survenue." %}');
        });
    });
})();
</script>
{% endblock script %}
{% endif %}