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

{% 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-cart"></i> {% translate "Bon de commande" %} {{ purchase_order.code }}
                    </h3>
                    <p class="text-muted mb-0">
                        {% translate "Date" %}: {{ purchase_order.date_ordered|date:"d/m/Y" }}
                    </p>
                </div>
                <div>
                    <a href="{% url 'stock:stock_purchases' %}" class="btn btn-secondary">
                        <i class="bi bi-arrow-left"></i> {% translate "Retour" %}
                    </a>
                    <a href="{% url 'stock:purchase_order_pdf' purchase_order.pk %}" class="btn btn-outline-secondary" target="_blank">
                        <i class="bi bi-file-earmark-pdf"></i> {% translate "PDF" %}
                    </a>
                    <a href="{% url 'stock:purchase_order_xlsx' purchase_order.pk %}" class="btn btn-outline-success">
                        <i class="bi bi-file-earmark-excel"></i> {% translate "Excel" %}
                    </a>
                    {% if can_manage_purchase %}
                        {% if purchase_order.status == 'pending' %}
                            <a href="{% url 'stock:purchase_order_edit' purchase_order.pk %}" class="btn btn-warning">
                                <i class="bi bi-pencil"></i> {% translate "Modifier" %}
                            </a>
                        {% endif %}
                        {% if purchase_order.status == 'pending' %}
                            <form method="post" action="{% url 'stock:purchase_order_ordered' purchase_order.pk %}" class="d-inline">
                                {% csrf_token %}
                                <button type="submit" class="btn btn-info">
                                    <i class="bi bi-send"></i> {% translate "Marquer comme envoyée" %}
                                </button>
                            </form>
                        {% endif %}
                        {% if purchase_order.status != 'received' and purchase_order.status != 'cancelled' %}
                            <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#receptionModal">
                                <i class="bi bi-box-arrow-in-down"></i> {% translate "Réceptionner" %}
                            </button>
                            <form method="post" action="{% url 'stock:purchase_order_cancel' purchase_order.pk %}" class="d-inline">
                                {% csrf_token %}
                                <button type="submit" class="btn btn-danger" onclick="return confirm('{% translate "Annuler ce bon de commande ?" %}');">
                                    <i class="bi bi-x-circle"></i> {% translate "Annuler" %}
                                </button>
                            </form>
                        {% endif %}
                    {% endif %}
                </div>
            </div>

            <div class="row">
                <!-- Informations générales -->
                <div class="col-md-4 mb-4">
                    <div class="card shadow-sm">
                        <div class="card-header bg-primary text-white">
                            <h5 class="mb-0">
                                <i class="bi bi-info-circle"></i> {% translate "Informations" %}
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <strong>{% translate "Code" %}:</strong><br>
                                <span class="fs-5 font-monospace">{{ purchase_order.code }}</span>
                            </div>
                            
                            <div class="mb-3">
                                <strong>{% translate "Statut" %}:</strong><br>
                                <span class="badge bg-{% if purchase_order.status == 'received' %}success{% elif purchase_order.status == 'partial' %}warning text-dark{% elif purchase_order.status == 'ordered' %}info{% elif purchase_order.status == 'cancelled' %}secondary{% else %}warning text-dark{% endif %} fs-6 mt-1">
                                    {{ purchase_order.get_status_display }}
                                </span>
                            </div>
                            
                            <div class="mb-3">
                                <strong>{% translate "Fournisseur" %}:</strong><br>
                                <span class="fs-5">{{ purchase_order.supplier.name }}</span>
                                {% if purchase_order.supplier.contact_email %}
                                    <br><small><i class="bi bi-envelope"></i> {{ purchase_order.supplier.contact_email }}</small>
                                {% endif %}
                                {% if purchase_order.supplier.phone_number %}
                                    <br><small><i class="bi bi-telephone"></i> {{ purchase_order.supplier.phone_number }}</small>
                                {% endif %}
                            </div>
                            
                            <div class="mb-3">
                                <strong>{% translate "Entrepôt" %}:</strong><br>
                                <span class="fs-5">{{ purchase_order.warehouse.name }}</span>
                            </div>
                            
                            {% if purchase_order.request_for_quote %}
                            <div class="mb-3">
                                <strong>{% translate "Demande d'offre d'origine" %}:</strong><br>
                                <span class="fs-5 font-monospace"><a href="{% url 'stock:request_for_quote_detail' purchase_order.request_for_quote.pk %}">{{ purchase_order.request_for_quote.code }}</a></span>
                            </div>
                            {% endif %}
                            
                            <div class="mb-0">
                                <strong>{% translate "Date de commande" %}:</strong><br>
                                {{ purchase_order.date_ordered|date:"d/m/Y" }}
                            </div>
                            
                            <hr>
                            
                            <div class="text-center">
                                <strong class="d-block mb-2">{% translate "QR Code" %}</strong>
                                <img src="{{ qr_code }}" alt="QR Code" class="img-fluid" style="max-width: 200px;">
                                <br>
                                <small class="text-muted">UUID: {{ purchase_order.uuid }}</small>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Articles commandés -->
                <div class="col-md-8 mb-4">
                    <div class="card shadow-sm">
                        <div class="card-header bg-info text-white">
                            <h5 class="mb-0">
                                <i class="bi bi-box-seam"></i> {% translate "Articles commandés" %}
                            </h5>
                        </div>
                        <div class="card-body">
                            {% if purchase_order.items.all %}
                                <div class="table-responsive">
                                    <table class="table table-hover">
                                        <thead>
                                            <tr>
                                                <th>{% translate "Code" %}</th>
                                                <th>{% translate "Produit" %}</th>
                                                <th>{% translate "Unité" %}</th>
                                                <th>{% translate "Emplacement" %}</th>
                                                <th class="text-center" title="{% translate 'Quantité commandée dans ce bon de commande' %}">{% translate "Commandé" %}</th>
                                                <th class="text-center">{% translate "Reçu" %}</th>
                                                <th class="text-center">{% translate "A livrer" %}</th>
                                                <th class="text-end">{% translate "P.Unit HTVA" %}</th>
                                                <th class="text-center">{% translate "TVA" %}</th>
                                                <th class="text-end">{% translate "Total HTVA" %}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for row in items_with_stock %}
                                                <tr class="{% if row.item.is_fully_received %}table-success{% endif %}">
                                                    <td>
                                                        <code>{{ row.item.product.code }}</code>
                                                    </td>
                                                    <td>
                                                        <strong>{{ row.item.product.name }}</strong>
                                                    </td>
                                                    <td>
                                                        <span class="badge bg-light text-dark border">{{ row.item.product.get_unit_display }}</span>
                                                    </td>
                                                    <td>
                                                        <i class="bi bi-geo-alt"></i> {{ row.item.location.warehouse.name }} - {{ row.item.location.name }}
                                                    </td>
                                                    <td class="text-center">
                                                        {% if row.item.num_articles and row.item.quantity_per_article %}
                                                            <span class="badge bg-primary" title="{{ row.item.num_articles }} &times; {{ row.item.quantity_per_article }} {{ row.item.product.get_unit_display }}">
                                                                {{ row.item.num_articles }} &times; {{ row.item.quantity_per_article }} {{ row.item.product.unit }}
                                                            </span>
                                                            <br>
                                                            <small class="text-muted">= {{ row.item.quantity }} {{ row.item.product.unit }}</small>
                                                        {% else %}
                                                            <span class="badge bg-primary">{{ row.item.quantity }} {{ row.item.product.unit }}</span>
                                                        {% endif %}
                                                    </td>
                                                    <td class="text-center">
                                                        {% if row.item.received_quantity > 0 %}
                                                            <span class="badge bg-success">{{ row.item.received_quantity }} {{ row.item.product.unit }}</span>
                                                        {% else %}
                                                            <span class="badge bg-light text-muted border">0</span>
                                                        {% endif %}
                                                    </td>
                                                    <td class="text-center">
                                                        {% if row.item.is_fully_received %}
                                                            <span class="badge bg-success"><i class="bi bi-check-lg"></i></span>
                                                        {% else %}
                                                            <span class="badge bg-warning text-dark">{{ row.item.remaining_quantity }} {{ row.item.product.unit }}</span>
                                                        {% endif %}
                                                    </td>
                                                    <td class="text-end">
                                                        {% if row.item.unit_price is not None %}
                                                            {{ row.item.unit_price|floatformat:2 }} EUR
                                                        {% else %}
                                                            —
                                                        {% endif %}
                                                    </td>
                                                    <td class="text-center">
                                                        {% if row.item.unit_price is not None %}
                                                            {{ row.item.vat_rate }}%
                                                        {% else %}
                                                            —
                                                        {% endif %}
                                                    </td>
                                                    <td class="text-end fw-bold">
                                                        {% if row.item.unit_price is not None %}
                                                            {{ row.item.net_amount|floatformat:2 }} EUR
                                                        {% else %}
                                                            —
                                                        {% endif %}
                                                    </td>
                                                </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                                
                                <!-- Résumé -->
                                <div class="mt-3 p-3 bg-light rounded shadow-sm">
                                    <div class="row mb-2">
                                        <div class="col-md-6">
                                            <strong>{% translate "Total articles commandés" %}:</strong>
                                        </div>
                                        <div class="col-md-6 text-end">
                                            <span class="fs-6">{{ total_quantity }}</span>
                                        </div>
                                    </div>
                                    <hr class="my-2">
                                    <div class="row mb-2">
                                        <div class="col-md-6">
                                            <strong>{% translate "Valeur totale net HTVA" %}:</strong>
                                        </div>
                                        <div class="col-md-6 text-end">
                                            <span class="fs-6 fw-bold">{{ purchase_order.total_net_amount|floatformat:2 }} EUR</span>
                                        </div>
                                    </div>
                                    <div class="row mb-2">
                                        <div class="col-md-6">
                                            <strong>{% translate "Total TVA" %}:</strong>
                                        </div>
                                        <div class="col-md-6 text-end">
                                            <span class="fs-6 text-muted">{{ purchase_order.total_vat_amount|floatformat:2 }} EUR</span>
                                        </div>
                                    </div>
                                    <div class="row border-top pt-2">
                                        <div class="col-md-6">
                                            <strong class="fs-5">{% translate "Valeur Totale (TTC)" %}:</strong>
                                        </div>
                                        <div class="col-md-6 text-end">
                                            <span class="fs-5 fw-bold text-success">{{ purchase_order.total_amount|floatformat:2 }} EUR</span>
                                        </div>
                                    </div>
                                </div>
                            {% else %}
                                <div class="text-center text-muted py-4">
                                    <i class="bi bi-inbox" style="font-size: 2rem;"></i>
                                    <p class="mb-0">{% translate "Aucun article dans cette commande" %}</p>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <!-- Documents -->
                <div class="col-12 mb-4">
                    <div class="card shadow-sm">
                        <div class="card-header bg-secondary text-white d-flex justify-content-between align-items-center">
                            <h5 class="mb-0"><i class="bi bi-paperclip"></i> {% translate "Documents" %}</h5>
                            {% if can_manage_purchase %}
                            <label class="btn btn-sm btn-light mb-0" for="doc-upload-input">
                                <i class="bi bi-upload"></i> {% translate "Ajouter" %}
                            </label>
                            <input type="file" id="doc-upload-input" multiple class="d-none" accept="*/*">
                            {% endif %}
                        </div>
                        <div class="card-body">
                            <div id="documents-list">
                                {% if documents %}
                                    <div class="row g-2" id="doc-items">
                                        {% for doc in documents %}
                                        <div class="col-md-3 col-sm-4 col-6" id="doc-item-{{ doc.id }}">
                                            <div class="border rounded p-2 text-center position-relative">
                                                {% if doc.is_image %}
                                                    <a href="{{ doc.url }}" target="_blank">
                                                        <img src="{{ doc.url }}" class="img-fluid rounded mb-1" style="max-height:80px;object-fit:cover;">
                                                    </a>
                                                {% else %}
                                                    <a href="{{ doc.url }}" target="_blank" class="d-block mb-1">
                                                        <i class="bi bi-file-earmark fs-2 text-secondary"></i>
                                                    </a>
                                                {% endif %}
                                                <small class="d-block text-truncate" title="{{ doc.filename }}">{{ doc.filename }}</small>
                                                <small class="text-muted">{{ doc.uploaded_at }}</small>
                                                {% if can_manage_purchase %}
                                                <button type="button" class="btn btn-sm btn-outline-danger mt-1 doc-delete-btn"
                                                        data-delete-url="{{ doc.delete_url }}" data-doc-id="{{ doc.id }}">
                                                    <i class="bi bi-trash"></i>
                                                </button>
                                                {% endif %}
                                            </div>
                                        </div>
                                        {% endfor %}
                                    </div>
                                {% else %}
                                    <p class="text-muted mb-0" id="no-docs-msg">{% translate "Aucun document associé." %}</p>
                                    <div class="row g-2 d-none" id="doc-items"></div>
                                {% endif %}
                            </div>
                            <div id="doc-upload-progress" class="mt-2"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal de réception -->
{% if can_manage_purchase and purchase_order.status != 'received' and purchase_order.status != 'cancelled' %}
<div class="modal fade" id="receptionModal" tabindex="-1" aria-labelledby="receptionModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title" id="receptionModalLabel">
                    <i class="bi bi-box-arrow-in-down"></i> {% translate "Réception des articles" %}
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form method="post" action="{% url 'stock:purchase_order_receive_items' purchase_order.pk %}">
                {% csrf_token %}
                <div class="modal-body">
                    <p class="text-muted small mb-3">
                        {% translate "Indiquez la quantité à réceptionner pour chaque article. Laissez à 0 pour ignorer un article." %}
                    </p>
                    <div class="table-responsive">
                        <table class="table table-sm align-middle">
                            <thead class="table-light">
                                <tr>
                                    <th>{% translate "Produit" %}</th>
                                    <th class="text-center">{% translate "Commandé" %}</th>
                                    <th class="text-center">{% translate "Déjà reçu" %}</th>
                                    <th class="text-center">{% translate "A livrer" %}</th>
                                    <th class="text-center" style="min-width:120px;">{% translate "Qté reçue" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for row in items_with_stock %}
                                    <tr {% if row.item.is_fully_received %}class="table-success text-muted"{% endif %}>
                                        <td>
                                            <strong>{{ row.item.product.name }}</strong>
                                            <br><small class="text-muted">{{ row.item.location.warehouse.name }} – {{ row.item.location.name }}</small>
                                        </td>
                                        <td class="text-center">{{ row.item.quantity }} {{ row.item.product.unit }}</td>
                                        <td class="text-center">
                                            {% if row.item.received_quantity > 0 %}
                                                <span class="text-success fw-bold">{{ row.item.received_quantity }}</span>
                                            {% else %}
                                                0
                                            {% endif %}
                                        </td>
                                        <td class="text-center">
                                            {% if row.item.is_fully_received %}
                                                <span class="badge bg-success"><i class="bi bi-check-lg"></i></span>
                                            {% else %}
                                                <strong>{{ row.item.remaining_quantity }}</strong>
                                            {% endif %}
                                        </td>
                                        <td class="text-center">
                                            {% if row.item.is_fully_received %}
                                                <input type="number" name="qty_{{ row.item.pk }}" value="0" min="0" max="0" class="form-control form-control-sm text-center" disabled>
                                                <input type="hidden" name="qty_{{ row.item.pk }}" value="0">
                                            {% else %}
                                                <input type="number"
                                                       name="qty_{{ row.item.pk }}"
                                                       value="{{ row.item.remaining_quantity }}"
                                                       min="0"
                                                       max="{{ row.item.remaining_quantity }}"
                                                       class="form-control form-control-sm text-center reception-qty"
                                                       data-max="{{ row.item.remaining_quantity }}">
                                            {% endif %}
                                        </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <div>
                        <button type="button" class="btn btn-outline-secondary btn-sm" id="btn-tout-vider">
                            <i class="bi bi-dash-circle"></i> {% translate "Vider toutes les qtés" %}
                        </button>
                        <button type="button" class="btn btn-outline-success btn-sm" id="btn-tout-selectionner">
                            <i class="bi bi-check-all"></i> {% translate "Remplir toutes les qtés" %}
                        </button>
                    </div>
                    <div>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% translate "Annuler" %}</button>
                        <button type="submit" class="btn btn-success">
                            <i class="bi bi-box-arrow-in-down"></i> {% translate "Réceptionner" %}
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('btn-tout-selectionner').addEventListener('click', function () {
        document.querySelectorAll('.reception-qty').forEach(function (input) {
            input.value = input.dataset.max;
        });
    });
    document.getElementById('btn-tout-vider').addEventListener('click', function () {
        document.querySelectorAll('.reception-qty').forEach(function (input) {
            input.value = 0;
        });
    });
});
</script>
{% endif %}

{% if can_manage_purchase %}
<script>
(function() {
    const uploadInput = document.getElementById('doc-upload-input');
    const uploadUrl = "{% url 'stock:purchase_order_document_upload' purchase_order.pk %}";
    const csrfToken = "{{ csrf_token }}";
    const docItems = document.getElementById('doc-items');
    const noDocsMsg = document.getElementById('no-docs-msg');
    const progressArea = document.getElementById('doc-upload-progress');

    function addDocCard(doc) {
        if (noDocsMsg) noDocsMsg.classList.add('d-none');
        docItems.classList.remove('d-none');
        const col = document.createElement('div');
        col.className = 'col-md-3 col-sm-4 col-6';
        col.id = 'doc-item-' + doc.id;
        col.innerHTML = `<div class="border rounded p-2 text-center position-relative">
            ${doc.is_image
                ? `<a href="${doc.url}" target="_blank"><img src="${doc.url}" class="img-fluid rounded mb-1" style="max-height:80px;object-fit:cover;"></a>`
                : `<a href="${doc.url}" target="_blank" class="d-block mb-1"><i class="bi bi-file-earmark fs-2 text-secondary"></i></a>`}
            <small class="d-block text-truncate" title="${doc.filename}">${doc.filename}</small>
            <small class="text-muted">${doc.uploaded_at}</small>
            <button type="button" class="btn btn-sm btn-outline-danger mt-1 doc-delete-btn"
                    data-delete-url="${doc.delete_url}" data-doc-id="${doc.id}">
                <i class="bi bi-trash"></i>
            </button>
        </div>`;
        docItems.appendChild(col);
    }

    if (uploadInput) {
        uploadInput.addEventListener('change', function() {
            const files = this.files;
            if (!files.length) return;
            progressArea.innerHTML = '<div class="spinner-border spinner-border-sm text-primary" role="status"></div> {% translate "Envoi en cours..." %}';
            const formData = new FormData();
            for (const f of files) formData.append('documents', f);
            fetch(uploadUrl, {
                method: 'POST',
                headers: {'X-CSRFToken': csrfToken},
                body: formData,
            })
            .then(r => r.json())
            .then(data => {
                progressArea.innerHTML = '';
                if (data.created) {
                    data.created.forEach(addDocCard);
                } else {
                    progressArea.innerHTML = '<span class="text-danger">' + (data.error || '{% translate "Erreur" %}') + '</span>';
                }
                uploadInput.value = '';
            })
            .catch(() => {
                progressArea.innerHTML = '<span class="text-danger">{% translate "Erreur réseau." %}</span>';
                uploadInput.value = '';
            });
        });
    }

    document.getElementById('documents-list').addEventListener('click', function(e) {
        const btn = e.target.closest('.doc-delete-btn');
        if (!btn) return;
        if (!confirm('{% translate "Supprimer ce document ?" %}')) return;
        const deleteUrl = btn.dataset.deleteUrl;
        const docId = btn.dataset.docId;
        fetch(deleteUrl, {
            method: 'POST',
            headers: {'X-CSRFToken': csrfToken},
        })
        .then(r => r.json())
        .then(data => {
            if (data.deleted) {
                const card = document.getElementById('doc-item-' + docId);
                if (card) card.remove();
                if (!docItems.children.length) {
                    docItems.classList.add('d-none');
                    if (noDocsMsg) noDocsMsg.classList.remove('d-none');
                }
            }
        });
    });
})();
</script>
{% endif %}

{% endblock content %}