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

{% block title %}{% translate "Commande" %} {{ purchase_order.code }}{% endblock title %}

{% block upleft %}
<a href="{% url 'mobile:stock_purchases_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.fully-received {
        border-color: #198754;
        background: #f0fff4;
    }
    .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;
    }
    .reception-input {
        width: 80px;
        text-align: center;
    }
</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">{{ purchase_order.code }}</h5>
        <small class="text-muted"><i class="bi bi-calendar3 me-1"></i>{{ purchase_order.date_ordered|date:"d/m/Y" }}</small>
    </div>
    {% if purchase_order.status == 'pending' %}
        <span class="badge bg-warning text-dark fs-6">{% translate "En attente" %}</span>
    {% elif purchase_order.status == 'ordered' %}
        <span class="badge bg-info text-dark fs-6">{% translate "Envoyée" %}</span>
    {% elif purchase_order.status == 'partial' %}
        <span class="badge bg-warning text-dark fs-6">{% translate "Partiellement reçue" %}</span>
    {% elif purchase_order.status == 'received' %}
        <span class="badge bg-success fs-6">{% translate "Reçue" %}</span>
    {% elif purchase_order.status == 'cancelled' %}
        <span class="badge bg-secondary fs-6">{% translate "Annulée" %}</span>
    {% else %}
        <span class="badge bg-light text-dark fs-6">{{ purchase_order.get_status_display }}</span>
    {% endif %}
</div>

<!-- Informations générales -->
<div class="info-card">
    <div class="section-title"><i class="bi bi-info-circle"></i>{% translate "Informations" %}</div>
    <div class="info-row">
        <span class="info-label"><i class="bi bi-shop me-1"></i>{% translate "Fournisseur" %}</span>
        <span class="info-value fw-semibold">{{ purchase_order.supplier.name }}</span>
    </div>
    {% if purchase_order.supplier.contact_email %}
    <div class="info-row">
        <span class="info-label"><i class="bi bi-envelope me-1"></i>{% translate "Email" %}</span>
        <span class="info-value">
            <a href="mailto:{{ purchase_order.supplier.contact_email }}">{{ purchase_order.supplier.contact_email }}</a>
        </span>
    </div>
    {% endif %}
    {% if purchase_order.supplier.phone_number %}
    <div class="info-row">
        <span class="info-label"><i class="bi bi-telephone me-1"></i>{% translate "Tél." %}</span>
        <span class="info-value">
            <a href="tel:{{ purchase_order.supplier.phone_number }}">{{ purchase_order.supplier.phone_number }}</a>
        </span>
    </div>
    {% endif %}
    <div class="info-row">
        <span class="info-label"><i class="bi bi-building me-1"></i>{% translate "Entrepôt" %}</span>
        <span class="info-value">{{ purchase_order.warehouse.name }}</span>
    </div>
    <div class="info-row">
        <span class="info-label"><i class="bi bi-calendar3 me-1"></i>{% translate "Date" %}</span>
        <span class="info-value">{{ purchase_order.date_ordered|date:"d/m/Y" }}</span>
    </div>
    {% if purchase_order.received_at %}
    <div class="info-row">
        <span class="info-label"><i class="bi bi-box-arrow-in-down me-1"></i>{% translate "Réceptionnée le" %}</span>
        <span class="info-value">{{ purchase_order.received_at|date:"d/m/Y H:i" }}</span>
    </div>
    {% endif %}
</div>

<!-- QR Code -->
{% if 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="{{ qr_code }}" alt="QR Code {{ purchase_order.code }}" style="max-width: 150px;">
    <p class="text-muted mt-1 mb-0" style="font-size:0.78rem;">{{ purchase_order.code }}</p>
</div>
{% endif %}

<!-- Articles commandés -->
{% if items_with_stock %}
<div class="section-title mt-2">
    <i class="bi bi-box-seam"></i>{% translate "Articles commandés" %}
    <span class="badge bg-secondary ms-1" style="font-size:0.7rem;">{{ items_with_stock|length }}</span>
</div>
{% for row in items_with_stock %}
<div class="product-card {% if row.item.is_fully_received %}fully-received{% endif %}">
    <div class="d-flex justify-content-between align-items-start">
        <div class="fw-semibold" style="font-size:0.92rem; flex:1;">{{ row.item.product.name }}</div>
        {% if row.item.is_fully_received %}
            <span class="badge bg-success ms-2"><i class="bi bi-check-lg"></i></span>
        {% else %}
            <span class="badge bg-primary ms-2">{{ row.item.quantity }} {{ row.item.product.unit }}</span>
        {% endif %}
    </div>
    <div class="product-meta mt-1">
        <code>{{ row.item.product.code }}</code>
        {% if row.item.product.category %}
            &nbsp;·&nbsp;{{ row.item.product.category.name_fr }}
        {% endif %}
    </div>
    <div class="product-meta mt-1">
        <i class="bi bi-geo-alt me-1"></i>{{ row.item.location.warehouse.name }} — {{ row.item.location.name }}
    </div>
    {% if row.item.num_articles and row.item.quantity_per_article %}
    <div class="product-meta mt-1">
        <i class="bi bi-layers me-1"></i>{{ row.item.num_articles }} × {{ row.item.quantity_per_article }} {{ row.item.product.unit }}
    </div>
    {% endif %}
    {% if purchase_order.status != 'pending' %}
    <div class="d-flex gap-3 mt-2" style="font-size:0.82rem;">
        <span>
            <i class="bi bi-cart me-1 text-muted"></i>{% translate "Commandé" %}:
            <span class="badge bg-primary">{{ row.item.quantity }} {{ row.item.product.unit }}</span>
        </span>
        <span>
            <i class="bi bi-check2 me-1 text-muted"></i>{% translate "Reçu" %}:
            <span class="badge {% if row.item.received_quantity > 0 %}bg-success{% else %}bg-light text-muted border{% endif %}">
                {{ row.item.received_quantity }} {{ row.item.product.unit }}
            </span>
        </span>
        {% if not row.item.is_fully_received %}
        <span>
            <i class="bi bi-hourglass-split me-1 text-muted"></i>{% translate "A livrer" %}:
            <span class="badge bg-warning text-dark">{{ row.item.remaining_quantity }} {{ row.item.product.unit }}</span>
        </span>
        {% endif %}
    </div>
    {% endif %}
</div>
{% endfor %}
{% else %}
<div class="text-center text-muted py-4">
    <i class="bi bi-inbox fs-2 d-block mb-2"></i>
    {% translate "Aucun article dans cette commande." %}
</div>
{% endif %}

<!-- Actions -->
{% if can_manage_purchase %}
<div class="d-grid gap-2 mt-3">
    {% if purchase_order.status == 'pending' %}
        <a href="{% url 'stock:purchase_order_edit' purchase_order.pk %}" class="btn btn-warning">
            <i class="bi bi-pencil me-1"></i>{% translate "Modifier" %}
        </a>
        <form method="post" action="{% url 'stock:purchase_order_ordered' purchase_order.pk %}">
            {% csrf_token %}
            <button type="submit" class="btn btn-info w-100">
                <i class="bi bi-send me-1"></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 me-1"></i>{% translate "Réceptionner" %}
        </button>
        <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 la commande" %}
        </button>
    {% endif %}
    <a href="{% url 'stock:purchase_order_pdf' purchase_order.pk %}" class="btn btn-outline-secondary" target="_blank">
        <i class="bi bi-file-earmark-pdf me-1"></i>{% translate "Télécharger PDF" %}
    </a>
</div>
{% endif %}

<!-- Modal réception partielle -->
{% 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-dialog-centered modal-dialog-scrollable">
        <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 me-2"></i>{% translate "Réceptionner les 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." %}
                    </p>
                    {% for row in items_with_stock %}
                    <div class="mb-3 p-2 border rounded {% if row.item.is_fully_received %}bg-light{% endif %}">
                        <div class="fw-semibold" style="font-size:0.9rem;">{{ row.item.product.name }}</div>
                        <div class="product-meta mb-2">
                            <i class="bi bi-geo-alt me-1"></i>{{ row.item.location.warehouse.name }} — {{ row.item.location.name }}
                        </div>
                        <div class="d-flex align-items-center justify-content-between">
                            <div style="font-size:0.82rem;">
                                <span class="text-muted">{% translate "A livrer" %}:</span>
                                <strong>{{ row.item.remaining_quantity }} {{ row.item.product.unit }}</strong>
                            </div>
                            {% if row.item.is_fully_received %}
                                <input type="hidden" name="qty_{{ row.item.pk }}" value="0">
                                <span class="badge bg-success"><i class="bi bi-check-lg"></i> {% translate "Reçu" %}</span>
                            {% else %}
                                <input type="number"
                                       name="qty_{{ row.item.pk }}"
                                       value="{{ row.item.remaining_quantity }}"
                                       min="0"
                                       max="{{ row.item.remaining_quantity }}"
                                       class="form-control reception-input reception-qty"
                                       data-max="{{ row.item.remaining_quantity }}">
                            {% endif %}
                        </div>
                    </div>
                    {% endfor %}
                </div>
                <div class="modal-footer flex-column gap-2">
                    <div class="d-flex gap-2 w-100">
                        <button type="button" class="btn btn-outline-secondary btn-sm flex-fill" id="btn-tout-vider">
                            <i class="bi bi-dash-circle"></i> {% translate "Tout vider" %}
                        </button>
                        <button type="button" class="btn btn-outline-success btn-sm flex-fill" id="btn-tout-selectionner">
                            <i class="bi bi-check-all"></i> {% translate "Tout sélectionner" %}
                        </button>
                    </div>
                    <div class="d-flex gap-2 w-100">
                        <button type="button" class="btn btn-secondary flex-fill" data-bs-dismiss="modal">{% translate "Retour" %}</button>
                        <button type="submit" class="btn btn-success flex-fill">
                            <i class="bi bi-box-arrow-in-down me-1"></i>{% translate "Réceptionner" %}
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
{% endif %}

<!-- Modal confirmation annulation -->
{% if can_manage_purchase and purchase_order.status != 'received' and purchase_order.status != 'cancelled' %}
<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 cette commande ?" %}
            </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:purchase_order_cancel' purchase_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 %}

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

{% endblock content %}