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

@section('content')
{{--  <button id="download-xlsx">d</button>  --}}
@if($id==0)
<el-tabs active-name="overdueTask" style="width:100%">
    <el-tab-pane label="Overdue Tasks" name="overdueTask">
       <div id="tasks-table2"></div>
    </el-tab-pane>
    <el-tab-pane label="Completed Tasks" name="completedtasks" id="overdueTask">
        <div id="tasks-table3"></div>
    </el-tab-pane>
    <el-tab-pane label="Date Extension" name="extendtasks" id="extendtasks">
            <div id="tasks-table4"></div>
        </el-tab-pane>
    <el-tab-pane label="Task Logs" name="outstandingtasks">
        <div id="tasks-table"></div>
    </el-tab-pane>
</el-tabs>
@else
<el-tabs active-name="extendtasks" style="width:100%">
    <el-tab-pane label="Overdue Tasks" name="overdueTask">
       <div id="tasks-table2"></div>
    </el-tab-pane>
    <el-tab-pane label="Completed Tasks" name="completedtasks" id="overdueTask">
        <div id="tasks-table3"></div>
    </el-tab-pane>
    <el-tab-pane label="Date Extension" name="extendtasks" id="extendtasks">
            <div id="tasks-table4"></div>
        </el-tab-pane>
    <el-tab-pane label="Task Logs" name="outstandingtasks">
        <div id="tasks-table"></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;
};
var deadline = function(cell,onRendered,success,cancel){
    var editor = $('<input type="date">');
    editor.css({
        'padding':'3px',
        'width':'100%',
        'box-sizing':'border-box'
    });
    editor.val(cell.getValue());
    onRendered(function(){
        editor.focus();
        editor.css("height","100%");

    })
    editor.on('change blur',function(e){
        success(editor.val());
    })
    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.getAllOverdueTask') !!}', {}, "GET"); 
                    },
                    error: function(XMLHttpRequest, textStatus, error){
                      //  console.log(error);
                      alert("Error has occured,put valid value");
                    }
                  }) 
    }
});

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//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.getallCompletedTask') !!}', {}, "GET");
                    },
                    error: function(XMLHttpRequest, textStatus, error){
                      //  console.log(error);
                      alert("Error has occured,put valid value");
                    }
                  }) 
    },
});

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//Build Tabulator
$("#tasks-table4").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", editor:"input"},
        {title:"Description", field:"description" ,editor:"input"},
        {title:"Deadline", field:"deadline", align:"center", editor:deadline},
        {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.
                   console.log(cell.getRow().getData());
                   $.ajax({
                    url: '{!! url('tasks/adjustCellDate') !!}',
                    data: {"data":cell.getRow().getData(),'_token':'{!!csrf_token()!!}'},
                    type: "post",
                    success: function(response, textStatus, xhr){
                        console.log(response);
                        $("#tasks-table4").tabulator("setData", '{!! route('tasks.getallExtededTask') !!}', {}, "GET");
                    },
                    error: function(XMLHttpRequest, textStatus, error){
                        
                      alert("Error has occured,put valid value");
                    }
                  })
                  .done(function(res){
                    console.log(res);
                  })

    },
});


//check which tab to view,0=OverDue and 1=DateExtension
if('{!!$id!!}'==0){
    $("#tasks-table2").tabulator("setData", '{!! route('tasks.getAllOverdueTask') !!}', {}, "GET"); 
}
else
{
    $("#tasks-table4").tabulator("setData", '{!! route('tasks.getallExtededTask') !!}', {}, "GET");  
}


$('.el-tabs__item').on('click',function(e){
   if(e.target.innerHTML=="Overdue Tasks"){
 $("#tasks-table2").tabulator("setData", '{!! route('tasks.getAllOverdueTask') !!}', {}, "GET"); 
   }
   else if(e.target.innerHTML=="Completed Tasks")
   {
    $("#tasks-table3").tabulator("setData", '{!! route('tasks.getallCompletedTask') !!}', {}, "GET"); 
   }
   else if(e.target.innerHTML=="Date Extension"){
    $("#tasks-table4").tabulator("setData", '{!! route('tasks.getallExtededTask') !!}', {}, "GET");  
   }
   else{
    $("#tasks-table").tabulator("setData", '{!! route('tasks.tasklog') !!}', {}, "GET"); 
   }
})

</script>
@endpush