{% extends "base.html" %}
{% load static %}

{% block title %}Trial Balance{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h2 class="mb-0">Trial Balance</h2>
            <div>
                <form method="get" class="d-inline me-2">
                    <div class="input-group">
                        <input type="date" name="date" value="{{ date|date:'Y-m-d' }}" 
                               class="form-control" required>
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-filter"></i> Filter
                        </button>
                    </div>
                </form>
                <a href="?date={{ date_str }}&export=pdf" class="btn btn-danger">
                    <i class="bi bi-file-earmark-pdf"></i> Export PDF
                </a>
            </div>
        </div>
        
        <div class="card-body">
            <div class="d-flex justify-content-between mb-3">
                <h5>As of {{ date|date:"Y-m-d" }}</h5>
            </div>
            
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead class="table-dark">
                        <tr>
                            <th>Account Code</th>
                            <th>Account Name</th>
                            <th class="text-end">Debit</th>
                            <th class="text-end">Credit</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for account in report %}
                        <tr>
                            <td>{{ account.code }}</td>
                            <td>{{ account.name }}</td>
                            <td class="text-end">{{ account.debit|floatformat:2 }}</td>
                            <td class="text-end">{{ account.credit|floatformat:2 }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                    <tfoot class="table-active">
                        <tr>
                            <td colspan="2"><strong>Total</strong></td>
                            <td class="text-end"><strong>{{ total_debit|floatformat:2 }}</strong></td>
                            <td class="text-end"><strong>{{ total_credit|floatformat:2 }}</strong></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
</div>
{% endblock %}