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

{% block content %}
<div class="container mt-3" style="max-width: 700px;">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h3 class="h3">
            <i class="bi bi-upc-scan"></i>
            {% if action == 'edit' %}
                {% translate "Modifier l'article tracé" %} — <span class="font-monospace">{{ item.serial_number }}</span>
            {% else %}
                {% translate "Enregistrer un article tracé" %}
            {% endif %}
        </h3>
        <a href="{% if next %}{{ next }}{% elif action == 'edit' %}{% url 'stock:serialized_item_detail' item.pk %}{% else %}{% url 'stock:serialized_items_list' %}{% endif %}" class="btn btn-light">
            <i class="bi bi-arrow-left"></i> {% translate "Retour" %}
        </a>
    </div>

    <div class="card shadow-sm">
        <div class="card-body">
            <form method="post">
                {% csrf_token %}
                {% if next %}
                <input type="hidden" name="next" value="{{ next }}">
                {% endif %}

                {% if action == 'edit' %}
                <div class="mb-3">
                    <label class="form-label fw-semibold">{% translate "Produit" %}</label>
                    <input type="text" class="form-control" value="{{ item.product.name }} ({{ item.product.code }})" readonly disabled>
                </div>
                {% else %}
                <div class="mb-3">
                    <label class="form-label fw-semibold">{% translate "Produit" %} *</label>
                    <select name="product" class="form-select" required>
                        <option value="">— {% translate "Sélectionner un produit" %} —</option>
                        {% for p in serialized_products %}
                        <option value="{{ p.pk }}"
                            {% if initial_product and initial_product.pk == p.pk %}selected
                            {% elif post.product == p.pk|stringformat:"s" %}selected{% endif %}>
                            {{ p.name }} ({{ p.code }})
                        </option>
                        {% endfor %}
                    </select>
                    {% if not serialized_products %}
                    <div class="form-text text-warning">
                        <i class="bi bi-exclamation-triangle"></i>
                        {% translate "Aucun produit n'est configuré pour le suivi par numéro de série. Activez l'option « Articles tracés » sur le produit souhaité." %}
                    </div>
                    {% endif %}
                </div>
                {% endif %}

                <div class="mb-3">
                    <label class="form-label fw-semibold">{% translate "Numéro de série" %} *</label>
                    <input type="text" name="serial_number" class="form-control font-monospace"
                           value="{% if action == 'edit' %}{{ post.serial_number|default:item.serial_number }}{% else %}{{ post.serial_number|default:'' }}{% endif %}"
                           placeholder="{% translate 'Ex: SN-2024-00123' %}" required>
                </div>

                {% if action != 'edit' %}
                <div class="mb-3">
                    <label class="form-label fw-semibold">{% translate "Emplacement initial" %}</label>
                    <select name="current_location" class="form-select">
                        <option value="">— {% translate "Aucun" %} —</option>
                        {% for loc in locations %}
                        <option value="{{ loc.pk }}" {% if post.current_location == loc.pk|stringformat:"s" %}selected{% endif %}>
                            {{ loc.warehouse.name }} — {{ loc.name }}
                        </option>
                        {% endfor %}
                    </select>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold">{% translate "Attribuer à (optionnel)" %}</label>
                    <select name="current_holder" class="form-select">
                        <option value="">— {% translate "Aucun" %} —</option>
                        {% for member in members %}
                        <option value="{{ member.pk }}" {% if post.current_holder == member.pk|stringformat:"s" %}selected{% endif %}>
                            {{ member.name }}{% if member.teams.exists %} ({{ member.teams_display }}){% endif %}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                {% endif %}

                <div class="mb-3">
                    <label class="form-label fw-semibold">{% translate "Notes" %}</label>
                    <textarea name="notes" class="form-control" rows="3"
                              placeholder="{% translate 'Notes optionnelles…' %}">{% if action == 'edit' %}{{ post.notes|default:item.notes }}{% else %}{{ post.notes|default:'' }}{% endif %}</textarea>
                </div>

                <div class="d-flex gap-2">
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-check2"></i>
                        {% if action == 'edit' %}
                            {% translate "Enregistrer les modifications" %}
                        {% else %}
                            {% translate "Enregistrer" %}
                        {% endif %}
                    </button>
                    <a href="{% if next %}{{ next }}{% elif action == 'edit' %}{% url 'stock:serialized_item_detail' item.pk %}{% else %}{% url 'stock:serialized_items_list' %}{% endif %}" class="btn btn-outline-secondary">
                        {% translate "Annuler" %}
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock content %}

{% block script %}
{% if action != 'edit' %}
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const productSelect = document.querySelector('select[name="product"]');
        const locationSelect = document.querySelector('select[name="current_location"]');
        if (!productSelect || !locationSelect) return;
        const originalOptions = Array.from(locationSelect.options);
        const apiBaseUrl = "{% url 'stock:product_locations_api' 0 %}".replace('/0/', '/{id}/');

        function filterLocations() {
            const productId = productSelect.value;
            if (!productId) {
                // If no product is selected, show all options
                locationSelect.innerHTML = "";
                originalOptions.forEach(opt => locationSelect.appendChild(opt.cloneNode(true)));
                locationSelect.disabled = false;
                return;
            }

            locationSelect.disabled = true;
            const currentSelectedValue = locationSelect.value;

            const url = apiBaseUrl.replace('{id}', productId);
            fetch(url)
                .then(response => response.json())
                .then(data => {
                    const allowedIds = new Set(data.locations.map(loc => loc.id.toString()));
                    
                    // Rebuild options: keep the "-- Aucun --" option (empty value)
                    // and only the allowed locations.
                    locationSelect.innerHTML = "";
                    originalOptions.forEach(opt => {
                        if (opt.value === "" || allowedIds.has(opt.value)) {
                            const newOpt = opt.cloneNode(true);
                            if (opt.value === currentSelectedValue) {
                                newOpt.selected = true;
                            }
                            locationSelect.appendChild(newOpt);
                        }
                    });
                    locationSelect.disabled = false;
                })
                .catch(error => {
                    console.error("Error fetching locations:", error);
                    locationSelect.disabled = false;
                });
        }

        productSelect.addEventListener("change", filterLocations);
        
        // Run on initial load if product is already selected (e.g. initial_product or after POST error)
        if (productSelect.value) {
            filterLocations();
        }
    });
</script>
{% endif %}
{% endblock script %}