@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">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">Process</option>
                <option value="complete">Finish</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>Job no.</th>
              <th>Part</th>
              <th style="min-width: 80px;">Status</th>
              <th style="max-width: 100px;@if(isset($department->cam) && $department->cam==0) display: none; @endif">CAM</th>
              <th style="@if(isset($department->et) && $department->et==0) display: none; @endif">ET</th>
              <th>MAT</th>
              <th style="width: 70px;">Est. time</th>
              <th style="width: 80px;">End time</th>
              <th style="width: 80px;">Dead line</th>
              <th style="min-width: 100px;">Comment</th>
              @if(isset($department->file) && $department->file > 0)
              <th style="max-width: 80px;">File</th>
              @endif
              <th style="width: 160px;"></th>
            </thead>
            <tbody></tbody>
          </table>
        </div>
    </div>

  </div>

  <div class="col-3">
    <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('manager.pause.computer',['id'=>$value->task_id]) }}" 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">
                <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>
                  <div class="col-auto">
                    <i class="fas fa-tv fa-2x text-gray-300"></i>
                  </div>
                </div>
            </div>
          </div>
        </div>
      @endif

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

<!-- Modal Comment -->
<div class="modal fade" id="task_comment" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Comment</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
          <button type="button" data-dismiss="modal" class="btn btn-secondary">Close</button>
      </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, a.beforeorder {
      pointer-events: none;
      cursor: default;
      opacity: .65;
    }
  </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 all_time = 0;
      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_no" },
              { "data": "job_name" },
              { "data": "status" },
              @if(isset($department->cam) && $department->cam>0)
              { "data": "file_part" },
              @endif
              @if(isset($department->et) && $department->et>0)
              { "data": "file_et" },
              @endif
              { "data": "file_text" },
              { "data": "estimate_time" },
              { "data": "endtime" },
              { "data": "dead_line" },
              { "data": "comment" },
              @if(isset($department->file) && $department->file) && $department->file > 0)
              { "data": "dep_file" },
              @endif
              { "data": "action" }
          ]
          // "paging": true,
          // "processing": false,
          // "serverSide": true,
          // "ordering": false,
          // "columns": [
          //     // { "data": "key_id" },
          //     { "data": "job_name" },
          //     { "data": "dep_name" },
          //     //{ "data": "estimate_time" },
          //     { "data": "file_part" },
          //     { "data": "file_text" },
          //     { "data": "status" },
          //     { "data": "action" }
          // ]
      });

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

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

      function uploadFile(event,partFK,departmentFK,model){
        // let form = $(event).closest('form');
        var filename = event.files[0].name;
        var filetype = event.files[0].type;

        var form_data = new FormData();
        form_data.append('_token', '{{ csrf_token() }}');
        form_data.append('partFK', partFK);
        form_data.append('departmentFK', departmentFK);
        if(model != ''){
          form_data.append('id', model);
        }
        form_data.append('file', event.files[0]);

        if(filetype.indexOf("zip") == '-1' && filetype.indexOf("rar") == '-1'){
          $(event).val('');
          alert('Upload file .zip or .rar only.');
          return false;
        }
        let ajax_url = '';
        if(model == ''){
          ajax_url = "{{ route('model.task.save.ajax') }}";
        }else{
          ajax_url = "{{ route('model.task.update.ajax') }}";
        }

        $.ajax({
            url: ajax_url, // Url to which the request is send
            type: "POST",             // Type of request to be send, called as method
            data: form_data, // Data sent to server, a set of key/value pairs (i.e. form fields and values)
            contentType: false,       // The content type used when sending data to the server.
            cache: false,             // To unable request pages to be cached
            processData:false,        // To send DOMDocument or non processed data file it is set to false
            enctype: 'multipart/form-data',
            success: function(data)   // A function to be called if request succeeds
            {
                refreshTable();
            }
          });

      }

      function checkText(event,partFK,departmentFK){
        var form_data = new FormData();
        form_data.append('_token', '{{ csrf_token() }}');
        form_data.append('partFK', partFK);
        form_data.append('id', $(event).data('id'));
        form_data.append('departmentFK', departmentFK);

        if($(event).prop('checked')){
          form_data.append('data', 'checked');
        }else{
          form_data.append('data', '');
        }

        $.ajax({
          url: "{{ route('model.task.save.ajax.text') }}",
          type: "POST",
          data: form_data, // Data sent to server, a set of key/value pairs (i.e. form fields and values)
          contentType: false,       // The content type used when sending data to the server.
          cache: false,             // To unable request pages to be cached
          processData:false,        // To send DOMDocument or non processed data file it is set to false
          success: function(data)
          {
            if(data == 0){
              console.log('Error!!');
              $(event).prop('checked',false);
            }
            let start_id = '.start_'+$(event).data('id');
            let pause_id = '.pause_'+$(event).data('id');
            let complete_id = '.complete_'+$(event).data('id');
            if(data.et != null && data.file_part != null && $(event).prop('checked') ){
              $(start_id).removeClass('disabled');
              // $(pause_id).removeClass('disabled');
              // $(complete_id).removeClass('disabled');
            }else{
              $(start_id).addClass('disabled');
              // $(pause_id).addClass('disabled');
              // $(complete_id).addClass('disabled');
            }
            return false;
            refreshTable();
          }
        });
      }

      function checkET(event,partFK,departmentFK){
        var form_data = new FormData();
        form_data.append('_token', '{{ csrf_token() }}');
        form_data.append('partFK', partFK);
        form_data.append('id', $(event).data('id'));
        form_data.append('departmentFK', departmentFK);

        if($(event).prop('checked')){
          form_data.append('data', 'checked');
        }else{
          form_data.append('data', '');
        }

        $.ajax({
          url: "{{ route('model.task.save.ajax.et') }}",
          type: "POST",
          data: form_data, // Data sent to server, a set of key/value pairs (i.e. form fields and values)
          contentType: false,       // The content type used when sending data to the server.
          cache: false,             // To unable request pages to be cached
          processData:false,        // To send DOMDocument or non processed data file it is set to false
          success: function(data)
          {
            if(data == 0){
              console.log('Error!!');
              $(event).prop('checked',false);
            }
            let start_id = '.start_'+$(event).data('id');
            let pause_id = '.pause_'+$(event).data('id');
            let complete_id = '.complete_'+$(event).data('id');
            if(data.text != null && data.file_part != null && $(event).prop('checked') ){
              $(start_id).removeClass('disabled');
              // $(pause_id).removeClass('disabled');
              // $(complete_id).removeClass('disabled');
            }else{
              $(start_id).addClass('disabled');
              // $(pause_id).addClass('disabled');
              // $(complete_id).addClass('disabled');
            }
            return false;
            refreshTable();
          }
        });
      }

      function getComment(id){
        $.ajax({
            url: '{{ route('model.get.comment') }}', // Url to which the request is send
            type: "POST",
            dataType: 'json',             // Type of request to be send, called as method
            data: {
              _token: '{{ csrf_token() }}',
              id: id
            },
            success: function(data)   // A function to be called if request succeeds
            {
              $('#task_comment .modal-body').html(data.comment);
              $('#task_comment').modal('show');
            }
          });
      }

      function depUploadFile(event,id){
        // let form = $(event).closest('form');
        var filename = event.files[0].name;
        var filetype = event.files[0].type;

        var form_data = new FormData();
        form_data.append('_token', '{{ csrf_token() }}');
        form_data.append('id', id);
        form_data.append('file', event.files[0]);

        if(filetype.indexOf("zip") == '-1' && filetype.indexOf("rar") == '-1'){
          $(event).val('');
          alert('Upload file .zip or .rar only.');
          return false;
        }
        let ajax_url = "{{ route('depfile.task.save.ajax') }}";
        
        $.ajax({
            url: ajax_url, // Url to which the request is send
            type: "POST",             // Type of request to be send, called as method
            data: form_data, // Data sent to server, a set of key/value pairs (i.e. form fields and values)
            contentType: false,       // The content type used when sending data to the server.
            cache: false,             // To unable request pages to be cached
            processData:false,        // To send DOMDocument or non processed data file it is set to false
            enctype: 'multipart/form-data',
            success: function(data)   // A function to be called if request succeeds
            {
                refreshTable();
            }
          });

      }

      dataTable.on( 'xhr', function () {
          var json = dataTable.ajax.json();
          all_time = json.all_time;
      } );
    </script>
@endsection