{% load humanize %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Income & Expense Summary {% if selected_year %} - {{ selected_year }}{% endif %}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* Default styles for tables */
        body {
            font-family: Arial, sans-serif;
            font-size: 12px;
        }
        h2 {
            text-align: center;
            margin-bottom: 10px;
        }
        h4 {
            text-align: center;
            margin-bottom: 20px;
            color: #666;
        }
        .card {
            margin-bottom: 10px;
            border: 1px solid #ccc;
        }
        .card-header {
            padding: 5px;
            font-size: 14px;
        }
        .table {
            width: 100%;
            margin-bottom: 0;
            font-size: 12px;
        }
        .table th, .table td {
            padding: 5px;
        }
        .text-end {
            text-align: right;
        }

        /* Print-specific styles */
        @media print {
            @page {
                size: letter; /* or A4 */
                margin: 0.5in;
            }
            body {
                margin: 0;
                padding: 0;
            }
            .card {
                page-break-inside: avoid; /* Prevent table splitting across pages */
            }
            .table {
                break-inside: avoid; /* Ensure tables stay intact */
            }
            /* Ensure it fits on one page by scaling content if needed */
            html {
                zoom: 0.9; /* Adjust this value (e.g., 0.8 or 0.9) to fit content */
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>Income & Expense Summary</h2>
        {% if selected_year %}
            <h4>Year: {{ selected_year }}</h4>
        {% else %}
            <h4>All Years</h4>
        {% endif %}

        <!-- Income Categories -->
        <div class="card">
            <div class="card-header bg-success text-white">
                <h3 class="mb-0">Income Categories</h3>
            </div>
            <div class="card-body p-0">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Category</th>
                            <th class="text-end">Amount</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for row in income_category_totals %}
                            <tr>
                                <td>{{ row.category__category }}</td>
                                <td class="text-end">$ {{ row.total|floatformat:2|intcomma }}</td>
                            </tr>
                        {% empty %}
                            <tr>
                                <td colspan="2" class="text-center">No income category data found.</td>
                            </tr>
                        {% endfor %}
                        {% if income_category_totals %}
                        <tr class="fw-bold">
                            <td class="bg-success text-white">Total:</td>
                            <td class="text-end bg-success text-white">$ {{ income_category_total|floatformat:2|intcomma }}</td>
                        </tr>
                        {% endif %}
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Income Sub-Categories -->
        <div class="card">
            <div class="card-header bg-success text-white">
                <h3 class="mb-0">Income Sub-Categories</h3>
            </div>
            <div class="card-body p-0">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Sub-Category</th>
                            <th class="text-end">Amount</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for row in income_subcategory_totals %}
                            <tr>
                                <td>{{ row.sub_cat__sub_cat }}</td>
                                <td class="text-end">$ {{ row.total|floatformat:2|intcomma }}</td>
                            </tr>
                        {% empty %}
                            <tr>
                                <td colspan="2" class="text-center">No income sub-category data found.</td>
                            </tr>
                        {% endfor %}
                        {% if income_subcategory_totals %}
                        <tr class="fw-bold">
                            <td class="bg-success text-white">Total:</td>
                            <td class="text-end bg-success text-white">$ {{ income_subcategory_total|floatformat:2|intcomma }}</td>
                        </tr>
                        {% endif %}
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Expense Categories -->
        <div class="card">
            <div class="card-header bg-danger text-white">
                <h3 class="mb-0">Expense Categories</h3>
            </div>
            <div class="card-body p-0">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Category</th>
                            <th class="text-end">Amount</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for row in expense_category_totals %}
                            <tr>
                                <td>{{ row.category__category }}</td>
                                <td class="text-end">$ {{ row.total|floatformat:2|intcomma }}</td>
                            </tr>
                        {% empty %}
                            <tr>
                                <td colspan="2" class="text-center">No expense category data found.</td>
                            </tr>
                        {% endfor %}
                        {% if expense_category_totals %}
                        <tr class="fw-bold">
                            <td class="bg-danger text-white">Total:</td>
                            <td class="text-end bg-danger text-white">$ {{ expense_category_total|floatformat:2|intcomma }}</td>
                        </tr>
                        {% endif %}
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Expense Sub-Categories -->
        <div class="card">
            <div class="card-header bg-danger text-white">
                <h3 class="mb-0">Expense Sub-Categories</h3>
            </div>
            <div class="card-body p-0">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Sub-Category</th>
                            <th class="text-end">Amount</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for row in expense_subcategory_totals %}
                            <tr>
                                <td>{{ row.sub_cat__sub_cat }}</td>
                                <td class="text-end">$ {{ row.total|floatformat:2|intcomma }}</td>
                            </tr>
                        {% empty %}
                            <tr>
                                <td colspan="2" class="text-center">No expense sub-category data found.</td>
                            </tr>
                        {% endfor %}
                        {% if expense_subcategory_totals %}
                        <tr class="fw-bold">
                            <td class="bg-danger text-white">Total:</td>
                            <td class="text-end bg-danger text-white">$ {{ expense_subcategory_total|floatformat:2|intcomma }}</td>
                        </tr>
                        {% endif %}
                    </tbody>
                </table>
            </div>
        </div>
        <div class="text-end mt-3">
            <h4 class="text-end">Net: $ {{ net_profit|floatformat:2|intcomma }}</h4>
        </div>
    </div>
</body>
</html>