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

{% block title %}Account Statement - {{ customer.name }}{% endblock %}

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

<h2 class="text-center">Account Statement</h2>
<p class="text-center text-muted">
    Account summary for {{ customer.name }} as of {{ statementDate|date('F d, Y') }}
</p>

<div class="info-box">
    <table>
        <tr>
            <td class="label">Customer</td>
            <td class="value">{{ customer.name }}</td>
        </tr>
        {% if customer.contactPerson %}
        <tr>
            <td class="label">Contact</td>
            <td class="value">{{ customer.contactPerson }}</td>
        </tr>
        {% endif %}
        <tr>
            <td class="label">Statement Period</td>
            <td class="value">{{ periodStart|date('M d') }} - {{ periodEnd|date('M d, Y') }}</td>
        </tr>
        <tr>
            <td class="label">Statement Date</td>
            <td class="value">{{ statementDate|date('F d, Y') }}</td>
        </tr>
    </table>
</div>

{# Account Summary #}
<h3>Account Summary</h3>
<div class="info-box">
    <table>
        <tr>
            <td class="label">Opening Balance</td>
            <td class="value">{{ currency.symbol }}{{ openingBalance|number_format(2, '.', ',') }}</td>
        </tr>
        <tr>
            <td class="label">New Charges</td>
            <td class="value">{{ currency.symbol }}{{ totalCharges|number_format(2, '.', ',') }}</td>
        </tr>
        <tr>
            <td class="label">Payments Received</td>
            <td class="value" style="color: #2e7d32;">- {{ currency.symbol }}{{ totalPayments|number_format(2, '.', ',') }}</td>
        </tr>
        <tr style="background-color: #f0f0f0;">
            <td class="label" style="font-weight: bold; font-size: 16px;">Balance Due</td>
            <td class="value" style="font-size: 20px; {% if balanceDue > 0 %}color: #e94560;{% else %}color: #2e7d32;{% endif %}">
                {{ currency.symbol }}{{ balanceDue|number_format(2, '.', ',') }}
            </td>
        </tr>
    </table>
</div>

{# Transaction History #}
<h3>Transaction History</h3>
<table class="data-table">
    <thead>
        <tr>
            <th>Date</th>
            <th>Description</th>
            <th class="amount">Charges</th>
            <th class="amount">Payments</th>
            <th class="amount">Balance</th>
        </tr>
    </thead>
    <tbody>
        <tr style="background-color: #f8f9fa;">
            <td>{{ periodStart|date('M d') }}</td>
            <td>Opening Balance</td>
            <td class="amount">-</td>
            <td class="amount">-</td>
            <td class="amount">{{ currency.symbol }}{{ openingBalance|number_format(2, '.', ',') }}</td>
        </tr>
        {% set runningBalance = openingBalance %}
        {% for transaction in transactions %}
        {% if transaction.type == 'invoice' %}
            {% set runningBalance = runningBalance + transaction.amount %}
        {% else %}
            {% set runningBalance = runningBalance - transaction.amount %}
        {% endif %}
        <tr>
            <td>{{ transaction.date|date('M d') }}</td>
            <td>
                {% if transaction.type == 'invoice' %}
                    Invoice #{{ transaction.reference }}
                {% else %}
                    Payment - {{ transaction.reference }}
                {% endif %}
            </td>
            <td class="amount">
                {% if transaction.type == 'invoice' %}
                    {{ currency.symbol }}{{ transaction.amount|number_format(2, '.', ',') }}
                {% else %}
                    -
                {% endif %}
            </td>
            <td class="amount" style="color: #2e7d32;">
                {% if transaction.type == 'payment' %}
                    {{ currency.symbol }}{{ transaction.amount|number_format(2, '.', ',') }}
                {% else %}
                    -
                {% endif %}
            </td>
            <td class="amount">{{ currency.symbol }}{{ runningBalance|number_format(2, '.', ',') }}</td>
        </tr>
        {% endfor %}
        <tr class="total-row">
            <td colspan="2" style="text-align: right;">Closing Balance</td>
            <td class="amount">{{ currency.symbol }}{{ totalCharges|number_format(2, '.', ',') }}</td>
            <td class="amount" style="color: #2e7d32;">{{ currency.symbol }}{{ totalPayments|number_format(2, '.', ',') }}</td>
            <td class="amount" style="{% if balanceDue > 0 %}color: #e94560;{% else %}color: #2e7d32;{% endif %}">
                {{ currency.symbol }}{{ balanceDue|number_format(2, '.', ',') }}
            </td>
        </tr>
    </tbody>
</table>

{# Outstanding Invoices #}
{% if outstandingInvoices|length > 0 %}
<h3>Outstanding Invoices</h3>
<table class="data-table">
    <thead>
        <tr>
            <th>Invoice</th>
            <th>Date</th>
            <th>Due Date</th>
            <th class="amount">Amount Due</th>
        </tr>
    </thead>
    <tbody>
        {% for invoice in outstandingInvoices %}
        <tr>
            <td>#{{ invoice.displayInvoiceNumber }}</td>
            <td>{{ invoice.invoiceDate|date('M d, Y') }}</td>
            <td style="{% if invoice.dueDate < 'now'|date %}color: #c62828;{% endif %}">
                {{ invoice.dueDate|date('M d, Y') }}
                {% if invoice.dueDate < 'now'|date %}
                <br><span style="font-size: 11px;">OVERDUE</span>
                {% endif %}
            </td>
            <td class="amount">{{ invoice.formattedBalanceDue }}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>
{% endif %}

{% if balanceDue > 0 %}
<div class="alert alert-warning">
    <h4>Payment Required</h4>
    <p>Please arrange payment of <strong>{{ currency.symbol }}{{ balanceDue|number_format(2, '.', ',') }}</strong> at your earliest convenience.</p>
</div>

{% if company.bankName is defined and company.bankName %}
<h3>Payment Details</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>
{% endif %}
{% else %}
<div class="alert alert-success">
    <h4>Account in Good Standing</h4>
    <p>Thank you for keeping your account up to date!</p>
</div>
{% endif %}

<hr class="divider">

<p class="text-center text-muted text-small">
    This statement is provided for your records. If you have any questions about
    your account, please contact us at <a href="mailto:sales@kits.co.tz" style="color: #e94560;">sales@kits.co.tz</a>.
</p>
{% endblock %}