{% 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 lot' }
] %}

{% block title %}Validation des BL - Mercuriale.io{% endblock %}

{% block hub_content %}
<div class="hub-content">
    {# Header #}
    <div class="flex items-center justify-between mb-6">
        <h1 class="hub-title"><i class="fas fa-tasks"></i> Validation des bons de livraison</h1>
        <a href="{{ path('app_bl_upload') }}" class="hub-cta hub-cta--outline">
            <i class="fas fa-plus"></i> Ajouter d'autres BL
        </a>
    </div>

    <div class="hub-stats">
        <div class="hub-stat-card">
            <div class="hub-stat-card__value">{{ bonsLivraison|length }}</div>
            <div class="hub-stat-card__label">BL a valider</div>
        </div>
    </div>

    {# Grid of BL cards #}
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {% for bl in bonsLivraison %}
            <div class="bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
                {# Image preview #}
                <div class="aspect-[4/3] bg-gray-100 relative overflow-hidden">
                    {% if bl.imagePath %}
                        <img src="{{ path('app_bl_image', {'id': bl.id}) }}"
                             alt="BL #{{ bl.id }}"
                             class="w-full h-full object-cover">
                    {% else %}
                        <div class="w-full h-full flex items-center justify-center text-gray-400">
                            <i class="fas fa-image text-4xl"></i>
                        </div>
                    {% endif %}

                    {# Status badge #}
                    <div class="absolute top-3 right-3">
                        <span class="hub-badge hub-badge--{{ bl.statut.color }}">
                            {{ bl.statut.value }}
                        </span>
                    </div>
                </div>

                {# Card content #}
                <div class="p-4">
                    <div class="flex items-start justify-between mb-3">
                        <div>
                            <h3 class="font-semibold text-gray-900">BL #{{ bl.id }}</h3>
                            <p class="text-sm text-gray-500">{{ bl.etablissement.nom }}</p>
                        </div>
                        <span class="text-sm text-gray-500">
                            {{ bl.dateLivraison|date('d/m/Y') }}
                        </span>
                    </div>

                    {# Metadata #}
                    <div class="flex items-center gap-4 text-xs text-gray-500 mb-4">
                        <span>
                            <i class="fas fa-user mr-1"></i>
                            {{ bl.createdBy.email|default('Inconnu') }}
                        </span>
                        <span>
                            <i class="fas fa-clock mr-1"></i>
                            {{ bl.createdAt|date('H:i') }}
                        </span>
                    </div>

                    {# Action button #}
                    <a href="{{ path('app_bl_validate', {'id': bl.id}) }}" class="btn btn--primary btn--full">
                        <i class="fas fa-magic"></i>
                        Valider ce BL
                    </a>
                </div>
            </div>
        {% else %}
            <div class="col-span-full text-center py-12">
                <div class="text-gray-400 mb-4">
                    <i class="fas fa-inbox text-5xl"></i>
                </div>
                <p class="text-gray-500">Aucun bon de livraison a valider</p>
                <a href="{{ path('app_bl_upload') }}" class="hub-cta hub-cta--secondary mt-4">
                    <i class="fas fa-plus"></i> Uploader des BL
                </a>
            </div>
        {% endfor %}
    </div>
</div>
{% endblock %}