{% extends "base.html" %}
{% block title %}{{ po.po_number }}{% endblock %}
{% block breadcrumb %}<a href="{{ url_for('procurement.po_list') }}" style="color:var(--text-muted)">PO</a> / {{ po.po_number }}{% endblock %}
{% block page_title %}{{ po.po_number }}{% endblock %}

{% block content %}
<div class="grid-2 mb-4">
<div class="card">
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px">
        <div><div class="text-muted fs-13">Proyek</div><div class="fw-600">{{ po.project.project_code }}</div></div>
        <div><div class="text-muted fs-13">Vendor</div><div class="fw-600">{{ po.vendor.vendor_name }}</div><div class="fs-13 text-muted">NPWP: {{ po.vendor.npwp or '—' }}</div></div>
        <div><div class="text-muted fs-13">Tgl Order</div><div>{{ po.order_date.strftime('%d %B %Y') }}</div></div>
        <div><div class="text-muted fs-13">Est. Pengiriman</div><div>{{ po.delivery_date.strftime('%d %B %Y') if po.delivery_date else '—' }}</div></div>
        <div><div class="text-muted fs-13">Termin Pembayaran</div><div>{{ po.payment_terms or '—' }}</div></div>
        <div><div class="text-muted fs-13">PR Referensi</div><div>{{ po.purchase_request.pr_number if po.purchase_request else '—' }}</div></div>
    </div>
</div>
<div class="card">
    <div style="font-weight:600;margin-bottom:14px">Ringkasan & Aksi</div>
    <div style="display:flex;flex-direction:column;gap:8px;margin-bottom:16px">
        <div style="display:flex;justify-content:space-between"><span class="text-muted fs-13">Subtotal</span><span class="font-mono">Rp {{ "{:,.0f}".format(po.subtotal) }}</span></div>
        <div style="display:flex;justify-content:space-between"><span class="text-muted fs-13">PPN (11%)</span><span class="font-mono">Rp {{ "{:,.0f}".format(po.tax_amount) }}</span></div>
        <div class="divider" style="margin:6px 0"></div>
        <div style="display:flex;justify-content:space-between;font-size:18px;font-weight:700"><span>Total</span><span class="font-mono text-accent">Rp {{ "{:,.0f}".format(po.total_amount) }}</span></div>
    </div>
    {% if po.status != 'received' and po.status != 'cancelled' %}
    <form method="POST" action="{{ url_for('procurement.po_receive', id=po.id) }}">
        <button class="btn btn-success" style="width:100%">✓ Konfirmasi Penerimaan Barang</button>
    </form>
    {% else %}
    <div class="alert alert-success">Barang telah diterima & biaya proyek tercatat otomatis.</div>
    {% endif %}
    <div style="margin-top:10px">
        {% if po.status == 'draft' %}<span class="badge badge-secondary">Draft</span>
        {% elif po.status == 'sent' %}<span class="badge badge-info">Dikirim ke Vendor</span>
        {% elif po.status == 'received' %}<span class="badge badge-success">Diterima</span>
        {% elif po.status == 'cancelled' %}<span class="badge badge-danger">Dibatalkan</span>{% endif %}
    </div>
</div>
</div>

<div class="card">
    <div class="card-title mb-4">Daftar Item PO</div>
    <div class="table-wrap">
        <table>
            <thead><tr><th>#</th><th>Nama Item</th><th>Spesifikasi</th><th class="text-right">Qty</th><th>Satuan</th><th class="text-right">Harga Satuan</th><th class="text-right">PPN %</th><th class="text-right">Total</th></tr></thead>
            <tbody>
            {% for item in items %}
            <tr>
                <td class="text-muted fs-13">{{ loop.index }}</td>
                <td class="fw-600">{{ item.item_name }}</td>
                <td class="fs-13 text-muted">{{ item.specification or '—' }}</td>
                <td class="text-right font-mono">{{ item.quantity }}</td>
                <td class="fs-13">{{ item.unit }}</td>
                <td class="text-right font-mono fs-13">Rp {{ "{:,.0f}".format(item.unit_price) }}</td>
                <td class="text-right font-mono fs-13">{{ item.tax_rate }}%</td>
                <td class="text-right font-mono fw-600">Rp {{ "{:,.0f}".format(item.total_price) }}</td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}