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

{% block content %}
<div class="flex flex-wrap justify-between items-center gap-4 mb-6">
    <p class="text-sm text-gray-500">{{ expenses|length }} expense(s)</p>
    <a href="{{ path('admin_expense_new') }}" 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-plus-circle"></i> Add Expense
    </a>
</div>

{# Mobile filter toggle button #}
<div class="md:hidden mb-4">
    <button type="button" id="mobileFilterToggle" class="inline-flex items-center justify-center w-10 h-10 bg-white rounded-lg shadow-sm border border-gray-100 text-gray-600 hover:bg-gray-50 transition-colors">
        <i class="bi bi-funnel text-lg"></i>
    </button>
</div>

{# Filter card - hidden on mobile by default, always visible on desktop #}
<div id="filterCard" class="hidden md:block bg-white rounded-xl shadow-sm border border-gray-100 mb-6">
    <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
        <h3 class="font-semibold text-gray-800 text-sm">Filters</h3>
        <button type="button" id="mobileFilterClose" class="md:hidden text-gray-400 hover:text-gray-600">
            <i class="bi bi-x-lg"></i>
        </button>
    </div>
    <div class="p-4">
        <form method="GET" class="flex flex-wrap items-end gap-3">
            {# Category dropdown #}
            <div class="w-full md:w-40">
                {% set category_options = [{value: '', label: 'All Categories'}] %}
                {% for cat in categories %}
                    {% set category_options = category_options|merge([{value: cat.id, label: cat.name}]) %}
                {% endfor %}
                {% include 'components/_select_dropdown.html.twig' with {
                    id: 'filter_category',
                    name: 'category',
                    value: filters.category,
                    label: 'Category',
                    options: category_options,
                    placeholder: 'All Categories',
                    required: false
                } %}
            </div>
            {# Account dropdown #}
            <div class="w-full md:w-40">
                {% set account_options = [{value: '', label: 'All Accounts'}] %}
                {% for acc in accounts %}
                    {% set account_options = account_options|merge([{value: acc.id, label: acc.name}]) %}
                {% endfor %}
                {% include 'components/_select_dropdown.html.twig' with {
                    id: 'filter_account',
                    name: 'account',
                    value: filters.account,
                    label: 'Account',
                    options: account_options,
                    placeholder: 'All Accounts',
                    required: false
                } %}
            </div>
            {# Supplier dropdown #}
            <div class="w-full md:w-40">
                {% set supplier_options = [{value: '', label: 'All Suppliers'}] %}
                {% for sup in suppliers %}
                    {% set supplier_options = supplier_options|merge([{value: sup.id, label: sup.name}]) %}
                {% endfor %}
                {% include 'components/_select_dropdown.html.twig' with {
                    id: 'filter_supplier',
                    name: 'supplier',
                    value: filters.supplier,
                    label: 'Supplier',
                    options: supplier_options,
                    placeholder: 'All Suppliers',
                    searchable: true,
                    searchPlaceholder: 'Search suppliers...',
                    required: false
                } %}
            </div>
            <div class="flex gap-2 w-full md:w-auto">
                <div class="flex-1 md:flex-none">
                    <label class="block text-xs text-gray-500 mb-1">From</label>
                    <input type="date" name="from" value="{{ filters.from }}" class="w-full md:w-auto border border-gray-300 rounded-lg px-3 py-2 text-sm">
                </div>
                <div class="flex-1 md:flex-none">
                    <label class="block text-xs text-gray-500 mb-1">To</label>
                    <input type="date" name="to" value="{{ filters.to }}" class="w-full md:w-auto border border-gray-300 rounded-lg px-3 py-2 text-sm">
                </div>
            </div>
            <div class="flex items-center gap-2 w-full md:w-auto">
                <button type="submit" class="flex-1 md:flex-none inline-flex items-center justify-center gap-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium py-2 px-4 rounded-lg transition-colors text-sm">
                    <i class="bi bi-search"></i> Filter
                </button>
                <a href="{{ path('admin_expense_index') }}" class="inline-flex items-center gap-1 text-sm text-gray-500 hover:text-gray-700">Clear</a>
            </div>
        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const toggleBtn = document.getElementById('mobileFilterToggle');
    const closeBtn = document.getElementById('mobileFilterClose');
    const filterCard = document.getElementById('filterCard');

    toggleBtn.addEventListener('click', function() {
        filterCard.classList.remove('hidden');
        filterCard.classList.add('block');
    });

    closeBtn.addEventListener('click', function() {
        filterCard.classList.add('hidden');
        filterCard.classList.remove('block');
    });
});
</script>

<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
    <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">Reference</th>
                    <th class="px-4 py-3 text-left font-medium">Date</th>
                    <th class="px-4 py-3 text-left font-medium">Description</th>
                    <th class="px-4 py-3 text-left font-medium hidden md:table-cell">Category</th>
                    <th class="px-4 py-3 text-left font-medium hidden md:table-cell">Account</th>
                    <th class="px-4 py-3 text-right font-medium">Amount</th>
                    <th class="px-4 py-3 text-right font-medium">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                {% for expense in expenses %}
                <tr class="hover:bg-gray-50 transition-colors">
                    <td class="px-4 py-3">
                        <span class="text-xs font-mono text-gray-600">{{ expense.referenceNumber }}</span>
                        {% if expense.isReconciled %}
                        <span class="ml-1 inline-block w-2 h-2 rounded-full bg-green-500" title="Reconciled"></span>
                        {% endif %}
                    </td>
                    <td class="px-4 py-3 text-gray-600">{{ expense.expenseDate|date('d M Y') }}</td>
                    <td class="px-4 py-3">
                        <p class="font-medium text-gray-800">{{ expense.description|u.truncate(40) }}</p>
                        {% if expense.supplier %}<p class="text-xs text-gray-400">{{ expense.supplier.name }}</p>{% endif %}
                    </td>
                    <td class="px-4 py-3 hidden md:table-cell text-gray-600">{{ expense.category.name }}</td>
                    <td class="px-4 py-3 hidden md:table-cell text-gray-600">{{ expense.account.name }}</td>
                    <td class="px-4 py-3 text-right">
                        <p class="font-semibold text-red-600">{{ expense.formattedAmount }}</p>
                        {% if expense.isForeignCurrency %}
                        <p class="text-xs text-gray-400">{{ expense.formattedAmountInTzs }}</p>
                        {% endif %}
                    </td>
                    <td class="px-4 py-3 text-right">
                        <a href="{{ path('admin_expense_show', {id: expense.id}) }}" class="inline-flex items-center justify-center w-8 h-8 rounded-lg border border-gray-300 text-gray-500 hover:bg-gray-50" title="View"><i class="bi bi-eye text-sm"></i></a>
                    </td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="7" class="px-4 py-16 text-center">
                        <div class="text-gray-400">
                            <i class="bi bi-cash-stack text-4xl"></i>
                            <p class="mt-3 font-medium text-gray-500">No expenses found</p>
                            <p class="text-sm text-gray-400 mt-1">Add your first expense to start tracking.</p>
                            <a href="{{ path('admin_expense_new') }}" class="inline-flex items-center gap-1.5 mt-4 bg-kitsco-accent text-white font-medium py-2 px-4 rounded-lg text-sm"><i class="bi bi-plus-circle"></i> Add Expense</a>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}