{% extends "base.html" %}
{% block title %}Budget vs Aktual{% endblock %}
{% block breadcrumb %}Akuntansi / Budget vs Aktual{% endblock %}
{% block page_title %}Laporan Budget vs Aktual{% endblock %}
{% block content %}
<div class="card mb-4">
    <form method="GET" style="display:flex;gap:12px;align-items:flex-end">
        <div class="form-group" style="flex:1">
            <label>Pilih Proyek</label>
            <select name="project_id">
                <option value="">— Pilih Proyek —</option>
                {% for p in projects %}<option value="{{ p.id }}" {% if selected_project and selected_project.id == p.id %}selected{% endif %}>{{ p.project_code }} — {{ p.project_name[:50] }}</option>{% endfor %}
            </select>
        </div>
        <button type="submit" class="btn btn-primary">Tampilkan</button>
    </form>
</div>

{% if selected_project and bva_data %}
<div class="card">
    <div class="card-title mb-4">Budget vs Aktual — {{ selected_project.project_name }}</div>
    <div class="table-wrap">
        <table>
            <thead><tr><th>Kategori</th><th class="text-right">Anggaran</th><th class="text-right">Aktual</th><th class="text-right">Selisih</th><th>Penyerapan</th></tr></thead>
            <tbody>
            {% for row in bva_data %}
            <tr>
                <td><span class="badge badge-info">{{ row.category }}</span></td>
                <td class="text-right font-mono fs-13">Rp {{ "{:,.0f}".format(row.budget) }}</td>
                <td class="text-right font-mono fs-13">Rp {{ "{:,.0f}".format(row.actual) }}</td>
                <td class="text-right font-mono fw-600 {% if row.variance < 0 %}text-red{% else %}text-green{% endif %}">
                    {% if row.variance < 0 %}({% endif %}Rp {{ "{:,.0f}".format(row.variance|abs) }}{% if row.variance < 0 %}){% endif %}
                </td>
                <td style="min-width:140px">
                    <div style="display:flex;align-items:center;gap:8px">
                        <div class="progress-bar" style="flex:1">
                            <div class="progress-fill {% if row.pct > 100 %}danger{% elif row.pct > 80 %}warn{% endif %}" style="width:{{ [row.pct, 100]|min }}%"></div>
                        </div>
                        <span class="fs-13 {% if row.pct > 100 %}text-red{% endif %}">{{ row.pct }}%</span>
                    </div>
                </td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% elif selected_project %}
<div class="card" style="text-align:center;padding:40px;color:var(--text-muted)">Belum ada data anggaran untuk proyek ini.</div>
{% endif %}
{% endblock %}