{% extends 'admin/hub/layout.html.twig' %}

{% set hub_title = 'Bons de livraison' %}
{% set hub_breadcrumbs = [
    { label: 'Bons de livraison', url: path('admin_hub_bl') },
    { label: 'Validation' }
] %}

{% block title %}Validation BL #{{ bonLivraison.id }} - Mercuriale.io{% endblock %}

{% block hub_content %}
<div class="hub-content">
    <h1 class="hub-title"><i class="fas fa-magic"></i> Validation BL #{{ bonLivraison.id }}</h1>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div class="bg-white rounded-2xl shadow-lg overflow-hidden">
            <div class="p-4 bg-navy text-white font-semibold">
                <i class="fas fa-image mr-2"></i>Image du bon de livraison
            </div>
            <div class="p-4">
                {% if bonLivraison.imagePath %}
                    <img src="{{ path('app_bl_image', {'id': bonLivraison.id}) }}"
                         alt="Bon de livraison"
                         class="w-full rounded-lg">
                {% else %}
                    <div class="hub-table__empty">
                        <i class="fas fa-image text-4xl mb-3"></i>
                        <p>Aucune image</p>
                    </div>
                {% endif %}
            </div>
        </div>

        <div class="bg-white rounded-2xl shadow-lg overflow-hidden">
            <div class="p-4 bg-navy text-white font-semibold">
                <i class="fas fa-magic mr-2"></i>Données extraites
            </div>
            <div class="p-6">
                <div class="hub-alert-banner hub-alert-banner--success">
                    <i class="fas fa-info-circle"></i>
                    <span>L'extraction OCR sera implémentée dans une prochaine étape.</span>
                </div>

                <table class="hub-table">
                    <tbody>
                        <tr>
                            <td><strong>Établissement</strong></td>
                            <td>{{ bonLivraison.etablissement.nom }}</td>
                        </tr>
                        <tr>
                            <td><strong>Date livraison</strong></td>
                            <td>{{ bonLivraison.dateLivraison|date('d/m/Y') }}</td>
                        </tr>
                        <tr>
                            <td><strong>Statut</strong></td>
                            <td><span class="hub-badge hub-badge--secondary">{{ bonLivraison.statut.value }}</span></td>
                        </tr>
                        <tr>
                            <td><strong>Créé par</strong></td>
                            <td>{{ bonLivraison.createdBy.email ?? '-' }}</td>
                        </tr>
                        <tr>
                            <td><strong>Créé le</strong></td>
                            <td>{{ bonLivraison.createdAt|date('d/m/Y H:i') }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="p-4 bg-gray-50 border-t border-gray-100">
                <button type="button" class="hub-cta hub-cta--primary hub-cta--disabled">
                    <i class="fas fa-check"></i> Valider (bientôt disponible)
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}