@extends('layouts.app')
@section('content')

    <!-- Page Content -->
    <div class="content container-fluid" style="padding: 2px;">    
      <!-- Page Header -->
      <div class="project-page-header">
        @include('project.project-menu')         
      </div>
      <!-- /Page Header -->            
          <div class="row">
            <div class="col-lg-12 col-xl-12">
              <!--  -->             
                <div class="fixed-header">
                  <div class="navbar">
                    <div class="float-left mr-auto">
                      <div class="add-task-btn-wrapper">
                         @if($module > 0)
                         @if( auth()->user()->role_id == 1 || auth()->user()->role_id == 2 || auth()->user()->role_id == 3 || auth()->user()->role_id == 4 )
                        <a href="javascript:;" class="btn btn-sm btn-success create_taskBtn"><i class="fa fa-plus"></i> Add Task</a>
                        @endif
                        @endif
                      </div>
                    </div>
                    <a class="task-chat profile-rightbar float-right" id="task_chat" href="#task_window"><i class="fa fa fa-comment"></i></a>
                    <ul class="nav float-right custom-menu">
                      <li class="nav-item dropdown dropdown-action">
                        <a href="" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-cog"></i></a>
                        <div class="dropdown-menu dropdown-menu-right">
                          <a class="dropdown-item" href="javascript:void(0)">All Tasks</a>
                          <!-- <a class="dropdown-item" href="javascript:void(0)">Pending Tasks</a>
                          <a class="dropdown-item" href="javascript:void(0)">Completed Tasks</a> -->
                          <a class="dropdown-item" href="/project/modules/{{Request::segment(3)}}">Modules</a>
                          
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
              <!--  -->
               @if($module > 0)
              <div class="project-task">                
                <div class="card flex-fill">
                  <!-- module -->
                  <div class="card-header">
                    <!-- <h5 class="card-title mb-0">User <small> (Module)</small></h5> -->
                  </div>                  
                  <table class="task-list-table table" width="100%">
                    <tr>
                    	<th width="45%">Task</th>
                      <th width="12%">Module</th>
                    	<th width="14%">Assigned to </th>
                    	<th width="8%">Due Date</th>
                    	<th width="8%">Status</th>
                      <th width="8%">Action</th>
                    </tr>
                    @if(count($task)>0)
                    @foreach($task as $item)
                    <tr class="">                     
                      <td width="">
                        <h4 style="margin-bottom: 0;"><a href="/task/view/{{$item->id}}">{{$item->name}}</a></h4>
                      </td>
                      <td width="">
                        {{$item->m_name}}
                      </td>
                      <td width=""> 
                        @if( $item->assigned_to !='')
                        <div class="avatar-box">
                            <div class="avatar avatar-xs">
                             <img src="{{Techsaga::getUserImage($item->assigned_to)}}" alt="">
                            </div>
                           </div> 
                        {{Techsaga::getFullName($item->assigned_to)}}
                        @else
	                        <span class="action-circle large assignTaskModalBtn" data="{{$item->id}}" title="Assign">
	                        	<i class="material-icons">person_add</i>
	                      	</span>
                        @endif
                      </td>
                      <td width="">{{date('d-m-Y',strtotime($item->end_date))}}</td>
                      <td width=""> 
                        
                          @if( $item->is_completed == 0)
                          
                          @if($item->task_status==0)
                            @if( strtotime($item->end_date) <  strtotime(date('Y-m-d')) )
                              <span style="color:red">Over due</span>
                            @endif
                          @endif
                            
                            @if($item->task_status==1)
                             <span class="text-warning text-bold" data="{{$item->id}}">Open</span>
                             <small class="block text-ellipsis">
                             <span>Started at: </span> <span class="text-muted"> {{date('d-m-Y h:i A',strtotime($item->started_at))}}  </span>
                           </small>
                            @endif

                        @endif

                        @if( $item->is_completed == 1 )
                        <span class="text-success">Completed</span>
                                                <small class="block text-ellipsis">
                          <span>Total hrs: </span> <span class="text-muted"> {{$res}} </span>
                        </small>
                        @endif

                      </td>
                      <td width="">

                      @if( $item->is_completed == 0 )

                        @if( auth()->user()->id == $item->assigned_to )

                          @if($item->task_status==0)
                          <button class="btn btn-sm btn-primary taskStartBtn" data="{{$item->id}}">Start now</button>
                          <!-- check if task is not started  -->                         
                          @endif                         

                          @if($item->task_status==1)
                          <button class="btn btn-sm btn-info doComplete" data="{{$item->id}}">Complete</button>
                          @endif

                        @endif
                        @endif

                         @if($item->is_completed !=1 || $item->task_status!=1 )                          
                          <!-- check if task is not started  -->
                          @if( auth()->user()->role_id == 1 || auth()->user()->id == $item->created_by) 
                          <a href="javascript:;" class="btn btn-sm btn-dark editTaskBtn" data="{{  base64_encode($item->id)}}">
                            <i class="fa fa-pencil"></i> Edit 
                          </a>
                          @endif
                          @endif

                      </td>
                    </tr>

                    @endforeach                    
                    @else
                    <tr><td colspan="6"><h3 class="text-center">You have not created a task.</h3></td></tr>
                    @endif

                  </table>                 

                </div>
              </div>
              <!--  -->
              @else
              <div class="fixed-header">
                <h3 class="text-center text-danger" style="padding: 10px 0 0 0">Module required, please add module first.</h3>
                <div class="col-md-12 text-center"> <a class="" href="/project/modules/{{Request::segment(3)}}">Add Module here.</a></div>
              </div>
              @endif
            </div>            
          </div>      
    </div>
    <!-- /Page Content -->

<!-- Create task Modal -->
<div id="create_task" class="modal custom-modal fade" role="dialog">
	<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">Create a task - <span class="taskProjectName"></span></h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<form method="post" id="addTaskForm" action="{{route('task/create')}}">
          @csrf
					<div class="row">						
						<div class="col-sm-6">
							<div class="form-group">
								<label>Project's Module</label>
								<select class="select module_id" name="module_id">
                  
								</select>
                <p style="margin-bottom: 2px;" class="text-danger" id="error-module_id"></p> 
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-sm-12">
							<div class="form-group">
								<label>Task Name</label>
								<input class="form-control " type="text" name="name">
                <p style="margin-bottom: 2px;" class="text-danger" id="error-name"></p> 
							</div>
						</div>										
					</div>
					<div class="form-group">
						<label>Description</label>
						<textarea rows="4" class="form-control summernote" name="description" placeholder="Enter your message here"></textarea>
            <p style="margin-bottom: 2px;" class="text-danger" id="error-description"></p> 
					</div>
					<div class="row">
						<div class="col-sm-4">
							<div class="form-group">
								<label>Start Date</label>
								<div class="cal-icon">
									<input class="form-control " id="from_date" name="start_date" type="text">
                  <p style="margin-bottom: 2px;" class="text-danger" id="error-start_date"></p> 
								</div>
							</div>
						</div>
						<div class="col-sm-4">
							<div class="form-group">
								<label>End Date</label>
								<div class="cal-icon">
									<input class="form-control " id="to_date" name="end_date" type="text">
                  <p style="margin-bottom: 2px;" class="text-danger" id="error-end_date"></p> 
								</div>
							</div>
						</div>
						<div class="col-sm-4">
							<div class="form-group">
								<label>Priority</label>
								<select class="select" name="priority">
									<option value="normal">Normal</option>
									<option value="heigh">High</option>													
									<option value="low">Low</option>
								</select>
							</div>
						</div>
					</div>
					
					<div class="row">
						<div class="col-sm-6">
							<div class="form-group">
								<label>Assign to </label>
								<select class="select" name="assign_to">
                  
                </select>								
                <small class="text-muted">(You can assign later.)</small>
							</div>
						</div>						
					</div>									
				<!-- 	<div class="form-group">
						<label>Upload Files</label>
						<input class="form-control" type="file">
					</div> -->
					<div class="submit-section">
            <input type="hidden" name="project_id" value="{{Request::segment(3)}}">
						<button class="btn btn-primary submit-btn">Submit</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
<!-- /Create task Modal -->           

<!-- Create task Modal -->
<div id="editTaskModal" class="modal custom-modal fade" role="dialog">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Edit task - <span class="taskName"></span></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form method="post" id="editTaskForm" action="{{route('task/update')}}">
          @csrf
          <div class="row">           
            <div class="col-sm-6">
              <div class="form-group">
                <label>Project's Module</label>
                <select class="select module_id" id="module_id2" name="module_id">
                  
                </select>
                <p style="margin-bottom: 2px;" class="text-danger" id="up-error-module_id"></p> 
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-12">
              <div class="form-group">
                <label>Task Name</label>
                <input class="form-control name" type="text" name="name">
                <p style="margin-bottom: 2px;" class="text-danger" id="up-error-name"></p> 
              </div>
            </div>                    
          </div>
          <div class="form-group">
            <label>Description</label>
            <textarea rows="4" class="form-control summernote description" name="description" placeholder="Enter your message here"></textarea>
            <p style="margin-bottom: 2px;" class="text-danger" id="up-error-description"></p> 
          </div>
          <div class="row">
            <div class="col-sm-4">
              <div class="form-group">
                <label>Start Date</label>
                <div class="cal-icon">
                  <input class="form-control start_date" id="from_date" name="start_date" type="text">
                  <p style="margin-bottom: 2px;" class="text-danger" id="up-error-start_date"></p> 
                </div>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="form-group">
                <label>End Date</label>
                <div class="cal-icon">
                  <input class="form-control end_date" id="to_date" name="end_date" type="text">
                  <p style="margin-bottom: 2px;" class="text-danger" id="up-error-end_date"></p> 
                </div>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="form-group">
                <label>Priority</label>
                <select class="select priority" name="priority">
                  <option value="normal">Normal</option>
                  <option value="heigh">High</option>                         
                  <option value="low">Low</option>
                </select>
              </div>
            </div>
          </div>
                             
        <!--  <div class="form-group">
            <label>Upload Files</label>
            <input class="form-control" type="file">
          </div> -->
          <div class="submit-section">
            <input type="hidden" id="input_task_id" name="task_id" value="">
            <button class="btn btn-primary submit-btn">Submit</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<!-- /Create task Modal -->           


<!-- Invite client Modal -->
<div class="modal custom-modal fade" id="assignTaskModal" role="dialog">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">
              <form method="post" id="assignTaskForm">
                @csrf
                <div class="form-header">
                <h3>Assign to an user </h3>                    
                <div class="add-client-tip" style="border: 1px solid #0083d9;padding: 12px;text-align: justify;">
                   <p> You can assign this task to an user who associated with the project.</p> 
                   <p> If user is not found under list go to the team member and add them first.</p> 
                </div>
                </div>
                 <div class="form-group">                        
                        <label>Assign to </label>
                        <select class="select" name="assign_user">                          
                        </select>

                        <span class="errorDiv"></span>
                  </div>                   
                <div class="modal-btn delete-action" style="margin-top: 25px;">
                    <div class="row">
                        <div class="col-6">
                            <input type="hidden" name="task_id" id="input_task_id2" value="">
                            <input type="hidden" name="project_id" value="{{Request::segment(3)}}">
                            <button class="btn btn-primary submit-btn">Assign now</button>
                        </div>
                        <div class="col-6">
                            <a href="javascript:void(0);" data-dismiss="modal" class="btn btn-primary cancel-btn">Cancel</a>
                        </div>
                    </div>
                </div>
              </form>
            </div>
        </div>
    </div>
</div>     
<!--  -->

<!-- start task Modal -->
<div class="modal custom-modal fade" id="assignTaskModal" role="dialog">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">
              <form method="post" id="assignTaskForm">
                @csrf
                <div class="form-header">
                <h3> </h3>                    
                <div class="add-client-tip" style="border: 1px solid #0083d9;padding: 12px;text-align: justify;">
                   <p> You can assign this task to user who associated with project.</p> 
                   <p> If not found under list got team member then add user first.</p> 
                </div>
                </div>
                 <div class="form-group">                        
                        <label>Assign to </label>
                        <select class="select" name="assign_user">                          
                        </select>

                        <span class="errorDiv"></span>
                  </div>                   
                <div class="modal-btn delete-action" style="margin-top: 25px;">
                    <div class="row">
                        <div class="col-6">
                            <input type="hidden" name="task_id" id="input_task_id" value="">
                            <input type="hidden" name="project_id" value="{{Request::segment(3)}}">
                            <button class="btn btn-primary submit-btn">Assign now</button>
                        </div>
                        <div class="col-6">
                            <a href="javascript:void(0);" data-dismiss="modal" class="btn btn-primary cancel-btn">Cancel</a>
                        </div>
                    </div>
                </div>
              </form>
            </div>
        </div>
    </div>
</div>     
<!--  -->

<script type="text/javascript">
$(function(){

$( "#from_date,#to_date" ).datepicker({
changeMonth: true,
changeYear: true,
firstDay: 1,
autoclose:true,
todayHighlight: true,
format: 'dd-mm-yyyy',
startDate:'today'
});

  //opoen modal to create task
  $('.create_taskBtn').click(function(){
      $('#create_task').modal({
        backdrop: 'static',
        keyboard: false
      });
      //
  $('.taskProjectName').html($('.projectName').text());

  $("#addTaskForm")[0].reset();
      //load project users
      $.ajax({
                url:'/projectUsers',
                type:'POST',
                data:{"project_id":"{{ Request::segment(3) }}","_token": "{{ csrf_token() }}"},   
                success: function(data) {
                    //update users
                    console.log(data);    
                    if(data.status == 'ok')
                    {
                        //alert('test ok');
                        $('select[name="assign_to"]').empty();
                        $('select[name="assign_to"]').append('<option value="">Select an user</option>');
                        $.each(data.users, function(key, value) {

                        $('select[name="assign_to"]').append('<option value="'+ value.id +'">'+ value.full_name +'</option>');

                        });
                    }
                }
        });
         
        //load modules
        $.ajax({
                url:'/projectModules',
                type:'POST',
                data:{"project_id":"{{ Request::segment(3) }}","_token": "{{ csrf_token() }}"},   
                success: function(data) {
                    //update users
                    console.log(data);    
                    if(data.status == 'ok')
                    {
                        //alert('test ok');
                        $('select[name="module_id"]').empty();
                        $('select[name="module_id"]').append('<option value="">Select a module</option>');
                        $.each(data.modules, function(key, value) {

                        $('select[name="module_id"]').append('<option value="'+ value.id +'">'+ value.title +'</option>');

                        });
                    }
                }
             });
          return false; // required to block normal submit since you used ajax

  });

//submit form
$(document).on('submit', 'form#addTaskForm', function (event) {
    event.preventDefault();
    var form = $(this);
    var data = new FormData($(this)[0]);
    var url = form.attr("action");
    $.ajax({
        type: form.attr('method'),
        url: url,
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        success: function (data) {
          
          $('.is-invalid').removeClass('is-invalid');
            if (data.fail) {
                for (control in data.errors) {
                    //clear 
                    /*$('input[name=' + control + ']').removeClass('is-invalid');
                    $('#error-' + control).html('');*/
                    //set
                    $('input[name=' + control + ']').addClass('is-invalid');
                    $('#error-' + control).html(data.errors[control]);
                }
            } else {
                $('#create_task').modal('hide');
                window.location.reload();
            }
        },
        error: function (xhr, textStatus, errorThrown) {
            alert("Error: " + errorThrown);
        }
    });
    return false;
});
// 
// 
  //assign task to user
  $('.assignTaskModalBtn').click(function(){

      var t_id = $(this).attr('data');
      console.log(t_id);
      $('#input_task_id2').val(t_id);

      $('#assignTaskModal').modal({
        backdrop: 'static',
        keyboard: false
  });
  //
  $('.taskProjectName').html($('.projectName').text());

      //load project users
      $.ajax({
                url:'/projectUsers',
                type:'POST',
                data:{"project_id":"{{ Request::segment(3) }}","_token": "{{ csrf_token() }}"},   
                success: function(data) {
                    //update users
                    console.log(data);    
                    if(data.status == 'ok')
                    {
                        //alert('test ok');
                        $('select[name="assign_user"]').empty();
                        $('select[name="assign_user"]').append('<option value="">Select an user</option>');
                        $.each(data.users, function(key, value) {

                        $('select[name="assign_user"]').append('<option value="'+ value.id +'">'+ value.full_name +'</option>');

                        });
                    }
                }
             });
                
      return false; // required to block normal submit since you used ajax

  });
//
//submit task form
 $("#assignTaskForm").validate({
        rules:{
          assign_user:{
                required: true,                
            },
            
        },
        highlight: function (element) {
          $(element).closest('.form-group').addClass('errorDiv');
        },
        messages:{
            assign_user:{
                required: "Please seelct an user",                
            },
        },
        submitHandler: function(form) { 
              $.ajax({
                url:'/task/assignToUser',
                type:'POST',
                data:$('#assignTaskForm').serialize(),
                success: function(data) {
                    console.log(data);
                    var obj = JSON.parse(data);
                    if(obj.status=='ok'){
                      location.reload(true);                    
                    }
                    else
                    {
                      alert("Something went wrong!");
                    }
                }
             });
             return false; // required to block normal submit since you used ajax
         }
     });
// 
$('.taskStartBtn').click(function(){
  var task_id = $(this).attr('data');
  if(confirm("Are you sure want to start?")){
  
    console.log('task started now');

    $.ajax({
            url:'/task/start',
            type:'POST',
            data:{"task_id":task_id,"_token": "{{ csrf_token() }}"},
            success: function(data) {
                console.log(data);
                var obj = JSON.parse(data);
                if(obj.status=='ok'){
                  location.reload(true);                    
                }
                else
                {
                  alert("Something went wrong!");
                }
            }
         });
    return false; // required 

  }
  else
  {
    console.log('cancel');
  }

});

$(document).on('click','.doComplete',function(e){
  e.preventDefault();
  
  if(confirm("Are you sure to Mark as Complete?")){
  var  task_id = $(this).attr('data');  
    $.ajax({
          url: "/doCompleteTask",
          type:"POST",
          dataType: "json",
          data: {
              task_id:task_id,              
              _token:"