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

{% block title %}Bank Statements{% endblock %}

{% block content %}
<div class="container-xl">
    <div class="page-header d-print-none">
        <div class="row align-items-center">
            <div class="col">
                <h2 class="page-title">Bank Statements</h2>
                <div class="text-muted mt-1">Manage all bank statements from all accounts</div>
            </div>
            <div class="col-auto">
                <a href="{% url 'core:statement_upload' %}" class="btn btn-primary">
                    <i class="bi bi-upload"></i> Upload Statement
                </a>
            </div>
        </div>
    </div>
    
    <!-- Filters -->
    <div class="card mb-3">
        <div class="card-body">
            <form method="get" class="row g-2">
                <div class="col-md-3">
                    <label class="form-label">Bank Account</label>
                    <select name="bank" class="form-select">
                        <option value="">All Banks</option>
                        {% for bank in banks %}
                        <option value="{{ bank.id }}" {% if current_filters.bank == bank.id|stringformat:"s" %}selected{% endif %}>
                            {{ bank.bank_name }} - {{ bank.account_number }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">Month</label>
                    <select name="month" class="form-select">
                        <option value="">All Months</option>
                        {% for month in months %}
                        <option value="{{ month|date:'Y-m' }}" {% if current_filters.month == month|date:'Y-m' %}selected{% endif %}>
                            {{ month|date:'F Y' }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">Status</label>
                    <select name="status" class="form-select">
                        <option value="">All Status</option>
                        <option value="complete" {% if current_filters.status == 'complete' %}selected{% endif %}>Complete (100%)</option>
                        <option value="partial" {% if current_filters.status == 'partial' %}selected{% endif %}>Partial (1-99%)</option>
                        <option value="unreconciled" {% if current_filters.status == 'unreconciled' %}selected{% endif %}>Unreconciled (0%)</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">&nbsp;</label>
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="bi bi-funnel"></i> Apply Filters
                    </button>
                </div>
            </form>
        </div>
    </div>
    
    <!-- Statement List -->
    <div class="row row-cards">
        {% for item in statement_list %}
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-md-6">
                            <h3 class="mb-0">{{ item.statement.bank_account.bank_name }}</h3>
                            <div class="text-muted">{{ item.statement.bank_account.account_number }}</div>
                            <div class="text-muted small">
                                {{ item.statement.statement_period_start|date:'d M Y' }} - 
                                {{ item.statement.statement_period_end|date:'d M Y' }}
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="mb-1">
                                <strong>Opening:</strong> RM {{ item.statement.opening_balance|floatformat:2 }}
                            </div>
                            <div class="mb-1">
                                <strong>Closing:</strong> RM {{ item.statement.closing_balance|floatformat:2 }}
                            </div>
                            <div class="text-muted">
                                {{ item.statement.total_transactions }} transactions
                            </div>
                        </div>
                        <div class="col-md-3 text-end">
                            <!-- Reconciliation Progress -->
                            <div class="mb-2">
                                <div class="progress mb-1" style="height: 20px;">
                                    <div class="progress-bar {% if item.progress.percentage == 100 %}bg-success{% elif item.progress.percentage > 0 %}bg-warning{% else %}bg-danger{% endif %}" 
                                         style="width: {{ item.progress.percentage }}%">
                                        {{ item.progress.percentage|floatformat:0 }}%
                                    </div>
                                </div>
                                <div class="text-muted small">
                                    {{ item.progress.matched }}/{{ item.progress.total }} matched
                                </div>
                            </div>
                            
                            <!-- Actions -->
                            <div class="btn-group" role="group">
                                <a href="{% url 'core:statement_detail' item.statement.id %}" 
                                   class="btn btn-sm btn-outline-primary">
                                    <i class="bi bi-eye"></i> View
                                </a>
                                <a href="{% url 'core:statement_reconcile' item.statement.id %}" 
                                   class="btn btn-sm btn-primary">
                                    <i class="bi bi-arrow-left-right"></i> Reconcile
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% empty %}
        <div class="col-12">
            <div class="card">
                <div class="card-body text-center py-5">
                    <i class="bi bi-file-earmark-text display-1 text-muted"></i>
                    <p class="mt-3 mb-1">No statements found</p>
                    <p class="text-muted">
                        Upload your first bank statement to get started
                    </p>
                    <div class="mt-3">
                        <a href="{% url 'core:statement_upload' %}" class="btn btn-primary">
                            <i class="bi bi-upload"></i> Upload Statement
                        </a>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}