@extends('layouts.admin')

@section('content')
<div class="container-fluid">
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
      <h1 class="h3 mb-0 text-gray-800">Dashboard</h1>
      <!-- <a href="#" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i class="fas fa-download fa-sm text-white-50"></i> Generate Report</a> -->
    </div>

    <div class="row">
        <div class="col-lg-12 col-md-6 mb-4">
          <div class="card shadow mb-4">
            <div class="card-body">
              <ul style="list-style: none;">
                <li class="pull-left" style="display: flex;align-items: center;">
                  <div class="mr-2" style="background-color: #eee;width: 25px;height: 25px;"></div><span>Not Start</span>
                </li>
                <li class="pull-left ml-3" style="display: flex;align-items: center;">
                  <div class="mr-2" style="background-color: #f6c23e;width: 25px;height: 25px;"></div><span>Process</span>
                </li>
                <li class="pull-left ml-3" style="display: flex;align-items: center;">
                  <div class="mr-2" style="background-color: green;width: 25px;height: 25px;"></div><span>Completed</span>
                </li>
                <li class="pull-left ml-3" style="display: flex;align-items: center;">
                  <i class="fas fa-exclamation-triangle text-warning fa-lg mr-2"></i><span>No Mat or No Cam</span>
                </li>
              </ul>
              <br style="clear: both;">
              <table class="table table-bordered mt-2" id="dataTable" width="100%" cellspacing="0">
                <thead class="text-primary">
                  <th>ID</th>
                  <!-- <th>File</th> -->
                  <th>Detail</th>
                  <th>Status</th>
                </thead>
                <tbody>
                  
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="col-md-3" style="display: none;">
          <div class="row">
            @if( count($computer) > 0)

              @foreach($computer as $key=>$value)
                @if($value->ready > 0)
                  <div class="col-xl-12 col-md-12 mb-4">
                    <div class="card border-left-warning shadow h-100 py-2">
                      <div class="card-body">
                        <div class="row no-gutters align-items-center">
                          <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">{{$value->name}}</div>
                            <div class="h5 mb-0 font-weight-bold text-warning-800">{{$value->job_name}} working...</div>
                          </div>
                          <div class="col-auto">
                            <i class="fas fa-tv fa-2x text-warning"></i><br>
                            <a href="{{ route('pause.computer',['id'=>$value->task_id,'type'=>'job']) }}" class="btn btn-secondary btn-sm" style="font-size: 10px;color: #fff;">Pause</a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                @else
                  <div class="col-xl-12 col-md-12 mb-4">
                    <div class="card border-left-info shadow h-100 py-2">
                      <div class="card-body">
                        <div class="row no-gutters align-items-center">
                          <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">{{$value->name}}</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">Ready</div>
                          </div>
                          <div class="col-auto">
                            <i class="fas fa-tv fa-2x text-gray-300"></i>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                @endif
              @endforeach

            @else
              <div class="col-xl-12 col-md-12 mb-4">
                <div class="card border-left-primary shadow h-100 py-2">
                  <div class="card-body">
                    <a href="{{ route('computer.add') }}" class="btn-link-custom">
                      <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                          <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">No Computer</div>
                          <div class="h5 mb-0 font-weight-bold text-gray-800">Add computer click</div>
                        </div>
                        <div class="col-auto">
                          <i class="fas fa-external-link-alt fa-2x text-gray-300"></i>
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </div>
            @endif

          </div>
        </div>
    </div>
</div>

@endsection 

@section('style')
  <link href="{{ asset('assets/vendor/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet">
  <style type="text/css">
    .list-style-none{
      list-style: none;
    }
    thead {
      display:none;
    }
    .table td{
      padding: 0;
    }
    .table td:nth-child(1){
      width: 150px;
      padding: 15px;
    }
    /*.table td:nth-child(2){
      width: 20px;
      padding: 15px;
      text-align: center;
    }*/
    .task_list li{
      padding: 15px;
    }
    .task_list li.complete{
      background-color: green;
      color: #fff;
    }
    .task_list li.notstart{
      background-color: #eee;
      color: #000;
    }
    .task_list li.starting{
      background-color: #f6c23e;
      color: #000;
    }
    .task_list{
      padding-inline-start: 2px;
    }
  </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 myInterval;
      $(function(){
        myInterval = setInterval(reloadAjaxData, 10000);
      });

      function reloadAjaxData(){
        clearInterval(myInterval);
        dataTable.ajax.reload(null, false);
        myInterval = setInterval(reloadAjaxData, 10000);
      }

      var dataTable = $('#dataTable').DataTable({
          "ajax": {
              "url": "{{route('manager.dashboard.ajax')}}",
              "type": "POST",
              data: dataTableValue
          },
          "paging": true,
          "processing": false,
          "serverSide": true,
          "ordering": false,
          "lengthChange": false,
          "searching": false,
          "columns": [
              { "data": "job_name" },
              // { "data": "job_file" },
              { "data": "task_detail" },
              { "data": "job_status" },
          ]
      });

      function dataTableValue(data){

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

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