@extends('layouts.main')
@section('title', __('form.task') . " : " .$rec->title )
@section('content')
 @php
        $route_name = Route::currentRouteName();
        $group_name = app('request')->input('group');
        $sub_group_name = app('request')->input('subgroup');
    @endphp

<style>

.comment_form{
    display: none;
}
</style>

    <div class="main-content">
        
        <div class="row">
            <div class="col-md-8">

                <h5>@lang('form.task') : ({{ $rec->number }}) {{ $rec->title }}</h5>

                <hr>
                <ul class="nav nav-tabs">
                  <li class="nav-item">
                    <a class="nav-link {{ is_active_nav('', $group_name) }}" href="{{ route('show_task_page', $rec->id)}}">@lang('form.details')</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link {{ is_active_nav('timesheet', $group_name) }}" href="{{ route('show_task_page', $rec->id)}}?group=timesheet">@lang('form.timesheet')</a>
                  </li>
    
                </ul>

                     
                        <br>                       
                        <small><b>@lang('form.description')</b></small>
                        <br>
                        <p style="font-size: 14px;"></p>
                        @include('task.partials.show.parent_task')
                        @include('task.partials.show.sub_tasks')
                        <hr>
                        @include('task.partials.show.comments')     
                    
            </div>

            <div class="col-md-4" style="background-color: #f0f5f7; margin-top: -15px; margin-bottom: -15px;">
                @include('task.partials.show.task_information')                    
            </div>


        </div>

          
    </div>
@endsection
@section('onPageJs')

@yield('innerPageJS')
    <script>

    function atWho()
        {
            $('.comment').atwho({
                at: "@",
                
                insertTpl: '@[${key}]',
                displayTpl: "<li>${name}</li>",
                
                callbacks: {
                    remoteFilter: function(query, callback){
                        // $.getJSON('{{ route('get_members_for_suggestion_list') }}'+query, function(data){
                        //     console.log(data);
                        //     callback(data);
                        // });
                        if(query)
                        {
                            $.getJSON('{{ route('get_members_for_suggestion_list') }}' , {q: query}, function(data) {
                                callback(data);
                            });
                            
                        }
                        
                    }
          
                }
            });
        }

        $(document).on('keypress', '.comment', function() {
            atWho();
        });



        $(function () {

            
            atWho();


        dataTable = "";
            
        dataTable = $('#data').DataTable({
            dom: 'B<"toolbar">frtip',
            "lengthMenu": [[10, 50, 100, 200], ['10 rows', '50 rows', '100 rows', '200 rows']],
            //"lengthMenu": [[15, 25, 50, 75, 100, -1], [15, 25, 50, 75, 100, "All"]],
            buttons: [
                {
                    init: function(api, node, config) {
                        $(node).removeClass('btn-secondary')
                    },
                    className: "btn-light btn-sm",
                    extend: 'collection',
                    text: 'Row Filter',
                    buttons: [
                        'pageLength'
                    ]
                }
            ],
            //'lengthMenu': [[ 10, 50, 100, 200], [ '10 rows', '50 rows', '100 rows', '200 rows' ]],
            searching: true,
            "language": {
                "lengthMenu": '_MENU_ ',
                "search": '',
                "searchPlaceholder": "{{ __('form.search') }}",
            },
            "lengthChange": false,
            responsive: true,
            processing: true,
            serverSide: true,
            //iDisplayLength: 5
            pageLength: 10,
            ordering: false,
            // "columnDefs": [
            //     { className: "text-right", "targets": [2,4] },
            //     { className: "text-center", "targets": [5] }
            //
            //
            // ],
            "ajax": {
                "url": '{!! route("datatable_tasks_comments", $rec->id) !!}',
                "type": "POST",
                'headers': {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                "data": function ( d ) {