@extends('layouts.admin')

@section('content')

  <div class="row planning_row">
    <div class="col-md-12">
      
    </div>
    <div class="col-md-7 col-sm-12">
      <div class="card">
        <div class="card-header card-header-primary">
          <h4 class="card-title pull-left mr-auto">Jobs</h4>
          
          <select class="form-control pull-right" id="job_status" onchange="refreshTable()" style="width: 150px;margin-left: 10px;">
            <option value="">All status</option>
            <option value="P">Process</option>
            <option value="F">Finish</option>
            <option value="C">Cancal</option>
          </select>
          <ul class="pull-right mb-0" style="list-style: none;width: 450px;">
            <li class="pull-left ml-2" style="width: 48%;">
             <input class="form-control form-control datepicker" data-provide="datepicker" type="text" id="start_date" placeholder="Start date" onchange="refreshTable()">
            </li>
            <li class="pull-left ml-2" style="width: 48%;">
              <input class="form-control form-control datepicker" data-provide="datepicker" type="text" id="end_date" placeholder="End date" onchange="refreshTable()">
            </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>Job no.</th>
              <th>Part Name</th>
              <th>Qty</th>
              <th>Dead line</th>
              <th>PDF file</th>
              <th></th>
            </thead>
            <tbody></tbody>
          </table>
        </div>
    </div>

  </div>
  <div class="col-md-5 task_list">
   
  </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>
  </div>
</div>
@endsection 

@section('style')
  <link href="{{ asset('assets/vendor/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="{{ asset('assets/plugins/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css') }}">
  <style type="text/css">
    tbody tr:first-child {
      background: #00000013;
    }
    .update-time-success{
      position: absolute;
      right: 15px;
      font-size: 12px;
    }
    .alert.alert-success{
      position: absolute;
      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;
    }
    @media only screen and (max-width: 1280px) {
      .col-md-5,.col-md-7 {
        flex: 0 0 100%;
        max-width: 100%;
      }
    }
  </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="{{ asset('assets/plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js') }}"></script>
    <!-- <script src="{{ asset('assets/js/jquery-sortable.js') }}"></script> -->

    <script type="text/javascript">
      $(function() {
        $('.datepicker').datepicker({
            format: 'yyyy-mm-dd'
        });
        // $('.datepicker').datetimepicker('setDate', new Date());

        $('.glyphicon-arrow-right').addClass('fas fa-fw fa-long-arrow-alt-right');
        $('.glyphicon-arrow-left').addClass('fas fa-fw fa-long-arrow-alt-left');
      });
      var dataTable = $('#dataTable').DataTable({
          "ajax": {
              "url": "{{route('manager.task.ajax')}}",
              "type": "POST",
              data: dataTableValue
          },
          "initComplete":function( settings, json){
              getTasks(json.data[0].id,'');
          },
          "paging": true,
          "processing": false,
          "serverSide": true,
          "ordering": false,
          "columns": [
              { "data": "job_no" },
              { "data": "name" },
              { "data": "qty" },
              { "data": "dead_line" },
              { "data": "pdf_file" },
              { "data": "action" }
          ]
      });

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

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

      function getTasks(id,event){
        if(event != ''){
          $('tr.even').css('background-color','#fff');
          $('tr.odd').css('background-color','#fff');
          $(event).closest('tr.even').css('background','#00000013');
          $(event).closest('tr.odd').css('background','#00000013');
        }
        $.ajax({
          url: '{{ route("manager.order.get.task") }}',
          type: 'post',
          dataType: 'html',
          data:{
              _token: '{{ csrf_token() }}',
              id: id
          },
          success: function(data){
            $('.task_list').html('');
            $('.task_list').append(data);
          }
        });
      }

      function addTask(job_id,dep_id,type,timeID){
        
        if(timeID != ''){
          if($(timeID).val() == ''){
            $(timeID).css('border','1px solid red');
            return false;
          }else{
            $(timeID).css('border','1px solid #767676');
          }
        }
        let url = '{{ route('manager.task.ajax.save') }}';
        let data = {_token: '{{ csrf_token() }}','jobFK':job_id,'departmentFK':dep_id,'type':type,'estimate_time':$(timeID).val()}
        $.ajax({
          type: 'POST',
          url: url,
          dataType: 'json',
          data: data
        }).done(function(data){ 
          getTasks(data.jobFK,'');
          let change_count = '#show_task_'+data.jobFK;
          let task_count = 'Task ('+data.countTask+')';
          $(change_count).text(task_count);
          let alert = '<span class="alert alert-success text-success">Add task success</span>';
          $('.container-fluid .planning_row').append(alert);
          setTimeout(function(){ $('.container-fluid .planning_row .alert').remove(); }, 5000);
        })
        .fail(function() { 
          alert( "Update failed." );
        });

      }

      function updateTimeTask(event,id,time){
        
        let url = '{{ route('manager.task.ajax.update.time') }}';
        let data = {_token: '{{ csrf_token() }}','id':id,'estimate_time':time}
        $.ajax({
          type: 'POST',
          url: url,
          dataType: 'json',
          data: data
        }).done(function(data){ 
          // getTasks(data,'');
          let alert = '<span class="alert alert-success text-success">Estimate time Updated</span>';
          $('.container-fluid .planning_row').append(alert);
          setTimeout(function(){ $('.container-fluid .planning_row .alert').remove(); }, 5000);
          // let success = '<span class="update-time-success text-success">Updated</span>';
          // $(event).closest('li').append(success);
          // setTimeout(function(){ $('.task_list .update-time-success').remove(); }, 3000);
        })
        .fail(function() { 
          alert( "Update failed." );
        });
      }

      function deleteTask(event,task_id){
        if( confirm("Do you want to delete?") ){
          let url = '{{ route('manager.task.ajax.delete') }}';
          let data = {_token: '{{ csrf_token() }}','id':task_id}
          $.ajax({
            type: 'POST',
            url: url,
            dataType: 'json',
            data: data
          }).done(function(data){ 
            getTasks(data.jobFK,'');
            let change_count = '#show_task_'+data.jobFK;
            let task_count = 'Task ('+data.countTask+')';
            $(change_count).text(task_count);
            let alert = '<span class="alert alert-success text-success">Task id '+data.id+' Deleted</span>';
            $('.container-fluid .planning_row').append(alert);
            setTimeout(function(){ $('.container-fluid .planning_row .alert').remove(); }, 5000);
          })
          .fail(function() { 
            alert( "Update failed." );
          });
        }
        return false;
      }

      function updateMainOrder(id,job,order){
        let url = '{{ route('manager.task.ajax.update.mainorder') }}';
        let data = {_token: '{{ csrf_token() }}','id':id,'job':job,'order':order}
        $.ajax({
          type: 'POST',
          url: url,
          dataType: 'json',
          data: data
        }).done(function(data){ 
          getTasks(data,'');

          let alert = '<span class="alert alert-success text-success">Updated</span>';
          $('.container-fluid .planning_row').append(alert);
          setTimeout(function(){ $('.container-fluid .planning_row .alert').remove(); }, 5000);
        })
        .fail(function() { 
          alert( "Update failed." );
        });
      }


      function uploadFile(event,orderFK,id){
        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('orderFK', orderFK);
        form_data.append('id', id);
        form_data.append('file', event.files[0]);

        if(filetype.indexOf("pdf") == '-1'){
          $(event).val('');
          alert('Upload file .pdf only.');
          return false;
        }
        let ajax_url = "{{ route('manager.update.pdf_file') }}";
        $.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
            {
              let alert = '<span class="alert alert-success text-success">PDF Updated.</span>';
              $('.container-fluid .planning_row').append(alert);
              setTimeout(function(){ $('.container-fluid .planning_row .alert').remove(); }, 5000);
              refreshTable();
            }
          });
      }

      function addComment(id){
        $.ajax({
          url: '{{ route('manager.get.task.comment') }}',
          type: 'get',
          dataType: 'html',
          data:{
              id: id
          },
          success: function(data){
            $('#task_comment .modal-body').html('');
            $('#task_comment .modal-body').append(data);
            $('#task_comment').modal('show');
          }
        });
      }

      $('#task_comment .modal-body').on('submit','.add_task_comment',function(e){
        e.preventDefault();
        var form_data = new FormData(this);
        let url = '{{route('manager.task.update.comment')}}';
        $.ajax({
            type: 'POST',
            url: url,
            dataType: 'json',
            contentType: false,
            cache: false,
            processData:false,
            enctype: 'multipart/form-data',
            data: form_data
          })
          .done(function(data){
            $('#task_comment').modal('hide');
            let alert = '<span class="alert alert-success text-success">Comment Updated.</span>';
            $('.container-fluid .planning_row').append(alert);
            setTimeout(function(){ $('.container-fluid .planning_row .alert').remove(); }, 5000);
            return false;
          })
          .fail(function() { 
            alert( "Update failed." );
            return false;
          });

      });

      // var adjustment;

      // var group = $(".task_list ul.use_task").sortable({
      //   group: 'use_task',
      //   pullPlaceholder: false,
      //   // animation on drop
      //   onDrop: function  ($item, container, _super) {
      //     var $clonedItem = $('<li/>').css({height: 0});
      //     $item.before($clonedItem);
      //     $clonedItem.animate({'height': $item.height()});
      //     var data = group.sortable("serialize").get();
      //     console.log(data);
      //     var jsonString = JSON.stringify(data, null, '');

      //     $.ajax({
      //       url: '{{ route("manager.task.ajax.update.drag.mainorder") }}',
      //       type: 'post',
      //       dataType: 'json',
      //       data:{
      //           _token: '{{ csrf_token() }}',
      //           data: jsonString
      //       },
      //       success: function(res){
      //         // getTasks(res,'');input_order_
      //         let order_ = 1;
      //         for (var i = 0; i < data[0].length; i++) {
      //           if(typeof data[0][i]['id'] != "undefined") {
      //             let input_ID = '#input_order_'+data[0][i]['id'];
      //             $(input_ID).val(order_);
      //             order_++;
      //           }
      //         }
      //       }
      //     });

      //     $item.animate($clonedItem.position(), function  () {
      //       $clonedItem.detach();
      //       _super($item, container);
      //     });


      //   },

      //   // set $item relative to cursor position
      //   onDragStart: function ($item, container, _super) {
      //     var offset = $item.offset(),
      //         pointer = container.rootGroup.pointer;

      //     adjustment = {
      //       left: pointer.left - offset.left,
      //       top: pointer.top - offset.top
      //     };

      //     _super($item, container);
      //   },
      //   onDrag: function ($item, position) {
      //     $item.css({
      //       left: position.left - adjustment.left,
      //       top: position.top - adjustment.top
      //     });
      //   }
      // });
    </script>
@endsection