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

{% block head %}
<link rel="stylesheet" href="{% static 'common/select2.min.css' %}" />
<link rel="stylesheet" href="{% static 'common/select2-bootstrap-5-theme.min.css' %}" />
<style>
    /* ── Bordure gauche par type de mouvement ── */
    .batch-card-in       { border-left: 4px solid #198754 !important; }
    .batch-card-out      { border-left: 4px solid #dc3545 !important; }
    .batch-card-transfer { border-left: 4px solid #0dcaf0 !important; }

    /* ── En-tête teinté par type ── */
    .batch-card-in .card-header       { background-color: rgba(25, 135, 84, 0.08); }
    .batch-card-out .card-header      { background-color: rgba(220, 53, 69, 0.08); }
    .batch-card-transfer .card-header { background-color: rgba(13, 202, 240, 0.08); }

    /* ── Table produits : alternance ── */
    .batch-card .product-row-even td { background-color: rgba(0,0,0,0.04) !important; }
    .batch-card thead tr { border-bottom: 1px solid rgba(0,0,0,0.1); }
</style>
{% endblock %}

{% block content %}

<div class="container mt-2">
    <ul class="nav nav-tabs" id="tablesTab" role="tablist">
        <li class="nav-item" role="presentation">
          <button class="nav-link {% if active_tab == 'preparation-orders' or not active_tab %}active{% endif %}" id="preparation-orders-tab" data-bs-toggle="tab" data-bs-target="#preparation-orders-content" type="button" role="tab" aria-controls="preparation-orders" aria-selected="{% if active_tab == 'preparation-orders' or not active_tab %}true{% else %}false{% endif %}">
              <i class="bi bi-clipboard-check"></i> {% translate "Bons de préparation" %}
              {% if prep_counts.active %}
                  <span class="badge bg-danger rounded-pill ms-1" title="{% translate 'À traiter & en attente' %}">{{ prep_counts.active }}</span>
              {% endif %}
          </button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link {% if active_tab == 'production-orders' %}active{% endif %}" id="production-orders-tab" data-bs-toggle="tab" data-bs-target="#production-orders-content" type="button" role="tab" aria-controls="production-orders" aria-selected="{% if active_tab == 'production-orders' %}true{% else %}false{% endif %}">
              <i class="bi bi-tools"></i> {% translate "Bons de confection" %}
              {% if prod_counts.active %}
                  <span class="badge bg-danger rounded-pill ms-1" title="{% translate 'À traiter & en confection' %}">{{ prod_counts.active }}</span>
              {% elif prod_counts.to_process %}
                  <span class="badge bg-danger rounded-pill ms-1" title="{% translate 'À traiter' %}">{{ prod_counts.to_process }}</span>
              {% endif %}
          </button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link {% if active_tab == 'movements' %}active{% endif %}" id="movements-tab" data-bs-toggle="tab" data-bs-target="#movements-content" type="button" role="tab" aria-controls="movements-table" aria-selected="{% if active_tab == 'movements' %}true{% else %}false{% endif %}"><i class="bi bi-arrow-left-right"></i> {% translate "Mouvements de Stock" %}</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link {% if active_tab == 'inventories' %}active{% endif %}" id="inventories-tab" data-bs-toggle="tab" data-bs-target="#inventories-content" type="button" role="tab" aria-controls="inventories-content" aria-selected="{% if active_tab == 'inventories' %}true{% else %}false{% endif %}"><i class="bi bi-journal-check"></i> {% translate "Inventaires" %}</button>
        </li>
    </ul>
    <div class="tab-content my-2" id="tablesTabContent">
        <div class="tab-pane fade {% if active_tab == 'preparation-orders' or not active_tab %}show active{% endif %}" id="preparation-orders-content" role="tabpanel" aria-labelledby="preparation-orders-tab">
            <div id="preparation-orders-container">
                <!-- Filtres -->
                <div class="card mb-3 shadow-sm bg-light">
                    <div class="card-body py-2">
                        <form method="get" class="row g-2 align-items-center">
                            <!-- Préserver l'onglet actif -->
                            <input type="hidden" name="tab" value="preparation-orders">

                            <div class="col-md-3">
                                <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, code ou titre d\'intervention...' %}">
                                    <button type="submit" class="btn btn-primary"><i class="bi bi-search"></i></button>
                                </div>
                            </div>
                            
                            <div class="col-md-2">
                                <div class="input-group input-group-sm">
                                    <label class="input-group-text" for="filter-status"><i class="bi bi-funnel me-1"></i>{% translate "Statut" %}</label>
                                    <select class="form-select" id="filter-status" name="status" onchange="this.form.submit()">
                                        <option value="">-- {% translate "Tous les 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>
                            
                            <div class="col-md-2">
                                <div class="input-group input-group-sm">
                                    <label class="input-group-text" for="filter-priority"><i class="bi bi-exclamation-triangle me-1"></i>{% translate "Priorité" %}</label>
                                    <select class="form-select" id="filter-priority" name="priority" onchange="this.form.submit()">
                                        <option value="">-- {% translate "Toutes les 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>
                            </div>

                            <div class="col-md-3">
                                <div class="input-group input-group-sm">
                                    <label class="input-group-text" for="filter-prep-order"><i class="bi bi-arrow-down-up me-1"></i>{% translate "Tri" %}</label>
                                    <select class="form-select" id="filter-prep-order" name="prep_order" onchange="this.form.submit()">
                                        <option value="desc" {% if prep_order != 'asc' %}selected{% endif %}>{% translate "Plus récents d'abord" %}</option>
                                        <option value="asc" {% if prep_order == 'asc' %}selected{% endif %}>{% translate "Plus anciens d'abord (inversé)" %}</option>
                                    </select>
                                </div>
                            </div>
                            
                            <div class="col-md-2 d-flex justify-content-between align-items-center gap-1">
                                <div>
                                    {% if selected_status or selected_priority or search_q or prep_order == 'asc' %}
                                        <a href="?tab=preparation-orders" class="btn btn-sm btn-outline-secondary" title="{% translate 'Effacer les filtres' %}">
                                            <i class="bi bi-x-circle me-1"></i>{% translate "Effacer" %}
                                        </a>
                                    {% endif %}
                                </div>
                                {% if can_create_preparation_order %}
                                <a href="{% url 'stock:new_preparation_order' %}" class="btn btn-sm btn-primary text-nowrap">
                                    <i class="bi bi-plus-circle me-1"></i>{% translate "Nouveau bon" %}
                                </a>
                                {% endif %}
                            </div>
                        </form>
                    </div>
                </div>

                <!-- Filtres rapides par statut (Pills) -->
                <div class="d-flex flex-wrap align-items-center gap-2 mb-3">
                    <span class="small text-muted fw-semibold me-1"><i class="bi bi-funnel me-1"></i>{% translate "Vue rapide :" %}</span>
                    <a href="?tab=preparation-orders{% if search_q %}&q={{ search_q }}{% endif %}{% if selected_priority %}&priority={{ selected_priority }}{% endif %}{% if prep_order %}&prep_order={{ prep_order }}{% endif %}"
                       class="btn btn-sm py-1 px-2 {% if not selected_status %}btn-primary{% else %}btn-outline-secondary{% endif %} rounded-pill">
                        {% translate "Tous" %} <span class="badge {% if not selected_status %}bg-white text-primary{% else %}bg-secondary{% endif %} ms-1">{{ prep_counts.total|default:0 }}</span>
                    </a>
                    <a href="?tab=preparation-orders&status=active{% if search_q %}&q={{ search_q }}{% endif %}{% if selected_priority %}&priority={{ selected_priority }}{% endif %}{% if prep_order %}&prep_order={{ prep_order }}{% endif %}"
                       class="btn btn-sm py-1 px-2 {% if selected_status == 'active' %}btn-danger text-white{% else %}btn-outline-danger{% endif %} rounded-pill">
                        <i class="bi bi-play-circle me-1"></i>{% translate "À traiter & En attente" %} <span class="badge {% if selected_status == 'active' %}bg-white text-danger{% else %}bg-danger text-white{% endif %} ms-1">{{ prep_counts.active|default:0 }}</span>
                    </a>
                    <a href="?tab=preparation-orders&status=to_process{% if search_q %}&q={{ search_q }}{% endif %}{% if selected_priority %}&priority={{ selected_priority }}{% endif %}{% if prep_order %}&prep_order={{ prep_order }}{% endif %}"
                       class="btn btn-sm py-1 px-2 {% if selected_status == 'to_process' %}btn-warning text-dark{% else %}btn-outline-warning text-dark{% endif %} rounded-pill">
                        <i class="bi bi-hourglass-split me-1"></i>{% translate "À traiter" %} <span class="badge {% if selected_status == 'to_process' %}bg-dark text-white{% else %}bg-warning text-dark{% endif %} ms-1">{{ prep_counts.to_process|default:0 }}</span>
                    </a>
                    <a href="?tab=preparation-orders&status=pending{% if search_q %}&q={{ search_q }}{% endif %}{% if selected_priority %}&priority={{ selected_priority }}{% endif %}{% if prep_order %}&prep_order={{ prep_order }}{% endif %}"
                       class="btn btn-sm py-1 px-2 {% if selected_status == 'pending' %}btn-info text-white{% else %}btn-outline-info{% endif %} rounded-pill">
                        <i class="bi bi-clock me-1"></i>{% translate "En attente" %} <span class="badge {% if selected_status == 'pending' %}bg-white text-info{% else %}bg-info text-white{% endif %} ms-1">{{ prep_counts.pending|default:0 }}</span>
                    </a>
                    <a href="?tab=preparation-orders&status=processed{% if search_q %}&q={{ search_q }}{% endif %}{% if selected_priority %}&priority={{ selected_priority }}{% endif %}{% if prep_order %}&prep_order={{ prep_order }}{% endif %}"
                       class="btn btn-sm py-1 px-2 {% if selected_status == 'processed' %}btn-success{% else %}btn-outline-success{% endif %} rounded-pill">
                        <i class="bi bi-check-circle me-1"></i>{% translate "Traité" %} <span class="badge {% if selected_status == 'processed' %}bg-white text-success{% else %}bg-success text-white{% endif %} ms-1">{{ prep_counts.processed|default:0 }}</span>
                    </a>
                </div>

                {% for order in preparation_orders %}
                <div class="card mb-3 shadow-sm
                    {% if order.status == 'to_process' %}border-warning
                    {% elif order.status == 'cancelled' %}border-danger
                    {% elif order.status == 'processed' %}border-success
                    {% else %}border-secondary{% endif %}
                    " style="border-left-width: 4px !important;">

                    <!-- En-tête -->
                    <div class="card-header d-flex align-items-center gap-2 flex-wrap py-2
                        {% if order.status == 'to_process' %}bg-warning bg-opacity-10
                        {% elif order.status == 'cancelled' %}bg-danger bg-opacity-10
                        {% elif order.status == 'processed' %}bg-success bg-opacity-10
                        {% else %}bg-secondary bg-opacity-10{% endif %}">

                        <a href="{% url 'stock:preparation_order_detail' order.pk %}" class="fw-bold text-decoration-none me-1">
                            {{ order.order_number }}
                        </a>

                        {% if order.intervention %}
                            <a href="{% url 'interventions:intervention_detail' order.intervention.id %}" class="badge bg-light text-dark border text-decoration-none me-1" title="{% translate 'Intervention liée' %}">
                                <i class="bi bi-wrench me-1 text-primary"></i>{% if order.intervention.code %}{{ order.intervention.code }}{% else %}#{{ order.intervention.id }}{% endif %}{% if order.intervention.title %} — {{ order.intervention.title }}{% endif %}
                            </a>
                        {% endif %}

                        {% if order.status == 'to_process' %}
                            <span class="badge bg-warning text-dark"><i class="bi bi-hourglass-split me-1"></i>{{ order.get_status_display }}</span>
                        {% elif order.status == 'pending' %}
                            <span class="badge bg-info"><i class="bi bi-clock me-1"></i>{{ order.get_status_display }}</span>
                        {% elif order.status == 'processed' %}
                            <span class="badge bg-success"><i class="bi bi-check-circle me-1"></i>{{ order.get_status_display }}</span>
                        {% elif order.status == 'cancelled' %}
                            <span class="badge bg-danger"><i class="bi bi-x-circle me-1"></i>{{ order.get_status_display }}</span>
                        {% endif %}

                        {% if order.priority == '1' %}
                            <span class="badge bg-danger" title="{% translate 'Priorité' %}"><i class="bi bi-exclamation-triangle-fill me-1"></i>{{ order.get_priority_display }}</span>
                        {% elif order.priority == '2' %}
                            <span class="badge bg-warning text-dark" title="{% translate 'Priorité' %}"><i class="bi bi-exclamation-circle-fill me-1"></i>{{ order.get_priority_display }}</span>
                        {% elif order.priority == '3' %}
                            <span class="badge bg-primary" title="{% translate 'Priorité' %}"><i class="bi bi-info-circle-fill me-1"></i>{{ order.get_priority_display }}</span>
                        {% else %}
                            <span class="badge bg-secondary" title="{% translate 'Priorité' %}"><i class="bi bi-arrow-down-circle-fill me-1"></i>{{ order.get_priority_display }}</span>
                        {% endif %}

                        <span class="text-muted small ms-auto"><i class="bi bi-calendar3 me-1"></i>{{ order.date|date:"d/m/Y H:i" }}</span>
                        <span class="badge bg-light text-dark border"><i class="bi bi-box-seam me-1"></i>{{ order.preparationorderitem_set.count }} {% translate "article(s)" %}</span>

                        <a href="{% url 'stock:preparation_order_detail' order.pk %}" class="btn btn-sm btn-outline-primary ms-1" title="{% translate 'Voir le détail' %}">
                            <i class="bi bi-eye"></i>
                        </a>
                    </div>

                    <!-- Corps : liste des articles -->
                    <div class="card-body p-0">
                        <table class="table table-sm mb-0" style="table-layout:fixed;width:100%;">
                            <colgroup>
                                <col style="width:60%">
                                <col style="width:40%">
                            </colgroup>
                            <thead>
                                <tr style="border-bottom:1px solid rgba(0,0,0,0.1);">
                                    <th class="ps-3 text-muted small fw-semibold text-uppercase">{% translate "Produit" %}</th>
                                    <th class="text-muted small fw-semibold text-uppercase">{% translate "Quantité" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for item in order.preparationorderitem_set.all %}
                                <tr class="{% if forloop.counter|divisibleby:2 %}bg-black bg-opacity-10{% endif %}">
                                    <td class="ps-3 py-2">
                                        <i class="bi bi-box-seam me-1 text-muted"></i>{{ item.product.name }}
                                    </td>
                                    <td class="py-2 fw-semibold">{{ item.quantity }}</td>
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="2" class="text-muted fst-italic py-2 ps-3">{% translate "Aucun article." %}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
                {% empty %}
                <div class="text-center text-muted py-5">
                    <i class="bi bi-clipboard-check fs-2 d-block mb-2 opacity-50"></i>
                    {% translate "Aucun bon de préparation." %}
                </div>
                {% endfor %}
            </div>
        </div>
        <div class="tab-pane fade {% if active_tab == 'production-orders' %}show active{% endif %}" id="production-orders-content" role="tabpanel" aria-labelledby="production-orders-tab">
            <div id="production-orders-container">
                <!-- Filtres Bons de confection -->
                <div class="card mb-3 shadow-sm bg-light">
                    <div class="card-body py-2">
                        <form method="get" class="row g-2 align-items-center">
                            <!-- Préserver l'onglet actif -->
                            <input type="hidden" name="tab" value="production-orders">

                            <div class="col-md-2">
                                <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="prod_q" value="{{ prod_search_q }}" placeholder="{% translate 'Code, produit, bon...' %}">
                                    <button type="submit" class="btn btn-primary"><i class="bi bi-search"></i></button>
                                </div>
                            </div>

                            <div class="col-md-2">
                                <div class="input-group input-group-sm">
                                    <label class="input-group-text" for="filter-prod-status"><i class="bi bi-funnel me-1"></i>{% translate "Statut" %}</label>
                                    <select class="form-select" id="filter-prod-status" name="prod_status" onchange="this.form.submit()">
                                        <option value="">-- {% translate "Tous les statuts" %} --</option>
                                        {% for val, label in prod_status_choices %}
                                            <option value="{{ val }}" {% if prod_status == val %}selected{% endif %}>{{ label }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-2">
                                <div class="input-group input-group-sm">
                                    <label class="input-group-text" for="filter-prod-warehouse"><i class="bi bi-building me-1"></i>{% translate "Entrepôt" %}</label>
                                    <select class="form-select" id="filter-prod-warehouse" name="prod_warehouse" onchange="this.form.submit()">
                                        <option value="">-- {% translate "Tous entrepôts" %} --</option>
                                        {% for wh in accessible_warehouses %}
                                            <option value="{{ wh.pk }}" {% if prod_warehouse == wh.pk|stringformat:"s" %}selected{% endif %}>{{ wh.name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-2">
                                <div class="input-group input-group-sm">
                                    <label class="input-group-text" for="filter-prod-destination"><i class="bi bi-geo-alt me-1"></i>{% translate "Dest." %}</label>
                                    <select class="form-select" id="filter-prod-destination" name="prod_destination" onchange="this.form.submit()">
                                        <option value="">-- {% translate "Toutes" %} --</option>
                                        {% for val, label in prod_destination_choices %}
                                            <option value="{{ val }}" {% if prod_destination == val %}selected{% endif %}>{{ label }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-2">
                                <div class="input-group input-group-sm">
                                    <label class="input-group-text" for="filter-prod-order"><i class="bi bi-arrow-down-up me-1"></i>{% translate "Tri" %}</label>
                                    <select class="form-select" id="filter-prod-order" name="prod_order" onchange="this.form.submit()">
                                        <option value="desc" {% if prod_order != 'asc' %}selected{% endif %}>{% translate "Plus récents" %}</option>
                                        <option value="asc" {% if prod_order == 'asc' %}selected{% endif %}>{% translate "Plus anciens" %}</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-2 d-flex justify-content-end align-items-center gap-1">
                                {% if prod_status or prod_warehouse or prod_destination or prod_search_q or prod_order == 'asc' %}
                                    <a href="?tab=production-orders" class="btn btn-sm btn-outline-secondary" title="{% translate 'Effacer les filtres' %}">
                                        <i class="bi bi-x-circle me-1"></i>{% translate "Effacer" %}
                                    </a>
                                {% endif %}
                                {% if can_create_production_order %}
                                <a href="{% url 'stock:production_order_create' %}" class="btn btn-sm btn-primary text-nowrap">
                                    <i class="bi bi-plus-circle me-1"></i>{% translate "Nouveau" %}
                                </a>
                                {% endif %}
                            </div>
                        </form>
                    </div>
                </div>

                <!-- Filtres rapides par statut (Pills) -->
                <div class="d-flex flex-wrap align-items-center gap-2 mb-3">
                    <span class="small text-muted fw-semibold me-1"><i class="bi bi-funnel me-1"></i>{% translate "Vue rapide :" %}</span>
                    <a href="?tab=production-orders{% if prod_search_q %}&prod_q={{ prod_search_q }}{% endif %}{% if prod_warehouse %}&prod_warehouse={{ prod_warehouse }}{% endif %}{% if prod_destination %}&prod_destination={{ prod_destination }}{% endif %}{% if prod_order %}&prod_order={{ prod_order }}{% endif %}"
                       class="btn btn-sm py-1 px-2 {% if not prod_status %}btn-primary{% else %}btn-outline-secondary{% endif %} rounded-pill">
                        {% translate "Tous" %} <span class="badge {% if not prod_status %}bg-white text-primary{% else %}bg-secondary{% endif %} ms-1">{{ prod_counts.total|default:0 }}</span>
                    </a>
                    <a href="?tab=production-orders&prod_status=active{% if prod_search_q %}&prod_q={{ prod_search_q }}{% endif %}{% if prod_warehouse %}&prod_warehouse={{ prod_warehouse }}{% endif %}{% if prod_destination %}&prod_destination={{ prod_destination }}{% endif %}{% if prod_order %}&prod_order={{ prod_order }}{% endif %}"
                       class="btn btn-sm py-1 px-2 {% if prod_status == 'active' %}btn-danger text-white{% else %}btn-outline-danger{% endif %} rounded-pill">
                        <i class="bi bi-play-circle me-1"></i>{% translate "À traiter & En confection" %} <span class="badge {% if prod_status == 'active' %}bg-white text-danger{% else %}bg-danger text-white{% endif %} ms-1">{{ prod_counts.active|default:0 }}</span>
                    </a>
                    <a href="?tab=production-orders&prod_status=to_process{% if prod_search_q %}&prod_q={{ prod_search_q }}{% endif %}{% if prod_warehouse %}&prod_warehouse={{ prod_warehouse }}{% endif %}{% if prod_destination %}&prod_destination={{ prod_destination }}{% endif %}{% if prod_order %}&prod_order={{ prod_order }}{% endif %}"
                       class="btn btn-sm py-1 px-2 {% if prod_status == 'to_process' %}btn-danger text-white{% else %}btn-outline-danger{% endif %} rounded-pill">
                        <i class="bi bi-hourglass-split me-1"></i>{% translate "À traiter" %} <span class="badge {% if prod_status == 'to_process' %}bg-white text-danger{% else %}bg-danger text-white{% endif %} ms-1">{{ prod_counts.to_process|default:0 }}</span>
                    </a>
                    <a href="?tab=production-orders&prod_status=in_production{% if prod_search_q %}&prod_q={{ prod_search_q }}{% endif %}{% if prod_warehouse %}&prod_warehouse={{ prod_warehouse }}{% endif %}{% if prod_destination %}&prod_destination={{ prod_destination }}{% endif %}{% if prod_order %}&prod_order={{ prod_order }}{% endif %}"
                       class="btn btn-sm py-1 px-2 {% if prod_status == 'in_production' %}btn-primary{% else %}btn-outline-primary{% endif %} rounded-pill">
                        <i class="bi bi-gear-wide-connected me-1"></i>{% translate "En confection" %} <span class="badge {% if prod_status == 'in_production' %}bg-white text-primary{% else %}bg-primary text-white{% endif %} ms-1">{{ prod_counts.in_production|default:0 }}</span>
                    </a>
                    <a href="?tab=production-orders&prod_status=completed{% if prod_search_q %}&prod_q={{ prod_search_q }}{% endif %}{% if prod_warehouse %}&prod_warehouse={{ prod_warehouse }}{% endif %}{% if prod_destination %}&prod_destination={{ prod_destination }}{% endif %}{% if prod_order %}&prod_order={{ prod_order }}{% endif %}"
                       class="btn btn-sm py-1 px-2 {% if prod_status == 'completed' %}btn-success{% else %}btn-outline-success{% endif %} rounded-pill">
                        <i class="bi bi-check-circle me-1"></i>{% translate "Terminé" %} <span class="badge {% if prod_status == 'completed' %}bg-white text-success{% else %}bg-success text-white{% endif %} ms-1">{{ prod_counts.completed|default:0 }}</span>
                    </a>
                    {% if prod_counts.draft %}
                    <a href="?tab=production-orders&prod_status=draft{% if prod_search_q %}&prod_q={{ prod_search_q }}{% endif %}{% if prod_warehouse %}&prod_warehouse={{ prod_warehouse }}{% endif %}{% if prod_destination %}&prod_destination={{ prod_destination }}{% endif %}{% if prod_order %}&prod_order={{ prod_order }}{% endif %}"
                       class="btn btn-sm py-1 px-2 {% if prod_status == 'draft' %}btn-secondary{% else %}btn-outline-secondary{% endif %} rounded-pill">
                        <i class="bi bi-pencil me-1"></i>{% translate "Brouillon" %} <span class="badge {% if prod_status == 'draft' %}bg-white text-secondary{% else %}bg-secondary text-white{% endif %} ms-1">{{ prod_counts.draft|default:0 }}</span>
                    </a>
                    {% endif %}
                    {% if prod_counts.cancelled %}
                    <a href="?tab=production-orders&prod_status=cancelled{% if prod_search_q %}&prod_q={{ prod_search_q }}{% endif %}{% if prod_warehouse %}&prod_warehouse={{ prod_warehouse }}{% endif %}{% if prod_destination %}&prod_destination={{ prod_destination }}{% endif %}{% if prod_order %}&prod_order={{ prod_order }}{% endif %}"
                       class="btn btn-sm py-1 px-2 {% if prod_status == 'cancelled' %}btn-secondary{% else %}btn-outline-secondary{% endif %} rounded-pill">
                        <i class="bi bi-x-circle me-1"></i>{% translate "Annulé" %} <span class="badge {% if prod_status == 'cancelled' %}bg-white text-secondary{% else %}bg-secondary text-white{% endif %} ms-1">{{ prod_counts.cancelled|default:0 }}</span>
                    </a>
                    {% endif %}
                </div>

                {% for order in production_orders %}
                <div class="card mb-3 shadow-sm
                    {% if order.status == 'to_process' %}border-danger
                    {% elif order.status == 'in_production' %}border-primary
                    {% elif order.status == 'completed' %}border-success
                    {% elif order.status == 'cancelled' %}border-secondary
                    {% else %}border-secondary{% endif %}"
                    style="border-left-width: 4px !important;">

                    <!-- En-tête -->
                    <div class="card-header d-flex align-items-center gap-2 flex-wrap py-2
                        {% if order.status == 'to_process' %}bg-danger bg-opacity-10
                        {% elif order.status == 'in_production' %}bg-primary bg-opacity-10
                        {% elif order.status == 'completed' %}bg-success bg-opacity-10
                        {% elif order.status == 'cancelled' %}bg-secondary bg-opacity-10
                        {% else %}bg-secondary bg-opacity-10{% endif %}">

                        <a href="{% url 'stock:production_order_detail' order.pk %}" class="fw-bold text-decoration-none me-1 fs-6">
                            {{ order.code|default:order.pk }}
                        </a>

                        {% if order.destination == 'external' %}
                            <span class="badge text-white shadow-sm" style="background-color: #6610f2; font-size: 0.8rem; letter-spacing: 0.3px;">
                                <i class="bi bi-truck me-1"></i>{% translate "Externe" %}
                            </span>
                        {% endif %}

                        <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"><i class="bi bi-house me-1"></i>{% translate "Interne" %}</span>
                        {% endif %}

                        {% if order.preparation_order %}
                            <a href="{% url 'stock:preparation_order_detail' order.preparation_order.pk %}" class="badge bg-light text-dark border text-decoration-none" title="{% translate 'Bon de préparation lié' %}">
                                <i class="bi bi-clipboard-check me-1 text-primary"></i>#{{ order.preparation_order.order_number }}
                            </a>
                            {% if order.preparation_order.intervention %}
                                <a href="{% url 'interventions:intervention_detail' order.preparation_order.intervention.id %}" class="badge bg-light text-dark border text-decoration-none" title="{% translate 'Intervention liée' %}">
                                    <i class="bi bi-wrench me-1 text-primary"></i>{{ order.preparation_order.intervention.code|default:order.preparation_order.intervention.id }}{% if order.preparation_order.intervention.title %} — {{ order.preparation_order.intervention.title|truncatechars:30 }}{% endif %}
                                </a>
                            {% endif %}
                        {% endif %}

                        <span class="badge bg-light text-dark border">
                            <i class="bi bi-building me-1 text-muted"></i>{{ order.warehouse.name }}
                        </span>

                        {% if order.documents.count %}
                            <span class="badge bg-light text-muted border" title="{% translate 'Documents attachés' %}">
                                <i class="bi bi-paperclip me-1"></i>{{ order.documents.count }}
                            </span>
                        {% endif %}

                        <span class="text-muted small ms-auto"><i class="bi bi-calendar3 me-1"></i>{{ order.created_at|date:"d/m/Y H:i" }}</span>
                        <a href="{% url 'stock:production_order_detail' order.pk %}" class="btn btn-sm btn-outline-primary ms-1" title="{% translate 'Voir le détail' %}">
                            <i class="bi bi-eye"></i>
                        </a>
                    </div>

                    <!-- Corps du bon de confection -->
                    <div class="card-body p-3">
                        <div class="row align-items-center g-3">
                            <!-- Produit fini -->
                            <div class="col-md-5">
                                <div class="small text-muted text-uppercase fw-semibold mb-1">
                                    <i class="bi bi-box-seam me-1"></i>{% translate "Produit confectionné" %}
                                </div>
                                <div class="fs-6 fw-bold text-dark">
                                    {% if order.output_product %}
                                        <a href="{% url 'stock:product_detail' order.output_product.pk %}" class="text-decoration-none text-dark">
                                            {{ order.output_product.name }}
                                        </a>
                                        {% if order.output_product.code %}
                                            <span class="badge bg-light text-muted border fw-normal ms-1">{{ order.output_product.code }}</span>
                                        {% endif %}
                                    {% elif order.output_product_name %}
                                        <span>{{ order.output_product_name }}</span>
                                        <span class="badge bg-warning bg-opacity-25 text-dark border border-warning fw-normal ms-1">{% translate "Nouveau produit" %}</span>
                                    {% elif order.preparation_order_other_item %}
                                        <span>{{ order.preparation_order_other_item.description }}</span>
                                        <span class="badge bg-light text-muted border fw-normal ms-1">{% translate "Article sur mesure" %}</span>
                                    {% else %}
                                        <span class="text-muted fst-italic">{% translate "Non spécifié" %}</span>
                                    {% endif %}
                                </div>
                                {% if order.output_location %}
                                    <div class="small text-muted mt-1">
                                        <i class="bi bi-geo-alt me-1"></i>{% translate "Emplacement cible :" %} {{ order.output_location.name }}
                                    </div>
                                {% endif %}
                            </div>

                            <!-- Quantité & Destination -->
                            <div class="col-md-3">
                                <div class="d-flex flex-column gap-1">
                                    <div>
                                        <span class="text-muted small">{% translate "Quantité à concevoir :" %}</span>
                                        <span class="badge bg-primary fs-6 ms-1">{{ order.quantity }}</span>
                                    </div>
                                    <div>
                                        <span class="text-muted small">{% translate "Entrepôt :" %}</span>
                                        <strong>{{ order.warehouse.name }}</strong>
                                    </div>
                                </div>
                            </div>

                            <!-- Statut & Dates -->
                            <div class="col-md-4">
                                <div class="d-flex flex-column gap-1 small">
                                    {% if order.completed_at %}
                                    <div class="text-success fw-semibold">
                                        <i class="bi bi-check-circle me-1"></i>{% translate "Terminé le" %} {{ order.completed_at|date:"d/m/Y H:i" }}
                                    </div>
                                    {% elif order.status == 'in_production' %}
                                    <div class="text-primary fw-semibold">
                                        <i class="bi bi-gear-wide-connected me-1"></i>{% translate "En cours de confection" %}
                                    </div>
                                    {% elif order.status == 'to_process' %}
                                    <div class="text-danger fw-semibold">
                                        <i class="bi bi-hourglass-split me-1"></i>{% translate "En attente de confection" %}
                                    </div>
                                    {% endif %}
                                    {% if order.notes %}
                                    <div class="text-muted fst-italic">
                                        <i class="bi bi-chat-left-text me-1"></i>{{ order.notes|truncatechars:90 }}
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        <!-- Composants associés -->
                        {% if order.order_components.all %}
                        <div class="mt-3 pt-2 border-top">
                            <div class="d-flex justify-content-between align-items-center mb-1">
                                <span class="small text-muted fw-semibold text-uppercase">
                                    <i class="bi bi-boxes me-1"></i>{% translate "Composants requis" %} ({{ order.order_components.count }}) :
                                </span>
                            </div>
                            <div class="d-flex flex-wrap gap-2">
                                {% for comp in order.order_components.all %}
                                <span class="badge bg-light text-dark border p-2 d-inline-flex align-items-center">
                                    <i class="bi bi-box me-1 text-muted"></i>
                                    {{ comp.product.name }}
                                    <span class="badge bg-secondary ms-2" title="{% translate 'Quantité requise' %}">
                                        x{{ comp.quantity }}
                                    </span>
                                </span>
                                {% endfor %}
                            </div>
                        </div>
                        {% endif %}
                    </div>
                </div>
                {% empty %}
                <div class="text-center text-muted py-5 card shadow-sm">
                    <i class="bi bi-tools fs-1 d-block mb-2 text-secondary opacity-50"></i>
                    <h5>{% translate "Aucun bon de confection trouvé." %}</h5>
                    {% if prod_status or prod_warehouse or prod_destination or prod_search_q %}
                        <p class="small text-muted">{% translate "Aucun résultat ne correspond aux filtres appliqués." %}</p>
                        <a href="?tab=production-orders" class="btn btn-sm btn-outline-secondary mt-1">
                            <i class="bi bi-x-circle me-1"></i>{% translate "Effacer les filtres" %}
                        </a>
                    {% else %}
                        <p class="small text-muted">{% translate "Aucun bon de confection enregistré." %}</p>
                        {% if can_create_production_order %}
                        <a href="{% url 'stock:production_order_create' %}" class="btn btn-sm btn-primary mt-1">
                            <i class="bi bi-plus-circle me-1"></i>{% translate "Créer un bon de confection" %}
                        </a>
                        {% endif %}
                    {% endif %}
                </div>
                {% endfor %}
            </div>
        </div>
        <div class="tab-pane fade {% if active_tab == 'movements' %}show active{% endif %}" id="movements-content" role="tabpanel" aria-labelledby="movements-tab">
            <div id="movements-container">
                {% if can_create_movement %}
                <div class="d-flex justify-content-end align-items-center gap-2 m-2 flex-wrap">
                    <a href="{% url 'stock:new_stock_entry' %}" class="btn btn-success btn-sm">
                        <i class="bi bi-box-arrow-in-down me-1"></i> {% translate "Nouvelle entrée" %}
                    </a>
                    <a href="{% url 'stock:new_stock_exit' %}" class="btn btn-danger btn-sm">
                        <i class="bi bi-box-arrow-up me-1"></i> {% translate "Nouvelle sortie" %}
                    </a>
                    <a href="{% url 'stock:new_stock_transfer' %}" class="btn btn-info btn-sm text-white">
                        <i class="bi bi-arrow-left-right me-1"></i> {% translate "Nouveau transfert" %}
                    </a>
                </div>
                {% endif %}

                {% for batch in batches_with_movements %}
                <div class="card batch-card batch-card-{{ batch.movement_type }} mb-3 shadow-sm">

                    <!-- En-tête de la card -->
                    <div class="card-header d-flex align-items-center gap-2 py-2 flex-wrap">
                        <a href="{% url 'stock:stock_movement_batch_detail' batch.pk %}" class="fw-bold text-decoration-none me-1">#{{ batch.pk }}</a>

                        {% if batch.movement_type == 'in' %}
                            <span class="badge bg-success"><i class="bi bi-box-arrow-in-down me-1"></i>{% translate "Entrée" %}</span>
                        {% elif batch.movement_type == 'out' %}
                            <span class="badge bg-danger"><i class="bi bi-box-arrow-up me-1"></i>{% translate "Sortie" %}</span>
                        {% elif batch.movement_type == 'transfer' %}
                            <span class="badge bg-info text-dark"><i class="bi bi-arrow-left-right me-1"></i>{% translate "Transfert" %}</span>
                        {% else %}
                            <span class="badge bg-secondary">{{ batch.get_movement_type_display }}</span>
                        {% endif %}

                        {% if batch.movement_subtype %}
                            <span class="badge bg-white text-dark border">{{ batch.get_movement_subtype_display }}</span>
                        {% endif %}

                        <span class="small ms-1"><i class="bi bi-calendar3 me-1"></i>{{ batch.date|date:"d/m/Y H:i" }}</span>

                        {% if batch.created_by %}
                            <span class="text-muted small" title="{% translate 'Créé par' %}">
                                <i class="bi bi-person-gear me-1"></i>{{ batch.created_by.get_full_name|default:batch.created_by.username }}
                            </span>
                        {% endif %}
                        {% if batch.reason %}
                            <span class="text-muted small fst-italic text-truncate" style="max-width:260px;" title="{{ batch.reason }}">
                                <i class="bi bi-chat-left-text me-1"></i>{{ batch.reason }}
                            </span>
                        {% endif %}

                        {% if batch.movement_type != 'transfer' %}
                        {% if batch.person %}
                            <span class="badge bg-primary ms-auto"><i class="bi bi-person-fill me-1"></i>{{ batch.person.name }}</span>
                        {% elif batch.company %}
                            <span class="badge bg-secondary ms-auto"><i class="bi bi-building me-1"></i>{{ batch.company.name }}</span>
                        {% endif %}
                        {% endif %}
                    </div>

                    <!-- Corps : table des produits -->
                    <div class="card-body p-0">
                        <table class="table table-sm mb-0" style="table-layout:fixed;width:100%;">
                            <colgroup>
                                <col style="width:25%">
                                <col style="width:25%">
                                <col style="width:25%">
                                <col style="width:25%">
                            </colgroup>
                            <thead>
                                <tr>
                                    <th class="ps-3 text-muted small fw-semibold text-uppercase">{% translate "Produit" %}</th>
                                    <th class="text-muted small fw-semibold text-uppercase">{% translate "Quantité" %}</th>
                                    <th class="text-muted small fw-semibold text-uppercase">{% translate "Source" %}</th>
                                    <th class="text-muted small fw-semibold text-uppercase">{% translate "Destination" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for movement in batch.movements.all %}
                                <tr class="product-row-odd">
                                    <td class="ps-3 py-2">
                                        <a href="{% url 'stock:stock_movement_detail' movement.id %}" class="text-decoration-none text-reset">
                                            <i class="bi bi-box-seam me-1 text-muted"></i>{{ movement.product.name }}
                                        </a>
                                    </td>
                                    <td class="py-2">
                                        {% if movement.source_location and movement.destination_location %}
                                            <span class="text-info">{{ movement.quantity }}</span>
                                        {% elif movement.destination_location %}
                                            <span class="text-success">+{{ movement.quantity }}</span>
                                        {% else %}
                                            <span class="text-danger">-{{ movement.quantity }}</span>
                                        {% endif %}
                                    </td>
                                    <td class="py-2 text-muted small">
                                        {% if movement.source_location %}
                                            <i class="bi bi-geo-alt me-1"></i>{{ movement.source_location.name }}
                                        {% else %}—{% endif %}
                                    </td>
                                    <td class="py-2 text-muted small">
                                        {% if movement.destination_location %}
                                            <i class="bi bi-geo-alt-fill me-1"></i>{{ movement.destination_location.name }}
                                        {% else %}—{% endif %}
                                    </td>
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="4" class="text-muted fst-italic py-2 ps-3">{% translate "Aucun article." %}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
                {% empty %}
                <div class="text-center text-muted py-5">
                    <i class="bi bi-arrow-left-right fs-2 d-block mb-2 opacity-50"></i>
                    {% translate "Aucun mouvement de stock." %}
                </div>
                {% endfor %}
            </div>
        </div>
        <div class="tab-pane fade {% if active_tab == 'inventories' %}show active{% endif %}" id="inventories-content" role="tabpanel" aria-labelledby="inventories-tab">
            <div id="inventories-container">
                {% if can_create_inventory %}
                <div class="d-flex justify-content-end align-items-center m-2">
                    <a href="{% url 'stock:inventory_create' %}" class="btn btn-light">
                        <i class="bi bi-plus-circle"></i> {% translate "Nouvel inventaire" %}
                    </a>
                </div>
                {% endif %}
                {% for inventory in inventories %}
                <div class="card mb-3 shadow-sm
                    {% if inventory.status == 'validated' %}border-success
                    {% elif inventory.status == 'in_progress' %}border-primary
                    {% else %}border-secondary{% endif %}"
                    style="border-left-width: 4px !important;">

                    <!-- En-tête -->
                    <div class="card-header d-flex align-items-center gap-2 flex-wrap py-2
                        {% if inventory.status == 'validated' %}bg-success bg-opacity-10
                        {% elif inventory.status == 'in_progress' %}bg-primary bg-opacity-10
                        {% else %}bg-secondary bg-opacity-10{% endif %}">

                        <a href="{% url 'stock:inventory_detail' inventory.pk %}" class="fw-bold text-decoration-none me-1">
                            #{{ inventory.id }}
                        </a>

                        <span class="badge bg-{% if inventory.status == 'validated' %}success{% elif inventory.status == 'in_progress' %}primary{% else %}secondary{% endif %}">
                            {% if inventory.status == 'validated' %}<i class="bi bi-check-circle me-1"></i>{% elif inventory.status == 'in_progress' %}<i class="bi bi-hourglass-split me-1"></i>{% endif %}
                            {{ inventory.get_status_display }}
                        </span>

                        <span class="badge bg-light text-dark border"><i class="bi bi-geo-alt me-1"></i>{{ inventory.warehouse_location.name }}</span>
                        <span class="badge bg-light text-dark border"><i class="bi bi-building me-1"></i>{{ inventory.warehouse_location.warehouse.name }}</span>

                        <span class="text-muted small ms-auto"><i class="bi bi-calendar3 me-1"></i>{{ inventory.updated_at|date:"d/m/Y H:i" }}</span>
                        <a href="{% url 'stock:inventory_detail' inventory.pk %}" class="btn btn-sm btn-outline-primary ms-1" title="{% translate 'Voir le détail' %}">
                            <i class="bi bi-eye"></i>
                        </a>
                    </div>

                    <!-- Corps -->
                    <div class="card-body p-0">
                        <table class="table table-sm mb-0" style="table-layout:fixed;width:100%;">
                            <colgroup>
                                <col style="width:60%">
                                <col style="width:40%">
                            </colgroup>
                            <thead>
                                <tr style="border-bottom:1px solid rgba(0,0,0,0.1);">
                                    <th class="ps-3 text-muted small fw-semibold text-uppercase">{% translate "Responsable" %}</th>
                                    <th class="text-muted small fw-semibold text-uppercase">{% translate "Articles" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="ps-3 py-2">{{ inventory.performed_by|default:"-" }}</td>
                                    <td class="py-2 fw-semibold">{{ inventory.total_items }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                {% empty %}
                <div class="text-center text-muted py-5">
                    <i class="bi bi-journal-check fs-2 d-block mb-2 opacity-50"></i>
                    {% translate "Aucun inventaire enregistré." %}
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

{% endblock content%}

{% block script %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // À chaque changement d'onglet, mettre à jour ?tab= dans l'URL
    document.querySelectorAll('#tablesTab button[data-bs-toggle="tab"]').forEach(function(btn) {
        btn.addEventListener('shown.bs.tab', function() {
            const tabName = btn.id.replace('-tab', '');
            history.replaceState(null, '', '?tab=' + tabName);
        });
    });

    // Activer l'onglet indiqué par ?tab= au chargement de la page
    const tab = new URLSearchParams(window.location.search).get('tab');
    if (tab) {
        const tabBtn = document.getElementById(tab + '-tab');
        if (tabBtn) {
            tabBtn.click();
            tabBtn.blur();
        }
    }
});
</script>
{% endblock script %}