<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>
<!---------- Post Out ---------------->
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div id="parts_used_div" class="">
                    <div class="card-header ">
                        <strong class="card-title">Unit Of Measure</strong>
                        <div class="card-tools">
                            <div class="input-group input-group-sm" style="">
                                <a href="" data-toggle="modal" data-backdrop="static" data-target="#myModalAjaxForPartsUsed" class="btn btn-primary add_new_part_used" style="float:right;">Add Unit Of Measure</a>
                            </div>
                        </div>
                    </div>
                    <div class="table-responsive ModelfixTableHead" style="height: auto;">
                        <div class="" id="overflow_div">
                            <!-- Start  records header -->
                            <table id="part_used_table" class="table table-bordered table-striped">
                                <thead style="position:sticky">
                                    <tr>
                                        <th>Sales Unit</th>
                                        <th>Conversion Rate</th>
                                        <th>Purchase Unit</th>
                                        <th>Standard Unit</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="myModalAjaxForPartsUsed" 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="myModalLabelAjaxForPartsUsed">Unit Of Measure</h4>
                        </div>
                        <div class="col-lg-4">
                            <button type="button" class="close close_button_parts_used" 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 parts_used_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_parts_used" id="add_form_parts_used">
										<div class="col-lg-12">
                                             <label for="sales_unit">Sales Unit:</label>
                                            <div class="">
												  <input type="text" name="sales_unit" id="sales_unit" required class="form-control" value="<?=$sales_unit;?>"placeholder="Sales Unit">
                                            </div>
                                        </div>
										<div class="col-lg-12">
                                               <label for="conversion_rate">Conversion Rate:</label>
                                            <div class="">
												  <input type="text" name="conversion_rate" id="conversion_rate" class="form-control" value="<?=$conversion_rate;?>" placeholder="Conversion Rate">
                                            </div>
                                        </div>
										<div class="col-lg-12">
                                               <label for="conversion_rate">Purchase Unit:</label>
                                            <div class="">
												  <input type="text" name="purchase_unit" id="purchase_unit" class="form-control"  value="<?=$purchase_unit;?>" placeholder="Purchase Unit">
                                            </div>
                                        </div>
										<div class="col-lg-12">
                                                <label for="standard_unit">Standard Unit:</label>
                                            <div class="">
												  <input type="text" name="standard_unit" id="standard_unit" class="form-control"  value="<?=$standard_unit;?>" placeholder="Standard Unit">
                                            </div>
                                        </div>
                                        <div style="clear:both;margin-top:13px;"></div>
                                        <div class="col-lg-12" style="margin-top:13px;">
                                            <input type="hidden" id="extra_id" name="id" value="">
                                            <input type="hidden" id="" name="pro_id" value="<?=$_REQUEST['id']?>">
                                            <input type="hidden" id="page_action_part_used" name="page_action_part_used" value="add">
                                            <button type="submit" name="submit_form_parts_used" id="submit_form_parts_used" class="btn btn-primary">Submit</button>
                                            <i class="fas fa-sync-alt fa-spin" style="display:none;" id="page_load_div_for_parts_used"></i>
                                            <i class="fa fa-check" id="notes_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_parts_used" data-dismiss="modal">Close</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<script type="text/javascript">
var flag_for_table = 0;
$(function() {
    $("#parts_used_div").on("click", ".add_new_part_used", function() {
        flag_for_table = 0;
        $("#add_form_parts_used")[0].reset();
        $("#myModalLabelAjaxForPartsUsed").html("Unit Of Measure");
        $("#page_action_part_used").val("add");
        $("#submit_form_parts_used").html("Submit");
    });
	
	$(document).on('submit', 'form#add_form_parts_used', function(e) {
    var notes_done = $(this).find('#notes_done');
    notes_done.hide();
    var page_load_div_for_parts_used = $(this).find('#page_load_div_for_parts_used');
    page_load_div_for_parts_used.show();
    var submit_form_parts_used = $(this).find("#submit_form_parts_used");
    submit_form_parts_used.attr("disabled", true);
    var add_form_parts_used = $(this);

    e.preventDefault(); //prevent Default functionality
    var page_action_part_used = $("#page_action_part_used").val();
    var flag = 0;
    if (page_action_part_used == "add") {
        flag = 1;
    }

    var form_data = $('#add_form_parts_used').serialize();
    $.ajax({
        async: true,
        type: "POST",
        url: site_url+"/modules/daynmic_product_management/index.php?page=ajax_actions&action=add_job_parts_used",
        data: form_data,
        success: function(result) {
            flag_for_table = 1;
            //alert(flag_for_table);
            if (flag == 1) {
                add_form_parts_used[0].reset(); // Reset all form data
                var parts_used_add_update_message = "Unit Of Measure added successfully";
                setTimeout(function() {
                    $(".close_button_parts_used").trigger("click");
                }, 1000);
            } else if (flag == 0) {
                var parts_used_add_update_message = "Unit Of Measure updated successfully";
                setTimeout(function() {
                    $(".close_button_parts_used").trigger("click");
                }, 1000);
            }
            notes_done.show();
            page_load_div_for_parts_used.hide();
            submit_form_parts_used.attr("disabled", false);
            $(".parts_used_add_update_message").show();
            $(".parts_used_add_update_message").html(parts_used_add_update_message);
            setTimeout(function() {
                notes_done.hide();
                $(".parts_used_add_update_message").hide();
            }, 3000);
        }
    });

});
    /*********************************** Post Out By Ajax and JSON *************************/
	var pro_id = "<?=$_REQUEST['id'];?>";
    $('#part_used_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_job_parts_used_fetch&pro_id="+pro_id,
        "columns": [
            { "data": "sales_unit"},
            { "data": "conversion_rate"},
            { "data": "purchase_unit"},
            { "data": "standard_unit"},
            {
                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="#myModalAjaxForPartsUsed" class="part_used_edit" alt="'+buttonID+'"><i class="fa fa-edit" style="font-size:20px;"></i></span>';
                }
            },
            {
                sortable: false,
                "render": function(data, type, full, meta) {
                    var buttonID = full.id;
                    return '<span style="cursor:pointer;" class="part_used_remove" alt="'+buttonID+'"><i class="fa fa-trash text-danger" style="font-size:20px;"></i></span><i class="fas fa-sync-alt fa-spin" style="display:none;" id="delete_loading_part_used_'+buttonID+'"></i><i class="fa fa-check text-success" style="display:none;" id="delete_part_used_done'+buttonID+'"></i>';
                }
            }
        ]
    });
    $("#part_used_table").on("click", ".part_used_edit", function() {
        $("#myModalLabelAjaxForPartsUsed").html("Edit Parts Used <span style='color:Tomato'></span>");
        var id = $(this).attr("alt");
        var form_data = {'id': id};
        $.ajax({
            async: true,
            type: "POST",
            url: "<?php echo $siteURL?>/modules/daynmic_product_management/index.php?page=ajax_actions&action=get_edit_job_part_used",
            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 == "arolite_job_id"){
							$("#myModalAjaxForPartsUsed").children().find("#arolite_job_id").val(data_array_val);
						}else{
                            $("#myModalAjaxForPartsUsed").children().find("#"+data_array_key).val(data_array_val);
                        }
                    });
                    $("#extra_id").val(id);
                    $("#page_action_part_used").val("update");
                    $("#submit_form_parts_used").html("Update");
                }
            }
        });
    });
    var post_out_t = $('#part_used_table').DataTable();
	
    $('#part_used_table tbody').on('click', '.part_used_remove', function() {
        if (confirm("Do you want to delete.")) {
            var extra_id = $(this).attr("alt");
            $("#delete_loading_part_used_"+extra_id).show();
            var form_data = {'extra_id': extra_id};
            $.ajax({
                async: true,
                type: "POST",
                url: "<?php echo $siteURL?>/modules/daynmic_product_management/index.php?page=ajax_actions&action=delete_job_part_used",
                data: form_data,
                success: function(result) {
                    var resultObj = jQuery.parseJSON(result);
                    if (resultObj.status == "success") {
                        $("#delete_loading_part_used_"+extra_id).hide();
                        $("#delete_part_used_done"+extra_id).show();
                        flag_for_table = 1;
                        post_out_t.draw(false);
                    }
                }
            });
        }
    });

    $("#myModalAjaxForPartsUsed").on("click", ".close_button_parts_used", 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>