{% extends 'mobile/mobile_base.html' %}
{% load static %}
{% load i18n %}
{% load stock_custom_filters %}
{% load short_name %}
{% load mention_tags %}

{% block title %}{% translate "Bon de Préparation" %} #{{ preparation_order.order_number }}{% endblock title %}

{% block upleft %}
<a href="{% url 'mobile:stock_preparation_orders_mobile' %}" class="nav-link" style="color: white;">
    <i class="bi bi-arrow-left fs-3"></i>
</a>
{% endblock upleft %}

{% block extra_head %}
<style>
    .info-card {
        border-radius: 0.75rem;
        border: 1px solid #dee2e6;
        background: #fff;
        padding: 1rem;
        margin-bottom: 0.75rem;
        box-shadow: 0 2px 6px rgba(47,62,139,0.06);
    }
    .info-row {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0.35rem 0;
        border-bottom: 1px solid #f0f0f0;
        font-size: 0.9rem;
    }
    .info-row:last-child { border-bottom: none; }
    .info-label { color: #6c757d; font-size: 0.82rem; flex-shrink: 0; margin-right: 0.5rem; }
    .info-value { text-align: right; word-break: break-word; }
    .product-card {
        border-radius: 0.6rem;
        border: 1px solid #dee2e6;
        background: #fff;
        padding: 0.75rem;
        margin-bottom: 0.5rem;
        box-shadow: 0 1px 4px rgba(47,62,139,0.05);
    }
    .product-card.insufficient {
        border-color: #ffc107;
        background: #fffdf0;
    }
    .product-meta { font-size: 0.8rem; color: #6c757d; }
    .section-title {
        font-size: 0.78rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #6c757d;
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
        gap: 0.35rem;
    }
</style>
{% endblock extra_head %}

{% block content %}

<!-- En-tête statut -->
<div class="d-flex justify-content-between align-items-center mb-3">
    <div>
        <h5 class="mb-0 fw-bold">#{{ preparation_order.order_number }}</h5>
        <small class="text-muted"><i class="bi bi-calendar3 me-1"></i>{{ preparation_order.date|date:"d/m/Y H:i" }}</small>
    </div>
    <div class="d-flex flex-column align-items-end gap-1">
        {% if is_reopened %}
            <span class="badge bg-warning text-dark fs-6">
                <i class="bi bi-arrow-counterclockwise me-1"></i>{% translate "Réouvert" %}
            </span>
        {% else %}
            <span class="badge {{ preparation_order.status_badge_class }} fs-6">
                <i class="bi {{ preparation_order.status_icon }} me-1"></i>{{ preparation_order.get_status_display }}
            </span>
        {% endif %}
        <span class="badge {{ preparation_order.priority_badge_class }}">
            {{ preparation_order.get_priority_display }}
        </span>
    </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-2 fs-3"></i>
        <div>
            <h6 class="alert-heading mb-1 fw-bold"><i class="bi bi-exclamation-circle-fill me-1"></i>{% translate "Bon réouvert pour modification" %}</h6>
            <p class="mb-0 small" style="font-size:0.8rem;">{% translate "Ce bon a fait l'objet d'un traitement initial. Les deltas et restitutions seront traités à la confirmation." %}</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 mb-2">
        <i class="bi bi-exclamation-octagon-fill text-danger me-2 fs-4"></i>
        <h6 class="alert-heading mb-0 fw-bold">{% translate "Intervention liée annulée !" %}</h6>
    </div>
    <p class="mb-2 small" style="font-size:0.82rem;">{% translate "L'intervention associée à ce bon a été annulée. Si le matériel a déjà été préparé ou sorti, veuillez effectuer un retour en stock ou annuler ce bon pour réintégrer les articles." %}</p>
    {% if can_cancel %}
    <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 ? Les produits sortis seront automatiquement réintégrés en stock." %}');">
        {% csrf_token %}
        <button type="submit" class="btn btn-danger btn-sm w-100">
            <i class="bi bi-arrow-return-left me-1"></i> {% translate "Annuler le bon et réintégrer en stock" %}
        </button>
    </form>
    {% endif %}
</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 mb-1">
        <i class="bi bi-exclamation-triangle-fill text-warning me-2 fs-4"></i>
        <h6 class="alert-heading mb-0 fw-bold">{% translate "Ajustements de stock en attente !" %}</h6>
    </div>
    <p class="mb-2 small" style="font-size:0.82rem;">{% translate "Ce bon a été modifié après son traitement. Une régularisation du stock est nécessaire." %}</p>
    {% if can_manage %}
    <a href="{% url 'stock:preparation_order_process' preparation_order.pk %}" class="btn btn-warning btn-sm w-100">
        <i class="bi bi-check-circle me-1"></i> {% translate "Régulariser les stocks maintenant" %}
    </a>
    {% endif %}
</div>
{% endif %}

<!-- Intervention liée -->
{% if preparation_order.intervention %}
<div class="info-card">
    <div class="section-title"><i class="bi bi-wrench"></i>{% translate "Intervention liée" %}</div>
    <div class="info-row">
        <span class="info-label"><i class="bi bi-hash me-1"></i>{% translate "Numéro" %}</span>
        <span class="info-value">
            <a href="{% url 'mobile:intervention_detail_mobile' preparation_order.intervention.id %}">
                {{ preparation_order.intervention.code|default:preparation_order.intervention.id }}
            </a>
            {% if preparation_order.intervention.status == 'canceled' %}
                <span class="badge bg-danger ms-1">{% translate "Annulée" %}</span>
            {% endif %}
        </span>
    </div>
    {% if preparation_order.intervention.title or preparation_order.intervention.description %}
    <div class="info-row">
        <span class="info-label"><i class="bi bi-card-text me-1"></i>{% translate "Titre" %}</span>
        <span class="info-value">{{ preparation_order.intervention.title|default:preparation_order.intervention.description|truncatewords:12 }}</span>
    </div>
    {% endif %}
    {% if preparation_order.intervention.intervention_manager %}
    <div class="info-row">
        <span class="info-label"><i class="bi bi-person me-1"></i>{% translate "Gestionnaire" %}</span>
        <span class="info-value">{{ preparation_order.intervention.intervention_manager|short_name|default:preparation_order.intervention.intervention_manager.username }}</span>
    </div>
    {% endif %}
</div>
{% endif %}

<!-- Suivi du prêt de matériel -->
{% if preparation_order.is_loan %}
<div class="info-card border-primary">
    <div class="section-title text-primary"><i class="bi bi-calendar-event"></i>{% translate "Suivi du prêt de matériel" %}</div>
    <div class="info-row">
        <span class="info-label">{% translate "Statut" %}</span>
        <span class="info-value">
            {% if preparation_order.loan_returned %}
                <span class="badge bg-success">{% translate "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" %}</span>
                {% endif %}
            {% endif %}
        </span>
    </div>
    <div class="info-row">
        <span class="info-label">{% translate "Retour attendu" %}</span>
        <span class="info-value fw-bold {% if not preparation_order.loan_returned and preparation_order.is_overdue %}text-danger{% endif %}">
            {{ preparation_order.estimated_return_date|date:"d/m/Y"|default:"-" }}
        </span>
    </div>
    {% if can_manage %}
    <div class="d-flex gap-2 mt-2 pt-2 border-top">
        <form method="post" action="{% url 'stock:preparation_order_toggle_loan_return' preparation_order.pk %}" class="flex-grow-1">
            {% csrf_token %}
            {% if preparation_order.loan_returned %}
                <input type="hidden" name="returned" value="false">
                <button type="submit" class="btn btn-sm btn-outline-secondary w-100 py-1" style="font-size:0.8rem;">
                    <i class="bi bi-x-circle me-1"></i>{% translate "Non retourné" %}
                </button>
            {% else %}
                <input type="hidden" name="returned" value="true">
                <button type="submit" class="btn btn-sm btn-success w-100 py-1" style="font-size:0.8rem;">
                    <i class="bi bi-check-circle me-1"></i>{% translate "Retourné" %}
                </button>
            {% endif %}
        </form>
        <button type="button" class="btn btn-sm btn-outline-primary flex-grow-1 py-1" style="font-size:0.8rem;" data-bs-toggle="modal" data-bs-target="#editLoanInfoModal">
            <i class="bi bi-pencil me-1"></i>{% translate "Modifier" %}
        </button>
    </div>
    {% endif %}
</div>
{% elif can_manage %}
<div class="info-card bg-light border-dashed">
    <div class="d-flex justify-content-between align-items-center">
        <span class="text-muted small"><i class="bi bi-info-circle me-1"></i>{% translate "Pas un prêt actuellement." %}</span>
        <button type="button" class="btn btn-sm btn-outline-primary py-0 px-2" style="font-size:0.8rem;" data-bs-toggle="modal" data-bs-target="#editLoanInfoModal">
            <i class="bi bi-plus-circle me-1"></i>{% translate "Définir prêt" %}
        </button>
    </div>
</div>
{% endif %}

<!-- Mouvements de stock liés -->
{% if exit_batches or return_batches %}
<div class="info-card">
    <div class="section-title"><i class="bi bi-arrow-left-right"></i>{% translate "Mouvements de stock liés" %}</div>
    {% if exit_batches %}
    <div class="mb-2">
        <span class="info-label"><i class="bi bi-box-arrow-up text-danger me-1"></i>{% translate "Sortie(s)" %}</span>
        <div class="d-flex flex-wrap gap-1 mt-1">
        {% for batch in exit_batches %}
            <a href="{% url 'mobile:stock_movement_batch_detail_mobile' batch.pk %}" class="badge bg-danger text-decoration-none" style="font-size:0.8rem;">
                Lot #{{ batch.pk }} — {{ batch.date|date:"d/m/Y" }}
            </a>
        {% endfor %}
        </div>
    </div>
    {% endif %}
    {% if return_batches %}
    <div>
        <span class="info-label"><i class="bi bi-box-arrow-in-down text-success me-1"></i>{% translate "Retour(s)" %}</span>
        <div class="d-flex flex-wrap gap-1 mt-1">
        {% for batch in return_batches %}
            <a href="{% url 'mobile:stock_movement_batch_detail_mobile' batch.pk %}" class="badge bg-success text-decoration-none" style="font-size:0.8rem;">
                Lot #{{ batch.pk }} — {{ batch.date|date:"d/m/Y" }}
            </a>
        {% endfor %}
        </div>
    </div>
    {% endif %}
</div>
{% endif %}

<!-- QR Code -->
{% if preparation_order.qr_code %}
<div class="info-card text-center">
    <div class="section-title justify-content-center"><i class="bi bi-qr-code"></i>{% translate "QR Code" %}</div>
    <img src="{{ preparation_order.qr_code.url }}" alt="QR Code {{ preparation_order.order_number }}" style="max-width: 150px;">
    <p class="text-muted mt-1 mb-0" style="font-size:0.78rem;">{{ preparation_order.order_number }}</p>
</div>
{% endif %}

<!-- Produits du stock -->
{% if items_with_stock %}
<div class="d-flex justify-content-between align-items-center mt-2 mb-1">
    <div class="section-title mb-0">
        <i class="bi bi-box-seam"></i>{% translate "Produits demandés" %}
        <span class="badge bg-secondary ms-1" style="font-size:0.7rem;">{{ items_with_stock|length }}</span>
    </div>
    {% if can_edit %}
    <button type="button" class="btn btn-sm btn-outline-warning" data-bs-toggle="modal" data-bs-target="#editPreparationOrderModal">
        <i class="bi bi-pencil me-1"></i>{% translate "Modifier" %}
    </button>
    {% endif %}
</div>
{% for item_data in items_with_stock %}
<div class="product-card {% if not item_data.is_sufficient and preparation_order.status != 'processed' and preparation_order.status != 'cancelled' %}insufficient{% endif %}">
    <div class="d-flex justify-content-between align-items-start">
        <div class="fw-semibold" style="font-size:0.92rem; flex:1;">{{ item_data.item.product.name }}</div>
        {% if item_data.item.quantity > 0 %}
            <span class="badge bg-primary ms-2">{{ item_data.item.quantity }} {{ item_data.item.product.unit }}</span>
        {% else %}
            <span class="badge bg-secondary ms-2" title="{% translate 'Ajouté pendant le traitement' %}">
                <i class="bi bi-plus-circle"></i> {% translate "Ajouté" %}
            </span>
        {% endif %}
    </div>
    <div class="product-meta mt-1">
        <code>{{ item_data.item.product.code }}</code>
        {% if item_data.item.product.category %}
            &nbsp;·&nbsp;{{ item_data.item.product.category.name_fr }}
        {% endif %}
    </div>
    {% if preparation_order.status == 'to_process' or preparation_order.status == 'pending' %}
    <div class="d-flex gap-3 mt-2" style="font-size:0.82rem;">
        <span>
            <i class="bi bi-bookmark me-1 text-muted"></i>{% translate "Réservé" %}:
            <span class="badge bg-info">{{ item_data.reserved_stock }}</span>
        </span>
        <span>
            <i class="bi bi-layers me-1 text-muted"></i>{% translate "Dispo" %}:
            <span class="badge {% if item_data.is_sufficient %}bg-success{% else %}bg-warning text-dark{% endif %}">{{ item_data.available_stock }}</span>
        </span>
    </div>
    {% if not item_data.is_sufficient %}
    <div class="mt-1" style="font-size:0.8rem;">
        <span class="text-danger"><i class="bi bi-exclamation-triangle me-1"></i>{% translate "Stock insuffisant" %}</span>
    </div>
    {% endif %}
    {% if item_data.locations %}
    <div class="product-meta mt-1">
        {% for stock in item_data.locations %}
            <div><i class="bi bi-geo-alt me-1"></i>{{ stock.location.warehouse.name }} — {{ stock.location.name }}</div>
        {% endfor %}
    </div>
    {% endif %}
    {% endif %}

    <!-- Delta / Restitution info -->
    {% if has_executed_outputs %}
    <div class="mt-2" style="font-size:0.82rem;">
        {% if preparation_order.status == 'processed' %}
            {% if item_data.gross_in > 0 and item_data.executed_qty == 0 %}
                <span class="badge bg-info text-dark"><i class="bi bi-arrow-return-left me-1"></i>{% translate "Restitué au stock" %} ({{ item_data.gross_in }})</span>
            {% elif item_data.gross_in > 0 %}
                <span class="badge bg-success"><i class="bi bi-check-circle me-1"></i>{% translate "Sorti net" %} ({{ item_data.executed_qty }})</span>
                <small class="text-muted ms-1">({% translate "Sorti" %}: {{ item_data.gross_out }}, {% translate "Restitué" %}: {{ item_data.gross_in }})</small>
            {% elif item_data.executed_qty > 0 %}
                <span class="badge bg-success"><i class="bi bi-check-circle me-1"></i>{% translate "Sorti" %} ({{ item_data.executed_qty }})</span>
            {% else %}
                <span class="badge bg-secondary">{% 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"><i class="bi bi-plus-circle me-1"></i>+{{ item_data.delta }} {{ item_data.item.product.unit }} {% translate "à prélever" %}</span>
                    <small class="text-muted ms-1">({% translate "Sorti net" %}: {{ item_data.executed_qty }})</small>
                {% elif item_data.delta < 0 %}
                    <span class="badge bg-info text-dark"><i class="bi bi-arrow-return-left me-1"></i>{{ item_data.delta }} {{ item_data.item.product.unit }} {% translate "à restituer" %}</span>
                    <small class="text-muted ms-1">({% translate "Sorti net" %}: {{ item_data.executed_qty }})</small>
                {% else %}
                    <span class="badge bg-success"><i class="bi bi-check-circle me-1"></i>{% translate "Inchangé" %} ({{ item_data.executed_qty }})</span>
                {% endif %}
            {% else %}
                <span class="badge bg-primary"><i class="bi bi-box-arrow-right me-1"></i>{{ item_data.item.quantity }} {{ item_data.item.product.unit }} {% translate "à prélever" %}</span>
            {% endif %}
        {% endif %}
    </div>
    {% endif %}

    <!-- Switch Préparé -->
    <div class="mt-2 pt-2 border-top d-flex justify-content-between align-items-center">
        <span class="fw-semibold text-secondary" style="font-size:0.82rem;">
            <i class="bi bi-check-square me-1"></i>{% translate "Préparé" %}
        </span>
        <div class="form-check form-switch 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{% endif %}>
        </div>
    </div>

    {% if item_data.production_order %}
    <div class="mt-2">
        <a href="{% url 'mobile:stock_production_order_detail_mobile' item_data.production_order.pk %}"
           class="btn btn-sm btn-outline-secondary py-0 px-2 d-inline-flex align-items-center" style="font-size:0.78rem;">
            <i class="bi bi-tools me-1"></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 me-1"></i>{% translate "Externe" %}
                </span>
            {% endif %}
            <span class="badge bg-light text-dark ms-1" style="font-size:0.7rem;">{{ item_data.production_order.get_status_display }}</span>
        </a>
    </div>
    {% elif can_manage and preparation_order.status != 'processed' and preparation_order.status != 'cancelled' %}
    <div class="mt-2">
        <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 py-0 px-2" style="font-size:0.78rem;">
            <i class="bi bi-tools me-1"></i>{% translate "Créer un bon de confection" %}
        </a>
    </div>
    {% endif %}
</div>
{% endfor %}
{% endif %}

<!-- Autres produits -->
{% if other_items %}
<div class="section-title mt-2">
    <i class="bi bi-pencil-square"></i>{% translate "Autres produits demandés" %}
    <span class="badge bg-dark ms-1" style="font-size:0.7rem;">{{ other_items|length }}</span>
</div>
{% for oi_data in other_items %}
<div class="product-card">
    <div class="d-flex justify-content-between align-items-start">
        <div class="fw-semibold" style="font-size:0.92rem; flex:1;">{{ oi_data.item.description }}</div>
        <span class="badge bg-warning text-dark ms-2">{{ oi_data.item.quantity }}</span>
    </div>
    <div class="product-meta mt-1">
        {% if oi_data.item.category %}
            <span class="badge bg-secondary" style="font-size:0.72rem;">{{ oi_data.item.category.name_fr }}</span>
        {% endif %}
        {% if oi_data.item.sign_panel_type %}
            &nbsp;<code style="font-size:0.75rem;">{{ oi_data.item.sign_panel_type.code }}</code>
            <small class="text-muted">{{ oi_data.item.sign_panel_type.name_fr }}</small>
        {% endif %}
    </div>
    {% if oi_data.production_order %}
    <div class="mt-2">
        <a href="{% url 'mobile:stock_production_order_detail_mobile' oi_data.production_order.pk %}"
           class="btn btn-sm btn-outline-secondary py-0 px-2 d-inline-flex align-items-center" style="font-size:0.78rem;">
            <i class="bi bi-tools me-1"></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 me-1"></i>{% translate "Externe" %}
                </span>
            {% endif %}
            <span class="badge bg-light text-dark ms-1" style="font-size:0.7rem;">{{ oi_data.production_order.get_status_display }}</span>
        </a>
    </div>
    {% elif can_manage and preparation_order.status != 'processed' and preparation_order.status != 'cancelled' %}
    <div class="mt-2">
        <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 py-0 px-2" style="font-size:0.78rem;">
            <i class="bi bi-tools me-1"></i>{% translate "Créer un bon de confection" %}
        </a>
    </div>
    {% endif %}
<!-- Switch Préparé pour autres produits -->
    <div class="mt-2 pt-2 border-top d-flex justify-content-between align-items-center">
        <span class="fw-semibold text-secondary" style="font-size:0.82rem;">
            <i class="bi bi-check-square me-1"></i>{% translate "Préparé" %}
        </span>
        <div class="form-check form-switch 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{% endif %}>
        </div>
    </div>
</div>
{% endfor %}
{% endif %}

<!-- Articles supprimés du bon (restitution au stock) -->
{% if deleted_items_to_return %}
<div class="section-title mt-3 text-info">
    <i class="bi bi-arrow-return-left"></i>{% translate "Articles supprimés (restitution au stock)" %}
    <span class="badge bg-info text-dark ms-1" style="font-size:0.7rem;">{{ deleted_items_to_return|length }}</span>
</div>
{% for del in deleted_items_to_return %}
<div class="product-card border-info" style="background:#f4fafd;">
    <div class="d-flex justify-content-between align-items-start">
        <div class="fw-semibold text-dark" style="font-size:0.92rem; flex:1;">{{ del.product.name }}</div>
        <span class="badge bg-info text-dark ms-2">+{{ del.executed_qty }} {{ del.product.unit }} {% translate "à restituer" %}</span>
    </div>
    <div class="product-meta mt-1">
        <code>{{ del.product.code }}</code> &nbsp;·&nbsp; <small class="text-muted"><i class="bi bi-geo-alt me-1"></i>{{ del.location_info }}</small>
    </div>
    {% if del.item %}
    <div class="mt-2 pt-2 border-top d-flex justify-content-between align-items-center">
        <span class="fw-semibold text-info" style="font-size:0.82rem;">
            <i class="bi bi-arrow-return-left me-1"></i>{% translate "Restitué / Préparé" %}
        </span>
        <div class="form-check form-switch 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{% endif %}>
        </div>
    </div>
    {% endif %}
</div>
{% endfor %}
{% endif %}

{% if not items_with_stock and not other_items and not deleted_items_to_return %}
<div class="text-center text-muted py-4">
    <i class="bi bi-inbox fs-2 d-block mb-2"></i>
    {% translate "Aucun article dans ce bon." %}
</div>
{% endif %}

<!-- Actions -->
{% if can_manage %}
<div class="d-grid gap-2 mt-3">
    {% if preparation_order.status == 'to_process' or preparation_order.status == 'pending' %}
        <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#confirmProcessModalMobile">
            <i class="bi bi-check2-circle me-1"></i>{% translate "Signaler comme traité" %}
        </button>
        {% if can_edit %}
        <button type="button" class="btn btn-outline-warning" data-bs-toggle="modal" data-bs-target="#editPreparationOrderModal">
            <i class="bi bi-pencil-square me-1"></i>{% translate "Modifier les articles" %}
        </button>
        {% endif %}
        {% if can_manage_purchase %}
        <a href="{% url 'stock:preparation_order_create_purchase' preparation_order.pk %}" class="btn btn-primary">
            <i class="bi bi-cart-plus me-1"></i>{% translate "Créer un bon de commande" %}
        </a>
        {% else %}
        <button class="btn btn-primary" disabled>
            <i class="bi bi-lock me-1"></i>{% translate "Créer un bon de commande" %}
        </button>
        {% endif %}
        {% if can_cancel %}
        <button type="button" class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#cancelModal">
            <i class="bi bi-x-circle me-1"></i>{% translate "Annuler le bon" %}
        </button>
        {% endif %}
    {% elif preparation_order.status == 'processed' %}
        {% if can_edit %}
        <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#editPreparationOrderModal">
            <i class="bi bi-pencil-square me-1"></i>{% translate "Modifier le bon" %}
        </button>
        {% endif %}
        {% if has_pending_stock_adjustments %}
        <a href="{% url 'stock:preparation_order_process' preparation_order.pk %}" class="btn btn-warning">
            <i class="bi bi-arrow-repeat me-1"></i>{% translate "Régulariser les stocks" %}
        </a>
        {% endif %}
        {% if can_manage_stock %}
        <a href="{% url 'mobile:new_stock_entry_mobile' %}?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 de stock" %}
        </a>
        {% endif %}
        <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 %}
            <input type="hidden" name="next" value="{% url 'mobile:stock_preparation_order_detail_mobile' preparation_order.pk %}">
            <button type="submit" class="btn btn-outline-warning w-100">
                <i class="bi bi-arrow-counterclockwise me-1"></i>{% translate "Réouvrir le bon" %}
            </button>
        </form>
    {% endif %}
</div>
{% endif %}

<!-- Modal confirmation annulation -->
{% if can_cancel and preparation_order.status in 'to_process,pending' %}
<div class="modal fade" id="cancelModal" tabindex="-1" aria-labelledby="cancelModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title" id="cancelModalLabel">
                    <i class="bi bi-exclamation-triangle me-2"></i>{% translate "Confirmer l'annulation" %}
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                {% translate "Êtes-vous sûr de vouloir annuler ce bon de préparation ? Les quantités réservées seront libérées." %}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% translate "Retour" %}</button>
                <form method="post" action="{% url 'stock:preparation_order_cancel' preparation_order.pk %}">
                    {% csrf_token %}
                    <input type="hidden" name="next" value="{% url 'mobile:stock_preparation_order_detail_mobile' preparation_order.pk %}">
                    <button type="submit" class="btn btn-danger">
                        <i class="bi bi-x-circle me-1"></i>{% translate "Confirmer" %}
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endif %}

<!-- Documents joints -->
<div class="section-title mt-3"><i class="bi bi-paperclip me-1"></i>{% translate "Documents joints" %} <span class="badge bg-secondary ms-1">{{ preparation_order.documents.count }}</span></div>
<div class="info-card">
    {% for doc in preparation_order.documents.all %}
    {% private_file_url doc 'file' as doc_url %}
    <div class="mv-row">
        <div style="font-size:0.9rem;">
            {% if doc.is_image %}<i class="bi bi-image text-info me-1"></i>
            {% else %}<i class="bi bi-file-earmark text-secondary me-1"></i>{% endif %}
            {{ doc.filename }}
            <small class="text-muted d-block">{{ doc.uploaded_at|date:"d/m/Y H:i" }}</small>
        </div>
        <a href="{{ doc_url }}" target="_blank" class="btn btn-sm btn-light ms-2">
            <i class="bi bi-download"></i>
        </a>
    </div>
    {% empty %}
    <p class="text-muted fst-italic mb-2" style="font-size:0.85rem;">{% translate "Aucun document joint." %}</p>
    {% endfor %}

    <!-- Upload -->
    <form method="post" enctype="multipart/form-data"
          action="{% url 'mobile:stock_preparation_order_detail_mobile' preparation_order.pk %}">
        {% csrf_token %}
        <div id="mob-drop-zone" class="drop-zone mt-2">
            <i class="bi bi-cloud-upload fs-4 text-muted"></i>
            <p class="mt-1 mb-0 small fw-semibold">{% translate "Glissez-déposez ou" %}</p>
            <label for="mob_documents_input" class="btn btn-sm btn-outline-secondary mt-1">
                <i class="bi bi-folder2-open me-1"></i>{% translate "Parcourir" %}
            </label>
            <input type="file" id="mob_documents_input" name="documents" multiple class="d-none"
                   accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.odt,.ods,.txt">
        </div>
        <div id="mob-file-list" class="mt-1 mb-1"></div>
        <button type="submit" id="mob-upload-btn" class="btn btn-sm btn-primary w-100 mt-1" style="display:none;">
            <i class="bi bi-cloud-upload me-1"></i>{% translate "Envoyer" %}
        </button>
    </form>
</div>

<!-- Historique des modifications -->
<div class="section-title mt-3">
    <i class="bi bi-clock-history me-1"></i>{% translate "Historique des modifications" %}
    <span class="badge bg-secondary ms-1">{{ history_entries|length }}</span>
</div>
<div class="info-card">
    {% if history_entries %}
        {% for entry in history_entries %}
        <div class="py-2 border-bottom {% if forloop.last %}border-bottom-0{% endif %}">
            <div class="d-flex justify-content-between align-items-center mb-1">
                <span class="badge {{ entry.badge_class }}" style="font-size:0.75rem;">
                    <i class="bi {{ entry.icon_class }} me-1"></i>{{ entry.get_action_display }}
                </span>
                <small class="text-muted" style="font-size:0.75rem;">
                    {{ entry.created_at|date:"d/m/Y H:i" }}
                </small>
            </div>
            <div class="d-flex justify-content-between align-items-baseline">
                <span class="small fw-semibold text-secondary">
                    <i class="bi bi-person me-1"></i>{{ entry.author_short_name }}
                </span>
            </div>
            <div class="small text-dark mt-1" style="font-size:0.83rem;">
                {{ entry.description }}
            </div>
        </div>
        {% endfor %}
    {% else %}
        <p class="text-muted fst-italic mb-0 small text-center py-2">{% translate "Aucun historique disponible." %}</p>
    {% endif %}
</div>

<script>
(function() {
    const dropZone  = document.getElementById('mob-drop-zone');
    const fileInput = document.getElementById('mob_documents_input');
    const fileList  = document.getElementById('mob-file-list');
    const uploadBtn = document.getElementById('mob-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-1 mt-1';
            item.innerHTML = `<i class="bi bi-file-earmark text-secondary"></i>
                <span class="flex-grow-1 text-truncate" style="font-size:0.8rem">${file.name}</span>
                <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';
    }
    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');
        Array.from(e.dataTransfer.files).forEach(function(f) { selectedFiles.items.add(f); });
        renderFileList();
    });
    fileInput.addEventListener('change', function() {
        const files = Array.from(this.files);
        this.value = '';
        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: 1rem; text-align: center; cursor: pointer; }
    .drop-zone.dragover, .drop-zone:hover { border-color: #0d6efd; background: #e8f0fe; }
    .mv-row { display: flex; justify-content: space-between; align-items: center; padding: 0.35rem 0; border-bottom: 1px solid #f0f0f0; }
    .mv-row:last-child { border-bottom: none; }
</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 modal-dialog-centered">
        <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 le 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 small" 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 form-control-sm" value="{{ preparation_order.estimated_return_date|date:'Y-m-d' }}">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">{% translate "Annuler" %}</button>
                    <button type="submit" class="btn btn-primary btn-sm">{% 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();
    }

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

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

<!-- Modale mobile de confirmation du traitement -->
<div class="modal fade" id="confirmProcessModalMobile" tabindex="-1" aria-labelledby="confirmProcessModalMobileLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title" id="confirmProcessModalMobileLabel">
                    <i class="bi bi-check-circle me-2"></i>{% translate "Confirmation du traitement" %}
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></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">
                <input type="hidden" name="next" value="{% url 'mobile:stock_preparation_order_detail_mobile' preparation_order.pk %}">
                <div class="modal-body">
                    <p class="fw-bold text-success mb-2" style="font-size:0.9rem;">
                        <i class="bi bi-info-circle me-1"></i>
                        {% translate "Signaler ce bon de préparation comme TRAITÉ ?" %}
                    </p>

                    <div class="card mb-2 border shadow-sm">
                        <div class="card-header bg-light py-1 px-2" style="font-size:0.8rem;">
                            <strong>{% translate "Mouvements de stock" %} :</strong>
                        </div>
                        <ul class="list-group list-group-flush small">
                            {% for item_data in items_with_stock %}
                            <li class="list-group-item d-flex justify-content-between align-items-center py-2">
                                <span class="text-truncate" style="max-width:180px;">{{ item_data.item.product.name }}</span>
                                {% if has_executed_outputs %}
                                    {% if item_data.delta > 0 %}
                                        <span class="badge bg-warning text-dark">+{{ item_data.delta }} sorti</span>
                                    {% elif item_data.delta < 0 %}
                                        <span class="badge bg-info text-dark">{{ item_data.delta }} restitué</span>
                                    {% else %}
                                        <span class="badge bg-secondary">Inchangé</span>
                                    {% endif %}
                                {% else %}
                                    <span class="badge bg-success">-{{ item_data.item.quantity }} {{ item_data.item.product.unit }}</span>
                                {% endif %}
                            </li>
                            {% endfor %}
                            {% for del in deleted_items_to_return %}
                            <li class="list-group-item d-flex justify-content-between align-items-center py-2">
                                <span class="text-truncate" style="max-width:180px;">{{ del.product.name }} <span class="badge bg-danger">Supprimé</span></span>
                                <span class="badge bg-info text-dark">+{{ del.executed_qty }} restitué</span>
                            </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">{% translate "Annuler" %}</button>
                    <button type="submit" class="btn btn-success btn-sm">
                        <i class="bi bi-check-lg me-1"></i> {% translate "Confirmer et marquer traité" %}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- ===== Widget Discussion mobile ===== -->
<style>
    #discussion-mob-fab {
        position: fixed;
        bottom: 5.5rem;
        right: 1rem;
        z-index: 1050;
        border-radius: 50%;
        width: 3.25rem;
        height: 3.25rem;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 10px rgba(0,0,0,0.3);
        padding: 0;
        background: #0d6efd;
        color: #fff;
        border: none;
        cursor: pointer;
        font-size: 1.3rem;
    }
    #discussion-mob-fab .mob-fab-badge {
        position: absolute;
        top: -3px;
        right: -3px;
        background: #dc3545;
        color: #fff;
        font-size: .65rem;
        font-weight: 700;
        min-width: 18px;
        height: 18px;
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 4px;
        border: 2px solid #fff;
        line-height: 1;
    }
    #discussion-mob-panel {
        position: fixed;
        top: 6.5rem;
        bottom: 0;
        left: 0.5rem;
        right: 0.5rem;
        z-index: 1060;
        display: flex;
        flex-direction: column;
        background: #fff;
        border-radius: 14px 14px 0 0;
        box-shadow: 0 -4px 24px rgba(0,0,0,.18);
        overflow: hidden;
        transform: translateY(100%);
        opacity: 0;
        pointer-events: none;
        transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .2s ease;
    }
    #discussion-mob-panel.open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }
    #discussion-mob-panel-header {
        background: #0d6efd;
        color: #fff;
        padding: 10px 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
    }
    #discussion-mob-thread {
        flex: 1;
        overflow-y: auto;
        padding: 12px 12px 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    #discussion-mob-form-area {
        flex-shrink: 0;
        padding: 10px 12px;
        border-top: 1px solid #e9ecef;
        background: #f8f9fa;
    }
</style>

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

<div id="discussion-mob-panel" role="dialog" aria-label="{% translate 'Discussion' %}">
    <div id="discussion-mob-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>
        <button type="button" class="btn-close btn-close-white btn-sm"
                onclick="toggleMobDiscussionPanel()" aria-label="{% translate 'Fermer' %}"></button>
    </div>

    <div id="discussion-mob-thread">
        {% if discussion_messages %}
        {% for msg in discussion_messages %}
        <div class="d-flex {% if msg.author == request.user %}justify-content-end{% endif %}">
            {% if msg.author != request.user %}
            <div class="rounded-circle bg-secondary text-white d-flex align-items-center justify-content-center me-2 flex-shrink-0"
                 style="width:28px;height:28px;font-size:.7rem;">
                {{ msg.author|short_name|first|upper|default:msg.author.username|first|upper }}
            </div>
            {% endif %}
            <div style="max-width:80%;">
                {% 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:44px;height:44px;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:16 }}
                        </a>
                        {% endif %}
                        {% endfor %}
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endfor %}
        {% else %}
        <p class="text-muted small text-center py-3 mb-0">
            <i class="bi bi-chat-square me-1"></i>{% translate "Aucun message." %}
        </p>
        {% endif %}
    </div>

    {% if can_post_discussion_message %}
    <div id="discussion-mob-form-area">
        <form method="post"
              action="{% url 'stock:preparation_order_add_message' preparation_order.id %}"
              enctype="multipart/form-data"
              id="mob-msg-form">
            {% csrf_token %}
            <input type="hidden" name="content" id="mob-msg-content-real">
            <div class="d-flex gap-2 align-items-end">
                <div class="flex-grow-1 position-relative">
                    <textarea id="mob-msg-content" class="form-control form-control-sm"
                              rows="2" style="resize:none;font-size:.85rem;"
                              placeholder="{% translate 'Écrire… (@ pour mentionner)' %}"></textarea>
                    <div id="mob-mention-dropdown"
                         class="list-group shadow"
                         style="display:none;position:absolute;bottom:100%;left:0;right:0;z-index:1080;max-height:160px;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="mob-msg-file-input">
                    </label>
                </div>
            </div>
            <div id="mob-msg-file-preview" class="d-flex flex-wrap gap-2 mt-2"></div>
        </form>
    </div>
    {% endif %}
</div>
<!-- ===== fin widget Discussion mobile ===== -->

<script>
function toggleMobDiscussionPanel() {
    const panel = document.getElementById('discussion-mob-panel');
    if (!panel) return;
    const opening = !panel.classList.contains('open');
    panel.classList.toggle('open', opening);
    if (opening) {
        const thread = document.getElementById('discussion-mob-thread');
        if (thread) setTimeout(() => { thread.scrollTop = thread.scrollHeight; }, 50);
        const badge = document.getElementById('discussion-mob-badge');
        if (badge) badge.style.display = 'none';
    }
}

document.addEventListener('click', function (e) {
    const panel = document.getElementById('discussion-mob-panel');
    const fab   = document.getElementById('discussion-mob-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') {
    toggleMobDiscussionPanel();
}

document.addEventListener('DOMContentLoaded', function () {
    const fileInput   = document.getElementById('mob-msg-file-input');
    const filePreview = document.getElementById('mob-msg-file-preview');
    if (fileInput && filePreview) {
        fileInput.addEventListener('change', renderMobPreview);
        function renderMobPreview() {
            filePreview.innerHTML = '';
            const files = fileInput.files;
            if (!files || !files.length) { 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:56px;height:56px;object-fit:cover;border-radius:6px;border:1px solid #dee2e6;';
                    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:120px;';
                    chip.innerHTML = `<i class="bi bi-paperclip text-secondary"></i><span class="text-truncate">${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.addEventListener('click', () => {
                    const dt = new DataTransfer();
                    Array.from(fileInput.files).forEach((f, i) => { if (i !== idx) dt.items.add(f); });
                    fileInput.files = dt.files;
                    renderMobPreview();
                });
                wrapper.appendChild(btn);
                filePreview.appendChild(wrapper);
            });
        }
        const msgForm = document.getElementById('mob-msg-form');
        if (msgForm) {
            msgForm.addEventListener('submit', () => { filePreview.innerHTML = ''; filePreview.style.display = 'none'; });
        }
    }
});

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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