<style type="text/css">
.pu-item-num{display:inline-block;min-width:36px;text-align:center;background:#e3f3f0;color:#0f766e;
font-weight:800;border-radius:7px;padding:3px 6px;font-size:11px;line-height:1.2;white-space:nowrap;}
</style>
<form id="form_pu" class="form-horizontal" enctype="multipart/form-data">
<input type="hidden" id="pu_id_tg" name="idtransaction_group">

<div class="alert alert-warning">
<i class="fa fa-info-circle"></i> Apakah Anda akan menunda pengiriman barang? Silakan pilih barang yang akan Anda tunda.
</div>

<div class="form-group">
<label class="control-label col-md-3">Daftar Barang</label>
<div class="col-md-9">
<div style="max-height: 200px; overflow-y: auto; border: 1px solid #ddd; padding: 5px;">
<table class="table table-condensed" id="table_pu_items">
<thead>
<tr>
<th width="10px"><input type="checkbox" id="checkAllItemsPU"></th>
<th width="45px">No</th>
<th>Nama Barang</th>
<th>Keterangan</th>
</tr>
</thead>
<tbody>
<!-- Diisi via AJAX -->
<tr><td colspan="4" class="text-center">Memuat data...</td></tr>
</tbody>
</table>
</div>
</div>
</div>

<div class="form-group">
<label class="control-label col-md-3">Alasan Penundaan <red>*</red></label>
<div class="col-md-9">
<input type="text" class="form-control" id="pu_reason" name="reason" list="listReasons" required>
<datalist id="listReasons"></datalist>
</div>
</div>

<div class="form-group">
<label class="control-label col-md-3">Foto Bukti (Opsional)</label>
<div class="col-md-9">
<input type="file" class="form-control" name="photo_proof" accept="image/*">
</div>
</div>

<div class="form-group">
<label class="control-label col-md-3">Estimasi Selesai PU <red>*</red></label>
<div class="col-md-9">
<input type="date" class="form-control" name="est_finish_date" required>
</div>
</div>
</form>