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

{% block content %}
<div class="mb-6 flex justify-between items-center">
    <a href="{{ path('admin_accounting_dashboard') }}" class="text-gray-400 hover:text-gray-600 transition-colors text-sm">
        <i class="bi bi-arrow-left"></i> Back to Accounting
    </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 Report
    </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-4">
        <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="grid grid-cols-1 lg:grid-cols-4 gap-6 mb-6">
    <div class="lg:col-span-1">
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
            <h4 class="text-sm font-semibold text-gray-800 mb-4">Summary by Category</h4>
            <div class="space-y-3">
                {% for item in totalByCategory %}
                <div>
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-700">{{ item.category }}</span>
                        <span class="font-medium text-gray-800">Shs {{ item.total|money }}</span>
                    </div>
                </div>
                {% else %}
                <p class="text-gray-400 text-sm">No data</p>
                {% endfor %}
            </div>
            <div class="border-t border-gray-100 mt-4 pt-4">
                <div class="flex justify-between">
                    <span class="font-semibold text-gray-800">Total</span>
                    <span class="font-bold text-green-600">Shs {{ total|money }}</span>
                </div>
            </div>
        </div>
    </div>

    <div class="lg:col-span-3">
        <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">
                <h3 class="font-semibold text-gray-800 text-sm">Income Details</h3>
                <p class="text-xs text-gray-500">{{ from }} to {{ to }}</p>
            </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-left font-medium">Category</th>
                            <th class="px-4 py-3 text-right font-medium">Amount (TZS)</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        {% for income in incomes %}
                        <tr>
                            <td class="px-4 py-3 text-gray-600">{{ income.incomeDate|date('d M Y') }}</td>
                            <td class="px-4 py-3 font-mono text-xs text-gray-500">{{ income.referenceNumber }}</td>
                            <td class="px-4 py-3 text-gray-800">{{ income.description|u.truncate(40) }}</td>
                            <td class="px-4 py-3 text-gray-600">{{ income.category.name }}</td>
                            <td class="px-4 py-3 text-right font-medium text-green-600">Shs {{ income.amountInTzs|money }}</td>
                        </tr>
                        {% else %}
                        <tr>
                            <td colspan="5" class="px-4 py-8 text-center text-gray-400">No income found</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                    <tfoot class="bg-gray-50">
                        <tr>
                            <td colspan="4" class="px-4 py-3 text-right font-semibold text-gray-800">Total</td>
                            <td class="px-4 py-3 text-right font-bold text-green-600">Shs {{ total|money }}</td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
</div>
{% endblock %}