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

{% block head %}
<link rel="stylesheet" href="{% static 'common/select2.min.css' %}" />
<link rel="stylesheet" href="{% static 'common/select2-bootstrap-5-theme.min.css' %}" />
{% endblock %}

{% block content %}
<div class="container mt-5">
    <h1 class="h3 mb-3">{% if rfq %}{% translate "Modifier la demande d'offre" %} {{ rfq.code }}{% else %}{% translate "Nouvelle demande d'offre" %}{% endif %}</h1>
    <form method="post">
        {% csrf_token %}
        <div class="card mb-3">
            <div class="card-header bg-primary text-white">{% translate "Informations générales" %}</div>
            <div class="card-body">
                {{ form.non_field_errors }}
                <div class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label" for="{{ form.warehouse.id_for_label }}">{{ form.warehouse.label }}</label>
                        {{ form.warehouse|add_class:"form-select" }}
                        {% for error in form.warehouse.errors %}<div class="invalid-feedback d-block">{{ error }}</div>{% endfor %}
                    </div>
                    <div class="col-md-4">
                        <label class="form-label" for="{{ form.status.id_for_label }}">{{ form.status.label }}</label>
                        {{ form.status|add_class:"form-select" }}
                        {% for error in form.status.errors %}<div class="invalid-feedback d-block">{{ error }}</div>{% endfor %}
                    </div>
                    <div class="col-md-4">
                        <label class="form-label" for="{{ form.suppliers.id_for_label }}">{{ form.suppliers.label }}</label>
                        {{ form.suppliers|add_class:"form-select" }}
                        <div class="form-text">{% translate "Maintenez la touche Ctrl (ou Cmd) enfoncée pour sélectionner plusieurs fournisseurs." %}</div>
                        {% for error in form.suppliers.errors %}<div class="invalid-feedback d-block">{{ error }}</div>{% endfor %}
                    </div>
                    <div class="col-md-12">
                        <label class="form-label" for="{{ form.notes.id_for_label }}">{{ form.notes.label }}</label>
                        {{ form.notes|add_class:"form-control" }}
                        {% for error in form.notes.errors %}<div class="invalid-feedback d-block">{{ error }}</div>{% endfor %}
                    </div>
                </div>
            </div>
        </div>
        
        <div class="card">
            <div class="card-header bg-info text-white d-flex justify-content-between align-items-center">
                <span>{% translate "Articles souhaités" %}</span>
                <button type="button" class="btn btn-sm btn-light" id="add-item">{% translate "Ajouter un article" %}</button>
            </div>
            <div class="card-body" id="rfq-items-container">
                {{ formset.management_form }}
                {% for form in formset %}
                    <div class="row g-3 align-items-end rfq-item">
                        {{ form.id }}
                        {% for hidden in form.hidden_fields %}{{ hidden }}{% endfor %}
                        {% for field in form.visible_fields %}
                            {% if field.name == 'DELETE' %}
                                <div class="d-none">{{ field }}</div>
                            {% elif field.html_name|slice:"-7:" == 'product' %}
                                <div class="col-md-3">
                                    <label class="form-label">{% translate "Catégorie" %}</label>
                                    <select class="form-select product-category-filter">
                                        <option value="">-- {% translate "Toutes" %} --</option>
                                        {% for cat in categories %}
                                        <option value="{{ cat.id }}">{{ cat.name_fr }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
                                    {{ field|add_class:"form-select product-select" }}
                                    {% for error in field.errors %}<div class="invalid-feedback d-block">{{ error }}</div>{% endfor %}
                                </div>
                            {% else %}
                                <div class="col-md-2">
                                    <label class="form-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
                                    {{ field|add_class:"form-control" }}
                                    {% for error in field.errors %}<div class="invalid-feedback d-block">{{ error }}</div>{% endfor %}
                                </div>
                            {% endif %}
                        {% endfor %}
                        <div class="col-auto">
                            {% if form.instance.pk %}
                                <button type="button" class="btn btn-sm btn-outline-danger delete-item-btn mt-4" title="{% translate 'Supprimer' %}">
                                    <i class="bi bi-trash"></i>
                                </button>
                            {% else %}
                                <button type="button" class="btn btn-sm btn-outline-danger remove-item-btn mt-4" title="{% translate 'Retirer' %}">
                                    <i class="bi bi-x-lg"></i>
                                </button>
                            {% endif %}
                        </div>
                    </div>
                    <hr class="my-1">
                {% endfor %}
            </div>
        </div>
        
        <template id="rfq-item-template">
            <div class="row g-3 align-items-end rfq-item">
                {% for field in formset.empty_form.visible_fields %}
                    {% if field.name == 'DELETE' %}
                        <div class="d-none">{{ field }}</div>
                    {% elif field.html_name|slice:"-7:" == 'product' %}
                        <div class="col-md-3">
                            <label class="form-label">{% translate "Catégorie" %}</label>
                            <select class="form-select product-category-filter">
                                <option value="">-- {% translate "Toutes" %} --</option>
                                {% for cat in categories %}
                                <option value="{{ cat.id }}">{{ cat.name_fr }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
                            {{ field|add_class:"form-select product-select" }}
                        </div>
                    {% else %}
                        <div class="col-md-2">
                            <label class="form-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
                            {{ field|add_class:"form-control" }}
                        </div>
                    {% endif %}
                {% endfor %}
                <div class="col-auto">
                    <button type="button" class="btn btn-sm btn-outline-danger remove-item-btn mt-4" title="{% translate 'Retirer' %}">
                        <i class="bi bi-x-lg"></i>
                    </button>
                </div>
            </div>
            <hr class="my-1">
        </template>
        
        <div class="mt-3 d-flex gap-2 justify-content-end">
            <a href="{{ cancel_url }}" class="btn btn-secondary">{% translate "Annuler" %}</a>
            <button type="submit" class="btn btn-primary">
                <i class="bi bi-floppy"></i> {% translate "Enregistrer" %}
            </button>
        </div>
    </form>
</div>
{% endblock content %}

{% block script %}
<script src="{% static 'common/select2.min.js' %}"></script>
{{ products_data|json_script:"products-data" }}
<script>
(function() {
    const PRODUCTS = JSON.parse(document.getElementById('products-data').textContent);

    function buildOptions(productSelect, catId) {
        const currentVal = productSelect.value;
        while (productSelect.options.length > 1) productSelect.remove(1);
        PRODUCTS.forEach(p => {
            if (!catId || String(p.category_id) === catId) {
                const opt = document.createElement('option');
                opt.value = p.id;
                opt.textContent = p.code + ' - ' + p.name;
                opt.dataset.category = p.category_id || '';
                if (String(p.id) === currentVal) opt.selected = true;
                productSelect.appendChild(opt);
            }
        });
    }

    function applySelect2(productSelect) {
        $(productSelect).select2({
            theme: 'bootstrap-5',
            placeholder: '-- Sélectionner un produit --',
            allowClear: true,
            width: '100%',
        });
    }

    function initRow(row) {
        if (row.dataset.initialized) return;
        row.dataset.initialized = '1';
        const productSelect = row.querySelector('.product-select');
        const catFilter = row.querySelector('.product-category-filter');
        if (!productSelect) return;

        buildOptions(productSelect, catFilter ? catFilter.value : '');
        applySelect2(productSelect);

        if (catFilter) {
            catFilter.addEventListener('change', function () {
                $(productSelect).select2('destroy');
                buildOptions(productSelect, this.value);
                applySelect2(productSelect);
            });
        }

        // Auto-calcul quantité totale = num_articles × quantity_per_article
        const numArticlesInput = row.querySelector('input[id$="-num_articles"]');
        const qpaInput = row.querySelector('input[id$="-quantity_per_article"]');
        const quantityInput = row.querySelector('input[id$="-quantity"]');
        const unitBadge = document.createElement('span');
        unitBadge.className = 'badge bg-secondary ms-1 unit-badge';
        unitBadge.title = '{% translate "Unité du produit" %}';

        if (quantityInput && quantityInput.parentElement) {
            const labelEl = quantityInput.parentElement.querySelector('label');
            if (labelEl) labelEl.appendChild(unitBadge);
        }

        function updateUnit() {
            const pid = productSelect.value;
            const product = PRODUCTS.find(p => String(p.id) === String(pid));
            if (product && product.unit_display) {
                unitBadge.textContent = product.unit_display;
                unitBadge.style.display = '';
                if (numArticlesInput) {
                    const numLabel = numArticlesInput.parentElement && numArticlesInput.parentElement.querySelector('label');
                    if (numLabel) numLabel.dataset.unit = product.unit_display;
                }
                if (qpaInput) {
                    const qpaLabel = qpaInput.parentElement && qpaInput.parentElement.querySelector('label');
                    if (qpaLabel) {
                        qpaLabel.textContent = `{% translate "Qté / article" %} (${product.unit_display})`;
                    }
                }
            } else {
                unitBadge.style.display = 'none';
            }
        }

        function autoComputeQty() {
            if (numArticlesInput && qpaInput && quantityInput) {
                const n = parseFloat(numArticlesInput.value);
                const q = parseFloat(qpaInput.value);
                if (!isNaN(n) && !isNaN(q) && n > 0 && q > 0) {
                    quantityInput.value = Math.round(n * q);
                    quantityInput.readOnly = true;
                    quantityInput.classList.add('bg-light');
                } else {
                    quantityInput.readOnly = false;
                    quantityInput.classList.remove('bg-light');
                }
            }
        }

        if (numArticlesInput) numArticlesInput.addEventListener('input', autoComputeQty);
        if (qpaInput) qpaInput.addEventListener('input', autoComputeQty);

        $(productSelect).on('change', function() {
            updateUnit();
            const pid = productSelect.value;
            const product = PRODUCTS.find(p => String(p.id) === String(pid));
            if (product && product.category_id && catFilter) {
                if (catFilter.value !== String(product.category_id)) {
                    catFilter.value = product.category_id;
                    setTimeout(() => {
                        $(productSelect).select2('destroy');
                        buildOptions(productSelect, catFilter.value);
                        applySelect2(productSelect);
                    }, 0);
                }
            }
        });
        updateUnit();
        autoComputeQty();

        const deleteBtn = row.querySelector('.delete-item-btn');
        if (deleteBtn) {
            deleteBtn.addEventListener('click', function () {
                const deleteCheckbox = row.querySelector('input[type=checkbox][id$="-DELETE"]');
                if (deleteCheckbox) {
                    deleteCheckbox.checked = true;
                    row.style.opacity = '0.4';
                    row.style.pointerEvents = 'none';
                    deleteBtn.disabled = true;
                }
            });
        }

        const removeBtn = row.querySelector('.remove-item-btn');
        if (removeBtn) {
            removeBtn.addEventListener('click', function () {
                const next = row.nextElementSibling;
                if (next && next.tagName === 'HR') next.remove();
                row.remove();
                const totalInput = document.querySelector('[name$="-TOTAL_FORMS"]');
                if (totalInput) totalInput.value = parseInt(totalInput.value, 10) - 1;
            });
        }
    }

    document.querySelectorAll('.rfq-item').forEach(initRow);

    const addButton = document.getElementById('add-item');
    if (!addButton) return;
    const formsetPrefix = '{{ formset.prefix }}';
    const container = document.getElementById('rfq-items-container');
    const templateHtml = document.getElementById('rfq-item-template').innerHTML.trim();

    addButton.addEventListener('click', function () {
        const totalFormsInput = document.querySelector(`[name="${formsetPrefix}-TOTAL_FORMS"]`);
        const currentIndex = parseInt(totalFormsInput.value, 10);
        const html = templateHtml.replace(/__prefix__/g, currentIndex);
        const wrapper = document.createElement('div');
        wrapper.innerHTML = html;
        const children = Array.from(wrapper.childNodes);
        children.forEach(child => container.appendChild(child));
        const newRow = container.querySelector('.rfq-item:not([data-initialized])');
        if (newRow) initRow(newRow);
        totalFormsInput.value = currentIndex + 1;
    });
})();
</script>
{% endblock script %}