{% 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>
                    {% if action == 'create' %}
                        {% translate "Nouveau produit" %}
                    {% else %}
                        {% translate "Modifier le produit" %} — {{ product.name }}
                    {% endif %}
                </h3>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">
                            <a href="{% url 'stock:warehouses' %}?tab=products">{% translate "Produits" %}</a>
                        </li>
                        {% if action == 'edit' %}
                        <li class="breadcrumb-item">
                            <a href="{% url 'stock:product_detail' product.pk %}">{{ product.name }}</a>
                        </li>
                        {% endif %}
                        <li class="breadcrumb-item active">
                            {% if action == 'create' %}{% translate "Nouveau" %}{% else %}{% translate "Modifier" %}{% endif %}
                        </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">
                                    {% if action == 'create' %}
                                    <i class="bi bi-lock"></i> {% translate "Généré automatiquement" %}
                                    {% else %}
                                    {% translate "Code unique du produit" %}
                                    {% endif %}
                                </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">
                                    {% if action == 'create' %}
                                    <i class="bi bi-lock"></i> {% translate "Généré automatiquement" %}
                                    {% else %}
                                    {% translate "Référence fournisseur / interne" %}
                                    {% endif %}
                                </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 %}

                            {% if action == 'create' %}
                            <div class="form-text text-muted mt-2" id="serialized-help-create" style="{% if not form.is_serialized.value %}display:none;{% endif %}">
                                <i class="bi bi-info-circle me-1"></i>
                                {% translate "Une fois ce produit enregistré, vous pourrez lui ajouter ses numéros de série et les gérer individuellement." %}
                            </div>
                            {% elif not product.is_serialized %}
                            <div class="form-text text-muted mt-2" id="serialized-help-edit" style="{% if not form.is_serialized.value %}display:none;{% endif %}">
                                <i class="bi bi-info-circle me-1"></i>
                                {% translate "En cochant cette option et en enregistrant, vous pourrez ajouter des numéros de série à ce produit." %}
                            </div>
                            {% endif %}

                            {% if action == 'edit' and product.is_serialized %}
                            <div class="mt-3 p-3 bg-light rounded border">
                                <div class="d-flex justify-content-between align-items-center mb-2 flex-wrap gap-2">
                                    <div>
                                        <span class="fw-semibold">
                                            <i class="bi bi-upc-scan me-1 text-primary"></i>
                                            {% translate "Numéros de série associés" %}
                                        </span>
                                        <span class="badge bg-secondary ms-1">{{ serialized_items|length }}</span>
                                    </div>
                                    <a href="{% url 'stock:serialized_item_create_for_product' product.pk %}?next={{ request.path }}"
                                       class="btn btn-sm btn-outline-primary">
                                        <i class="bi bi-plus-circle me-1"></i>{% translate "Ajouter un numéro de série" %}
                                    </a>
                                </div>

                                <p class="form-text text-muted mb-3">
                                    {% translate "Chaque unité physique de ce produit est identifiée par un numéro de série unique. Vous pouvez modifier directement un numéro de série ci-dessous." %}
                                </p>

                                {% if serialized_items %}
                                <div class="table-responsive bg-white rounded border">
                                    <table class="table table-sm table-hover align-middle mb-0">
                                        <thead class="table-light">
                                            <tr>
                                                <th>{% translate "Numéro de série" %}</th>
                                                <th>{% translate "Statut" %}</th>
                                                <th>{% translate "Détenteur" %}</th>
                                                <th>{% translate "Emplacement" %}</th>
                                                <th class="text-end">{% translate "Actions" %}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for si in serialized_items %}
                                            <tr>
                                                <td>
                                                    <a href="{% url 'stock:serialized_item_detail' si.pk %}" class="font-monospace fw-semibold">
                                                        {{ si.serial_number }}
                                                    </a>
                                                </td>
                                                <td>
                                                    {% if si.status == 'available' %}
                                                        <span class="badge bg-success">{{ si.get_status_display }}</span>
                                                    {% elif si.status == 'assigned' %}
                                                        <span class="badge bg-primary">{{ si.get_status_display }}</span>
                                                    {% elif si.status == 'lost' %}
                                                        <span class="badge bg-danger">{{ si.get_status_display }}</span>
                                                    {% else %}
                                                        <span class="badge bg-secondary">{{ si.get_status_display }}</span>
                                                    {% endif %}
                                                    {% if not si.is_active %}
                                                        <span class="badge bg-danger">{% translate "Inactif" %}</span>
                                                    {% endif %}
                                                </td>
                                                <td>{{ si.current_holder.name|default:"—" }}</td>
                                                <td>
                                                    {% if si.current_location %}
                                                        {{ si.current_location.warehouse.name }} — {{ si.current_location.name }}
                                                    {% else %}—{% endif %}
                                                </td>
                                                <td class="text-end text-nowrap">
                                                    <button type="button"
                                                            class="btn btn-sm btn-outline-primary"
                                                            data-bs-toggle="modal"
                                                            data-bs-target="#editSerialModal{{ si.pk }}"
                                                            title="{% translate 'Modifier le numéro de série' %}">
                                                        <i class="bi bi-pencil me-1"></i>{% translate "Modifier" %}
                                                    </button>
                                                    <a href="{% url 'stock:serialized_item_detail' si.pk %}"
                                                       class="btn btn-sm btn-outline-secondary"
                                                       title="{% translate 'Consulter la fiche' %}">
                                                        <i class="bi bi-eye"></i>
                                                    </a>
                                                </td>
                                            </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                                {% else %}
                                <div class="alert alert-info py-2 px-3 mb-0 small d-flex align-items-center justify-content-between flex-wrap gap-2">
                                    <span>
                                        <i class="bi bi-info-circle me-1"></i>
                                        {% translate "Aucun numéro de série n'a encore été enregistré pour ce produit." %}
                                    </span>
                                    <a href="{% url 'stock:serialized_item_create_for_product' product.pk %}?next={{ request.path }}"
                                       class="btn btn-sm btn-primary">
                                        <i class="bi bi-plus-circle me-1"></i>{% translate "Enregistrer un numéro de série" %}
                                    </a>
                                </div>
                                {% endif %}
                            </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>

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

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

                        {% if action == 'create' %}
                        <div id="initial-quantities-section" class="mt-4 p-3 bg-light rounded border border-light-subtle" style="display: none;">
                            <h6 class="text-secondary fw-semibold mb-3">
                                <i class="bi bi-plus-circle me-1"></i>{% translate "Quantités initiales pour les emplacements sélectionnés" %}
                            </h6>
                            <div id="initial-quantities-container"></div>
                        </div>
                        {% endif %}

                        <!-- Boutons -->
                        <div class="d-flex justify-content-between mt-4">
                            <a href="{% if action == 'edit' %}{% url 'stock:product_detail' product.pk %}{% else %}{% url 'stock:warehouses' %}?tab=products{% endif %}"
                               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>
                                {% if action == 'create' %}
                                    {% translate "Créer le produit" %}
                                {% else %}
                                    {% translate "Enregistrer les modifications" %}
                                {% endif %}
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Zone de danger (suppression) -->
            {% if action == 'edit' %}
            <div class="card border-danger mt-4">
                <div class="card-header bg-danger text-white">
                    <i class="bi bi-exclamation-triangle"></i> {% translate "Désactivation" %}
                </div>
                <div class="card-body">
                    {% if product.is_active %}
                    <p class="text-muted mb-3">
                        {% translate "Rendre ce produit inactif empêchera son utilisation pour les futurs mouvements de stock ou bons de commande, mais préservera tout son historique." %}
                    </p>
                    <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteProductModal">
                        <i class="bi bi-trash"></i> {% translate "Désactiver ce produit" %}
                    </button>
                    {% else %}
                    <span class="badge bg-danger p-2"><i class="bi bi-x-circle me-1"></i>{% translate "Ce produit est déjà inactif" %}</span>
                    {% endif %}
                </div>
            </div>

            <!-- Modal suppression -->
            <div class="modal fade" id="deleteProductModal" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title text-danger">
                                <i class="bi bi-exclamation-triangle"></i>
                                {% translate "Confirmer la désactivation" %}
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                            {% blocktranslate with name=product.name %}
                            Êtes-vous sûr de vouloir rendre le produit <strong>{{ name }}</strong> inactif ?
                            Il ne sera plus visible pour les nouvelles opérations de stock ou d'intervention, mais restera accessible dans l'historique.
                            {% endblocktranslate %}
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                {% translate "Annuler" %}
                            </button>
                            <form method="post" action="{% url 'stock:product_delete' product.pk %}">
                                {% csrf_token %}
                                <button type="submit" class="btn btn-danger">
                                    <i class="bi bi-trash"></i> {% translate "Désactiver" %}
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            {% if product.is_serialized %}
            {% for si in serialized_items %}
            <!-- Modal modification numéro de série pour {{ si.serial_number }} -->
            <div class="modal fade" id="editSerialModal{{ si.pk }}" tabindex="-1" aria-labelledby="editSerialModalLabel{{ si.pk }}" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <form method="post" action="{% url 'stock:serialized_item_edit' si.pk %}">
                            {% csrf_token %}
                            <input type="hidden" name="next" value="{{ request.path }}">
                            <div class="modal-header">
                                <h5 class="modal-title" id="editSerialModalLabel{{ si.pk }}">
                                    <i class="bi bi-pencil-square me-1"></i>
                                    {% translate "Modifier le numéro de série" %}
                                </h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Fermer' %}"></button>
                            </div>
                            <div class="modal-body">
                                <div class="mb-3">
                                    <label class="form-label fw-semibold">{% translate "Produit" %}</label>
                                    <input type="text" class="form-control" value="{{ product.name }} ({{ product.code }})" readonly disabled>
                                </div>
                                <div class="mb-3">
                                    <label for="modal_serial_{{ si.pk }}" class="form-label fw-semibold">
                                        {% translate "Numéro de série" %} <span class="text-danger">*</span>
                                    </label>
                                    <input type="text" name="serial_number" id="modal_serial_{{ si.pk }}"
                                           class="form-control font-monospace" value="{{ si.serial_number }}" required>
                                </div>
                                <div class="mb-3">
                                    <label for="modal_notes_{{ si.pk }}" class="form-label fw-semibold">{% translate "Notes" %}</label>
                                    <textarea name="notes" id="modal_notes_{{ si.pk }}" class="form-control" rows="3">{{ si.notes }}</textarea>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% translate "Annuler" %}</button>
                                <button type="submit" class="btn btn-primary">
                                    <i class="bi bi-check2 me-1"></i>{% translate "Enregistrer" %}
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            {% endfor %}
            {% endif %}
            {% endif %}

        </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);
    });

    const isSerializedCheckbox = document.getElementById("{{ form.is_serialized.id_for_label }}");
    if (isSerializedCheckbox) {
        const helpCreate = document.getElementById("serialized-help-create");
        const helpEdit = document.getElementById("serialized-help-edit");
        isSerializedCheckbox.addEventListener("change", function() {
            if (helpCreate) helpCreate.style.display = this.checked ? "block" : "none";
            if (helpEdit) helpEdit.style.display = this.checked ? "block" : "none";
        });
    }
});

{% if action == 'create' %}
document.addEventListener('DOMContentLoaded', function () {
    const locationsSelect = document.getElementById('id_authorized_locations');
    const section = document.getElementById('initial-quantities-section');
    const container = document.getElementById('initial-quantities-container');

    if (locationsSelect && section && container) {
        function updateQuantities() {
            container.innerHTML = '';
            const selectedOptions = Array.from(locationsSelect.selectedOptions);
            
            if (selectedOptions.length === 0) {
                section.style.display = 'none';
                return;
            }

            section.style.display = 'block';
            selectedOptions.forEach(opt => {
                const locationId = opt.value;
                const locationName = opt.text;

                const row = document.createElement('div');
                row.className = 'row mb-3 align-items-center';
                row.innerHTML = `
                    <div class="col-md-6">
                        <span class="fw-semibold text-muted" style="font-size: 0.9rem;">
                            <i class="bi bi-geo-alt me-1 text-primary"></i>${locationName}
                        </span>
                    </div>
                    <div class="col-md-6">
                        <div class="input-group input-group-sm">
                            <span class="input-group-text bg-white text-muted">{% translate "Quantité" %}</span>
                            <input type="number" name="initial_qty_${locationId}" class="form-control" min="0" value="0" style="max-width: 150px;">
                        </div>
                    </div>
                `;
                container.appendChild(row);
            });
        }

        locationsSelect.addEventListener('change', updateQuantities);
        // Initial run
        updateQuantities();
    }
});
{% endif %}
</script>
{% endblock content %}