{% extends 'admin/layout.html.twig' %}
{% block title %}Profit & Loss Report - KitscoApp{% endblock %}
{% block page_title %}Profit & Loss 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 mb-6 no-print">
    <div class="px-6 py-4 border-b border-gray-100">
        <h3 class="font-semibold text-gray-800 text-sm">Period Selection</h3>
    </div>
    <div class="p-4">
        <form method="GET" class="flex flex-wrap items-end gap-4">
            {# Period Type dropdown #}
            <div class="w-36">
                {% set period_options = [
                    {value: 'month', label: 'Monthly'},
                    {value: 'year', label: 'Yearly'},
                    {value: 'custom', label: 'Custom Range'}
                ] %}
                {% include 'components/_select_dropdown.html.twig' with {
                    id: 'filter_period',
                    name: 'period',
                    value: period,
                    label: 'Period Type',
                    options: period_options,
                    placeholder: 'Monthly',
                    required: false,
                    extra_attrs: {'data-pl-report-target': 'period'}
                } %}
            </div>
            {# Year dropdown #}
            <div id="month-fields" class="w-28 {{ period != 'month' ? 'hidden' : '' }}">
                {% set year_options = [] %}
                {% for y in years %}
                    {% set year_options = year_options|merge([{value: y, label: y}]) %}
                {% endfor %}
                {% include 'components/_select_dropdown.html.twig' with {
                    id: 'filter_year',
                    name: 'year',
                    value: year,
                    label: 'Year',
                    options: year_options,
                    placeholder: 'Select year',
                    required: false
                } %}
            </div>
            {# Month dropdown #}
            <div id="month-field" class="w-36 {{ period != 'month' ? 'hidden' : '' }}">
                {% set month_options = [
                    {value: 1, label: 'January'},
                    {value: 2, label: 'February'},
                    {value: 3, label: 'March'},
                    {value: 4, label: 'April'},
                    {value: 5, label: 'May'},
                    {value: 6, label: 'June'},
                    {value: 7, label: 'July'},
                    {value: 8, label: 'August'},
                    {value: 9, label: 'September'},
                    {value: 10, label: 'October'},
                    {value: 11, label: 'November'},
                    {value: 12, label: 'December'}
                ] %}
                {% include 'components/_select_dropdown.html.twig' with {
                    id: 'filter_month',
                    name: 'month',
                    value: month,
                    label: 'Month',
                    options: month_options,
                    placeholder: 'Select month',
                    required: false
                } %}
            </div>
            <div id="custom-fields" class="{{ period != 'custom' ? 'hidden' : '' }}">
                <label class="block text-xs text-gray-500 mb-1">From</label>
                <input type="date" name="from" value="{{ report.from|date('Y-m-d') }}" class="border border-gray-300 rounded-lg px-3 py-2 text-sm">
            </div>
            <div id="custom-fields-to" class="{{ period != 'custom' ? 'hidden' : '' }}">
                <label class="block text-xs text-gray-500 mb-1">To</label>
                <input type="date" name="to" value="{{ report.to|date('Y-m-d') }}" 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">
        <h3 class="font-semibold text-gray-800">Profit & Loss Statement</h3>
        <p class="text-sm text-gray-500">{{ periodLabel }}</p>
    </div>
    <div class="p-6">
        <div class="mb-8">
            <h4 class="text-sm font-semibold text-green-700 uppercase tracking-wider mb-4 pb-2 border-b border-green-200">Income</h4>
            <table class="w-full text-sm">
                <tbody>
                    {% for item in report.incomeByCategory %}
                    <tr>
                        <td class="py-2 text-gray-700">{{ item.category }}</td>
                        <td class="py-2 text-right text-gray-800">Shs {{ item.total|money }}</td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="2" class="py-2 text-gray-400 italic">No income recorded</td>
                    </tr>
                    {% endfor %}
                </tbody>
                <tfoot class="border-t border-green-200">
                    <tr>
                        <td class="py-3 font-semibold text-green-700">Total Income</td>
                        <td class="py-3 text-right font-bold text-green-700">Shs {{ report.totalIncome|money }}</td>
                    </tr>
                </tfoot>
            </table>
        </div>

        <div class="mb-8">
            <h4 class="text-sm font-semibold text-red-700 uppercase tracking-wider mb-4 pb-2 border-b border-red-200">Expenses</h4>
            <table class="w-full text-sm">
                <tbody>
                    {% for item in report.expenseByCategory %}
                    <tr>
                        <td class="py-2 text-gray-700">{{ item.category }}</td>
                        <td class="py-2 text-right text-gray-800">Shs {{ item.total|money }}</td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="2" class="py-2 text-gray-400 italic">No expenses recorded</td>
                    </tr>
                    {% endfor %}
                </tbody>
                <tfoot class="border-t border-red-200">
                    <tr>
                        <td class="py-3 font-semibold text-red-700">Total Expenses</td>
                        <td class="py-3 text-right font-bold text-red-700">Shs {{ report.totalExpense|money }}</td>
                    </tr>
                </tfoot>
            </table>
        </div>

        <div class="bg-gray-50 rounded-lg p-6 border-2 {{ report.netProfit >= 0 ? 'border-green-300' : 'border-red-300' }}">
            <div class="flex justify-between items-center">
                <h4 class="text-lg font-semibold text-gray-800">Net {{ report.netProfit >= 0 ? 'Profit' : 'Loss' }}</h4>
                <p class="text-3xl font-bold {{ report.netProfit >= 0 ? 'text-green-600' : 'text-red-600' }}">
                    Shs {{ report.netProfit|abs|money }}
                </p>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const periodInput = document.getElementById('filter_period');

    function togglePeriodFields() {
        const period = periodInput ? periodInput.value : 'month';
        document.getElementById('month-fields').classList.toggle('hidden', period !== 'month');
        document.getElementById('month-field').classList.toggle('hidden', period !== 'month');
        document.getElementById('custom-fields').classList.toggle('hidden', period !== 'custom');
        document.getElementById('custom-fields-to').classList.toggle('hidden', period !== 'custom');
    }

    if (periodInput) {
        periodInput.addEventListener('change', togglePeriodFields);
        togglePeriodFields();
    }
});
</script>
{% endblock %}