{% load i18n %}

<div class="row justify-content-center mt-3">
    <div class="col-md-12">
        <div class="card section-card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h3 class="card-title mb-0"><i class="bi bi-boxes icon me-2"></i>{% translate "Stock" %}</h3>
                <a href="{% url 'stock:warehouses' %}" class="btn btn-sm btn-outline-primary">
                    <i class="bi bi-boxes"></i> {% translate "Entrepôts" %}
                </a>
            </div>
            <div class="card-body">
                <div class="row g-3">

                    {# ===== Bons de préparation ===== #}
                    <div class="col-md-4">
                        <div class="card h-100 border-primary shadow-sm">
                            <div class="card-header bg-primary text-white d-flex align-items-center">
                                <a href="{% url 'stock:stock_movements' %}" class="text-white text-decoration-none fw-semibold small text-uppercase flex-grow-1" style="letter-spacing:.04em;">
                                    <i class="bi bi-clipboard-check me-2"></i>{% translate "Bons de préparation" %}
                                </a>
                            </div>
                            <div class="text-center py-3 border-bottom">
                                <a href="{% url 'stock:stock_movements' %}" class="text-decoration-none">
                                    <span class="display-5 fw-bold text-primary">{{ preparation_order_to_process_count }}</span>
                                </a>
                                <div class="text-muted small">{% translate "à traiter" %}</div>
                            </div>
                            <ul class="list-group list-group-flush">
                                {% for order in preparation_order_to_process_list %}
                                <li class="list-group-item px-3 py-1">
                                    <a href="{% url 'stock:preparation_order_detail' order.pk %}" class="text-decoration-none d-block">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <span class="fw-semibold text-primary">#{{ order.order_number }}</span>
                                            <span class="badge {{ order.status_badge_class }} ms-1">{{ order.get_status_display }}</span>
                                        </div>
                                        <small class="text-muted">
                                            <i class="bi bi-calendar3 me-1"></i>{{ order.date|date:"d/m/Y" }}
                                            {% if order.requester %}&middot; {{ order.requester|truncatechars:30 }}{% endif %}
                                        </small>
                                    </a>
                                </li>
                                {% empty %}
                                <li class="list-group-item text-center text-muted py-3 small">
                                    <i class="bi bi-check-circle text-success me-1"></i>{% translate "Aucun bon à traiter" %}
                                </li>
                                {% endfor %}
                            </ul>
                            <div class="card-footer text-center small bg-transparent">
                                <a href="{% url 'stock:stock_movements' %}" class="text-muted text-decoration-none">
                                    <i class="bi bi-arrow-right-circle me-1"></i>{% translate "Voir tous" %}
                                </a>
                            </div>
                        </div>
                    </div>

                    {# ===== Bons de confection ===== #}
                    <div class="col-md-4">
                        <div class="card h-100 border-info shadow-sm">
                            <div class="card-header bg-info text-white d-flex align-items-center">
                                <a href="{% url 'stock:stock_movements' %}#production-orders-content" class="text-white text-decoration-none fw-semibold small text-uppercase flex-grow-1" style="letter-spacing:.04em;">
                                    <i class="bi bi-tools me-2"></i>{% translate "Bons de confection" %}
                                </a>
                            </div>
                            <div class="text-center py-3 border-bottom">
                                <a href="{% url 'stock:stock_movements' %}#production-orders-content" class="text-decoration-none">
                                    <span class="display-5 fw-bold text-info">{{ production_order_to_process_count }}</span>
                                </a>
                                <div class="text-muted small">{% translate "à traiter" %}</div>
                            </div>
                            <ul class="list-group list-group-flush">
                                {% for order in production_order_to_process_list %}
                                <li class="list-group-item px-3 py-1">
                                    <a href="{% url 'stock:production_order_detail' order.pk %}" class="text-decoration-none d-block">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <span class="fw-semibold text-info">{{ order.code }}</span>
                                            <span class="badge {{ order.status_badge_class }} ms-1">{{ order.get_status_display }}</span>
                                        </div>
                                        <small class="text-muted">
                                            &middot; <i class="bi bi-calendar3 me-1"></i>{{ order.created_at|date:"d/m/Y" }}
                                        </small>
                                    </a>
                                </li>
                                {% empty %}
                                <li class="list-group-item text-center text-muted py-3 small">
                                    <i class="bi bi-check-circle text-success me-1"></i>{% translate "Aucun bon à traiter" %}
                                </li>
                                {% endfor %}
                            </ul>
                            <div class="card-footer text-center small bg-transparent">
                                <a href="{% url 'stock:stock_movements' %}#production-orders-content" class="text-muted text-decoration-none">
                                    <i class="bi bi-arrow-right-circle me-1"></i>{% translate "Voir tous" %}
                                </a>
                            </div>
                        </div>
                    </div>

                    {# ===== Commandes en attente ===== #}
                    <div class="col-md-4">
                        <div class="card h-100 border-dark shadow-sm">
                            <div class="card-header bg-dark text-white d-flex align-items-center">
                                <a href="{% url 'stock:stock_purchases' %}" class="text-white text-decoration-none fw-semibold small text-uppercase flex-grow-1" style="letter-spacing:.04em;">
                                    <i class="bi bi-cart4 me-2"></i>{% translate "Commandes" %}
                                </a>
                            </div>
                            <div class="text-center py-3 border-bottom">
                                <a href="{% url 'stock:stock_purchases' %}" class="text-decoration-none">
                                    <span class="display-5 fw-bold text-dark">{{ pending_purchase_orders_count }}</span>
                                </a>
                                <div class="text-muted small">{% translate "en attente" %}</div>
                            </div>
                            <ul class="list-group list-group-flush">
                                {% for po in pending_purchase_orders_list %}
                                <li class="list-group-item px-3 py-1">
                                    <a href="{% url 'stock:purchase_order_detail' po.pk %}" class="text-decoration-none d-block">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <span class="fw-semibold text-dark small">{{ po.code }}</span>
                                            <span class="badge
                                                {% if po.status == 'pending' %}bg-secondary
                                                {% elif po.status == 'ordered' %}bg-primary
                                                {% else %}bg-warning text-dark{% endif %}">
                                                {{ po.get_status_display }}
                                            </span>
                                        </div>
                                        <small class="text-muted">
                                            <i class="bi bi-truck me-1"></i>{{ po.supplier.name|truncatechars:25 }}
                                        </small>
                                    </a>
                                </li>
                                {% empty %}
                                <li class="list-group-item text-center text-muted py-3 small">
                                    <i class="bi bi-check-circle text-success me-1"></i>{% translate "Aucune commande en attente" %}
                                </li>
                                {% endfor %}
                            </ul>
                            <div class="card-footer text-center small bg-transparent">
                                <a href="{% url 'stock:stock_purchases' %}" class="text-muted text-decoration-none">
                                    <i class="bi bi-arrow-right-circle me-1"></i>{% translate "Voir toutes les commandes" %}
                                </a>
                            </div>
                        </div>
                    </div>

                    

                </div>{# /row g-3 #}

                {# ===== Ligne 2 : Commandes & Prêts ===== #}
                <div class="row g-3 mt-1">

                    {# ===== Alertes stock insuffisant ===== #}
                    <div class="col-md-6">
                        <div class="card h-100 border-warning shadow-sm">
                            <div class="card-header bg-warning text-dark d-flex align-items-center">
                                <a href="{% url 'stock:stock_alerts' %}" class="text-dark text-decoration-none fw-semibold small text-uppercase flex-grow-1" style="letter-spacing:.04em;">
                                    <i class="bi bi-exclamation-triangle me-2"></i>{% translate "Stock insuffisant" %}
                                </a>
                            </div>
                            <ul class="list-group list-group-flush">
                                {% for alert in stock_low_alerts_list %}
                                <li class="list-group-item px-3 py-1">
                                    <a href="{% url 'stock:product_detail' alert.product.pk %}" class="text-decoration-none d-block">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <span class="fw-semibold text-warning text-truncate me-2" style="max-width:65%;">{{ alert.product.name }}</span>
                                            <span class="badge bg-danger">{{ alert.current_quantity }} / {{ alert.product.threshold }} {{ alert.product.unit }}</span>
                                        </div>
                                        <small class="text-muted">
                                            <i class="bi bi-building me-1"></i>{{ alert.warehouse.name }}
                                        </small>
                                    </a>
                                </li>
                                {% empty %}
                                <li class="list-group-item text-center text-muted py-3 small">
                                    <i class="bi bi-check-circle text-success me-1"></i>{% translate "Aucune alerte active" %}
                                </li>
                                {% endfor %}
                            </ul>
                            <div class="card-footer text-center small bg-transparent">
                                <a href="{% url 'stock:stock_alerts' %}" class="text-muted text-decoration-none">
                                    <i class="bi bi-arrow-right-circle me-1"></i>{% translate "Voir toutes les alertes" %}
                                </a>
                            </div>
                        </div>
                    </div>

                    {# ===== Articles en prêt non retournés ===== #}
                    <div class="col-md-6">
                        <div class="card h-100 border-secondary shadow-sm">
                            <div class="card-header bg-secondary text-white d-flex align-items-center justify-content-between">
                                <a href="{% url 'stock:stock_movements' %}?tab=movements&subtype=loan" class="text-white text-decoration-none fw-semibold small text-uppercase flex-grow-1" style="letter-spacing:.04em;">
                                    <i class="bi bi-person-walking me-2"></i>{% translate "Articles en prêt" %}
                                </a>
                                <span class="badge bg-light text-dark fs-6">{{ loan_items_total }}</span>
                            </div>
                            <div class="card-body py-2">
                                {# Badges par période #}
                                <div class="d-flex gap-2 flex-wrap mb-2">
                                    <span class="badge {% if loan_items_gt_1m > 0 %}bg-warning text-dark{% else %}bg-light text-muted border{% endif %}">
                                        <i class="bi bi-clock me-1"></i>&gt; 1 mois : {{ loan_items_gt_1m }}
                                    </span>
                                    <span class="badge {% if loan_items_gt_3m > 0 %}bg-danger{% else %}bg-light text-muted border{% endif %}">
                                        <i class="bi bi-clock-history me-1"></i>&gt; 3 mois : {{ loan_items_gt_3m }}
                                    </span>
                                    <span class="badge {% if loan_items_gt_6m > 0 %}bg-dark{% else %}bg-light text-muted border{% endif %}">
                                        <i class="bi bi-exclamation-octagon me-1"></i>&gt; 6 mois : {{ loan_items_gt_6m }}
                                    </span>
                                </div>
                                {# Liste des prêts en cours #}
                                <ul class="list-group list-group-flush">
                                    {% for item in loan_items_list %}
                                    <li class="list-group-item px-2 py-1">
                                        <a href="{% url 'stock:stock_movement_batch_detail' item.batch.pk %}" class="text-decoration-none d-block">
                                            <div class="d-flex justify-content-between align-items-center flex-wrap gap-1">
                                                <span class="fw-semibold text-truncate me-2" style="max-width:55%;">
                                                    <i class="bi bi-box-seam me-1 text-muted"></i>{{ item.product.name }}
                                                </span>
                                                <div class="d-flex gap-1 align-items-center">
                                                    {% if item.batch.person %}
                                                        <span class="badge bg-primary"><i class="bi bi-person-fill me-1"></i>{{ item.batch.person.name|truncatechars:20 }}</span>
                                                    {% elif item.batch.company %}
                                                        <span class="badge bg-secondary"><i class="bi bi-building me-1"></i>{{ item.batch.company.name|truncatechars:20 }}</span>
                                                    {% endif %}
                                                    <span class="badge {{ item.age_css }}">
                                                        <i class="bi bi-calendar3 me-1"></i>{{ item.loan_date|date:"d/m/Y" }}
                                                    </span>
                                                    {% if item.quantity > 1 %}
                                                        <span class="badge bg-light text-dark border">×{{ item.quantity }}</span>
                                                    {% endif %}
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    {% empty %}
                                    <li class="list-group-item text-center text-muted py-3 small">
                                        <i class="bi bi-check-circle text-success me-1"></i>{% translate "Aucun article en prêt en cours" %}
                                    </li>
                                    {% endfor %}
                                </ul>
                            </div>
                            {% if loan_items_total > 8 %}
                            <div class="card-footer text-center small bg-transparent">
                                <a href="{% url 'stock:stock_movements' %}" class="text-muted text-decoration-none">
                                    <i class="bi bi-arrow-right-circle me-1"></i>{% translate "Voir tous" %} ({{ loan_items_total }})
                                </a>
                            </div>
                            {% endif %}
                        </div>
                    </div>

                </div>{# /row ligne 2 #}

            </div>{# /card-body #}
        </div>
    </div>
</div>