@extends('layouts.admin')

@section('content')
<!-- <div class="container-fluid"> -->
  <div class="row row_main">
    <div class="col-md-12">
      
    </div>
    @if(isset($_GET['prod']))
    <div class="col-lg-6 col-md-6">
    @else
    <div class="col-lg-12 col-md-12">
    @endif
      <div class="card">
        <div class="card-header card-header-primary">
          <h4 class="card-title pull-left mr-auto">Productions</h4>
          <a href="{{ route('department.add') }}" class="btn btn-primary btn-round pull-right ml-auto">Add Production<div class="ripple-container"></div></a>
        </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>Name</th>
              <th>Part</th>
              <th>Electrode</th>
              <th>Outsource</th>
              <th>Mat</th>
              <th>Cam</th>
              <th>File</th>
              <th></th>
            </thead>
            <tbody>
              @foreach($department as $key=>$value)
                <tr class="@if(isset($_GET['prod']) && $_GET['prod'] == $value->name) active @endif">
                  <td><a href="{{ route('manager.department.index',['prod'=>$value->name]) }}">{{$value->name}}</a></td>
                  <td>@if($value->part > 0) <span class="bg-gradient-success p-1" style="font-size: 10px;color: #fff;">Yes</span> @else <span class="bg-gradient-danger p-1" style="font-size: 10px;color: #fff;">No</span> @endif</td>
                  <td>@if($value->et > 0) <span class="bg-gradient-success p-1" style="font-size: 10px;color: #fff;">Yes</span> @else <span class="bg-gradient-danger p-1" style="font-size: 10px;color: #fff;">No</span> @endif</td>
                  <td>@if(isset($value->os) && $value->os > 0) <span class="bg-gradient-success p-1" style="font-size: 10px;color: #fff;">Yes</span> @else <span class="bg-gradient-danger p-1" style="font-size: 10px;color: #fff;">No</span> @endif</td>
                  <td>@if($value->mat > 0) <span class="bg-gradient-success p-1" style="font-size: 10px;color: #fff;">Yes</span> @else <span class="bg-gradient-danger p-1" style="font-size: 10px;color: #fff;">No</span> @endif</td>
                  <td>@if($value->cam > 0) <span class="bg-gradient-success p-1" style="font-size: 10px;color: #fff;">Yes</span> @else <span class="bg-gradient-danger p-1" style="font-size: 10px;color: #fff;">No</span> @endif</td>
                  <td>@if($value->file > 0) <span class="bg-gradient-success p-1" style="font-size: 10px;color: #fff;">Yes</span> @else <span class="bg-gradient-danger p-1" style="font-size: 10px;color: #fff;">No</span> @endif</td>
                  <td>
                    <a class="btn btn-warning btn-sm" href="{{ route('department.edit',['id'=>$value->id]) }}">Edit</a>
                    <a class="btn btn-danger btn-sm" href="{{ route('department.delete',['id'=>$value->id]) }}" onclick="return confirm_delete()">Delete</a>
                    @can('admin_role')
                    <a class="btn btn-primary btn-sm" href="{{ route('department.index',['prod'=>$value->name]) }}">Tasks ({{countTaskDep($value->id)}})</a>
                    @endcan
                    @can('manager_role')
                    <a class="btn btn-primary btn-sm" href="{{ route('manager.department.index',['prod'=>$value->name]) }}">Tasks ({{countTaskDep($value->id)}})</a>
                    @endcan
                    
                  </td>
                </tr>
              @endforeach
            </tbody>
          </table>
        </div>
    </div>

  </div>
  @if( isset($_GET['prod']) )
  <div class="col-md-6">
    <div class="card">
        <div class="card-header card-header-primary">
          <h4 class="card-title pull-left mr-auto">Production {{strtoupper($_GET['prod'])}}</h4>
        </div>
        <div class="card-body">
          <label>The work order of this production.</label>
          <table class="table task_lists" id="task_lists" width="100%" cellspacing="0">
            <thead class="text-primary">
              <th style="width: 30px;"></th>
              <th style="width: 55px;">Part</th>
              <th>Job no.</th>
              <th style="width: 90px;text-align: center;">Status</th>
              <th style="width: 90px;text-align: center;">Est. time</th>
              <th style="width: 90px;text-align: center;">End time</th>
              <th style="width: 105px;text-align: center;">Dead line</th>
            </thead>
            <tbody>
              @foreach($tasks as $key=>$task)
              <tr class="task_list ui-state-default" id="{{$task->id}}" name="{{$task->part_no}}">
                <td><i class="fas fa-arrows-alt"></i></td>
                <td><div class="one_line" title="{{$task->name}} ({{$task->part_no}})">{{$task->name}} ({{$task->part_no}})</div></td>
                <td>{{ $task->job_no }}</td>
                <td>{!! statusTask($task->status, $task) !!}</td>
                <td style="text-align: center;">{{$task->estimate_time}} @if($task->is_os == 1) Day @else Hr @endif</td>
                <td style="text-align: center;">{{$task->endtime}}</td>
                <td style="text-align: center;">
                  @if(date('Y') == date('Y',strtotime($task->dead_line))) {{date('j M',strtotime($task->dead_line))}} @elseif(empty($task->dead_line) || $task->dead_line == '1970-01-01') {!! '-' !!} @else {{date('j M Y',strtotime($task->dead_line))}} @endif
                </td>
              </tr>
              @endforeach
            </tbody>
          </table>
        </div>
    </div>
  </div>
  @endif
</div>


<!-- Modal update status -->
<div class="modal fade" id="update_task_status" tabindex="-1" role="dialog" aria-labelledby="update_task_statusTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="update_task_statusTitle">Update status</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form action="{{ route('task.update.status') }}" method="post">
          @csrf
          <input type="hidden" name="id">
          <input type="hidden" name="jobFK">
          <div class="form-group mt-3 text-center">
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="status" id="status_notstart" value="notstart" checked>
              <label class="form-check-label" for="status_notstart">
                Not start
              </label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="status" id="status_starting" value="starting">
              <label class="form-check-label" for="status_starting">
                Starting
              </label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="status" id="status_complete" value="complete">
              <label class="form-check-label" for="status_complete">
                Complete
              </label>
            </div>
          </div>
          <div class="form-group mt-3">
            <button class="btn btn-primary btn-block">Submit</button>
          </div>
          
        </form>
      </div>
    </div>
  </div>
</div>
@endsection 

@section('style')
  <link href="{{ asset('assets/vendor/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet">
  <!--<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">-->
  <link rel="stylesheet" href="{{ asset('plugins/jquery-ui/themes/base/jquery-ui.css') }}">
  <style type="text/css">
    tr.active{
      color: #858796;
      background-color: rgba(0,0,0,.075);
    }
    .task_list{
      cursor: pointer;
    }
    .task_list.ui-state-default{
      background-color: #fff;
    }
    .alert.alert-success{
      position: fixed;
      right: 30px;
      bottom: 30px;
      padding: 10px;
      background: #fff;
      font-weight: 700;
      border-left: 5px solid;
      -webkit-box-shadow: 0px 0px 5px 0px #a2a2a2bf;
      -moz-box-shadow: 0px 0px 5px 0px #a2a2a2bf;
      box-shadow: 0px 0px 5px 0px #a2a2a2bf;
      z-index: 1;
    }
    .one_line{
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;  
      overflow: hidden;
    }
  </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 src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>-->
    <script src="{{ asset('plugins/jquery-ui/jquery-ui.js') }}"></script>
    <!-- <script src="{{ asset('assets/js/jquery-sortable.js') }}"></script> -->

    <script type="text/javascript">
      
      $(document).ready(function() {
        $('#dataTable').DataTable({
          "paging": false,
          "ordering": false
        });

      });

      $("#task_lists tbody").sortable({
          update: function( event, ui ) {
            $(this).children().each(function(index) {
              $(this).find('td').last().html(index + 1)
            });
            updateDepOrder($('#task_lists tbody').sortable("toArray"));
          }
      });

      function updateDepOrder(data){
        let dep = '';
        let url = '{{ route('department.update.task.order') }}';
        @if(isset($_GET['prod']))
          dep = "{{ $_GET['prod'] }}";
        @endif
        @can('manager_role')
          url = '{{ route('manager.department.update.task.order') }}';
        @endcan
        if(dep != ''){
          $.ajax({
            url: url,
            type: 'post',
            dataType: 'html',
            data:{
              _token: '{{ csrf_token() }}',
              data: JSON.stringify(data),
              dep: dep
            },
            success: function(data){
             let alert = '<span class="alert alert-success text-success"> Updated.</span>';
              $('.container-fluid .row_main').append(alert);
              setTimeout(function(){ $('.container-fluid .row_main .alert').remove(); }, 5000);
            }
          });
        }
      }

    $('#update_task_status').on('show.bs.modal', function (event) {
      var button = $(event.relatedTarget) // Button that triggered the modal
      var taskid = button.data('taskid') // Extract info from data-* attributes
      var jobid = button.data('jobid') // Extract info from data-* attributes
      var status = button.data('status') // Extract info from data-* attributes
      // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
      // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
      var modal = $(this)
      modal.find('input[name="id"]').val(taskid)
      modal.find('input[name="jobFK"]').val(jobid)
      $('#update_task_status input[name="status"]').each(function () {
        if($(this).val() == status){
          $(this).prop('checked',true);
        }else{
          $(this).prop('checked',false);
        }
      })
    });

    $('#update_task_status .modal-body').on('submit','form', function(e){
        e.preventDefault();
        var form_data = new FormData(this);
        var job_id = $('#update_task_status input[name="jobFK"]').val()
        let url = $(this).attr('action')
        $.ajax({
          type: 'POST',
          url: url,
          dataType: 'json',
          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',
          data: form_data
        })
        .done(function(data){ 
          $('#update_task_status').modal('hide');
          let alert = '<span class="alert alert-success text-success">Updated.</span>';
          $('#page-top').append(alert);
          setTimeout(function(){ $('#page-top .alert').remove(); }, 5000);
          $('#update_task_status input[name="id"]').val('')
          $('#update_task_status input[name="jobFK"]').val('')
          $('#update_task_status input[name="status"]').prop('checked',false)
          $('#update_task_status #status_notstart').prop('checked',true)
          location.reload();
        })
        .fail(function() { 
          alert( "Update failed." );
        });

        return false;

      });
    </script>
@endsection