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

<div class="row">
   <div class="col-sm-9" id="tasksListings">

   </div>
   <div class="col-sm-3">
      <div class="ais-RefinementList pt-4 mt-3">
         <ul class="ais-RefinementList-list">
            <li class="tasksidebar active">
               <a href="javascript:;" alt="nooverdue" onclick="getTaskList(this)"><label>Past Due </label><span class="badge badge-pill bg-danger text-white ml-2 nooverdueCount" style="font-size: 15px;"></span></a>
            </li>
            <li class="tasksidebar">
               <a href="javascript:;" alt="today" onclick="getTaskList(this)"><label>Today </label><span class="badge badge-pill bg-primary text-white ml-2 todayCount" style="font-size: 15px;"></span></a>
            </li>
            <li class="tasksidebar">
               <a href="javascript:;" alt="upcoming" onclick="getTaskList(this)"><label>Upcoming </label><span class="badge badge-pill bg-secondary text-white ml-2 upcomingCount" style="font-size: 15px;"></span></a>
            </li>
            <li class="tasksidebar">
               <a href="javascript:;" alt="completed" onclick="getTaskList(this)"><label>Completed </label><span class="badge badge-pill badge-success ml-2 completedCount" style="font-size: 15px;"></span></a>
            </li>
            <li class="tasksidebar">
               <div class="form-group">
                  <input type="checkbox" value="1" class="includeListing" onclick="getTaskList(this, 'include')"> Include tasks created by me
               </div>
            </li>
         </ul>
      </div>

   </div>
</div>


</section>
@section('script')
<script>
   getTaskList();

   function getTaskList(event = '', type = '') {
      var myTasks = $('.includeListing:checked').val();
      if (type == "include") {
         if ($(event).is(":checked")) {
            myTasks = 1;
         }

         event = '';
      }
      if (event) {
         $('.tasksidebar').removeClass('active');
         $(event).closest('li.tasksidebar').addClass('active');
      }
      type = $('.tasksidebar.active').find('a').attr('alt');
      $.get("{{route('viewTaskLIsting')}}/" + type + '/' + myTasks, function(data) {
         $("#tasksListings").html(data.html);

         Object.keys(data.counts).forEach(key => {
            $('.' + key).html(data.counts[key]);
         });
      });
   }
</script>

@endsection

@endsection