@extends('layouts.master')
@section('style')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<link rel="stylesheet" href="{{ URL::asset('assets/css/jquery.datetimepicker.css') }}">
@endsection
@section('content')
<!-- Main content -->
<section class="content">
    <!-- Main row -->
    <div class="row">
        <div class="col-md-12">
            <section class="panel tasks-widget">
                <header class="panel-heading" style="height:40px;">
                    <div class="pull-left">
                        {{$title}}
                    </div>
                    <div>
                        <button class="btn btn-success btn-xs pull-right" data-toggle="modal" data-target="#myModal1">Add task</button> 
                     
                        <button class="btn btn-warning btn-xs pull-right" data-toggle="modal" data-target="#myModal2" style="margin-right:5px;">Assign task</button>
                    </div>
                </header>
                <div class="table-responsive project-list">
                    @if (session('data'))
                        <div class="alert alert-success">
                            {{ session('data') }}
                        </div>
                    @endif
                    @if(count($tasks) > 0)
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>
                                    #
                                </th>
                                <th>
                                    Task Name
                                </th>
                                <th>
                                    Project
                                </th>
                                <th>
                                    Assigned users
                                </th>
                                <th>
                                    Estimated Time
                                </th>
                                <th>
                                    Description
                                </th>
                                <th>
                                    Status
                                </th>
                                <th>
                                    Action
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                        
                            @foreach($tasks as $key=>$info)
                                <tr>
                                    <td>
                                        {{++$key}}
                                    </td>
                                    <td>
                                        <b>{{ substr($info->name, 0, 25)}}</b>
                                    </td>
                                    <td>
                                        <b style="color:red">{{ !empty($info->proj_name->name) ? $info->proj_name->name : "N/A" }} </b>
                                    </td>
                                    <td>
                                        {{ $info->user->name }} 
                                    </td>
                                    <td>
                                        {{ date("F jS", strtotime($info->dead_line)) }}
                                    </td>
                                    <td>
                                        {!! substr($info->description, 0, 40) !!}
                                    </td>
                                    <td>
                                         @if($info->status == 1)
                                            <a href="{{url("admin/change_task_status/$info->id")}}">
                                                <i style="color:red;font-size: 15px;" class="fa fa-square-o" aria-hidden="true"></i>
                                            </a>
                                            <b style="color:red;font-size: 12px;">PENDING</b>
                                        @elseif($info->status == 6)
                                            
                                            <b style="color:#398439;font-size: 12px;">DONE</b>
                                        @elseif($info->status == 2)
                                            <a href="{{url("admin/change_task_status/$info->id")}}">
                                                <i style="color:#d58512;font-size: 15px;" class="fa fa-square-o" aria-hidden="true"></i>
                                            </a> 
                                            <b style="color:#053071;font-size: 12px;">IN PROGRESS</b>
                                        @elseif($info->status == 3)
                                            <b style="color:#053071;font-size: 12px;">COMPLETED</b>
                                        @endif
                                    </td>
                                    <td>
                                        <input type="hidden" class="cls-project-id" value="{{$info->proj_id}}">
                                        <span class="cls-assign" data-task_id="{{$info->id}}" data-toggle="modal" data-target=".bs-example-modal-lg" aria-hidden="true" style="cursor:pointer;">
                                            <button class="btn btn-sm btn-default" data-toggle="tooltip" title="Assigned User & Comments" data-placement="top"> <i class="fa fa-pencil-square-o" aria-hidden="true"></i> </button>
                                        </span>
                                        <a onclick="return confirm ('want to delete?')" href="{{url("admin/remove_task/$info->id")}}" class="btn btn-sm btn-default" data-toggle="tooltip" title="Delete" data-placement="top">
                                            <i class="fa fa-trash-o" aria-hidden="true"></i>
                                        </a>
                                    </td>
                                </tr>   
                            @endforeach                         
                        </tbody>
                    </table>
                    @else
                        <br/><p class="text-center text-danger"> Tasks is Empty!</p>
                    @endif 
                    <hr>
                    </hr>
                </div>
                <div class="panel-body text-center">
                    <div class=" add-task-row">
                    </div>
                    <div class="table-foot">
                        {{ $tasks->links() }}
                    </div>
                </div>
            </section>
        </div>
    </div>
</section>
<!-- row end -->
<!-- /.content -->


<!-- Modal Add Task -->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="gridSystemModalLabel">{{$title}}</h4>
          </div>
          <div class="modal-body">

            <form role="form" action="{{url('admin/add_task')}}" method="POST">
                {!! csrf_field() !!}
                <div class="form-group">
                    <label for="Add new Project">
                        New Task
                    </label>
                    <input name="name" class="form-control" id="new-project" placeholder="Add new task" required="" type="new-project">
                    </input>
                </div>
                <div class="form-group">
                    <label for="Add new Project">
                        Type
                    </label>
                    <select name="task_type" id="" class="form-control">
                        <option value="0">Select project</option>
                        <option value="1">Regular</option>
                        <option value="2">Normal</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="priority">
                        Priority
                    </label>
                    <select name="priority" class="form-control" id="priority" required>
                            <option disabled="" selected="" value="">Choice Task Priority</option>
                            <option value="1">Low</option>
                            <option value="2">Mid</option>
                            <option value="3">High</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="proj">
                        Projects
                    </label>
                    <select name="proj_id" id="proj" class="form-control" required>
                        <option value="0">Select project</option>
                        @if(!empty($projectss))
                            @foreach($projectss as $pro)
                                <option value="{{$pro->id}}">{{$pro->name}}</option>
                            @endforeach
                        @endif
                    </select>
                </div>
                <div class="form-group">
                    <label for="user_id">
                        User
                    </label>
                    <select name="user_id" id="user_id" class="form-control" required>
                        <option value="0">Select project</option>
                        @if(!empty($users))
                            @foreach($users as $user)
                                <option value="{{$user->id}}">{{$user->name}}</option>
                            @endforeach
                        @endif
                    </select>
                </div>
                <div class="form-group">
                    <label for="dead_line">
                        Deadline
                    </label>
                    <input name="dead_line" id="dead_line" type="text" class="form-control date" placeholder="Select Date and Time" required="">
                    </input>
                </div>
                <div class="form-group">
                    <label for="Add new Project">
                        Description
                    </label>
                    <input name="description" class="form-control" id="new-project" placeholder="Description" type="new-project">
                    </input>
                </div>
                <div class="form-group">
                    <label for="Add new Project">
                        Estimated Time(In hours)
                    </label>
                    <input name="estimated_time" class="form-control" id="new-project" placeholder="Estimated time in hour" type="new-project">
                    </input>
                </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">Add</button>
          </div>
          </form>  
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- Modal assign -->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
     <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="gridSystemModalLabel">Assign Task</h4>
          </div>
          <div class="modal-body">

            <form role="form" action="{{url('admin/assign_task')}}" method="POST">
                {!! csrf_field() !!}
                
                <div class="form-group">
                    <label for="Add new Project">
                        Projects
                    </label>
                    <select name="proj_id" id="" class="cls-proj form-control">
                        <option value="0">Select project</option>
                        @if(!empty($projectss))
                            @foreach($projectss as $pro)
                                <option value="{{$pro->id}}">{{$pro->name}}</option>
                            @endforeach
                        @endif
                    </select>
                </div>
                <div class="form-group">
                    <label for="Add new Project">
                        Task
                    </label>
                    <select name="task_id" id="" class="cls-tasks form-control">
                        <option value="0">Select project first</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="Add new Project">
                        Assign To 
                    </label>
                    <select name="types" id="id-group-user" class="form-control">
                        <option value="0">Select project</option>
                        <option value="1">Group</option>
                        <option value="2">User</option>
                    </select>
                </div>
                <div class="form-group cls-group">
                    <label for="Add new Project">
                        Group
                    </label>
                    <select name="group_id" id="" class="form-control">
                        @foreach($groups as $grps)
                            <option value="{{$grps->id}}">{{$grps->group_name}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group cls-user">
                    <label for="Add new Project">
                        User
                    </label>
                    <select name="user_id" id="" class="form-control">
                        @foreach($users as $usr)
                            <option value="{{$usr->id}}">{{$usr->name}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <label for="Add new Project">
                        Estimated Time(In hours)
                    </label>
                    <input name="estimated_time" class="form-control" id="new-project" placeholder="Estimated time in hour" type="new-project">
                    </input>
                </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">Assign</button>
          </div>
          </form>  
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!-- Modal assign task -->
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="gridSystemModalLabel">Assign Task</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                <script src="{{URL::asset('assets/ckeditor/ckeditor.js')}}"></script>
                    <div class="col-md-7">
                        <b>Assinged users:</b> 
                        <div class="assinged-users">
                            
                        </div>
                    </div>
                    <div class="col-md-5">
                    

                        <input type="hidden" name="id_task_id" id="id_task_id" value="">
                        
                        <div class="form-group">
                            <label for="Add new Project">
                                User
                            </label>
                            <select name="user_id" id="id_user_id" class="form-control cls-proj-user">
                                
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="Add new Project">
                                Estimated Time
                            </label>
                            <br>
                            <input type="text" id="id_estimated_time" name="estimated_time" class="form-control">
                            
                        </div>

                        <div class="form-group">
                            <button class="btn btn-primary assign-task-user">Assign</button>
                        </div>
                    
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div style="margin-bottom:10px;">
                            <b>Details:</b> <span class="cls-task-details"></span>
                        </div>
                        <textarea class="form-control" name="comment_txt" id="comment_txt" cols="" rows="2" placeholder="Post comment here"></textarea>
                        <button class="btn btn-success add-task-comment" style="margin-top:5px;">Post Comment</button>
                        <button class="btn btn-success add-task-comment-doc" style="margin-top:5px;" data-toggle="modal" data-target="#add_doc_task_modal">Attach Documnet</button>
                        <br><br>
                        <b>Comments:</b><br>
                        <div class="comments-cls"  style="height:400px;overflow:scroll;">
                            
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                    <br/>
                    <b>Activity Logs:</b><br>
                        <div class="show-logs" style="height:150px;overflow:scroll;">
                            
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div class="row">
                    <div class="col-md-10">
                        Change status to: 
                        <button data-id='2' class="btn btn-primary cls-change-created btn-xs">In-process</button>
                        <span class="show-change-btn">
                            <button data-id='3' class="btn btn-primary cls-change-created btn-xs">Completed</button>
                            <button data-id='4' class="btn btn-primary cls-change-created btn-xs">Checking</button>
                            <button data-id='5' class="btn btn-primary cls-change-created btn-xs">Bug-fixing</button>
                            <button data-id='6' class="btn btn-primary cls-change-created btn-xs">Done</button>    
                        </span>
                    </div>
                    <div class="col-md-2">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Assign task finished -->

@endsection

@section('script')
<script type="text/javascript">

    $(document).ready(function(){
        $('.cls-group').hide();    
        $('.cls-user').hide();    
    });

    $('.cls-proj').change(function(event){
        
        var proj_id = $(this).val();
        
        $.ajax({
            url: "{{url("admin/change_tast_by_proj")}}",
            type: 'POST',
            data: { proj_id:proj_id},
        })
        .done(function(data){
            $('.cls-tasks').html(data);
        });
        
    });

    $('#id-group-user').change(function(event)
    {    
        var chk_id = $(this).val();

        if(chk_id == 1){
            $('.cls-group').show();    
            $('.cls-user').hide();        
        }
        else if(chk_id == 2){
            $('.cls-group').hide();    
            $('.cls-user').show();
        }
        else{
            $('.cls-group').hide();    
            $('.cls-user').hide();
        }
    });
</script>
<script src="{{URL::asset('assets/js/jquery.datetimepicker.full.min.js')}}" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    
            $( ".date" ).datetimepicker({
                dateFormat: 'dd/mm/yy',
                timeFormat: 'HH:mm',
            });
        //jQuery('#datetimepicker').datetimepicker();
    $('.bs-example-modal-lg').on('shown.bs.modal', function () {
            datePicker1();
        });
  
        function datePicker1(){
            $( "#id_estimated_time" ).datetimepicker({
            });
        }
        jQuery('#datetimepicker').datetimepicker({
          format:'Y-m-d H:i:s',
          lang:'ru'
        });

        $(document).ready(function() {
            var timeout = setTimeout("location.reload(true);",600000);
            function resetTimeout() {
                clearTimeout(timeout);
                timeout = setTimeout("location.reload(true);",600000);
            }
            $('.cls-assign').click(function(event)
        {
            var proj_id = $('.cls-project-id').val();
            var task_id = $(this).data('task_id');
            $('#id_task_id').val(task_id);
    
            $.ajax({
                    url: "{{url('admin/user_list_for_task_assign')}}",
                    type: 'POST',
                    data: {proj_id: proj_id, task_id: task_id},
                })
                .done(function(data) {
                    var status = data[4];
                    if(status > 1)
                    {
                        $('.show-change-btn').show();
                    }
                    else{
                        $('.show-change-btn').hide();
                    }
    
                    $('.cls-proj-user').html(data[0]);
                    $('.assinged-users').html(data[1]);
                    $('.show-logs').html(data[2]);
                    $('.comments-cls').html(data[3]);
                    $('.cls-task-details').html(data[5]);
                    $('#id_estimated_time').val(data[6]);
                });
                    
        });
    
        $('.assign-task-user').click(function(event)
        {
            //url('admin/task_assign_to_user')
            //var id_estimated_time = $('#id_estimated_time').val();
            var id_estimated_time = $('#id_estimated_time').val();
            //var min = $('#id_estimated_time_min').val();
            //var id_estimated_time = hours+":"+min+":00";
            
            var id_user_id = $('#id_user_id').val();
            var id_task_id = $('#id_task_id').val();
            
            if(id_estimated_time !=''){
                $.ajax({
                    url: "{{url('admin/task_assign_to_user')}}",
                    type: 'POST',
                    data: {id_estimated_time: id_estimated_time,id_user_id: id_user_id,id_task_id: id_task_id},
                })
                .done(function(data) {
                    $('.assinged-users').html(data);
                });
            }
            else{
                alert('Please define time estimate!');
            }
            
        });
    
    
        $('.assinged-users').on('click','.remove-task-assign-user',function(){
    
            var id = $(this).prev('input').val();
            var task_id = $('#id_task_id').val();
    
            $.ajax({
                url: "{{url('admin/remove_assign_task_user')}}",
                type: 'POST',
                data: {id: id,task_id: task_id},
            })
            .done(function(data) {
                $('.assinged-users').html(data);
            });
    
        });
    
        $('.add-task-comment').click(function(event) {
            
            var comment = $('#comment_txt').val();
            var task_id = $('#id_task_id').val();
    
            if(comment.length > 0){
                $.ajax({
                    url: "{{url('admin/add_task_comment')}}",
                    type: 'POST',
                    data: {comment: comment,task_id: task_id},
                })
                .done(function(data) {
                    
                    $('.comments-cls').html(data);
                });
            }
            else{
                alert('Please fill-up comment field.');
            }
            
        });
        $('.comments-cls').on('click','.edit_comment',function(){
        
            var id = $(this).data('id');
            
            $.ajax({
                url: '{{url('admin/edit_comment_form')}}',
                type: 'POST',
                data: {id: id},
            })
            .done(function(data) {
                $('.modal-edit').modal('show');
                $('.update-comment').val(data['comment']);
                $('.update-comment-id').val(data['id']);
            });
            
        });
    
        $('.comments-cls').on('click','.remove_comment',function(){
            
            var id = $(this).data('id');
            var task_id = $('#id_task_id').val();
    
            $.ajax({
                url: "{{url('admin/remove_comment')}}",
                type: 'POST',
                data: {id: id,task_id: task_id},
            })
            .done(function(data) {
                $('.comments-cls').html(data);
            }); 
        });
    
        $('.save-updated-comment').click(function(event) {
            
            var id = $('.update-comment-id').val();
            var comment = $('.update-comment').val();
            var task_id = $('#id_task_id').val();
    
            $.ajax({
                url: '{{url('admin/save_update_comment')}}',
                type: 'POST',
                data: {id: id,comment: comment,task_id: task_id},
            })
            .done(function(data) {
                $('.modal-edit').modal('hide');
                $('.comments-cls').html(data);
                $('.update-comment').val('');
                alert('Data updated successfully!');
            });
            
        });
    
        $('.cls-change-created').click(function(event)
        {
            if(confirm("Are you sure you want to change status ?")) 
            {
                var task_id = $('#id_task_id').val();
                var status = $(this).data('id');
                
                
                $.ajax({
                    url: "{{url('admin/change_to_process')}}",
                    type: 'POST',
                    data: {task_id: task_id, status: status},
                })
                .done(function(data) {
                    
                    if(data == 'Yes'){
                        alert('Status Changed !!');
                        location.reload();
                    }
                    else{
                        alert('Status Not Changed !!');
                    }
                });
                
            }
        });
    
        $('.upload-cls').click(function(event)
        {        
            var id = $('.cls-project-id').val();
            $('.cls-proj-id').val(id);
        });
    
        $('.cls-pm').click(function(event) {
            
            var id = $(this).val();
            var pm_status;
    
            if($(this).attr('checked')){
                pm_status = 1 ; //check
            }
            else{
                pm_status = 0 ; //uncheck
            }
    
            $.ajax({
                url: "{{url('admin/make_pm')}}",
                type: 'POST',
                data: {id: id,pm_status: pm_status},
            })
            .done(function(data) {
                alert(data);
            });
            
        });
    
        $('.add-task-comment-doc').click(function(event) {
            var task_id = $('#id_task_id').val();
            $('.cls-task-doc-id').val(task_id);
        });
    
        $('.attatch-close-btn').click(function(event) {
            
            location.reload();
        });
    
        $('.attatchment-doc-comment').click(function(event) {
            
            //this event only for fetch the comments after close 
            //attatchemnt dropzone.
            var comment = '';
            var task_id = $('#id_task_id').val();
    
            $.ajax({
                url: "{{url('admin/add_task_comment')}}",
                type: 'POST',
                data: {comment: comment,task_id: task_id},
            })
            .done(function(data){
                
                $('.comments-cls').html(data);
            });        
        });
        });
    </script>
@endsection