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

{% set hub_title = 'Archive factures' %}
{% set hub_breadcrumbs = [
    { label: 'Fournisseurs', url: path('app_fournisseurs_hub') },
    { label: 'Factures', url: path('app_factures_hub') },
    { label: 'Archive' }
] %}

{% block title %}Archive factures — Mercuriale.io{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('css/facture.css') }}">
    <link rel="stylesheet" href="{{ asset('css/facture-split.css') }}">
{% endblock %}

{% block hub_content %}
{% if factures is empty %}
    <div class="hub-content">
        <h1 class="hub-title"><i class="fas fa-archive"></i> Archive</h1>
        {% include 'components/_empty_state.html.twig' with {
            icon: 'fa-archive',
            title: 'Aucune facture archivee',
            description: 'Les factures payees, refusees et contestees apparaitront ici.',
            action_label: 'Retour',
            action_url: path('app_factures_hub'),
            action_icon: 'fa-arrow-left'
        } only %}
    </div>
{% else %}
    <div class="facture-split" data-controller="split-detail">
        <div class="facture-split__list">
            <div class="facture-split__list-header">
                <h2 class="facture-split__list-title">
                    <i class="fas fa-archive"></i> Archive
                </h2>
                <span class="facture-split__count">{{ total }}</span>
            </div>
            <div class="facture-split__list-scroll">
                {% for facture in factures %}
                    <div class="facture-split-item{% if selected and facture.id == selected.id %} facture-split-item--active{% endif %}"
                         data-split-detail-target="item"
                         data-action="click->split-detail#select"
                         data-facture-id="{{ facture.idAsString }}"
                         data-url="{{ path('app_facture_archive_detail', {id: facture.idAsString}) }}">
                        <div class="facture-split-item__header">
                            <span class="facture-split-item__number">
                                {{ facture.numeroFacture ?? facture.fichierOriginalNom ?? 'Facture' }}
                            </span>
                            {% include 'components/_status_badge.html.twig' with {
                                label: facture.statut.label,
                                variant: facture.statut.color,
                                size: 'xs'
                            } only %}
                        </div>
                        <div class="facture-split-item__meta">
                            <span class="facture-split-item__fournisseur">{{ facture.fournisseur ? facture.fournisseur.nom : (facture.fournisseurNom ?? '—') }}</span>
                            <span class="facture-split-item__date">{{ facture.dateEmission ? facture.dateEmission|date('d/m/Y') : '—' }}</span>
                        </div>
                        <div class="facture-split-item__montant">
                            {% if facture.montantTtc %}
                                {{ facture.montantTtc|number_format(2, ',', ' ') }} € TTC
                            {% endif %}
                        </div>
                    </div>
                {% endfor %}
            </div>

            {# Pagination #}
            {% if total_pages > 1 %}
            <div class="facture-split__pagination">
                {% if page > 1 %}
                    <a href="{{ path('app_factures_archive', {page: page - 1}) }}" class="facture-split__page-btn">
                        <i class="fas fa-chevron-left"></i>
                    </a>
                {% endif %}
                <span class="facture-split__page-info">{{ page }} / {{ total_pages }}</span>
                {% if page < total_pages %}
                    <a href="{{ path('app_factures_archive', {page: page + 1}) }}" class="facture-split__page-btn">
                        <i class="fas fa-chevron-right"></i>
                    </a>
                {% endif %}
            </div>
            {% endif %}
        </div>

        <div class="facture-split__separator" aria-hidden="true"></div>

        <div class="facture-split__detail" data-split-detail-target="detail">
            {% if selected %}
                {% include 'app/facture/_archive_detail.html.twig' with {
                    facture: selected,
                    transitions: []
                } %}
            {% else %}
                <div class="facture-split__placeholder">
                    <i class="fas fa-hand-pointer"></i>
                    <p>Selectionnez une facture</p>
                </div>
            {% endif %}
        </div>
    </div>
{% endif %}
{% endblock %}