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

{% block content %}
<div class="mb-6 flex justify-between items-center">
    <a href="{{ path('admin_income_index') }}" class="text-gray-400 hover:text-gray-600 transition-colors text-sm">
        <i class="bi bi-arrow-left"></i> Back to Income
    </a>
    <div class="flex gap-2">
        <form action="{{ path('admin_income_toggle_reconciled', {id: income.id}) }}" method="POST" class="inline">
            <button type="submit" 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-{{ income.isReconciled ? 'x-circle' : 'check-circle' }}"></i>
                {{ income.isReconciled ? 'Mark Unreconciled' : 'Mark Reconciled' }}
            </button>
        </form>
        <a href="{{ path('admin_income_edit', {id: income.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
        </a>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <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">Income Details</h3>
                <div class="flex gap-2">
                    {% if income.isAutoGenerated %}
                    <span class="inline-block px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-700">Auto-Generated</span>
                    {% endif %}
                    {% if income.isReconciled %}
                    <span class="inline-block px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700">Reconciled</span>
                    {% endif %}
                </div>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <p class="text-xs text-gray-400 mb-1">Reference Number</p>
                        <p class="font-mono text-gray-800">{{ income.referenceNumber }}</p>
                    </div>
                    <div>
                        <p class="text-xs text-gray-400 mb-1">Date</p>
                        <p class="text-gray-800">{{ income.incomeDate|date('d M Y') }}</p>
                    </div>
                    <div class="md:col-span-2">
                        <p class="text-xs text-gray-400 mb-1">Description</p>
                        <p class="text-gray-800">{{ income.description }}</p>
                    </div>
                    <div>
                        <p class="text-xs text-gray-400 mb-1">Category</p>
                        <p class="text-gray-800">{{ income.category.name }}</p>
                    </div>
                    <div>
                        <p class="text-xs text-gray-400 mb-1">Account</p>
                        <p class="text-gray-800">{{ income.account.name }}</p>
                    </div>
                    {% if income.customer %}
                    <div>
                        <p class="text-xs text-gray-400 mb-1">Customer</p>
                        <p class="text-gray-800">{{ income.customer.name }}</p>
                    </div>
                    {% endif %}
                    {% if income.relatedInvoice %}
                    <div>
                        <p class="text-xs text-gray-400 mb-1">Related Invoice</p>
                        <a href="{{ path('admin_invoice_show', {id: income.relatedInvoice.id}) }}" class="text-kitsco-accent hover:underline">
                            #{{ income.relatedInvoice.displayInvoiceNumber }}
                        </a>
                    </div>
                    {% endif %}
                    {% if income.notes %}
                    <div class="md:col-span-2">
                        <p class="text-xs text-gray-400 mb-1">Notes</p>
                        <p class="text-gray-600">{{ income.notes }}</p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <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">Amount</h4>
            <p class="text-3xl font-bold text-green-600">{{ income.formattedAmount }}</p>
            {% if income.isForeignCurrency %}
            <p class="text-sm text-gray-500 mt-2">
                TZS Equivalent: {{ income.formattedAmountInTzs }}
            </p>
            <p class="text-xs text-gray-400 mt-1">
                Exchange rate: {{ income.exchangeRate }}
            </p>
            {% endif %}

            <div class="border-t border-gray-100 mt-4 pt-4">
                <p class="text-xs text-gray-400">Currency</p>
                <p class="text-gray-800">{{ income.currency.code }} ({{ income.currency.symbol }})</p>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 mt-4">
            <h4 class="text-sm font-semibold text-gray-800 mb-4">Audit Info</h4>
            <div class="space-y-2 text-sm">
                <div>
                    <span class="text-gray-400">Created by:</span>
                    <span class="text-gray-700">{{ income.createdBy.fullName }}</span>
                </div>
                <div>
                    <span class="text-gray-400">Created:</span>
                    <span class="text-gray-700">{{ income.createdAt|date('d M Y H:i') }}</span>
                </div>
                <div>
                    <span class="text-gray-400">Updated:</span>
                    <span class="text-gray-700">{{ income.updatedAt|date('d M Y H:i') }}</span>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}