<div class="dashboard-container">
    <!-- Header -->
    <div class="card p-0" style="background-color: var(--primary); color: #fff; border: none; margin-bottom: var(--sp-4);">
        <div class="card-body d-flex justify-between align-center">
            <div>
                <h1 class="m-0" style="color: var(--accent); font-size: 2em;">فنانشل سمری (P&L / Trial Balance)</h1>
                <p class="m-0 opacity-80">کاروبار کا مکمل مالی خاکہ اور نفع و نقصان</p>
            </div>
            <div class="text-right">
                <button class="btn btn-accent" onclick="loadFinancialReport()">
                    <i class="fas fa-sync-alt"></i> ریفریش
                </button>
            </div>
        </div>
    </div>

    <!-- Main KPIs -->
    <div class="form-grid-3" style="margin-bottom: var(--sp-4);">
        <div class="card m-0" style="border-right: 4px solid var(--success);">
            <div class="card-body p-4 text-center">
                <div class="text-muted mb-2">خالص منافع / نقصان (Net Profit)</div>
                <div class="fw-bold" style="font-size: 2em; color: var(--success);" id="lblNetProfit">0.00</div>
                <small class="text-muted">آمدنی منفی اخراجات</small>
            </div>
        </div>
        <div class="card m-0" style="border-right: 4px solid var(--info);">
            <div class="card-body p-4 text-center">
                <div class="text-muted mb-2">دستیاب سرمایہ (Overall Liquidity)</div>
                <div class="fw-bold" style="font-size: 2em; color: var(--info);" id="lblOverallAvailable">0.00</div>
                <small class="text-muted">کیش + لینے والے - دینے والے</small>
            </div>
        </div>
        <div class="card m-0" style="border-right: 4px solid var(--primary);">
            <div class="card-body p-4 text-center">
                <div class="text-muted mb-2">کاروباری سرمایہ (Capital)</div>
                <div class="fw-bold" style="font-size: 2em; color: var(--primary);" id="lblCapital">0.00</div>
                <small class="text-muted">مالکان کا کل سرمایہ</small>
            </div>
        </div>
    </div>

    <!-- Secondary KPIs -->
    <div class="form-grid-4" style="margin-bottom: var(--sp-4);">
        <div class="card m-0 text-center p-3">
            <div class="text-muted">کل آمدنی (Income)</div>
            <div class="fw-bold fs-4 text-success" id="lblTotalIncome">0.00</div>
        </div>
        <div class="card m-0 text-center p-3">
            <div class="text-muted">کل اخراجات (Expenses)</div>
            <div class="fw-bold fs-4 text-danger" id="lblTotalExpense">0.00</div>
        </div>
        <div class="card m-0 text-center p-3">
            <div class="text-muted">مارکیٹ سے لینے ہیں (Receivables)</div>
            <div class="fw-bold fs-4 text-info" id="lblReceivables">0.00</div>
        </div>
        <div class="card m-0 text-center p-3">
            <div class="text-muted">مارکیٹ کو دینے ہیں (Payables)</div>
            <div class="fw-bold fs-4 text-warning" id="lblPayables">0.00</div>
        </div>
    </div>

    <!-- Detailed Breakdowns -->
    <div class="form-grid-2">
        <!-- Income Breakdown -->
        <div class="card">
            <div class="card-header bg-success text-white">
                <h3 class="card-title m-0">آمدنی کی تفصیل (Income)</h3>
            </div>
            <div class="card-body p-0">
                <table class="table m-0">
                    <tbody id="tbIncome"></tbody>
                </table>
            </div>
        </div>

        <!-- Expense Breakdown -->
        <div class="card">
            <div class="card-header bg-danger text-white">
                <h3 class="card-title m-0">اخراجات کی تفصیل (Expenses)</h3>
            </div>
            <div class="card-body p-0">
                <table class="table m-0">
                    <tbody id="tbExpense"></tbody>
                </table>
            </div>
        </div>

        <!-- Banks & Cash -->
        <div class="card">
            <div class="card-header bg-info text-white">
                <h3 class="card-title m-0">کیش اور بینک (Cash & Banks)</h3>
            </div>
            <div class="card-body p-0">
                <table class="table m-0">
                    <tbody id="tbBanks"></tbody>
                </table>
            </div>
        </div>

        <!-- Capital -->
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h3 class="card-title m-0">سرمایہ (Capital)</h3>
            </div>
            <div class="card-body p-0">
                <table class="table m-0">
                    <tbody id="tbCapital"></tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script>
async function loadFinancialReport() {
    try {
        const res = await API.get('/reports/financial-summary');
        if (!res.success) return;

        const data = res.data;
        const totals = data.totals;
        const summary = data.summary;

        // Set Main KPIs
        $('#lblNetProfit').text(Utils.formatNumber(totals.net_profit));
        $('#lblNetProfit').css('color', totals.net_profit >= 0 ? 'var(--success)' : 'var(--danger)');
        
        $('#lblOverallAvailable').text(Utils.formatNumber(totals.overall_available));
        $('#lblCapital').text(Utils.formatNumber(totals.total_capital));

        // Set Secondary KPIs
        $('#lblTotalIncome').text(Utils.formatNumber(totals.total_income));
        $('#lblTotalExpense').text(Utils.formatNumber(totals.total_expense));
        $('#lblReceivables').text(Utils.formatNumber(totals.total_receivables));
        $('#lblPayables').text(Utils.formatNumber(totals.total_payables));

        // Helper to render table rows
        const renderTable = (elementId, items) => {
            let html = '';
            if (items.length === 0) {
                html = '<tr><td class="text-center text-muted">کوئی ریکارڈ نہیں</td></tr>';
            } else {
                items.forEach(item => {
                    html += `
                        <tr>
                            <td><a href="#ledger?account_id=${item.id}" class="text-primary">${item.name}</a></td>
                            <td class="text-right fw-bold">${Utils.formatNumber(item.balance)}</td>
                        </tr>
                    `;
                });
            }
            $(`#${elementId}`).html(html);
        };

        // Render Tables
        renderTable('tbIncome', summary.income);
        renderTable('tbExpense', summary.expenses);
        renderTable('tbBanks', summary.banks_cash);
        renderTable('tbCapital', summary.capital);

    } catch (error) {
        console.error("Error loading financial report:", error);
    }
}

// Auto load on init
setTimeout(loadFinancialReport, 100);
</script>
