{% extends "base.html" %}
{% load static %}
{% load i18n %}
{% load stock_custom_filters %}
{% load short_name %}
{% load mention_tags %}

{% block content %}
<div class="container-fluid mt-3">
    <div class="row">
        <div class="col-12">
            <!-- En-tête -->
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h3>
                        <i class="bi bi-clipboard-check"></i> 
                        {% translate "Bon de Préparation" %} {{ preparation_order.order_number }}
                    </h3>
                    <p class="text-muted mb-0">
                        <i class="bi bi-calendar"></i> {{ preparation_order.date|date:"d/m/Y H:i" }}
                    </p>
                </div>
                <div class="d-flex align-items-center gap-2 flex-wrap">
                    <!-- Statut -->
                    {% if is_reopened %}
                        <span class="badge bg-warning text-dark fs-5" title="{% translate 'Bon de préparation réouvert pour modification' %}">
                            <i class="bi bi-arrow-counterclockwise me-1"></i> {% translate "Réouvert" %}
                        </span>
                    {% elif preparation_order.status == 'to_process' %}
                        <span class="badge bg-warning text-dark fs-5">
                            <i class="bi bi-hourglass-split"></i> {{ preparation_order.get_status_display }}
                        </span>
                    {% elif preparation_order.status == 'pending' %}
                        <span class="badge bg-info fs-5">
                            <i class="bi bi-clock"></i> {{ preparation_order.get_status_display }}
                        </span>
                    {% elif preparation_order.status == 'processed' %}
                        <span class="badge bg-success fs-5">
                            <i class="bi bi-check-circle"></i> {{ preparation_order.get_status_display }}
                        </span>
                    {% elif preparation_order.status == 'cancelled' %}
                        <span class="badge bg-danger fs-5">
                            <i class="bi bi-x-circle"></i> {{ preparation_order.get_status_display }}
                        </span>
                    {% endif %}

                    <!-- Priorité -->
                    {% if preparation_order.priority == '1' %}
                        <span class="badge bg-danger fs-5" title="{% translate 'Priorité' %}">
                            <i class="bi bi-exclamation-triangle-fill me-1"></i>{{ preparation_order.get_priority_display }}
                        </span>
                    {% elif preparation_order.priority == '2' %}
                        <span class="badge bg-warning text-dark fs-5" title="{% translate 'Priorité' %}">
                            <i class="bi bi-exclamation-circle-fill me-1"></i>{{ preparation_order.get_priority_display }}
                        </span>
                    {% elif preparation_order.priority == '3' %}
                        <span class="badge bg-primary fs-5" title="{% translate 'Priorité' %}">
                            <i class="bi bi-info-circle-fill me-1"></i>{{ preparation_order.get_priority_display }}
                        </span>
                    {% else %}
                        <span class="badge bg-secondary fs-5" title="{% translate 'Priorité' %}">
                            <i class="bi bi-arrow-down-circle-fill me-1"></i>{{ preparation_order.get_priority_display }}
                        </span>
                    {% endif %}
                </div>
            </div>

            {% if is_reopened %}
            <div class="alert alert-warning border-warning shadow-sm mb-3" role="alert">
                <div class="d-flex align-items-center">
                    <i class="bi bi-arrow-counterclockwise text-warning me-3 fs-2"></i>
                    <div>
                        <h5 class="alert-heading mb-1"><i class="bi bi-exclamation-circle-fill me-1"></i> {% translate "Bon de préparation réouvert pour modification" %}</h5>
                        <p class="mb-0 small">{% translate "Ce bon a déjà fait l'objet d'un traitement initial. Les modifications apportées seront prises en compte lors du prochain traitement par le magasinier (restitutions et sorties complémentaires automatiques)." %}</p>
                    </div>
                </div>
            </div>
            {% endif %}

            <!-- Intervention liée -->
            {% if preparation_order.intervention %}
            <div class="card mb-3 shadow-sm">
                <div class="card-header bg-info text-white">
                    <i class="bi bi-link-45deg"></i> {% translate "Intervention liée" %}
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="{% if preparation_order.intervention.intervention_manager %}col-md-4{% else %}col-md-6{% endif %}">
                            <strong>{% translate "Numéro" %}:</strong>
                            <a href="{% url 'interventions:intervention_detail' preparation_order.intervention.id %}" target="_blank">
                                {{ preparation_order.intervention.code }}
                            </a>
                        </div>
                        <div class="{% if preparation_order.intervention.intervention_manager %}col-md-4{% else %}col-md-6{% endif %}">
                            <strong>{% translate "Titre" %}:</strong>
                            {{ preparation_order.intervention.title|default:preparation_order.intervention.description|truncatewords:15 }}
                        </div>
                        {% if preparation_order.intervention.intervention_manager %}
                        <div class="col-md-4">
                            <strong>{% translate "Gestionnaire" %}:</strong>
                            {{ preparation_order.intervention.intervention_manager|short_name|default:preparation_order.intervention.intervention_manager.username }}
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
            {% endif %}

            <!-- Suivi du prêt de matériel -->
            {% if preparation_order.is_loan %}
            <div class="card mb-3 shadow-sm border-primary">
                <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center py-2">
                    <div class="fw-semibold">
                        <i class="bi bi-calendar-event me-1"></i> {% translate "Suivi du prêt de matériel" %}
                    </div>
                    <div>
                        {% if preparation_order.loan_returned %}
                            <span class="badge bg-success">{% translate "Matériel retourné" %}</span>
                        {% else %}
                            {% if preparation_order.is_overdue %}
                                <span class="badge bg-danger">{% translate "En retard" %}</span>
                            {% else %}
                                <span class="badge bg-warning text-dark">{% translate "En cours de prêt" %}</span>
                            {% endif %}
                        {% endif %}
                    </div>
                </div>
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-md-6">
                            <p class="mb-1"><strong>{% translate "Date de retour attendue" %} :</strong> 
                                <span class="{% if not preparation_order.loan_returned and preparation_order.is_overdue %}text-danger fw-bold{% endif %}">
                                    {{ preparation_order.estimated_return_date|date:"d/m/Y"|default:"-" }}
                                </span>
                            </p>
                            <p class="mb-0 text-muted small">
                                {% if preparation_order.loan_returned %}
                                    <i class="bi bi-check-circle-fill text-success"></i> {% translate "Le matériel a été retourné." %}
                                {% else %}
                                    {% if preparation_order.is_overdue %}
                                        <i class="bi bi-exclamation-triangle-fill text-danger"></i> {% translate "Le retour de ce matériel est en retard !" %}
                                    {% else %}
                                        <i class="bi bi-clock-history text-warning"></i> {% translate "Le matériel est actuellement prêté." %}
                                    {% endif %}
                                {% endif %}
                            </p>
                        </div>
                        <div class="col-md-6 text-md-end mt-3 mt-md-0 d-flex justify-content-md-end gap-2">
                            {% if can_manage %}
                            <form method="post" action="{% url 'stock:preparation_order_toggle_loan_return' preparation_order.pk %}" class="d-inline">
                                {% csrf_token %}
                                {% if preparation_order.loan_returned %}
                                    <input type="hidden" name="returned" value="false">
                                    <button type="submit" class="btn btn-outline-secondary btn-sm">
                                        <i class="bi bi-x-circle me-1"></i>{% translate "Marquer comme non retourné" %}
                                    </button>
                                {% else %}
                                    <input type="hidden" name="returned" value="true">
                                    <button type="submit" class="btn btn-success btn-sm">
                                        <i class="bi bi-check-circle me-1"></i>{% translate "Marquer comme retourné" %}
                                    </button>
                                {% endif %}
                            </form>
                            <button type="button" class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#editLoanInfoModal">
                                <i class="bi bi-pencil me-1"></i>{% translate "Modifier le prêt" %}
                            </button>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
            {% elif can_manage %}
            <!-- Option pour définir un prêt -->
            <div class="card mb-3 shadow-sm border-dashed">
                <div class="card-body py-2 d-flex justify-content-between align-items-center bg-light">
                    <span class="text-muted small"><i class="bi bi-info-circle me-1"></i>{% translate "Cette préparation ne concerne pas un prêt actuellement." %}</span>
                    <button type="button" class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#editLoanInfoModal">
                        <i class="bi bi-plus-circle me-1"></i>{% translate "Définir comme prêt" %}
                    </button>
                </div>
            </div>
            {% endif %}

            <!-- Mouvements de stock liés -->
            {% if exit_batches or return_batches %}
            <div class="card mb-3 shadow-sm">
                <div class="card-header bg-secondary bg-opacity-10">
                    <i class="bi bi-arrow-left-right me-1"></i> {% translate "Mouvements de stock liés" %}
                </div>
                <div class="card-body py-2">
                    {% if exit_batches %}
                    <div class="mb-2 d-flex align-items-center flex-wrap gap-2">
                        <strong class="me-1"><i class="bi bi-box-arrow-up text-danger me-1"></i>{% translate "Sortie(s)" %} :</strong>
                        {% for batch in exit_batches %}
                        <a href="{% url 'stock:stock_movement_batch_detail' batch.pk %}" class="badge bg-danger text-decoration-none fs-6">
                            <i class="bi bi-receipt me-1"></i>Lot #{{ batch.pk }} — {{ batch.date|date:"d/m/Y H:i" }}
                        </a>
                        {% endfor %}
                    </div>
                    {% endif %}
                    {% if return_batches %}
                    <div class="d-flex align-items-center flex-wrap gap-2">
                        <strong class="me-1"><i class="bi bi-box-arrow-in-down text-success me-1"></i>{% translate "Retour(s)" %} :</strong>
                        {% for batch in return_batches %}
                        <a href="{% url 'stock:stock_movement_batch_detail' batch.pk %}" class="badge bg-success text-decoration-none fs-6">
                            <i class="bi bi-receipt me-1"></i>Lot #{{ batch.pk }} — {{ batch.date|date:"d/m/Y H:i" }}
                        </a>
                        {% endfor %}
                    </div>
                    {% endif %}
                </div>
            </div>
            {% endif %}

            <!-- Demandeur (origine de la demande) -->
            {% if preparation_order.requester %}
            <div class="card mb-3 shadow-sm">
                <div class="card-header bg-secondary bg-opacity-10">
                    <i class="bi bi-person-lines-fill me-1"></i> {% translate "Demandeur" %}
                </div>
                <div class="card-body">
                    <p class="mb-0 fs-5"><i class="bi bi-person me-1 text-muted"></i>{{ preparation_order.requester }}</p>
                </div>
            </div>
            {% endif %}

            <!-- QR Code -->
            {% if preparation_order.qr_code %}
            <div class="card mb-3 shadow-sm">
                <div class="card-header">
                    <i class="bi bi-qr-code"></i> {% translate "QR Code" %}
                </div>
                <div class="card-body text-center">
                    <img src="{{ preparation_order.qr_code.url }}" alt="QR Code {{ preparation_order.order_number }}" style="max-width: 180px;">
                    <p class="text-muted mt-2 mb-0"><small>{{ preparation_order.order_number }}</small></p>
                </div>
            </div>
            {% endif %}

            <!-- Liste des produits -->
            <div class="card mb-3 shadow-sm">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">
                        <i class="bi bi-box-seam"></i> {% translate "Produits demandés" %}
                    </h5>
                    <span class="badge bg-secondary">
                        {{ items_with_stock|length }} {% translate "article(s)" %}
                    </span>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle">
                            <thead>
                                <tr>
                                    <th>{% translate "Produit" %}</th>
                                    <th>{% translate "Code" %}</th>
                                    <th>{% translate "Catégorie" %}</th>
                                    <th class="text-center">{% translate "Quantité demandée" %}</th>
                                    {% if has_executed_outputs %}
                                    <th class="text-center">{% translate "À prélever / à restituer" %}</th>
                                    {% endif %}
                                    {% if preparation_order.status == 'to_process' or preparation_order.status == 'pending' %}
                                    <th class="text-center">{% translate "Quantité réservée" %}</th>
                                    <th class="text-center">{% translate "Stock disponible" %}</th>
                                    <th>{% translate "Emplacements" %}</th>
                                    {% endif %}
                                    <th>{% translate "Bon de confection" %}</th>
                                    <th class="text-center" style="width:70px;">{% translate "Préparé" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for item_data in items_with_stock %}
                                <tr {% if not item_data.is_sufficient and preparation_order.status != 'processed' and preparation_order.status != 'cancelled' %}class="table-warning"{% endif %}>
                                    <td>
                                        <strong>{{ item_data.item.product.name }}</strong>
                                        {% if not item_data.is_sufficient and preparation_order.status != 'processed' and preparation_order.status != 'cancelled' %}
                                            <br><small class="text-danger">
                                                <i class="bi bi-exclamation-triangle"></i> {% translate "Stock insuffisant" %}
                                            </small>
                                        {% endif %}
                                    </td>
                                    <td><code>{{ item_data.item.product.code }}</code></td>
                                    <td>
                                        {% if item_data.item.product.category %}
                                            {{ item_data.item.product.category.name_fr }}
                                        {% else %}
                                            <span class="text-muted">-</span>
                                        {% endif %}
                                    </td>
                                    <td class="text-center">
                                        {% if item_data.item.quantity > 0 %}
                                            <span class="badge bg-primary fs-6">{{ item_data.item.quantity }} {{ item_data.item.product.unit }}</span>
                                        {% else %}
                                            <span class="badge bg-secondary" title="{% translate 'Produit ajouté pendant le traitement' %}">
                                                <i class="bi bi-plus-circle"></i> {% translate "Ajouté" %}
                                            </span>
                                        {% endif %}
                                    </td>
                                    {% if has_executed_outputs %}
                                    <td class="text-center">
                                        {% if preparation_order.status == 'processed' %}
                                            {% if item_data.gross_in > 0 and item_data.executed_qty == 0 %}
                                                <span class="badge bg-info text-dark fs-6" title="{% translate 'Tous les articles ont été restitués au stock' %}">
                                                    <i class="bi bi-arrow-return-left me-1"></i>{% translate "Restitué au stock" %} ({{ item_data.gross_in }})
                                                </span>
                                            {% elif item_data.gross_in > 0 %}
                                                <span class="badge bg-success fs-6">
                                                    <i class="bi bi-check-circle me-1"></i>{% translate "Sorti net" %} ({{ item_data.executed_qty }})
                                                </span>
                                                <br><small class="text-muted">{% translate "Sorti" %}: {{ item_data.gross_out }}, {% translate "Restitué" %}: {{ item_data.gross_in }}</small>
                                            {% elif item_data.executed_qty > 0 %}
                                                <span class="badge bg-success fs-6">
                                                    <i class="bi bi-check-circle me-1"></i>{% translate "Sorti" %} ({{ item_data.executed_qty }})
                                                </span>
                                            {% else %}
                                                <span class="badge bg-secondary fs-6">
                                                    {% translate "Non sorti" %}
                                                </span>
                                            {% endif %}
                                        {% else %}
                                            {% if item_data.executed_qty > 0 or item_data.gross_out > 0 or item_data.gross_in > 0 %}
                                                {% if item_data.delta > 0 %}
                                                    <span class="badge bg-warning text-dark fs-6" title="{% translate 'Complément à prélever' %}">
                                                        <i class="bi bi-plus-circle me-1"></i>+{{ item_data.delta }} {% translate "à prélever" %}
                                                    </span>
                                                    {% if item_data.executed_qty > 0 %}
                                                        <br><small class="text-muted">{% translate "Déjà sorti" %}: {{ item_data.executed_qty }}</small>
                                                    {% elif item_data.gross_in > 0 %}
                                                        <br><small class="text-muted">{% translate "Restitué" %}: {{ item_data.gross_in }}</small>
                                                    {% endif %}
                                                {% elif item_data.delta < 0 %}
                                                    <span class="badge bg-info text-dark fs-6" title="{% translate 'Surplus à restituer en stock' %}">
                                                        <i class="bi bi-arrow-return-left me-1"></i>{{ item_data.delta }} {% translate "à restituer" %}
                                                    </span>
                                                    <br><small class="text-muted">{% translate "Sorti net" %}: {{ item_data.executed_qty }}</small>
                                                {% else %}
                                                    <span class="badge bg-success fs-6">
                                                        <i class="bi bi-check-circle me-1"></i>{% translate "Inchangé" %} ({{ item_data.executed_qty }})
                                                    </span>
                                                {% endif %}
                                            {% else %}
                                                <span class="badge bg-primary fs-6">
                                                    <i class="bi bi-box-arrow-right me-1"></i>{{ item_data.item.quantity }} {% translate "à prélever" %}
                                                </span>
                                            {% endif %}
                                        {% endif %}
                                    </td>
                                    {% endif %}
                                    {% if preparation_order.status == 'to_process' or preparation_order.status == 'pending' %}
                                    <td class="text-center">
                                        <span class="badge bg-info">
                                            {{ item_data.reserved_stock }}
                                        </span>
                                    </td>
                                    <td class="text-center">
                                        <span class="badge {% if item_data.is_sufficient %}bg-success{% else %}bg-warning text-dark{% endif %}">
                                            {{ item_data.available_stock }}
                                        </span>
                                    </td>
                                    <td>
                                        {% if item_data.locations %}
                                            <small>
                                                {% for stock in item_data.locations %}
                                                    <div class="mb-1">
                                                        <i class="bi bi-geo-alt"></i> 
                                                        {{ stock.location.warehouse.name }} - {{ stock.location.name }}
                                                    </div>
                                                {% endfor %}
                                            </small>
                                        {% else %}
                                            <span class="text-muted">{% translate "Aucun stock" %}</span>
                                        {% endif %}
                                    </td>
                                    {% endif %}
                                    <td>
                                        {% 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 == 'completed' %}btn-outline-success{% elif item_data.production_order.status == 'in_production' %}btn-outline-primary{% elif item_data.production_order.status == 'cancelled' %}btn-outline-danger{% elif item_data.production_order.status == 'draft' %}btn-outline-secondary{% else %}btn-outline-warning{% endif %}"
                                               title="{{ item_data.production_order.get_status_display }}">
                                                <i class="bi {% if item_data.production_order.status == 'completed' %}bi-check-circle{% elif item_data.production_order.status == 'in_production' %}bi-gear{% elif item_data.production_order.status == 'cancelled' %}bi-x-circle{% else %}bi-eye{% endif %}"></i> {{ item_data.production_order.code }}
                                            </a>
                                        {% elif can_manage and preparation_order.status != 'processed' and preparation_order.status != 'cancelled' %}
                                            <a href="{% url 'stock:production_order_create' %}?preparation_order={{ preparation_order.pk }}&prep_item={{ item_data.item.pk }}" class="btn btn-sm btn-outline-success" title="{% translate 'Créer un bon de confection' %}">
                                                <i class="bi bi-tools"></i> {% translate "Créer" %}
                                            </a>
                                        {% else %}
                                            <span class="text-muted">—</span>
                                        {% endif %}
                                    </td>
                                    <td class="text-center">
                                        <div class="form-check form-switch d-inline-block mb-0">
                                            <input class="form-check-input prepare-toggle-input"
                                                   type="checkbox"
                                                   role="switch"
                                                   data-item-id="{{ item_data.item.id }}"
                                                   data-is-other="false"
                                                   {% if item_data.item.is_prepared %}checked{% endif %}
                                                   {% if not can_manage %}disabled title="{% translate 'Permissions insuffisantes' %}"{% endif %}>
                                        </div>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% if deleted_items_to_return %}
                    <div class="alert alert-info border-info shadow-sm mt-3 mb-0">
                        <h6 class="alert-heading text-dark mb-2">
                            <i class="bi bi-arrow-return-left me-1"></i> {% translate "Articles supprimés du bon (restitution automatique au stock)" %} :
                        </h6>
                        <div class="table-responsive bg-white rounded p-2">
                            <table class="table table-sm table-hover align-middle mb-0">
                                <thead>
                                    <tr>
                                        <th>{% translate "Produit" %}</th>
                                        <th>{% translate "Emplacement(s) d'origine" %}</th>
                                        <th class="text-center">{% translate "Quantité à restituer" %}</th>
                                        <th class="text-center" style="width:70px;">{% translate "Préparé" %}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for del in deleted_items_to_return %}
                                    <tr>
                                        <td><strong>{{ del.product.name }}</strong> (<code>{{ del.product.code }}</code>)</td>
                                        <td><small class="text-muted">{{ del.location_info }}</small></td>
                                        <td class="text-center">
                                            <span class="badge bg-info text-dark">+{{ del.executed_qty }} {{ del.product.unit }} {% translate "à restituer" %}</span>
                                        </td>
                                        <td class="text-center">
                                            {% if del.item %}
                                            <div class="form-check form-switch d-inline-block mb-0">
                                                <input class="form-check-input prepare-toggle-input"
                                                       type="checkbox"
                                                       role="switch"
                                                       data-item-id="{{ del.item.id }}"
                                                       data-is-other="false"
                                                       {% if del.item.is_prepared %}checked{% endif %}
                                                       {% if not can_manage %}disabled title="{% translate 'Permissions insuffisantes' %}"{% endif %}>
                                            </div>
                                            {% else %}
                                            <span class="text-muted">—</span>
                                            {% endif %}
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Autres produits demandés -->
            {% if other_items %}
            <div class="card mb-3 shadow-sm">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">
                        <i class="bi bi-pencil-square"></i> {% translate "Autres produits demandés" %}
                    </h5>
                    <span class="badge bg-dark">{{ other_items|length }} {% translate "ligne(s)" %}</span>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead>
                                <tr>
                                    <th>{% translate "Description" %}</th>
                                    <th>{% translate "Catégorie" %}</th>
                                    <th>{% translate "Type (Signalisation)" %}</th>
                                    <th class="text-center">{% translate "Quantité" %}</th>
                                    {% if can_manage %}<th></th>{% endif %}
                                    <th class="text-center" style="width:70px;">{% translate "Préparé" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for oi_data in other_items %}
                                <tr>
                                    <td>{{ oi_data.item.description }}</td>
                                    <td>
                                        {% if oi_data.item.category %}
                                            <span class="badge bg-secondary">{{ oi_data.item.category.name_fr }}</span>
                                        {% else %}
                                            <span class="text-muted">—</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if oi_data.item.sign_panel_type %}
                                            <code>{{ oi_data.item.sign_panel_type.code }}</code>
                                            <small class="text-muted ms-1">{{ oi_data.item.sign_panel_type.name_fr }}</small>
                                        {% else %}
                                            <span class="text-muted">—</span>
                                        {% endif %}
                                    </td>
                                    <td class="text-center">
                                        <span class="badge bg-warning text-dark">{{ oi_data.item.quantity }}</span>
                                    </td>
                                    {% if can_manage %}
                                    <td class="text-end">
                                        {% 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 == 'completed' %}btn-outline-success{% elif oi_data.production_order.status == 'in_production' %}btn-outline-primary{% elif oi_data.production_order.status == 'cancelled' %}btn-outline-danger{% elif oi_data.production_order.status == 'draft' %}btn-outline-secondary{% else %}btn-outline-warning{% endif %}"
                                               title="{{ oi_data.production_order.get_status_display }}">
                                                <i class="bi {% if oi_data.production_order.status == 'completed' %}bi-check-circle{% elif oi_data.production_order.status == 'in_production' %}bi-gear{% elif oi_data.production_order.status == 'cancelled' %}bi-x-circle{% else %}bi-eye{% endif %}"></i> {{ oi_data.production_order.code }}
                                            </a>
                                        {% else %}
                                            <a href="{% url 'stock:production_order_create' %}?other_item={{ oi_data.item.pk }}&preparation_order={{ preparation_order.pk }}"
                                               class="btn btn-sm btn-outline-success"
                                               title="{% translate 'Créer un bon de confection pour ce produit' %}">
                                                <i class="bi bi-tools"></i> {% translate "Bon de confection" %}
                                            </a>
                                        {% endif %}
                                    </td>
                                    {% endif %}
                                    <td class="text-center">
                                        <div class="form-check form-switch d-inline-block mb-0">
                                            <input class="form-check-input prepare-toggle-input"
                                                   type="checkbox"
                                                   role="switch"
                                                   data-item-id="{{ oi_data.item.id }}"
                                                   data-is-other="true"
                                                   {% if oi_data.item.is_prepared %}checked{% endif %}
                                                   {% if not can_manage %}disabled title="{% translate 'Permissions insuffisantes' %}"{% endif %}>
                                        </div>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            {% endif %}

            <!-- Bons de confection associés -- bloc supprimé, les liens sont désormais intégrés dans les tableaux ci-dessus -->
            {% comment %}
                        <table class="table table-sm table-bordered">
                            <thead class="table-light">
                                <tr>
                                    <th>{% translate "Code" %}</th>
                                    <th>{% translate "Conception" %}</th>
                                    <th>{% translate "Quantité" %}</th>
                                    <th>{% translate "Statut" %}</th>
                                    <th>{% translate "Actions" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for prod_order in preparation_order.production_orders.all %}
                                <tr>
                                    <td><code>{{ prod_order.code }}</code></td>
                                    <td>—</td>
                                    <td>{{ prod_order.quantity }}</td>
                                    <td>
                                        {% if prod_order.status == 'draft' %}
                                            <span class="badge bg-secondary">{{ prod_order.get_status_display }}</span>
                                        {% elif prod_order.status == 'in_production' %}
                                            <span class="badge bg-warning text-dark">{{ prod_order.get_status_display }}</span>
                                        {% elif prod_order.status == 'completed' %}
                                            <span class="badge bg-success">{{ prod_order.get_status_display }}</span>
                                        {% elif prod_order.status == 'cancelled' %}
                                            <span class="badge bg-danger">{{ prod_order.get_status_display }}</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <a href="{% url 'stock:production_order_detail' prod_order.pk %}" class="btn btn-sm btn-outline-primary">
                                            <i class="bi bi-eye"></i> {% translate "Voir" %}
                                        </a>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
            {% endcomment %}

            <!-- Actions -->
            {% if can_manage %}
            <div class="card shadow-sm">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="bi bi-gear"></i> {% translate "Actions" %}
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        {% if preparation_order.status == 'to_process' or preparation_order.status == 'pending' %}
                        <div class="col-md-3 mb-3">
                            <div class="card h-100 border-success">
                                <div class="card-body text-center">
                                    <i class="bi bi-check-circle text-success" style="font-size: 2rem;"></i>
                                    <h6 class="mt-2">{% translate "Signaler comme traité" %}</h6>
                                    <p class="text-muted small">{% translate "Valider la préparation et enregistrer les mouvements de stock" %}</p>
                                    <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#confirmProcessModal">
                                        <i class="bi bi-check2-circle me-1"></i> {% translate "Signaler comme traité" %}
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-3 mb-3">
                            <div class="card h-100 border-primary">
                                <div class="card-body text-center">
                                    <i class="bi bi-cart-plus text-primary" style="font-size: 2rem;"></i>
                                    <h6 class="mt-2">{% translate "Créer un bon de commande" %}</h6>
                                    <p class="text-muted small">{% translate "Commander les produits manquants" %}</p>
                                    {% if can_manage_purchase %}
                                        <a href="{% url 'stock:preparation_order_create_purchase' preparation_order.pk %}" class="btn btn-primary">
                                            <i class="bi bi-plus-circle"></i> {% translate "Commander" %}
                                        </a>
                                    {% else %}
                                        <button class="btn btn-primary" disabled title="{% translate 'Droits insuffisants' %}">
                                            <i class="bi bi-lock"></i> {% translate "Commander" %}
                                        </button>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        
                        {% if can_cancel %}
                        <div class="col-md-3 mb-3">
                            <div class="card h-100 border-warning">
                                <div class="card-body text-center">
                                    <i class="bi bi-pencil-square text-warning" style="font-size: 2rem;"></i>
                                    <h6 class="mt-2">{% translate "Modifier le bon de préparation" %}</h6>
                                    <p class="text-muted small">{% translate "Ajouter, supprimer ou modifier les articles" %}</p>
                                    <button type="button" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#editPreparationOrderModal">
                                        <i class="bi bi-pencil"></i> {% translate "Modifier" %}
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-3 mb-3">
                            <div class="card h-100 border-danger">
                                <div class="card-body text-center">
                                    <i class="bi bi-x-circle text-danger" style="font-size: 2rem;"></i>
                                    <h6 class="mt-2">{% translate "Annuler le bon de préparation" %}</h6>
                                    <p class="text-muted small">{% translate "Libérer les quantités réservées" %}</p>
                                    <form method="post" action="{% url 'stock:preparation_order_cancel' preparation_order.pk %}" 
                                          onsubmit="return confirm('{% translate "Êtes-vous sûr de vouloir annuler ce bon ?" %}');">
                                        {% csrf_token %}
                                        <button type="submit" class="btn btn-danger">
                                            <i class="bi bi-trash"></i> {% translate "Annuler" %}
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                        {% endif %}
                        {% elif preparation_order.status == 'processed' %}
                        {% if can_manage_stock %}
                        <div class="col-md-4 mb-3">
                            <div class="card h-100 border-info">
                                <div class="card-body text-center">
                                    <i class="bi bi-box-arrow-in-down text-info" style="font-size: 2rem;"></i>
                                    <h6 class="mt-2">{% translate "Créer un retour de stock" %}</h6>
                                    <p class="text-muted small">{% translate "Enregistrer la réintégration de matériel en stock préremplie depuis ce bon" %}</p>
                                    <a href="{% url 'stock:new_stock_entry' %}?preparation_order={{ preparation_order.pk }}" class="btn btn-info text-white">
                                        <i class="bi bi-arrow-return-left me-1"></i> {% translate "Créer un retour" %}
                                    </a>
                                </div>
                            </div>
                        </div>
                        {% endif %}

                        <div class="col-md-4 mb-3">
                            <div class="card h-100 border-warning">
                                <div class="card-body text-center">
                                    <i class="bi bi-arrow-counterclockwise text-warning" style="font-size: 2rem;"></i>
                                    <h6 class="mt-2">{% translate "Réouvrir le bon de préparation" %}</h6>
                                    <p class="text-muted small">{% translate "Permet de modifier les articles du bon (repasse au statut À traiter)" %}</p>
                                    <form method="post" action="{% url 'stock:preparation_order_reopen' preparation_order.pk %}"
                                          onsubmit="return confirm('{% translate "Êtes-vous sûr de vouloir réouvrir ce bon de préparation ?" %}');">
                                        {% csrf_token %}
                                        <button type="submit" class="btn btn-warning">
                                            <i class="bi bi-arrow-counterclockwise"></i> {% translate "Réouvrir le bon" %}
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>

                        {% if can_cancel %}
                        <div class="col-md-4 mb-3">
                            <div class="card h-100 border-danger">
                                <div class="card-body text-center">
                                    <i class="bi bi-x-circle text-danger" style="font-size: 2rem;"></i>
                                    <h6 class="mt-2">{% translate "Annuler le bon de préparation" %}</h6>
                                    <p class="text-muted small">{% translate "Annuler le bon et remettre tous les produits sortis en stock" %}</p>
                                    <form method="post" action="{% url 'stock:preparation_order_cancel' preparation_order.pk %}" 
                                          onsubmit="return confirm('{% translate "Êtes-vous sûr de vouloir annuler ce bon déjà traité ? Les produits sortis seront automatiquement réintégrés en stock." %}');">
                                        {% csrf_token %}
                                        <button type="submit" class="btn btn-danger">
                                            <i class="bi bi-trash"></i> {% translate "Annuler" %}
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                        {% endif %}
                        {% endif %}
                    </div>
                </div>
            </div>
            {% endif %}

            <!-- Bouton retour -->
            <div class="mt-4 mb-3">
                <a href="{% url 'stock:stock_movements' %}" class="btn btn-secondary">
                    <i class="bi bi-arrow-left"></i> {% translate "Retour à la liste" %}
                </a>
            </div>
        </div>
    </div>
</div>

{% if can_cancel %}
<!-- Modale de modification du bon de préparation -->
<div class="modal fade" id="editPreparationOrderModal" tabindex="-1" aria-labelledby="editPreparationOrderModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl" style="height:90vh;max-height:90vh;">
        <div class="modal-content h-100 d-flex flex-column">
            <div class="modal-header bg-warning flex-shrink-0">
                <h5 class="modal-title" id="editPreparationOrderModalLabel">
                    <i class="bi bi-pencil-square me-2"></i>{% translate "Modifier le bon de préparation" %} #{{ preparation_order.order_number }}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body flex-grow-1 d-flex flex-column" style="overflow:visible;min-height:0;">
                <!-- Ajouter un produit -->
                <h6 class="mb-3 flex-shrink-0"><i class="bi bi-plus-circle me-1"></i>{% translate "Ajouter un produit" %}</h6>
                <div class="row g-2 align-items-end flex-shrink-0">
                    <div class="col-md-6">
                        <label class="form-label">{% translate "Produit" %}</label>
                        <input type="text" id="addProductSearch" class="form-control" placeholder="{% translate 'Rechercher un produit...' %}" autocomplete="off">
                        <input type="hidden" id="addProductId">
                        <div id="addProductDropdown" class="list-group shadow" style="position:fixed;z-index:9999;max-height:220px;overflow-y:auto;display:none;width:auto;"></div>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">{% translate "Quantité" %}</label>
                        <input type="number" id="addProductQty" class="form-control" min="1" value="1">
                    </div>
                    <div class="col-md-3">
                        <button type="button" class="btn btn-primary w-100" id="addProductBtn">
                            <i class="bi bi-plus-circle"></i> {% translate "Ajouter" %}
                        </button>
                    </div>
                </div>
                <div id="editErrorAlert" class="alert alert-danger mt-3 mb-0 flex-shrink-0" style="display:none;"></div>

                <hr class="flex-shrink-0">

                <!-- Articles existants -->
                <h6 class="mb-3 flex-shrink-0"><i class="bi bi-list-ul me-1"></i>{% translate "Articles" %}</h6>
                <div class="table-responsive flex-grow-1" style="overflow-y:auto;min-height:0;">
                    <table class="table table-sm table-hover">
                        <thead>
                            <tr>
                                <th>{% translate "Produit" %}</th>
                                <th>{% translate "Code" %}</th>
                                <th class="text-center" style="width:160px">{% translate "Quantité" %}</th>
                                <th style="width:60px"></th>
                            </tr>
                        </thead>
                        <tbody id="editItemsBody">
                            <tr id="editLoadingRow">
                                <td colspan="4" class="text-center text-muted py-3">
                                    <div class="spinner-border spinner-border-sm me-2"></div>{% translate "Chargement..." %}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <hr class="flex-shrink-0 mt-3">

                <!-- Autres produits -->
                <h6 class="mb-2 flex-shrink-0"><i class="bi bi-pencil-square me-1"></i>{% translate "Autres produits" %}</h6>
                <!-- Formulaire d'ajout -->
                <div class="row g-2 align-items-end flex-shrink-0 mb-2">
                    <div class="col-md-4">
                        <label class="form-label small">{% translate "Description" %}</label>
                        <input type="text" id="addOtherDesc" class="form-control form-control-sm" placeholder="{% translate 'Description...' %}">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label small">{% translate "Quantité" %}</label>
                        <input type="number" id="addOtherQty" class="form-control form-control-sm" min="1" value="1">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label small">{% translate "Catégorie" %}</label>
                        <select id="addOtherCategory" class="form-select form-select-sm">
                            <option value="">— {% translate "Choisir..." %} —</option>
                            {% for cat in categories %}
                            <option value="{{ cat.id }}" data-code="{{ cat.code }}">{{ cat.name_fr }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-3" id="addOtherSignWrapper" style="display:none;">
                        <label class="form-label small">{% translate "Type (Sign.)" %}</label>
                        <input type="text" id="addOtherSignType" class="form-control form-control-sm" placeholder="{% translate 'Code ou nom...' %}" autocomplete="off">
                        <input type="hidden" id="addOtherSignTypeId">
                        <div id="addOtherSignDropdown" class="list-group shadow" style="position:fixed;z-index:9999;max-height:200px;overflow-y:auto;display:none;width:auto;"></div>
                    </div>
                </div>
                <div class="mb-2 flex-shrink-0">
                    <button type="button" class="btn btn-sm btn-warning" id="addOtherBtn">
                        <i class="bi bi-plus-circle"></i> {% translate "Ajouter la ligne" %}
                    </button>
                </div>
                <!-- Table autres items -->
                <div class="table-responsive flex-shrink-0" style="max-height:220px;overflow-y:auto;">
                    <table class="table table-sm table-hover mb-0">
                        <thead class="table-warning">
                            <tr>
                                <th>{% translate "Description" %}</th>
                                <th>{% translate "Catégorie" %}</th>
                                <th>{% translate "Type (Sign.)" %}</th>
                                <th class="text-center" style="width:120px">{% translate "Quantité" %}</th>
                                <th style="width:50px"></th>
                            </tr>
                        </thead>
                        <tbody id="editOtherItemsBody">
                            <tr id="editOtherLoadingRow">
                                <td colspan="5" class="text-center text-muted py-2">
                                    <div class="spinner-border spinner-border-sm me-2"></div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <hr class="flex-shrink-0 mt-3">

                <!-- Documents -->
                <h6 class="mb-2 flex-shrink-0"><i class="bi bi-paperclip me-1"></i>{% translate "Documents" %}</h6>
                <div id="editDocsList" class="flex-shrink-0" style="max-height:150px;overflow-y:auto;">
                    {% for doc in preparation_order.documents.all %}
                    {% private_file_url doc 'file' as edit_modal_doc_url %}
                    <div class="d-flex align-items-center gap-2 border rounded p-1 mb-1" id="edit-doc-{{ doc.pk }}">
                        <i class="bi {% if doc.is_image %}bi-file-earmark-image text-info{% else %}bi-file-earmark text-secondary{% endif %} fs-5 flex-shrink-0"></i>
                        <a href="{{ edit_modal_doc_url }}" target="_blank" class="small flex-grow-1 text-truncate">{{ doc.filename }}</a>
                        <small class="text-muted text-nowrap">{{ doc.uploaded_at|date:"d/m/Y H:i" }}</small>
                        <button type="button" class="btn btn-sm btn-outline-danger py-0 px-1 btn-delete-doc flex-shrink-0"
                                data-doc-id="{{ doc.pk }}"
                                data-delete-url="{% url 'stock:preparation_order_document_delete' doc.pk %}"
                                title="{% translate 'Supprimer' %}">
                            <i class="bi bi-trash"></i>
                        </button>
                    </div>
                    {% empty %}
                    <p class="text-muted fst-italic small mb-1" id="editDocsEmpty">{% translate "Aucun document joint." %}</p>
                    {% endfor %}
                </div>
                <div class="d-flex align-items-center gap-2 flex-shrink-0 mt-1">
                    <label for="editDocInput" class="btn btn-sm btn-outline-secondary mb-0">
                        <i class="bi bi-paperclip me-1"></i>{% translate "Ajouter un document..." %}
                    </label>
                    <input type="file" id="editDocInput" multiple class="d-none"
                           accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.odt,.ods,.txt">
                    <span id="editDocUploading" style="display:none;" class="text-muted small">
                        <div class="spinner-border spinner-border-sm me-1"></div>{% translate "Envoi en cours..." %}
                    </span>
                </div>
                <div id="editDocError" class="alert alert-danger mt-2 py-1 flex-shrink-0" style="display:none;"></div>
            </div>
            <div class="modal-footer flex-shrink-0">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="closeEditModal">{% translate "Fermer" %}</button>
            </div>
        </div>
    </div>
</div>

<script>
(function () {
    const EDIT_URL = '{% url "stock:preparation_order_edit" preparation_order.pk %}';
    const SEARCH_URL = '{% url "stock:products_autocomplete_api" %}';
    const SIGN_TYPES_URL = '{% url "stock:sign_panel_types_api" %}';
    const DOC_UPLOAD_URL = '{% url "stock:preparation_order_document_upload" preparation_order.pk %}';
    const CSRF = '{{ csrf_token }}';

    // IDs des catégories signalisation (transmis depuis le contexte Django)
    const signalisationIds = new Set([{% for cat in categories %}{% if 'signalisation' in cat.code|lower or 'signalisation' in cat.name_fr|lower %}{{ cat.id }},{% endif %}{% endfor %}]);

    let hasChanges = false;

    function showError(msg) {
        const el = document.getElementById('editErrorAlert');
        el.textContent = msg;
        el.style.display = 'block';
    }
    function hideError() {
        document.getElementById('editErrorAlert').style.display = 'none';
    }
    function markChanged() {
        hasChanges = true;
    }

    function buildRow(item) {
        const locked = item.has_production_order && !item.can_edit;
        const lockBadge = item.has_production_order
            ? (locked
                ? `<span class="badge bg-danger ms-1" title="Bon de confection ${item.production_order_code} non modifiable (${item.production_order_status})"><i class="bi bi-lock-fill"></i> ${item.production_order_code}</span>`
                : `<span class="badge bg-warning text-dark ms-1" title="Bon de confection ${item.production_order_code} (à traiter)"><i class="bi bi-tools"></i> ${item.production_order_code}</span>`)
            : '';
        return `<tr id="edit-row-${item.id}" class="${locked ? 'table-secondary' : ''}">
            <td>${item.product_name} ${lockBadge}</td>
            <td><code>${item.product_code}</code></td>
            <td class="text-center">
                <input type="number" class="form-control form-control-sm qty-input mx-auto text-center" data-item-id="${item.id}" value="${item.quantity}" min="1" style="max-width:90px" ${locked ? 'disabled' : ''}>
            </td>
            <td>
                <button class="btn btn-sm btn-outline-danger btn-remove" data-item-id="${item.id}" title="${locked ? 'Suppression impossible : bon de confection en cours' : 'Supprimer'}" ${locked ? 'disabled' : ''}>
                    <i class="bi bi-trash"></i>
                </button>
            </td>
        </tr>`;
    }

    function buildOtherRow(oi) {
        const locked = oi.has_production_order && !oi.can_edit;
        const lockBadge = oi.has_production_order
            ? (locked
                ? `<span class="badge bg-danger ms-1" title="Bon de confection ${oi.production_order_code} non modifiable (${oi.production_order_status})"><i class="bi bi-lock-fill"></i> ${oi.production_order_code}</span>`
                : `<span class="badge bg-warning text-dark ms-1" title="Bon de confection ${oi.production_order_code} (à traiter)"><i class="bi bi-tools"></i> ${oi.production_order_code}</span>`)
            : '';
        const catLabel = oi.category_name ? `<span class="badge bg-secondary">${oi.category_name}</span>` : '<span class="text-muted">—</span>';
        const signLabel = oi.sign_panel_type_text || '—';
        return `<tr id="edit-other-row-${oi.id}" class="${locked ? 'table-secondary' : ''}">
            <td>${oi.description} ${lockBadge}</td>
            <td>${catLabel}</td>
            <td><small class="text-muted">${signLabel}</small></td>
            <td class="text-center">
                <input type="number" class="form-control form-control-sm other-qty-input mx-auto text-center" data-other-id="${oi.id}" value="${oi.quantity}" min="1" style="max-width:80px" ${locked ? 'disabled' : ''}>
            </td>
            <td>
                <button class="btn btn-sm btn-outline-danger btn-remove-other" data-other-id="${oi.id}" title="${locked ? 'Suppression impossible : bon de confection en cours' : 'Supprimer'}" ${locked ? 'disabled' : ''}>
                    <i class="bi bi-trash"></i>
                </button>
            </td>
        </tr>`;
    }

    function loadItems() {
        document.getElementById('editItemsBody').innerHTML =
            '<tr id="editLoadingRow"><td colspan="4" class="text-center text-muted py-3"><div class="spinner-border spinner-border-sm me-2"></div></td></tr>';
        document.getElementById('editOtherItemsBody').innerHTML =
            '<tr id="editOtherLoadingRow"><td colspan="5" class="text-center text-muted py-2"><div class="spinner-border spinner-border-sm me-2"></div></td></tr>';
        fetch(EDIT_URL, {headers: {'X-Requested-With': 'XMLHttpRequest'}})
            .then(r => r.json())
            .then(data => {
                const tbody = document.getElementById('editItemsBody');
                tbody.innerHTML = data.items.length
                    ? data.items.map(buildRow).join('')
                    : '<tr><td colspan="4" class="text-center text-muted py-3">{% translate "Aucun article" %}</td></tr>';
                const otherBody = document.getElementById('editOtherItemsBody');
                otherBody.innerHTML = (data.other_items && data.other_items.length)
                    ? data.other_items.map(buildOtherRow).join('')
                    : '<tr><td colspan="5" class="text-center text-muted py-2">{% translate "Aucune ligne" %}</td></tr>';
            });
    }

    function apiPost(payload) {
        return fetch(EDIT_URL, {
            method: 'POST',
            headers: {'Content-Type': 'application/json', 'X-CSRFToken': CSRF},
            body: JSON.stringify(payload),
        }).then(r => r.json());
    }

    document.getElementById('editPreparationOrderModal')?.addEventListener('show.bs.modal', function () {
        hideError();
        hasChanges = false;
        loadItems();
    });

    function reloadIfNeeded() {
        if (hasChanges) {
            const url = new URL(window.location.href);
            url.searchParams.delete('open_edit');
            window.location.href = url.pathname + (url.search ? url.search : '');
        }
    }

    document.getElementById('closeEditModal')?.addEventListener('click', reloadIfNeeded);
    document.getElementById('editPreparationOrderModal')?.addEventListener('hidden.bs.modal', reloadIfNeeded);

    // ---- Auto-sauvegarde des quantités au changement (Ajax) ----
    document.getElementById('editItemsBody')?.addEventListener('change', function (e) {
        const input = e.target.closest('.qty-input');
        if (!input) return;
        hideError();
        const itemId = input.dataset.itemId;
        const qty = parseInt(input.value);
        if (!qty || qty < 1) { showError('{% translate "La quantité doit être supérieure à 0." %}'); return; }
        apiPost({action: 'update_quantity', item_id: itemId, quantity: qty}).then(data => {
            if (data.error) { showError(data.error); return; }
            input.value = data.quantity;
            input.classList.add('is-valid');
            setTimeout(() => input.classList.remove('is-valid'), 1200);
            markChanged();
        });
    });

    document.getElementById('editOtherItemsBody')?.addEventListener('change', function (e) {
        const input = e.target.closest('.other-qty-input');
        if (!input) return;
        hideError();
        const otherId = input.dataset.otherId;
        const qty = parseInt(input.value);
        if (!qty || qty < 1) { showError('{% translate "La quantité doit être supérieure à 0." %}'); return; }
        apiPost({action: 'update_other_item', item_id: otherId, quantity: qty}).then(data => {
            if (data.error) { showError(data.error); return; }
            input.value = data.quantity;
            input.classList.add('is-valid');
            setTimeout(() => input.classList.remove('is-valid'), 1200);
            markChanged();
        });
    });

    // ---- Suppressions d'articles dans la modale ----
    document.getElementById('editItemsBody')?.addEventListener('click', function (e) {
        hideError();
        const removeBtn = e.target.closest('.btn-remove');
        if (removeBtn) {
            const itemId = removeBtn.dataset.itemId;
            if (!confirm('{% translate "Supprimer cet article du bon ?" %}')) return;
            apiPost({action: 'remove_item', item_id: itemId}).then(data => {
                if (data.error) { showError(data.error); return; }
                document.getElementById(`edit-row-${itemId}`)?.remove();
                markChanged();
                const tbody = document.getElementById('editItemsBody');
                if (!tbody.querySelector('tr[id^="edit-row-"]')) {
                    tbody.innerHTML = '<tr><td colspan="4" class="text-center text-muted py-3">{% translate "Aucun article" %}</td></tr>';
                }
            });
        }
    });

    document.getElementById('editOtherItemsBody')?.addEventListener('click', function (e) {
        hideError();
        const removeBtn = e.target.closest('.btn-remove-other');
        if (removeBtn) {
            const otherId = removeBtn.dataset.otherId;
            if (!confirm('{% translate "Supprimer cette ligne ?" %}')) return;
            apiPost({action: 'remove_other_item', item_id: otherId}).then(data => {
                if (data.error) { showError(data.error); return; }
                document.getElementById(`edit-other-row-${otherId}`)?.remove();
                markChanged();
                const otherBody = document.getElementById('editOtherItemsBody');
                if (!otherBody.querySelector('tr[id^="edit-other-row-"]')) {
                    otherBody.innerHTML = '<tr><td colspan="5" class="text-center text-muted py-2">{% translate "Aucune ligne" %}</td></tr>';
                }
            });
        }
    });

    // ---- Bascule interactive l'état "Préparé" depuis le tableau principal ----
    document.addEventListener('change', function (e) {
        const toggle = e.target.closest('.prepare-toggle-input');
        if (!toggle) return;
        const itemId = toggle.dataset.itemId;
        const isOther = toggle.dataset.isOther === 'true';
        const url = isOther 
            ? `/stock/preparation-order-other-items/${itemId}/toggle-prepared/`
            : `/stock/preparation-order-items/${itemId}/toggle-prepared/`;

        fetch(url, {
            method: 'POST',
            headers: {'X-CSRFToken': CSRF, 'X-Requested-With': 'XMLHttpRequest'},
        })
        .then(r => r.json())
        .then(data => {
            if (!data.success) {
                toggle.checked = !toggle.checked;
                alert(data.error || 'Erreur lors de la mise à jour');
            }
        })
        .catch(() => {
            toggle.checked = !toggle.checked;
        });
    });

    // ---- Ouverture automatique de la modale post-réouverture ----
    document.addEventListener('DOMContentLoaded', function () {
        const url = new URL(window.location.href);
        if (url.searchParams.get('open_edit') === '1') {
            const editModal = document.getElementById('editPreparationOrderModal');
            if (editModal) {
                const modalInstance = bootstrap.Modal.getOrCreateInstance(editModal);
                modalInstance.show();
            }
            // Nettoyer l'URL du navigateur sans recharger la page
            url.searchParams.delete('open_edit');
            window.history.replaceState({}, '', url.pathname + (url.search ? url.search : ''));
        }
    });


    // ---- Catégorie signalisation toggle ----
    document.getElementById('addOtherCategory')?.addEventListener('change', function () {
        const catId = parseInt(this.value) || 0;
        const wrapper = document.getElementById('addOtherSignWrapper');
        if (signalisationIds.has(catId)) {
            wrapper.style.display = '';
        } else {
            wrapper.style.display = 'none';
            document.getElementById('addOtherSignType').value = '';
            document.getElementById('addOtherSignTypeId').value = '';
            document.getElementById('addOtherSignDropdown').style.display = 'none';
        }
    });

    // ---- Autocomplete sign types ----
    let signTypeTimeout;
    const signTypeInput = document.getElementById('addOtherSignType');
    const signDropdown = document.getElementById('addOtherSignDropdown');

    function positionSignDropdown() {
        const rect = signTypeInput.getBoundingClientRect();
        signDropdown.style.left = rect.left + 'px';
        signDropdown.style.top = (rect.bottom + 2) + 'px';
        signDropdown.style.width = rect.width + 'px';
    }

    signTypeInput?.addEventListener('input', function () {
        clearTimeout(signTypeTimeout);
        document.getElementById('addOtherSignTypeId').value = '';
        const q = this.value.trim();
        if (q.length < 1) { signDropdown.style.display = 'none'; return; }
        signTypeTimeout = setTimeout(() => {
            fetch(`${SIGN_TYPES_URL}?q=${encodeURIComponent(q)}`)
                .then(r => r.json())
                .then(data => {
                    const results = data.results || [];
                    signDropdown.innerHTML = results.map(pt =>
                        `<a href="#" class="list-group-item list-group-item-action py-1" data-id="${pt.id}" data-text="${pt.text}">
                            <strong>${pt.code}</strong> — <small class="text-muted">${pt.name}</small>
                        </a>`
                    ).join('') || '<div class="list-group-item text-muted small">{% translate "Aucun type trouvé" %}</div>';
                    if (results.length) {
                        positionSignDropdown();
                        signDropdown.style.display = 'block';
                    } else {
                        signDropdown.style.display = 'none';
                    }
                });
        }, 250);
    });

    signDropdown?.addEventListener('click', function (e) {
        const item = e.target.closest('a[data-id]');
        if (!item) return;
        e.preventDefault();
        document.getElementById('addOtherSignTypeId').value = item.dataset.id;
        signTypeInput.value = item.dataset.text;
        signDropdown.style.display = 'none';
    });

    document.addEventListener('click', function (e) {
        if (!e.target.closest('#addOtherSignType') && !e.target.closest('#addOtherSignDropdown')) {
            if (signDropdown) signDropdown.style.display = 'none';
        }
    });

    // ---- Add other item ----
    document.getElementById('addOtherBtn')?.addEventListener('click', function () {
        hideError();
        const desc = (document.getElementById('addOtherDesc').value || '').trim();
        const qty = parseInt(document.getElementById('addOtherQty').value) || 1;
        const categoryId = document.getElementById('addOtherCategory').value || null;
        const signTypeId = document.getElementById('addOtherSignTypeId').value || null;
        if (!desc) { showError('{% translate "Veuillez saisir une description." %}'); return; }
        apiPost({
            action: 'add_other_item',
            description: desc,
            quantity: qty,
            category_id: categoryId,
            sign_panel_type_id: signTypeId,
        }).then(data => {
            if (data.error) { showError(data.error); return; }
            const otherBody = document.getElementById('editOtherItemsBody');
            if (otherBody.querySelector('td[colspan]')) otherBody.innerHTML = '';
            otherBody.insertAdjacentHTML('beforeend', buildOtherRow(data));
            document.getElementById('addOtherDesc').value = '';
            document.getElementById('addOtherQty').value = 1;
            document.getElementById('addOtherCategory').value = '';
            document.getElementById('addOtherSignWrapper').style.display = 'none';
            document.getElementById('addOtherSignType').value = '';
            document.getElementById('addOtherSignTypeId').value = '';
            markChanged();
        });
    });

    // ---- Autocomplete produit ----
    const searchInput = document.getElementById('addProductSearch');
    const dropdown = document.getElementById('addProductDropdown');
    const productIdInput = document.getElementById('addProductId');
    let searchTimeout;

    function positionDropdown() {
        const rect = searchInput.getBoundingClientRect();
        dropdown.style.left = rect.left + 'px';
        dropdown.style.top = (rect.bottom + 2) + 'px';
        dropdown.style.width = rect.width + 'px';
    }

    searchInput?.addEventListener('input', function () {
        clearTimeout(searchTimeout);
        productIdInput.value = '';
        const q = this.value.trim();
        if (q.length < 2) { dropdown.style.display = 'none'; return; }
        searchTimeout = setTimeout(() => {
            fetch(`${SEARCH_URL}?q=${encodeURIComponent(q)}`)
                .then(r => r.json())
                .then(data => {
                    const results = data.results || data;
                    dropdown.innerHTML = results.map(p =>
                        `<a href="#" class="list-group-item list-group-item-action py-1" data-id="${p.id}" data-name="${p.text}" data-code="${p.code || ''}">
                            <strong>${p.text}</strong>${p.code ? ' <small class="text-muted">('+p.code+')</small>' : ''}
                        </a>`
                    ).join('');
                    if (results.length) {
                        positionDropdown();
                        dropdown.style.display = 'block';
                    } else {
                        dropdown.style.display = 'none';
                    }
                });
        }, 250);
    });

    dropdown?.addEventListener('click', function (e) {
        const item = e.target.closest('a[data-id]');
        if (!item) return;
        e.preventDefault();
        productIdInput.value = item.dataset.id;
        searchInput.value = item.dataset.name + (item.dataset.code ? ' (' + item.dataset.code + ')' : '');
        dropdown.style.display = 'none';
    });

    document.addEventListener('click', function (e) {
        if (!e.target.closest('#addProductSearch') && !e.target.closest('#addProductDropdown')) {
            if (dropdown) dropdown.style.display = 'none';
        }
    });

    document.getElementById('addProductBtn')?.addEventListener('click', function () {
        hideError();
        const productId = productIdInput.value;
        const qty = parseInt(document.getElementById('addProductQty').value) || 1;
        if (!productId) { showError('{% translate "Veuillez sélectionner un produit dans la liste." %}'); return; }
        apiPost({action: 'add_item', product_id: productId, quantity: qty}).then(data => {
            if (data.error) { showError(data.error); return; }
            const tbody = document.getElementById('editItemsBody');
            if (tbody.querySelector('td[colspan]')) tbody.innerHTML = '';
            const existing = document.getElementById(`edit-row-${data.id}`);
            if (existing) {
                existing.querySelector('.qty-input').value = data.quantity;
            } else {
                tbody.insertAdjacentHTML('beforeend', buildRow(data));
            }
            searchInput.value = '';
            productIdInput.value = '';
            document.getElementById('addProductQty').value = 1;
            markChanged();
        });
    });
    // ---- Documents ----
    function buildDocRow(doc) {
        const iconClass = doc.is_image ? 'bi-file-earmark-image text-info' : 'bi-file-earmark text-secondary';
        return `<div class="d-flex align-items-center gap-2 border rounded p-1 mb-1" id="edit-doc-${doc.id}">
            <i class="bi ${iconClass} fs-5 flex-shrink-0"></i>
            <a href="${doc.url}" target="_blank" class="small flex-grow-1 text-truncate">${doc.filename}</a>
            <small class="text-muted text-nowrap">${doc.uploaded_at}</small>
            <button type="button" class="btn btn-sm btn-outline-danger py-0 px-1 btn-delete-doc flex-shrink-0"
                    data-doc-id="${doc.id}"
                    data-delete-url="${doc.delete_url}"
                    title="{% translate 'Supprimer' %}">
                <i class="bi bi-trash"></i>
            </button>
        </div>`;
    }

    document.getElementById('editDocInput')?.addEventListener('change', function () {
        const files = this.files;
        if (!files || !files.length) return;
        const uploading = document.getElementById('editDocUploading');
        const errorEl = document.getElementById('editDocError');
        errorEl.style.display = 'none';
        uploading.style.display = '';
        this.disabled = true;
        const fd = new FormData();
        Array.from(files).forEach(f => fd.append('documents', f));
        fetch(DOC_UPLOAD_URL, {
            method: 'POST',
            headers: {'X-CSRFToken': CSRF},
            body: fd,
        })
        .then(r => r.json())
        .then(data => {
            uploading.style.display = 'none';
            if (data.error) {
                errorEl.textContent = data.error;
                errorEl.style.display = '';
                return;
            }
            const list = document.getElementById('editDocsList');
            const empty = document.getElementById('editDocsEmpty');
            if (empty) empty.remove();
            data.created.forEach(doc => {
                list.insertAdjacentHTML('beforeend', buildDocRow(doc));
            });
            markChanged();
        })
        .catch(() => {
            uploading.style.display = 'none';
            {% translate "Erreur lors de l\'envoi." as error_msg %}
            errorEl.textContent = '{{ error_msg|escapejs }}';
            errorEl.style.display = '';
        })
        .finally(() => { this.disabled = false; this.value = ''; });
    });

    document.getElementById('editDocsList')?.addEventListener('click', function (e) {
        const btn = e.target.closest('.btn-delete-doc');
        if (!btn) return;
        if (!confirm('{% translate "Supprimer ce document ?" %}')) return;
        const docId = btn.dataset.docId;
        const deleteUrl = btn.dataset.deleteUrl;
        fetch(deleteUrl, {
            method: 'POST',
            headers: {'X-CSRFToken': CSRF},
        })
        .then(r => r.json())
        .then(data => {
            if (data.error) {
                const errorEl = document.getElementById('editDocError');
                errorEl.textContent = data.error;
                errorEl.style.display = '';
                return;
            }
            const row = document.getElementById(`edit-doc-${docId}`);
            if (row) row.remove();
            const list = document.getElementById('editDocsList');
            if (!list.querySelector('[id^="edit-doc-"]')) {
                list.insertAdjacentHTML('afterbegin',
                    '<p class="text-muted fst-italic small mb-1" id="editDocsEmpty">{% translate "Aucun document joint." %}</p>');
            }
            markChanged();
        });
    });

})();
</script>
{% endif %}

<!-- ═══════════════════════════════════════════════════════════ -->
<!-- Documents attachés                                         -->
<!-- ═══════════════════════════════════════════════════════════ -->
{% with docs=preparation_order.documents.all %}
<div class="card mb-3 shadow-sm" id="documents-card">
    <div class="card-header d-flex align-items-center gap-2">
        <i class="bi bi-paperclip"></i>
        <strong>{% translate "Documents joints" %}</strong>
        <span class="badge bg-secondary ms-auto">{{ docs|length }}</span>
    </div>
    <div class="card-body">
        {% if docs %}
        <div class="row g-2 mb-3">
            {% for doc in docs %}
            {% private_file_url doc 'file' as doc_url %}
            <div class="col-md-4 col-sm-6">
                <div class="border rounded p-2 d-flex align-items-center gap-2">
                    {% if doc.is_image %}
                    <img src="{{ doc_url }}" alt="{{ doc.name }}" class="rounded" style="max-height:60px;max-width:60px;object-fit:cover;">
                    {% else %}
                    <i class="bi bi-file-earmark fs-3 text-secondary"></i>
                    {% endif %}
                    <div class="flex-grow-1 overflow-hidden">
                        <a href="{{ doc_url }}" target="_blank" class="text-truncate d-block small fw-semibold">{{ doc.filename }}</a>
                        <small class="text-muted">{{ doc.uploaded_at|date:"d/m/Y H:i" }}</small>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <p class="text-muted fst-italic mb-3">{% translate "Aucun document joint." %}</p>
        {% endif %}

        <!-- Formulaire d'ajout de documents -->
        <form method="post" enctype="multipart/form-data" action="{% url 'stock:preparation_order_detail' preparation_order.pk %}">
            {% csrf_token %}
            <div id="det-drop-zone" class="drop-zone">
                <i class="bi bi-cloud-upload fs-3 text-muted"></i>
                <p class="mt-2 mb-1 fw-semibold">{% translate "Glissez-déposez vos fichiers ici" %}</p>
                <p class="text-muted small mb-1">{% translate "ou" %}</p>
                <label for="det_documents_input" class="btn btn-sm btn-outline-secondary">
                    <i class="bi bi-folder2-open me-1"></i>{% translate "Parcourir..." %}
                </label>
                <input type="file" id="det_documents_input" name="documents" multiple class="d-none"
                       accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.odt,.ods,.txt">
            </div>
            <div id="det-file-list" class="mt-2 mb-2"></div>
            <button type="submit" class="btn btn-sm btn-primary mt-2" id="det-upload-btn" style="display:none;">
                <i class="bi bi-cloud-upload me-1"></i>{% translate "Envoyer les documents" %}
            </button>
        </form>
    </div>
</div>
{% endwith %}

<script>
(function() {
    const dropZone  = document.getElementById('det-drop-zone');
    const fileInput = document.getElementById('det_documents_input');
    const fileList  = document.getElementById('det-file-list');
    const uploadBtn = document.getElementById('det-upload-btn');
    if (!dropZone) return;

    let selectedFiles = new DataTransfer();

    function renderFileList() {
        fileList.innerHTML = '';
        Array.from(selectedFiles.files).forEach(function(file, idx) {
            const item = document.createElement('div');
            item.className = 'd-flex align-items-center gap-2 bg-white border rounded p-2 mt-1';
            item.innerHTML = `
                <i class="bi bi-file-earmark text-secondary"></i>
                <span class="flex-grow-1 text-truncate small">${file.name}</span>
                <small class="text-muted">${(file.size/1024).toFixed(0)} Ko</small>
                <button type="button" class="btn btn-sm btn-outline-danger py-0 px-1 remove-file-btn" data-idx="${idx}">
                    <i class="bi bi-x"></i>
                </button>`;
            fileList.appendChild(item);
        });
        fileInput.files = selectedFiles.files;
        uploadBtn.style.display = selectedFiles.files.length > 0 ? '' : 'none';
    }

    function addFiles(files) {
        Array.from(files).forEach(function(f) { selectedFiles.items.add(f); });
        renderFileList();
    }

    dropZone.addEventListener('dragover', function(e) { e.preventDefault(); dropZone.classList.add('dragover'); });
    dropZone.addEventListener('dragleave', function() { dropZone.classList.remove('dragover'); });
    dropZone.addEventListener('drop', function(e) {
        e.preventDefault();
        dropZone.classList.remove('dragover');
        addFiles(e.dataTransfer.files);
    });

    fileInput.addEventListener('change', function() {
        const files = Array.from(this.files);  // copier avant le reset
        this.value = '';  // reset pour permettre de re-sélectionner le même fichier
        files.forEach(function(f) { selectedFiles.items.add(f); });
        renderFileList();
    });

    fileList.addEventListener('click', function(e) {
        const btn = e.target.closest('.remove-file-btn');
        if (!btn) return;
        const idx = parseInt(btn.dataset.idx);
        const dt = new DataTransfer();
        Array.from(selectedFiles.files).forEach(function(f, i) { if (i !== idx) dt.items.add(f); });
        selectedFiles = dt;
        renderFileList();
    });
})();
</script>
<style>
    .drop-zone { border: 2px dashed #6c757d; border-radius: 0.5rem; padding: 1.5rem; text-align: center; cursor: pointer; transition: background .2s, border-color .2s; }
    .drop-zone.dragover, .drop-zone:hover { border-color: #0d6efd; background: #e8f0fe; }
</style>

<!-- Modale de modification des informations de prêt -->
<div class="modal fade" id="editLoanInfoModal" tabindex="-1" aria-labelledby="editLoanInfoModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="editLoanInfoModalLabel">
                    <i class="bi bi-calendar-event me-2"></i>{% translate "Modifier les informations de prêt" %}
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="post" action="{% url 'stock:preparation_order_update_loan_info' preparation_order.pk %}">
                {% csrf_token %}
                <div class="modal-body">
                    <div class="mb-3">
                        <div class="form-check form-switch">
                            <input type="checkbox" name="is_loan" id="modal_is_loan" class="form-check-input" {% if preparation_order.is_loan %}checked{% endif %}>
                            <label class="form-check-label fw-bold text-primary" for="modal_is_loan">
                                {% translate "Prêt de matériel" %}
                            </label>
                        </div>
                    </div>
                    <div class="mb-3" id="modal_estimated_return_date_wrapper" style="display: none;">
                        <label class="form-label fw-semibold" for="modal_estimated_return_date">
                            {% translate "Date de retour attendue" %}
                        </label>
                        <input type="date" name="estimated_return_date" id="modal_estimated_return_date" class="form-control" value="{{ preparation_order.estimated_return_date|date:'Y-m-d' }}">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% translate "Annuler" %}</button>
                    <button type="submit" class="btn btn-primary">{% translate "Enregistrer" %}</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modale de confirmation du traitement -->
<div class="modal fade" id="confirmProcessModal" tabindex="-1" aria-labelledby="confirmProcessModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title" id="confirmProcessModalLabel">
                    <i class="bi bi-check-circle me-2"></i>{% translate "Confirmation du traitement" %} — #{{ preparation_order.order_number }}
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="post" action="{% url 'stock:preparation_order_process' preparation_order.pk %}">
                {% csrf_token %}
                <input type="hidden" name="mark_as_processed" value="1">
                <div class="modal-body">
                    <p class="fw-bold text-success mb-3">
                        <i class="bi bi-info-circle me-1"></i>
                        {% translate "Êtes-vous sûr de vouloir signaler ce bon de préparation comme TRAITÉ ?" %}
                    </p>

                    <div class="card mb-3 border shadow-sm">
                        <div class="card-header bg-light py-2">
                            <strong><i class="bi bi-box-arrow-right me-1"></i>{% translate "Récapitulatif des mouvements de stock qui seront générés" %} :</strong>
                        </div>
                        <div class="card-body p-0">
                            <table class="table table-sm table-hover align-middle mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th>{% translate "Produit" %}</th>
                                        <th class="text-center">{% translate "Mouvement de stock" %}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for item_data in items_with_stock %}
                                    <tr>
                                        <td><strong>{{ item_data.item.product.name }}</strong> (<code>{{ item_data.item.product.code }}</code>)</td>
                                        <td class="text-center">
                                            {% if has_executed_outputs %}
                                                {% if item_data.delta > 0 %}
                                                    <span class="badge bg-warning text-dark">+{{ item_data.delta }} {{ item_data.item.product.unit }} {% translate "sorti complémentaire" %}</span>
                                                {% elif item_data.delta < 0 %}
                                                    <span class="badge bg-info text-dark">{{ item_data.delta }} {{ item_data.item.product.unit }} {% translate "restitué au stock" %}</span>
                                                {% else %}
                                                    <span class="badge bg-secondary">{% translate "Inchangé (déjà sorti)" %}</span>
                                                {% endif %}
                                            {% else %}
                                                <span class="badge bg-success">-{{ item_data.item.quantity }} {{ item_data.item.product.unit }} {% translate "sorti du stock" %}</span>
                                            {% endif %}
                                        </td>
                                    </tr>
                                    {% endfor %}
                                    {% for del in deleted_items_to_return %}
                                    <tr>
                                        <td><strong>{{ del.product.name }}</strong> (<code>{{ del.product.code }}</code>) <span class="badge bg-danger">{% translate "Supprimé" %}</span></td>
                                        <td class="text-center">
                                            <span class="badge bg-info text-dark">+{{ del.executed_qty }} {{ del.product.unit }} {% translate "restitué au stock" %}</span>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <p class="text-muted small mb-0">
                        <i class="bi bi-shield-check me-1"></i>
                        {% translate "Les mouvements de stock seront automatiquement enregistrés et le bon passera au statut Traité." %}
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% translate "Annuler" %}</button>
                    <button type="submit" class="btn btn-success">
                        <i class="bi bi-check-lg me-1"></i> {% translate "Confirmer et marquer comme traité" %}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const modalIsLoan = document.getElementById('modal_is_loan');
    const modalReturnDateWrapper = document.getElementById('modal_estimated_return_date_wrapper');
    const modalReturnDateInput = document.getElementById('modal_estimated_return_date');

    if (modalIsLoan) {
        function toggleModalReturnDate() {
            if (modalIsLoan.checked) {
                modalReturnDateWrapper.style.display = 'block';
                if (modalReturnDateInput) modalReturnDateInput.required = true;
            } else {
                modalReturnDateWrapper.style.display = 'none';
                if (modalReturnDateInput) {
                    modalReturnDateInput.required = false;
                    modalReturnDateInput.value = '';
                }
            }
        }
        modalIsLoan.addEventListener('change', toggleModalReturnDate);
        toggleModalReturnDate();
    }
});
</script>

<!-- ===== Widget Discussion flottant ===== -->
<style>
#discussion-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1060;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #0d6efd;
    color: #fff;
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
}
#discussion-fab:hover { background: #0b5ed7; transform: scale(1.08); }
#discussion-fab .fab-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    background: #dc3545;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 10px;
    padding: 2px 6px;
    line-height: 1;
    border: 2px solid #fff;
}
#discussion-panel {
    position: fixed;
    bottom: 90px;
    right: 24px;
    z-index: 1060;
    width: 390px;
    max-width: calc(100vw - 32px);
    max-height: 580px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(20px) scale(0.95);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), opacity 0.2s ease;
}
#discussion-panel.open {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}
#discussion-panel-header {
    background: #0d6efd;
    color: #fff;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
#discussion-thread {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#discussion-form-area {
    padding: 10px 14px 14px;
    border-top: 1px solid #dee2e6;
    background: #f8f9fa;
}
</style>

<button id="discussion-fab" onclick="toggleDiscussionPanel()" title="{% translate 'Discussion' %}" aria-label="{% translate 'Discussion' %}">
    <i class="bi bi-chat-dots-fill"></i>
    {% if discussion_messages %}
    <span class="fab-badge" id="discussion-fab-badge">{{ discussion_messages|length }}</span>
    {% endif %}
</button>

<div id="discussion-panel" role="dialog" aria-label="{% translate 'Discussion' %}">
    <!-- En-tête -->
    <div id="discussion-panel-header">
        <span class="fw-semibold d-flex align-items-center gap-2 small">
            <i class="bi bi-chat-dots-fill"></i> {% translate "Discussion liée à ce bon" %}
        </span>
        <button type="button" class="btn-close btn-close-white btn-sm" onclick="toggleDiscussionPanel()" aria-label="{% translate 'Fermer' %}"></button>
    </div>

    <!-- Fil de messages -->
    <div id="discussion-thread">
        {% if discussion_messages %}
        {% for msg in discussion_messages %}
        <div class="d-flex {% if msg.author == request.user %}justify-content-end{% endif %}">
            {% if msg.author != request.user %}
            <div class="rounded-circle bg-secondary text-white d-flex align-items-center justify-content-center me-2 flex-shrink-0"
                 style="width:30px;height:30px;font-size:.75rem;">
                {{ msg.author|short_name|first|upper|default:msg.author.username|first|upper }}
            </div>
            {% endif %}
            <div style="max-width:78%;">
                {% if msg.author != request.user %}
                <div class="small text-muted mb-1">
                    <strong>{{ msg.author|short_name }}</strong>
                    &middot; {{ msg.created_at|date:"d/m H:i" }}
                </div>
                {% else %}
                <div class="small text-muted mb-1 text-end">{{ msg.created_at|date:"d/m H:i" }}</div>
                {% endif %}
                <div class="p-2 rounded {% if msg.author != request.user %}bg-light{% endif %}"
                     style="{% if msg.author == request.user %}background:#e7ebff;{% endif %}border-radius:12px;word-break:break-word;display:inline-block;text-align:left;font-size:.85rem;">
                    {{ msg.content|render_mentions }}
                    {% if msg.attachments.exists %}
                    <div class="mt-1 d-flex flex-wrap gap-1">
                        {% for att in msg.attachments.all %}
                        {% if att.is_image %}
                        <a href="{{ att.file.url }}" target="_blank">
                            <img src="{{ att.file.url }}" style="width:48px;height:48px;object-fit:cover;border-radius:6px;" alt="{{ att.name }}">
                        </a>
                        {% else %}
                        <a href="{{ att.file.url }}" target="_blank" class="btn btn-sm btn-outline-secondary py-0 px-1" style="font-size:.75rem;">
                            <i class="bi bi-paperclip"></i>{{ att.name|truncatechars:18 }}
                        </a>
                        {% endif %}
                        {% endfor %}
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endfor %}
        {% else %}
        <p class="text-muted small text-center py-3 mb-0">
            <i class="bi bi-chat-square me-1"></i>{% translate "Aucun message." %}
        </p>
        {% endif %}
    </div>

    <!-- Formulaire -->
    {% if can_post_discussion_message %}
    <div id="discussion-form-area">
        <form method="post"
              action="{% url 'stock:preparation_order_add_message' preparation_order.id %}"
              enctype="multipart/form-data"
              id="prep-msg-form">
            {% csrf_token %}
            <input type="hidden" name="content" id="prep-msg-content-real">
            <div class="d-flex gap-2 align-items-end">
                <div class="flex-grow-1 position-relative">
                    <textarea id="prep-msg-content" class="form-control form-control-sm"
                              rows="2" style="resize:none;font-size:.85rem;"
                              placeholder="{% translate 'Écrire… (@ pour mentionner)' %}"></textarea>
                    <div id="prep-mention-dropdown"
                         class="list-group shadow"
                         style="display:none;position:absolute;bottom:100%;left:0;right:0;z-index:1070;max-height:180px;overflow-y:auto;margin-bottom:2px;"></div>
                </div>
                <div class="d-flex flex-column gap-1">
                    <button type="submit" class="btn btn-primary btn-sm" title="{% translate 'Envoyer' %}" style="padding:5px 8px;">
                        <i class="bi bi-send-fill"></i>
                    </button>
                    <label class="btn btn-outline-secondary btn-sm mb-0" title="{% translate 'Joindre un fichier' %}" style="padding:5px 8px;">
                        <i class="bi bi-paperclip"></i>
                        <input type="file" name="attachments" multiple class="d-none" id="prep-msg-file-input">
                    </label>
                </div>
            </div>
            <div id="prep-msg-file-preview" class="d-flex flex-wrap gap-2 mt-2"></div>
        </form>
    </div>
    {% endif %}
</div>
<!-- ===== fin widget Discussion ===== -->

<script>
// Discussion – widget flottant + @mention autocomplete + file preview
function toggleDiscussionPanel() {
    const panel = document.getElementById('discussion-panel');
    if (!panel) return;
    const opening = !panel.classList.contains('open');
    panel.classList.toggle('open', opening);
    if (opening) {
        const thread = document.getElementById('discussion-thread');
        if (thread) setTimeout(() => { thread.scrollTop = thread.scrollHeight; }, 50);
        const badge = document.getElementById('discussion-fab-badge');
        if (badge) badge.style.display = 'none';
    }
}

document.addEventListener('click', function (e) {
    const panel = document.getElementById('discussion-panel');
    const fab   = document.getElementById('discussion-fab');
    if (!panel || !panel.classList.contains('open')) return;
    if (panel.contains(e.target) || (fab && fab.contains(e.target))) return;
    panel.classList.remove('open');
});

if (window.location.hash === '#discussion') {
    toggleDiscussionPanel();
}

document.addEventListener('DOMContentLoaded', function () {
    const fileInput   = document.getElementById('prep-msg-file-input');
    const filePreview = document.getElementById('prep-msg-file-preview');

    if (fileInput && filePreview) {
        fileInput.addEventListener('change', renderPreview);

        function renderPreview() {
            filePreview.innerHTML = '';
            const files = fileInput.files;
            if (!files || files.length === 0) {
                filePreview.style.display = 'none';
                return;
            }
            filePreview.style.display = 'flex';

            Array.from(files).forEach((file, idx) => {
                const isImage = file.type.startsWith('image/');
                const wrapper = document.createElement('div');
                wrapper.className = 'position-relative';
                wrapper.style.cssText = 'display:inline-block;';

                if (isImage) {
                    const img = document.createElement('img');
                    img.style.cssText = 'width:64px;height:64px;object-fit:cover;border-radius:6px;border:1px solid #dee2e6;';
                    img.alt = file.name;
                    const reader = new FileReader();
                    reader.onload = e => { img.src = e.target.result; };
                    reader.readAsDataURL(file);
                    wrapper.appendChild(img);
                } else {
                    const chip = document.createElement('div');
                    chip.className = 'd-flex align-items-center gap-1 bg-light border rounded px-2 py-1 small';
                    chip.style.cssText = 'max-width:140px;';
                    chip.innerHTML = `<i class="bi bi-paperclip text-secondary"></i>
                        <span class="text-truncate" title="${file.name}">${file.name}</span>`;
                    wrapper.appendChild(chip);
                }

                const btn = document.createElement('button');
                btn.type = 'button';
                btn.className = 'btn btn-danger btn-sm position-absolute top-0 end-0 p-0 d-flex align-items-center justify-content-center';
                btn.style.cssText = 'width:18px;height:18px;font-size:10px;border-radius:50%;transform:translate(40%,-40%);line-height:1;';
                btn.innerHTML = '&times;';
                btn.title = '{% translate "Retirer" %}';
                btn.addEventListener('click', () => removeFile(idx));
                wrapper.appendChild(btn);
                filePreview.appendChild(wrapper);
            });
        }

        function removeFile(indexToRemove) {
            const dt = new DataTransfer();
            Array.from(fileInput.files).forEach((f, i) => {
                if (i !== indexToRemove) dt.items.add(f);
            });
            fileInput.files = dt.files;
            renderPreview();
        }

        const msgForm = document.getElementById('prep-msg-form');
        if (msgForm) {
            msgForm.addEventListener('submit', () => {
                filePreview.innerHTML = '';
                filePreview.style.display = 'none';
            });
        }
    }
});

// @mention autocomplete
(function () {
    const textarea   = document.getElementById('prep-msg-content');
    const realInput  = document.getElementById('prep-msg-content-real');
    const dropdown   = document.getElementById('prep-mention-dropdown');
    const form       = document.getElementById('prep-msg-form');
    if (!textarea || !dropdown || !realInput || !form) return;

    let mentions = [];
    let mentionStart = -1;
    let mentionQuery = null;
    let searchTimer  = null;
    let currentResults = [];
    let selectedIndex = -1;

    function escHtml(str) {
        return (str || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
    }

    function syncReal() {
        const dv = textarea.value;
        if (!mentions.length) { realInput.value = dv; return; }
        let real = '';
        let pos  = 0;
        const sorted = [...mentions].sort((a, b) => a.start - b.start);
        for (const m of sorted) {
            if (m.start > pos) real += dv.slice(pos, m.start);
            real += m.marker;
            pos = m.end;
        }
        real += dv.slice(pos);
        realInput.value = real;
    }

    function shiftMentions(fromPos, delta) {
        for (const m of mentions) {
            if (m.start >= fromPos) { m.start += delta; m.end += delta; }
        }
    }

    function removeMentionsIn(start, end) {
        mentions = mentions.filter(m => m.end <= start || m.start >= end);
    }

    function highlightIndex(idx) {
        const items = dropdown.querySelectorAll('.list-group-item');
        if (!items || !items.length) return;
        items.forEach((btn, i) => {
            if (i === idx) {
                btn.classList.add('active');
                btn.scrollIntoView({ block: 'nearest' });
            } else {
                btn.classList.remove('active');
            }
        });
    }

    function showDropdown(results) {
        dropdown.innerHTML = '';
        currentResults = results || [];
        selectedIndex = -1;
        if (!results || !results.length) { hideDropdown(); return; }
        results.forEach((r, idx) => {
            const btn = document.createElement('button');
            btn.type = 'button';
            btn.className = 'list-group-item list-group-item-action d-flex align-items-center gap-2 py-2 small';
            const icon     = r.type === 'user' ? 'bi-person-fill' : 'bi-people-fill';
            const badgeCls = r.type === 'user'
                ? 'badge bg-primary-subtle text-primary-emphasis border border-primary-subtle'
                : 'badge bg-info-subtle text-info-emphasis border border-info-subtle';
            btn.innerHTML = `<span class="${badgeCls}"><i class="bi ${icon}"></i></span><span>${escHtml(r.display)}</span>`;
            btn.addEventListener('mousedown', function (e) {
                e.preventDefault();
                insertMention(r);
            });
            btn.addEventListener('mouseenter', function () {
                selectedIndex = idx;
                highlightIndex(selectedIndex);
            });
            dropdown.appendChild(btn);
        });

        selectedIndex = 0;
        highlightIndex(0);
        dropdown.style.display = 'block';
    }

    function hideDropdown() {
        dropdown.style.display = 'none';
        dropdown.innerHTML = '';
        mentionStart = -1;
        mentionQuery = null;
        currentResults = [];
        selectedIndex = -1;
    }

    function insertMention(r) {
        const shortTag = `@[${r.display}]`;
        const marker   = r.type === 'user'
            ? `@[${r.display}](u:${r.id})`
            : `@[${r.display}](t:${r.id})`;
        const dv     = textarea.value;
        const qLen   = mentionQuery ? mentionQuery.length : 0;
        const before = dv.slice(0, mentionStart);
        const after  = dv.slice(mentionStart + 1 + qLen);
        textarea.value = before + shortTag + ' ' + after;
        removeMentionsIn(mentionStart, mentionStart + 1 + qLen);
        shiftMentions(mentionStart + 1 + qLen, shortTag.length + 1 - (1 + qLen));
        mentions.push({ start: mentionStart, end: mentionStart + shortTag.length, marker });
        syncReal();
        const pos = mentionStart + shortTag.length + 1;
        textarea.setSelectionRange(pos, pos);
        textarea.focus();
        hideDropdown();
    }

    textarea.addEventListener('keydown', function (e) {
        if (dropdown.style.display === 'block' && currentResults.length > 0) {
            if (e.key === 'ArrowDown') {
                e.preventDefault();
                selectedIndex = (selectedIndex + 1) % currentResults.length;
                highlightIndex(selectedIndex);
                return;
            }
            if (e.key === 'ArrowUp') {
                e.preventDefault();
                selectedIndex = (selectedIndex - 1 + currentResults.length) % currentResults.length;
                highlightIndex(selectedIndex);
                return;
            }
            if (e.key === 'Enter' || e.key === 'Tab') {
                if (selectedIndex >= 0 && selectedIndex < currentResults.length) {
                    e.preventDefault();
                    insertMention(currentResults[selectedIndex]);
                }
                return;
            }
            if (e.key === 'Escape') {
                e.preventDefault();
                hideDropdown();
                return;
            }
        }
    });

    function searchMentions(q) {
        clearTimeout(searchTimer);
        searchTimer = setTimeout(() => {
            fetch(`{% url 'notifications:api_mention_search' %}?q=${encodeURIComponent(q)}`, {
                headers: { 'X-Requested-With': 'XMLHttpRequest' }
            })
            .then(resp => resp.json())
            .then(data => showDropdown(data.results))
            .catch(() => hideDropdown());
        }, 180);
    }

    textarea.addEventListener('input', function () {
        syncReal();
        const cur    = this.selectionStart;
        const before = this.value.slice(0, cur);
        const match  = before.match(/@([^\s@]*)$/);
        if (!match) { hideDropdown(); return; }
        mentionStart = match.index;
        mentionQuery = match[1];
        searchMentions(mentionQuery);
    });

    form.addEventListener('submit', function (e) {
        syncReal();
        if (!realInput.value.trim()) {
            e.preventDefault();
            textarea.setCustomValidity('{% translate "Le message ne peut pas être vide." %}');
            textarea.reportValidity();
        } else {
            textarea.setCustomValidity('');
        }
    });
})();
</script>
{% endblock content %}