@extends('layouts.main')
@section('title', __('form.dashboard'))
@section('content')

<style>
div.dataTables_filter input {
    margin-left: 0 !important;
    
}
/*td div{
    display: none !important;
}*/
.hide{
    display: none;
}
table.dataTable {

    margin-top: 0 !important;
    border-top: 0 !important;
}
.dataTables_info{
    font-size: 13px;
}
</style>

    <div>

       @if(auth()->user()->is_administrator)
       <div class="main-content" style="margin-bottom: 10px !important;">
            @include('dashboard_stat')
       </div>
       @endif

        <div class="row">
             

            <div class="col-md-8">
                <div  class="main-content">
                   <h5> @lang('form.my_tasks')</h5>
                   <hr>
                    <table class="table table-striped table-bordered" cellspacing="0" width="100%" id="data">
                        <thead>
                       <tr>
                            <th>@lang("form.task_#")</th>
                            <th>@lang("form.name")</th>
                            <th>@lang("form.status")</th>
                            <th style="display: none;">@lang("form.start_date")</th>
                            <th style="display: none;">@lang("form.due_date")</th>
                            <th style="display: none;">@lang("form.assigned_to")</th>
                            <th style="display: none;">@lang("form.tags")</th>
                            <th>@lang("form.priority")</th>
                            <th style="display: none;">@lang("form.created_by")</th>
                         </tr>
                        </thead>
                    </table>
         
                </div>
            </div>

            <div class="col-md-4">

                <div  class="main-content">
                    @include('todo')
                </div>  

                <div  class="main-content border rounded p-3 shadow-sm d-flex justify-content-between align-items-center">
                    @include('monthly_task')
                </div>    
                
                <div  class="main-content border rounded p-3 shadow-sm d-flex justify-content-between align-items-center">
                    @include('user_contribute')
                </div>

            </div> 

         </div>   

        
    </div>
@endsection
@section('onPageJs')
    <script>
        $(function() {

        dataTable = "";
            
        dataTable = $('#data').DataTable({
            dom: 'Bfrtip',
            // "bInfo" : false,
            "bLengthChange": false,
            "lengthMenu": [[5, 50, 100, 200], ['5 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'
                    ]
                }
            ],
            "language": {
                "lengthMenu": '_MENU_ ',
                "search": '',
                "searchPlaceholder": "{{ __('form.search') }}",
                "infoFiltered": ""
            },
            // "oLanguage": { "sSearch": "" } ,
            // "dom": '<"float-md-left"f><"float-md-right"l>tip',
            searching: true,
            responsive: true,
            processing: true,
            serverSide: true,
            //iDisplayLength: 5
            pageLength: 5,
            ordering: false,
            "columnDefs": [
                { "visible": false, "targets": [3,4,5,6,8] },
                { className: "text-left", "targets": [2] }
            ],
            "ajax": {
                "url": '{!! route("datatables_tasks") !!}',
                "type": "POST",
                'headers': {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                "data": function ( d ) {
                   
                    d.assigned_to = "{{ auth()->user()->id }}";
                   
                }
            }
        }).
        on('mouseover', 'tr', function() {
            jQuery(this).find('div.row-options').show();
        }).
        on('mouseout', 'tr', function() {
            jQuery(this).find('div.row-options').hide();
        });

        $('.dataTables_filter input').attr("placeholder", "Search Here");