{% extends 'base.html' %}
{% load i18n %}

{% block content %}
<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-1">
                    <li class="breadcrumb-item"><a href="{% url 'accounting_dashboard' %}">{% trans "Accounting" %}</a></li>
                    <li class="breadcrumb-item active">{% trans "Balance Sheet" %}</li>
                </ol>
            </nav>
            <h2 class="mb-0">{% trans "Balance Sheet" %}</h2>
            <p class="text-muted small">{% trans "As of" %} {{ date|date:"F d, Y" }}</p>
        </div>
        <button class="btn btn-outline-primary" onclick="window.print()">
            <i class="bi bi-printer"></i> {% trans "Print Report" %}
        </button>
    </div>

    <div class="row g-4">
        <!-- Assets -->
        <div class="col-md-6">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-primary text-white">
                    <h5 class="card-title mb-0">{% trans "Assets" %}</h5>
                </div>
                <div class="card-body p-0">
                    <table class="table mb-0">
                        <tbody>
                            {% for acc in assets %}
                            <tr>
                                <td>{% if LANGUAGE_CODE == 'ar' %}{{ acc.name_ar }}{% else %}{{ acc.name_en }}{% endif %}</td>
                                <td class="text-end">{{ acc.balance|floatformat:global_settings.decimal_places }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                        <tfoot class="bg-light fw-bold">
                            <tr>
                                <td>{% trans "Total Assets" %}</td>
                                <td class="text-end">{{ asset_total|floatformat:global_settings.decimal_places }}</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>

        <!-- Liabilities & Equity -->
        <div class="col-md-6">
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-danger text-white">
                    <h5 class="card-title mb-0">{% trans "Liabilities" %}</h5>
                </div>
                <div class="card-body p-0">
                    <table class="table mb-0">
                        <tbody>
                            {% for acc in liabilities %}
                            <tr>
                                <td>{% if LANGUAGE_CODE == 'ar' %}{{ acc.name_ar }}{% else %}{{ acc.name_en }}{% endif %}</td>
                                <td class="text-end">{{ acc.balance|floatformat:global_settings.decimal_places }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                        <tfoot class="bg-light fw-bold">
                            <tr>
                                <td>{% trans "Total Liabilities" %}</td>
                                <td class="text-end">{{ liability_total|floatformat:global_settings.decimal_places }}</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>

            <div class="card border-0 shadow-sm">
                <div class="card-header bg-success text-white">
                    <h5 class="card-title mb-0">{% trans "Equity" %}</h5>
                </div>
                <div class="card-body p-0">
                    <table class="table mb-0">
                        <tbody>
                            {% for acc in equity %}
                            <tr>
                                <td>{% if LANGUAGE_CODE == 'ar' %}{{ acc.name_ar }}{% else %}{{ acc.name_en }}{% endif %}</td>
                                <td class="text-end">{{ acc.balance|floatformat:global_settings.decimal_places }}</td>
                            </tr>
                            {% endfor %}
                            <tr>
                                <td>{% trans "Net Income (Loss)" %}</td>
                                <td class="text-end">{{ net_income|floatformat:global_settings.decimal_places }}</td>
                            </tr>
                        </tbody>
                        <tfoot class="bg-light fw-bold">
                            <tr>
                                <td>{% trans "Total Equity" %}</td>
                                <td class="text-end">{{ equity_total|floatformat:global_settings.decimal_places }}</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
            
            <div class="card mt-4 border-primary border-2 shadow-sm">
                <div class="card-body d-flex justify-content-between align-items-center py-3 bg-light">
                    <h5 class="mb-0 fw-bold">{% trans "Total Liabilities & Equity" %}</h5>
                    <h5 class="mb-0 fw-bold text-primary">
                        {{ liability_total|add:equity_total|floatformat:global_settings.decimal_places }}
                    </h5>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
@media print {
    .breadcrumb, .btn, .sidebar, .header { display: none !important; }
    .main-content { margin: 0 !important; padding: 0 !important; }
    .card { break-inside: avoid; }
}
</style>
{% endblock %}
