{% 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-secondary 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 %}

            {% if preparation_order.intervention and preparation_order.intervention.status == 'canceled' and preparation_order.status != 'cancelled' %}
            <div class="alert alert-danger border-danger shadow-sm mb-3" role="alert">
                <div class="d-flex align-items-center">
                    <i class="bi bi-exclamation-octagon-fill text-danger me-3 fs-1"></i>
                    <div class="flex-grow-1">
                        <h5 class="alert-heading mb-1 fw-bold">{% translate "Attention : Intervention liée annulée !" %}</h5>
                        <p class="mb-2">{% translate "L'intervention associée à ce bon a été annulée. Si le matériel a déjà été préparé ou sorti du stock, veuillez effectuer une remise en stock du matériel ou annuler ce bon pour réintégrer automatiquement les articles." %}</p>
                        {% if can_cancel %}
                        <form method="post" action="{% url 'stock:preparation_order_cancel' preparation_order.pk %}" class="d-inline"
                              onsubmit="return confirm('{% translate "Êtes-vous sûr de vouloir annuler ce bon ? Les produits sortis seront automatiquement réintégrés en stock." %}');">
                            {% csrf_token %}
                            <button type="submit" class="btn btn-danger btn-sm">
                                <i class="bi bi-arrow-return-left me-1"></i> {% translate "Annuler le bon et réintégrer en stock" %}
                            </button>
                        </form>
                        {% endif %}
                    </div>
                </div>
            </div>
            {% endif %}

            {% if preparation_order.status == 'processed' and has_pending_stock_adjustments %}
            <div class="alert alert-warning border-warning shadow-sm mb-3" role="alert">
                <div class="d-flex align-items-center">
                    <i class="bi bi-exclamation-triangle-fill text-warning me-3 fs-1"></i>
                    <div class="flex-grow-1">
                        <h5 class="alert-heading mb-1 fw-bold">{% translate "Ajustements de stock en attente !" %}</h5>
                        <p class="mb-2">{% translate "Ce bon de préparation a été modifié après son traitement initial. Les quantités demandées ont changé et nécessitent une régularisation du stock (sortie de stock additionnelle ou réintégration)." %}</p>
                        {% if can_manage %}
                        <a href="{% url 'stock:preparation_order_process' preparation_order.pk %}" class="btn btn-warning btn-sm">
                            <i class="bi bi-check-circle me-1"></i> {% translate "Régulariser les stocks maintenant" %}
                        </a>
                        {% endif %}
                    </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>
                            {% if preparation_order.intervention.status == 'canceled' %}
                                <span class="badge bg-danger ms-1">{% translate "Intervention annulée" %}</span>
                            {% endif %}
                        </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>
                    <div class="d-flex align-items-center gap-2">
                        <span class="badge bg-secondary">
                            {{ items_with_stock|length }} {% translate "article(s)" %}
                        </span>
                        {% if can_edit %}
                        <button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#editPreparationOrderModal">
                            <i class="bi bi-pencil me-1"></i> {% translate "Modifier les articles" %}
                        </button>
                        {% endif %}
                    </div>
                </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.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>
                                                <br><small class="text-muted">{% translate "Sorti net" %}: {{ item_data.executed_qty }}</small>
                                            {% 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>
                                            {% 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 }}
                                                {% if item_data.production_order.destination == 'external' %}
                                                    <span class="badge text-white ms-1" style="background-color: #6610f2; font-size: 0.65rem;" title="{% translate 'Destination externe' %}">
                                                        <i class="bi bi-truck"></i>
                                                    </span>
                                                {% endif %}
                                            </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 }}
                                                {% if oi_data.production_order.destination == 'external' %}
                                                    <span class="badge text-white ms-1" style="background-color: #6610f2; font-size: 0.65rem;" title="{% translate 'Destination externe' %}">
                                                        <i class="bi bi-truck"></i>
                                                    </span>
                                                {% endif %}
                                            </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 %}

            <!-- Historique des modifications -->
            <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-clock-history me-1"></i> {% translate "Historique des modifications" %}
                    </h5>
                    <span class="badge bg-secondary">
                        {{ history_entries|length }} {% translate "événement(s)" %}
                    </span>
                </div>
                <div class="card-body p-0">
                    {% if history_entries %}
                    <div class="table-responsive">
                        <table class="table table-hover table-striped align-middle mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th style="width: 170px;">{% translate "Date / Heure" %}</th>
                                    <th style="width: 160px;">{% translate "Utilisateur" %}</th>
                                    <th style="width: 160px;">{% translate "Action" %}</th>
                                    <th>{% translate "Détails" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for entry in history_entries %}
                                <tr>
                                    <td class="text-nowrap small text-muted">
                                        <i class="bi bi-calendar3 me-1"></i>{{ entry.created_at|date:"d/m/Y H:i:s" }}
                                    </td>
                                    <td>
                                        <span class="fw-semibold">
                                            <i class="bi bi-person me-1 text-secondary"></i>{{ entry.author_short_name }}
                                        </span>
                                    </td>
                                    <td>
                                        <span class="badge {{ entry.badge_class }}">
                                            <i class="bi {{ entry.icon_class }} me-1"></i>{{ entry.get_action_display }}
                                        </span>
                                    </td>
                                    <td>
                                        {{ entry.description }}
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                    <div class="p-3 text-muted text-center">
                        <i class="bi bi-info-circle me-1"></i>{% translate "Aucun historique disponible pour ce bon." %}
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- 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_edit %}
                        <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>
                        {% endif %}

                        {% if can_cancel %}
                        <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_edit %}
                        <div class="col-md-4 mb-3">
                            <div class="card h-100 border-primary">
                                <div class="card-body text-center">
                                    <i class="bi bi-pencil-square text-primary" style="font-size: 2rem;"></i>
                                    <h6 class="mt-2">{% translate "Modifier le bon de préparation" %}</h6>
                                    <p class="text-muted small">{% translate "Modifier les quantités ou les articles du bon sans changer son statut" %}</p>
                                    <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#editPreparationOrderModal">
                                        <i class="bi bi-pencil me-1"></i> {% translate "Modifier le bon" %}
                                    </button>
                                </div>
                            </div>
                        </div>
                        {% endif %}

                        {% if has_pending_stock_adjustments and can_manage %}
                        <div class="col-md-4 mb-3">
                            <div class="card h-100 border-warning bg-light">
                                <div class="card-body text-center">
                                    <i class="bi bi-arrow-repeat text-warning" style="font-size: 2rem;"></i>
                                    <h6 class="mt-2">{% translate "Régulariser les stocks" %}</h6>
                                    <p class="text-muted small">{% translate "Des ajustements de stock sont nécessaires suite aux modifications apportées" %}</p>
                                    <a href="{% url 'stock:preparation_order_process' preparation_order.pk %}" class="btn btn-warning">
                                        <i class="bi bi-check-circle me-1"></i> {% translate "Régulariser maintenant" %}
                                    </a>
                                </div>
                            </div>
                        </div>
                        {% endif %}

                        {% 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>

{% include "stock/_edit_preparation_order_modal.html" %}

<!-- ═══════════════════════════════════════════════════════════ -->
<!-- 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-fab .fab-flag-badge {
    position: absolute;
    top: -3px;
    left: -3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    border: 2px solid #fff;
    color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
}
#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 %}
    <span class="fab-flag-badge {% if not discussion or not discussion.flag %}d-none{% endif %}" id="discussion-fab-flag-badge"
          style="background-color: {{ discussion.flag_info.color|default:'#dc3545' }};"
          title="{{ discussion.flag_info.label }}">
        <i class="bi {{ discussion.flag_info.icon|default:'bi-flag-fill' }}"></i>
    </span>
</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" %}
        </span>
        <div class="d-flex align-items-center gap-2">
            {% if discussion %}
            <div class="dropdown">
                <button class="btn btn-sm btn-outline-light py-0 px-2 rounded-pill d-flex align-items-center gap-1 border-0 bg-white bg-opacity-20 dropdown-toggle"
                        type="button" id="poDiscussionFlagBtn" data-bs-toggle="dropdown" aria-expanded="false" style="font-size: 0.75rem;">
                    <span id="po-flag-icon-display" class="d-inline-flex align-items-center">
                        {% if discussion.flag == 'red' %}
                            <i class="bi bi-flag-fill text-danger"></i>
                        {% elif discussion.flag == 'orange' %}
                            <i class="bi bi-flag-fill" style="color: #fd7e14;"></i>
                        {% elif discussion.flag == 'green' %}
                            <i class="bi bi-flag-fill text-success"></i>
                        {% else %}
                            <i class="bi bi-flag text-white-50"></i>
                        {% endif %}
                    </span>
                    <span id="po-flag-label-display">
                        {{ discussion.flag_info.label|default:_("Statut") }}
                    </span>
                </button>
                <ul class="dropdown-menu dropdown-menu-end shadow-sm" aria-labelledby="poDiscussionFlagBtn" style="font-size: 0.8rem; z-index: 1070;">
                    <li><h6 class="dropdown-header small text-muted py-1">{% translate "Statut de suivi" %}</h6></li>
                    <li><button type="button" class="dropdown-item d-flex align-items-center gap-2 po-flag-opt" data-flag="red"><i class="bi bi-flag-fill text-danger"></i> {% translate "Important / À traiter" %}</button></li>
                    <li><button type="button" class="dropdown-item d-flex align-items-center gap-2 po-flag-opt" data-flag="orange"><i class="bi bi-flag-fill" style="color: #fd7e14;"></i> {% translate "En cours" %}</button></li>
                    <li><button type="button" class="dropdown-item d-flex align-items-center gap-2 po-flag-opt" data-flag="green"><i class="bi bi-flag-fill text-success"></i> {% translate "Traité / Fait" %}</button></li>
                    <li><hr class="dropdown-divider my-1"></li>
                    <li><button type="button" class="dropdown-item d-flex align-items-center gap-2 po-flag-opt text-muted" data-flag=""><i class="bi bi-flag"></i> {% translate "Aucun drapeau" %}</button></li>
                </ul>
            </div>
            {% endif %}
            <button type="button" class="btn-close btn-close-white btn-sm" onclick="toggleDiscussionPanel()" aria-label="{% translate 'Fermer' %}"></button>
        </div>
    </div>

    <!-- Fil de messages -->
    <div id="discussion-thread">
        {% if discussion_messages %}
        {% for msg in discussion_messages %}
        {% if msg.is_system %}
        <div class="d-flex justify-content-center my-1">
            <span class="badge bg-light text-secondary border px-2.5 py-1 rounded-pill d-inline-flex align-items-center" style="font-size: 0.75rem; font-weight: 500;">
                {{ msg.content|safe }}
            </span>
        </div>
        {% else %}
        <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>
        {% endif %}
        {% 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('');
        }
    });
})();

// ---- Changement de drapeau de la discussion (bon de préparation) ----
{% if discussion %}
(function() {
    document.querySelectorAll('.po-flag-opt').forEach(btn => {
        btn.addEventListener('click', function() {
            const flag = this.getAttribute('data-flag');
            const url = "{% url 'notifications:discussion_set_flag' discussion.pk %}";
            const formData = new FormData();
            formData.append('flag', flag);
            formData.append('csrfmiddlewaretoken', '{{ csrf_token }}');

            fetch(url, {
                method: 'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: formData
            })
            .then(res => res.json())
            .then(data => {
                if (data.ok) {
                    const fabFlagBadge = document.getElementById('discussion-fab-flag-badge');
                    const headerIcon = document.getElementById('po-flag-icon-display');
                    const headerLabel = document.getElementById('po-flag-label-display');

                    if (data.flag) {
                        if (fabFlagBadge) {
                            fabFlagBadge.classList.remove('d-none');
                            fabFlagBadge.style.backgroundColor = data.flag_info.color;
                            fabFlagBadge.title = data.flag_info.label;
                            fabFlagBadge.innerHTML = `<i class="bi ${data.flag_info.icon}"></i>`;
                        }
                    } else {
                        if (fabFlagBadge) {
                            fabFlagBadge.classList.add('d-none');
                        }
                    }

                    if (headerIcon) {
                        if (data.flag === 'red') headerIcon.innerHTML = '<i class="bi bi-flag-fill text-danger"></i>';
                        else if (data.flag === 'orange') headerIcon.innerHTML = '<i class="bi bi-flag-fill" style="color: #fd7e14;"></i>';
                        else if (data.flag === 'green') headerIcon.innerHTML = '<i class="bi bi-flag-fill text-success"></i>';
                        else headerIcon.innerHTML = '<i class="bi bi-flag text-white-50"></i>';
                    }
                    if (headerLabel) {
                        headerLabel.textContent = data.flag_info.label || '{% translate "Statut" %}';
                    }

                    if (data.system_message) {
                        const thread = document.getElementById('discussion-thread');
                        if (thread) {
                            const sysDiv = document.createElement('div');
                            sysDiv.className = 'd-flex justify-content-center my-1';
                            sysDiv.innerHTML = `<span class="badge bg-light text-secondary border px-2.5 py-1 rounded-pill" style="font-size: 0.75rem; font-weight: 500;">
                                ${data.system_message.content}
                            </span>`;
                            thread.appendChild(sysDiv);
                            thread.scrollTop = thread.scrollHeight;
                        }
                    }
                }
            })
            .catch(err => console.error('Error changing preparation order discussion flag:', err));
        });
    });
})();
{% endif %}
</script>
{% endblock content %}