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

{% block title %}Dashboard - 3ncount{% endblock %}
{% block page_title %}
    <i class="ti ti-home me-2"></i>Dashboard
{% endblock %}

{% block page_actions %}
<a href="{% url 'core:transaction_create' %}" class="btn btn-primary btn-sm">
    <i class="ti ti-plus me-1"></i>New Transaction
</a>
{% endblock %}

{% block content %}
<!-- Stats Cards -->
<div class="row row-deck row-cards mb-4">
    <div class="col-sm-6 col-lg-3">
        <div class="card dashboard-card card-success hover-lift">
            <div class="card-body">
                <div class="stat-icon success mb-3">
                    <i class="ti ti-trending-up"></i>
                </div>
                <div class="subheader mb-2">Income ({{ current_month }})</div>
                <div class="stat-value text-success">RM {{ total_revenue|floatformat:2|intcomma }}</div>
                <div class="d-flex align-items-center mt-3">
                    <div class="text-muted small">Pendapatan bulan ini</div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-sm-6 col-lg-3">
        <div class="card dashboard-card card-danger hover-lift">
            <div class="card-body">
                <div class="stat-icon danger mb-3">
                    <i class="ti ti-trending-down"></i>
                </div>
                <div class="subheader mb-2">Expenses ({{ current_month }})</div>
                <div class="stat-value text-danger">RM {{ total_expenses|floatformat:2|intcomma }}</div>
                <div class="d-flex align-items-center mt-3">
                    <div class="text-muted small">Perbelanjaan bulan ini</div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-sm-6 col-lg-3">
        <div class="card dashboard-card {% if net_profit >= 0 %}card-success{% else %}card-danger{% endif %} hover-lift">
            <div class="card-body">
                <div class="stat-icon {% if net_profit >= 0 %}success{% else %}danger{% endif %} mb-3">
                    <i class="ti ti-{% if net_profit >= 0 %}chart-line{% else %}chart-line-down{% endif %}"></i>
                </div>
                <div class="subheader mb-2">Profit/Loss</div>
                <div class="stat-value {% if net_profit >= 0 %}text-success{% else %}text-danger{% endif %}">
                    RM {{ net_profit|floatformat:2|intcomma }}
                </div>
                <div class="d-flex align-items-center mt-3">
                    <div class="text-muted small">Untung/Rugi bulan ini</div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-sm-6 col-lg-3">
        <div class="card dashboard-card card-primary hover-lift">
            <div class="card-body">
                <div class="stat-icon mb-3">
                    <i class="ti ti-wallet"></i>
                </div>
                <div class="subheader mb-2">Cash Balance</div>
                <div class="stat-value text-primary">RM {{ total_bank_balance|floatformat:2|intcomma }}</div>
                <div class="d-flex align-items-center mt-3">
                    <div class="text-muted small">Baki tunai semasa</div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Outstanding Cards -->
<div class="row row-deck row-cards mb-4">
    <div class="col-md-6">
        <div class="card card-warning hover-lift">
            <div class="card-body">
                <div class="d-flex align-items-center mb-3">
                    <div class="stat-icon warning me-3" style="width: 48px; height: 48px; font-size: 1.5rem;">
                        <i class="ti ti-credit-card"></i>
                    </div>
                    <div>
                        <h3 class="card-title mb-1">Outstanding Receivables</h3>
                        <p class="text-muted mb-0 small">Customers owe us (Pelanggan berhutang)</p>
                    </div>
                </div>
                <div class="h2 text-warning mb-3">RM {{ outstanding_invoices|floatformat:2|intcomma }}</div>
                <div class="progress mb-3">
                    <div class="progress-bar bg-warning" style="width: {% widthratio outstanding_invoices 100000 100 %}%"></div>
                </div>
                <a href="{% url 'reports:outstanding' %}" class="btn btn-warning btn-sm w-100">
                    <i class="ti ti-eye me-1"></i>View Details
                </a>
            </div>
        </div>
    </div>
    
    <div class="col-md-6">
        <div class="card card-danger hover-lift">
            <div class="card-body">
                <div class="d-flex align-items-center mb-3">
                    <div class="stat-icon danger me-3" style="width: 48px; height: 48px; font-size: 1.5rem;">
                        <i class="ti ti-receipt"></i>
                    </div>
                    <div>
                        <h3 class="card-title mb-1">Outstanding Payables</h3>
                        <p class="text-muted mb-0 small">We owe suppliers (Kita berhutang)</p>
                    </div>
                </div>
                <div class="h2 text-danger mb-3">RM {{ outstanding_bills|floatformat:2|intcomma }}</div>
                <div class="progress mb-3">
                    <div class="progress-bar bg-danger" style="width: {% widthratio outstanding_bills 100000 100 %}%"></div>
                </div>
                <a href="{% url 'reports:outstanding' %}" class="btn btn-danger btn-sm w-100">
                    <i class="ti ti-eye me-1"></i>View Details
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Charts & Info Row -->
<div class="row row-deck row-cards mb-4">
    <div class="col-md-6">
        <div class="card hover-lift">
            <div class="card-header bg-gradient-primary text-white">
                <h3 class="card-title mb-0">
                    <i class="ti ti-chart-dots me-2"></i>Transaction Trends
                </h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-6 text-center py-4 border-end">
                        <div class="stat-icon success mx-auto mb-3" style="width: 64px; height: 64px; font-size: 2rem;">
                            <i class="ti ti-trending-up"></i>
                        </div>
                        <div class="h2 text-success mb-2">{{ income_trend }}</div>
                        <div class="text-muted fw-bold">Income Transactions</div>
                    </div>
                    <div class="col-6 text-center py-4">
                        <div class="stat-icon danger mx-auto mb-3" style="width: 64px; height: 64px; font-size: 2rem;">
                            <i class="ti ti-trending-down"></i>
                        </div>
                        <div class="h2 text-danger mb-2">{{ expense_trend }}</div>
                        <div class="text-muted fw-bold">Expense Transactions</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-md-6">
        <div class="card hover-lift">
            <div class="card-header bg-gradient-primary text-white">
                <h3 class="card-title mb-0">
                    <i class="ti ti-building-bank me-2"></i>Bank Accounts
                </h3>
            </div>
            <div class="card-body">
                {% if bank_accounts %}
                <div class="list-group list-group-flush">
                    {% for bank in bank_accounts %}
                    <div class="list-group-item px-0 border-start-primary">
                        <div class="row align-items-center">
                            <div class="col">
                                <div class="d-flex align-items-center">
                                    <div class="stat-icon me-3" style="width: 40px; height: 40px; font-size: 1.25rem;">
                                        <i class="ti ti-building-bank"></i>
                                    </div>
                                    <div>
                                        <strong class="d-block">{{ bank.name }}</strong>
                                        <div class="text-muted small">{{ bank.bank_name }}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-auto">
                                <div class="h3 mb-0 text-primary fw-bold">RM {{ bank.get_current_balance|floatformat:2|intcomma }}</div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="empty text-center py-5">
                    <div class="empty-icon">
                        <i class="ti ti-building-bank"></i>
                    </div>
                    <p class="empty-title">No bank accounts configured</p>
                    <p class="empty-subtitle text-muted">Add a bank account to track your balances</p>
                    <div class="empty-action">
                        <a href="{% url 'core:bank_account_create' %}" class="btn btn-primary btn-sm">
                            <i class="ti ti-plus me-1"></i>Add Bank Account
                        </a>
                    </div>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Recent Transactions -->
<div class="row">
    <div class="col-12">
        <div class="card hover-lift">
            <div class="card-header">
                <div class="row align-items-center">
                    <div class="col">
                        <h3 class="card-title mb-0">
                            <i class="ti ti-list me-2"></i>Recent Transactions
                        </h3>
                    </div>
                    <div class="col-auto">
                        <a href="{% url 'core:transaction_list' %}" class="btn btn-primary btn-sm">
                            <i class="ti ti-eye me-1"></i>View All
                        </a>
                    </div>
                </div>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-vcenter card-table table-hover mb-0">
                        <thead>
                            <tr>
                                <th><i class="ti ti-calendar me-2"></i>Date</th>
                                <th><i class="ti ti-tag me-2"></i>Type</th>
                                <th><i class="ti ti-file-text me-2"></i>Description</th>
                                <th><i class="ti ti-user me-2"></i>Contact</th>
                                <th class="text-end"><i class="ti ti-currency-dollar me-2"></i>Amount</th>
                                <th class="text-center"><i class="ti ti-check me-2"></i>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for transaction in recent_transactions %}
                            <tr class="transaction-row">
                                <td>
                                    <span class="badge bg-gray-100 text-dark">
                                        {{ transaction.date|date:"d/m/Y" }}
                                    </span>
                                </td>
                                <td>
                                    {% if transaction.transaction_type == 'INCOME' %}
                                    <span class="badge badge-success">
                                        <i class="ti ti-trending-up me-1"></i>Income
                                    </span>
                                    {% else %}
                                    <span class="badge badge-danger">
                                        <i class="ti ti-trending-down me-1"></i>Expense
                                    </span>
                                    {% endif %}
                                </td>
                                <td>
                                    <a href="{% url 'core:transaction_detail' transaction.pk %}" class="text-reset fw-bold">
                                        {{ transaction.description }}
                                    </a>
                                </td>
                                <td>
                                    {% if transaction.contact %}
                                    <a href="{% url 'core:contact_detail' transaction.contact.pk %}" class="text-reset">
                                        <i class="ti ti-user me-1"></i>{{ transaction.contact.name }}
                                    </a>
                                    {% else %}
                                    <span class="text-muted">-</span>
                                    {% endif %}
                                </td>
                                <td class="text-end">
                                    <strong class="currency">RM {{ transaction.amount|floatformat:2|intcomma }}</strong>
                                </td>
                                <td class="text-center">
                                    {% if transaction.is_paid %}
                                    <span class="badge bg-success-lt">
                                        <i class="ti ti-check me-1"></i>Paid
                                    </span>
                                    {% else %}
                                    <span class="badge bg-warning-lt">
                                        <i class="ti ti-clock me-1"></i>Unpaid
                                    </span>
                                    {% endif %}
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="6" class="text-center py-5">
                                    <div class="empty">
                                        <div class="empty-icon">
                                            <i class="ti ti-file-x"></i>
                                        </div>
                                        <p class="empty-title">No transactions yet</p>
                                        <p class="empty-subtitle text-muted">Create your first transaction to get started</p>
                                        <div class="empty-action">
                                            <a href="{% url 'core:transaction_create' %}" class="btn btn-primary btn-sm">
                                                <i class="ti ti-plus me-1"></i>Create Transaction
                                            </a>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_css %}
<style>
/* Dashboard specific enhancements */
.dashboard-card {
    transition: all 0.3s ease;
}

.dashboard-card .card-body {
    position: relative;
    overflow: hidden;
}

.dashboard-card::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.dashboard-card:hover::after {
    opacity: 1;
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}

/* Button size adjustments for dashboard - 30% smaller */
.page-header .btn-sm {
    font-size: 0.8125rem;
    padding: 0.35rem 0.75rem;
}

.card .btn-sm {
    font-size: 0.8125rem;
    padding: 0.35rem 0.75rem;
}

.card .btn-sm i {
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .stat-value {
        font-size: 1.5rem;
    }
    
    .stat-icon {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.5rem !important;
    }
    
    /* Even smaller buttons on mobile */
    .card .btn-sm {
        font-size: 0.75rem;
        padding: 0.3rem 0.6rem;
    }
}
</style>
{% endblock %}