{% extends 'base.html' %}

{% block title %}Reports - 3ncount2026{% endblock %}
{% block page_title %}Reports{% endblock %}

{% block content %}
<div class="page-content">
    <!-- Business Intelligence Reports -->
    <div class="mb-5">
        <h2 class="mb-3">
            <i class="ti ti-chart-line text-primary me-2"></i>
            Business Intelligence Reports
        </h2>
        <div class="row">
            <div class="col-lg-4 col-md-6 mb-3">
                <a href="{% url 'reports:profit_loss' %}" class="text-decoration-none">
                    <div class="card hover-lift shadow-sm h-100">
                        <div class="card-body">
                            <div class="d-flex align-items-center mb-3">
                                <div class="stat-icon success me-3" style="width: 56px; height: 56px;">
                                    <i class="ti ti-trending-up fs-2"></i>
                                </div>
                                <div class="flex-grow-1">
                                    <h3 class="mb-1">Profit & Loss</h3>
                                    <div class="text-muted">Untung Rugi</div>
                                </div>
                            </div>
                            <p class="text-muted mb-0">
                                View your income vs expenses and see how profitable your business is.
                            </p>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-lg-4 col-md-6 mb-3">
                <a href="{% url 'reports:cash_flow' %}" class="text-decoration-none">
                    <div class="card hover-lift shadow-sm h-100">
                        <div class="card-body">
                            <div class="d-flex align-items-center mb-3">
                                <div class="stat-icon primary me-3" style="width: 56px; height: 56px;">
                                    <i class="ti ti-cash fs-2"></i>
                                </div>
                                <div class="flex-grow-1">
                                    <h3 class="mb-1">Cash Flow</h3>
                                    <div class="text-muted">Aliran Tunai</div>
                                </div>
                            </div>
                            <p class="text-muted mb-0">
                                Track money coming in and going out of your business.
                            </p>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-lg-4 col-md-6 mb-3">
                <a href="{% url 'reports:outstanding' %}" class="text-decoration-none">
                    <div class="card hover-lift shadow-sm h-100">
                        <div class="card-body">
                            <div class="d-flex align-items-center mb-3">
                                <div class="stat-icon warning me-3" style="width: 56px; height: 56px;">
                                    <i class="ti ti-clock-hour-4 fs-2"></i>
                                </div>
                                <div class="flex-grow-1">
                                    <h3 class="mb-1">Outstanding</h3>
                                    <div class="text-muted">Siapa Hutang Siapa</div>
                                </div>
                            </div>
                            <p class="text-muted mb-0">
                                See who owes you money and who you need to pay.
                            </p>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>

    <!-- Core Accounting Reports -->
    <div class="mb-5">
        <h2 class="mb-3">
            <i class="ti ti-calculator text-success me-2"></i>
            Core Accounting Reports
        </h2>
        <div class="row">
            <div class="col-lg-3 col-md-6 mb-3">
                <a href="{% url 'reports:balance_sheet' %}" class="text-decoration-none">
                    <div class="card hover-lift shadow-sm h-100">
                        <div class="card-body">
                            <div class="d-flex align-items-center mb-3">
                                <div class="stat-icon success me-3">
                                    <i class="ti ti-building-bank"></i>
                                </div>
                                <div class="flex-grow-1">
                                    <h4 class="mb-1">Balance Sheet</h4>
                                    <div class="text-muted small">Kunci Kira-kira</div>
                                </div>
                            </div>
                            <p class="text-muted small mb-0">
                                Company's financial position: Assets, Liabilities & Equity.
                            </p>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-lg-3 col-md-6 mb-3">
                <a href="{% url 'reports:general_ledger' %}" class="text-decoration-none">
                    <div class="card hover-lift shadow-sm h-100">
                        <div class="card-body">
                            <div class="d-flex align-items-center mb-3">
                                <div class="stat-icon danger me-3">
                                    <i class="ti ti-book"></i>
                                </div>
                                <div class="flex-grow-1">
                                    <h4 class="mb-1">General Ledger</h4>
                                    <div class="text-muted small">Lejar Am</div>
                                </div>
                            </div>
                            <p class="text-muted small mb-0">
                                Complete transaction history for each account with details.
                            </p>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-lg-3 col-md-6 mb-3">
                <a href="{% url 'reports:trial_balance' %}" class="text-decoration-none">
                    <div class="card hover-lift shadow-sm h-100">
                        <div class="card-body">
                            <div class="d-flex align-items-center mb-3">
                                <div class="stat-icon info me-3">
                                    <i class="ti ti-scale"></i>
                                </div>
                                <div class="flex-grow-1">
                                    <h4 class="mb-1">Trial Balance</h4>
                                    <div class="text-muted small">-</div>
                                </div>
                            </div>
                            <p class="text-muted small mb-0">
                                Verify accounting balance: Total Debits = Total Credits.
                            </p>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-lg-3 col-md-6 mb-3">
                <a href="{% url 'reports:account_statement' %}" class="text-decoration-none">
                    <div class="card hover-lift shadow-sm h-100">
                        <div class="card-body">
                            <div class="d-flex align-items-center mb-3">
                                <div class="stat-icon primary me-3">
                                    <i class="ti ti-file-text"></i>
                                </div>
                                <div class="flex-grow-1">
                                    <h4 class="mb-1">Account Statement</h4>
                                    <div class="text-muted small">Penyata Akaun</div>
                                </div>
                            </div>
                            <p class="text-muted small mb-0">
                                Detailed statement for any account with running balance.
                            </p>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>

    <!-- Tax Reports -->
    <div class="mb-5">
        <h2 class="mb-3">
            <i class="ti ti-receipt-tax text-orange me-2"></i>
            Tax Reports
        </h2>
        <div class="row">
            <div class="col-md-6 mb-3">
                <a href="{% url 'reports:borang_b' %}" class="text-decoration-none">
                    <div class="card hover-lift shadow-sm h-100">
                        <div class="card-body">
                            <div class="d-flex align-items-center mb-3">
                                <div class="stat-icon warning me-3" style="width: 56px; height: 56px;">
                                    <i class="ti ti-file-dollar fs-2"></i>
                                </div>
                                <div class="flex-grow-1">
                                    <h3 class="mb-1">LHDN Borang B</h3>
                                    <div class="text-muted">Form B / Borang Cukai</div>
                                </div>
                            </div>
                            <p class="text-muted mb-0">
                                Generate LHDN Borang B (Form B) for sole proprietor/partnership tax filing with Profit & Loss, Balance Sheet, and Fixed Assets schedule.
                            </p>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>

    <!-- Report Tips -->
    <div class="card shadow-sm">
        <div class="card-header bg-gradient-info text-white">
            <h3 class="card-title mb-0">
                <i class="ti ti-bulb me-2"></i>Report Tips & Usage Guide
            </h3>
        </div>
        <div class="card-body">
            <div class="row">
                <!-- Business Intelligence Reports -->
                <div class="col-md-4 mb-4">
                    <div class="p-3 bg-soft-success rounded">
                        <h5 class="text-success mb-3">
                            <i class="ti ti-trending-up me-1"></i>Profit & Loss
                        </h5>
                        <p class="mb-2" style="color: #1e293b;"><strong>Use this report to:</strong></p>
                        <ul class="mb-0" style="color: #1e293b;">
                            <li>See if your business is making money</li>
                            <li>Compare different time periods</li>
                            <li>Identify your biggest income sources</li>
                            <li>Find areas to cut costs</li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="p-3 bg-soft-primary rounded">
                        <h5 class="text-primary mb-3">
                            <i class="ti ti-cash me-1"></i>Cash Flow
                        </h5>
                        <p class="mb-2" style="color: #1e293b;"><strong>Use this report to:</strong></p>
                        <ul class="mb-0" style="color: #1e293b;">
                            <li>Monitor your cash position</li>
                            <li>Plan for upcoming expenses</li>
                            <li>Track bank account balances</li>
                            <li>Identify cash flow patterns</li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="p-3 bg-soft-warning rounded">
                        <h5 class="text-warning mb-3">
                            <i class="ti ti-clock-hour-4 me-1"></i>Outstanding
                        </h5>
                        <p class="mb-2" style="color: #1e293b;"><strong>Use this report to:</strong></p>
                        <ul class="mb-0" style="color: #1e293b;">
                            <li>Follow up on unpaid invoices</li>
                            <li>Prioritize supplier payments</li>
                            <li>Manage credit terms</li>
                            <li>Improve cash collection</li>
                        </ul>
                    </div>
                </div>

                <!-- Core Accounting Reports -->
                <div class="col-md-3 mb-4">
                    <div class="p-3 bg-light rounded">
                        <h6 class="text-success mb-2">
                            <i class="ti ti-building-bank me-1"></i>Balance Sheet
                        </h6>
                        <ul class="text-muted small mb-0">
                            <li>See total company assets</li>
                            <li>View all liabilities</li>
                            <li>Check owner's equity</li>
                            <li>Apply for bank loans</li>
                            <li>Year-end closing</li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-3 mb-4">
                    <div class="p-3 bg-light rounded">
                        <h6 class="text-danger mb-2">
                            <i class="ti ti-book me-1"></i>General Ledger
                        </h6>
                        <ul class="text-muted small mb-0">
                            <li>Audit trail for all accounts</li>
                            <li>Detailed transaction history</li>
                            <li>Month-end reconciliation</li>
                            <li>Tax filing preparation</li>
                            <li>Investigation of errors</li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-3 mb-4">
                    <div class="p-3 bg-light rounded">
                        <h6 class="text-info mb-2">
                            <i class="ti ti-scale me-1"></i>Trial Balance
                        </h6>
                        <ul class="text-muted small mb-0">
                            <li>Verify books balance</li>
                            <li>Check debit = credit</li>
                            <li>Spot accounting errors</li>
                            <li>Before year-end close</li>
                            <li>Monthly verification</li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-3 mb-4">
                    <div class="p-3 bg-light rounded">
                        <h6 class="text-primary mb-2">
                            <i class="ti ti-file-text me-1"></i>Account Statement
                        </h6>
                        <ul class="text-muted small mb-0">
                            <li>Customer/supplier statements</li>
                            <li>Bank account reconciliation</li>
                            <li>Detailed account tracking</li>
                            <li>Investigation of specific account</li>
                            <li>Running balance verification</li>
                        </ul>
                    </div>
                </div>
                
                <!-- Tax Reports -->
                <div class="col-12">
                    <div class="p-3 bg-soft-warning rounded">
                        <h5 class="text-warning mb-3">
                            <i class="ti ti-file-dollar me-1"></i>LHDN Borang B
                        </h5>
                        <p class="mb-2" style="color: #1e293b;"><strong>Use this report to:</strong></p>
                        <ul class="mb-0" style="color: #1e293b;">
                            <li>Generate Form B for LHDN tax filing (sole proprietor/partnership)</li>
                            <li>Includes complete Profit & Loss Statement (Penyata Untung Rugi)</li>
                            <li>Includes Balance Sheet (Kunci Kira-Kira) with assets, liabilities, equity</li>
                            <li>Includes Fixed Assets schedule with Capital Allowance (Elaun Modal)</li>
                            <li>View year-by-year Owner's Equity movement</li>
                            <li>Export formatted data for manual entry into LHDN e-Filing portal</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Info -->
    <div class="alert alert-info shadow-sm mt-4">
        <div class="d-flex align-items-start">
            <i class="ti ti-info-circle me-3 fs-2"></i>
            <div>
                <h4 class="alert-heading mb-2">Complete Accounting & Tax System</h4>
                <p class="mb-2">
                    Sistem ini sekarang mempunyai <strong>8 comprehensive reports</strong> untuk operasi SME dan tax filing:
                </p>
                <div class="row">
                    <div class="col-md-4 mb-2">
                        <span class="badge badge-primary-light me-2">3</span>
                        <strong>Business Intelligence Reports</strong> - untuk keputusan bisnes harian
                    </div>
                    <div class="col-md-4 mb-2">
                        <span class="badge badge-success-light me-2">4</span>
                        <strong>Core Accounting Reports</strong> - untuk compliance, audit, bookkeeping
                    </div>
                    <div class="col-md-4 mb-2">
                        <span class="badge badge-warning-light me-2">1</span>
                        <strong>Tax Report (LHDN Borang B)</strong> - untuk tax filing
                    </div>
                </div>
                <p class="mb-0 mt-3">
                    <i class="ti ti-bulb me-1"></i>
                    <strong>Tip:</strong> Complete your company LHDN information in Organization Settings first, then run Borang B report for tax filing!
                </p>
            </div>
        </div>
    </div>
</div>
{% endblock %}