@extends('layouts.master')
@section('heading')
    <h1>All tasks</h1>
@stop

@section('content')
<!-- Modal -->
<div id="req_notify"></div>
<div class="modal fade" id="myModal" 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="myModalLabel">Request date extension </h4>
        </div>
        <div class="modal-body">
            <input type="hidden" name="task_id" id="t_id">
       <div ><b>Title:</b><i id="title"></i></div>
       <div ><b>Description:</b><i id="desc"></i></div>
       <div ><b>Deadline:</b><i id="deadline"></i></div>
       <div ><b>Status:</b><i id="status"></i></div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary req">Request</button>
        </div>
      </div>
    </div>
  </div>
@if(!Entrust::hasRole('sales reps'))
<div class="table-responsive">
    <table class="table table-hover dataTable" id="tasks-table">
        <thead>
        <tr>

            <th>{{ __('Title') }}</th>
            <th>{{ __('Created at') }}</th>
            <th>{{ __('Deadline') }}</th>
            <th>{{ __('Assigned') }}</th>
            <th>{{ __('Action') }}</th>

        </tr>
        </thead>
    </table>
</div>
@stop

@push('scripts')
<script>
$(function () {
    $('#tasks-table').DataTable({
        processing: true,
        
        ajax: '{!! route('tasks.data') !!}',
        columns: [

            {data: 'title', name: 'title'},
            {data: 'created_at', name: 'created_at'},
            {data: 'deadline', name: 'deadline'},
            {data: 'user_assigned_id', name: 'user_assigned_id'},
            {data: 'action', name: 'action'}

        ]
    });
});
</script>

@endpush
@else
{{--  <button id="download-xlsx">d</button>  --}}
@if($viewid==2)
<el-tabs active-name="outstandingtasks" style="width:100%">
    <el-tab-pane label="Outstanding Tasks" name="outstandingtasks">
        <div id="tasks-table"></div>
    </el-tab-pane>
    <el-tab-pane label="Overdue Tasks" name="overdueTask" id="overdueTask">
        <div id="tasks-table2"></div>
    </el-tab-pane>
    <el-tab-pane label="Completed Tasks" name="completedtasks">
        <div id="tasks-table3"></div>
    </el-tab-pane>
</el-tabs>
@elseif($viewid==3)
<el-tabs active-name="completedtasks"  style="width:100%">
        <el-tab-pane label="Outstanding Tasks" name="outstandingtasks">
            <div id="tasks-table"></div>
        </el-tab-pane>
        <el-tab-pane label="Overdue Tasks" name="overdueTask" id="overdueTask">
            <div id="tasks-table2"></div>
        </el-tab-pane>
        <el-tab-pane label="Completed Tasks" name="completedtasks">
            <div id="tasks-table3"></div>
        </el-tab-pane>
    </el-tabs>
@else
<el-tabs active-name="overdueTask"  style="width:100%">
    <el-tab-pane label="Outstanding Tasks" name="outstandingtasks">
        <div id="tasks-table"></div>
    </el-tab-pane>
    <el-tab-pane label="Overdue Tasks" name="overdueTask" id="overdueTask">
        <div id="tasks-table2"></div>
    </el-tab-pane>
    <el-tab-pane label="Completed Tasks" name="completedtasks">
        <div id="tasks-table3"></div>
    </el-tab-pane>
</el-tabs>
@endif
@stop

@push('scripts')
<script>
    //Create status
var statusEditor = function(cell, onRendered, success, cancel){
    //cell - the cell component for the editable cell
    //onRendered - function to call when the editor has been rendered
    //success - function to call to pass the succesfully updated value to Tabulator
    //cancel - function to call to abort the edit and return to a normal cell

    //create and style editor
    var editor = $("<select><option value='complete'>Complete</option><option value='open'>Open</option></select>");
    editor.css({
        "padding":"3px",
        "width":"100%",
        "box-sizing":"border-box",
    });

    //Set value of editor to the current value of the cell
    editor.val(cell.getValue());

    //set focus on the select box when the editor is selected (timeout allows for editor to be added to DOM)
    onRendered(function(){
      editor.focus();
      editor.css("height","100%");
    });

    //when the value has been set, trigger the cell to update
    editor.on("change blur", function(e){
        success(editor.val());
    });

    //return the editor element
    return editor;
};

//Build Tabulator
$("#tasks-table").tabulator({
    height:"auto", // set height of table, this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
    responsiveLayout:true, 
    layout:"fitColumns",//fit columns to width of table (optional)
    placeholder:"No Data Set",
    columns:[
        {title:"Title", field:"title"},
        {title:"Description", field:"description"},
        {title:"Deadline", field:"deadline", align:"center"},
        {title:"Name", field:"name"},
        {title:"Status", field:"status", editor:statusEditor}
    ],
    cellEdited:function(cell){
                   //This callback is called any time a cell is edidted
                   // This callback is called any time a cell is edited.
                   $.ajax({
                    url: '{!! url('tasks/editCell') !!}',
                    data: {"data":cell.getRow().getData(),'_token':'{!!csrf_token()!!}'},
                    type: "post",
                    success: function(response, textStatus, xhr){
                       // console.log(response);
                        $("#tasks-table").tabulator("setData", '{!! route('tasks.data') !!}', {}, "GET");
                    },
                    error: function(XMLHttpRequest, textStatus, error){
                      //  console.log(error);
                      alert("Error has occured,put valid value");
                    }
                  }) 
    },
});

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//Build Tabulator
$("#tasks-table2").tabulator({
    height:"auto", // set height of table, this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
    responsiveLayout:true, 
    layout:"fitColumns",//fit columns to width of table (optional)
    placeholder:"No Data Set",
    columns:[
        {title:"Title", field:"title"},
        {title:"Description", field:"description"},
        {title:"Deadline", field:"deadline", align:"center"},
        {title:"Name", field:"name"},
        {title:"Status", field:"status"}
    ],
    cellEdited:function(cell){
                   //This callback is called any time a cell is edidted
                   // This callback is called any time a cell is edited.
                   $.ajax({
                    url: '{!! url('tasks/editCell') !!}',
                    data: {"data":cell.getRow().getData(),'_token':'{!!csrf_token()!!}'},
                    type: "post",
                    success: function(response, textStatus, xhr){
                       // console.log(response);
                       $("#tasks-table2").tabulator("setData", '{!! route('tasks.getOverdueTask') !!}', {}, "GET"); 
                    },
                    error: function(XMLHttpRequest, textStatus, error){
                      //  console.log(error);
                      alert("Error has occured,put valid value");
                    }
                  }) 
    },
    rowClick:function(e,row){
        document.getElementById('title').innerHTML= row.getData().title;
        document.getElementById('desc').innerHTML= row.getData().description;
        document.getElementById('status').innerHTML= row.getData().status;
        document.getElementById('deadline').innerHTML= row.getData().deadline;
        document.getElementById('t_id').value= row.getData().id;
       
        $('#myModal').modal('show');
    }
});

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//Build Tabulator
$("#tasks-table3").tabulator({
    height:"auto", // set height of table, this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
    responsiveLayout:true, 
    layout:"fitColumns",//fit columns to width of table (optional)
    placeholder:"No Data Set",
    columns:[
        {title:"Title", field:"title"},
        {title:"Description", field:"description"},
        {title:"Deadline", field:"deadline", align:"center"},
        {title:"Name", field:"name"},
        {title:"Status", field:"status", editor:statusEditor}
    ],
    cellEdited:function(cell){
                   //This callback is called any time a cell is edidted
                   // This callback is called any time a cell is edited.
                   $.ajax({
                    url: '{!! url('tasks/editCell') !!}',
                    data: {"data":cell.getRow().getData(),'_token':'{!!csrf_token()!!}'},
                    type: "post",
                    success: function(response, textStatus, xhr){
                       // console.log(response);
                        $("#tasks-table3").tabulator("setData", '{!! route('tasks.getCompletedTask') !!}', {}, "GET");
                    },
                    error: function(XMLHttpRequest, textStatus, error){
                      //  console.log(error);
                      alert("Error has occured,put valid value");
                    }
                  }) 
    },
});

$("#tasks-table").tabulator("setData", '{!! route('tasks.data') !!}', {}, "GET");

if({!!$viewid!!}==1){
    $("#tasks-table2").tabulator("setData", '{!! route('tasks.getOverdueTask') !!}', {}, "GET");
}
else({!!$viewid!!}==3)
{
    $("#tasks-table3").tabulator("setData", '{!! route('tasks.getCompletedTask') !!}', {}, "GET"); 
}

$('.el-tabs__item').on('click',function(e){
   if(e.target.innerHTML=="Overdue Tasks"){
 $("#tasks-table2").tabulator("setData", '{!! route('tasks.getOverdueTask') !!}', {}, "GET"); 
   }
   else if(e.target.innerHTML=="Completed Tasks")
   {
    $("#tasks-table3").tabulator("setData", '{!! route('tasks.getCompletedTask') !!}', {}, "GET"); 
   }
   else{
    $("#tasks-table").tabulator("setData", '{!! route('tasks.data') !!}', {}, "GET"); 
   }
})
$("#download-xlsx").click(function(){
    $("#tasks-table").tabulator("download", "csv", "data.csv");
});

$('.req').on('click',function(){

    var id = $('input[name="task_id"]').val();
    console.log('ff',id);
    $.ajax({
        type:'post',
        url:'{!! route('tasks.requestDate')!!}',
        data:{'task_id':id,'_token':'{!!csrf_token()!!}'}
    })
    .done(function(res){
        $('#myModal').modal('hide');
        console.log(res)
        if(res==1){
        document.getElementById('req_notify').innerHTML =`<div class="alert alert-success">
            <strong>Success!</strong> Your has been sent succefully.
          </div>`;
        }
        else{

            document.getElementById('req_notify').innerHTML =`<div class="alert alert-warning">
                <strong>Warning!</strong> You have already requested date extension for this task.
              </div>`;
        }
        setTimeout(function(){
            document.getElementById('req_notify').innerHTML="";
        },4000);

       
    })
})
</script>
@endpush
@endif