{% extends "base.html" %}
{% block title %}{{ project.project_name }}{% endblock %}
{% block breadcrumb %}<a href="{{ url_for('projects.index') }}" style="color:var(--text-muted)">Proyek</a> / {{ project.project_code }}{% endblock %}
{% block page_title %}{{ project.project_code }} — {{ project.project_name[:50] }}{% endblock %}

{% block content %}
<!-- Summary -->
<div class="stat-grid" style="grid-template-columns:repeat(4,1fr)">
    <div class="stat-card">
        <div class="stat-label">Nilai Kontrak</div>
        <div style="font-size:18px;font-weight:700;font-family:'JetBrains Mono',monospace;color:var(--accent)">Rp {{ "{:,.0f}".format(project.contract_value) }}</div>
    </div>
    <div class="stat-card">
        <div class="stat-label">Total Anggaran</div>
        <div style="font-size:18px;font-weight:700;font-family:'JetBrains Mono',monospace">Rp {{ "{:,.0f}".format(project.total_budget) }}</div>
    </div>
    <div class="stat-card">
        <div class="stat-label">Biaya Aktual</div>
        <div style="font-size:18px;font-weight:700;font-family:'JetBrains Mono',monospace;color:var(--yellow)">Rp {{ "{:,.0f}".format(project.total_cost) }}</div>
    </div>
    <div class="stat-card">
        <div class="stat-label">Pendapatan Diakui (PSAK 72)</div>
        <div style="font-size:18px;font-weight:700;font-family:'JetBrains Mono',monospace;color:var(--green)">Rp {{ "{:,.0f}".format(project.recognized_revenue) }}</div>
    </div>
</div>

<!-- Progress -->
<div class="card mb-4">
    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px">
        <div>
            <div style="font-weight:600">Progress Biaya</div>
            <div class="text-muted fs-13">{{ project.completion_percentage }}% dari anggaran terpakai</div>
        </div>
        <div style="text-align:right">
            <div style="font-size:13px;color:var(--text-muted)">{{ project.client_name }}</div>
            <div style="font-size:13px">Kontrak: {{ project.contract_number or '—' }}</div>
        </div>
    </div>
    <div class="progress-bar" style="height:10px">
        <div class="progress-fill {% if project.completion_percentage > 90 %}danger{% elif project.completion_percentage > 70 %}warn{% endif %}" style="width:{{ project.completion_percentage }}%"></div>
    </div>
    <div style="display:flex;justify-content:space-between;margin-top:8px;font-size:12px;color:var(--text-muted)">
        <span>{{ project.start_date.strftime('%d %b %Y') }}</span>
        <span>{{ project.end_date.strftime('%d %b %Y') }}</span>
    </div>
</div>

<div class="grid-2">
<!-- Budget -->
<div class="card">
    <div class="card-header">
        <div class="card-title">📊 Anggaran Proyek</div>
        <button onclick="document.getElementById('modal-budget').style.display='flex'" class="btn btn-primary btn-sm">+ Tambah</button>
    </div>
    <div class="table-wrap">
        <table>
            <thead><tr><th>Kategori</th><th>Deskripsi</th><th class="text-right">Anggaran</th><th class="text-right">Aktual</th><th class="text-right">Selisih</th></tr></thead>
            <tbody>
            {% for b in budgets %}
            <tr>
                <td><span class="badge badge-info">{{ b.cost_category }}</span></td>
                <td class="fs-13">{{ b.description }}</td>
                <td class="font-mono text-right fs-13">Rp {{ "{:,.0f}".format(b.amount) }}</td>
                <td class="font-mono text-right fs-13">Rp {{ "{:,.0f}".format(b.actual_cost) }}</td>
                <td class="font-mono text-right fs-13 {% if b.variance < 0 %}text-red{% else %}text-green{% endif %}">
                    Rp {{ "{:,.0f}".format(b.variance) }}
                </td>
            </tr>
            {% else %}
            <tr><td colspan="5" style="text-align:center;color:var(--text-muted);padding:20px">Belum ada anggaran</td></tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<!-- Revenue PSAK 72 -->
<div class="card">
    <div class="card-header">
        <div class="card-title">📈 Pengakuan Pendapatan (PSAK 72)</div>
        <button onclick="document.getElementById('modal-revenue').style.display='flex'" class="btn btn-primary btn-sm">Akui Pendapatan</button>
    </div>
    <div class="table-wrap">
        <table>
            <thead><tr><th>Periode</th><th>% Selesai</th><th class="text-right">Diakui</th><th class="text-right">Kumulatif</th></tr></thead>
            <tbody>
            {% for r in revenues %}
            <tr>
                <td class="fs-13">{{ r.period }}<br><span class="text-muted">{{ r.recognition_date.strftime('%d %b %Y') }}</span></td>
                <td><span class="badge badge-info">{{ r.completion_percentage }}%</span></td>
                <td class="font-mono text-right fs-13 text-green fw-600">Rp {{ "{:,.0f}".format(r.recognized_amount) }}</td>
                <td class="font-mono text-right fs-13">Rp {{ "{:,.0f}".format(r.cumulative_recognized) }}</td>
            </tr>
            {% else %}
            <tr><td colspan="4" style="text-align:center;color:var(--text-muted);padding:20px">Belum ada pengakuan pendapatan</td></tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>
</div>

<!-- Cost Entries -->
<div class="card mt-4">
    <div class="card-header">
        <div class="card-title">💰 Realisasi Biaya Proyek</div>
        <button onclick="document.getElementById('modal-cost').style.display='flex'" class="btn btn-primary btn-sm">+ Catat Biaya</button>
    </div>
    <div class="table-wrap">
        <table>
            <thead><tr><th>Tanggal</th><th>Kategori</th><th>Deskripsi</th><th>No. Referensi</th><th>Vendor</th><th class="text-right">Jumlah</th></tr></thead>
            <tbody>
            {% for c in costs %}
            <tr>
                <td class="fs-13">{{ c.transaction_date.strftime('%d %b %Y') }}</td>
                <td><span class="badge badge-secondary">{{ c.cost_category }}</span></td>
                <td class="fs-13">{{ c.description }}</td>
                <td class="font-mono fs-13">{{ c.reference_number or '—' }}</td>
                <td class="fs-13">{{ c.vendor_name or '—' }}</td>
                <td class="font-mono text-right fw-600">Rp {{ "{:,.0f}".format(c.amount) }}</td>
            </tr>
            {% else %}
            <tr><td colspan="6" style="text-align:center;color:var(--text-muted);padding:20px">Belum ada biaya tercatat</td></tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<!-- Modals -->
<div id="modal-budget" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:200;align-items:center;justify-content:center">
    <div class="card" style="width:520px;max-width:95vw">
        <div class="card-header"><div class="card-title">Tambah Anggaran</div><button onclick="document.getElementById('modal-budget').style.display='none'" style="background:none;border:none;color:var(--text-muted);font-size:20px;cursor:pointer">×</button></div>
        <form method="POST" action="{{ url_for('projects.add_budget', id=project.id) }}">
            <div class="form-grid">
                <div class="form-group">
                    <label>Kategori Biaya</label>
                    <select name="cost_category" required>
                        <option>Material/Bahan</option><option>Tenaga Kerja</option>
                        <option>Peralatan</option><option>Subkontraktor</option>
                        <option>Overhead</option><option>Lainnya</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>Deskripsi</label>
                    <input type="text" name="description" required>
                </div>
                <div class="form-group">
                    <label>Kuantitas</label>
                    <input type="number" name="quantity" value="1" min="0.01" step="0.01">
                </div>
                <div class="form-group">
                    <label>Satuan</label>
                    <input type="text" name="unit" placeholder="unit/m²/kg">
                </div>
                <div class="form-group full">
                    <label>Harga Satuan (Rp)</label>
                    <input type="number" name="unit_price" required min="0">
                </div>
            </div>
            <div style="display:flex;gap:10px;justify-content:flex-end;margin-top:16px">
                <button type="button" onclick="document.getElementById('modal-budget').style.display='none'" class="btn btn-secondary">Batal</button>
                <button type="submit" class="btn btn-primary">Simpan Anggaran</button>
            </div>
        </form>
    </div>
</div>

<div id="modal-cost" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:200;align-items:center;justify-content:center">
    <div class="card" style="width:560px;max-width:95vw">
        <div class="card-header"><div class="card-title">Catat Biaya Proyek</div><button onclick="document.getElementById('modal-cost').style.display='none'" style="background:none;border:none;color:var(--text-muted);font-size:20px;cursor:pointer">×</button></div>
        <form method="POST" action="{{ url_for('projects.add_cost', id=project.id) }}">
            <div class="form-grid">
                <div class="form-group">
                    <label>Kategori Biaya</label>
                    <select name="cost_category" required>
                        <option>Material/Bahan</option><option>Tenaga Kerja</option>
                        <option>Peralatan</option><option>Subkontraktor</option>
                        <option>Overhead</option><option>Pengadaan Barang/Jasa</option><option>Lainnya</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>Tanggal Transaksi</label>
                    <input type="date" name="transaction_date" required>
                </div>
                <div class="form-group full">
                    <label>Deskripsi</label>
                    <input type="text" name="description" required>
                </div>
                <div class="form-group">
                    <label>Jumlah (Rp)</label>
                    <input type="number" name="amount" required min="0">
                </div>
                <div class="form-group">
                    <label>No. Referensi</label>
                    <input type="text" name="reference_number">
                </div>
                <div class="form-group full">
                    <label>Nama Vendor/Supplier</label>
                    <input type="text" name="vendor_name">
                </div>
            </div>
            <div style="display:flex;gap:10px;justify-content:flex-end;margin-top:16px">
                <button type="button" onclick="document.getElementById('modal-cost').style.display='none'" class="btn btn-secondary">Batal</button>
                <button type="submit" class="btn btn-primary">Catat Biaya</button>
            </div>
        </form>
    </div>
</div>

<div id="modal-revenue" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:200;align-items:center;justify-content:center">
    <div class="card" style="width:520px;max-width:95vw">
        <div class="card-header"><div class="card-title">Akui Pendapatan — PSAK 72</div><button onclick="document.getElementById('modal-revenue').style.display='none'" style="background:none;border:none;color:var(--text-muted);font-size:20px;cursor:pointer">×</button></div>
        <form method="POST" action="{{ url_for('projects.recognize_revenue', id=project.id) }}">
            <div class="form-grid">
                <div class="form-group">
                    <label>Tanggal Pengakuan</label>
                    <input type="date" name="recognition_date" required>
                </div>
                <div class="form-group">
                    <label>Periode (YYYY-MM)</label>
                    <input type="text" name="period" placeholder="2025-06" required>
                </div>
                <div class="form-group full">
                    <label>Persentase Penyelesaian (%)</label>
                    <input type="number" name="completion_percentage" min="0" max="100" step="0.01" required>
                </div>
                <div class="form-group full">
                    <label>Catatan</label>
                    <textarea name="notes" placeholder="Dasar pengakuan pendapatan (bukti progres, BAST, dll)"></textarea>
                </div>
            </div>
            <div style="display:flex;gap:10px;justify-content:flex-end;margin-top:16px">
                <button type="button" onclick="document.getElementById('modal-revenue').style.display='none'" class="btn btn-secondary">Batal</button>
                <button type="submit" class="btn btn-success">Akui Pendapatan</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}