<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;
}

#overflow_div {
    max-height: 600px;
    overflow-y: auto;
}
</style>
<!---------- Post Out ---------------->
<section class="content " >
	<div class="container-fluid ">
		<div class="row">
			<div class="col-12 "> 
				<div id="inventory_div" class="card">
					<div class="card-header card-white card-outline rounded">
						<h3 class="card-title">Inventory</h3>
						<div class="card-tools">
							<div class="input-group input-group-sm" style="">
							  <?
							    $query1 = "SELECT * FROM  inventory where item_id= '".$_REQUEST['id']."' ";
								$rs1 = mysqli_query($conn,$query1);
								if (mysqli_num_rows($rs1) > 0){?>
								
								<?}else{?>
									<a href="" data-toggle="modal" data-backdrop="static"
                                    data-target="#myModalAjaxForinventory" class="btn btn-primary add_new_inventory"
                                    style="float:right;">Add Inventory </a>
								<?}?>
							</div>
						</div>
					</div>
                    <div class="table-responsive ModelfixTableHead" style="height: auto;">
                        <div class="scrollbar-default " id="" style="overflow-x: hidden;">
                            <!-- Start  records header -->
                            <table id="inventory_table" class="table table-bordered table-striped">
                                <thead style="position:sticky">
                                    <tr>
                                        <th style="width:525px;">Quantity In Stock</th>
                                        <th style="width:525px;">Minimum Stock</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="myModalAjaxForinventory" 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="myModalLabelAjaxForinventory">Inventory </h4>
                        </div>
                        <div class="col-lg-4">
                            <button type="button" class="close close_button_inventory" 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 inventory_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">
                                <div class="box-body">
                                    <form action="" method="post" name="add_form_inventory" id="add_form_inventory">
                                          <div class='row'> 
											<div class='col-lg-6'>  
												<label class="control-label" for="quantity_in_stock">Quantity In Stock<em></em>*</label>
												<div>
													<input type="number" id="quantity_in_stock" name="quantity_in_stock" class="form-control" placeholder="Quantity In Stock" required>
												</div>
											</div>

											<div class='col-lg-6'>  
												<label class="control-label" for="quantity_allocated">Quantity Allocated<em></em></label>
												<div>
													<input type="number" id="quantity_allocated" name="quantity_allocated" class="form-control" placeholder="Quantity Allocated">
												</div>
											</div>

											<div class='col-lg-6'>  
												<label class="control-label" for="minimum_stock">Minimum Stock<em></em></label>
												<div>
													<input type="number" id="minimum_stock" name="minimum_stock" class="form-control" placeholder="Minimum Stock">
												</div>
											</div>

											<div class='col-lg-6'>  
												<label class="control-label" for="maximum_stock">Maximum Stock<em></em></label>
												<div>
													<input type="number" id="maximum_stock" name="maximum_stock" class="form-control" placeholder="Maximum Stock">
												</div>
											</div>

											<div class='col-lg-6 hide'>  
												<label class="control-label" for="minimum_ebq">Minimum EBQ<em></em></label>
												<div>
													<input type="number" id="minimum_ebq" name="minimum_ebq" class="form-control" placeholder="Minimum EBQ" >
												</div>
											</div>

											<div class='col-lg-6 hide'>  
												<label class="control-label" for="maximum_ebq">Maximum EBQ<em></em></label>
												<div>
													<input type="number" id="maximum_ebq" name="maximum_ebq" class="form-control" placeholder="Maximum EBQ" >
												</div>
											</div>

											<div class='col-lg-6 hide'>  
												<label class="control-label" for="standard_cost_ebq">Standard Cost EBQ<em></em></label>
												<div>
													<input type="number" step="0.01" id="standard_cost_ebq" name="standard_cost_ebq" class="form-control" placeholder="Standard Cost EBQ">
												</div>
											</div>

											<div class='col-lg-6 hide'>  
												<label class="control-label" for="default_workshop">Default Workshop<em></em></label>
												<div>
													<select id="default_workshop" name="default_workshop" class="form-control">
														<option value="">Select</option>
														<!-- Add options here -->
													</select>
												</div>
											</div>

											<div class='col-lg-6 hide'>  
												<label class="control-label" for="default_receipt_location">Default Receipt Location<em></em></label>
												<div>
													<select id="default_receipt_location" name="default_receipt_location" class="form-control">
														<option value="">Select</option>
														<!-- Add options here -->
													</select>
												</div>
											</div>

											<div class='col-lg-6 hide'>  
												<label class="control-label" for="default_issue_location">Default Issue Location<em></em></label>
												<div>
													<select id="default_issue_location" name="default_issue_location" class="form-control">
														<option value="">Select</option>
														<!-- Add options here -->
													</select>
												</div>
											</div>

										  </div>
                                        <div style="clear:both;margin-top:13px;"></div>
                                        <div class="col-lg-12" style="margin-top:13px;">
                                            <input type="hidden" id="inventory_id" name="id" value="">
                                            <input type="hidden" id="item_id" name="item_id" value="<?=$_REQUEST['id']?>">
                                            <input type="hidden" id="page_action_inventory" name="page_action_inventory" value="add">
                                            <button type="submit" name="submit_form_inventory" id="submit_form_inventory" class="btn btn-primary">Submit</button>
                                            <i class="fas fa-sync-alt fa-spin" style="display:none;" id="page_load_div_for_inventory"></i>
                                            <i class="fa fa-check" id="inventory_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_inventory" data-dismiss="modal">Close</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<script type="text/javascript">
var flag_for_table = 0;
$(function() {
	
    $("#inventory_div").on("click", ".add_new_inventory", function() {
        flag_for_table = 0;
        $("#add_form_inventory")[0].reset();
		$("#myModalAjaxForinventory").children().find("#inventory").val('').trigger("change");
        $("#myModalLabelAjaxForinventory").html("Add Inventory");
        $("#page_action_inventory").val("add");
        $("#submit_form_inventory").html("Submit");
    });
	$(document).on('submit', 'form#add_form_inventory', function(e) {
		var inventory_done = $(this).find('#inventory_done');
		inventory_done.hide(); 
		var page_load_div_for_inventory = $(this).find('#page_load_div_for_inventory');
		page_load_div_for_inventory.show();
		var submit_form_inventory = $(this).find("#submit_form_inventory");
		submit_form_inventory.attr("disabled", true);
		var add_form_inventory = $(this);

		e.preventDefault(); // prevent Default functionality

		var page_action_inventory = $("#page_action_inventory").val();
		var flag = 0;
		if (page_action_inventory == "add") {
			flag = 1;
		}

		var formData = new FormData(this);

		$.ajax({
			async: true,
			type: "POST",
			url: site_url + "/item_management/index?page=ajax_actions&action=add_item_inventory",
			data: formData,
			contentType: false,
			processData: false,
			success: function(result) {
				flag_for_table = 1;
				if (flag == 1) {
					add_form_inventory[0].reset(); // Reset all form data
					var inventory_add_update_message = "Inventory added successfully";
					setTimeout(function() {
						$(".close_button_inventory").trigger("click");
						$(".add_new_inventory").hide();
						
					}, 1000);
				} else if (flag == 0) {
					var inventory_add_update_message = "Inventory updated successfully";
					setTimeout(function() {
						$(".close_button_inventory").trigger("click");
					}, 1000);
				}
				inventory_done.show();
				page_load_div_for_inventory.hide();
				submit_form_inventory.attr("disabled", false);
				$(".inventory_add_update_message").show();
				$(".inventory_add_update_message").html(inventory_add_update_message);
				setTimeout(function() {
					inventory_done.hide();
					$(".inventory_add_update_message").hide();
				}, 3000);
			}
		});

	});

    /*********************************** Post Out By Ajax and JSON *************************/
	var item_id = "<?=$_REQUEST['id'];?>";
    $('#inventory_table').DataTable({
        "processing": true,
        "serverSide": true,
        "paging": false,
        "lengthChange": false,
        "searching": false,
        "ordering": false,
        "info": false,
        "autoWidth": false,
        "ajax": "<?php echo $siteURL?>/item_management/index?page=ajax_actions&action=ajax_inventory_fetch&item_id="+item_id,
        "columns": [
            {"data": "quantity_in_stock"},
			{"data": "minimum_stock"},
            {
                sortable: false,
                "render": function(data, type, full, meta) {
                    var buttonID = full.id;
                    return '<span style="cursor:pointer;" data-toggle="modal" data-backdrop="static"  data-target="#myModalAjaxForinventory"  class="inventory_edit" alt="'+buttonID+'"><i class="fa fa-fw fa-edit text-primary"></i> </span> ';
                }
            },
            {
                sortable: false,
                "render": function(data, type, full, meta) {
                    var buttonID = full.id;
                    return '<span style="cursor:pointer;" class="inventory_remove" alt="'+buttonID+'"><i class="fa fa-fw fa-trash text-danger"></i> <i class="fas fa-sync-alt fa-spin" style="display:none;" id="delete_loading_inventory_'+buttonID+'"></i><i class="fa fa-check text-success" style="display:none;" id="delete_loading_inventory_check'+buttonID+'"></i>';
                }
            }
        ]
    });
    $("#inventory_table").on("click", ".inventory_edit", function() {
        $("#myModalLabelAjaxForinventory").html("Edit Inventory <span style='color:Tomato'></span>");
        var id = $(this).attr("alt");
        var form_data = {'id': id};
        $.ajax({
            async: true,
            type: "POST",
            url: "<?php echo $siteURL?>/item_management/index?page=ajax_actions&action=get_edit_inventory",
            data: form_data,
            success: function(result) {
                var resultObj = jQuery.parseJSON(result);
                if (resultObj.status == "success") {
                    $.each(resultObj.data_array, function(data_array_key, data_array_val) {
                        if(data_array_key == "inventory"){
							$("#myModalAjaxForinventory").children().find("#inventory").val(data_array_val).trigger("change");
						}else{
							$("#myModalAjaxForinventory").children().find("#"+data_array_key).val(data_array_val);
						 }
						$("#page_action_inventory").val("update");
						$("#submit_form_inventory").html("Update");
						$("#inventory_id").val(id);
                        
                    });
                    
                   
                }
            }
        });
    });
    var post_out_t = $('#inventory_table').DataTable();
	
    $('#inventory_table tbody').on('click', '.inventory_remove', function() {
        if (confirm("Do you want to delete.")) {
            var inventory_id = $(this).attr("alt");
            $("#delete_loading_inventory_"+ inventory_id).show();
            var form_data = {'inventory_id': inventory_id};
            $.ajax({
                async: true,
                type: "POST",
                url: "<?php echo $siteURL?>/item_management/index?page=ajax_actions&action=delete_inventory_ajax",
                data: form_data,
                success: function(result) {
                    var resultObj = jQuery.parseJSON(result);
                    if (resultObj.status == "success") {
						$(".add_new_inventory").show();
                        $("#delete_loading_inventory_"+inventory_id).hide();
                        $("#delete_loading_inventory_check"+inventory_id).show();
                        flag_for_table = 1;
                        post_out_t.draw(false);
                    }
                }
            });
        }
    });

    $("#myModalAjaxForinventory").on("click", ".close_button_inventory", function() {
        //alert(flag_for_table);
        if (flag_for_table == 1) {
            flag_for_table = 0;
            post_out_t.draw(true);
        }
    });
    /******************************* End Post Out By Ajax and JSON *************************/
});

</script>