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

{% block title %}{% translate "Bon de confection" %} {{ order.code }}{% endblock title %}

{% block upleft %}
<a href="{% url 'mobile:stock_production_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; }
    .comp-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.4rem 0;
        border-bottom: 1px solid #f0f0f0;
        font-size: 0.88rem;
    }
    .comp-row:last-child { border-bottom: none; }
</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">{{ order.code }}</h5>
        <small class="text-muted"><i class="bi bi-calendar3 me-1"></i>{{ order.created_at|date:"d/m/Y H:i" }}</small>
    </div>
    <span class="badge {{ order.status_badge_class }} fs-6">
        <i class="bi {{ order.status_icon }} me-1"></i>{{ order.get_status_display }}
    </span>
</div>

<!-- Informations générales -->
<div class="info-card">
    {% if order.product_design %}
    <div class="info-row">
        <span class="info-label"><i class="bi bi-diagram-3 me-1"></i>{% translate "Conception" %}</span>
        <span class="fw-semibold">{{ order.product_design.name }}</span>
    </div>
    {% endif %}
    <div class="info-row">
        <span class="info-label"><i class="bi bi-building me-1"></i>{% translate "Entrepôt" %}</span>
        <span>{{ order.warehouse.name }}</span>
    </div>
    <div class="info-row">
        <span class="info-label"><i class="bi bi-layers me-1"></i>{% translate "Quantité" %}</span>
        <span class="fw-semibold">{{ order.quantity }} {% translate "unité(s)" %}</span>
    </div>
    <div class="info-row">
        <span class="info-label"><i class="bi bi-arrow-left-right me-1"></i>{% translate "Destination" %}</span>
        <span>
            {% 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 %}
        </span>
    </div>
    {% if order.preparation_order %}
    <div class="info-row">
        <span class="info-label"><i class="bi bi-clipboard-check me-1"></i>{% translate "Bon de prép." %}</span>
        <a href="{% url 'mobile:stock_preparation_order_detail_mobile' order.preparation_order.pk %}">
            #{{ order.preparation_order.order_number }}
        </a>
    </div>
    {% endif %}
    {% if other_item_description %}
    <div class="info-row">
        <span class="info-label"><i class="bi bi-card-text me-1"></i>{% translate "Description" %}</span>
        <span class="text-end" style="max-width:65%;">
            {% if order.preparation_order %}<small class="text-muted d-block">{% translate "Issu du bon de prép." %} #{{ order.preparation_order.order_number }}</small>{% endif %}
            <strong>{{ other_item_description }}</strong>
        </span>
    </div>
    {% endif %}
    {% if order.output_product %}
    <div class="info-row">
        <span class="info-label"><i class="bi bi-box-seam me-1"></i>{% translate "Produit fini" %}</span>
        <span>{{ order.output_product.name }}</span>
    </div>
    {% endif %}
    {% if order.notes %}
    <div class="info-row">
        <span class="info-label"><i class="bi bi-chat-left-text me-1"></i>{% translate "Notes" %}</span>
        <span class="text-end" style="max-width:65%;">{{ order.notes }}</span>
    </div>
    {% endif %}
</div>

<!-- Composants -->
{% if components_status %}
<div class="info-card">
    <div class="fw-semibold mb-2 small text-muted text-uppercase">
        <i class="bi bi-puzzle me-1"></i>{% translate "Composants" %}
    </div>
    {% for row in components_status %}
    <div class="comp-row">
        <div style="flex:1;">
            <div class="fw-semibold">{{ row.component.product.name }}</div>
            <div class="text-muted" style="font-size:0.78rem;">
                {% translate "Requis" %}: {{ row.required }}
                &nbsp;|&nbsp;
                {% translate "Dispo" %}:
                {% if row.sufficient %}
                    <span class="text-success fw-bold">{{ row.available }}</span>
                {% else %}
                    <span class="text-danger fw-bold">{{ row.available }}</span>
                {% endif %}
            </div>
        </div>
        {% if row.sufficient %}
            <i class="bi bi-check-circle-fill text-success ms-2"></i>
        {% else %}
            <i class="bi bi-exclamation-triangle-fill text-danger ms-2"></i>
        {% endif %}
    </div>
    {% endfor %}
</div>
{% endif %}

<!-- Documents -->
<div class="info-card">
    <div class="fw-semibold mb-2 small text-muted text-uppercase">
        <i class="bi bi-paperclip me-1"></i>{% translate "Documents" %}
    </div>
    <div id="mobileDocsList">
        {% load stock_custom_filters %}
        {% for doc in order.documents.all %}
        {% private_file_url doc 'file' as mob_doc_url %}
        <div class="d-flex align-items-center gap-2 border rounded p-1 mb-1" id="mdoc-{{ 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="{{ mob_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-mob-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="mobileDocsEmpty">{% translate "Aucun document joint." %}</p>
        {% endfor %}
    </div>
    {% if can_manage %}
    <div class="d-flex align-items-center gap-2 mt-2">
        <label for="mobileDetailDocInput" class="btn btn-sm btn-outline-secondary mb-0">
            <i class="bi bi-paperclip me-1"></i>{% translate "Ajouter..." %}
        </label>
        <input type="file" id="mobileDetailDocInput" multiple class="d-none"
               accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.odt,.ods,.txt">
        <span id="mobileDetailDocUploading" style="display:none;" class="text-muted small">
            <span class="spinner-border spinner-border-sm me-1"></span>{% translate "Envoi..." %}
        </span>
    </div>
    <div id="mobileDetailDocError" class="alert alert-danger mt-2 py-1 small" style="display:none;"></div>
    {% endif %}
</div>

<!-- Actions -->
{% if can_manage %}
<div class="d-grid gap-2 mt-3">
    {% if order.status == 'to_process' or order.status == 'draft' %}
        <form method="post" action="{% url 'stock:production_order_start' order.pk %}">
            {% csrf_token %}
            <input type="hidden" name="next" value="{% url 'mobile:stock_production_order_detail_mobile' order.pk %}">
            <button type="submit" class="btn btn-primary w-100" {% if not can_start %}disabled{% endif %}>
                <i class="bi bi-play-fill me-1"></i>{% translate "Démarrer la confection" %}
                {% if not can_start %}<small class="d-block opacity-75">{% translate "Stock insuffisant" %}</small>{% endif %}
            </button>
        </form>
    {% endif %}
    {% if order.status == 'in_production' %}
        <form method="post" action="{% url 'stock:production_order_complete' order.pk %}"
              onsubmit="return confirm('{% translate "Confirmer la fin de confection ? Le stock des composants sera consommé et le produit fini sera ajouté au stock." %}')">
            {% csrf_token %}
            <input type="hidden" name="next" value="{% url 'mobile:stock_production_order_detail_mobile' order.pk %}">
            <button type="submit" class="btn btn-success w-100">
                <i class="bi bi-check-circle me-1"></i>{% translate "Terminer la confection" %}
            </button>
        </form>
    {% endif %}
    {% if order.status == 'to_process' or order.status == 'draft' or order.status == 'in_production' %}
        <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 %}
</div>
{% endif %}

{% if can_manage and order.status in 'to_process,draft,in_production' %}
<!-- Modal confirmation annulation -->
<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 confection ? Cette action est irréversible." %}
            </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:production_order_cancel' order.pk %}">
                    {% csrf_token %}
                    <input type="hidden" name="next" value="{% url 'mobile:stock_production_orders_mobile' %}">
                    <button type="submit" class="btn btn-danger">
                        <i class="bi bi-x-circle me-1"></i>{% translate "Confirmer l'annulation" %}
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endif %}

{% endblock content %}

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

    const docInput     = document.getElementById('mobileDetailDocInput');
    const docsList     = document.getElementById('mobileDocsList');
    const uploading    = document.getElementById('mobileDetailDocUploading');
    const docError     = document.getElementById('mobileDetailDocError');

    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);
        uploading.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 => {
            uploading.style.display = 'none';
            docInput.value = '';
            if (data.error) { docError.textContent = data.error; docError.style.display = 'block'; return; }
            const empty = document.getElementById('mobileDocsEmpty');
            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 = `mdoc-${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-mob-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(() => {
            uploading.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-mob-doc');
        if (!btn) return;
        if (!confirm('{% translate "Supprimer ce document ?" %}')) return;
        const docId = btn.dataset.docId;
        fetch(btn.dataset.deleteUrl, {
            method: 'POST',
            headers: {'X-CSRFToken': CSRF},
        })
        .then(r => r.json())
        .then(data => {
            if (data.deleted) {
                const el = document.getElementById(`mdoc-${docId}`);
                if (el) el.remove();
                if (!docsList.querySelector('[id^="mdoc-"]')) {
                    const p = document.createElement('p');
                    p.className = 'text-muted fst-italic small mb-1';
                    p.id = 'mobileDocsEmpty';
                    p.textContent = '{% translate "Aucun document joint." %}';
                    docsList.prepend(p);
                }
            }
        });
    });
})();
</script>
{% endblock extra_scripts %}
{% endif %}