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

{% block title %}Chart of Accounts - 3ncount{% endblock %}
{% block page_title %}Chart of Accounts{% endblock %}

{% block page_actions %}
<a href="{% url 'core:account_create' %}" class="btn btn-primary">
    <i class="ti ti-plus"></i> Add Account
</a>
{% endblock %}

{% block content %}
<!-- Statistics Cards -->
<div class="row mb-4">
    <div class="col-md-2 col-sm-6 mb-3">
        <div class="card dashboard-card card-primary hover-lift">
            <div class="card-body text-center">
                <div class="stat-icon primary mb-2 mx-auto">
                    <i class="ti ti-wallet"></i>
                </div>
                <div class="text-muted small mb-1">Assets</div>
                <div class="h4 mb-0 text-primary">{{ accounts|length }}</div>
            </div>
        </div>
    </div>
    
    <div class="col-md-2 col-sm-6 mb-3">
        <div class="card dashboard-card card-danger hover-lift">
            <div class="card-body text-center">
                <div class="stat-icon danger mb-2 mx-auto">
                    <i class="ti ti-credit-card"></i>
                </div>
                <div class="text-muted small mb-1">Liabilities</div>
                <div class="h4 mb-0 text-danger">0</div>
            </div>
        </div>
    </div>
    
    <div class="col-md-2 col-sm-6 mb-3">
        <div class="card dashboard-card card-info hover-lift">
            <div class="card-body text-center">
                <div class="stat-icon info mb-2 mx-auto">
                    <i class="ti ti-chart-pie"></i>
                </div>
                <div class="text-muted small mb-1">Equity</div>
                <div class="h4 mb-0 text-info">0</div>
            </div>
        </div>
    </div>
    
    <div class="col-md-3 col-sm-6 mb-3">
        <div class="card dashboard-card card-success hover-lift">
            <div class="card-body text-center">
                <div class="stat-icon success mb-2 mx-auto">
                    <i class="ti ti-trending-up"></i>
                </div>
                <div class="text-muted small mb-1">Income</div>
                <div class="h4 mb-0 text-success">0</div>
            </div>
        </div>
    </div>
    
    <div class="col-md-3 col-sm-6 mb-3">
        <div class="card dashboard-card card-warning hover-lift">
            <div class="card-body text-center">
                <div class="stat-icon warning mb-2 mx-auto">
                    <i class="ti ti-trending-down"></i>
                </div>
                <div class="text-muted small mb-1">Expenses</div>
                <div class="h4 mb-0 text-warning">0</div>
            </div>
        </div>
    </div>
</div>

<!-- Filter Card -->
<div class="card mb-4 shadow-sm">
    <div class="card-header bg-gradient-primary text-white">
        <h3 class="card-title mb-0">
            <i class="ti ti-filter me-2"></i>Filter Accounts
        </h3>
    </div>
    <div class="card-body">
        <form method="get" class="row g-3">
            <div class="col-md-4">
                <label class="form-label">
                    <i class="ti ti-category me-1"></i>Account Type
                </label>
                <select name="type" class="form-select" onchange="this.form.submit()">
                    <option value="">All Types</option>
                    {% for type_choice in account_types %}
                    <option value="{{ type_choice.0 }}" {% if request.GET.type == type_choice.0 %}selected{% endif %}>
                        {{ type_choice.1 }}
                    </option>
                    {% endfor %}
                </select>
            </div>
            {% if request.GET.type %}
            <div class="col-md-2">
                <label class="form-label">&nbsp;</label>
                <a href="{% url 'core:account_list' %}" class="btn btn-outline-secondary w-100">
                    <i class="ti ti-x"></i> Clear
                </a>
            </div>
            {% endif %}
        </form>
    </div>
</div>

<!-- Accounts Table -->
<div class="card shadow-sm">
    <div class="card-body">
        {% if accounts %}
        <div class="table-responsive">
            <table class="table table-modern">
                <thead>
                    <tr>
                        <th><i class="ti ti-hash me-1"></i>Code</th>
                        <th><i class="ti ti-file-text me-1"></i>Name</th>
                        <th><i class="ti ti-language me-1"></i>Nama BM</th>
                        <th><i class="ti ti-category me-1"></i>Type</th>
                        <th class="text-end"><i class="ti ti-currency-dollar me-1"></i>Balance</th>
                        <th><i class="ti ti-status-change me-1"></i>Status</th>
                        <th class="text-center" width="200"><i class="ti ti-settings me-1"></i>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for account in accounts %}
                    <tr class="transaction-row">
                        <td>
                            <span class="badge badge-light">{{ account.code }}</span>
                        </td>
                        <td>
                            <strong>{{ account.name }}</strong>
                        </td>
                        <td class="text-muted">
                            {{ account.name_bm|default:"-" }}
                        </td>
                        <td>
                            {% if account.account_type == 'ASSET' %}
                            <span class="badge badge-primary-light">
                                <i class="ti ti-wallet me-1"></i>{{ account.get_account_type_display }}
                            </span>
                            {% elif account.account_type == 'LIABILITY' %}
                            <span class="badge badge-danger-light">
                                <i class="ti ti-credit-card me-1"></i>{{ account.get_account_type_display }}
                            </span>
                            {% elif account.account_type == 'EQUITY' %}
                            <span class="badge badge-info-light">
                                <i class="ti ti-chart-pie me-1"></i>{{ account.get_account_type_display }}
                            </span>
                            {% elif account.account_type == 'INCOME' %}
                            <span class="badge badge-success-light">
                                <i class="ti ti-trending-up me-1"></i>{{ account.get_account_type_display }}
                            </span>
                            {% else %}
                            <span class="badge badge-warning-light">
                                <i class="ti ti-trending-down me-1"></i>{{ account.get_account_type_display }}
                            </span>
                            {% endif %}
                        </td>
                        <td class="text-end">
                            <strong class="amount {% if account.get_balance < 0 %}text-danger{% endif %}">
                                RM {{ account.get_balance|floatformat:2|intcomma }}
                            </strong>
                        </td>
                        <td>
                            {% if account.is_active %}
                            <span class="badge badge-success-light">
                                <i class="ti ti-check me-1"></i>Active
                            </span>
                            {% else %}
                            <span class="badge badge-secondary-light">
                                <i class="ti ti-x me-1"></i>Inactive
                            </span>
                            {% endif %}
                        </td>
                        <td>
                            <div class="btn-group" role="group">
                                <a href="{% url 'core:account_update' account.pk %}" 
                                   class="btn btn-sm btn-outline-primary" title="Edit">
                                    <i class="ti ti-edit"></i> Edit
                                </a>
                                <a href="{% url 'core:account_delete' account.pk %}" 
                                   class="btn btn-sm btn-outline-danger" title="Delete">
                                    <i class="ti ti-trash"></i> Delete
                                </a>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <!-- Empty State -->
        <div class="text-center py-5">
            <div class="empty-state">
                <div class="empty-state-icon mb-4">
                    <div class="stat-icon primary mx-auto" style="width: 80px; height: 80px;">
                        <i class="ti ti-file-text" style="font-size: 2.5rem;"></i>
                    </div>
                </div>
                <h3 class="empty-state-title mb-2">No Accounts Found</h3>
                <p class="text-muted mb-4">
                    Get started by creating your first account in the chart of accounts
                </p>
                <a href="{% url 'core:account_create' %}" class="btn btn-primary">
                    <i class="ti ti-plus me-2"></i>Add Your First Account
                </a>
            </div>
        </div>
        {% endif %}
    </div>
</div>

<!-- Info Card -->
<div class="row mt-4">
    <div class="col-md-12">
        <div class="card shadow-sm border-info">
            <div class="card-body">
                <div class="d-flex align-items-start">
                    <div class="stat-icon info me-3 mt-1">
                        <i class="ti ti-info-circle"></i>
                    </div>
                    <div class="flex-fill">
                        <h5 class="mb-3">
                            <i class="ti ti-book me-2"></i>About Chart of Accounts
                        </h5>
                        <div class="row">
                            <div class="col-md-6 mb-2">
                                <div class="p-3 bg-light rounded">
                                    <span class="badge badge-primary-light mb-2">
                                        <i class="ti ti-wallet me-1"></i>Assets (Aset)
                                    </span>
                                    <p class="mb-0 small">Cash, Bank, Inventory, Equipment <span class="text-muted">(Code: 1xxx)</span></p>
                                </div>
                            </div>
                            <div class="col-md-6 mb-2">
                                <div class="p-3 bg-light rounded">
                                    <span class="badge badge-danger-light mb-2">
                                        <i class="ti ti-credit-card me-1"></i>Liabilities (Liabiliti)
                                    </span>
                                    <p class="mb-0 small">Loans, Payables <span class="text-muted">(Code: 2xxx)</span></p>
                                </div>
                            </div>
                            <div class="col-md-4 mb-2">
                                <div class="p-3 bg-light rounded">
                                    <span class="badge badge-info-light mb-2">
                                        <i class="ti ti-chart-pie me-1"></i>Equity (Ekuiti)
                                    </span>
                                    <p class="mb-0 small">Capital, Retained Earnings <span class="text-muted">(Code: 3xxx)</span></p>
                                </div>
                            </div>
                            <div class="col-md-4 mb-2">
                                <div class="p-3 bg-light rounded">
                                    <span class="badge badge-success-light mb-2">
                                        <i class="ti ti-trending-up me-1"></i>Income (Pendapatan)
                                    </span>
                                    <p class="mb-0 small">Sales, Service Revenue <span class="text-muted">(Code: 4xxx)</span></p>
                                </div>
                            </div>
                            <div class="col-md-4 mb-2">
                                <div class="p-3 bg-light rounded">
                                    <span class="badge badge-warning-light mb-2">
                                        <i class="ti ti-trending-down me-1"></i>Expenses (Perbelanjaan)
                                    </span>
                                    <p class="mb-0 small">Rent, Utilities, Salaries <span class="text-muted">(Code: 5xxx)</span></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}