{% extends 'wfbo/_layout.html.twig' %}

{% block title %}Cash Flow Report — WFBO{% endblock %}

{% block wfbo_title %}Cash Flow Report{% endblock %}

{% block wfbo_content %}

    {# ── Period filter bar ── #}
    {% set presets = [
        {key: 'today',      label: 'Today'},
        {key: 'yesterday',  label: 'Yesterday'},
        {key: 'this_month', label: 'This Month'},
        {key: 'last_month', label: 'Last Month'},
        {key: 'this_year',  label: 'This Year'},
    ] %}
    <div class="period-filter-bar">
        {% for p in presets %}
            <a href="{{ path('app_wfbo_cashflow', {period: p.key}) }}"
               class="period-pill {% if period == p.key %}is-active{% endif %}"
               data-testid="period-{{ p.key }}">
                {{ p.label }}
            </a>
        {% endfor %}

        {# Custom month picker #}
        <form method="GET" action="{{ path('app_wfbo_cashflow') }}" style="display:inline-flex; align-items:center; gap:6px;">
            <input type="month" name="_month_val"
                   value="{{ period starts with 'month_' ? period|replace({'month_': '', '_': '-'}) : '' }}"
                   class="period-filter-input period-filter-input--light {% if period starts with 'month_' %}is-active{% endif %}">
            <button type="submit" class="period-filter-go period-filter-go--light {% if period starts with 'month_' %}is-active{% endif %}">Go</button>
            <input type="hidden" name="period" id="cf-hidden-period-month" value="">
        </form>

        {# Custom year picker #}
        <form method="GET" action="{{ path('app_wfbo_cashflow') }}" style="display:inline-flex; align-items:center; gap:6px;">
            <input type="number" name="_year_val" min="2020" max="2100" placeholder="Year"
                   value="{{ period starts with 'year_' ? period|replace({'year_': ''}) : '' }}"
                   class="period-filter-input period-filter-input--light {% if period starts with 'year_' %}is-active{% endif %}"
                   style="width:90px;">
            <button type="submit" class="period-filter-go period-filter-go--light {% if period starts with 'year_' %}is-active{% endif %}">Go</button>
            <input type="hidden" name="period" id="cf-hidden-period-year" value="">
        </form>
    </div>

    <script>
    (function () {
        var mf = document.querySelector('form [id="cf-hidden-period-month"]')?.closest('form');
        if (mf) {
            mf.addEventListener('submit', function (e) {
                var val = mf.querySelector('[name="_month_val"]').value;
                if (!val) { e.preventDefault(); return; }
                var parts = val.split('-');
                document.getElementById('cf-hidden-period-month').value = 'month_' + parts[0] + '_' + parts[1];
                mf.querySelector('[name="_month_val"]').disabled = true;
            });
        }
        var yf = document.querySelector('form [id="cf-hidden-period-year"]')?.closest('form');
        if (yf) {
            yf.addEventListener('submit', function (e) {
                var val = yf.querySelector('[name="_year_val"]').value;
                if (!val) { e.preventDefault(); return; }
                document.getElementById('cf-hidden-period-year').value = 'year_' + val;
                yf.querySelector('[name="_year_val"]').disabled = true;
            });
        }
    })();
    </script>

    {# ── Summary cards ── #}
    <div class="row g-3 mb-4 mt-1">
        <div class="col-12 col-sm-6 col-xl-3" data-testid="stat-cash-in">
            <div class="card h-100">
                <div class="card-body">
                    <p class="stat-label">Cash In</p>
                    <p class="stat-sub mb-1">{{ periodLabel }}</p>
                    <p class="stat-value--lg" style="color: #16a34a;">₱{{ depositsIn|number_format(2) }}</p>
                    <p class="stat-sub">{{ depositCount }} approved deposit{{ depositCount != 1 ? 's' : '' }}</p>
                </div>
            </div>
        </div>

        <div class="col-12 col-sm-6 col-xl-3" data-testid="stat-cash-out">
            <div class="card h-100">
                <div class="card-body">
                    <p class="stat-label">Cash Out</p>
                    <p class="stat-sub mb-1">{{ periodLabel }}</p>
                    <p class="stat-value--lg" style="color: #dc2626;">₱{{ withdrawalsOut|number_format(2) }}</p>
                    <p class="stat-sub">{{ withdrawalCount }} approved withdrawal{{ withdrawalCount != 1 ? 's' : '' }}</p>
                </div>
            </div>
        </div>

        <div class="col-12 col-sm-6 col-xl-3" data-testid="stat-net-period">
            <div class="card h-100">
                <div class="card-body">
                    <p class="stat-label">Net Cash Flow</p>
                    <p class="stat-sub mb-1">{{ periodLabel }}</p>
                    <p class="stat-value--lg" style="color: {{ netPeriod >= 0 ? '#16a34a' : '#dc2626' }};">
                        {{ netPeriod >= 0 ? '+' : '' }}₱{{ netPeriod|number_format(2) }}
                    </p>
                    <p class="stat-sub">deposits minus withdrawals</p>
                </div>
            </div>
        </div>

        <div class="col-12 col-sm-6 col-xl-3" data-testid="stat-cash-on-hand">
            <div class="card h-100">
                <div class="card-body">
                    <p class="stat-label">Cash on Hand</p>
                    <p class="stat-sub mb-1">{{ periodLabel }}</p>
                    <p class="stat-value--lg" style="color: {{ cashOnHand >= 0 ? '#16a34a' : '#dc2626' }};">
                        ₱{{ cashOnHand|number_format(2) }}
                    </p>
                    <p class="stat-sub">approved deposits minus approved withdrawals</p>
                </div>
            </div>
        </div>
    </div>

    {# ── Export button ── #}
    <div class="mb-4" style="display: flex; justify-content: flex-end;">
        <a href="{{ path('app_wfbo_cashflow_export', {period: period}) }}"
           target="_blank"
           class="btn btn-sm"
           style="background:#1e40af; color:#fff; border-radius:6px; padding:8px 16px; font-size:0.85rem; text-decoration:none; display:inline-flex; align-items:center; gap:6px;"
           data-testid="btn-export-pdf">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                <polyline points="7 10 12 15 17 10"/>
                <line x1="12" y1="15" x2="12" y2="3"/>
            </svg>
            Export PDF
        </a>
    </div>

    {# ── Summary breakdown table ── #}
    <div class="card mb-4">
        <div class="card-body" style="padding: 0;">
            <table style="width:100%; border-collapse:collapse; font-size:0.9rem;">
                <thead>
                    <tr style="background:#f8fafc; border-bottom:1px solid #e5e7eb;">
                        <th style="padding:12px 16px; text-align:left; font-weight:600; color:#374151;">Flow</th>
                        <th style="padding:12px 16px; text-align:right; font-weight:600; color:#374151;">Transactions</th>
                        <th style="padding:12px 16px; text-align:right; font-weight:600; color:#374151;">Amount</th>
                    </tr>
                </thead>
                <tbody>
                    <tr style="border-bottom:1px solid #f3f4f6;">
                        <td style="padding:14px 16px; color:#16a34a; font-weight:500;">
                            ↑ Cash In — Approved Deposits
                            <span style="color:#9ca3af; font-weight:400; font-size:0.8rem; margin-left:6px;">{{ periodLabel }}</span>
                        </td>
                        <td style="padding:14px 16px; text-align:right; color:#374151;">{{ depositCount }}</td>
                        <td style="padding:14px 16px; text-align:right; font-weight:600; color:#16a34a;">₱{{ depositsIn|number_format(2) }}</td>
                    </tr>
                    <tr style="border-bottom:1px solid #f3f4f6;">
                        <td style="padding:14px 16px; color:#dc2626; font-weight:500;">
                            ↓ Cash Out — Approved Withdrawals
                            <span style="color:#9ca3af; font-weight:400; font-size:0.8rem; margin-left:6px;">{{ periodLabel }}</span>
                        </td>
                        <td style="padding:14px 16px; text-align:right; color:#374151;">{{ withdrawalCount }}</td>
                        <td style="padding:14px 16px; text-align:right; font-weight:600; color:#dc2626;">₱{{ withdrawalsOut|number_format(2) }}</td>
                    </tr>
                    <tr style="border-bottom:2px solid #e5e7eb; background:#f8fafc;">
                        <td style="padding:14px 16px; font-weight:700; color:#111827;">
                            Net Cash Flow
                            <span style="color:#9ca3af; font-weight:400; font-size:0.8rem; margin-left:6px;">{{ periodLabel }}</span>
                        </td>
                        <td style="padding:14px 16px; text-align:right; color:#374151;">{{ depositCount + withdrawalCount }}</td>
                        <td style="padding:14px 16px; text-align:right; font-weight:700; color:{{ netPeriod >= 0 ? '#16a34a' : '#dc2626' }};">
                            {{ netPeriod >= 0 ? '+' : '' }}₱{{ netPeriod|number_format(2) }}
                        </td>
                    </tr>
                    <tr>
                        <td style="padding:14px 16px; font-weight:700; color:#111827;">
                            Cash on Hand
                            <span style="color:#9ca3af; font-weight:400; font-size:0.8rem; margin-left:6px;">All-time</span>
                        </td>
                        <td style="padding:14px 16px;"></td>
                        <td style="padding:14px 16px; text-align:right; font-weight:700; font-size:1.05rem; color:{{ cashOnHand >= 0 ? '#16a34a' : '#dc2626' }};">
                            ₱{{ cashOnHand|number_format(2) }}
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

{% endblock %}