{% extends 'admin/layout/base.twig' %}
{% block title %}Ledger - {{ app_name }}{% endblock %}
{% block content %}
<div class="op-page-header">
    <div>
        <h1>Ledger & Accounting</h1>
        <p class="op-page-subtitle">Sovereign double-entry bookkeeping ledgers, account journals, and balance matching.</p>
    </div>
    <div class="op-header-actions">
        <div class="op-stats-badge">Current Balance: <strong>{{ current_balance }} BDT</strong></div>
    </div>
</div>

<div class="op-card">
    <div class="op-card-body op-p-0">
        <div class="op-table-responsive">
            <table class="op-table">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Reference</th>
                        <th>Type</th>
                        <th>Amount</th>
                        <th>Status</th>
                        <th>Description</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in ledger.items %}
                    <tr class="op-ledger-row op-cursor-pointer" data-target="details-{{ item.id }}">
                        <td data-label="Date">{{ item.created_at|date("M d, Y H:i") }}</td>
                        <td data-label="Reference"><code>{{ item.reference_id }}</code><br><small class="op-text-muted">{{ item.reference_type }}</small></td>
                        <td data-label="Type"><span class="op-badge op-badge-{{ item.event_type == 'payment_received' ? 'success' : 'warning' }}">{{ item.event_type|replace({'_': ' '})|capitalize }}</span></td>
                        <td data-label="Amount"><strong>{{ item.currency }} {{ item.total_amount }}</strong></td>
                        <td data-label="Status"><span class="op-badge op-badge-success">{{ item.status|capitalize }}</span></td>
                        <td data-label="Description">
                            {{ item.description }}
                            <div class="op-text-xs op-text-muted op-mt-1">Click to view audit lines</div>
                        </td>
                    </tr>
                    <tr id="details-{{ item.id }}" class="op-hidden op-ledger-detail-row">
                        <td colspan="6" class="op-ledger-detail-cell">
                            <div class="op-font-bold op-mb-2 op-text-sm">Double-Entry Journal Lines:</div>
                            <div class="op-flex-col op-gap-6 op-max-w-500">
                                {% set entries = item.entries_summary|split(',') %}
                                {% for entry in entries %}
                                    {% set parts = entry|split(':') %}
                                    {% if parts|length == 2 %}
                                        <div class="op-ledger-entry-row">
                                            <span>
                                                <span class="op-badge op-badge-{{ parts[0] == 'debit' ? 'info' : 'outline' }} op-badge-xs">
                                                    {{ parts[0]|upper }}
                                                </span>
                                                &nbsp;Account
                                            </span>
                                            <span class="op-font-bold {{ parts[0] == 'debit' ? 'op-text-info' : 'op-text-success' }}">
                                                {{ parts[0] == 'debit' ? 'DR' : 'CR' }} {{ item.currency }} {{ parts[1] }}
                                            </span>
                                        </div>
                                    {% endif %}
                                {% endfor %}
                            </div>
                        </td>
                    </tr>
                    {% else %}
                    <tr><td colspan="6" class="op-text-center">No ledger entries found.</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

{% if ledger.total_pages > 1 %}
<nav class="op-pagination">
    {% if ledger.page > 1 %}<a href="?page={{ ledger.page - 1 }}" class="op-page-link">← Prev</a>{% endif %}
    <span class="op-page-info">Page {{ ledger.page }} of {{ ledger.total_pages }}</span>
    {% if ledger.page < ledger.total_pages %}<a href="?page={{ ledger.page + 1 }}" class="op-page-link">Next →</a>{% endif %}
</nav>
{% endif %}
{% endblock %}

{% block scripts %}
<script nonce="{{ csp_nonce }}">
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.op-ledger-row').forEach(function(row) {
        row.addEventListener('click', function() {
            var targetId = this.getAttribute('data-target');
            var targetRow = document.getElementById(targetId);
            if (targetRow) {
                targetRow.classList.toggle('op-hidden');
            }
        });
    });
});
</script>
{% endblock %}