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

{% block title %}Statement Detail - {{ statement.bank_account.bank_name }}{% endblock %}

{% block content %}
<div class="container-xl">
    <div class="page-header d-print-none">
        <div class="row align-items-center">
            <div class="col">
                <div class="page-pretitle">
                    <a href="{% url 'core:statement_list' %}">Bank Statements</a> / 
                    {{ statement.bank_account.bank_name }}
                </div>
                <h2 class="page-title">
                    {{ statement.statement_period_start|date:'M Y' }} Statement
                </h2>
            </div>
            <div class="col-auto">
                <div class="btn-list">
                    {% if pending_count > 0 %}
                    <a href="{% url 'core:statement_export' statement.id %}" class="btn btn-success">
                        <i class="ti ti-file-export"></i> Auto Export ({{ pending_count }})
                    </a>
                    {% else %}
                    <a href="{% url 'core:statement_export' statement.id %}" class="btn btn-outline-secondary" disabled>
                        <i class="ti ti-file-export"></i> Auto Export (0)
                    </a>
                    {% endif %}
                    <a href="{% url 'core:statement_reconcile' statement.id %}" class="btn btn-primary">
                        <i class="ti ti-git-merge"></i> Reconcile
                    </a>
                    <a href="{% url 'core:statement_delete' statement.id %}" class="btn btn-outline-danger">
                        <i class="ti ti-trash"></i> Delete
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Statement Summary -->
    <div class="row mb-3">
        <div class="col-md-8">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h3>{{ statement.bank_account.bank_name }}</h3>
                            <p class="text-muted mb-1">{{ statement.account_number }}</p>
                            <p class="text-muted mb-0">
                                {{ statement.statement_period_start|date:'d M Y' }} - 
                                {{ statement.statement_period_end|date:'d M Y' }}
                            </p>
                        </div>
                        <div class="col-md-6">
                            <table class="table table-sm">
                                <tr>
                                    <td><strong>Opening Balance:</strong></td>
                                    <td class="text-end">RM {{ statement.opening_balance|floatformat:2 }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Closing Balance:</strong></td>
                                    <td class="text-end">RM {{ statement.closing_balance|floatformat:2 }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Total Transactions:</strong></td>
                                    <td class="text-end">{{ lines.count }}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card">
                <div class="card-body">
                    <h4>Reconciliation Progress</h4>
                    <div class="progress mb-2" style="height: 30px;">
                        <div class="progress-bar {% if progress.percentage == 100 %}bg-success{% elif progress.percentage > 0 %}bg-warning{% else %}bg-danger{% endif %}" 
                             style="width: {{ progress.percentage }}%">
                            {{ progress.percentage|floatformat:0 }}%
                        </div>
                    </div>
                    <div class="row text-center">
                        <div class="col">
                            <div class="text-success"><strong>{{ matched_count }}</strong></div>
                            <div class="text-muted small">Matched</div>
                        </div>
                        <div class="col">
                            <div class="text-warning"><strong>{{ pending_count }}</strong></div>
                            <div class="text-muted small">Pending</div>
                        </div>
                        <div class="col">
                            <div class="text-secondary"><strong>0</strong></div>
                            <div class="text-muted small">Ignored</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Transaction Lines -->
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Transaction Lines</h3>
        </div>
        <div class="table-responsive">
            <table class="table table-vcenter card-table table-striped">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Description</th>
                        <th class="text-end">Debit (Out)</th>
                        <th class="text-end">Credit (In)</th>
                        <th class="text-end">Balance</th>
                        <th>Status</th>
                        <th>Matched Transaction</th>
                    </tr>
                </thead>
                <tbody>
                    {% for line in lines %}
                    <tr>
                        <td>{{ line.date|date:'d M Y' }}</td>
                        <td>
                            <div>{{ line.description|truncatewords:10 }}</div>
                            {% if line.reference %}
                            <div class="text-muted small">Ref: {{ line.reference }}</div>
                            {% endif %}
                        </td>
                        <td class="text-end">
                            {% if line.debit %}
                            <span class="text-danger">RM {{ line.debit|floatformat:2 }}</span>
                            {% else %}
                            <span class="text-muted">-</span>
                            {% endif %}
                        </td>
                        <td class="text-end">
                            {% if line.credit %}
                            <span class="text-success">RM {{ line.credit|floatformat:2 }}</span>
                            {% else %}
                            <span class="text-muted">-</span>
                            {% endif %}
                        </td>
                        <td class="text-end">
                            {% if line.balance %}
                            RM {{ line.balance|floatformat:2 }}
                            {% else %}
                            <span class="text-muted">-</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if line.is_reconciled %}
                            <span class="badge bg-success">Matched</span>
                            {% else %}
                            <span class="badge bg-warning">Pending</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if line.reconciled_transaction %}
                            <a href="{% url 'core:transaction_detail' line.reconciled_transaction.id %}">
                                {{ line.reconciled_transaction.reference_no }}
                            </a>
                            {% else %}
                            <span class="text-muted">-</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="7" class="text-center text-muted">No transaction lines found</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}