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

{% block content %}
<div class="card">
<form method="POST">
    <div class="form-grid mb-4">
        <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 }}">{{ p.project_code }} — {{ p.project_name[:50] }}</option>{% endfor %}
            </select>
        </div>
        <div class="form-group">
            <label>Prioritas</label>
            <select name="priority">
                <option value="low">Rendah</option>
                <option value="normal" selected>Normal</option>
                <option value="high">Tinggi</option>
                <option value="urgent">Urgent</option>
            </select>
        </div>
        <div class="form-group">
            <label>Tanggal Request *</label>
            <input type="date" name="request_date" required value="{{ now.strftime('%Y-%m-%d') if now else '' }}">
        </div>
        <div class="form-group">
            <label>Dibutuhkan Sebelum</label>
            <input type="date" name="needed_date">
        </div>
        <div class="form-group full">
            <label>Catatan</label>
            <textarea name="notes" rows="2" placeholder="Alasan / keterangan permintaan..."></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 yang Diminta</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 1.5fr auto">
            <div class="form-group"><label>Nama Item *</label><input type="text" name="item_name[]" required placeholder="Nama barang/jasa"></div>
            <div class="form-group"><label>Spesifikasi</label><input type="text" name="specification[]" placeholder="Spek teknis"></div>
            <div class="form-group"><label>Kuantitas *</label><input type="number" name="quantity[]" required min="0.01" step="0.01" value="1"></div>
            <div class="form-group"><label>Satuan</label><input type="text" name="unit[]" placeholder="pcs/unit/m" value="unit"></div>
            <div class="form-group">
                <label>Harga Estimasi (Rp)</label>
                <input type="number" name="estimated_price[]" min="0" value="0">
            </div>
            <div class="form-group"><label>Kategori</label>
                <select name="cost_category[]">
                    <option>Material/Bahan</option><option>Peralatan</option><option>Tenaga Kerja</option><option>Jasa</option><option>Lainnya</option>
                </select>
            </div>
        </div>
    </div>

    <div style="display:flex;gap:12px;justify-content:flex-end;margin-top:20px">
        <a href="{{ url_for('procurement.pr_list') }}" class="btn btn-secondary">Batal</a>
        <button type="submit" class="btn btn-primary">Simpan Purchase Request →</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').forEach(i => { if(i.type !== 'number') i.value = ''; else if(i.name === 'quantity[]') i.value = '1'; else i.value = '0'; });
    const rmBtn = document.createElement('button');
    rmBtn.type = 'button'; rmBtn.className = 'remove-row'; rmBtn.textContent = '×';
    rmBtn.onclick = () => tpl.remove();
    tpl.appendChild(document.createElement('div')).appendChild(rmBtn);
    document.getElementById('items-container').appendChild(tpl);
}
</script>
{% endblock %}
{% endblock %}