{% extends "base.html" %}
{% block title %}Laporan Biaya Proyek{% endblock %}
{% block breadcrumb %}Akuntansi / Biaya Proyek{% endblock %}
{% block page_title %}Laporan Biaya Proyek{% 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 %}
<div class="stat-grid">
    <div class="stat-card"><div class="stat-label">Nilai Kontrak</div><div class="stat-value text-accent fs-13 font-mono">Rp {{ "{:,.0f}".format(selected_project.contract_value) }}</div></div>
    <div class="stat-card"><div class="stat-label">Total Anggaran</div><div class="stat-value fs-13 font-mono">Rp {{ "{:,.0f}".format(selected_project.total_budget) }}</div></div>
    <div class="stat-card"><div class="stat-label">Realisasi Biaya</div><div class="stat-value text-yellow fs-13 font-mono">Rp {{ "{:,.0f}".format(selected_project.total_cost) }}</div></div>
    <div class="stat-card"><div class="stat-label">% Terpakai</div><div class="stat-value">{{ selected_project.completion_percentage }}%</div></div>
</div>
<div class="card">
    <div class="card-title mb-4">Biaya per Kategori — {{ selected_project.project_name }}</div>
    <div class="table-wrap">
        <table>
            <thead><tr><th>Kategori Biaya</th><th class="text-right">Total Biaya</th><th class="text-right">% dari Total</th></tr></thead>
            <tbody>
            {% set total_cost = selected_project.total_cost %}
            {% for row in costs_by_category %}
            <tr>
                <td><span class="badge badge-info">{{ row.cost_category }}</span></td>
                <td class="text-right font-mono fw-600">Rp {{ "{:,.0f}".format(row.total) }}</td>
                <td class="text-right">
                    {% if total_cost > 0 %}{{ "%.1f"|format(row.total / total_cost * 100) }}%{% else %}—{% endif %}
                </td>
            </tr>
            {% else %}
            <tr><td colspan="3" style="text-align:center;color:var(--text-muted);padding:20px">Belum ada data biaya</td></tr>
            {% endfor %}
            {% if costs_by_category %}
            <tr style="border-top:2px solid var(--border)">
                <td class="fw-600">TOTAL</td>
                <td class="text-right font-mono fw-600 text-accent">Rp {{ "{:,.0f}".format(total_cost) }}</td>
                <td class="text-right">100%</td>
            </tr>
            {% endif %}
            </tbody>
        </table>
    </div>
</div>
{% endif %}
{% endblock %}