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

{% block content %}
<div class="card">
<form method="POST">
    <div class="form-grid mb-4">
        <div class="form-group">
            <label>Purchase Request (opsional)</label>
            <select name="pr_id">
                <option value="">— Tanpa PR —</option>
                {% if pr %}<option value="{{ pr.id }}" selected>{{ pr.pr_number }}</option>
                {% else %}{% for p in approved_prs %}<option value="{{ p.id }}">{{ p.pr_number }}</option>{% endfor %}{% endif %}
            </select>
        </div>
        <div class="form-group">
            <label>Proyek *</label>
            <select name="project_id" required>
                <option value="">— Pilih Proyek —</option>
                {% for p in projects %}<option value="{{ p.id }}" {% if pr and pr.project_id == p.id %}selected{% endif %}>{{ p.project_code }} — {{ p.project_name[:40] }}</option>{% endfor %}
            </select>
        </div>
        <div class="form-group">
            <label>Vendor *</label>
            <select name="vendor_id" required>
                <option value="">— Pilih Vendor —</option>
                {% for v in vendors %}<option value="{{ v.id }}">{{ v.vendor_name }}</option>{% endfor %}
            </select>
        </div>
        <div class="form-group">
            <label>Termin Pembayaran</label>
            <select name="payment_terms">
                <option>NET 30</option><option>NET 14</option><option>NET 7</option>
                <option>Tunai</option><option>DP 30% + Pelunasan</option><option>Termin sesuai kontrak</option>
            </select>
        </div>
        <div class="form-group">
            <label>Tanggal Order *</label>
            <input type="date" name="order_date" required>
        </div>
        <div class="form-group">
            <label>Estimasi Pengiriman</label>
            <input type="date" name="delivery_date">
        </div>
        <div class="form-group full">
            <label>Catatan</label>
            <textarea name="notes" rows="2"></textarea>
        </div>
    </div>

    <div class="divider"></div>
    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px">
        <div style="font-weight:600">Item PO</div>
        <button type="button" onclick="addRow()" class="btn btn-secondary btn-sm">+ Tambah Item</button>
    </div>
    <div id="items-container">
        <div class="item-row" id="row-0" style="grid-template-columns:2fr 1fr 1fr 1fr 1fr auto">
            <div class="form-group"><label>Nama Item *</label><input type="text" name="item_name[]" required></div>
            <div class="form-group"><label>Spesifikasi</label><input type="text" name="specification[]"></div>
            <div class="form-group"><label>Qty</label><input type="number" name="quantity[]" value="1" min="0.01" step="0.01" required></div>
            <div class="form-group"><label>Satuan</label><input type="text" name="unit[]" value="unit" required></div>
            <div class="form-group"><label>Harga Satuan (Rp)</label><input type="number" name="unit_price[]" min="0" value="0" required></div>
            <div class="form-group"><label>PPN %</label><input type="number" name="tax_rate[]" value="11" min="0" max="100"></div>
        </div>
    </div>

    <div style="display:flex;gap:12px;justify-content:flex-end;margin-top:20px">
        <a href="{{ url_for('procurement.po_list') }}" class="btn btn-secondary">Batal</a>
        <button type="submit" class="btn btn-primary">Simpan Purchase Order →</button>
    </div>
</form>
</div>

{% block scripts %}
<script>
let rowCount = 1;
function addRow() {
    const tpl = document.getElementById('row-0').cloneNode(true);
    tpl.id = 'row-' + rowCount++;
    tpl.querySelectorAll('input[type=text]').forEach(i => i.value = '');
    tpl.querySelector('input[name="quantity[]"]').value = '1';
    tpl.querySelector('input[name="unit_price[]"]').value = '0';
    const rmBtn = document.createElement('button');
    rmBtn.type='button'; rmBtn.className='remove-row'; rmBtn.textContent='×';
    rmBtn.onclick = () => tpl.remove();
    const wrap = document.createElement('div');
    wrap.className = 'form-group'; wrap.appendChild(rmBtn);
    tpl.appendChild(wrap);
    document.getElementById('items-container').appendChild(tpl);
}
</script>
{% endblock %}
{% endblock %}