<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="notes_div" class="card">
                   <div class="card-header card-danger card-outline rounded">
                        <strong class="card-title">Notes</strong>
                        <div class="card-tools">
                            <div class="input-group input-group-sm" style="">
                                <a href="" data-toggle="modal" data-backdrop="static" data-target="#myModalAjaxForNotes" class="btn btn-primary add_new_note" style="float:right;">Add Notes</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="notes_table" class="table table-bordered table-striped">
                                <thead style="position:sticky">
                                    <tr>
                                        <th style="width:525px;">Notes</th>
                                        <th style="width:525px;">Raised By</th>
                                        <th style="width:525px;">Date And Time</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="myModalAjaxForNotes" 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="myModalLabelAjaxForNotes">Notes </h4>
                        </div>
                        <div class="col-lg-4">
                            <button type="button" class="close close_button_notes" 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 notes_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_notes" id="add_form_notes">
										<div class="col-lg-12">
                                            <label for="Note" class="control-label">Notes<em>*</em></label>
                                            <div class="">
												<textarea class="form-control" id="note_text" name="note_text" rows="3" placeholder="Note" required><?php echo stripslashes($note_text);?></textarea>
                                            </div>
                                        </div>
                                        <div style="clear:both;margin-top:13px;"></div>
                                        <div class="col-lg-12" style="margin-top:13px;">
                                            <input type="hidden" id="notes_id" name="id" value="">
                                            <input type="hidden" id="" name="job_id" value="<?=$_REQUEST['id']?>">
                                            <input type="hidden" id="page_action_notes" name="page_action_notes" value="add">
                                            <button type="submit" name="submit_form_notes" id="submit_form_notes" class="btn btn-primary">Submit</button>
                                            <i class="fas fa-sync-alt fa-spin" style="display:none;" id="page_load_div_for_notes"></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_notes" data-dismiss="modal">Close</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<script type="text/javascript">
var flag_for_table = 0;
$(function() {
    $("#notes_div").on("click", ".add_new_note", function() {
        flag_for_table = 0;
        $("#add_form_notes")[0].reset();
        $("#myModalLabelAjaxForNotes").html("Notes");
        $("#page_action_notes").val("add");
        $("#submit_form_notes").html("Add");
    });
	
	$(document).on('submit', 'form#add_form_notes', function(e) {
    var notes_done = $(this).find('#notes_done');
    notes_done.hide();
    var page_load_div_for_notes = $(this).find('#page_load_div_for_notes');
    page_load_div_for_notes.show();
    var submit_form_notes = $(this).find("#submit_form_notes");
    submit_form_notes.attr("disabled", true);
    var add_form_notes = $(this);

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

    var form_data = $('#add_form_notes').serialize();
    $.ajax({
        async: true,
        type: "POST",
        url: site_url+"/modules/enquiry_management/index.php?page=ajax_actions&action=add_job_notes",
        data: form_data,
        success: function(result) {
            flag_for_table = 1;
            //alert(flag_for_table);
            if (flag == 1) {
                add_form_notes[0].reset(); // Reset all form data
                var notes_add_update_message = "Notes added successfully";
                setTimeout(function() {
                    $(".close_button_notes").trigger("click");
                }, 1000);
            } else if (flag == 0) {
                var notes_add_update_message = "Notes updated successfully";
                setTimeout(function() {
                    $(".close_button_notes").trigger("click");
                }, 1000);
            }
            notes_done.show();
            page_load_div_for_notes.hide();
            submit_form_notes.attr("disabled", false);
            $(".notes_add_update_message").show();
            $(".notes_add_update_message").html(notes_add_update_message);
            setTimeout(function() {
                notes_done.hide();
                $(".notes_add_update_message").hide();
            }, 3000);
        }
    });

	});
    /*********************************** Post Out By Ajax and JSON *************************/
	var job_id = "<?=$_REQUEST['id'];?>";
    $('#notes_table').DataTable({
        "processing": true,
        "serverSide": true,
        "paging": false,
        "lengthChange": false,
        "searching": false,
        "ordering": false,
        "info": false,
        "autoWidth": false,
        "ajax": "<?php echo $siteURL?>/modules/enquiry_management/index.php?page=ajax_actions&action=ajax_job_notes_fetch&job_id="+job_id,
        "columns": [
            { "data": "note_text"},
            { "data": "created_by"},
            { "data": "created_on"},
            {
                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="#myModalAjaxForNotes" class="notes_edit" 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="notes_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_notes_'+buttonID+'"></i><i class="fa fa-check text-success" style="display:none;" id="delete_notes_done'+buttonID+'"></i>';
                }
            }
        ]
    });
    $("#notes_table").on("click", ".notes_edit", function() {
        $("#myModalLabelAjaxForNotes").html("Edit Notes <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/enquiry_management/index.php?page=ajax_actions&action=get_edit_job_notes",
            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 == "job_id"){
							$("#myModalAjaxForNotes").children().find("#job_id").val(data_array_val);
						}else{
                            $("#myModalAjaxForNotes").children().find("#"+data_array_key).val(data_array_val);
                        }
                    });
                    $("#notes_id").val(id);
                    $("#page_action_notes").val("update");
                    $("#submit_form_notes").html("Update");
                }
            }
        });
    });
    var post_out_t = $('#notes_table').DataTable();
	
    $('#notes_table tbody').on('click', '.notes_remove', function() {
        if (confirm("Do you want to delete.")) {
            var notes_id = $(this).attr("alt");
            $("#delete_loading_notes_"+notes_id).show();
            var form_data = {'notes_id': notes_id};
            $.ajax({
                async: true,
                type: "POST",
                url: "<?php echo $siteURL?>/modules/enquiry_management/index.php?page=ajax_actions&action=delete_job_notes",
                data: form_data,
                success: function(result) {
                    var resultObj = jQuery.parseJSON(result);
                    if (resultObj.status == "success") {
                        $("#delete_loading_notes_"+notes_id).hide();
                        $("#delete_notes_done"+notes_id).show();
                        flag_for_table = 1;
                        post_out_t.draw(false);
                    }
                }
            });
        }
    });

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