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

{% block head %}
<style>
    .quote-filter-row input[type="search"] {
        font-size: 0.875rem;
    }

    .quote-filter-row th {
        background-color: var(--bs-gray-100);
    }

    .quote-no-results {
        display: none;
    }

    .quote-no-results.show {
        display: table-row;
    }
</style>
{% endblock head %}

{% block content %}
<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h2 class="mb-0">{% blocktrans with order_code=order.order_code %}Devis pour la commande {{ order_code }}{% endblocktrans %}</h2>
        <a href="{% url 'contracts:contracts_orders_detail' order.id %}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left"></i> {% translate "Retour à la commande" %}
        </a>
    </div>

    <div class="card mb-4">
        <div class="card-body">
            <p class="mb-1"><strong>{% translate "Contrat" %} :</strong> {{ order.contract.contract_number }}</p>
            <p class="mb-1"><strong>{% translate "Description" %} :</strong> {{ order.description|default:_("Non renseigné") }}</p>
            <p class="mb-0"><strong>{% translate "Montant total du devis" %} :</strong> <span class="text-nowrap" data-quote-grand-total>{{ quote_total|floatformat:2 }}&nbsp;€</span></p>
        </div>
    </div>

    {% if messages %}
        {% for message in messages %}
            <div class="alert alert-{{ message.tags }}">{{ message }}</div>
        {% endfor %}
    {% endif %}

    {% if quote.is_finalized %}
        <div class="alert alert-info d-flex align-items-center" role="alert">
            <i class="bi bi-check2-circle fs-4 me-2"></i>
            <div>
                {% if quote.finalized_at %}
                    {% blocktrans with finalized_at=quote.finalized_at|date:'d/m/Y H:i' %}Ce devis est figé depuis le {{ finalized_at }}.{% endblocktrans %}
                {% else %}
                    {% translate "Ce devis est figé et ne peut plus être modifié." %}
                {% endif %}
            </div>
        </div>
    {% endif %}

    <form method="post" id="quoteItemsForm" data-quote-form>
        {% csrf_token %}
        <input type="hidden" name="items_payload" id="quoteItemsPayload" value="{{ items_payload|default:'[]'|escape }}">
        <div class="table-responsive">
            <table class="table table-bordered align-middle" id="quote-items-table">
                <thead class="table-light">
                    <tr>
                        <th scope="col">{% translate "N° de poste" %}</th>
                        <th scope="col">{% translate "Code" %}</th>
                        <th scope="col">{% translate "Description" %}</th>
                        <th scope="col">{% translate "Unité" %}</th>
                        <th scope="col" class="text-end">{% translate "Prix unitaire" %}</th>
                        <th scope="col" class="text-end">{% translate "Quantité" %}</th>
                        <th scope="col" class="text-end">{% translate "Montant" %}</th>
                    </tr>
                    <tr class="quote-filter-row">
                        <th>
                            <input type="search"
                                   class="form-control form-control-sm"
                                   placeholder="{% translate 'Filtrer…' %}"
                                   data-filter-input="order_number">
                        </th>
                        <th>
                            <input type="search"
                                   class="form-control form-control-sm"
                                   placeholder="{% translate 'Filtrer…' %}"
                                   data-filter-input="code">
                        </th>
                        <th>
                            <input type="search"
                                   class="form-control form-control-sm"
                                   placeholder="{% translate 'Filtrer…' %}"
                                   data-filter-input="description">
                        </th>
                        <th></th>
                        <th></th>
                        <th class="text-end">
                            <div class="form-check form-switch d-inline-flex align-items-center justify-content-end gap-2">
                                <input class="form-check-input" type="checkbox" role="switch" id="quantity-positive-filter"
                                       data-filter-quantity>
                                <label class="form-check-label" for="quantity-positive-filter">
                                    {% translate "Quantité > 0" %}
                                </label>
                            </div>
                        </th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    {% for row in rows %}
                        {% with post=row.post %}
                        <tr data-post-id="{{ post.id }}"
                            data-order-number="{{ post.order_number }}"
                            data-code="{{ post.code|escape }}"
                            data-description="{{ post.get_description_for_language|escape }}"
                            data-unit-price="{{ post.unit_price|unlocalize }}">
                            <td class="fw-semibold">{{ post.order_number }}</td>
                            <td>{{ post.code }}</td>
                            <td class="small">{{ post.get_description_for_language }}</td>
                            <td>{{ post.unit }}</td>
                            <td class="text-end text-nowrap">{{ post.unit_price|floatformat:2 }}&nbsp;€</td>
                            <td class="text-end">
                                <input type="number"
                                       class="form-control form-control-sm text-end quote-quantity-input{% if row.errors %} is-invalid{% endif %}"
                                       step="any"
                                       min="0"
                                       inputmode="decimal"
                                       value="{{ row.quantity }}"
                                       {% if not can_edit_quote %}disabled{% endif %}>
                                {% if row.errors %}
                                    <div class="invalid-feedback d-block">{{ row.errors|join:', ' }}</div>
                                {% endif %}
                            </td>
                            <td class="text-end fw-bold text-nowrap quote-total-amount">—</td>
                        </tr>
                        {% endwith %}
                    {% empty %}
                        <tr>
                            <td colspan="7" class="text-center text-muted py-4">{% translate "Aucun poste disponible pour ce contrat." %}</td>
                        </tr>
                    {% endfor %}
                    <tr class="quote-no-results" id="quote-no-results">
                        <td colspan="7" class="text-center text-muted py-4">
                            {% translate "Aucun poste ne correspond aux filtres." %}
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-2">
            <a href="{% url 'contracts:contracts_orders_detail' order.id %}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left"></i> {% translate "Retour à la commande" %}
            </a>
            {% if can_edit_quote %}
            <div class="d-flex flex-column flex-md-row gap-2">
                <button type="submit" class="btn btn-primary" name="action" value="save">
                    <i class="bi bi-save"></i> {% translate "Enregistrer le devis" %}
                </button>
                {% if can_finalize_quote %}
                <button type="submit" class="btn btn-warning" name="action" value="finalize">
                    <i class="bi bi-lock"></i> {% translate "Figer le devis" %}
                </button>
                {% endif %}
            </div>
            {% endif %}
        </div>
    </form>
</div>
{% endblock content %}

{% block script %}
<script src="{% static 'contracts/contracts_order_quote_form.js' %}"></script>
{% endblock script %}