@extends('layouts.admin')

@section('content')

  <div class="row">
    <div class="col-md-12">
      
    </div>
    <div class="col-lg-9 col-md-9">
      <div class="card">
        <div class="card-header card-header-primary">
          <h4 class="card-title pull-left mr-auto">Manage Production</h4>
          <ul class="pull-right mb-0" style="list-style: none;">
            <li class="pull-left ml-2">
              <select id="status" class="form-control" onchange="refreshTable()">
                <option value="0">In Progress</option>
                <option value="complete">Complete</option>
              </select>
            </li>
          </ul>
        </div>
        <div class="card-body table-responsive">
          @if ( session('message') )
            <div class="alert alert-{{ (session('alert')) ? session('alert') : 'success' }} bg-gradient-{{ (session('alert')) ? session('alert') : 'success' }}">
              {{ session('message') }}
            </div>
          @endif

          <table class="table table-hover" id="dataTable" width="100%" cellspacing="0">
            <thead class="text-primary">
              <th></th>
              <th>Part</th>
              <th style="min-width: 80px;">Status</th>
              <th style="max-width: 100px;">CAM</th>
              <th>MAT</th>
              <th>Est. time</th>
              <th>Dead line</th>
              <th style="min-width: 100px;">Comment</th>
              @if($department->file > 0)
              <th style="max-width: 80px;">File</th>
              @endif
              <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">
  <style type="text/css">
    a.disabled {
      pointer-events: none;
      cursor: default;
    }
  </style>
@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('model.task.ajax')}}",
              "type": "POST",
              data: dataTableValue
          },
          "paging": true,
          "processing": false,
          "serverSide": true,
          "ordering": false,
          "lengthChange": false,
          "columns": [
              { "data": "warning" },
              { "data": "job_name" },
              { "data": "status" },
              { "data": "file_part" },
              { "data": "file_text" },
              { "data": "estimate_time" },
              { "data": "dead_line" },
              { "data": "comment" },
              @if($department->file > 0)
              { "data": "dep_file" },
              @endif
              { "data": "action" }
          ]
      });

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

      function refreshTable(){
          dataTable.ajax.reload();
      }

	</script>
@endsection