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

{% block content %}
<div class="container-fluid mt-3">
    <div class="row">
        <div class="col-12">
            <!-- En-tête -->
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h3>
                        <i class="bi bi-puzzle"></i> {{ design.name }}
                    </h3>
                    <p class="text-muted mb-0">
                        <i class="bi bi-upc"></i> {{ design.code }}
                        {% if design.category %}
                            | <i class="bi bi-tag"></i> {{ design.category.name_fr }}
                        {% endif %}
                    </p>
                </div>
                <div>
                    {% if design.status == 'active' %}
                        <span class="badge bg-success fs-5">{% translate "Actif" %}</span>
                    {% elif design.status == 'draft' %}
                        <span class="badge bg-secondary fs-5">{% translate "Brouillon" %}</span>
                    {% else %}
                        <span class="badge bg-warning fs-5">{% translate "Archivé" %}</span>
                    {% endif %}
                </div>
            </div>

            <!-- Boutons d'action -->
            <div class="mb-4">
                <a href="{% url 'stock:warehouses' %}?tab=designs" class="btn btn-secondary">
                    <i class="bi bi-arrow-left"></i> {% translate "Retour à la liste" %}
                </a>
                {% if can_manage %}
                <a href="{% url 'stock:product_design_edit' design.pk %}" class="btn btn-outline-primary">
                    <i class="bi bi-pencil"></i> {% translate "Modifier" %}
                </a>
                {% if design.status == 'active' %}
                <a href="{% url 'stock:production_order_create' %}?design={{ design.pk }}" class="btn btn-success">
                    <i class="bi bi-tools"></i> {% translate "Créer un bon de confection" %}
                </a>
                {% endif %}
                {% endif %}
            </div>

            <div class="row">
                <!-- Colonne gauche : Infos + Image -->
                <div class="col-md-4 mb-4">
                    {% if design.image %}
                    <div class="card shadow-sm mb-3">
                        <img src="{{ design.image.url }}" class="card-img-top" alt="{{ design.name }}">
                    </div>
                    {% endif %}

                    <div class="card shadow-sm mb-3">
                        <div class="card-header bg-primary text-white">
                            <h5 class="mb-0">
                                <i class="bi bi-info-circle"></i> {% translate "Informations" %}
                            </h5>
                        </div>
                        <div class="card-body">
                            <table class="table table-sm mb-0">
                                <tr>
                                    <th>{% translate "Code" %}</th>
                                    <td>{{ design.code }}</td>
                                </tr>
                                <tr>
                                    <th>{% translate "Catégorie" %}</th>
                                    <td>{{ design.category.name_fr|default:"-" }}</td>
                                </tr>
                                <tr>
                                    <th>{% translate "Composants" %}</th>
                                    <td>{{ design.total_components }}</td>
                                </tr>
                                <tr>
                                    <th>{% translate "Coût estimé" %}</th>
                                    <td>
                                        {% with cost=design.estimated_cost %}
                                            {% if cost %}{{ cost|floatformat:2 }} €{% else %}-{% endif %}
                                        {% endwith %}
                                    </td>
                                </tr>
                                <tr>
                                    <th>{% translate "Créé le" %}</th>
                                    <td>{{ design.created_at|date:"d/m/Y H:i" }}</td>
                                </tr>
                                <tr>
                                    <th>{% translate "Modifié le" %}</th>
                                    <td>{{ design.updated_at|date:"d/m/Y H:i" }}</td>
                                </tr>
                                <tr>
                                    <th>{% translate "Produit fini" %}</th>
                                    <td>
                                        {% if design.output_product %}
                                            <a href="{% url 'stock:product_detail' design.output_product.pk %}">
                                                {{ design.output_product.name }}
                                            </a>
                                        {% else %}
                                            <span class="text-muted">—</span>
                                        {% endif %}
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>

                    {% if design.description %}
                    <div class="card shadow-sm">
                        <div class="card-header">
                            <h6 class="mb-0">{% translate "Description" %}</h6>
                        </div>
                        <div class="card-body">
                            <p class="mb-0">{{ design.description }}</p>
                        </div>
                    </div>
                    {% endif %}
                </div>

                <!-- Colonne droite : Composants + Productions -->
                <div class="col-md-8">
                    <!-- Composants -->
                    <div class="card shadow-sm mb-4">
                        <div class="card-header bg-success text-white">
                            <h5 class="mb-0">
                                <i class="bi bi-boxes"></i> {% translate "Composants nécessaires" %}
                            </h5>
                        </div>
                        <div class="card-body p-0">
                            <div class="table-responsive">
                                <table class="table table-hover mb-0">
                                    <thead>
                                        <tr>
                                            <th>{% translate "Produit" %}</th>
                                            <th>{% translate "Catégorie" %}</th>
                                            <th class="text-center">{% translate "Qté requise" %}</th>
                                            <th class="text-center">{% translate "Stock total" %}</th>
                                            <th class="text-center">{% translate "Disponibilité" %}</th>
                                            <th>{% translate "Notes" %}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for info in components_info %}
                                        <tr>
                                            <td>
                                                <a href="{% url 'stock:product_detail' info.component.product.id %}">
                                                    <i class="bi bi-box-seam"></i>
                                                    {{ info.component.product.name }}
                                                </a>
                                                <br>
                                                <small class="text-muted">{{ info.component.product.code }}</small>
                                            </td>
                                            <td>{{ info.component.product.category.name_fr|default:"-" }}</td>
                                            <td class="text-center fw-bold">{{ info.component.quantity }}</td>
                                            <td class="text-center">{{ info.total_stock }}</td>
                                            <td class="text-center">
                                                {% if info.sufficient %}
                                                    <span class="badge bg-success">
                                                        <i class="bi bi-check-circle"></i> {% translate "OK" %}
                                                    </span>
                                                {% else %}
                                                    <span class="badge bg-danger">
                                                        <i class="bi bi-exclamation-triangle"></i> {% translate "Insuffisant" %}
                                                    </span>
                                                {% endif %}
                                            </td>
                                            <td>{{ info.component.notes|default:"-" }}</td>
                                        </tr>
                                        {% empty %}
                                        <tr>
                                            <td colspan="6" class="text-center text-muted">
                                                {% translate "Aucun composant défini." %}
                                            </td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <!-- Bons de confection -->
                    <div class="card shadow-sm">
                        <div class="card-header bg-info text-white d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">
                                <i class="bi bi-tools"></i> {% translate "Bons de confection" %}
                            </h5>
                            {% if design.status == 'active' and can_manage %}
                            <a href="{% url 'stock:production_order_create' %}?design={{ design.pk }}" class="btn btn-sm btn-light">
                                <i class="bi bi-plus-lg"></i> {% translate "Nouveau" %}
                            </a>
                            {% endif %}
                        </div>
                        <div class="card-body p-0">
                            <div class="table-responsive">
                                <table class="table table-hover mb-0">
                                    <thead>
                                        <tr>
                                            <th>{% translate "Code" %}</th>
                                            <th>{% translate "Entrepôt" %}</th>
                                            <th class="text-center">{% translate "Quantité" %}</th>
                                            <th>{% translate "Statut" %}</th>
                                            <th>{% translate "Date" %}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for order in production_orders %}
                                        <tr>
                                            <td>
                                                <a href="{% url 'stock:production_order_detail' order.pk %}">
                                                    {{ order.code }}
                                                </a>
                                            </td>
                                            <td>{{ order.warehouse.name }}</td>
                                            <td class="text-center">{{ order.quantity }}</td>
                                            <td>
                                                {% if order.status == 'draft' %}
                                                    <span class="badge bg-secondary">{{ order.get_status_display }}</span>
                                                {% elif order.status == 'in_production' %}
                                                    <span class="badge bg-primary">{{ order.get_status_display }}</span>
                                                {% elif order.status == 'completed' %}
                                                    <span class="badge bg-success">{{ order.get_status_display }}</span>
                                                {% else %}
                                                    <span class="badge bg-danger">{{ order.get_status_display }}</span>
                                                {% endif %}
                                            </td>
                                            <td>{{ order.created_at|date:"d/m/Y" }}</td>
                                        </tr>
                                        {% empty %}
                                        <tr>
                                            <td colspan="5" class="text-center text-muted">
                                                {% translate "Aucun bon de production." %}
                                            </td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock content %}