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

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

<!-- 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.id }}
            </a>
        </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="section-title mt-2">
    <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>
{% 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 item_data.executed_qty > 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" %}: {{ 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" %}: {{ 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 %}
    </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" style="font-size:0.78rem;">
            <i class="bi bi-tools me-1"></i>{{ item_data.production_order.code }}
            <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" style="font-size:0.78rem;">
            <i class="bi bi-tools me-1"></i>{{ oi_data.production_order.code }}
            <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_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 %}
    {% 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 %}
                    <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>

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