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

{% 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 preparation_order.status == 'to_process' %}
                        <span class="badge bg-warning text-dark fs-5">
                            <i class="bi bi-hourglass-split"></i> {{ preparation_order.get_status_display }}
                        </span>
                    {% elif preparation_order.status == 'pending' %}
                        <span class="badge bg-info fs-5">
                            <i class="bi bi-clock"></i> {{ preparation_order.get_status_display }}
                        </span>
                    {% elif preparation_order.status == 'processed' %}
                        <span class="badge bg-success fs-5">
                            <i class="bi bi-check-circle"></i> {{ preparation_order.get_status_display }}
                        </span>
                    {% elif preparation_order.status == 'cancelled' %}
                        <span class="badge bg-danger fs-5">
                            <i class="bi bi-x-circle"></i> {{ preparation_order.get_status_display }}
                        </span>
                    {% endif %}

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

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

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

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

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

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

            <!-- Liste des produits -->
            <div class="card mb-3 shadow-sm">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">
                        <i class="bi bi-box-seam"></i> {% translate "Produits demandés" %}
                    </h5>
                    <span class="badge bg-secondary">
                        {{ items_with_stock|length }} {% translate "article(s)" %}
                    </span>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <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 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>
                                </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">{{ 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 preparation_order.status == 'to_process' or preparation_order.status == 'pending' %}
                                    <td class="text-center">
                                        <span class="badge bg-info">
                                            {{ item_data.reserved_stock }}
                                        </span>
                                    </td>
                                    <td class="text-center">
                                        <span class="badge {% if item_data.is_sufficient %}bg-success{% else %}bg-warning text-dark{% endif %}">
                                            {{ item_data.available_stock }}
                                        </span>
                                    </td>
                                    <td>
                                        {% if item_data.locations %}
                                            <small>
                                                {% for stock in item_data.locations %}
                                                    <div class="mb-1">
                                                        <i class="bi bi-geo-alt"></i> 
                                                        {{ stock.location.warehouse.name }} - {{ stock.location.name }}
                                                    </div>
                                                {% endfor %}
                                            </small>
                                        {% else %}
                                            <span class="text-muted">{% translate "Aucun stock" %}</span>
                                        {% endif %}
                                    </td>
                                    {% endif %}
                                    <td>
                                        {% if item_data.production_order %}
                                            <a href="{% url 'stock:production_order_detail' item_data.production_order.pk %}"
                                               class="btn btn-sm {% if item_data.production_order.status == 'completed' %}btn-outline-success{% elif item_data.production_order.status == 'in_production' %}btn-outline-primary{% elif item_data.production_order.status == 'cancelled' %}btn-outline-danger{% elif item_data.production_order.status == 'draft' %}btn-outline-secondary{% else %}btn-outline-warning{% endif %}"
                                               title="{{ item_data.production_order.get_status_display }}">
                                                <i class="bi {% if item_data.production_order.status == 'completed' %}bi-check-circle{% elif item_data.production_order.status == 'in_production' %}bi-gear{% elif item_data.production_order.status == 'cancelled' %}bi-x-circle{% else %}bi-eye{% endif %}"></i> {{ item_data.production_order.code }}
                                            </a>
                                        {% elif can_manage and preparation_order.status != 'processed' and preparation_order.status != 'cancelled' %}
                                            <a href="{% url 'stock:production_order_create' %}?preparation_order={{ preparation_order.pk }}&prep_item={{ item_data.item.pk }}" class="btn btn-sm btn-outline-success" title="{% translate 'Créer un bon de confection' %}">
                                                <i class="bi bi-tools"></i> {% translate "Créer" %}
                                            </a>
                                        {% else %}
                                            <span class="text-muted">—</span>
                                        {% endif %}
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </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 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 %}
                                </tr>
                            </thead>
                            <tbody>
                                {% for oi_data in other_items %}
                                <tr>
                                    <td>{{ oi_data.item.description }}</td>
                                    <td>
                                        {% if oi_data.item.category %}
                                            <span class="badge bg-secondary">{{ oi_data.item.category.name_fr }}</span>
                                        {% else %}
                                            <span class="text-muted">—</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if oi_data.item.sign_panel_type %}
                                            <code>{{ oi_data.item.sign_panel_type.code }}</code>
                                            <small class="text-muted ms-1">{{ oi_data.item.sign_panel_type.name_fr }}</small>
                                        {% else %}
                                            <span class="text-muted">—</span>
                                        {% endif %}
                                    </td>
                                    <td class="text-center">
                                        <span class="badge bg-warning text-dark">{{ oi_data.item.quantity }}</span>
                                    </td>
                                    {% if can_manage %}
                                    <td class="text-end">
                                        {% if oi_data.production_order %}
                                            <a href="{% url 'stock:production_order_detail' oi_data.production_order.pk %}"
                                               class="btn btn-sm {% if oi_data.production_order.status == 'completed' %}btn-outline-success{% elif oi_data.production_order.status == 'in_production' %}btn-outline-primary{% elif oi_data.production_order.status == 'cancelled' %}btn-outline-danger{% elif oi_data.production_order.status == 'draft' %}btn-outline-secondary{% else %}btn-outline-warning{% endif %}"
                                               title="{{ oi_data.production_order.get_status_display }}">
                                                <i class="bi {% if oi_data.production_order.status == 'completed' %}bi-check-circle{% elif oi_data.production_order.status == 'in_production' %}bi-gear{% elif oi_data.production_order.status == 'cancelled' %}bi-x-circle{% else %}bi-eye{% endif %}"></i> {{ oi_data.production_order.code }}
                                            </a>
                                        {% else %}
                                            <a href="{% url 'stock:production_order_create' %}?other_item={{ oi_data.item.pk }}&preparation_order={{ preparation_order.pk }}"
                                               class="btn btn-sm btn-outline-success"
                                               title="{% translate 'Créer un bon de confection pour ce produit' %}">
                                                <i class="bi bi-tools"></i> {% translate "Bon de confection" %}
                                            </a>
                                        {% endif %}
                                    </td>
                                    {% endif %}
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            {% endif %}

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

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

                        <div class="col-md-3 mb-3">
                            <div class="card h-100 border-danger">
                                <div class="card-body text-center">
                                    <i class="bi bi-x-circle text-danger" style="font-size: 2rem;"></i>
                                    <h6 class="mt-2">{% translate "Annuler le bon de préparation" %}</h6>
                                    <p class="text-muted small">{% translate "Libérer les quantités réservées" %}</p>
                                    <form method="post" action="{% url 'stock:preparation_order_cancel' preparation_order.pk %}" 
                                          onsubmit="return confirm('{% translate "Êtes-vous sûr de vouloir annuler ce bon ?" %}');">
                                        {% csrf_token %}
                                        <button type="submit" class="btn btn-danger">
                                            <i class="bi bi-trash"></i> {% translate "Annuler" %}
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                        {% endif %}
                        {% endif %}
                    </div>
                </div>
            </div>
            {% endif %}

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

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

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

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

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

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

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

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

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

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

    let hasChanges = false;

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

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

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

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

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

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

    document.getElementById('closeEditModal')?.addEventListener('click', function () {
        if (hasChanges) location.reload();
    });
    document.getElementById('editPreparationOrderModal')?.addEventListener('hidden.bs.modal', function () {
        if (hasChanges) location.reload();
    });

    // ---- Regular items ----
    document.getElementById('editItemsBody')?.addEventListener('click', function (e) {
        hideError();
        const saveBtn = e.target.closest('.btn-save-qty');
        const removeBtn = e.target.closest('.btn-remove');

        if (saveBtn) {
            const itemId = saveBtn.dataset.itemId;
            const qty = parseInt(document.querySelector(`.qty-input[data-item-id="${itemId}"]`).value);
            if (!qty || qty < 1) { showError('{% translate "La quantité doit être supérieure à 0." %}'); return; }
            apiPost({action: 'update_quantity', item_id: itemId, quantity: qty}).then(data => {
                if (data.error) { showError(data.error); return; }
                document.querySelector(`.qty-input[data-item-id="${itemId}"]`).value = data.quantity;
                markChanged();
            });
        }

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

    // ---- Other items ----
    document.getElementById('editOtherItemsBody')?.addEventListener('click', function (e) {
        hideError();
        const saveBtn = e.target.closest('.btn-save-other-qty');
        const removeBtn = e.target.closest('.btn-remove-other');

        if (saveBtn) {
            const otherId = saveBtn.dataset.otherId;
            const qty = parseInt(document.querySelector(`.other-qty-input[data-other-id="${otherId}"]`).value);
            if (!qty || qty < 1) { showError('{% translate "La quantité doit être supérieure à 0." %}'); return; }
            apiPost({action: 'update_other_item', item_id: otherId, quantity: qty}).then(data => {
                if (data.error) { showError(data.error); return; }
                document.querySelector(`.other-qty-input[data-other-id="${otherId}"]`).value = data.quantity;
                markChanged();
            });
        }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    let selectedFiles = new DataTransfer();

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

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

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

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

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

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

<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>
{% endblock content %}