{% extends "base.html" %}

{% block title %}Invoice - {{ clinic_name | default('DentalPin') }}{% endblock %}

{% block content %}
<h2>Invoice</h2>

<p>Hello {{ patient_name }},</p>

<p>Please find the details of invoice <strong>#{{ invoice_number }}</strong> from <strong>{{ clinic_name | default('DentalPin') }}</strong>:</p>

<div class="info-box">
    <div class="info-row">
        <div style="flex: 1;">
            <div class="label">Invoice number</div>
            <div class="value">#{{ invoice_number }}</div>
        </div>
        <div style="flex: 1;">
            <div class="label">Date</div>
            <div class="value">{{ invoice_date or '—' }}</div>
        </div>
    </div>
    {% if due_date %}
    <div class="info-row">
        <div class="label">Due date</div>
        <div class="value">{{ due_date }}</div>
    </div>
    {% endif %}
</div>

{% if items %}
<div class="info-box">
    {% for item in items %}
    <div class="info-row">
        <div style="flex: 3;">
            <div class="label">{{ item.description }}{% if item.quantity > 1 %} × {{ item.quantity }}{% endif %}</div>
        </div>
        <div style="flex: 1; text-align: right;">
            <div class="value">{{ item.line_total }}</div>
        </div>
    </div>
    {% endfor %}
</div>
{% endif %}

<div class="info-box">
    {% if total_discount %}
    <div class="info-row">
        <div class="label">Subtotal</div>
        <div class="value">{{ subtotal }}</div>
    </div>
    <div class="info-row">
        <div class="label">Discount</div>
        <div class="value">-{{ total_discount }}</div>
    </div>
    {% endif %}
    {% if total_tax %}
    <div class="info-row">
        <div class="label">Tax</div>
        <div class="value">{{ total_tax }}</div>
    </div>
    {% endif %}
    <div class="info-row">
        <div class="label">Total</div>
        <div class="value" style="font-size: 18px; font-weight: 700;">{{ total }}</div>
    </div>
    {% if balance_due and balance_due != total %}
    <div class="info-row">
        <div class="label">Balance due</div>
        <div class="value" style="color: #ef4444; font-weight: 700;">{{ balance_due }}</div>
    </div>
    {% endif %}
</div>

{% if custom_message %}
<div class="alert alert-info">
    {{ custom_message }}
</div>
{% endif %}

<p>Please contact us if you have any questions about this invoice.</p>
{% endblock %}