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

{% block title %}{% translate "Bons de confection" %}{% 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; }
    .status-pills-bar {
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }
</style>
{% endblock extra_head %}

{% block content %}
<!-- En-tête avec bouton Nouveau bon -->
<div class="d-flex justify-content-between align-items-center mb-2">
    <span class="fw-bold fs-6 text-dark">
        <i class="bi bi-tools text-primary me-1"></i>{% translate "Bons de confection" %}
    </span>
    <a href="{% url 'mobile:production_order_create_mobile' %}" class="btn btn-primary btn-sm">
        <i class="bi bi-plus-lg me-1"></i>{% translate "Nouveau bon" %}
    </a>
</div>

<!-- 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-12">
                <div class="input-group input-group-sm">
                    <span class="input-group-text"><i class="bi bi-search"></i></span>
                    <input type="text" class="form-control" name="q" value="{{ search_q }}" placeholder="{% translate 'N° bon, produit, bon de prép...' %}">
                    <button type="submit" class="btn btn-primary"><i class="bi bi-search"></i></button>
                </div>
            </div>
            <div class="col-4">
                <select class="form-select form-select-sm" name="status" onchange="this.form.submit()">
                    <option value="">-- {% translate "Statut" %} --</option>
                    {% for val, label in status_choices %}
                        <option value="{{ val }}" {% if selected_status == val %}selected{% endif %}>{{ label }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-4">
                {% if warehouses|length > 1 %}
                <select class="form-select form-select-sm" name="warehouse" onchange="this.form.submit()">
                    <option value="">-- {% translate "Entrepôt" %} --</option>
                    {% for wh in warehouses %}
                        <option value="{{ wh.pk }}" {% if selected_warehouse == wh.pk|stringformat:"s" %}selected{% endif %}>{{ wh.name }}</option>
                    {% endfor %}
                </select>
                {% else %}
                <select class="form-select form-select-sm" name="destination" onchange="this.form.submit()">
                    <option value="">-- {% translate "Dest." %} --</option>
                    {% for val, label in destination_choices %}
                        <option value="{{ val }}" {% if selected_destination == val %}selected{% endif %}>{{ label }}</option>
                    {% endfor %}
                </select>
                {% endif %}
            </div>
            <div class="col-4">
                <select class="form-select form-select-sm" name="order" onchange="this.form.submit()">
                    <option value="desc" {% if selected_order != 'asc' %}selected{% endif %}>{% translate "Plus récents" %}</option>
                    <option value="asc" {% if selected_order == 'asc' %}selected{% endif %}>{% translate "Plus anciens" %}</option>
                </select>
            </div>
            {% if selected_status or selected_warehouse or selected_destination or search_q or selected_order == 'asc' %}
            <div class="col-12 text-center mt-1">
                <a href="{% url 'mobile:stock_production_orders_mobile' %}" 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>

<!-- Filtres rapides par statut (Pills défilantes) -->
<div class="d-flex gap-1 overflow-auto pb-2 mb-2 status-pills-bar" style="white-space: nowrap;">
    <a href="?{% if search_q %}q={{ search_q }}&{% endif %}{% if selected_warehouse %}warehouse={{ selected_warehouse }}&{% endif %}{% if selected_destination %}destination={{ selected_destination }}&{% endif %}{% if selected_order %}order={{ selected_order }}&{% endif %}"
       class="badge {% if not selected_status %}bg-primary text-white{% else %}bg-light text-dark border{% endif %} text-decoration-none py-1 px-2">
        {% translate "Tous" %} ({{ prod_counts.total|default:0 }})
    </a>
    <a href="?status=active{% if search_q %}&q={{ search_q }}{% endif %}{% if selected_warehouse %}&warehouse={{ selected_warehouse }}{% endif %}{% if selected_destination %}&destination={{ selected_destination }}{% endif %}{% if selected_order %}&order={{ selected_order }}{% endif %}"
       class="badge {% if selected_status == 'active' %}bg-danger text-white{% else %}bg-light text-dark border{% endif %} text-decoration-none py-1 px-2">
        <i class="bi bi-play-circle me-1"></i>{% translate "À traiter & En confection" %} ({{ prod_counts.active|default:0 }})
    </a>
    <a href="?status=to_process{% if search_q %}&q={{ search_q }}{% endif %}{% if selected_warehouse %}&warehouse={{ selected_warehouse }}{% endif %}{% if selected_destination %}&destination={{ selected_destination }}{% endif %}{% if selected_order %}&order={{ selected_order }}{% endif %}"
       class="badge {% if selected_status == 'to_process' %}bg-danger text-white{% else %}bg-light text-dark border{% endif %} text-decoration-none py-1 px-2">
        <i class="bi bi-hourglass-split me-1"></i>{% translate "À traiter" %} ({{ prod_counts.to_process|default:0 }})
    </a>
    <a href="?status=in_production{% if search_q %}&q={{ search_q }}{% endif %}{% if selected_warehouse %}&warehouse={{ selected_warehouse }}{% endif %}{% if selected_destination %}&destination={{ selected_destination }}{% endif %}{% if selected_order %}&order={{ selected_order }}{% endif %}"
       class="badge {% if selected_status == 'in_production' %}bg-primary text-white{% else %}bg-light text-dark border{% endif %} text-decoration-none py-1 px-2">
        <i class="bi bi-gear-wide-connected me-1"></i>{% translate "En confection" %} ({{ prod_counts.in_production|default:0 }})
    </a>
    <a href="?status=completed{% if search_q %}&q={{ search_q }}{% endif %}{% if selected_warehouse %}&warehouse={{ selected_warehouse }}{% endif %}{% if selected_destination %}&destination={{ selected_destination }}{% endif %}{% if selected_order %}&order={{ selected_order }}{% endif %}"
       class="badge {% if selected_status == 'completed' %}bg-success text-white{% else %}bg-light text-dark border{% endif %} text-decoration-none py-1 px-2">
        <i class="bi bi-check-circle me-1"></i>{% translate "Terminé" %} ({{ prod_counts.completed|default:0 }})
    </a>
    {% if prod_counts.draft %}
    <a href="?status=draft{% if search_q %}&q={{ search_q }}{% endif %}{% if selected_warehouse %}&warehouse={{ selected_warehouse }}{% endif %}{% if selected_destination %}&destination={{ selected_destination }}{% endif %}{% if selected_order %}&order={{ selected_order }}{% endif %}"
       class="badge {% if selected_status == 'draft' %}bg-secondary text-white{% else %}bg-light text-dark border{% endif %} text-decoration-none py-1 px-2">
        <i class="bi bi-pencil me-1"></i>{% translate "Brouillon" %} ({{ prod_counts.draft|default:0 }})
    </a>
    {% endif %}
    {% if prod_counts.cancelled %}
    <a href="?status=cancelled{% if search_q %}&q={{ search_q }}{% endif %}{% if selected_warehouse %}&warehouse={{ selected_warehouse }}{% endif %}{% if selected_destination %}&destination={{ selected_destination }}{% endif %}{% if selected_order %}&order={{ selected_order }}{% endif %}"
       class="badge {% if selected_status == 'cancelled' %}bg-secondary text-white{% else %}bg-light text-dark border{% endif %} text-decoration-none py-1 px-2">
        <i class="bi bi-x-circle me-1"></i>{% translate "Annulé" %} ({{ prod_counts.cancelled|default:0 }})
    </a>
    {% endif %}
</div>

<!-- Liste des bons -->
{% if production_orders %}
    {% for order in production_orders %}
    <a href="{% url 'mobile:stock_production_order_detail_mobile' order.pk %}" class="list-card"
       style="border-left: 4px solid {% if order.status == 'to_process' %}#dc3545{% elif order.status == 'in_production' %}#0d6efd{% elif order.status == 'completed' %}#198754{% elif order.status == 'cancelled' %}#6c757d{% else %}#6c757d{% endif %} !important;">
        <div class="d-flex justify-content-between align-items-start">
            <div class="list-card-title text-primary d-flex align-items-center gap-1 flex-wrap">
                {{ order.code|default:order.id }}
                {% if order.destination == 'external' %}
                    <span class="badge text-white shadow-sm" style="background-color: #6610f2; font-size: 0.72rem;">
                        <i class="bi bi-truck me-1"></i>{% translate "Externe" %}
                    </span>
                {% endif %}
            </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>
                {% if order.destination == 'internal' %}
                    <span class="badge bg-light text-secondary border" style="font-size: 0.7rem;">
                        <i class="bi bi-house me-1"></i>{% translate "Interne" %}
                    </span>
                {% endif %}
            </div>
        </div>

        <!-- Produit confectionné -->
        <div class="mt-2 fw-semibold text-dark" style="font-size: 0.95rem;">
            <i class="bi bi-box-seam me-1 text-primary"></i>
            {% if order.output_product %}
                {{ order.output_product.name }}
            {% elif order.output_product_name %}
                {{ order.output_product_name }}
                <span class="badge bg-warning bg-opacity-25 text-dark border border-warning ms-1" style="font-size:0.7rem;">{% translate "Nouveau" %}</span>
            {% elif order.preparation_order_other_item %}
                {{ order.preparation_order_other_item.description }}
            {% else %}
                <span class="text-muted fst-italic">{% translate "Produit non spécifié" %}</span>
            {% endif %}
        </div>

        <!-- Bon de préparation lié si existant -->
        {% if order.preparation_order %}
        <div class="list-card-meta mt-1 text-primary">
            <i class="bi bi-clipboard-check me-1"></i>{% translate "Bon de prép." %} : <strong>#{{ order.preparation_order.order_number }}</strong>
            {% if order.preparation_order.intervention %}
                <span class="text-muted">({{ order.preparation_order.intervention.code|default:order.preparation_order.intervention.id }})</span>
            {% endif %}
        </div>
        {% endif %}

        <!-- Métadonnées : Entrepôt, Quantité, Composants, Date -->
        <div class="list-card-meta mt-2 d-flex justify-content-between align-items-center flex-wrap gap-1">
            <div>
                <span class="me-2"><i class="bi bi-building me-1"></i>{{ order.warehouse.name }}</span>
                <span class="badge bg-light text-dark border"><i class="bi bi-layers me-1"></i>{% translate "Qté" %} : <strong>{{ order.quantity }}</strong></span>
            </div>
            <div>
                {% if order.order_components.count %}
                    <span class="badge bg-light text-muted border me-1">
                        <i class="bi bi-boxes me-1"></i>{{ order.order_components.count }}
                    </span>
                {% endif %}
                <span class="small text-muted"><i class="bi bi-calendar3 me-1"></i>{{ order.created_at|date:"d/m/Y" }}</span>
            </div>
        </div>
    </a>
    {% endfor %}
{% else %}
    <div class="text-center text-muted py-5 card shadow-sm border-0">
        <i class="bi bi-tools fs-1 d-block mb-2 opacity-50"></i>
        <h6>{% translate "Aucun bon de confection." %}</h6>
        {% if selected_status or selected_warehouse or selected_destination or search_q %}
        <p class="small text-muted mb-2">{% translate "Aucun résultat pour cette recherche." %}</p>
        <a href="{% url 'mobile:stock_production_orders_mobile' %}" class="btn btn-sm btn-outline-secondary">
            <i class="bi bi-x-circle me-1"></i>{% translate "Effacer les filtres" %}
        </a>
        {% endif %}
    </div>
{% endif %}
{% endblock content %}