{% extends 'admin/base.html.twig' %}

{% block title %}Facture {{ invoice.invoiceNumber }}{% endblock %}

{% block body %}
<div class="container-fluid px-4">
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <h1 class="h3 mb-0">Facture {{ invoice.invoiceNumber }}</h1>
                <div>
                    <a href="{{ path('admin_invoice_pdf', {id: invoice.id}) }}" class="btn btn-primary" target="_blank">
                        <i class="fas fa-file-pdf"></i> Télécharger PDF
                    </a>
                    <a href="{{ path('admin_billing_invoices') }}" class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-left"></i> Retour
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-body p-5">
                    {# En-tête de la facture #}
                    <div class="row mb-5">
                        <div class="col-md-6">
                            <h2 class="h4 mb-3 text-primary">FACTURE</h2>
                            {% if config %}
                            <div class="text-muted small">
                                <strong>{{ config.companyName }}</strong><br>
                                {{ config.companyAddress }}<br>
                                {{ config.companyPostalCode }} {{ config.companyCity }}<br>
                                {{ config.companyCountry }}<br>
                                {% if config.companySiret %}
                                    SIRET: {{ config.companySiret }}<br>
                                {% endif %}
                                {% if config.companyVat %}
                                    TVA: {{ config.companyVat }}<br>
                                {% endif %}
                                {% if config.companyEmail %}
                                    Email: {{ config.companyEmail }}<br>
                                {% endif %}
                                {% if config.companyPhone %}
                                    Tél: {{ config.companyPhone }}<br>
                                {% endif %}
                            </div>
                            {% endif %}
                        </div>
                        <div class="col-md-6 text-end">
                            <div class="bg-light p-3 rounded">
                                <h3 class="h5 text-primary mb-3">N° {{ invoice.invoiceNumber }}</h3>
                                <p class="mb-1"><strong>Date:</strong> {{ invoice.issueDate|date('d/m/Y') }}</p>
                                <p class="mb-1"><strong>Échéance:</strong> {{ invoice.dueDate|date('d/m/Y') }}</p>
                                <p class="mb-0">
                                    {% if invoice.status == 'paid' %}
                                        <span class="badge bg-success">Payée</span>
                                    {% elseif invoice.status == 'pending' %}
                                        <span class="badge bg-warning">En attente</span>
                                    {% elseif invoice.status == 'overdue' %}
                                        <span class="badge bg-danger">En retard</span>
                                    {% elseif invoice.status == 'canceled' %}
                                        <span class="badge bg-secondary">Annulée</span>
                                    {% elseif invoice.status == 'refunded' %}
                                        <span class="badge bg-info">Remboursée</span>
                                    {% endif %}
                                </p>
                            </div>
                        </div>
                    </div>

                    {# Informations client #}
                    <div class="row mb-4">
                        <div class="col-12">
                            <div class="border-start border-primary border-4 ps-3">
                                <h5 class="text-uppercase mb-2">Facturé à</h5>
                                <p class="mb-0">
                                    {{ invoice.user.email }}<br>
                                    {% if invoice.user.firstname or invoice.user.lastname %}
                                        {{ invoice.user.firstname }} {{ invoice.user.lastname }}<br>
                                    {% endif %}
                                </p>
                            </div>
                        </div>
                    </div>

                    {# Tableau des lignes #}
                    <div class="table-responsive mb-4">
                        <table class="table table-hover">
                            <thead class="table-primary">
                                <tr>
                                    <th scope="col" style="width: 50%;">Description</th>
                                    <th scope="col" class="text-center" style="width: 15%;">Quantité</th>
                                    <th scope="col" class="text-end" style="width: 15%;">Prix unitaire</th>
                                    <th scope="col" class="text-end" style="width: 20%;">Total</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for item in invoice.items %}
                                <tr>
                                    <td>
                                        <strong>{{ item.description }}</strong>
                                        {% if item.periodStart and item.periodEnd %}
                                            <br><small class="text-muted">
                                                Période: {{ item.periodStart|date('d/m/Y') }} - {{ item.periodEnd|date('d/m/Y') }}
                                            </small>
                                        {% endif %}
                                    </td>
                                    <td class="text-center">{{ item.quantity }}</td>
                                    <td class="text-end">{{ item.unitPrice|number_format(2, ',', ' ') }} {{ invoice.currency }}</td>
                                    <td class="text-end"><strong>{{ item.totalPrice|number_format(2, ',', ' ') }} {{ invoice.currency }}</strong></td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>

                    {# Totaux #}
                    <div class="row">
                        <div class="col-md-6 offset-md-6">
                            <table class="table">
                                <tr>
                                    <td class="text-end"><strong>Sous-total HT:</strong></td>
                                    <td class="text-end">{{ invoice.subtotalAmount|number_format(2, ',', ' ') }} {{ invoice.currency }}</td>
                                </tr>
                                <tr>
                                    <td class="text-end"><strong>TVA ({{ invoice.taxRate|number_format(2) }}%):</strong></td>
                                    <td class="text-end">{{ invoice.taxAmount|number_format(2, ',', ' ') }} {{ invoice.currency }}</td>
                                </tr>
                                <tr class="table-primary">
                                    <td class="text-end"><strong>TOTAL TTC:</strong></td>
                                    <td class="text-end"><strong class="fs-5">{{ invoice.totalAmount|number_format(2, ',', ' ') }} {{ invoice.currency }}</strong></td>
                                </tr>
                            </table>
                        </div>
                    </div>

                    {# Notes #}
                    {% if invoice.notes %}
                    <div class="row mt-4">
                        <div class="col-12">
                            <div class="alert alert-light">
                                <strong>Notes:</strong><br>
                                {{ invoice.notes|nl2br }}
                            </div>
                        </div>
                    </div>
                    {% endif %}

                    {# Pied de page #}
                    {% if config and config.invoiceFooterText %}
                    <div class="row mt-5">
                        <div class="col-12">
                            <hr>
                            <div class="text-center text-muted small">
                                {{ config.invoiceFooterText|nl2br }}
                            </div>
                        </div>
                    </div>
                    {% endif %}

                    <div class="row mt-3">
                        <div class="col-12">
                            <div class="text-center text-muted small">
                                Document généré le {{ "now"|date('d/m/Y à H:i') }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}