{% extends "core/base.html" %}
{% load currency_filters %}
{% load static %}

{% block title %}Operating Expenses - SwiftPOS{% endblock %}
{% block topbar_title %}Operating Expenses{% endblock %}

{% block content %}
<div class="container-fluid px-0">

    <!-- Page Header -->
    <div class="sp-page-header">
        <div>
            <h1 class="sp-page-title"><i class="fas fa-file-invoice-dollar"></i>Operating Expenses</h1>
            <p class="sp-page-subtitle">Manage and track your company's daily operational expenses.</p>
        </div>
        <div class="sp-page-actions">
            <a href="{% url 'analytics:expense_category_list' %}" class="btn btn-outline-secondary btn-sm d-flex align-items-center gap-2">
                <i class="fas fa-tags"></i> Categories
            </a>
            <a href="{% url 'analytics:expense_create' %}" class="btn btn-primary btn-sm d-flex align-items-center gap-2">
                <i class="fas fa-plus"></i> Add Expense
            </a>
        </div>
    </div>

    <div class="card">
        <div class="card-body p-0">
            <div class="sp-table-container">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light text-muted small">
                        <tr>
                            <th class="ps-4">Date</th>
                            <th>Category</th>
                            <th>Description</th>
                            <th>Reference</th>
                            <th>Amount</th>
                            <th class="text-end pe-4">Logged By</th>
                        </tr>
                    </thead>
                    <tbody>
                    {% for expense in expenses %}
                        <tr>
                            <td class="ps-4 text-dark fw-medium">{{ expense.expense_date|date:"M j, Y" }}</td>
                            <td>
                                <span class="badge bg-primary bg-opacity-10 text-primary rounded-pill fw-semibold border border-primary border-opacity-25 px-3">
                                    {{ expense.category.name|default:"Uncategorized" }}
                                </span>
                            </td>
                            <td class="text-muted small">
                                {{ expense.notes|default:"-"|truncatechars:50 }}
                            </td>
                            <td class="text-muted small">{{ expense.reference|default:"-" }}</td>
                            <td class="fw-bold text-danger">{% money expense.amount %}</td>
                            <td class="text-end pe-4 text-muted small">
                                {{ expense.logged_by.get_full_name|default:expense.logged_by.username|default:"System" }}
                            </td>
                        </tr>
                    {% empty %}
                        <tr>
                            <td colspan="6" class="text-center py-5">
                                <div class="bg-light rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 64px; height: 64px;">
                                    <i class="fas fa-receipt fa-2x text-muted opacity-50"></i>
                                </div>
                                <h6 class="fw-bold text-dark mb-1">No Expenses Logged</h6>
                                <p class="small text-muted mb-3">You haven't recorded any operating expenses yet.</p>
                                <a href="{% url 'analytics:expense_create' %}" class="btn btn-primary btn-sm rounded-pill px-4 shadow-sm">Record First Expense</a>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>
{% endblock %}
