@php
	$tasks = \App\Models\Task::where('user_id',auth()->user()->id);
	$tasks_completed = \App\Models\Task::where('user_id', auth()->user()->id)->where('status', 'completed')->count();
@endphp
<!-- begin widget-todolist-header -->
<div class="widget-todolist-header">
	<div class="widget-todolist-header-left">
		<h4 class="widget-todolist-header-title">{{ucwords(auth()->user()->first_name.' '.auth()->user()->last_name)}} To Do List</h4>
	</div>
	<div class="widget-todolist-header-right">
		<div class="widget-todolist-header-total"><span>{{$tasks_completed}}</span><small>Done</small></div>
	</div>
</div>
<!-- end widget-todolist-header -->
<!-- begin widget-todolist-body -->
<div class="widget-todolist-body">
	<div style="max-height: 500px;overflow: auto;padding:5px">
		@if($tasks->exists())
			@foreach($tasks as $key => $task)
				<!-- begin widget-todolist-item -->
				@if($task->status == 'completed')
					<div class="widget-todolist-item task_text_line_through" data-id="{{$task->id}}">
				@else
					<div class="widget-todolist-item" data-id="{{$task->id}}">
				@endif
					<div class="widget-todolist-input">
						<div class="checkbox checkbox-css">
							@if($task->status == 'completed')
								<input type="checkbox" id="widget_todolist_{{$task->id}}" class="task_status" checked data-id="{{$task->id}}" />
							@else
								<input type="checkbox" id="widget_todolist_{{$task->id}}" class="task_status" data-id="{{$task->id}}" />
							@endif
							<label for="widget_todolist_{{$task->id}}" class="p-l-15"></label>
						</div>
					</div>
					<div class="widget-todolist-content">
						<h4 class="widget-todolist-title">{{$task->title}}</h4>
						<p class="widget-todolist-desc"> {{ date('h:i a, d/m/yy', $task->created_at)}}</p>
					</div>
					<div class="widget-todolist-icon">
						<a href="javascript:void(0);" class="delete_task"><i class="fa fa-trash-alt"></i></a>
					</div>
				</div>
				<!-- end widget-todolist-item -->
			@endforeach
		@else
			<div class="alert alert-info">
				<p class="text-center"><i class="fa fa-info-circle"></i>  No tasks created yet.</p>
			</div>
		@endif
	</div>
	<!-- end widget-todolist-item -->
	<!-- begin widget-todolist-item -->
	<div class="widget-todolist-item">
		<div class="panel-footer text-right">
			<a href="#modal-dialog" class="btn btn-white btn-sm" data-toggle="modal"><i class="fa fa-plus text-muted"></i> Create</a>
		</div>
	</div>
	<div class="panel-footer text-center">
		<a href="{{url('admin/main/show_objects/task')}}" class="text-inverse ">View All</a>
	</div>
	<!-- end widget-todolist-item -->
</div>
<!-- end widget-todolist-body -->

<!-- #modal-dialog -->
<div class="modal fade" id="modal-dialog">
	<div class="modal-dialog" style="max-width: 70%;">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title">Add New Task</h4>
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			</div>
			<div class="modal-body">
				<form class="form-horizontal form-bordered task_form" enctype="multipart/form-data" action="{{url('admin/main/modify_object/task/-1/true')}}" method="post" data-parsley-validate="true">
					<div class="form-group row">
						<label class="col-md-3 col-form-label">{{__('admin.task_name')}}</label>
						<div class="col-md-9">
							<input class="form-control" type="text" name="title" placeholder="{{__('admin.task_name')}}" data-parsley-required="true" value="">
						</div>
					</div>

					<div class="form-group row">
						<label class="col-md-3 col-form-label">{{__('admin.description')}}</label>
						<div class="col-md-9">
							<textarea class="tiny-mce-task hidden" name="text" rows="20"> </textarea>
						</div>
					</div>

					<div class="form-group row m-b-0">
						<label class="col-md-3 col-sm-3 col-form-label">&nbsp;</label>
						<div class="col-md-9 col-sm-9">
							<button type="submit" class="suBtn btn btn-success" data-toggle="tooltip" data-placement="top" data-title="{{__('admin.submit_page_editor')}}">{{__('admin.submit')}}</button>
						</div>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<a href="javascript:;" class="btn btn-white" data-dismiss="modal">Close</a>
			</div>
		</div>
	</div>
</div>

<style type="text/css">
	.task_text_line_through {
		text-decoration: line-through;
	}
</style>

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

		$(".task_form").submit(function(e){
			$(this).parents('.modal').modal('hide');
			$(this).find('button[type="submit"]').attr('disabled', 'disabled');
		    e.preventDefault();
		    let data = $(this).serialize();
			$.post($(this).attr('action'), data, function(response){
				load_partial($('#task_list_container'));
			});
		});

		$(".task_status").change(function(e){
			var id = $(this).attr('data-id');
			var value = ''
			if ($(this).prop('checked')) {
				value = 'completed';
				$(this).parents('.widget-todolist-item').addClass('task_text_line_through');
			} else {
				value = 'pending';
				$(this).parents('.widget-todolist-item').removeClass('task_text_line_through');
			}
			$.post( site_root + 'admin/ajax/update_task_status', {id: id, value: value}, function(response){
				$('.widget-todolist-header-total span').html(response);
			});
		})

		$(".delete_task").click(function(e){
			e.preventDefault();
			var blok = $(this).parents('.widget-todolist-item');
			var id   = blok.attr('data-id');

			$.post( site_root + 'admin/ajax/delete_task', {id: id}, function(response){
				blok.slideUp('slow',function(){
					$(this).remove();
				});
				$('.widget-todolist-header-total span').html(response);
				if(response === '0')
					load_partial($('#task_list_container'));
			});
		})
	});
</script>