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

{% block title %}{% translate "Bons de préparation" %}{% endblock title %}

{% block upleft %}
<a href="{% url 'mobile:stock_index_mobile' %}" class="nav-link" style="color: white;">
    <i class="bi bi-arrow-left fs-3"></i>
</a>
{% endblock upleft %}

{% block extra_head %}
<style>
    .list-card {
        border-radius: 0.75rem;
        border: 1px solid #dee2e6;
        background: #fff;
        padding: 1rem;
        margin-bottom: 0.75rem;
        text-decoration: none;
        color: inherit;
        display: block;
        box-shadow: 0 2px 6px rgba(47,62,139,0.06);
        transition: transform 0.15s, box-shadow 0.15s;
    }
    .list-card:hover, .list-card:focus {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(47,62,139,0.12);
        color: inherit;
    }
    .list-card-title { font-weight: 600; font-size: 1rem; }
    .list-card-meta { font-size: 0.83rem; color: #6c757d; }
</style>
{% endblock extra_head %}

{% block content %}

<!-- Filtres mobiles -->
<div class="card mb-3 shadow-sm bg-light border-0">
    <div class="card-body p-2">
        <form method="get" class="row g-2">
            <div class="col-6">
                <select class="form-select form-select-sm" name="status" onchange="this.form.submit()">
                    <option value="">-- {% translate "Tous statuts" %} --</option>
                    {% for val, label in preparation_order_status_choices %}
                        <option value="{{ val }}" {% if selected_status == val %}selected{% endif %}>{{ label }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-6">
                <select class="form-select form-select-sm" name="priority" onchange="this.form.submit()">
                    <option value="">-- {% translate "Toutes priorités" %} --</option>
                    {% for val, label in preparation_order_priority_choices %}
                        <option value="{{ val }}" {% if selected_priority == val %}selected{% endif %}>{{ label }}</option>
                    {% endfor %}
                </select>
            </div>
            {% if selected_status or selected_priority %}
            <div class="col-12 text-center mt-1">
                <a href="?" class="btn btn-sm btn-outline-secondary py-0" style="font-size:0.75rem;">
                    <i class="bi bi-x-circle me-1"></i>{% translate "Effacer les filtres" %}
                </a>
            </div>
            {% endif %}
        </form>
    </div>
</div>

{% if preparation_orders %}
    {% for order in preparation_orders %}
    <a href="{% url 'mobile:stock_preparation_order_detail_mobile' order.pk %}" class="list-card">
        <div class="d-flex justify-content-between align-items-start">
            <div class="list-card-title"># {{ order.order_number }}</div>
            <div class="d-flex flex-column align-items-end gap-1">
                <span class="badge {{ order.status_badge_class }}">
                    <i class="bi {{ order.status_icon }} me-1"></i>{{ order.get_status_display }}
                </span>
                <span class="badge {{ order.priority_badge_class }}">
                    {{ order.get_priority_display }}
                </span>
            </div>
        </div>
        <div class="list-card-meta mt-1">
            <span class="me-3"><i class="bi bi-calendar3 me-1"></i>{{ order.date|date:"d/m/Y" }}</span>
            <span><i class="bi bi-list-ul me-1"></i>{{ order.preparationorderitem_set.count }} {% translate "article(s)" %}</span>
        </div>
        {% if order.intervention %}
        <div class="list-card-meta mt-1">
            <i class="bi bi-wrench me-1"></i>{% translate "Intervention" %} #{{ order.intervention.id }}
        </div>
        {% endif %}
    </a>
    {% endfor %}
{% else %}
    <div class="text-center text-muted py-5">
        <i class="bi bi-clipboard-check fs-1 d-block mb-2"></i>
        {% translate "Aucun bon de préparation." %}
    </div>
{% endif %}
{% endblock content %}