@extends('admin.layout')
@section('content')
<div class="search-list">
	<div class="content-wrapper search-result-list">
  <section class="content-header">
    <h1> {{ trans('View Task') }} <small></small> </h1>
    <ol class="breadcrumb">
       <li><a href="{{ URL::to('admin/dashboard/this_month') }}"><i class="fa fa-dashboard"></i> {{ trans('labels.breadcrumb_dashboard') }}</a></li>
      <li class="active">{{ trans('View Task') }}</li>
    </ol>
  </section>
	@php
		$getUserRoleData = userRoleData();
		$task = explode(",",$getUserRoleData->task);
	@endphp
  <section class="content"> 
    <div class="row">
      <div class="col-md-12">
        <div class="box box-info">
        	<div class="box-header">
    				<ul  class="list-inline">
              <li class="list-inline-item"><a href="{{URL('admin/tasks')}}" type="button" class="btn btn-primary btn-sm">{{ trans('labels.back') }}</a></li>
              <li class="list-inline-item"><a href="{{ URL('admin/update-task/' . $result['task']->id) }}" type="button" class="btn btn-primary btn-sm">{{ trans('Edit') }}</a></li>
              @if(in_array("Edit", $task))
              <li class="list-inline-item"><a href="#" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#addActivities">{{ trans('Add Activities') }}</a></li>
              @endif
    				</ul>        	
    			</div>       
          @if(in_array("View", $task))              
            
          <div class="box-body">
            <div class="row">
              <div class="col-md-12">
                @if( count((array) $errors) > 0)
                  @foreach($errors->all() as $error)
                    <div class="alert alert-danger" role="alert">
                      <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
                      <span class="sr-only">{{ trans('labels.Error') }}:</span>
                      {{ $error }}
                    </div>
                  @endforeach
                @endif   
                @if(!empty(session('message')))
                    <div class="alert alert-success" role="alert">
                      {{ session('message') }}
                    </div>
                @endif 
                @if(!empty(session('error')))
                    <div class="alert alert-danger" role="alert">
                      {{ session('error') }}
                    </div>
                @endif 
              </div>
            </div>
						
            <div class="row">
              <div class="col-md-3">
                  <div class="col-md-12">
                    <label for="title" class="control-label">{{ trans('Title') }}:</label>
                    {{ $result['task']->title }}
                  </div>
              </div>
              <div class="col-md-3">
                  <div class="col-sm-3 col-md-12">
                    <label for="priority" class="control-label">{{ trans('Priority') }}:</label>
                    {{ $result['task']->taskPriority->name }}
                  </div>
              </div>
              <div class="col-md-3">
                  <div class="col-sm-3 col-md-12">
                    <label for="assigned_to" class="control-label">{{ trans('Assigned to') }}:</label>
                    {{ $result['task']->assignedToUser->first_name . ' ' . $result['task']->assignedToUser->last_name }}
                  </div>
              </div>
              <div class="col-md-3">
                  <div class="col-sm-3 col-md-12">
                    <label for="status" class="control-label">{{ trans('Status') }}:</label>
                    {{ $result['task']->taskStatus->name }}
                  </div>
              </div>
            </div>	
						<div class="row">
              <div class="col-md-3">
                  <div class="col-sm-3 col-md-12">
                    <label for="department" class="control-label">{{ trans('Department') }}:</label>
                    {{ $result['task']->taskDepartment->name }}
                  </div>
              </div>
              <div class="col-md-3">
                  <div class="col-sm-3 col-md-12">
                    <label class="control-label">Start Date:</label>
                    {{ $result['task']->start_date }}
                  </div>
              </div>
              <div class="col-md-3">
                  <div class="col-sm-3 col-md-12">
                    <label class="control-label">Completion Date:</label>
                    {{ $result['task']->completion_date }}
                  </div>
              </div>


            </div>
																
          </div>

          
          @if(in_array("Edit", $task) && $result['task']->comments->isNotEmpty() )
          <hr class="hr-primary">
          <div class="row" style="padding:10px;">
            <div class="col-sm-12 col-md-12">
              <strong style="color: #00c0ef;">Comments History:</strong>
            </div>
            @foreach($result['task']->comments as $v)
            <div class="col-md-12 _notes">
              <div class="form-group" style="overflow-wrap: break-word;">
                <strong>{{ $v->createdByUser->first_name . ' ' . $v->createdByUser->last_name . ' | ' . $v->created_at }}</strong>  
                <div class="clearfix"></div>
                <div class="ticket-description-new">{!! $v->comment !!}</div>
              </div>
            </div>
            @endforeach
          </div>
          @endif

          @else
            <p> <strong>Please contact with SuperAdmin</strong></p>
          @endif
        </div>
      </div>
    </div>
  </section>

  @if($result['task']->activities->isNotEmpty())
  <section class="content"  id="activities-chart">
    <div class="row">
      <div class="col-md-12">
        <div class="box box-info">
          <div class="box-header">
                    
          </div>    
          <div class="box-body">
            <div class="table-responsive">
              <table class="table table-bordered table-responsive">
                <thead>
                  <tr>
                    <th rowspan="2" style="text-align:center;">Activities</th>
                    <th rowspan="2" style="text-align:center;">Name</th>
                    @php
                    $tds1 = $tds2 = '';
                    $month = strtotime($result['max_min_date']->min_date);
                    $end = strtotime($result['max_min_date']->max_date);

                    if($result['max_date_extension']->extension > 0) {
                      $extension_days = $result['max_date_extension']->extension * 8;
                      $end = strtotime("+$extension_days days", $end);
                    }

                    $end = strtotime(date('Y-m-t', $end));
                    while($month < $end) {
                      $tds1 .= '<th colspan="4" style="text-align:center;">' . date('F Y', $month) . '</th>';
                      for($i = 1; $i <= 4; $i++) {
                        $tds2 .= '<th style="text-align:center;">W' . $i . '</th>';
                      }

                      $month = strtotime("+1 month", $month);
                    }
                    @endphp
                    {!! $tds1 !!}
                  </tr>
                  <tr>
                    {!! $tds2 !!}
                  </tr>
                </thead>
                <tbody>
                  @php
                  $bg_colors = ['violet', 'blue', 'grey', 'purple', 'cyan'];
                  $prev_rand = ''
                  @endphp
                  @foreach($result['task']->activities as $v)
                    <tr{{ $v->status == 2 ? ' class=hidden' : '' }}>
                      <td{{ $v->status == 1 ? ' style=background:#9ed1ba;' : '' }}>

                        @if(in_array($v->status, [0, 1]))
                        <label class="checkbox-inline"><input type="checkbox" name="complete_activity" value=""{{ $v->status == 1 ? ' checked' : '' }}>{{ $v->title }}</label>
                        @elseif($v->status == 3)
                        <span style="text-decoration: line-through;">{{ $v->title }}</span>
                        @endif

                        @if($v->status == 0)
                        <div class="dropdown">
                          <button class="btn btn-primary btn-xs dropdown-toggle" type="button" id="about-us" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                          Action
                          <span class="caret"></span>
                          </button>
                          <ul class="dropdown-menu" aria-labelledby="action">
                            <li><a href="javascript:void(0);" onclick="extendActivityTimeline({{ $v->id }})">Extend time for a week</a></li>
                            <li><a href="javascript:void(0);" onclick="completeActivity({{ $v->id }}, 2)">Hide</a></li>
                            <li><a href="javascript:void(0);" onclick="completeActivity({{ $v->id }}, 3)">Duplicate</a></li>
                          </ul>
                        </div>
                        @endif

                      </td>
                      <td width="200">
                        <input type="hidden" name="activity_id" value="{{ $v->id }}">
                        <span class="assignee_name1"{{ empty($v->assignee_name) ? '' : ' style=display:none;' }}>
                          <div class="input-group save-name">
                            <input type="text" class="form-control" name="assignee_name" value="{{ $v->assignee_name ?? '' }}">
                            <span class="input-group-btn">
                              <button class="btn btn-primary save-name-btn" type="button">Save</button>
                            </span>
                          </div>
                          <span class="assignee_name-error" style="color:red;"></span>
                        </span>
                        
                        <span class="assignee_name2"{{ !empty($v->assignee_name) ? '' : ' style=display:none;' }}>
                          <span>{{ $v->assignee_name ?? '' }}</span>
                          <a href="javascript:void(0)" class="edit-name"><i class="fa fa-pencil"></i></a>
                        </span>
                        

                      </td>
                      @php
                      $tds1 = '';
                      $month = strtotime($result['max_min_date']->min_date);

                      $end = strtotime($result['max_min_date']->max_date);

                      if($result['max_date_extension']->extension > 0) {
                        $extension_days = $result['max_date_extension']->extension * 8;
                        $end = strtotime("+$extension_days days", $end);
                      }

                      $end = strtotime(date('Y-m-t', $end));

                      $cell = 1;
                      $start_bg = -1;
                      
                      while(true) {
                        $rand = rand(0, 4);
                        if($prev_rand != $rand) {
                          break;
                        }
                      }

                      unset($ext);
                      while($month < $end) {
                        for($i = 1; $i <= 4; $i++) {
                          $bg = '';
                          if((date('m', $month) == date('m', strtotime($v->start_date)) && date('Y', $month) == date('Y', strtotime($v->start_date)) && $v->start_week_no == $i)) {
                            $start_bg = $cell;
                          }
                          
                          if($start_bg >= $cell) {
                            $bg = 'style="background:' . $bg_colors[$rand] . ';"';
                            $start_bg++;
                          }

                          if(date('m', $month) == date('m', strtotime($v->end_date)) && date('Y', $month) == date('Y', strtotime($v->end_date)) && $v->end_week_no == $i) {
                            $start_bg = -1;

                            $ext = 1;
                            
                          }

                          if(isset($ext) && $v->extension > 0 && $ext <= $v->extension && empty($bg)) {
                            if($ext == 1) $ext_color = 'yellow';
                            else if($ext == 2) $ext_color = 'orange';
                            else $ext_color = 'red';
                            $bg = 'style="background:' . $ext_color . ';"';
                            $ext++;
                          }
                          
                          $tds1 .= "<th $bg></th>";

                          $cell++;
                        }

                        $month = strtotime("+1 month", $month);
                      }

                      $prev_rand = $rand;
                      @endphp
                      {!! $tds1 !!}
                    </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
            
          </div>
        </div>
      </div>
    </div> 
  </section>
  @endif

  <section class="content">
     
    <div class="row">
      <div class="col-md-12">
        <div class="box box-info">
          <div class="box-header">
                    
          </div>       
          @if(in_array("Edit",$task ))              
          {!! Form::open(array('url' =>'admin/add-task-comment', 'method'=>'post', 'class' => 'form-horizontal', 'id'=>'form1', 'enctype'=>'multipart/form-data')) !!}  
          <input type="hidden" name="id" value="{{ $result['task']->id }}">
          <div class="box-body">
            
              <div class="col-md-3">
                <div class="form-group">
                  <div class="col-sm-3 col-md-12">
                    <label for="assigned_to" class="control-label">{{ trans('Assigned to') }} <span class="red_star">*</span></label>
                  </div>
                  <div class="col-sm-4 col-md-12">
                    <select class="form-control assigned_to select_default" multiple name="assigned_to" id="assigned_to" data-live-search="true" required="">
                      <option value="">-- Please Choose --</option>                         
                      @if(count((array) $result['assigned'])>0)
                        @foreach($result['assigned'] as $key => $ccValue)
                                                    <option value="{{$ccValue->myid}}" {{$assignedSelected}}>{{$ccValue->first_name}} {{$ccValue->last_name}}</option>
                        @endforeach
                      @endif
                    </select>
                  </div>
                </div>
              </div>
              
              <div class="col-md-12">
                <div class="form-group">
                  <div class="col-sm-3 col-md-12">
                    <label for="comment" class="control-label">{{ trans('Comment') }} <span class="red_star">*</span></label>
                  </div>
                  <div class="col-sm-4 col-md-12">
                    {!! Form::textarea('comment', '', array('class'=>'form-control', 'id'=>'comment', 'rows'=>'3', 'required' => 'required')) !!}
                  </div>
                </div>
              </div>

            </div>
                                
          </div>

          <div class="box-footer text-center">
            <button type="submit" class="btn btn-primary">{{ trans('Submit') }}</button>
            <a href="../tasks" type="button" class="btn btn-primary">{{ trans('labels.back') }}</a>
          </div> 
          {!! Form::close() !!}
          
          @endif
        </div>
      </div>
    </div>
  
  </section>  




</div>
</div>

<div id="addActivities" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Add Activities</h4>
      </div>
      {!! Form::open(array('url' =>'admin/add-task-activity', 'method'=>'post', 'class' => 'form-horizontal', 'id'=>'form2', 'enctype'=>'multipart/form-data')) !!}
      <input type="hidden" name="id" value="{{ $result['task']->id }}">
      <div class="modal-body">
        <div class="row">
          <div class="col-md-12">
            <div class="form-group">
              <div class="col-md-12">
                <label for="assigned_to" class="control-label">{{ trans('Title') }} <span class="red_star">*</span></label>
              </div>
              <div class="col-md-12">
                <input type="text" class="form-control" name="title" required>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group">
              <div class="col-sm-3 col-md-12">
                <label class="control-label">Start Date<span class="red_star">*</span></label>
              </div>
              <div class="col-sm-4 col-md-12">
                <div class="input-group date">
                  <div class="input-group-addon">
                    <i class="fa fa-calendar"></i>
                  </div>
                  <input type="text" name="start_date" class="form-control datepicker" id="start_date" required value="" autocomplete="off" readonly>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group">
              <div class="col-sm-3 col-md-12">
                <label class="control-label">Completion Date<span class="red_star">*</span></label>
              </div>
              <div class="col-sm-4 col-md-12">
                <div class="input-group date">
                  <div class="input-group-addon">
                    <i class="fa fa-calendar"></i>
                  </div>
                  <input type="text" name="end_date" class="form-control datepicker" id="end_date" autocomplete="off" value="" required readonly>
                </div>
              </div>
            </div>
          </div>
          
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Submit</button>
      </div>
      {!! Form::close() !!}
    </div>

  </div>
</div>
<style type="text/css">
.modal-dialog {
  top: 100px;
}
.select2-container {
  width: 265px !important;
}
</style>

<script src="{!! asset('assets/admin/plugins/jQuery/jQuery-2.2.0.min.js') !!}"></script>
<script src="{!! asset('assets/admin/plugins/validate/jquery.validate.js') !!}"></script>
<script src="{!! asset('assets/admin/plugins/validate/additional-methods.js') !!}"></script>


<script type="text/javascript">
  //Extention method for check CKEditor Control   
// jQuery.validator.addMethod("customfunctionanme",validationfunction,validationmessage);  
  
jQuery.validator.addMethod("ckrequired", function (value, element) {  
    var idname = $(element).attr('id');  
    var editor = CKEDITOR.instances[idname];  
    var ckValue = GetTextFromHtml(editor.getData()).replace(/<[^>]*>/gi, '').trim();  
    if (ckValue.length === 0) {  
//if empty or trimmed value then remove extra spacing to current control  
        $(element).val(ckValue);  
    } else {  
//If not empty then leave the value as it is  
        $(element).val(editor.getData());  
    }  
    return $(element).val().length > 0;  
}, "This field is required");  
  
function GetTextFromHtml(html) {  
  var dv = document.createElement("DIV");  
  dv.innerHTML = html;  
  return dv.textContent || dv.innerText || "";  
} 
  
  // Email Check
  $.validator.addMethod("email", function(value) {
    return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(value) // consists of only these
  });

  // Password Check
  $.validator.addMethod("pwcheck", function(value) {
    return /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{6,16}$/.test(value) // consists of only these
  });
  
  // Alpthabet Check
  $.validator.addMethod("alpha", function(value, element) {
    return this.optional(element) || value == value.match(/^[a-zA-Z/_-\s]+$/);
  });
  
  // File size validate
  jQuery.validator.addMethod("filesize_max", function(value, element, param) {
    var isOptional = this.optional(element),
      file;

    if(isOptional) {
      return isOptional;
    }
    if ($(element).attr("type") === "file") {

      if (element.files && element.files.length) {

        file = element.files[0];            
        return ( file.size && file.size <= param ); 
      }
    }
    return false;
  }, "File size is too large.");  

  // Product Form Validation
  
  var $wCur = $("#form2");  
  $wCur.validate( {
    rules: {
      //
    },
    messages: {
      //
    },
    errorElement: "em",
    errorPlacement: function ( error, element ) {
      // Add the `help-block` class to the error element
      error.addClass( "help-block" );

      // Add `has-feedback` class to the parent div.form-group
      // in order to add icons to inputs
      element.parents( ".col-sm-5" ).addClass( "has-feedback" );

      if ( element.prop( "type" ) === "checkbox" ) {
        error.insertAfter( element.parent( "label" ) );
      } else {
        error.insertAfter( element );
      }

      // Add the span element, if doesn't exists, and apply the icon classes to it.
      if ( !element.next( "span" )[ 0 ] ) {
        $( "<span class='glyphicon glyphicon-remove form-control-feedback'></span>" ).insertAfter( element );
      }
    },
    success: function ( label, element ) {
      // Add the span element, if doesn't exists, and apply the icon classes to it.
      if ( !$( element ).next( "span" )[ 0 ] ) {
        $( "<span class='glyphicon glyphicon-ok form-control-feedback'></span>" ).insertAfter( $( element ) );
      }
    },
    highlight: function ( element, errorClass, validClass ) {
      $( element ).parents( ".col-sm-5" ).addClass( "has-error" ).removeClass( "has-success" );
      $( element ).next( "span" ).addClass( "glyphicon-remove" ).removeClass( "glyphicon-ok" );
    },
    unhighlight: function ( element, errorClass, validClass ) {
      $( element ).parents( ".col-sm-5" ).addClass( "has-success" ).removeClass( "has-error" );
      $( element ).next( "span" ).addClass( "glyphicon-ok" ).removeClass( "glyphicon-remove" );
    }
  });

  var $wCur = $("#form1");  
  $wCur.validate( {
    ignore: [],  
    rules: {
      comment:{
        ckrequired: true
      }

    },
    messages: {
      comment:{
          required:"Please enter Text",
      }
    },
    errorElement: "em",
    errorPlacement: function ( error, element ) {
      // Add the `help-block` class to the error element
      error.addClass( "help-block" );

      // Add `has-feedback` class to the parent div.form-group
      // in order to add icons to inputs
      element.parents( ".col-sm-5" ).addClass( "has-feedback" );

      if ( element.prop( "type" ) === "checkbox" ) {
        error.insertAfter( element.parent( "label" ) );
      } else {
        error.insertAfter( element );
      }

      // Add the span element, if doesn't exists, and apply the icon classes to it.
      if ( !element.next( "span" )[ 0 ] ) {
        $( "<span class='glyphicon glyphicon-remove form-control-feedback'></span>" ).insertAfter( element );
      }
    },
    success: function ( label, element ) {
      // Add the span element, if doesn't exists, and apply the icon classes to it.
      if ( !$( element ).next( "span" )[ 0 ] ) {
        $( "<span class='glyphicon glyphicon-ok form-control-feedback'></span>" ).insertAfter( $( element ) );
      }
    },
    highlight: function ( element, errorClass, validClass ) {
      $( element ).parents( ".col-sm-5" ).addClass( "has-error" ).removeClass( "has-success" );
      $( element ).next( "span" ).addClass( "glyphicon-remove" ).removeClass( "glyphicon-ok" );
    },
    unhighlight: function ( element, errorClass, validClass ) {
      $( element ).parents( ".col-sm-5" ).addClass( "has-success" ).removeClass( "has-error" );
      $( element ).next( "span" ).addClass( "glyphicon-ok" ).removeClass( "glyphicon-remove" );
    }
  });
$(function () {
  //Date picker
  $('.datepicker').datepicker({
    autoclose: true
  });

  $("#start_date").datepicker().on('changeDate', function(selected){
    startDate = new Date(selected.date.valueOf());
    $('#end_date').datepicker('setStartDate', startDate);
  });  

  $("#end_date").datepicker().on('changeDate', function(selected){
    startDate = new Date(selected.date.valueOf());
    $('#start_date').datepicker('setEndDate', startDate);
  });

  $(".save-name-btn").click(function() {
    $curr = $(this).closest('td');
    var assignee_name = $curr.find("input[name=assignee_name]").val();
    var activity_id = $curr.find("input[name=activity_id]").val();
    $(".assignee_name-error").empty();

    $.ajax({
      url : "{{ url('admin/save-assignee-name') }}",
      type: "POST",
      async: false,
      data : {assignee_name: assignee_name, activity_id: activity_id},
      success: function(data) {
        if(data.status == 1) {
          $curr.find(".assignee_name1").hide();
          $curr.find(".assignee_name2").find("span").text(data.assignee_name);
          $curr.find(".assignee_name2").show();
        }
      },
      error: function (jqXHR, textStatus, errorThrown) {
        var responseText = JSON.parse(jqXHR.responseText);
        if(jqXHR.status == 422) {
          $curr.find(".assignee_name-error").text(responseText.errors.assignee_name[0]);
        }
        else {
          $curr.find(".assignee_name-error").text(responseText.msg);
        }
      }
    });
  });

  $(".edit-name").click(function() {
    $curr = $(this).closest('td');
    $curr.find(".assignee_name1").show();
    $curr.find(".assignee_name2").hide();
  });

    
  // CKEDITOR.replace('comment',{ 
  //   //extraPlugins : "wordcount,notification",
  // });

  ClassicEditor
    .create(document.querySelector('#comment'))
    .catch(error => {
        console.error(error);
    });

  $("input[name=complete_activity]").click(function() {
    var checked = $(this).prop('checked');

    $curr = $(this).closest('tr');
    var activity_id = $curr.find("input[name=activity_id]").val();

    if(checked){
      if(confirm("Are you sure, you want to complete this activity.")){
        completeActivity(activity_id, 1);
      }
      else {
        $(this).prop('checked', false);
      }
    }
    else {
      $(this).prop('checked', true);
    }
  });

  $('.table-responsive').on('show.bs.dropdown', function () {
       $('.table-responsive').css( "overflow", "inherit" );
  });

  $('.table-responsive').on('hide.bs.dropdown', function () {
       $('.table-responsive').css( "overflow", "auto" );
  })

  
})

function completeActivity(activity_id, status) {
  $.ajax({
    url : "{{ url('admin/complete-activity') }}",
    type: "POST",
    async: false,
    data : {status: status, activity_id: activity_id},
    success: function(data) {
      if(data.status == 1) {
        location.reload();
      }
    },
    error: function (jqXHR, textStatus, errorThrown) {
      /*var responseText = JSON.parse(jqXHR.responseText);
      responseText.msg;*/
    }
  });
}

function extendActivityTimeline(activity_id) {
  $.ajax({
    url : "{{ url('admin/extend-activity-timeline') }}",
    type: "POST",
    async: false,
    data : {activity_id: activity_id},
    success: function(data) {
      if(data.status == 1) {
        location.reload();
      }
    },
    error: function (jqXHR, textStatus, errorThrown) {
      /*var responseText = JSON.parse(jqXHR.responseText);
      responseText.msg;*/
    }
  });
}
</script>
@endsection