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

{% block title %}Transactions - 3ncount{% endblock %}

{% block page_title %}
    <i class="ti ti-arrows-exchange me-2"></i>All Transactions
{% endblock %}

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

{% block content %}
<!-- Filters Card -->
<div class="card mb-4 hover-lift">
    <div class="card-header bg-gradient-primary text-white">
        <h3 class="card-title mb-0">
            <i class="ti ti-filter me-2"></i>Filter Transactions
        </h3>
    </div>
    <div class="card-body">
        <form method="get" class="row g-3">
            <div class="col-md-2">
                <label class="form-label">
                    <i class="ti ti-tag me-1"></i>Type
                </label>
                <select name="type" class="form-select">
                    <option value="">All Types</option>
                    <option value="INCOME" {% if request.GET.type == 'INCOME' %}selected{% endif %}>
                        <i class="ti ti-trending-up"></i> Income
                    </option>
                    <option value="EXPENSE" {% if request.GET.type == 'EXPENSE' %}selected{% endif %}>
                        <i class="ti ti-trending-down"></i> Expense
                    </option>
                </select>
            </div>
            
            <div class="col-md-2">
                <label class="form-label">
                    <i class="ti ti-check me-1"></i>Status
                </label>
                <select name="paid" class="form-select">
                    <option value="">All Status</option>
                    <option value="true" {% if request.GET.paid == 'true' %}selected{% endif %}>Paid</option>
                    <option value="false" {% if request.GET.paid == 'false' %}selected{% endif %}>Unpaid</option>
                </select>
            </div>
            
            <div class="col-md-2">
                <label class="form-label">
                    <i class="ti ti-user me-1"></i>Contact
                </label>
                <select name="contact" class="form-select">
                    <option value="">All Contacts</option>
                    {% for contact in contacts %}
                    <option value="{{ contact.id }}" {% if request.GET.contact == contact.id|stringformat:"s" %}selected{% endif %}>
                        {{ contact.name }}
                    </option>
                    {% endfor %}
                </select>
            </div>
            
            <div class="col-md-2">
                <label class="form-label">
                    <i class="ti ti-calendar me-1"></i>From Date
                </label>
                <input type="date" name="date_from" class="form-control" value="{{ request.GET.date_from }}">
            </div>
            
            <div class="col-md-2">
                <label class="form-label">
                    <i class="ti ti-calendar me-1"></i>To Date
                </label>
                <input type="date" name="date_to" class="form-control" value="{{ request.GET.date_to }}">
            </div>
            
            <div class="col-md-2">
                <label class="form-label">&nbsp;</label>
                <div class="d-grid gap-2">
                    <button type="submit" class="btn btn-primary">
                        <i class="ti ti-search me-2"></i>Search
                    </button>
                    <a href="{% url 'core:transaction_list' %}" class="btn btn-outline-secondary btn-sm">
                        <i class="ti ti-x me-1"></i>Clear
                    </a>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Transactions Table Card -->
<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>Transaction List
                </h3>
            </div>
            <div class="col-auto">
                <span class="badge bg-primary badge-pill fs-6">
                    {{ transactions|length }} transactions
                </span>
            </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-hash me-2"></i>Reference</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><i class="ti ti-credit-card me-2"></i>Payment</th>
                        <th class="text-center"><i class="ti ti-check me-2"></i>Status</th>
                        <th class="text-center w-1"><i class="ti ti-settings me-2"></i>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for transaction in transactions %}
                    <tr class="transaction-row">
                        <td>
                            <span class="badge bg-gray-100 text-dark">
                                {{ transaction.date|date:"d/m/Y" }}
                            </span>
                        </td>
                        <td>
                            <a href="{% url 'core:transaction_detail' transaction.pk %}" class="text-reset fw-bold">
                                <i class="ti ti-file me-1"></i>{{ transaction.reference_no }}
                            </a>
                        </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>
                            <div class="text-truncate" style="max-width: 250px;" title="{{ transaction.description }}">
                                {{ transaction.description }}
                            </div>
                        </td>
                        <td>
                            {% if transaction.contact %}
                            <a href="{% url 'core:contact_detail' transaction.contact.pk %}" class="d-flex align-items-center text-reset">
                                <span class="avatar avatar-sm me-2" style="background-image: url(https://ui-avatars.com/api/?name={{ transaction.contact.name|urlencode }}&background=667eea&color=fff)"></span>
                                <span>{{ transaction.contact.name|truncatewords:3 }}</span>
                            </a>
                            {% else %}
                            <span class="text-muted">-</span>
                            {% endif %}
                        </td>
                        <td class="text-end">
                            <strong class="currency {% if transaction.transaction_type == 'INCOME' %}text-success{% else %}text-danger{% endif %}">
                                RM {{ transaction.amount|floatformat:2|intcomma }}
                            </strong>
                        </td>
                        <td>
                            <span class="badge bg-info-lt">
                                {{ transaction.get_payment_method_display }}
                            </span>
                        </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>
                        <td class="text-center">
                            <div class="btn-group" role="group">
                                <a href="{% url 'core:transaction_detail' transaction.pk %}"
                                    class="btn btn-sm btn-primary"
                                    title="View Details">
                                    <i class="ti ti-eye"></i>
                                </a>
                                <a href="{% url 'core:transaction_update' transaction.pk %}"
                                    class="btn btn-sm btn-warning"
                                    title="Edit">
                                    <i class="ti ti-edit"></i>
                                </a>
                                <a href="{% url 'core:transaction_delete' transaction.pk %}"
                                    class="btn btn-sm btn-danger"
                                    title="Delete"
                                    onclick="return confirm('Are you sure you want to delete this transaction?');">
                                    <i class="ti ti-trash"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="9" 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 found</p>
                                <p class="empty-subtitle text-muted">
                                    {% if request.GET %}
                                        Try adjusting your filters or <a href="{% url 'core:transaction_list' %}">clear all filters</a>
                                    {% else %}
                                        Create your first transaction to get started
                                    {% endif %}
                                </p>
                                <div class="empty-action">
                                    <a href="{% url 'core:transaction_create' %}" class="btn btn-primary">
                                        <i class="ti ti-plus me-2"></i>Create Transaction
                                    </a>
                                </div>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_css %}
<style>
/* Transaction list specific enhancements */
.transaction-row {
    transition: all 0.2s ease;
}

.transaction-row:hover {
    background-color: var(--gray-50) !important;
    transform: scale(1.001);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.btn-group .btn {
    transition: all 0.2s ease;
}

.btn-group .btn:hover {
    transform: translateY(-2px);
    z-index: 2;
}

/* Badge enhancements */
.badge-pill {
    padding: 0.5rem 1rem;
    border-radius: 50px;
}

/* Form select styling */
.form-select {
    cursor: pointer;
}

.form-select:hover {
    border-color: var(--primary);
}

/* Avatar styling */
.avatar {
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Responsive table improvements */
@media (max-width: 992px) {
    .table-responsive {
        font-size: 0.875rem;
    }
    
    .btn-group .btn {
        padding: 0.375rem 0.5rem;
    }
}
</style>
{% endblock %}