{% 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-3">
                <h3 class="h3 d-flex align-items-center gap-2">
                    <i class="bi bi-arrow-left-right"></i>
                    {% translate "Mouvement de stock" %} #{{ movement.pk }}
                    {% if movement.source_location and movement.destination_location %}
                        <span class="badge bg-info fs-6">{% translate "Transfert" %}</span>
                    {% elif movement.destination_location %}
                        <span class="badge bg-success fs-6">{% translate "Entrée" %}</span>
                    {% else %}
                        <span class="badge bg-danger fs-6">{% translate "Sortie" %}</span>
                    {% endif %}
                </h3>
                <a href="{% url 'stock:stock_movements' %}" class="btn btn-light">
                    <i class="bi bi-arrow-left"></i> {% translate "Retour" %}
                </a>
            </div>

            <hr>

            <!-- Cartes d'informations principales -->
            <div class="row g-3 mb-4">

                <!-- Produit -->
                <div class="col-md-4">
                    <div class="card h-100">
                        <div class="card-body">
                            <h6 class="card-subtitle mb-2 text-muted">
                                <i class="bi bi-box-seam me-1"></i>{% translate "Produit" %}
                            </h6>
                            <p class="card-text fs-5 mb-1">
                                <a href="{% url 'stock:product_detail' movement.product.pk %}">
                                    {{ movement.product.name }}
                                </a>
                            </p>
                            {% if movement.product.code %}
                            <small class="text-muted">{{ movement.product.code }}</small>
                            {% endif %}
                            {% if movement.product.category %}
                            <br><small class="text-muted">{{ movement.product.category.name_fr }}</small>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <!-- Quantité -->
                <div class="col-md-2">
                    <div class="card h-100">
                        <div class="card-body text-center">
                            <h6 class="card-subtitle mb-2 text-muted">
                                <i class="bi bi-123 me-1"></i>{% translate "Quantité" %}
                            </h6>
                            <p class="card-text fs-3 fw-bold
                                {% if movement.source_location and movement.destination_location %}text-info
                                {% elif movement.destination_location %}text-success
                                {% else %}text-danger{% endif %}">
                                {% if movement.source_location and movement.destination_location %}
                                    {{ movement.quantity }}
                                {% elif movement.destination_location %}
                                    +{{ movement.quantity }}
                                {% else %}
                                    {% if movement.quantity >= 0 %}-{% endif %}{{ movement.quantity }}
                                {% endif %}
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Date -->
                <div class="col-md-3">
                    <div class="card h-100">
                        <div class="card-body">
                            <h6 class="card-subtitle mb-2 text-muted">
                                <i class="bi bi-calendar me-1"></i>{% translate "Date" %}
                            </h6>
                            <p class="card-text fs-5">{{ movement.date|date:"d/m/Y" }}</p>
                            <small class="text-muted">{{ movement.date|date:"H:i" }}</small>
                        </div>
                    </div>
                </div>

                <!-- Raison -->
                <div class="col-md-3">
                    <div class="card h-100">
                        <div class="card-body">
                            <h6 class="card-subtitle mb-2 text-muted">
                                <i class="bi bi-chat-text me-1"></i>{% translate "Raison" %}
                            </h6>
                            {% if movement.reason %}
                                <p class="card-text">{{ movement.reason }}</p>
                            {% else %}
                                <p class="card-text text-muted fst-italic">{% translate "Aucune raison indiquée" %}</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>

            <!-- Personne -->
            {% if movement.batch and movement.batch.person or movement.batch and movement.batch.company %}{# or movement.batch and movement.batch.contract #}
            <div class="row g-3 mb-4">
                {% if movement.batch.person %}
                <div class="col-md-4">
                    <div class="card border-primary">
                        <div class="card-header bg-primary text-white d-flex align-items-center gap-2">
                            <i class="bi bi-person-fill"></i>
                            <strong>{% translate "Personne" %}</strong>
                        </div>
                        <div class="card-body">
                            <p class="card-text fs-5 mb-1">{{ movement.batch.person.name }}</p>
                            <small class="text-muted">{{ movement.batch.person.teams_display }}</small>
                        </div>
                    </div>
                </div>
                {% endif %}
                {% if movement.batch.company %}
                <div class="col-md-4">
                    <div class="card border-secondary">
                        <div class="card-header bg-secondary text-white d-flex align-items-center gap-2">
                            <i class="bi bi-building"></i>
                            <strong>{% translate "Entreprise / Organisation" %}</strong>
                        </div>
                        <div class="card-body">
                            <p class="card-text fs-5 mb-1">{{ movement.batch.company.name }}</p>
                        </div>
                    </div>
                </div>
                {% endif %}
                {% comment %}{% if movement.batch.contract %}
                <div class="col-md-4">
                    <div class="card border-warning">
                        <div class="card-header bg-warning text-dark d-flex align-items-center gap-2">
                            <i class="bi bi-file-earmark-text-fill"></i>
                            <strong>{% translate "Contrat" %}</strong>
                        </div>
                        <div class="card-body">
                            <p class="card-text fs-5 mb-1">{{ movement.batch.contract.contract_number }}</p>
                            {% if movement.batch.contract.company %}
                            <small class="text-muted">{{ movement.batch.contract.company.name }}</small>
                            {% endif %}
                        </div>
                    </div>
                </div>
                {% endif %}{% endcomment %}
            </div>
            {% endif %}

            {% if movement.batch %}
            <div class="mb-3">
                <a href="{% url 'stock:stock_movement_batch_detail' movement.batch.pk %}" class="btn btn-sm btn-outline-secondary">
                    <i class="bi bi-collection me-1"></i>{% translate "Voir le lot complet" %} #{{ movement.batch.pk }}
                </a>
            </div>
            {% endif %}

            <!-- Emplacements -->
            <div class="row g-3 mb-4">

                <!-- Source -->
                <div class="col-md-6">
                    <div class="card {% if not movement.source_location %}border-secondary{% endif %}">
                        <div class="card-header bg-light d-flex align-items-center gap-2">
                            <i class="bi bi-box-arrow-up-right text-danger"></i>
                            <strong>{% translate "Emplacement source" %}</strong>
                        </div>
                        <div class="card-body">
                            {% if movement.source_location %}
                                <p class="mb-1 fs-5">
                                    <a href="{% url 'stock:warehouse_location_detail' movement.source_location.pk %}">
                                        {{ movement.source_location.name }}
                                    </a>
                                </p>
                                <small class="text-muted">
                                    <i class="bi bi-building me-1"></i>
                                    <a href="{% url 'stock:warehouse_detail' movement.source_location.warehouse.pk %}">
                                        {{ movement.source_location.warehouse.name }}
                                    </a>
                                </small>
                            {% else %}
                                <p class="text-muted fst-italic mb-0">
                                    {% translate "Aucun emplacement source (entrée directe)" %}
                                </p>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <!-- Destination -->
                <div class="col-md-6">
                    <div class="card {% if not movement.destination_location %}border-secondary{% endif %}">
                        <div class="card-header bg-light d-flex align-items-center gap-2">
                            <i class="bi bi-box-arrow-in-down-right text-success"></i>
                            <strong>{% translate "Emplacement destination" %}</strong>
                        </div>
                        <div class="card-body">
                            {% if movement.destination_location %}
                                <p class="mb-1 fs-5">
                                    <a href="{% url 'stock:warehouse_location_detail' movement.destination_location.pk %}">
                                        {{ movement.destination_location.name }}
                                    </a>
                                </p>
                                <small class="text-muted">
                                    <i class="bi bi-building me-1"></i>
                                    <a href="{% url 'stock:warehouse_detail' movement.destination_location.warehouse.pk %}">
                                        {{ movement.destination_location.warehouse.name }}
                                    </a>
                                </small>
                            {% else %}
                                <p class="text-muted fst-italic mb-0">
                                    {% translate "Aucun emplacement destination (sortie directe)" %}
                                </p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
{% endblock content %}