<div id="orderModal" class="modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 9999; align-items: center; justify-content: center; backdrop-filter: blur(4px);">
    <div class="modal-content" style="background: white; padding: 30px; border-radius: 16px; width: 850px; max-height: 95vh; overflow-y: auto; position: relative; box-shadow: 0 15px 50px rgba(0,0,0,0.2);">
        
        <div style="border-bottom: 3px solid #333; padding-bottom: 15px; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center;">
            <div>
                <h2 style="margin: 0; color: #b71c1c; font-size: 24px; font-weight: 800;">PURCHASE ORDER</h2>
                <small style="color: #666; font-weight: 600;">BEST Procurement System</small>
            </div>
            <div style="text-align: right;">
                <div style="font-weight: bold; color: #b71c1c;">PO No: PO-<?php echo date('YmdHis'); ?></div>
                <div style="font-size: 13px; color: #666;">Date: <?php echo date('d/m/Y'); ?></div>
            </div>
        </div>

        <form action="proses_rilis_order.php" method="POST" target="_blank">
            <div style="display: flex; gap: 30px; margin-bottom: 20px;">
                <div style="flex: 1; background: #fdfdfd; padding: 15px; border: 1px solid #eee; border-radius: 8px;">
                    <p style="color: #b71c1c; font-weight: bold; font-size: 11px; margin: 0 0 10px 0; text-transform: uppercase;">Supplier Info:</p>
                    <input type="hidden" name="supplier_id" id="po_supplier_id">
                    <div id="po_supplier_name" style="font-weight: 800; font-size: 16px;">-</div>
                    <div id="po_supplier_address" style="font-size: 12px; color: #666; margin: 5px 0;">-</div>
                    <div id="po_supplier_contact" style="font-size: 12px; font-style: italic; color: #444;">-</div>
                </div>
                
                <div style="flex: 1;">
                    <div style="margin-bottom: 10px;">
                        <label style="display: block; font-size: 12px; font-weight: 700; color: #555;">Shipping Expected</label>
                        <input type="date" name="tgl_kirim" required style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 6px;">
                    </div>
                    <div>
                        <label style="display: block; font-size: 12px; font-weight: 700; color: #555;">Payment Terms</label>
                        <select name="termin" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 6px;">
                            <option value="Net 30 Days">Net 30 Days</option>
                            <option value="COD">Cash on Delivery</option>
                        </select>
                    </div>
                </div>
            </div>

            <table style="width: 100%; border-collapse: collapse;">
                <thead>
                    <tr style="background: #333; color: white; font-size: 12px;">
                        <th style="padding: 10px; text-align: left;">Item Description</th>
                        <th style="width: 60px; padding: 10px;">Qty</th>
                        <th style="width: 130px; padding: 10px;">Unit Price (Rp)</th>
                        <th style="width: 130px; padding: 10px;">Total (Rp)</th>
                    </tr>
                </thead>
                <tbody id="po_item_list">
                    <tr class="item-row">
                        <td style="border: 1px solid #ddd;"><input type="text" name="item[]" required style="width: 100%; border: none; padding: 8px;"></td>
                        <td style="border: 1px solid #ddd;"><input type="number" name="qty[]" class="qty_in" value="1" oninput="hitungPO()" style="width: 100%; border: none; text-align: center;"></td>
                        <td style="border: 1px solid #ddd;"><input type="number" name="price[]" class="price_in" oninput="hitungPO()" style="width: 100%; border: none; text-align: right; padding-right: 5px;"></td>
                        <td style="border: 1px solid #ddd; background: #f9f9f9;"><input type="text" class="row_total" readonly style="width: 100%; border: none; text-align: right; font-weight: 700;"></td>
                    </tr>
                </tbody>
            </table>
            
            <button type="button" onclick="tambahBaris()" style="margin-top: 10px; cursor: pointer; padding: 5px 10px;">+ Add Item</button>

            <div style="margin-top: 20px; border-top: 2px solid #333; padding-top: 10px; display: flex; justify-content: flex-end;">
                <div style="width: 350px;">
                    <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
                        <span>Sub Total:</span>
                        <span style="font-weight: 700;">Rp <span id="txt_subtotal">0</span></span>
                        <input type="hidden" name="subtotal_hidden" id="subtotal_hidden" value="0">
                    </div>
                    <div style="display: flex; justify-content: space-between; font-weight: 800; font-size: 20px; color: #b71c1c; border-top: 1px solid #ddd; padding-top: 10px;">
                        <span>GRAND TOTAL:</span>
                        <span>Rp <span id="txt_grandtotal">0</span></span>
                    </div>
                </div>
            </div>

            <div style="display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px;">
                <button type="button" onclick="document.getElementById('orderModal').style.display='none'" style="padding: 10px 20px; border-radius: 6px; cursor: pointer;">Cancel</button>
                <button type="submit" style="background: #2e7d32; color: white; padding: 10px 25px; border: none; border-radius: 6px; cursor: pointer; font-weight: 700;">Rilis Order</button>
            </div>
        </form>
    </div>
</div>

<script>
function tambahBaris() {
    const row = `<tr class="item-row">
        <td style="border: 1px solid #ddd;"><input type="text" name="item[]" required style="width: 100%; border: none; padding: 8px;"></td>
        <td style="border: 1px solid #ddd;"><input type="number" name="qty[]" class="qty_in" value="1" oninput="hitungPO()" style="width: 100%; border: none; text-align: center;"></td>
        <td style="border: 1px solid #ddd;"><input type="number" name="price[]" class="price_in" oninput="hitungPO()" style="width: 100%; border: none; text-align: right; padding-right: 5px;"></td>
        <td style="border: 1px solid #ddd; background: #f9f9f9;"><input type="text" class="row_total" readonly style="width: 100%; border: none; text-align: right; font-weight: 700;"></td>
    </tr>`;
    document.getElementById('po_item_list').insertAdjacentHTML('beforeend', row);
}

function hitungPO() {
    let subtotal = 0;
    document.querySelectorAll('.item-row').forEach(row => {
        const q = row.querySelector('.qty_in').value || 0;
        const p = row.querySelector('.price_in').value || 0;
        const total = q * p;
        row.querySelector('.row_total').value = total.toLocaleString('id-ID');
        subtotal += total;
    });
    document.getElementById('txt_subtotal').innerText = subtotal.toLocaleString('id-ID');
    document.getElementById('txt_grandtotal').innerText = subtotal.toLocaleString('id-ID');
    document.getElementById('subtotal_hidden').value = subtotal; // Solusi error
}

function openOrderModal(data) {
    document.getElementById('po_supplier_id').value = data.id;
    document.getElementById('po_supplier_name').innerText = data.nama_supplier;
    document.getElementById('po_supplier_address').innerText = data.alamat;
    document.getElementById('po_supplier_contact').innerText = "PIC: " + data.pic + " | Telp: " + data.telp;
    document.getElementById('orderModal').style.display = 'flex';
}
</script>