{% extends "base.html" %}

{% block content %}
<div class="row">
    <div class="large-8 columns">
        <h2>Facture N°{{ invoice.number }}</h2>
        <p>Émise le {{ invoice.date }}</p>
    </div>
    <div class="large-4 columns">
        {% if invoice.validated %}<a href="{% url 'billing:invoice_pdf' id=invoice.number %}" target="_blank" class="button expand"><i class="fa fa-file-pdf-o"></i> Télécharger en PDF</a>{% endif %}
    </div>
</div>

<table id="invoice_details" class="invoice-table full-width">
    <thead>
        <tr>
            <th></th>
            <th>Quantité</th>
            <th>PU</th>
            <th class="total">Total TTC</th>
        </tr>
    </thead>
    <tbody>
        {% for detail in invoice.details.all %}
        <tr>
            <td>{{ detail.label }}
                {% if detail.period_from and detail.period_to %}<br/><span class="period">Pour la période du {{ detail.period_from }} au {{ detail.period_to }}{% endif %}</span></td>
            <td>{{ detail.quantity }}</td>
            <td>{{ detail.amount }}€</td>
            <td class="total">{{ detail.total }}€</td>
        </tr>
        {% endfor %}
        <tr class="total">
            <td class="" colspan="3">Total TTC</td>
            <td class="total">{{ invoice.amount }}€</td>
        </tr>
    </tbody>
</table>

<p>
  Facture à payer avant le {{ invoice.date_due }}.
</p>

<h3>Règlement</h3>

{% if invoice.payments.exists %}
    <table id="invoice-payments" class="invoice-table full-width">
        <thead>
            <tr>
                <th>Type de paiement</th>
                <th>Date</th>
                <th class="total">Montant</th>
            </tr>
        </thead>
        <tbody>
            {% for payment in invoice.payments.all %}
            <tr class="payment">
                <td>{{ payment.get_payment_mean_display }}</td>
                <td>{{ payment.date }}</td>
                <td class="total">-{{ payment.amount }}€</td>
            </tr>
            {% endfor %}
            <tr class="total">
                <td class="" colspan="2">Reste à payer</td>
                <td class="total">{{ invoice.amount_remaining_to_pay }}€</td>
            </tr>
        </tbody>
    </table>
{% endif %}

{% if invoice.amount_remaining_to_pay > 0 %}
    <div id="payment-howto" class="panel">
        {% include "billing/payment_howto.html" %}
    </div>
{% endif %}

{% endblock %}