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

{% block content %}
<div class="mb-6 flex justify-between items-center">
    <a href="{{ path('admin_account_index') }}" class="text-gray-400 hover:text-gray-600 transition-colors text-sm">
        <i class="bi bi-arrow-left"></i> Back to Accounts
    </a>
    <div class="flex gap-2">
        <a href="{{ path('admin_account_statement', {id: account.id}) }}" 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">
            <i class="bi bi-file-text"></i> Full Statement
        </a>
        <a href="{{ path('admin_account_edit', {id: account.id}) }}" 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-pencil"></i> Edit Account
        </a>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <div class="lg:col-span-1">
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
            <div class="flex justify-between items-start mb-4">
                <span class="inline-block px-2 py-0.5 rounded-full text-xs font-medium {{ account.type.badgeClass }}">
                    {{ account.type.label }}
                </span>
                {% if account.isDefault %}
                <span class="inline-block px-2 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-700">Default</span>
                {% endif %}
            </div>

            <h2 class="text-xl font-bold text-gray-800 mb-1">{{ account.name }}</h2>
            <p class="text-sm text-gray-500 font-mono mb-4">{{ account.code }}</p>

            {% if account.bankName %}
            <div class="mb-2">
                <span class="text-xs text-gray-400">Bank:</span>
                <span class="text-sm text-gray-700">{{ account.bankName }}</span>
            </div>
            {% endif %}

            {% if account.accountNumber %}
            <div class="mb-4">
                <span class="text-xs text-gray-400">Account Number:</span>
                <span class="text-sm text-gray-700">{{ account.accountNumber }}</span>
            </div>
            {% endif %}

            <div class="border-t border-gray-100 pt-4 mt-4">
                <div class="mb-3">
                    <span class="text-xs text-gray-400">Opening Balance</span>
                    <p class="text-sm font-medium text-gray-700">{{ account.currency.symbol }} {{ account.openingBalance|money }}</p>
                </div>
                <div>
                    <span class="text-xs text-gray-400">Current Balance</span>
                    <p class="text-2xl font-bold {{ account.currentBalance|number_format(0) >= 0 ? 'text-green-600' : 'text-red-600' }}">
                        {{ account.formattedBalance }}
                    </p>
                </div>
            </div>

            <div class="border-t border-gray-100 pt-4 mt-4">
                <form action="{{ path('admin_account_recalculate', {id: account.id}) }}" method="POST">
                    <button type="submit" class="w-full inline-flex items-center justify-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">
                        <i class="bi bi-arrow-clockwise"></i> Recalculate Balance
                    </button>
                </form>
            </div>
        </div>
    </div>

    <div class="lg:col-span-2">
        <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 flex justify-between items-center">
                <h3 class="font-semibold text-gray-800 text-sm">Recent Transactions (This Month)</h3>
            </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|u.truncate(40) }}</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 this month
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% endblock %}