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

{% block title %}Payment Reminder - Invoice #{{ invoice.displayInvoiceNumber }}{% endblock %}

{% block content %}
<div class="icon-badge icon-warning">
    <span>&#9888;</span>
</div>

<h2 class="text-center">Friendly Payment Reminder</h2>
<p class="text-center text-muted">
    Hi {{ customer.name }}, this is a reminder about your outstanding invoice.
</p>

<div class="alert alert-warning">
    <h4>Payment Due {{ daysUntilDue >= 0 ? 'in ' ~ daysUntilDue ~ ' days' : 'was ' ~ (daysUntilDue * -1) ~ ' days ago' }}</h4>
    <p>Invoice #{{ invoice.displayInvoiceNumber }} has an outstanding balance of <strong>{{ invoice.formattedBalanceDue }}</strong>.</p>
</div>

<div class="info-box">
    <table>
        <tr>
            <td class="label">Invoice Number</td>
            <td class="value">#{{ invoice.displayInvoiceNumber }}</td>
        </tr>
        <tr>
            <td class="label">Invoice Date</td>
            <td class="value">{{ invoice.invoiceDate|date('F d, Y') }}</td>
        </tr>
        <tr>
            <td class="label">Due Date</td>
            <td class="value" style="{% if daysUntilDue < 0 %}color: #c62828; font-weight: bold;{% endif %}">
                {{ invoice.dueDate|date('F d, Y') }}
            </td>
        </tr>
        <tr>
            <td class="label">Invoice Total</td>
            <td class="value">{{ invoice.formattedTotal }}</td>
        </tr>
        {% if invoice.totalPaid > 0 %}
        <tr>
            <td class="label">Amount Paid</td>
            <td class="value" style="color: #2e7d32;">{{ invoice.currency.symbol }}{{ invoice.totalPaid|number_format(2, '.', ',') }}</td>
        </tr>
        {% endif %}
        <tr>
            <td class="label">Balance Due</td>
            <td class="value" style="font-size: 18px; color: #e94560;">{{ invoice.formattedBalanceDue }}</td>
        </tr>
    </table>
</div>

{% if company.bankName %}
<h3>Bank Details for Payment</h3>
<div class="info-box">
    <table>
        <tr>
            <td class="label">Bank Name</td>
            <td class="value">{{ company.bankName }}</td>
        </tr>
        <tr>
            <td class="label">Account Name</td>
            <td class="value">{{ company.bankAccountName }}</td>
        </tr>
        <tr>
            <td class="label">Account Number</td>
            <td class="value">{{ company.bankAccountNumber }}</td>
        </tr>
    </table>
</div>

<div class="alert alert-info">
    <h4>Payment Reference</h4>
    <p>Please include <strong>#{{ invoice.invoiceNumber }}</strong> as your payment reference for faster processing.</p>
</div>
{% endif %}

{% if statusUrl %}
<div class="btn-wrapper">
    <a href="{{ statusUrl }}" class="btn btn-primary">View Invoice</a>
</div>
{% endif %}

<hr class="divider">

<p class="text-center text-muted text-small">
    If you've already made this payment, please disregard this reminder.
    It may take 1-2 business days for payments to be reflected in our system.
</p>

<p class="text-center text-muted text-small">
    Having trouble with payment? Contact us and we'll be happy to help.
</p>
{% endblock %}