{# Fragment: BL detail panel for pending split layout #}
<div class="bl-detail-panel" id="bl-detail-panel">
    {# Header #}
    <div class="bl-detail-panel__header">
        <h2 class="bl-detail-panel__title">
            <i class="fas fa-file-invoice"></i>
            {{ bonLivraison.numeroBl ? 'BL ' ~ bonLivraison.numeroBl : 'BL #' ~ bonLivraison.id }}
        </h2>
        <p class="bl-detail-panel__meta">
            {% if bonLivraison.fournisseur %}{{ bonLivraison.fournisseur.nom }} — {% endif %}
            {{ bonLivraison.dateLivraison ? bonLivraison.dateLivraison|date('d/m/Y') : '' }}
            — {{ bonLivraison.etablissement.nom }}
        </p>
        {% include 'components/_status_badge.html.twig' with {
            label: bonLivraison.statut.label,
            variant: bonLivraison.statut.color,
            size: 'sm'
        } only %}
    </div>

    {# Stats #}
    <div class="bl-detail-panel__stats">
        <div class="bl-detail-panel__stat">
            <span class="bl-detail-panel__stat-value">{{ bonLivraison.lignes|length }}</span>
            <span class="bl-detail-panel__stat-label">Lignes</span>
        </div>
        <div class="bl-detail-panel__stat bl-detail-panel__stat--alert">
            <span class="bl-detail-panel__stat-value">{{ alertCount }}</span>
            <span class="bl-detail-panel__stat-label">Alertes</span>
        </div>
        <div class="bl-detail-panel__stat">
            <span class="bl-detail-panel__stat-value">{{ bonLivraison.totalHt ? bonLivraison.totalHt|number_format(2, ',', ' ') ~ ' €' : '—' }}</span>
            <span class="bl-detail-panel__stat-label">Total HT</span>
        </div>
    </div>

    {# Lines table #}
    <div class="bl-detail-panel__section">
        <div class="bl-detail-panel__section-header">
            <i class="fas fa-check-square"></i> Lignes BL a valider
        </div>
        <div class="bl-detail-panel__table-scroll">
            <table class="bl-detail-panel__table">
                <thead>
                    <tr>
                        {% if bonLivraison.statut.value == 'ANOMALIE' and is_granted('MANAGE', bonLivraison.etablissement) %}
                            <th class="bl-detail-panel__check-col">
                                <input type="checkbox" id="pending-select-all" title="Tout selectionner">
                            </th>
                        {% endif %}
                        <th>Code</th>
                        <th>Designation</th>
                        <th class="bl-detail-panel__right">Qte</th>
                        <th class="bl-detail-panel__right">PU BL</th>
                        <th class="bl-detail-panel__right">PU Mercuriale</th>
                        <th class="bl-detail-panel__center">Ecart</th>
                        <th class="bl-detail-panel__right">Total HT</th>
                    </tr>
                </thead>
                <tbody>
                    {% set showCheckboxes = bonLivraison.statut.value == 'ANOMALIE' and is_granted('MANAGE', bonLivraison.etablissement) %}
                    {% for ligne in bonLivraison.lignes %}
                        {% set hasAlert = ligne.alertes|length > 0 %}
                        {% set isEcart = false %}
                        {% set prixMercuriale = null %}
                        {% set ecartPct = null %}
                        {% for alerte in ligne.alertes %}
                            {% if alerte.typeAlerte.value in ['ECART_PRIX', 'ECART_QUANTITE'] %}
                                {% set isEcart = true %}
                            {% endif %}
                            {% if alerte.valeurAttendue %}
                                {% set prixMercuriale = alerte.valeurAttendue %}
                            {% endif %}
                            {% if alerte.ecartPct %}
                                {% set ecartPct = alerte.ecartPctAsFloat %}
                            {% endif %}
                        {% endfor %}
                        <tr class="{% if hasAlert %}bl-detail-row--alert{% endif %}">
                            {% if showCheckboxes %}
                                <td class="bl-detail-panel__check-col">
                                    <input type="checkbox"
                                           class="pending-ligne-cb"
                                           value="{{ ligne.id }}"
                                           {{ isEcart ? 'checked' : '' }}
                                           title="Inclure dans la demande d'avoir">
                                </td>
                            {% endif %}
                            <td class="bl-detail-cell--code">{{ ligne.codeProduitBl ?? '—' }}</td>
                            <td>{{ ligne.designationBl }}</td>
                            <td class="bl-detail-panel__right">
                                {{ ligne.quantiteLivree|number_format(2, ',', ' ') }}
                                {% if ligne.unite %}<span class="bl-detail-cell--muted">{{ ligne.unite }}</span>{% endif %}
                            </td>
                            <td class="bl-detail-panel__right">{{ ligne.prixUnitaire|number_format(4, ',', ' ') }} €</td>
                            <td class="bl-detail-panel__right">
                                {% if prixMercuriale %}
                                    {{ prixMercuriale|number_format(4, ',', ' ') }} €
                                {% else %}
                                    <span class="bl-detail-cell--muted">—</span>
                                {% endif %}
                            </td>
                            <td class="bl-detail-panel__center">
                                {% if ecartPct is not null %}
                                    {% include 'components/_variance_indicator.html.twig' with {
                                        value: ecartPct,
                                        threshold: 5.0,
                                        size: 'sm'
                                    } only %}
                                {% else %}
                                    <span class="bl-detail-cell--muted">—</span>
                                {% endif %}
                            </td>
                            <td class="bl-detail-panel__right">{{ ligne.totalLigne|number_format(2, ',', ' ') }} €</td>
                        </tr>
                    {% else %}
                        <tr>
                            <td colspan="{{ showCheckboxes ? 8 : 7 }}" class="bl-detail-panel__empty">Aucune ligne extraite</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    {# Actions #}
    <div class="bl-detail-panel__actions">
        {% if bonLivraison.statut.value == 'BROUILLON' and is_granted('MANAGE', bonLivraison.etablissement) %}
            <form action="{{ path('app_bl_valider', {id: bonLivraison.id}) }}" method="post" class="bl-detail-panel__form">
                <input type="hidden" name="_token" value="{{ csrf_token('valider_bl_' ~ bonLivraison.id) }}">
                <button type="submit" class="btn btn--success">
                    <i class="fas fa-check"></i> Valider
                </button>
            </form>
        {% endif %}

        {% if bonLivraison.statut.value == 'ANOMALIE' and is_granted('MANAGE', bonLivraison.etablissement) %}
            <form action="{{ path('app_bl_valider_force', {id: bonLivraison.id}) }}" method="post" class="bl-detail-panel__form">
                <input type="hidden" name="_token" value="{{ csrf_token('valider_force_bl_' ~ bonLivraison.id) }}">
                <button type="submit" class="btn btn--success">
                    <i class="fas fa-check"></i> Valider
                </button>
            </form>
            <a href="{{ path('app_avoir_demande', {id: bonLivraison.id}) }}"
               id="btn-avoir-demande"
               class="btn btn--avoir"
               data-base-url="{{ path('app_avoir_demande', {id: bonLivraison.id}) }}">
                <i class="fas fa-file-invoice"></i> Avoir
            </a>
        {% else %}
            <button type="button" class="btn btn--avoir" disabled title="Disponible pour les BL en anomalie">
                <i class="fas fa-file-invoice"></i> Avoir
            </button>
        {% endif %}
    </div>

    {% if bonLivraison.statut.value == 'ANOMALIE' and is_granted('MANAGE', bonLivraison.etablissement) %}
        <script>
            (function() {
                var selectAll = document.getElementById('pending-select-all');
                var checkboxes = document.querySelectorAll('.pending-ligne-cb');
                var btnAvoir = document.getElementById('btn-avoir-demande');

                if (selectAll && checkboxes.length) {
                    selectAll.checked = true;

                    selectAll.addEventListener('change', function() {
                        checkboxes.forEach(function(cb) { cb.checked = selectAll.checked; });
                    });

                    checkboxes.forEach(function(cb) {
                        cb.addEventListener('change', function() {
                            selectAll.checked = Array.from(checkboxes).every(function(c) { return c.checked; });
                        });
                    });
                }

                if (btnAvoir) {
                    btnAvoir.addEventListener('click', function(e) {
                        e.preventDefault();
                        var baseUrl = btnAvoir.dataset.baseUrl;
                        var selected = Array.from(document.querySelectorAll('.pending-ligne-cb:checked'));
                        var params = selected.map(function(cb) { return 'lignes[]=' + cb.value; }).join('&');
                        window.location.href = params ? baseUrl + '?' + params : baseUrl;
                    });
                }
            })();
        </script>
    {% endif %}
</div>