<style>
em {
    color: red;
    font-size: 20px;
    position: absolute;
}

em {
    color: red;
    font-size: 20px;
    position: absolute;
}

.ModelfixTableHead {
    overflow-y: auto;
    height: 250px;
}

.ModelfixTableHead thead th {
    position: sticky !important;
    top: 0;
    z-index: 1;
    background-color: white;
</style>

<div id="new_product_div_to_clone" style="display:none;">
  <div class='row mt-3'> 
	<div class="col-lg-10"> 
	  <label for="department" class=" control-label">Department</label>
	  <div class="">
			<? $gsi->getDepartmentList("department[]",$department,"100%",false,"form-control select2","required"); ?>
	  </div>
	</div>
	<div class="col-lg-2"> 
		<div class="custom-trash"><br> 
			<span class="fa fa-trash delete_new_assest_pro text-danger " alt="" style="margin-top:15px; padding-left:10px;"></span>
		</div>
	</div>
  </div>
</div>
<!---------- Post Out ---------------->
<section class="content " >
	<div class="container-fluid ">
		<div class="row">
			<div class="col-12 "> 
				<div id="product_div" class="card">
					<div class="card-header  card-outline rounded">
						<h3 class="card-title">Inventory Stock</h3>
						<div class="card-tools">
							<div class="input-group input-group-sm" style="">
								<a href="" data-toggle="modal" data-backdrop="static"
                                    data-target="#myModalAjaxForproduct" class="btn btn-primary add_new_product"
                                    style="float:right;">Add Inventory Stock </a>
							</div>
						</div>
					</div>
                    <div class="table-responsive ModelfixTableHead" style="height: auto;">
                        <div class=" " id="overflow_div" style="overflow-x: hidden;">
                            <!-- Start  records header -->
                            <table id="products_table" class="table table-bordered table-striped">
                                <thead style="position:sticky">
                                    <tr>
                                        <th style="width:525px;">Product</th>
                                        <th style="width:525px;">Stock Location</th>
                                        <th style="width:525px;">Stock Location Quantity </th>
                                        <th>Edit</th>
                                        <th>Delete</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                    <!---------- Post Out ---------------->
                </div>
            </div>
        </div>
    </div>
</section>



<!-- Modal -->
<div class="modal fade" id="myModalAjaxForproduct" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <div class="col-lg-12">
                    <div class="row">
                        <div class="col-lg-8">
                            <h4 class="modal-title" id="myModalLabelAjaxForproduct">Add Inventory Stock</h4>
                        </div>
                        <div class="col-lg-4">
                            <button type="button" class="close close_button_product" data-dismiss="modal"
                                aria-hidden="true">&times;</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-body modal_iframe2">
                <section class="content">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="alert alert-info alert-dismissable product_add_update_message"
                                style="display:none;">
                                <button type="button" class="close" data-dismiss="alert"
                                    aria-hidden="true">&times;</button>
                            </div>
                            <div class="box box-primary">
							   <?//echo "SELECT * FROM product_stock WHERE id='".$_REQUEST['model_id']."'";
							    $map_hc=mysqli_query($conn,"SELECT * FROM product_stock WHERE id='".$_REQUEST['model_id']."'");
								
								$enq_row1 = mysqli_fetch_assoc($map_hc);
								?>
                                <div class="box-">
                                    <form action="index?page=view_product_details&action=<? echo $form_action; ?>" method="post" name="form2" id="form2">
                                          <div class='row'> 
											<div class="col-lg-6"> 
												<label class="control-label" for="source">Stock Location <em>*</em></label> 
												<div> 
													<? $gsi->getLocationList("stock_location",$enq_row1['stock_location'],"100%",false,"form-control select2","required"); ?>
												</div> 
											</div>
											<div class="col-lg-6"> 
												<label class="control-label" for="source">Stock Location Quantity<em>*</em></label> 
												<div> 
													<input type="text" id="stock_ltion_qty" name="stock_ltion_qty" class="form-control" value="<?= $enq_row1['stock_ltion_qty']; ?>"   placeholder="Stock Location Quantity" >
												</div> 
											</div>
											<div class='col-lg-6'> 
												<label class="control-label" for="First Name">Stock Total Quantity<em></em></label> 
												<div>
													<input type="text" id="stock_total_qty" name="stock_total_qty" class="form-control" value="<?= $enq_row1['stock_total_qty']; ?>"  placeholder="Stock Total Quantity" >
												</div>
											</div>
											<div class='col-lg-6'> 
												<label class="control-label" for="First Name">Stock Reorder Level<em></em></label> 
												<div>
													<input type="text" id="stock_re_level" name="stock_re_level" class="form-control" value="<?= $enq_row1['stock_re_level']; ?>"  placeholder="Stock Reorder Level">
												</div>
											</div>
											<div class='col-lg-6'> 
												<label class="control-label" for="First Name">Stock Check Date<em></em></label> 
												<div>
													<input type="text" class="form-control datepicker" id="stock_check_date" name="stock_check_date" value="<?php (isset($enq_row1['stock_check_date']) && $enq_row1['stock_check_date'] !="") ? utility::getFormatedDate($enq_row1['stock_check_date']) : "";?>"placeholder="DD-MM-YYYY" autocomplete="off">
												</div>
											</div>
											<div class='col-lg-6'> 
												<div class="">
													<label class="control-label" for="First Name">Consumable Location<em></em></label> 
													<? echo $gsi->getYesNo("consumable_location",$enq_row1['consumable_location'],"100%",false,"form-control ","required"); ?>
												</div>
											</div>
											<div class='col-lg-12'> 
												 <div class="row">
													<div class="col-lg-12">
													
														<?	
														$map_hc1=mysqli_query($conn,"SELECT * FROM product_stock_dipartment_map WHERE pro_stock_id='".$_REQUEST['model_id']."'");
															$map_cot1=mysqli_num_rows($map_hc1);
															if($map_cot1>0){
															while($map_row12=mysqli_fetch_array($map_hc1)){
																$map_row1=utility::validate_crypt_data($map_row12);
																$values1=$map_row1['id'];
															
														?>
														<div class="initial_row_for_na_pro" id="new_assest<?=$values1;?>" data-na_count="<?=$values1;?>">		 
															<div class='row'> 
															<div class="col-lg-10"> 
																<label for="department" class=" control-label">Department <em></em></label>
																  <div class="">
																	<? $gsi->getDepartmentList("department[]",$map_row1['department'],"100%",false,"form-control select2","required"); ?>
																  </div>
															</div>
															 <div class='col-2'> 
																<div class="custom-trash">
																	<input type="hidden" name="referal_parent_mapping_id_pro[]"  value="<?php echo $map_row1['id'];?>">	
																	<span class="fa fa-trash delete_new_assest_pro text-danger" alt="<?php echo $map_row1['id'];?>"style="margin-top:42px; padding-left:15px;"></span>
																	<i class="fas fa-sync-alt fa-spin" id="load_new_assest_pro<?=$map_row1['id'];?>" style="font-size: 10px;display:none;"></i>
																	<i class="fa fa-check text-success" id="status_update_done_pro<?=$map_row1['id'];?>" style="color:#bad23a;font-size: 10px;display:none;"></i>
																</div>
															 </div> 
															</div>				
														</div>
														<? }}else{?>
														<div class="initial_row_for_na_pro" id="new_assest1" data-na_count="1">	
														  <div class='row'> 
															<div class="col-lg-12"> 
																<label for="department" class="control-label">Department</label>
																  <div class="">
																	<? $gsi->getDepartmentList("department[]",$department,"100%",false,"form-control select2","required"); ?>
																  </div>
															</div>
														  </div>
														</div>
														<? }?>	
														<div class="form-group col-sm-12 new_assest_div_to_append_pro">	
															<label class="add_one_more_new_product text-primary" style="margin-left:0%;cursor:pointer"><span class="fa fa-plus" autocomplete="off"></span>Add More</label>
														</div>
													</div>
													</div>
											</div>
										  </div>
                                        <div style="clear:both;margin-top:13px;"></div>
                                        <div class="col-lg-12" style="margin-top:13px;">
                                            <input type="hidden" id="product_id" name="id" value="<?=$enq_row1['id']?>">
                                            <input type="hidden" id="" name="pro_temp_id" value="<?=$_REQUEST['pro_temp_id']?>">
                                            <input type="hidden" id="" name="pro_id" value="<?=$_REQUEST['id']?>">
                                            <input type="hidden" id="page_action_product" name="page_action_product" value="add">
                                            <button type="submit" name="submit_form_product" id="submit_form_product" class="btn btn-primary">Submit</button>
                                            <i class="fas fa-sync-alt fa-spin" style="display:none;" id="page_load_div_for_product"></i>
                                            <i class="fa fa-check" id="product_done" style="color:#bad23a;font-size: 20px;display:none;"></i>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default close_button_product" data-dismiss="modal">Close</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<script type="text/javascript">
var flag_for_table = 0;
$(function() {	
	
	$(document).ready(function() {
		var addModal = localStorage.getItem('addModal');
		//alert(addModal);
		if (addModal === '1') {
			   $('#myModalAjaxForproduct').modal('show');
				 flag_for_table = 0;
				$("#form2")[0].reset();
				$("#myModalAjaxForproduct").children().find("#stock_location").val('').trigger("change");
				$("#myModalAjaxForproduct").children().find("#consumable_location").val('').trigger("change");
				$("#myModalLabelAjaxForproduct").html("Add Product Stock");
				$("#page_action_product").val("add");
				$("#submit_form_product").html("Submit");
			}
		    localStorage.removeItem('addModal');
		
	});

	$("#product_div").on("click", ".add_new_product", function() {
		 <? if(isset($_REQUEST['model_id'])){?>
     		 localStorage.setItem('addModal', '1');
			 window.location.href = "<?=$siteURL?>/daynmic_product_management/index?page=view_product_details&from=view_product&pro_temp_id=<?=$_REQUEST['pro_temp_id']?>&id=<?=$_REQUEST['id'];
		 ?>"; 
		 <?}?>
		 $('#myModalAjaxForproduct').modal('show');
		 flag_for_table = 0;
		 $("#form2")[0].reset();
    });
    /*********************************** Post Out By Ajax and JSON *************************/
	var pro_id = "<?=$_REQUEST['id'];?>";
    $('#products_table').DataTable({
        "processing": true,
        "serverSide": true,
        "paging": false,
        "lengthChange": false,
        "searching": false,
        "ordering": false,
        "info": false,
        "autoWidth": false,
        "ajax": "<?php echo $siteURL?>/modules/daynmic_product_management/index.php?page=ajax_actions&action=ajax_product_stock_fetch&pro_id="+pro_id,
        "columns": [
            {"data": "pro_id"},
			{"data": "stock_location"},
			{"data": "stock_ltion_qty"},
            {
                sortable: false,
                "render": function(data, type, full, meta) {
                    var buttonID = full.id;
                    return '<span style="cursor:pointer;" data-toggle="modal" data-backdrop="static"  class="product_edit product_redirect" alt="'+buttonID+'"><img src="<?=$frontEndURL;?>/admin/images/edit.gif" ></span> ';
                }
            },
            {
                sortable: false,
                "render": function(data, type, full, meta) {
                    var buttonID = full.id;
                    return '<span style="cursor:pointer;" class="product_remove" alt="'+buttonID+'"><img src="<?=$frontEndURL;?>/admin/images/del.gif"></span><i class="fas fa-sync-alt fa-spin" style="display:none;" id="delete_loading_product_'+buttonID+'"></i><i class="fa fa-check text-success" style="display:none;" id="delete_loading_product_check'+buttonID+'"></i>';
                }
            }
        ]
    });
	$(document).ready(function() {
		var showModal = localStorage.getItem('showModal');
		//alert(showModal);
		if (showModal === '1') {
				$('#myModalAjaxForproduct').modal('show');
				 $("#page_action_product").val("update");
				 $("#submit_form_product").html("Update");
				 
			}
		    localStorage.removeItem('showModal');
		
	});
	
    $("#products_table").on("click", ".product_redirect", function() {
		 var id = $(this).attr("alt");
		 localStorage.setItem('showModal', '1');
		 window.location.href = "<?=$siteURL?>/daynmic_product_management/index?page=view_product_details&from=view_product&pro_temp_id=<?=$_REQUEST['pro_temp_id']?>&id=<?=$_REQUEST['id']?>&model_id="+id; 
		
		
	});
	
    var post_out_t = $('#products_table').DataTable();
	
    $('#products_table tbody').on('click', '.product_remove', function() {
        if (confirm("Do you want to delete.")) {
            var product_id = $(this).attr("alt");
            $("#delete_loading_product_"+ product_id).show();
            var form_data = {'product_id': product_id};
            $.ajax({
                async: true,
                type: "POST",
                url: "<?php echo $siteURL?>/modules/daynmic_product_management/index.php?page=ajax_actions&action=delete_product_stock_mapping",
                data: form_data,
                success: function(result) {
                    var resultObj = jQuery.parseJSON(result);
                    if (resultObj.status == "success") {
                        $("#delete_loading_product_"+product_id).hide();
                        $("#delete_loading_product_check"+product_id).show();
                        flag_for_table = 1;
                        post_out_t.draw(false);
                    }
                }
            });
        }
    });

    $("#myModalAjaxForproduct").on("click", ".close_button_product", function() {
        //alert(flag_for_table);
        if (flag_for_table == 1) {
            flag_for_table = 0;
            post_out_t.draw(true);
        }
    });
	$('.add_one_more_new_product').click(function() {			
		$('#new_product_div_to_clone').show();		
		var div_count = $('.initial_row_for_na_pro').last().attr("data-na_count");
		div_count++;
		var cloned_div = $('#new_product_div_to_clone').clone().addClass("initial_row_for_na_pro").attr("id","new_assest"+div_count).attr("data-na_count",div_count);		
		$('.new_assest_div_to_append_pro').before(cloned_div);	
		$('#new_assest'+div_count).children().find(".fa-spin").attr("id","make_load"+div_count);
		$('#new_assest'+div_count).find("#product").select2(); // assuming the dropdown has ID sku_no_1
			
		$('#new_product_div_to_clone').hide();			
	});

	$("#form2").on("click", ".delete_new_assest_pro",function() {
	    if(confirm('Are you sure! You want to delete')){		
			if($(this).attr("alt") != ""){
				var na_mapping_id = $(this).attr("alt");
				$('#load_new_assest_pro'+na_mapping_id).show();
				var form_data   = {'na_mapping_id':na_mapping_id};       
				$.ajax({
					async: true,
					type: "POST",
					url: site_url+"/modules/daynmic_product_management/index.php?page=ajax_actions&action=delete_department_mapping",
					data: form_data,
					success: function(result){    
						var resultObj = jQuery.parseJSON(result); 
						if(resultObj.status == "success"){
							$('#status_update_done_pro'+na_mapping_id).show();
							$('#load_new_assest_pro'+na_mapping_id).hide();
							
							setTimeout(function() {
								$('#status_update_done_pro'+na_mapping_id).hide();
								$('#new_assest'+na_mapping_id).remove();
								//location.reload();
							},1000);
						}
					}
				});
			}else{
				$(this).parent().parent().parent().remove();
			}
		}
	});
    /******************************* End Post Out By Ajax and JSON *************************/
});

</script>