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

{% block content %}
<div class="container mt-3">
    <div class="row">
        <div class="col-lg-8 mx-auto">

            <!-- En-tête -->
            <div class="mb-4">
                <h3>
                    <i class="bi bi-box-seam"></i>
                    {% translate "Nouveau produit à l'emplacement" %} — {{ location.name }}
                </h3>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">
                            <a href="{% url 'stock:warehouses' %}?tab=products">{% translate "Produits" %}</a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="{% url 'stock:warehouse_location_detail' location.id %}">{{ location.name }}</a>
                        </li>
                        <li class="breadcrumb-item active">
                            {% translate "Nouveau produit" %}
                        </li>
                    </ol>
                </nav>
            </div>

            <!-- Formulaire -->
            <div class="card shadow-sm">
                <div class="card-body">
                    <form method="post">
                        {% csrf_token %}

                        {% if form.non_field_errors %}
                        <div class="alert alert-danger">
                            {{ form.non_field_errors }}
                        </div>
                        {% endif %}

                        <!-- Identification -->
                        <h6 class="text-muted text-uppercase fw-semibold mb-3 border-bottom pb-1">
                            {% translate "Identification" %}
                        </h6>

                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <label for="{{ form.code.id_for_label }}" class="form-label">
                                    {{ form.code.label }} <span class="text-danger">*</span>
                                </label>
                                {{ form.code }}
                                {% if form.code.errors %}
                                <div class="text-danger small mt-1">{{ form.code.errors }}</div>
                                {% endif %}
                                <div class="form-text">
                                    <i class="bi bi-lock"></i> {% translate "Généré automatiquement" %}
                                </div>
                            </div>

                            <div class="col-md-4 mb-3">
                                <label for="{{ form.sku.id_for_label }}" class="form-label">
                                    {{ form.sku.label }} <span class="text-danger">*</span>
                                </label>
                                {{ form.sku }}
                                {% if form.sku.errors %}
                                <div class="text-danger small mt-1">{{ form.sku.errors }}</div>
                                {% endif %}
                                <div class="form-text">
                                    <i class="bi bi-lock"></i> {% translate "Généré automatiquement" %}
                                </div>
                            </div>

                            <div class="col-md-4 mb-3">
                                <label for="{{ form.category.id_for_label }}" class="form-label">
                                    {{ form.category.label }}
                                </label>
                                {{ form.category }}
                                {% if form.category.errors %}
                                <div class="text-danger small mt-1">{{ form.category.errors }}</div>
                                {% endif %}
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="{{ form.name.id_for_label }}" class="form-label">
                                {{ form.name.label }} <span class="text-danger">*</span>
                            </label>
                            {{ form.name }}
                            {% if form.name.errors %}
                            <div class="text-danger small mt-1">{{ form.name.errors }}</div>
                            {% endif %}
                        </div>

                        <div class="mb-3">
                            <label for="{{ form.description.id_for_label }}" class="form-label">
                                {{ form.description.label }}
                            </label>
                            {{ form.description }}
                            {% if form.description.errors %}
                            <div class="text-danger small mt-1">{{ form.description.errors }}</div>
                            {% endif %}
                        </div>

                        <!-- Traçabilité -->
                        <h6 class="text-muted text-uppercase fw-semibold mb-3 border-bottom pb-1 mt-4">
                            {% translate "Traçabilité" %}
                        </h6>

                        <div class="mb-3">
                            <div class="form-check">
                                {{ form.is_serialized }}
                                <label class="form-check-label" for="{{ form.is_serialized.id_for_label }}">
                                    {{ form.is_serialized.label }}
                                </label>
                            </div>
                            {% if form.is_serialized.help_text %}
                            <div class="form-text">{{ form.is_serialized.help_text }}</div>
                            {% endif %}
                            {% if form.is_serialized.errors %}
                            <div class="text-danger small mt-1">{{ form.is_serialized.errors }}</div>
                            {% endif %}
                        </div>

                        <!-- Unité, prix & seuil -->
                        <h6 class="text-muted text-uppercase fw-semibold mb-3 border-bottom pb-1 mt-4">
                            {% translate "Stock & tarification" %}
                        </h6>

                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <label for="{{ form.unit.id_for_label }}" class="form-label">
                                    {{ form.unit.label }} <span class="text-danger">*</span>
                                </label>
                                {{ form.unit }}
                                {% if form.unit.errors %}
                                <div class="text-danger small mt-1">{{ form.unit.errors }}</div>
                                {% endif %}
                            </div>

                            <div class="col-md-4 mb-3">
                                <label for="{{ form.price.id_for_label }}" class="form-label">
                                    {{ form.price.label }}
                                </label>
                                <div class="input-group">
                                    {{ form.price }}
                                    <span class="input-group-text">€</span>
                                </div>
                                {% if form.price.errors %}
                                <div class="text-danger small mt-1">{{ form.price.errors }}</div>
                                {% endif %}
                            </div>

                            <div class="col-md-4 mb-3">
                                <label for="{{ form.threshold.id_for_label }}" class="form-label">
                                    {{ form.threshold.label }}
                                    <span class="text-danger">*</span>
                                    <i class="bi bi-info-circle text-muted"
                                       data-bs-toggle="tooltip"
                                       title="{% translate 'Quantité minimale déclenchant une alerte de stock' %}"></i>
                                </label>
                                {{ form.threshold }}
                                {% if form.threshold.errors %}
                                <div class="text-danger small mt-1">{{ form.threshold.errors }}</div>
                                {% endif %}
                            </div>
                        </div>

                        <!-- Association & Quantité -->
                        <h6 class="text-muted text-uppercase fw-semibold mb-3 border-bottom pb-1 mt-4">
                            {% translate "Association & Quantité" %}
                        </h6>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-semibold">
                                    {% translate "Emplacement d'association" %}
                                </label>
                                <input type="text" class="form-control bg-light" value="{{ location.warehouse.name }} — {{ location.name }}" readonly>
                                <div class="form-text">
                                    {% translate "Le produit sera automatiquement lié à cet emplacement." %}
                                </div>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="{{ form.quantity.id_for_label }}" class="form-label fw-semibold">
                                    {{ form.quantity.label }} <span class="text-danger">*</span>
                                </label>
                                {{ form.quantity }}
                                {% if form.quantity.errors %}
                                <div class="text-danger small mt-1">{{ form.quantity.errors }}</div>
                                {% endif %}
                                <div class="form-text">
                                    {% translate "Quantité initiale de départ à cet emplacement." %}
                                </div>
                            </div>
                        </div>

                        <!-- Emplacements autorisés -->
                        <h6 class="text-muted text-uppercase fw-semibold mb-3 border-bottom pb-1 mt-4">
                            {% translate "Restrictions d'emplacement" %}
                        </h6>

                        <div class="mb-3">
                            <label for="{{ form.authorized_locations.id_for_label }}" class="form-label fw-semibold">
                                {{ form.authorized_locations.label }}
                            </label>
                            {{ form.authorized_locations }}
                            {% if form.authorized_locations.errors %}
                            <div class="text-danger small mt-1">{{ form.authorized_locations.errors }}</div>
                            {% endif %}
                            <div class="form-text">
                                {{ form.authorized_locations.help_text }}
                            </div>
                        </div>

                        <!-- Boutons -->
                        <div class="d-flex justify-content-between mt-4">
                            <a href="{% url 'stock:warehouse_location_detail' location.id %}"
                               class="btn btn-light">
                                <i class="bi bi-arrow-left"></i> {% translate "Annuler" %}
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-check-lg"></i>
                                {% translate "Créer le produit" %}
                            </button>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>
</div>

<script>
// Activer tous les tooltips Bootstrap
document.addEventListener('DOMContentLoaded', function () {
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    tooltipTriggerList.forEach(function (el) {
        new bootstrap.Tooltip(el);
    });
});
</script>
{% endblock content %}