<table class="table table-sm table-bordered table-hover">
    <thead>
        <tr class="table-warning">
            <th colspan="2">Kirim Ke</th>
            <th><select class="form-control form-control-sm" onclick="ubah(this.value)">
                    <option value="1">Customer</option>
                    <option value="2">Transfer Gudang</option>
                </select>
            </th>
            <th colspan="2">
                <div id="pilihan_kirim"></div>
            </th>
        </tr>
        <tr class="table-warning">
            <th colspan="2">Doc SJ / ITO</th>
            <th><input type="text" class="form-control form-control-sm"></th>
            <th>Tanggal</th>
            <th><input type="date" class="form-control form-control-sm" id="tgl_kirim" name="tgl_kirim" value="<?= date('Y-m-d'); ?>"></th>
        </tr>
        <tr class="table-warning">
            <th colspan="2">Kendaraan</th>
            <th>
                <select class="form-control form-control-sm" onclick="ubah_kendaraan(this.value)">
                    <option value="2">Expedisi</option>
                    <option value="1">Internal</option>
                </select>
            </th>
            <th>DK / LK</th>
            <th>
                <select class="form-control form-control-sm">
                    <option value="DK">Dalam Kota</option>
                    <option value="LK">Luar Kota</option>
                </select>
            </th>
        </tr>
        <tr class="table-warning">
            <th colspan="2">Sopir</th>
            <th>
                <div id="pilihan_sopir"></div>
            </th>
            <th>No Pol</th>
            <th>
                <div id="pilihan_kendaraan"></div>
            </th>
        </tr>
        <tr class="table-warning">
            <th colspan="2">Keterangan</th>
            <th colspan="3"><input type="text" class="form-control form-control-sm" id="keterangan_kirim" id="keterangan_kirim"></th>
        </tr>
        <tr class="table-warning">
            <th colspan="5" style='text-align: center;'>Data Barang</th>
        </tr>
        <tr class="table-warning">
            <th>#</th>
            <th>SKU</th>
            <th colspan="2">BARANG</th>
            <!--<th>STOK</th>-->
            <th>QTY KIRIM</th>
        </tr>
    </thead>
    <tbody>
        <?php
        $i = 1;
        foreach ($data as $d) {
            echo "<tr>";
            echo "<td>" . $i . "</td>";
            echo "<td>" . $d['sku'] . "</td>";
            echo "<td colspan='2'>" . $d['barang'] . "</td>";
            //echo "<td>" . $d['stok'] . "</td>";
            echo "<td><input type='number' class='form-control form-control-sm' id='qty_kirim[]' name='qty_kirim[]'></td>";
            echo "</tr>";
            $i++;
        }
        ?>
    </tbody>
    <tfoot>
        <tr class="table-warning">
            <td colspan="5"><button style="float:right;" type="button" class="btn btn-primary btn-sm"><i class="bi bi-truck"></i>&nbsp;Simpan</button></td>
        </tr>
    </tfoot>
</table>

<script>
    $(document).ready(function() {
        $("#pilihan_kirim").html("<input type='text' class='form-control form-control-sm' name='nama_customer' name='nama_customer'>");
        $("#pilihan_sopir").html("<input type='text' class='form-control form-control-sm' name='nama_sopir' name='nama_sopir'>");
        $("#pilihan_kendaraan").html("<input type='text' class='form-control form-control-sm' name='no_pol' name='no_pol'>");
    });
</script>