{# Partial template for extracted BL data #}

{# BL Info #}
<div class="mb-6 p-4 bg-cream rounded-xl">
    <div class="grid grid-cols-2 gap-4 text-sm">
        <div>
            <span class="text-gray-500">N° BL:</span>
            <span class="font-medium text-navy">{{ bonLivraison.numeroBl|default('—') }}</span>
        </div>
        <div>
            <span class="text-gray-500">N° Commande:</span>
            <span class="font-medium text-navy">{{ bonLivraison.numeroCommande|default('—') }}</span>
        </div>
        <div>
            <span class="text-gray-500">Date livraison:</span>
            <span class="font-medium text-navy">{{ bonLivraison.dateLivraison ? bonLivraison.dateLivraison|date('d/m/Y') : '—' }}</span>
        </div>
        <div>
            <span class="text-gray-500">Total HT:</span>
            <span class="font-medium text-navy">{{ bonLivraison.totalHt ? bonLivraison.totalHt|number_format(2, ',', ' ') ~ ' €' : '—' }}</span>
        </div>
    </div>
</div>

{# Warnings from extraction #}
{% if bonLivraison.donneesBrutes.remarques is defined and bonLivraison.donneesBrutes.remarques|length > 0 %}
<div class="mb-4 p-3 bg-gold/10 border border-gold rounded-lg text-sm">
    <div class="font-semibold text-gold-dark mb-1">
        <i class="fas fa-exclamation-triangle mr-1"></i> Remarques de l'extraction
    </div>
    <ul class="list-disc list-inside text-gray-600">
        {% for remarque in bonLivraison.donneesBrutes.remarques %}
            <li>{{ remarque|e }}</li>
        {% endfor %}
    </ul>
</div>
{% endif %}

{# Lines table #}
<div class="overflow-x-auto">
    <table class="extraction-table">
        <thead>
            <tr class="bg-navy text-white text-left">
                <th class="rounded-tl-lg">N°</th>
                <th>Code</th>
                <th>Désignation</th>
                <th>Orig.</th>
                <th class="extraction-cell--right">Qté livrée</th>
                <th class="extraction-cell--right">Qté fact.</th>
                <th class="extraction-cell--right">PU</th>
                <th class="extraction-cell--right">MJ</th>
                <th class="extraction-cell--right">Total HT</th>
                <th class="extraction-cell--center">TVA</th>
                <th class="extraction-cell--center rounded-tr-lg">Statut</th>
            </tr>
        </thead>
        <tbody>
            {% for ligne in bonLivraison.lignes %}
                {% set hasAlertes = ligne.alertes|length > 0 %}
                {% set isMatched = ligne.produitFournisseur is not null %}
                <tr class="{{ hasAlertes ? 'extraction-row--alerte' : '' }}"
                    data-ligne-id="{{ ligne.id }}">
                    <td class="extraction-cell--muted">{{ ligne.numeroLigneBl }}</td>
                    <td class="extraction-cell--code">{{ ligne.codeProduitBl|e }}</td>
                    <td>
                        <div class="flex items-start gap-2">
                            {% if isMatched %}
                                <span class="extraction-match-icon extraction-match-icon--ok" title="Produit référencé">
                                    <i class="fas fa-check"></i>
                                </span>
                            {% else %}
                                <span class="extraction-match-icon extraction-match-icon--unknown" title="Produit non référencé">
                                    <i class="fas fa-question"></i>
                                </span>
                            {% endif %}
                            <span class="font-medium text-navy">{{ ligne.designationBl|e }}</span>
                        </div>
                    </td>
                    <td class="extraction-cell--muted">{{ ligne.origine }}</td>
                    <td class="extraction-cell--right">
                        {% if ligne.quantiteLivree %}
                            {{ ligne.quantiteLivree|number_format(3, ',', ' ') }}
                            <span class="extraction-cell--muted">{{ ligne.uniteLivraison }}</span>
                        {% else %}
                            <span class="extraction-cell--muted">—</span>
                        {% endif %}
                    </td>
                    <td class="extraction-cell--right">
                        {% if ligne.quantiteFacturee %}
                            {{ ligne.quantiteFacturee|number_format(3, ',', ' ') }}
                            <span class="extraction-cell--muted">{{ ligne.uniteFacturation }}</span>
                        {% else %}
                            <span class="extraction-cell--muted">—</span>
                        {% endif %}
                    </td>
                    <td class="extraction-cell--right">
                        {{ ligne.prixUnitaire|number_format(4, ',', ' ') }}
                        <span class="extraction-cell--muted">€/{{ ligne.uniteFacturation|default(ligne.unite.code) }}</span>
                    </td>
                    <td class="extraction-cell--right">
                        {% if ligne.majorationDecote and ligne.majorationDecote != '0' and ligne.majorationDecote != '0.0000' %}
                            {% set mjFloat = ligne.majorationDecote|number_format(2, ',', ' ') %}
                            <span class="extraction-mj-value {{ ligne.majorationDecote > 0 ? 'extraction-mj-value--positive' : 'extraction-mj-value--negative' }}">
                                {{ mjFloat }} €
                            </span>
                        {% else %}
                            <span class="extraction-cell--muted">—</span>
                        {% endif %}
                    </td>
                    <td class="extraction-cell--right font-medium">
                        {{ ligne.totalLigne|number_format(2, ',', ' ') }} €
                    </td>
                    <td class="extraction-cell--center extraction-cell--muted">{{ ligne.codeTva }}</td>
                    <td class="extraction-cell--center">
                        {% if ligne.statutControle.value == 'OK' %}
                            <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-green-100 text-green-600" title="OK">
                                <i class="fas fa-check"></i>
                            </span>
                        {% elseif ligne.statutControle.value == 'NON_CONTROLE' %}
                            <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-gray-100 text-gray-400" title="Non contrôlé">
                                <i class="fas fa-minus"></i>
                            </span>
                        {% else %}
                            <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-coral/20 text-coral cursor-pointer"
                                  title="{{ ligne.statutControle.label }}"
                                  data-action="click->extraction-alertes#toggle"
                                  data-ligne-id="{{ ligne.id }}">
                                <i class="fas fa-exclamation"></i>
                            </span>
                        {% endif %}
                    </td>
                </tr>
                {# Alerts row (hidden by default) #}
                {% if hasAlertes %}
                <tr class="extraction-alertes-row" id="alertes-{{ ligne.id }}">
                    <td colspan="11" class="extraction-alertes-cell">
                        <div class="text-sm">
                            {% for alerte in ligne.alertes %}
                                <div class="extraction-alerte-item">
                                    <span class="flex-shrink-0 px-2 py-0.5 rounded text-xs font-medium
                                        {% if alerte.typeAlerte.value == 'ECART_PRIX' %}bg-coral/20 text-coral-dark
                                        {% elseif alerte.typeAlerte.value == 'ECART_QUANTITE' %}bg-gold/30 text-gold-dark
                                        {% elseif alerte.typeAlerte.value == 'PRODUIT_INCONNU' %}bg-blue-100 text-blue-700
                                        {% else %}bg-gray-200 text-gray-600{% endif %}">
                                        {{ alerte.typeAlerte.label }}
                                    </span>
                                    <span class="text-gray-600">{{ alerte.message|e }}</span>
                                </div>
                            {% endfor %}
                        </div>
                    </td>
                </tr>
                {% endif %}
            {% else %}
                <tr>
                    <td colspan="11" class="extraction-empty">
                        <i class="fas fa-inbox"></i>
                        <p>Aucune ligne extraite</p>
                    </td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

{# Summary #}
<div class="mt-4 pt-4 border-t border-gray-200">
    <div class="flex justify-between items-center">
        <div class="text-sm text-gray-500">
            {{ bonLivraison.lignes|length }} ligne(s)
            {% set alertCount = 0 %}
            {% for ligne in bonLivraison.lignes %}
                {% set alertCount = alertCount + ligne.alertes|length %}
            {% endfor %}
            {% if alertCount > 0 %}
                — <span class="text-coral font-medium">{{ alertCount }} alerte(s)</span>
            {% endif %}
        </div>
        <div class="text-right">
            <span class="text-gray-500">Total HT:</span>
            <span class="text-xl font-bold text-navy ml-2">
                {{ bonLivraison.totalHt ? bonLivraison.totalHt|number_format(2, ',', ' ') ~ ' €' : '—' }}
            </span>
        </div>
    </div>
</div>