

<html>  
    <head>  
		<link rel="stylesheet" href="https://ccare.hasanhomesltd.com/alltasks/jquery-ui.css">
        <link rel="stylesheet" href="https://ccare.hasanhomesltd.com/alltasks/bootstrap.min.css" />
		<script src="https://ccare.hasanhomesltd.com/alltasks/jquery.min.js"></script>  
		<script src="https://ccare.hasanhomesltd.com/alltasks/jquery-ui.js"></script>
		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

    </head>  
    <body >  
    <!--<body style="width: 500px;">  -->
        <div class="container" >
			<!--<div align="right" style="margin-bottom:5px;">-->
			<!--<button type="button" name="add" id="add" class="btn btn-success btn-lg">Add</button>-->
			<!--</div>-->
			<div class="table-responsive" id="user_data" style="overflow:scroll; width:600px; height: 400px;">
				
			</div>
			
		</div>
		
		<!--<div id="user_dialog" title="Add Data">-->
		<!--	<form method="post" id="user_form">-->
		<!--	    <div class="form-group">-->
		<!--			<input type="hidden" name="employee_id" id="all_employee" value="1" />-->
		<!--		</div>-->

		<!--		<div class="form-group">-->
		<!--			<label>Job Description</label>					-->
		<!--			<textarea class="form-control" name="details" id="details"></textarea>-->
		<!--			<span id="error_details" class="text-danger"></span>-->
		<!--		</div>-->

		<!--		<input type="hidden" name="priority" id="priority" value="first" />-->
		<!--		<div class="form-group">-->
		<!--			<input type="hidden" name="action" id="action" value="insert" />-->
		<!--			<input type="hidden" name="hidden_id" id="hidden_id" />-->
		<!--			<input type="submit" name="form_action" id="form_action" class="btn btn-info" value="Insert" />-->
		<!--		</div>-->
		<!--	</form>-->
		<!--</div>-->
		
		<form method="post" id="user_form" style="width:400px!important;">
			    <div class="form-group">
					<input type="hidden" name="employee_id" id="all_employee" value="1234" />
				</div>
				<!--<div class="form-group">-->
				<!--	<label>Enter First Name</label>-->
				<!--	<div id="all_employee"></div>-->
				<!--		<script>  -->
				<!--		$(document).ready(function(){  -->

				<!--			load_data();-->
						    
				<!--			function load_data()-->
				<!--			{-->
				<!--				$.ajax({-->
				<!--					url:"fetch_employee.php",-->
				<!--					method:"POST",-->
				<!--					success:function(data)-->
				<!--					{-->
				<!--						$('#all_employee').html(data);-->
				<!--					}-->
				<!--				});-->
				<!--			}-->
							
				<!--		});  -->
				<!--		</script>-->
				<!--	<span id="employee_name" class="text-danger"></span>-->
				<!--</div>-->
				<div class="form-group">
					<label>Add Work</label>					
					<textarea style="height: 50px!important" class="form-control" name="details" id="details"></textarea>
					<span id="error_details" class="text-danger"></span>
				</div>
				<!--<div class="form-group">-->
				<!--	<label>Priority (*)</label>-->
				<!--	<input type="text" name="priority" id="priority" class="form-control" />-->
				<!--	<span id="error_priority" class="text-danger"></span>-->
				<!--</div>-->
				<?php $dt = new DateTime();
                $tz = new DateTimeZone('Asia/Dhaka'); 
                $dt->setTimezone($tz);
                $timenow= $dt->format('Y-m-d');
                ?>
				<input class="form-control" type="date" name="created_at" id="created_at" value="<?php echo $timenow; ?>" required/><br>
				<input type="hidden" name="priority" id="priority" value="first" />
				<div class="form-group">
					<input type="hidden" name="action" id="action" value="insert" />
					<input type="hidden" name="hidden_id" id="hidden_id" />
					<input type="submit" name="form_action" id="form_action" class="btn btn-info after_submit" value="Insert" />
				</div>
			</form>
			
		
		<div id="action_alert" title="Action">
			
		</div>
		
		<div id="delete_confirmation" title="Confirmation">
		<p>Are you sure you want to Delete this data?</p>
		</div>
		
		<div id="start_confirmation" title="Confirmation">
		<p>Are you sure you want to start this Work?</p>
		</div>
		<div id="stop_confirmation" title="Confirmation">
		<p>Are you sure you want to Mark as done?</p>
		</div>
		
    </body>  
</html>  




<script>  
$(document).ready(function(){  

	load_data();
    
	function load_data()
	{
		$.ajax({
			url:"fetch.php",
			method:"POST",
			success:function(data)
			{
				$('#user_data').html(data);
			}
		});
	}
	
	$("#user_dialog").dialog({
		autoOpen:false,
		width:400
	});
	
	$('#add').click(function(){
		$('#user_dialog').attr('title', 'Add Data');
		$('#action').val('insert');
		$('#form_action').val('Insert');
		$('#user_form')[0].reset();
		$('#form_action').attr('disabled', false);
		$("#user_dialog").dialog('open');
	});
	
	$('#user_form').on('submit', function(event){
		event.preventDefault();
		var error_details = '';
		var error_priority = '';
		if($('#details').val() == '')
		{
			error_details = 'First Name is required';
			$('#error_details').text(error_details);
			$('#details').css('border-color', '#cc0000');
		}
		else
		{
			error_details = '';
			$('#error_details').text(error_details);
			$('#details').css('border-color', '');
		}
		if($('#priority').val() == '')
		{
			error_priority = 'Last Name is required';
			$('#error_priority').text(error_priority);
			$('#priority').css('border-color', '#cc0000');
		}
		else
		{
			error_priority = '';
			$('#error_priority').text(error_priority);
			$('#priority').css('border-color', '');
		}
		
		if(error_details != '' || error_priority != '')
		{
			return false;
		}
		else
		{
			$('#form_action').attr('disabled', 'disabled');
			var form_data = $(this).serialize();
			$.ajax({
				url:"action.php",
				method:"POST",
				data:form_data,
				success:function(data)
				{
					//$('#user_dialog').dialog('close');
					//$('#action_alert').html(data);
					//$('#action_alert').dialog('open');
                    $('#user_form')[0].reset();

					load_data();
					$('#form_action').attr('disabled', false);
				}
			});
		}
		
	});

	$('#action_alert').dialog({
		autoOpen:false
	});
		$(document).on('click', '.edit', function(){
		var id = $(this).attr('id');
		var action = 'fetch_single';
		$.ajax({
			url:"action.php",
			method:"POST",
			data:{id:id, action:action},
			dataType:"json",
			success:function(data)
			{
				$('#employee_id').val(data.employee_id);
				$('#employee').val(data.employee);
				$('#details').val(data.details);
				$('#priority').val(data.priority);
				$('#created_at').val(data.created_at);
				$('#user_dialog').attr('title', 'Edit Data');
				$('#action').val('update');
				$('#hidden_id').val(id);
				$('#form_action').val('Update');
				$('#user_dialog').dialog('open');
			}
		});
	});
	
	$('#action_alert').dialog({
		autoOpen:false
	});
		$(document).on('click', '.after_submit', function(){
		var id = $(this).attr('id');
		var action = 'fetch_single';
		$.ajax({
			url:"action.php",
			method:"POST",
			data:{id:id, action:action},
			dataType:"json",
			success:function(data)
			{
				$('#user_dialog').attr('title', 'Add Data');
        		$('#action').val('insert');
        		$('#form_action').val('Insert');
        		$('#user_form')[0].reset();
        		$('#form_action').attr('disabled', false);
        		$("#user_dialog").dialog('open');
			}
		});
	});
	
// 	$('#form_action').click(function(){
// 		//$('#user_dialog').attr('title', 'Add Data');
// 		$('#action').val('insert');
// 		$('#form_action').val('Insert');
// 		$('#user_form')[0].reset();
// 		$('#form_action').attr('disabled', false);
// 		//$("#user_dialog").dialog('open');
// 	});
	
	function form_reset() {
                $('#action').val('insert');
		        $('#form_action').val('Insert');
		        $('#user_form')[0].reset();
		        $('#form_action').attr('disabled', false);
            }
	
	$('#action_alert').dialog({
		autoOpen:false
	});
		$(document).on('click', '.edit', function(){
		var id = $(this).attr('id');
		var action = 'fetch_single';
		$.ajax({
			url:"action.php",
			method:"POST",
			data:{id:id, action:action},
			dataType:"json",
			success:function(data)
			{
				$('#employee_id').val(data.employee_id);
				$('#employee').val(data.employee);
				$('#details').val(data.details);
				$('#priority').val(data.priority);
				$('#user_dialog').attr('title', 'Edit Data');
				$('#action').val('update');
				$('#hidden_id').val(id);
				$('#form_action').val('Update');
				$('#user_dialog').dialog('open');
			}
		});
	});
	

	$('#start_confirmation').dialog({
		autoOpen:false,
		modal: true,
		buttons:{
			Ok : function(){
				var id = $(this).data('id');
				var action = 'started';
				$.ajax({
					url:"action.php",
					method:"POST",
					data:{id:id, action:action},
					success:function(data)
					{
						$('#start_confirmation').dialog('close');
						$('#action_alert').html(data);
						$('#action_alert').dialog('open');
						load_data();
					}
				});
			},
			Cancel : function(){
				$(this).dialog('close');
			}
		}	
	});
	$(document).on('click', '.start', function(){
		var id = $(this).attr("id");
		$('#start_confirmation').data('id', id).dialog('open');
	});

	$('#stop_confirmation').dialog({
		autoOpen:false,
		modal: true,
		buttons:{
			Ok : function(){
				var id = $(this).data('id');
				var action = 'stopped';
				$.ajax({
					url:"action.php",
					method:"POST",
					data:{id:id, action:action},
					success:function(data)
					{
						//$('#stop_confirmation').dialog('close');
						//$('#action_alert').html(data);
						//$('#action_alert').dialog('open');
						    $('#stop_confirmation').dialog('close');
						load_data();
					}
				});
			},
			Cancel : function(){
				$(this).dialog('close');
			}
		}	
	});
	$(document).on('click', '.stop', function(){
		var id = $(this).attr("id");
		$('#stop_confirmation').data('id', id).dialog('open');
	});
	
	$('#delete_confirmation').dialog({
		autoOpen:false,
		modal: true,
		buttons:{
			Ok : function(){
				var id = $(this).data('id');
				var action = 'delete';
				$.ajax({
					url:"action.php",
					method:"POST",
					data:{id:id, action:action},
					success:function(data)
					{
						//$('#delete_confirmation').dialog('close');
						//$('#action_alert').html(data);
						//$('#action_alert').dialog('open');
						$('#delete_confirmation').dialog('close');
						load_data();
					}
				});
			},
			Cancel : function(){
				$(this).dialog('close');
			}
		}	
	});
	
	$(document).on('click', '.delete', function(){
		var id = $(this).attr("id");
		$('#delete_confirmation').data('id', id).dialog('open');
	});
	
});  
</script>