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

{% block title %}Accounting Dashboard{% endblock %}

{% block content %}
<div class="container-fluid mt-4">
    <div class="row mb-4">
        <div class="col-md-8">
            <h2>Accounting Dashboard</h2>
            <p class="text-muted">As of {{ today|date:"F j, Y" }}</p>
        </div>
        <div class="col-md-4 text-end">
            <div class="btn-group">
                <a href="{% url 'create_journal_entry' %}" class="btn btn-primary">
                    <i class="bi bi-plus-circle"></i> New Journal Entry
                </a>
                <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" 
                        data-bs-toggle="dropdown">
                    <span class="visually-hidden">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="{% url 'trial_balance' %}">Trial Balance</a></li>
                    <li><a class="dropdown-item" href="{% url 'income_statement' %}">Income Statement</a></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Summary Cards -->
    <div class="row mb-4">
        <!-- Trial Balance Card -->
        <div class="col-md-4">
            <div class="card h-100">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">Trial Balance Summary</h5>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between mb-3">
                        <span>Total Debit:</span>
                        <strong>{{ trial_balance.total_debit|floatformat:2 }}</strong>
                    </div>
                    <div class="d-flex justify-content-between">
                        <span>Total Credit:</span>
                        <strong>{{ trial_balance.total_credit|floatformat:2 }}</strong>
                    </div>
                    <hr>
                    <div class="d-flex justify-content-between">
                        <span>Difference:</span>
                        <strong class="{% if trial_balance.total_debit == trial_balance.total_credit %}text-success{% else %}text-danger{% endif %}">
                            {{ trial_balance.total_debit|subtract:trial_balance.total_credit|floatformat:2 }}
                        </strong>
                    </div>
                </div>
                <div class="card-footer bg-transparent">
                    <a href="{% url 'trial_balance' %}" class="btn btn-sm btn-outline-primary">
                        View Full Report
                    </a>
                </div>
            </div>
        </div>

        <!-- Income Statement Card -->
        <div class="col-md-4">
            <div class="card h-100">
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0">Monthly Performance</h5>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between mb-3">
                        <span>Revenue:</span>
                        <strong>{{ revenue|floatformat:2 }}</strong>
                    </div>
                    <div class="d-flex justify-content-between mb-3">
                        <span>Expenses:</span>
                        <strong>{{ expenses|floatformat:2 }}</strong>
                    </div>
                    <hr>
                    <div class="d-flex justify-content-between">
                        <span>Net Income:</span>
                        <strong class="{% if net_income >= 0 %}text-success{% else %}text-danger{% endif %}">
                            {{ net_income|floatformat:2 }}
                        </strong>
                    </div>
                </div>
                <div class="card-footer bg-transparent">
                    <a href="{% url 'income_statement' %}" class="btn btn-sm btn-outline-success">
                        View Income Statement
                    </a>
                </div>
            </div>
        </div>

        <!-- Top Accounts Card -->
        <div class="col-md-4">
            <div class="card h-100">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0">Top Accounts</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th>Account</th>
                                    <th class="text-end">Balance</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for account in top_accounts %}
                                <tr>
                                    <td>{{ account.code }} - {{ account.name }}</td>
                                    <td class="text-end {% if account.account_balance >= 0 %}text-success{% else %}text-danger{% endif %}">
                                        {{ account.account_balance|floatformat:2 }}
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="card-footer bg-transparent">
                    <a href="#" class="btn btn-sm btn-outline-info">
                        View All Accounts
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Journal Entries -->
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">Recent Journal Entries</h5>
            <a href="{% url 'journal_entry_list' %}" class="btn btn-sm btn-outline-secondary">
                View All Entries
            </a>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>Date</th>
                            <th>Entry #</th>
                            <th>Description</th>
                            <th>Status</th>
                            <th class="text-end">Debit Total</th>
                            <th class="text-end">Credit Total</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for entry in recent_entries %}
                        <tr>
                            <td>{{ entry.date|date:"Y-m-d" }}</td>
                            <td>
                                <a href="{% url 'journal_entry_edit' entry.pk %}">
                                    {{ entry.entry_number }}
                                </a>
                            </td>
                            <td>{{ entry.description|truncatechars:40 }}</td>
                            <td>
                                <span class="badge 
                                    {% if entry.status == 'posted' %}bg-success
                                    {% elif entry.status == 'draft' %}bg-warning text-dark
                                    {% else %}bg-secondary{% endif %}">
                                    {{ entry.get_status_display }}
                                </span>
                            </td>
                            <td class="text-end">{{ entry.transactions.all|sum_debits|floatformat:2 }}</td>
                            <td class="text-end">{{ entry.transactions.all|sum_credits|floatformat:2 }}</td>
                            <td>
                                <a href="{% url 'journal_entry_edit' entry.pk %}" class="btn btn-sm btn-outline-primary">
                                    <i class="bi bi-pencil"></i>
                                </a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Charts Section -->
    <div class="row mt-4">
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-header">
                    <h5 class="mb-0">Monthly Revenue Trend</h5>
                </div>
                <div class="card-body">
                    <canvas id="revenueChart" height="250"></canvas>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-header">
                    <h5 class="mb-0">Expense Breakdown</h5>
                </div>
                <div class="card-body">
                    <canvas id="expenseChart" height="250"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascript %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Revenue Trend Chart
    const revenueCtx = document.getElementById('revenueChart').getContext('2d');
    new Chart(revenueCtx, {
        type: 'line',
        data: {
            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
            datasets: [{
                label: 'Revenue',
                data: [12000, 19000, 15000, 18000, 22000, 25000],
                borderColor: 'rgba(40, 167, 69, 1)',
                backgroundColor: 'rgba(40, 167, 69, 0.1)',
                tension: 0.3,
                fill: true
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: { display: false }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) {
                            return '$' + value.toLocaleString();
                        }
                    }
                }
            }
        }
    });

    // Expense Breakdown Chart
    const expenseCtx = document.getElementById('expenseChart').getContext('2d');
    new Chart(expenseCtx, {
        type: 'doughnut',
        data: {
            labels: ['Salaries', 'Rent', 'Utilities', 'Supplies', 'Marketing'],
            datasets: [{
                data: [12000, 8000, 3000, 2500, 4000],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.7)',
                    'rgba(54, 162, 235, 0.7)',
                    'rgba(255, 206, 86, 0.7)',
                    'rgba(75, 192, 192, 0.7)',
                    'rgba(153, 102, 255, 0.7)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'right',
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return context.label + ': $' + context.raw.toLocaleString();
                        }
                    }
                }
            }
        }
    });
});
</script>
{% endblock %}