{% extends 'admin/layout.html.twig' %}
{% block title %}Account Statement - {{ account.name }} - KitscoApp{% endblock %}
{% block page_title %}Account Statement: {{ account.name }}{% endblock %}

{% block content %}
<div class="mb-6 flex justify-between items-center">
    <a href="{{ path('admin_account_show', {id: account.id}) }}" class="text-gray-400 hover:text-gray-600 transition-colors text-sm">
        <i class="bi bi-arrow-left"></i> Back to Account
    </a>
    <button onclick="window.print()" class="inline-flex items-center gap-1.5 border border-gray-300 text-gray-600 hover:bg-gray-50 font-medium py-2 px-4 rounded-lg transition-colors text-sm no-print">
        <i class="bi bi-printer"></i> Print Statement
    </button>
</div>

<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden mb-6 no-print">
    <div class="px-6 py-4 border-b border-gray-100">
        <h3 class="font-semibold text-gray-800 text-sm">Date Range</h3>
    </div>
    <div class="p-6">
        <form method="GET" class="flex flex-wrap items-end gap-4">
            <div>
                <label class="block text-xs text-gray-500 mb-1">From</label>
                <input type="date" name="from" value="{{ from }}" class="border border-gray-300 rounded-lg px-3 py-2 text-sm">
            </div>
            <div>
                <label class="block text-xs text-gray-500 mb-1">To</label>
                <input type="date" name="to" value="{{ to }}" class="border border-gray-300 rounded-lg px-3 py-2 text-sm">
            </div>
            <button type="submit" class="inline-flex items-center gap-1.5 bg-kitsco-accent hover:bg-kitsco-dark text-white font-medium py-2 px-4 rounded-lg transition-colors text-sm">
                <i class="bi bi-search"></i> Generate
            </button>
        </form>
    </div>
</div>

<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
    <div class="px-6 py-4 border-b border-gray-100">
        <div class="flex justify-between items-center">
            <div>
                <h3 class="font-semibold text-gray-800">{{ account.name }}</h3>
                <p class="text-sm text-gray-500">{{ statement.from|date('d M Y') }} - {{ statement.to|date('d M Y') }}</p>
            </div>
            <div class="text-right">
                <p class="text-xs text-gray-400">Opening Balance</p>
                <p class="text-lg font-semibold text-gray-800">{{ account.currency.symbol }} {{ statement.openingBalance|money }}</p>
            </div>
        </div>
    </div>
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead class="bg-gray-50 text-gray-500 text-xs uppercase">
                <tr>
                    <th class="px-4 py-3 text-left font-medium">Date</th>
                    <th class="px-4 py-3 text-left font-medium">Reference</th>
                    <th class="px-4 py-3 text-left font-medium">Description</th>
                    <th class="px-4 py-3 text-right font-medium">Debit</th>
                    <th class="px-4 py-3 text-right font-medium">Credit</th>
                    <th class="px-4 py-3 text-right font-medium">Balance</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                {% for tx in statement.transactions %}
                <tr class="hover:bg-gray-50">
                    <td class="px-4 py-3 text-gray-600">{{ tx.date|date('d M Y') }}</td>
                    <td class="px-4 py-3">
                        <span class="text-xs font-mono text-gray-500">{{ tx.reference }}</span>
                    </td>
                    <td class="px-4 py-3 text-gray-800">{{ tx.description }}</td>
                    <td class="px-4 py-3 text-right text-red-600">
                        {% if tx.debit %}{{ account.currency.symbol }} {{ tx.debit|money }}{% endif %}
                    </td>
                    <td class="px-4 py-3 text-right text-green-600">
                        {% if tx.credit %}{{ account.currency.symbol }} {{ tx.credit|money }}{% endif %}
                    </td>
                    <td class="px-4 py-3 text-right font-medium">
                        {{ account.currency.symbol }} {{ tx.balance|money }}
                    </td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="6" class="px-4 py-8 text-center text-gray-400">
                        No transactions found for this period
                    </td>
                </tr>
                {% endfor %}
            </tbody>
            <tfoot class="bg-gray-50">
                <tr>
                    <td colspan="5" class="px-4 py-3 text-right font-semibold text-gray-800">Closing Balance</td>
                    <td class="px-4 py-3 text-right font-bold text-gray-800">
                        {{ account.currency.symbol }} {{ statement.closingBalance|money }}
                    </td>
                </tr>
            </tfoot>
        </table>
    </div>
</div>
{% endblock %}