<div id="modalPilihSupplier" 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 style="background: white; padding: 40px; border-radius: 20px; width: 450px; text-align: center; box-shadow: 0 15px 50px rgba(0,0,0,0.3); animation: slideDown 0.3s ease;">
        
        <div style="background: #fff1f1; width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;">
            <i class="fa-solid fa-truck-fast" style="font-size: 35px; color: #b71c1c;"></i>
        </div>
        
        <h2 style="margin: 0 0 10px 0; font-size: 22px; color: #333;">Buat Pesanan Baru</h2>
        <p style="color: #777; font-size: 14px; margin-bottom: 30px;">Silahkan pilih supplier terdaftar untuk memulai Purchase Order</p>

        <div style="text-align: left; margin-bottom: 25px;">
            <label style="display: block; font-size: 12px; font-weight: 700; color: #555; margin-bottom: 8px; text-transform: uppercase;">Pilih Supplier</label>
            <select id="dropdown_supplier_po" style="width: 100%; padding: 12px; border: 2px solid #eee; border-radius: 10px; font-size: 14px; outline: none; transition: 0.3s; background: #fafafa;">
                <option value="">-- Pilih Mitra Supplier --</option>
                <?php 
                // Pastikan koneksi.php sudah di-include di file dashboard.php
                $query = mysqli_query($koneksi, "SELECT * FROM supplier WHERE status='Aktif' ORDER BY nama_supplier ASC");
                if ($query) {
                    while($row = mysqli_fetch_array($query)) {
                        // Simpan seluruh data dalam JSON agar mudah diambil oleh JavaScript
                        echo "<option value='".htmlspecialchars(json_encode($row), ENT_QUOTES)."'>".$row['nama_supplier']."</option>";
                    }
                }
                ?>
            </select>
        </div>

        <div style="display: flex; gap: 12px;">
            <button type="button" onclick="closePilihSupplier()" style="flex: 1; padding: 12px; border: none; background: #f5f5f5; color: #666; border-radius: 10px; font-weight: 600; cursor: pointer;">Batal</button>
            <button type="button" onclick="lanjutKePO()" style="flex: 2; padding: 12px; border: none; background: #b71c1c; color: white; border-radius: 10px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;">
                Lanjutkan <i class="fa-solid fa-arrow-right"></i>
            </button>
        </div>
    </div>
</div>

<style>
    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-30px); }
        to { opacity: 1; transform: translateY(0); }
    }
    #dropdown_supplier_po:focus { border-color: #b71c1c; background: white; }
</style>