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

{% block content %}
<div class="container-fluid mt-3">
    <div class="row">
        <div class="col-12">
            <!-- En-tête -->
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h3>
                        <i class="bi bi-tools"></i> 
                        {% translate "Bon de confection" %} {{ order.code }}
                    </h3>
                    <p class="text-muted mb-0">
                        <i class="bi bi-calendar"></i> {{ order.created_at|date:"d/m/Y H:i" }}
                    </p>
                </div>
                <div>
                    <span class="badge {{ order.status_badge_class }} fs-5">
                        <i class="bi {{ order.status_icon }} me-1"></i>{{ order.get_status_display }}
                    </span>
                </div>
            </div>

            <!-- Boutons d'action -->
            <div class="mb-4">
                <a href="{% url 'stock:stock_movements' %}?tab=production-orders" class="btn btn-secondary">
                    <i class="bi bi-arrow-left"></i> {% translate "Retour à la liste" %}
                </a>
                {% if can_manage %}
                    {% if order.status == 'to_process' or order.status == 'draft' %}
                        <a href="{% url 'stock:production_order_edit' order.pk %}" class="btn btn-outline-primary">
                            <i class="bi bi-pencil"></i> {% translate "Modifier" %}
                        </a>
                    {% endif %}
                    {% if order.status == 'to_process' or order.status == 'draft' %}
                        <form method="post" action="{% url 'stock:production_order_start' order.pk %}" class="d-inline">
                            {% csrf_token %}
                            <button type="submit" class="btn btn-primary" {% if not can_start %}disabled{% endif %}
                                    title="{% if not can_start %}{% translate 'Stock insuffisant' %}{% endif %}">
                                <i class="bi bi-play-fill"></i> {% translate "Démarrer la confection" %}
                            </button>
                        </form>
                    {% endif %}
                    {% if order.status == 'in_production' %}
                        <form method="post" action="{% url 'stock:production_order_complete' order.pk %}" class="d-inline">
                            {% csrf_token %}
                            <button type="submit" class="btn btn-success"
                                    onclick="return confirm('{% translate "Confirmer la fin de confection ? Le stock des composants sera consommé et le produit fini sera ajouté au stock." %}')">
                                <i class="bi bi-check-circle"></i> {% translate "Terminer la confection" %}
                            </button>
                        </form>
                    {% endif %}
                    {% if order.status == 'to_process' or order.status == 'draft' or order.status == 'in_production' %}
                        <form method="post" action="{% url 'stock:production_order_cancel' order.pk %}" class="d-inline">
                            {% csrf_token %}
                            <button type="submit" class="btn btn-outline-danger"
                                    onclick="return confirm('{% translate "Confirmer l\'annulation ?" %}')">
                                <i class="bi bi-x-circle"></i> {% translate "Annuler" %}
                            </button>
                        </form>
                    {% endif %}
                {% endif %}
            </div>

            <div class="row">
                <!-- Informations -->
                <div class="col-md-4 mb-4">
                    <div class="card shadow-sm">
                        <div class="card-header bg-primary text-white">
                            <h5 class="mb-0 text-white">
                                <i class="bi bi-info-circle"></i> {% translate "Informations" %}
                            </h5>
                        </div>
                        <div class="card-body">
                            <table class="table table-sm mb-0">
                                <tr>
                                    <th>{% translate "Code" %}</th>
                                    <td>{{ order.code }}</td>
                                </tr>
                                <tr>
                                    <th>{% translate "Entrepôt" %}</th>
                                    <td>
                                        <a href="{% url 'stock:warehouse_detail' order.warehouse.pk %}">
                                            {{ order.warehouse.name }}
                                        </a>
                                    </td>
                                </tr>
                                <tr>
                                    <th>{% translate "Quantité" %}</th>
                                    <td><strong>{{ order.quantity }}</strong> {% translate "unité(s)" %}</td>
                                </tr>
                                <tr>
                                    <th>{% translate "Destination" %}</th>
                                    <td>
                                        {% if order.destination == 'internal' %}
                                            <span class="badge bg-info text-dark">
                                                <i class="bi bi-building me-1"></i>{% translate "Interne" %}
                                            </span>
                                        {% else %}
                                            <span class="badge bg-warning text-dark">
                                                <i class="bi bi-truck me-1"></i>{% translate "Externe" %}
                                            </span>
                                        {% endif %}
                                    </td>
                                </tr>
                                {% if order.preparation_order %}
                                <tr>
                                    <th>{% translate "Bon de prép." %}</th>
                                    <td>
                                        <a href="{% url 'stock:preparation_order_detail' order.preparation_order.pk %}">
                                            #{{ order.preparation_order.order_number }}
                                        </a>
                                    </td>
                                </tr>
                                {% endif %}
                                {% if other_item_description %}
                                <tr>
                                    <th>{% translate "Description" %}</th>
                                    <td>
                                        {% if order.preparation_order %}<small class="text-muted d-block">{% translate "Issu du bon de préparation" %} #{{ order.preparation_order.order_number }}</small>{% endif %}
                                        <strong>{{ other_item_description }}</strong>
                                    </td>
                                </tr>
                                {% endif %}
                                <tr>
                                    <th>{% translate "Créé le" %}</th>
                                    <td>{{ order.created_at|date:"d/m/Y H:i" }}</td>
                                </tr>
                                {% if order.completed_at %}
                                <tr>
                                    <th>{% translate "Terminé le" %}</th>
                                    <td>{{ order.completed_at|date:"d/m/Y H:i" }}</td>
                                </tr>
                                {% endif %}
                            </table>
                        </div>
                    </div>

                    <!-- Produit fini -->
                    <div class="card shadow-sm mt-3">
                        <div class="card-header bg-success text-white">
                            <h6 class="mb-0"><i class="bi bi-box-seam"></i> {% translate "Produit fini à stocker" %}</h6>
                        </div>
                        <div class="card-body">
                            {% if order.output_product %}
                                <p class="mb-1">
                                    <a href="{% url 'stock:product_detail' order.output_product.pk %}">
                                        <strong>{{ order.output_product.name }}</strong>
                                    </a>
                                    <small class="text-muted ms-1">({{ order.output_product.code }})</small>
                                </p>
                                <small class="text-muted">
                                    <i class="bi bi-info-circle"></i>
                                    {% blocktranslate with qty=order.quantity %}{{ qty }} unité(s) seront ajoutées au stock à la fin de la confection.{% endblocktranslate %}
                                </small>
                            {% elif order.output_product_name %}
                                <p class="mb-1">
                                    <i class="bi bi-plus-circle text-warning"></i>
                                    <strong>{{ order.output_product_name }}</strong>
                                </p>
                                <small class="text-muted">
                                    <i class="bi bi-info-circle"></i>
                                    {% translate "Un nouveau produit sera créé à la fin de la confection." %}
                                </small>
                            {% else %}
                                <p class="mb-1 text-muted">
                                    <span class="text-warning">
                                        <i class="bi bi-exclamation-triangle"></i>
                                        {% translate "Aucun produit fini défini. Le stock ne sera pas mis à jour." %}
                                    </span>
                                </p>
                            {% endif %}
                            {% if order.output_location %}
                                <p class="mb-0 mt-2">
                                    <small><i class="bi bi-geo-alt"></i> {% translate "Emplacement" %} : {{ order.output_location }}</small>
                                </p>
                            {% endif %}
                        </div>
                    </div>

                    {% if order.notes and not other_item_description %}
                    <div class="card shadow-sm mt-3">
                        <div class="card-header">
                            <h6 class="mb-0">{% translate "Notes" %}</h6>
                        </div>
                        <div class="card-body">
                            <p class="mb-0">{{ order.notes }}</p>
                        </div>
                    </div>
                    {% endif %}

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

                    <!-- Documents -->
                    <div class="card shadow-sm mt-3">
                        <div class="card-header d-flex align-items-center justify-content-between">
                            <h6 class="mb-0"><i class="bi bi-paperclip me-1"></i>{% translate "Documents" %}</h6>
                        </div>
                        <div class="card-body">
                            <div id="docsList">
                                {% for doc in order.documents.all %}
                                {% private_file_url doc 'file' as doc_url %}
                                <div class="d-flex align-items-center gap-2 border rounded p-1 mb-1" id="doc-{{ doc.pk }}">
                                    <i class="bi {% if doc.is_image %}bi-file-earmark-image text-info{% else %}bi-file-earmark text-secondary{% endif %} fs-5 flex-shrink-0"></i>
                                    <a href="{{ doc_url }}" target="_blank" class="small flex-grow-1 text-truncate">{{ doc.filename }}</a>
                                    <small class="text-muted text-nowrap">{{ doc.uploaded_at|date:"d/m/Y" }}</small>
                                    {% if can_manage %}
                                    <button type="button" class="btn btn-sm btn-outline-danger py-0 px-1 btn-delete-doc flex-shrink-0"
                                            data-doc-id="{{ doc.pk }}"
                                            data-delete-url="{% url 'stock:production_order_document_delete' doc.pk %}"
                                            title="{% translate 'Supprimer' %}">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                    {% endif %}
                                </div>
                                {% empty %}
                                <p class="text-muted fst-italic small mb-1" id="docsEmpty">{% translate "Aucun document joint." %}</p>
                                {% endfor %}
                            </div>
                            {% if can_manage %}
                            <div class="d-flex align-items-center gap-2 mt-2">
                                <label for="docInput" class="btn btn-sm btn-outline-secondary mb-0">
                                    <i class="bi bi-paperclip me-1"></i>{% translate "Ajouter un document..." %}
                                </label>
                                <input type="file" id="docInput" multiple class="d-none"
                                       accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.odt,.ods,.txt">
                                <span id="docUploading" style="display:none;" class="text-muted small">
                                    <div class="spinner-border spinner-border-sm me-1"></div>{% translate "Envoi en cours..." %}
                                </span>
                            </div>
                            <div id="docError" class="alert alert-danger mt-2 py-1" style="display:none;"></div>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <!-- Composants et stock -->
                <div class="col-md-8">
                    <div class="card shadow-sm">
                        <div class="card-header">
                            <h5 class="mb-0">
                                <i class="bi bi-boxes"></i> {% translate "Composants requis" %}
                                <small>(x{{ order.quantity }} {% translate "unité(s)" %})</small>
                            </h5>
                        </div>
                        <div class="card-body p-0">
                            <div class="table-responsive">
                                <table class="table table-hover mb-0">
                                    <thead>
                                        <tr>
                                            <th>{% translate "Produit" %}</th>
                                            <th class="text-center">{% translate "Qté/unité" %}</th>
                                            <th class="text-center">{% translate "Total requis" %}</th>
                                            <th class="text-center">{% translate "Disponible" %}</th>
                                            <th class="text-center">{% translate "Statut" %}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for cs in components_status %}
                                        <tr class="{% if not cs.sufficient %}table-danger{% endif %}">
                                            <td>
                                                <a href="{% url 'stock:product_detail' cs.component.product.id %}">
                                                    <i class="bi bi-box-seam"></i>
                                                    {{ cs.component.product.name }}
                                                </a>
                                                <br>
                                                <small class="text-muted">{{ cs.component.product.code }}</small>
                                            </td>
                                            <td class="text-center">{{ cs.component.quantity }}</td>
                                            <td class="text-center fw-bold">{{ cs.required }}</td>
                                            <td class="text-center">{{ cs.available }}</td>
                                            <td class="text-center">
                                                {% if cs.sufficient %}
                                                    <span class="badge bg-success">
                                                        <i class="bi bi-check-circle"></i> {% translate "OK" %}
                                                    </span>
                                                {% else %}
                                                    <span class="badge bg-danger">
                                                        <i class="bi bi-exclamation-triangle"></i>
                                                        {% translate "Manque" %} {{ cs.required|add:"-"|add:cs.available }}
                                                    </span>
                                                {% endif %}
                                            </td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        {% if order.status == 'draft' or order.status == 'to_process' %}
                        {% if not can_start %}
                        <div class="card-footer bg-warning-subtle">
                            <i class="bi bi-exclamation-triangle text-warning"></i>
                            {% translate "Stock insuffisant dans cet entrepôt pour démarrer la production." %}
                        </div>
                        {% endif %}
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% if can_manage %}
<script>
(function () {
    const DOC_UPLOAD_URL = '{% url "stock:production_order_document_upload" order.pk %}';
    const CSRF = '{{ csrf_token }}';

    const docInput = document.getElementById('docInput');
    const docsList = document.getElementById('docsList');
    const docsUploading = document.getElementById('docUploading');
    const docError = document.getElementById('docError');

    if (!docInput) return;

    docInput.addEventListener('change', function () {
        if (!docInput.files.length) return;
        const formData = new FormData();
        for (const f of docInput.files) {
            formData.append('documents', f);
        }
        docsUploading.style.display = 'inline-flex';
        docError.style.display = 'none';
        fetch(DOC_UPLOAD_URL, {
            method: 'POST',
            headers: {'X-CSRFToken': CSRF},
            body: formData,
        })
        .then(r => r.json())
        .then(data => {
            docsUploading.style.display = 'none';
            docInput.value = '';
            if (data.error) {
                docError.textContent = data.error;
                docError.style.display = 'block';
                return;
            }
            const empty = document.getElementById('docsEmpty');
            if (empty) empty.remove();
            for (const doc of data.created) {
                const icon = doc.is_image ? 'bi-file-earmark-image text-info' : 'bi-file-earmark text-secondary';
                const div = document.createElement('div');
                div.className = 'd-flex align-items-center gap-2 border rounded p-1 mb-1';
                div.id = `doc-${doc.id}`;
                div.innerHTML = `<i class="bi ${icon} fs-5 flex-shrink-0"></i>
                    <a href="${doc.url}" target="_blank" class="small flex-grow-1 text-truncate">${doc.filename}</a>
                    <small class="text-muted text-nowrap">${doc.uploaded_at}</small>
                    <button type="button" class="btn btn-sm btn-outline-danger py-0 px-1 btn-delete-doc flex-shrink-0"
                            data-doc-id="${doc.id}" data-delete-url="${doc.delete_url}"
                            title="{% translate 'Supprimer' %}">
                        <i class="bi bi-trash"></i>
                    </button>`;
                docsList.appendChild(div);
            }
        })
        .catch(() => {
            docsUploading.style.display = 'none';
            {% translate "Erreur lors de l\'envoi." as doc_error_msg %}
            docError.textContent = '{{ doc_error_msg|escapejs }}';
            docError.style.display = 'block';
        });
    });

    docsList.addEventListener('click', function (e) {
        const btn = e.target.closest('.btn-delete-doc');
        if (!btn) return;
        if (!confirm('{% translate "Supprimer ce document ?" %}')) return;
        const docId = btn.dataset.docId;
        const deleteUrl = btn.dataset.deleteUrl;
        fetch(deleteUrl, {
            method: 'POST',
            headers: {'X-CSRFToken': CSRF},
        })
        .then(r => r.json())
        .then(data => {
            if (data.deleted) {
                const el = document.getElementById(`doc-${docId}`);
                if (el) el.remove();
                if (!docsList.querySelector('[id^="doc-"]')) {
                    const p = document.createElement('p');
                    p.className = 'text-muted fst-italic small mb-1';
                    p.id = 'docsEmpty';
                    p.textContent = '{% translate "Aucun document joint." %}';
                    docsList.prepend(p);
                }
            }
        });
    });
})();
</script>
{% endif %}
{% endblock content %}