@extends('layouts.admin')

@section('content')
<div class="container-fluid">
  <div class="row">
    <div class="col-md-12">
      
    </div>
    <div class="col-lg-12 col-md-12">
      <div class="card">
        <div class="card-header card-header-primary">
          <h4 class="card-title pull-left mr-auto">Task</h4>
          <ul class="pull-right mb-0" style="list-style: none;">
            <li class="pull-left ">
              <a href="{{ route('task.add.task') }}" class="btn btn-primary btn-round pull-right ml-auto">Add Task<div class="ripple-container"></div></a>
            </li>
            <li class="pull-left ml-2">
              <select id="status" class="form-control" onchange="refreshTable()">
                <option value="0">Status All</option>
                <option value="notstart">Not start</option>
                <option value="starting">Starting</option>
                <option value="complete">Complete</option>
              </select>
            </li>
          </ul>
          
        </div>
        <div class="card-body table-responsive">
          @if ( session('message') )
            <div class="alert alert-success bg-gradient-success">
              {{ session('message') }}
            </div>
          @endif
          <table class="table table-hover" id="dataTable" width="100%" cellspacing="0">
            <thead class="text-primary">
              <th>ID</th>
              <th>Job</th>
              <th>Department</th>
              <th>Estimate time</th>
              <th>Status</th>
              <th></th>
            </thead>
            <tbody>
              
            </tbody>
          </table>
        </div>
    </div>

  </div>
</div>
@endsection 

@section('style')
  <link href="{{ asset('assets/vendor/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet">
@endsection

@section('script')

    <script src="{{ asset('assets/vendor/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/vendor/datatables/dataTables.bootstrap4.min.js') }}"></script>

    <script type="text/javascript">
      
      var dataTable = $('#dataTable').DataTable({
          "ajax": {
              "url": "{{route('task.ajax')}}",
              "type": "POST",
              data: dataTableValue
          },
          "paging": true,
          "processing": false,
          "serverSide": true,
          "ordering": false,
          "columns": [
              { "data": "key_id" },
              { "data": "job_name" },
              { "data": "dep_name" },
              { "data": "estimate_time" },
              { "data": "status" },
              { "data": "action" }
          ]
      });

      function dataTableValue(data){

          data._token = '{{ csrf_token() }}';
          data.status = jQuery('#status').val();
          return data;
      }

      function refreshTable(){
          dataTable.ajax.reload();
      }
    </script>
@endsection