    <!-- Main Content -->
    <div class="hk-pg-wrapper">
			<!-- Container -->
			<form action="addopname" method="post" enctype='multipart/form-data'>
            <div class="container-fluid mt-xl-50 mt-sm-30 mt-15">

            <div class="hk-pg-header mb-10">
                    <div>
						<h4 class="hk-pg-title"><span class="pg-title-icon"><span class="feather-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-activity"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg></span></span>Create Opname</h4>
                    </div>
					<div class="d-flex dropdown">
					<input  type="date" class="form-control" id="tanggal_order" name="tanggal_order" autocomplete="off">
                    </div>
                </div>

				<!-- Row -->



				<div class="row">
          <div class="col-12 col-xl-12 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <h6 class="card-title">Product Details</h6>
                        
                      <div class="container-fluid w-100">
                        <br/></br>
                        <div class="table-responsive">
                          <table id="order_items" class="table table-hover">
                              <tr>
                                  <th style="width:15%">Product</th>
                                  <th style="width:7%">Total(m)</th>
                                  <th style="width:15%">Keterangan</th>

                                  <th style="width:5%"><button type="button" id="add_row" class="btn btn-outline-primary btn-icon float-right mt-1"><i data-feather="plus"></i></button></th>

                              </tr>

                            
                              
                          </table>
                        </div>
                      </div>

                      
                    <!--- Card Body END -->
                </div>
            </div>
        </div>
		


            </div>


            <!-- /Container -->
			<button class="btn btn-primary w-100" type="submit">Simpan</button>

       </form>

<style>.dropify-wrapper{border:1px solid #e9ecef;border-radius:.25rem;max-width:100%;}
.dropify-wrapper .dropify-message span.file-icon{font-size:.875rem;color:#7987a1}
.dropify-wrapper .dropify-message span.file-icon::before{font-family:feather;content:"\e8e3";font-size:24px}
.table td{
    padding-left: 5px;
    padding-right: 5px;
}

.custom-dropify .dropify-wrapper {
    border: 1px solid #e9ecef;
    border-radius: .25rem;
    max-width: 100%;
}
.custom-dropify .dropify-wrapper .dropify-message span.file-icon {
    font-size: .875rem;
    color: #7987a1;
}
.custom-dropify .dropify-wrapper .dropify-message span.file-icon::before {
    font-family: feather;
    content: "\e8e3";
    font-size: 24px;
}

</style>    

<script>


$("#add_row").unbind('click').bind('click', function() {
var table = $("#order_items");
var count_table_tbody_tr = $("#order_items tbody tr").length;
var row_id = count_table_tbody_tr + 1;

$.ajax({
url:'<?= site_url('products/getproducts') ?>',
type: 'post',
dataType: 'json',
success:function(response) {
	// console.log(reponse.x);
	 var html = '<tr id="row_'+row_id+'">'+
	'<td>'+ 
		  '<select class="form-control select_group product" data-row-id="'+row_id+'" id="product_'+row_id+'" name="product_id[]" style="width:100%;" onchange="getProductData('+row_id+')" required>'+
			  '<option value=""></option>';
			  $.each(response, function(index, value) {
				html += '<option value="'+value.id+'">'+value.name+'</option>';             
			  });
		  html += '</select>'+
	'</td>'+ 
	'<td><input  required type="text" name="pcs[]" id="pcs_'+row_id+'" class="form-control" onkeyup="getQTY('+row_id+')"></td>'+
    '<td><textarea name="details[]" id="details_'+row_id+'" maxlength="500" rows="4" class="form-control"></textarea></td>'+
	'<td><button type="button" class="btn btn-outline-primary btn-icon float-right mt-1" onclick="removeRow(\''+row_id+'\')">X</button></td>'+
	
	'</tr>';
	  if(count_table_tbody_tr >= 1) {
	  $("#order_items tbody tr:last").after(html);  
}

	else {
	  $("#order_items tbody").html(html);
	}
	$(".product").select2();
	$("#image_"+row_id).dropify({
	  previewWidth: 50,
	  previewHeight: 50});
}
});

return false;

});


function removeRow(tr_id)

{

$("#order_items  tbody tr#row_"+tr_id).remove();


}

function removeOrderItem(button) {
var row = button.parentNode.parentNode;
row.parentNode.removeChild(row);
}

    

</script>
 