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

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

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

.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-primary card-outline rounded">
                        <strong class="card-title"> <div class=""style="">
									<label for="Postcode" class="control-label">&nbsp;</label>
							<button type="button" class="btn btn-default" id="prev_day"><< Prev day</button>
							<button type="button" class="btn btn-default" id="today">Today</button>		
							<button type="button" class="btn btn-default" id="next_day">Next Day >></button>
                            </div></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 Schedular</a>
							
                            </div>
                        </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">Job</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" enctype="multipart/form-data">
									<div class="row">
										<div class="col-12">
										<label for="Job Number" class="control-label">Job</label>
										<div>
											<? //$gsi->getEnqJobNumberList("job_id",$job_id,"100%",false,"form-control select2",""); ?>
										</div>
										<i class="fas fa-sync-alt fa-spin" style="display:none;" id="job_loading"></i>
									</div> 
								
									<div class="col-12">
										<label class="control-label" for="Job Name">Job Name</label> 
										<input type="text" id="job_name" name="job_name" class="form-control" value="<?php echo $job_name;?>" placeholder="Job Name">
									</div>
									<div class="col-12"> 
									<label class="control-label" for="Date">Date</label> 
									<input type="text" class="form-control datepicker" id="date" name="date" value="<?php echo (isset($date) && $date !="") ? utility::getFormatedDate($date) : " ";?>" placeholder="DD-MM-YYYY" autocomplete="off">
									
								</div>
									<!--<div class="form-group"> 
										<label class="control-label" for="PO need">PO need</label> 
									<div class=""> 
										<input type="text" id="po_need" name="po_need" class="form-control" value="<?php echo $po_need;?>" placeholder="PO need" >
									</div> 
									</div>-->
									<!--<div class="col-6">
										<label for="Description" class="control-label">Details</label>
										<? //echo Keycode::getKeycodeListValue("details", $details, $width = "100%", "Please Select", "id", "code", "job_details","","form-control",false,""); ?>
										
									</div>-->
									<div class="col-12">
										<label class="control-label" for="Details">Details</label> 
										<div> 
											<? //echo Keycode::getKeycodeListValue("details", $details, $width = "100%", "Please Select Details", "id", "code", "job_details","","form-control select2",false,""); ?>
											<div id="new_details_link" style="color:#367FA9;cursor:pointer;">New Details</div>
										</div> 
									</div>
									
										<div class="col-12"> 
										<div id="new_sector_div" style="display:none;">
											<label class="control-label" for="New Details">New Details</label> 
											<input type="text" id="new_details" name="new_details" class="form-control" value="" placeholder="New Details"> 
										</div>
									</div>
									
									
								
									<div class="col-12">
										<label class="control-label" for="Hours">Hours</label> 
										<input type="text" id="hours" name="hours" class="form-control" value="<?php echo $hours;?>" placeholder="Hours">
									</div> 
									</div>
								
								<div class="col-12">
									<label class="control-label" for="Miles">Miles</label> 
									<input type="text" id="miles" name="miles" class="form-control" value="<?php echo $miles;?>" placeholder="Miles">
								</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="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("Schedular");
        $("#page_action_notes").val("add");
        $("#submit_form_notes").html("Add");
    });
	$("#new_details_link").click(function(){
		$("#new_sector_div").toggle();
	});
	$("#new_details_link").click(function(){
		$("#new_source_div").toggle();
	});
	$(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 formData = new FormData(this);

		$.ajax({
			async: true,
			type: "POST",
			url: site_url + "/modules/schedular_management/index.php?page=ajax_actions&action=add_job_notes",
			data: formData,
			contentType: false,
			processData: false,
			success: function(result) {
				flag_for_table = 1;
				if (flag == 1) {
					add_form_notes[0].reset(); // Reset all form data
					var notes_add_update_message = "schedular added successfully";
					setTimeout(function() {
						$(".close_button_notes").trigger("click");
					}, 1000);
				} else if (flag == 0) {
					var notes_add_update_message = "schedular 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);
			}
		});

	});
	
	$("#add_form_notes").on("change","#job_id",function(){
		var job_id = $(this).val();
		
		if(job_id != ""){
			$("#job_loading").show();
			var form_data   = {'job_id':job_id};
			$.ajax({
				async: true,
				type: "POST",
				url: site_url + "/modules/schedular_management/index.php?page=ajax_actions&action=getjob_id_by_job_name",
				data: form_data,
				success: function(result){  
					var resultObj = jQuery.parseJSON(result); 
					if(resultObj.status == "success"){
						$("#job_name").val(resultObj.address);
						$("#job_loading").hide();	
					}
				}
			});
		}
	});
	

    /*********************************** Post Out By Ajax and JSON *************************/
  
		
$(document).ready(function() {
    // Initialize currentDate with today's date
    var currentDate = new Date();

    // Initialize DataTable
    $('#notes_table').DataTable({
        "processing": true,
        "serverSide": true,
        "paging": false,
        "lengthChange": false,
        "searching": false,
        "ordering": false,
        "info": false,
        "autoWidth": false,
        "ajax": {
            "url": "<?php echo $siteURL?>/modules/schedular_management/index.php?page=ajax_actions&action=ajax_job_notes_fetch_1",
            
        },
        "columns": [
            { "data": "job_id" },
            { "data": "job_name" },
            { "data": "date" },
            { "data": "details" },
            { "data": "hours" },
            { "data": "miles" }
        ],
        "rowCallback": function( row, data ) {
            $(row).css('background-color', data.tr_bg_color);
        }
    });

    // Button click handlers
    $('#prev_day').on('click', function() {
        currentDate.setDate(currentDate.getDate() - 1); // Subtract 1 day
        updateTable(formatDate(currentDate)); // Update table with new date
    });

    $('#today').on('click', function() {
        currentDate = new Date(); // Reset to today's date
        updateTable(formatDate(currentDate)); // Update table with today's date
    });

    $('#next_day').on('click', function() {
        currentDate.setDate(currentDate.getDate() + 1); // Add 1 day
        updateTable(formatDate(currentDate)); // Update table with new date
    });

    // Format date as YYYY-MM-DD
    function formatDate(date) {
        var year = date.getFullYear();
        var month = String(date.getMonth() + 1).padStart(2, '0'); // January is 0!
        var day = String(date.getDate()).padStart(2, '0');
        return year + '-' + month + '-' + day;
    }

    // Function to update DataTable with new date
    function updateTable(date) {
        $('#notes_table').DataTable().ajax.url("<?php echo $siteURL?>/modules/schedular_management/index.php?page=ajax_actions&action=ajax_job_notes_fetch_1&date_=" + date).load();
    }
});
    /*  $("#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>