{% extends '_include/base.html.twig' %}

{% block title %}Bank Reconciliation - {{ reconciliation.bankAccount }}{% endblock %}

{% block breadcrumbs %}
    <nav aria-label="Breadcrumb">
        <ul class="breadcrumb__list">
            <li class="breadcrumb__item"><a href="{{ path('dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb__item"><a href="{{ path('app_bank_reconciliation_index') }}">Bank Reconciliation</a></li>
            <li class="breadcrumb__item" aria-current="page">{{ reconciliation.bankAccount }}</li>
        </ul>
    </nav>
{% endblock %}

{% block page_title %}Bank Reconciliation — {{ reconciliation.bankAccount }}{% endblock %}

{% block page_actions %}
    {% if reconciliation.status != 'finalized' %}
        <a href="{{ path('app_bank_reconciliation_finalize', {id: reconciliation.id}) }}"
           class="btn btn--primary"
           onclick="return confirm('Finalize this reconciliation? This cannot be undone.')">
            <i class="fa fa-lock"></i> Finalize
        </a>
    {% endif %}
    <a href="{{ path('app_bank_reconciliation_pdf', {id: reconciliation.id}) }}" class="btn btn--secondary" target="_blank"><i class="fa fa-file-pdf-o"></i> PDF</a>
    <a href="{{ path('app_bank_reconciliation_index') }}" class="btn btn--secondary"><i class="fa fa-arrow-left"></i> Back</a>
{% endblock %}

{% block content %}
{% set reconCurrency = reconciliation.bankAccount.currency %}

{% set status_class = reconciliation.status == 'finalized' ? 'badge--success' : (reconciliation.status == 'in_progress' ? 'badge--warning' : 'badge--secondary') %}
<div class="alert alert--info" style="margin-bottom:1.5rem;">
    Account: <strong>{{ reconciliation.bankAccount }}</strong> &nbsp;|&nbsp;
    Statement Date: <strong>{{ reconciliation.statementDate|date('F j, Y') }}</strong> &nbsp;|&nbsp;
    Status: <span class="badge {{ status_class }}">{{ reconciliation.status|replace({'_':' '})|capitalize }}</span>
</div>

<div class="grid grid--2">
    <!-- Left: Balances Summary -->
    <div class="card">
        <div class="card__header"><h3>Balance Summary</h3></div>
        <div class="card__body">
            <table class="table">
                <tbody>
                    <tr><td>Bank Statement Ending Balance</td><td class="text-right"><strong>{{ totals.statement_ending_balance|format_currency(reconCurrency) }}</strong></td></tr>
                    <tr><td>Add: Deposits in Transit</td><td class="text-right">+ {{ totals.deposits_in_transit|format_currency(reconCurrency) }}</td></tr>
                    <tr><td>Less: Outstanding Checks</td><td class="text-right">− {{ totals.outstanding_checks|format_currency(reconCurrency) }}</td></tr>
                    <tr><td>Bank Adjustments</td><td class="text-right">{{ totals.bank_adjustments|format_currency(reconCurrency) }}</td></tr>
                    <tr class="table__row--highlight"><td><strong>Adjusted Bank Balance</strong></td><td class="text-right"><strong>{{ totals.adjusted_bank_balance|format_currency(reconCurrency) }}</strong></td></tr>
                    <tr><td colspan="2"><hr></td></tr>
                    <tr><td>GL (Book) Ending Balance</td><td class="text-right"><strong>{{ totals.gl_ending_balance|format_currency(reconCurrency) }}</strong></td></tr>
                    <tr><td>GL Adjustments</td><td class="text-right">{{ totals.gl_adjustments|format_currency(reconCurrency) }}</td></tr>
                    <tr class="table__row--highlight"><td><strong>Adjusted Book Balance</strong></td><td class="text-right"><strong>{{ totals.adjusted_book_balance|format_currency(reconCurrency) }}</strong></td></tr>
                    <tr><td colspan="2"><hr></td></tr>
                    {% set diff = totals.adjusted_bank_balance - totals.adjusted_book_balance %}
                    <tr class="{{ diff == 0 ? 'table__row--success' : 'table__row--danger' }}">
                        <td><strong>Difference</strong></td>
                        <td class="text-right"><strong>{{ diff|abs|format_currency(reconCurrency) }} {{ diff == 0 ? '✔ Balanced' : '✗ OUT OF BALANCE' }}</strong></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Right: Upload Bank Statement CSV -->
    {% if reconciliation.status != 'finalized' %}
    <div class="card">
        <div class="card__header"><h3>Import Bank Statement</h3></div>
        <div class="card__body">
            <p class="text-muted">Upload a CSV export from your bank to auto-match transactions.</p>
            <form method="post" action="{{ path('app_bank_reconciliation_upload', {id: reconciliation.id}) }}" enctype="multipart/form-data">
                <div class="form-group">
                    <label class="form__label">CSV File</label>
                    <input type="file" name="csv_file" class="form__control" accept=".csv">
                    <small class="form__help">Expected columns: Date, Description, Amount</small>
                </div>
                <button type="submit" class="btn btn--primary"><i class="fa fa-upload"></i> Import &amp; Match</button>
            </form>
        </div>
    </div>
    {% endif %}
</div>

<!-- Reconciliation Items -->
{% if reconciliation.items is defined and reconciliation.items|length > 0 %}
<div class="card" style="margin-top:1.5rem;">
    <div class="card__header"><h3>Reconciliation Items</h3></div>
    <div class="card__body">
        <table class="table">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Description</th>
                    <th>Type</th>
                    <th>Amount</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
                {% for item in reconciliation.items %}
                <tr>
                    <td>{{ item.transactionDate|date('m/d/Y') }}</td>
                    <td>{{ item.description }}</td>
                    <td><span class="badge badge--secondary">{{ item.type|capitalize }}</span></td>
                    <td class="text-right">{{ item.amount|format_currency(reconCurrency) }}</td>
                    <td>
                        {% if item.matched %}
                            <span class="badge badge--success">Matched</span>
                        {% else %}
                            <span class="badge badge--warning">Unmatched</span>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% else %}
<div class="alert alert--info" style="margin-top:1.5rem;">No reconciliation items yet. Import a CSV bank statement to start matching transactions.</div>
{% endif %}

{% endblock %}