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

{% block head %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css">
<style>
  .select2-container .select2-selection--single {
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
  }
  .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.5;
    color: #212529;
    padding-left: 0;
  }
  .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(1.5em + 0.75rem);
  }
  .select2-container--default .select2-selection--single .select2-selection__clear {
    margin-right: 20px;
  }
</style>
{% endblock head %}

{% block content %}
<div class="container mt-3">
    <div class="row">
        <div class="col-lg-10 mx-auto">
            <!-- En-tête -->
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h3>
                    <i class="bi bi-puzzle"></i>
                    {% if action == 'create' %}
                        {% translate "Nouvelle conception de produit" %}
                    {% else %}
                        {% translate "Modifier la conception" %}: {{ design.name }}
                    {% endif %}
                </h3>
                <a href="{% url 'stock:production_center' %}" class="btn btn-secondary">
                    <i class="bi bi-arrow-left"></i> {% translate "Retour" %}
                </a>
            </div>

            <form method="post" enctype="multipart/form-data">
                {% csrf_token %}

                <!-- Informations générales -->
                <div class="card shadow-sm mb-4">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0">
                            <i class="bi bi-info-circle"></i> {% translate "Informations générales" %}
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <label for="{{ form.code.id_for_label }}" class="form-label">
                                    {% translate "Code" %} <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>
                            <div class="col-md-8 mb-3">
                                <label for="{{ form.name.id_for_label }}" class="form-label">
                                    {% translate "Nom" %} <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>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.category.id_for_label }}" class="form-label">
                                    {% translate "Catégorie" %}
                                </label>
                                {{ form.category }}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.status.id_for_label }}" class="form-label">
                                    {% translate "Statut" %}
                                </label>
                                {{ form.status }}
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="{{ form.description.id_for_label }}" class="form-label">
                                {% translate "Description" %}
                            </label>
                            {{ form.description }}
                        </div>
                        <div class="mb-3">
                            <label for="{{ form.image.id_for_label }}" class="form-label">
                                {% translate "Image" %}
                            </label>
                            {{ form.image }}
                        </div>
                    </div>
                </div>

                <!-- Entrepôt et emplacement -->
                <div class="card shadow-sm mb-4">
                    <div class="card-header bg-warning text-dark">
                        <h5 class="mb-0">
                            <i class="bi bi-building"></i> {% translate "Entrepôt & Emplacement de production" %}
                        </h5>
                    </div>
                    <div class="card-body">
                        <p class="text-muted small">
                            <i class="bi bi-info-circle"></i>
                            {% translate "L'entrepôt et l'emplacement définis ici seront utilisés par défaut lors de la création d'un bon de production depuis un bon de préparation." %}
                        </p>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.warehouse.id_for_label }}" class="form-label">
                                    {% translate "Entrepôt de production" %}
                                </label>
                                {{ form.warehouse }}
                                {% if form.warehouse.errors %}
                                    <div class="text-danger small mt-1">{{ form.warehouse.errors }}</div>
                                {% endif %}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.default_location.id_for_label }}" class="form-label">
                                    {% translate "Emplacement par défaut" %}
                                </label>
                                {{ form.default_location }}
                                <div class="form-text">{% translate "Choisissez d'abord un entrepôt." %}</div>
                                {% if form.default_location.errors %}
                                    <div class="text-danger small mt-1">{{ form.default_location.errors }}</div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="{{ form.output_product.id_for_label }}" class="form-label">
                                {% translate "Produit fini par défaut" %}
                            </label>
                            {{ form.output_product }}
                            <div class="form-text">{% translate "Produit existant à réapprovisionner automatiquement quand un bon de confection basé sur cette conception est terminé." %}</div>
                            {% if form.output_product.errors %}
                                <div class="text-danger small mt-1">{{ form.output_product.errors }}</div>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <!-- 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 (pièces du stock)" %}
                        </h5>
                    </div>
                    <div class="card-body">
                        {{ formset.management_form }}
                        
                        <div id="components-container">
                            {% for comp_form in formset %}
                            <div class="component-row border rounded p-3 mb-3 {% if comp_form.errors %}border-danger{% endif %}">
                                <div class="row align-items-end">
                                    <div class="col-md-5 mb-2">
                                        <label class="form-label">{% translate "Produit" %}</label>
                                        {{ comp_form.product }}
                                    </div>
                                    <div class="col-md-3 mb-2">
                                        <label class="form-label">{% translate "Quantité" %}</label>
                                        {{ comp_form.quantity }}
                                    </div>
                                    <div class="col-md-3 mb-2">
                                        <label class="form-label">{% translate "Notes" %}</label>
                                        {{ comp_form.notes }}
                                    </div>
                                    <div class="col-md-1 mb-2 text-center">
                                        {% if comp_form.DELETE %}
                                            <label class="form-label text-danger">
                                                <i class="bi bi-trash"></i>
                                            </label>
                                            {{ comp_form.DELETE }}
                                        {% endif %}
                                    </div>
                                    {{ comp_form.id }}
                                </div>
                                {% if comp_form.errors %}
                                <div class="text-danger small mt-1">
                                    {% for error in comp_form.errors.values %}{{ error }}{% endfor %}
                                </div>
                                {% endif %}
                            </div>
                            {% endfor %}
                        </div>

                        <button type="button" class="btn btn-outline-success btn-sm" id="add-component">
                            <i class="bi bi-plus-lg"></i> {% translate "Ajouter un composant" %}
                        </button>
                    </div>
                </div>

                <!-- Boutons -->
                <div class="d-flex justify-content-between">
                    <a href="{% url 'stock:production_center' %}" class="btn btn-secondary">
                        <i class="bi bi-x-lg"></i> {% translate "Annuler" %}
                    </a>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-check-lg"></i>
                        {% if action == 'create' %}
                            {% translate "Créer la conception" %}
                        {% else %}
                            {% translate "Enregistrer les modifications" %}
                        {% endif %}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const container = document.getElementById('components-container');
    const addBtn = document.getElementById('add-component');
    const totalForms = document.getElementById('id_components-TOTAL_FORMS');

    addBtn.addEventListener('click', function() {
        const formCount = parseInt(totalForms.value);
        const lastForm = container.querySelector('.component-row:last-child');
        if (lastForm) {
            // Détruire Select2 avant le clonage pour éviter les artefacts DOM
            const srcProductSelect = lastForm.querySelector('.product-select');
            if (srcProductSelect && $(srcProductSelect).data('select2')) {
                $(srcProductSelect).select2('destroy');
            }

            const newForm = lastForm.cloneNode(true);

            // Supprimer les conteneurs Select2 résiduels dans la nouvelle ligne
            newForm.querySelectorAll('.select2-container').forEach(function(el) { el.remove(); });
            newForm.querySelectorAll('select.product-select').forEach(function(el) {
                el.style.display = '';
                el.removeAttribute('data-select2-id');
                el.classList.remove('select2-hidden-accessible');
            });

            // Mettre à jour les indices
            newForm.innerHTML = newForm.innerHTML.replace(
                /components-\d+-/g, `components-${formCount}-`
            );
            // Reset les valeurs
            newForm.querySelectorAll('input:not([type=hidden]):not([type=checkbox]), select').forEach(function(el) {
                if (el.type === 'number') {
                    el.value = '1';
                } else if (el.tagName === 'SELECT') {
                    el.selectedIndex = 0;
                } else {
                    el.value = '';
                }
            });
            newForm.querySelectorAll('input[type=checkbox]').forEach(function(el) {
                el.checked = false;
            });
            // Clear hidden id field for new forms
            const idField = newForm.querySelector(`input[name="components-${formCount}-id"]`);
            if (idField) idField.value = '';

            newForm.classList.remove('border-danger');
            container.appendChild(newForm);
            totalForms.value = formCount + 1;

            // Réinitialiser Select2 sur la source et la nouvelle ligne
            if (srcProductSelect) initProductSelect2(srcProductSelect);
            const newProductSelect = newForm.querySelector('.product-select');
            if (newProductSelect) initProductSelect2(newProductSelect);
        }
    });

    // Filtrage dynamique des emplacements selon l'entrepôt sélectionné
    const warehouseSelect = document.getElementById('id_warehouse');
    const locationSelect = document.getElementById('id_default_location');
    const locationsUrlTemplate = "{% url 'stock:warehouse_locations_api' 0 %}";

    if (warehouseSelect && locationSelect) {
        warehouseSelect.addEventListener('change', function() {
            const warehouseId = this.value;
            locationSelect.innerHTML = '<option value="">---------</option>';
            if (!warehouseId) return;
            const url = locationsUrlTemplate.replace('/0/', '/' + warehouseId + '/');
            fetch(url)
                .then(r => r.json())
                .then(data => {
                    let defaultId = null;
                    (data.locations || data).forEach(function(loc) {
                        const opt = document.createElement('option');
                        opt.value = loc.id;
                        opt.textContent = loc.name;
                        locationSelect.appendChild(opt);
                        if (loc.is_default) defaultId = loc.id;
                    });
                    if (defaultId && !locationSelect.value) {
                        locationSelect.value = defaultId;
                    }
                })
                .catch(() => {});
        });
    }

    // ── Autocomplete produit via Select2 ──────────────────────────────────────
    const productAutocompleteUrl = "{% url 'stock:products_autocomplete_api' %}";

    function initProductSelect2(sel) {
        $(sel).select2({
            placeholder: "Rechercher un produit…",
            allowClear: true,
            width: '100%',
            ajax: {
                url: productAutocompleteUrl,
                dataType: 'json',
                delay: 300,
                data: function(params) { return { q: params.term }; },
                processResults: function(data) {
                    return {
                        results: data.results.map(function(p) {
                            return {
                                id: p.id,
                                text: p.text + (p.code ? ' (' + p.code + ')' : '')
                            };
                        })
                    };
                },
                cache: true
            },
            minimumInputLength: 1
        });
    }

    // Initialiser sur les lignes existantes
    document.querySelectorAll('.product-select').forEach(function(el) {
        initProductSelect2(el);
    });
});
</script>
{% endblock content %}

{% block script %}
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
{% endblock script %}