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

<style>
.task-information{
  margin-left:0px;
}

#comment_form{
  position: sticky;
  bottom: 0px;
  background: #fff;

}
</style>

    <!-- 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="chat-main-row">
          <div class="chat-main-wrapper chat-custom-size">
            
            <div class="col-lg-6 message-view task-chat-view task-right-sidebar" id="task_window">
              <div class="chat-window">
                <div class="fixed-header">
                  <div class="navbar">
                    <div class="task-assign">

                    @if($task->is_completed == 1)
                      <a class="task-complete-btn task-completed"  href="javascript:void(0);">
                        <i class="fa fa-check" style="font-size: 15px;"></i> Completed
                      </a>
                    @endif

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

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

                          @if($task->task_status==0)
                            <a class="btn btn-sm btn-warning srat_task_btn" href="javascript:void(0);">
                              <i class="fa fa-check" style="font-size: 15px;"></i> Start now
                            </a>
                          @endif
                        @endif
                      
                      @if($task->task_status==1)
                             <span class="text-warning text-bold" data="{{$task->id}}">Open</span>
                             <small class="block text-ellipsis">
                             <span>Started at: </span> <span class="text-muted"> {{date('d-m-Y h:i A',strtotime($task->started_at))}}  </span>
                           </small>
                      @endif

                    @endif

                    </div>
                    <ul class="nav float-right custom-menu">
                      <li> <a style="font-size: 16px; color: #333" href="/project/task/{{ base64_encode($task->project_id)}}"> <i class="fa fa-arrow-left"></i> Back to task</a></li>
                      <li class="dropdown dropdown-action">
                        <a href="" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="material-icons">more_vert</i></a>
                        <div class="dropdown-menu dropdown-menu-right">
                          <a class="dropdown-item" href="javascript:void(0)">Delete Task</a>
                          <a class="dropdown-item" href="javascript:void(0)">Raised Issue</a>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
                <div class="chat-contents task-chat-contents">
                  <div class="chat-content-wrap">
                    <div class="chat-wrap-inner">
                      <div class="chat-box">
                        <div class="chats">
                          
                          <div class="task-header">
                            <div class="assignee-info">

                              <a href="#" data-toggle="modal" data-target="#assignee">

                                <div class="avatar">
                                  @if($task->assigned_to !="")                                  
                                  <img alt="" src="{{Techsaga::getUserImage($task->assigned_to)}}">
                                  @else
                                  <img alt="" src="">
                                  @endif
                                </div>
                                <div class="assigned-info">
                                  <div class="task-head-title">
                                    @if($task->assigned_to !="")  
                                    Assigned To
                                    @else
                                    Not Assigned
                                    @endif
                                  </div>
                                  <div class="task-assignee">
                                    @if($task->assigned_to !="")  
                                      {{Techsaga::getFullName($task->assigned_to)}}
                                    @endif
                                  </div>
                                </div>
                                
                              </a>
                              <span class="remove-icon">
                                <i class="fa fa-close"></i>
                              </span>
                            </div>
                            <div class="task-due-date">
                              <a href="#" data-toggle="modal" data-target="#assignee">
                                <div class="due-icon">
                                  <span>
                                    <i class="material-icons">date_range</i>
                                  </span>
                                </div>
                                <div class="due-info">
                                  <div class="task-head-title">Due Date</div>
                                  <div class="due-date">{{date('d-m-Y',strtotime($task->end_date))}}</div>
                                </div>
                              </a>
                              <span class="remove-icon">
                                <i class="fa fa-close"></i>
                              </span>
                            </div>
                          </div>
                          <hr class="task-line">
                          
                          <div class="col-sm-12">
                            <h4 style="font-size: 20px;">{{$task->name}}</h4>                          
                          </div>
                          <div class="task-desc">
                            
                            <div class="task-textarea" style="margin-left: 15px;">
                              {!!$task->description!!}
                            </div>
                          </div>
                          <hr class="task-line">
                          <div class="col-lg-12">
                          <!-- approved info -->
                          @if($task->is_approved ==1)
                          <div class="task-information">                            
                            <span class="task-info-line">
                              <a class="task-user" href="#">{{Techsaga::getFullName($task->approved_by)}}</a> 
                              <span class="task-info-subject">Approved at</span>
                            </span>
                            <div class="task-time">{{date('d, M, Y h:i A',strtotime($task->approved_at))}}</div>
                          </div>                                               
                         @endif                          
                          <!--  -->
                          @if($assigned_by !=null)
                          <div class="task-information">                            
                            <span class="task-info-line">
                              <a class="task-user" href="#">{{$assigned_by->first_name.' '.$assigned_by->last_name}}</a> 
                              <span class="task-info-subject">Assigned at</span>
                            </span>
                            <div class="task-time">{{date('d, M, Y h:i A',strtotime($assigned_by->assigned_at))}}</div>
                          </div>
                          @endif
                          <!--  -->
                           @if($created_by !=null)
                          <!-- created at -->
                          <div class="task-information">
                            <span class="task-info-line"><a class="task-user" href="#">{{$created_by->first_name.' '.$created_by->last_name}}</a> <span class="task-info-subject">created task</span></span>
                            <div class="task-time">{{date('d, M, Y h:i A',strtotime($created_by->created_at))}}</div>
                          </div>
                          @endif
                          <!--  -->
                        </div>
                      
                      </div>
                         
                      @if($task->is_approved ==0)
                        @if($task->is_completed ==1 )
                        @if(auth()->user()->role_id ==1 || $task->created_by == auth()->user()->id || $task->assigned_by == auth()->user()->id )
                        <div class="col-lg-6">
                          <button class=" btn btn-sm btn-danger approveTask" data="{{$task->id}}" >Approve this now</button>
                        </div>
                        @endif
                        @endif
                      @endif
                       
                        <hr class="task-line">

                        <div class="col-sm-12" id="commentResult">
                        <!-- comment list -->
                        @if(count($task_comment) > 0)
                        @foreach($task_comment as $item)
                        <div class="chat chat-left">
                            <div class="chat-avatar">
                              <a href="" class="avatar">
                                <img alt="" src="{{Techsaga::getUserImage($item->user_id)}}">
                              </a>
                            </div>
                            <div class="chat-body">
                              <div class="chat-bubble">
                                <div class="chat-content">
                                  <span class="task-chat-user">{{$item->first_name.' '.$item->last_name}}</span> <span class="chat-time">{{date('d, M, Y h:i A',strtotime($item->created_at))}}</span>
                                  <p>{{$item->comment}}</p>
                                  
                                </div>
                              </div>
                            </div>
                          </div>
                          @endforeach
                        <!-- ./ -->
                        @endif

                        </div>
                        <hr class="task-line">

                        <form method="post" id="comment_form" enctype="multipart/form-data">
                           @csrf
                          <div class="col-sm-12">
                            <span style="font-weight: bold; color: #333; font-size: 16px; ">Add Comment</span>
                          </div>
                          <div class="task-desc">
                            
                            <div class="task-desc-icon">
                              <i class="material-icons">subject</i>
                            </div>
                            <div class="task-textarea">
                              <textarea class="form-control task_comment" name="task_comment" style="border:1px solid #e3e3e3;" placeholder="Description"></textarea> 
                            </div>                           
                          </div>
                           <div class="col-sm-12" style="padding-left: 33px;">
                              <input type="hidden" name="task_id" class="form-control" value="{{$task->id}}">
                              <button type="submit" class="btn btn-sm btn-primary">Submit</button>
                          </div> 
                        </form>
                          
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                
              </div>
            </div>
          </div>
        </div>

    </div>
    <!-- /Page Content -->

<!-- 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 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 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>     
<!--  -->

<!-- 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(){

 $('#comment_form').on('submit', function(event){
  event.preventDefault();

  if ($('.task_comment').val() == "")
  {
    alert('Please enter your comment!');
    return false;
  }
  //start loading
  $("#pageloader").fadeIn();
  $('.saveComment').button('loading');
  
  $.ajax({
   url: "/task/doComment",
   method:"POST",
   data:new FormData(this),
   dataType:'JSON',
   contentType: false,
   cache: false,
   processData: false,
   success:function(data)
   {
     console.log();
     // var obj = JSON.parse(data);
     if(data.status == 'ok')
     {
        $('.saveComment').button('reset'); 
        $("#pageloader").remove();

        $('html, body').animate({ scrollTop: 0 }, 'slow');

        $('#postComment').val('');
        $('.postImage').val('');        
        $('.summernote').summernote('code', '');
        $('#commentResult').prepend(data.html);
     }
   }
  })
 });

//
$( "#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());

      //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

  });

//approve task

  $('.approveTask').click(function(){

    var task_id = $(this).attr('data');    
    if(confirm("are you sure want approve this task")){
    $.ajax({
                url:'/task/approve',
                type:'POST',
                data:{"task_id":task_id,"_token": "{{ csrf_token() }}"},   
                success: function(data) {
                    //update users
                    console.log(data);    
                    if(data.status == 'ok')
                    {
                      location.reload(true);                                  
                    }
                }
             });
                
      return false; // required to block normal submit since you used ajax
      }
  });

// 
 
  //assign task to user
  $('.assignTaskModalBtn').click(function(){

      var t_id = $(this).attr('data');
      $('#input_task_id').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:"