@extends('layouts.admin')

@section('title')
    New Ticket
@endsection

@section('description')
    Create a new ticket
@endsection

@section('breadcrumb')
    <li class="active"><a href="/tickets">All Tickets</a></li>
    <li><a href="#">New Ticket</a></li>
@endsection

@section('styles')
<style>
.table-borderless td,
.table-borderless th {
    border: 0;
}
</style>
@endsection

@section('content')
<div class="card">
  <div class="card-body">
    <!-- Small boxes (Stat box) -->
<div class="row">

  <div class="col-lg-6 col-xs-12">
      <!-- general form elements -->
        <div class="box box-primary">
          <div class="box-header with-border">
            <h3 class="box-title">Create A New Ticket</h3>
          </div>
          <!-- /.box-header -->
          <!-- form start -->
          <form role="form" action="/admin/tickets" method="POST">
          {{ csrf_field() }}

            <div class="box-body">
              <div class="form-group">
                <label for="name">Terminal</label>
                <select class="form-control select2" id="device_id" name="device_id">
                @foreach($nodes as $node)
                  <option value="{{ $node->id }}">{{ $node->name }}</option>
                @endforeach
                </select>
                <!-- <input type="text" class="form-control" id="device_id" name="device_id" placeholder="Enter device id"> -->
              </div>
            </div>
            <!-- /.box-body --> 

            <div class="box-body">
              <div class="form-group">
                <label for="name">Title</label>
                <input type="text" class="form-control" id="title" name="title" placeholder="Enter title" />
              </div>
            </div>
            <!-- /.box-body --> 

            <div class="box-body">
              <div class="form-group">
                <label for="name">Message</label>
                <textarea rows="6" class="form-control" id="description" name="description" placeholder="Enter description"></textarea>
              </div>
            </div>
            <!-- /.box-body --> 

            <div class="form-group">
              <label for="image">Image</label>
              <div class="needsclick dropzone {{ $errors->has('image') ? 'is-invalid' : '' }}" id="image-dropzone">
              </div>
              @if($errors->has('image'))
                  <div class="invalid-feedback">
                      {{ $errors->first('image') }}
                  </div>
              @endif
              <span class="help-block">{{ trans('cruds.ticket.fields.image_helper') }}</span>
          </div>

            <div class="box-body">

              <div class="form-group">
              <label for="name">Severity</label>
                <table class="table table-condensed table-borderless">
                  <tr>
                      <td><div class="label label-danger">Critical</div></td>
                      <td>Perangkat tidak berfungsi dan data tidak terkirim</td>
                  </tr>
                  <tr>
                  <td><div class="label label-warning">Urgent</div></td>
                      <td>Perangkat berfungsi tapi data tidak terkirim</td>
                  </tr>
                  <tr>
                  <td><div class="label label-primary">Important</div></td>
                      <td>Perangkat berfungsi dan data terkirim tapi terkadang ada permasalahan dalam penggunaan</td>
                  </tr>
                  <tr>
                  <td><div class="label label-success">Monitor</div></td>
                      <td>Tidak ada follow-up yang harus dilakukan kecuali hanya dimonitor saja</td>
                  </tr>
                  <tr>
                  <td><div class="label label-default">Informational</div></td>
                      <td>Hanya perlu follow up informasi</td>
                  </tr>
              </table>
              </div>

              <div class="form-group">
                <select class="form-control" id="severity" name="severity">
                  <option value="critical">Critical</option>
                  <option value="urgent">Urgent</option>
                  <option value="important">Important</option>
                  <option value="monitor">Monitor</option>
                  <option value="informational">Informational</option>
                </select>
              </div>
            </div>
            <!-- /.box-body --> 

            <div class="box-body">
              <div class="form-group">
                <label for="name">Assigned To</label>
                <select class="form-control" id="assignee_id" name="assignee_id">
                @foreach($users as $user)
                  <option value="{{ $user->id }}">{{ $user->name }}</option>
                @endforeach
                </select>
              </div>
            </div>
            <!-- /.box-body --> 

            <div class="box-footer">
              <button type="submit" class="btn btn-primary">Submit</button>
            </div>
          </form>
        </div>
        <!-- /.box -->
  </div>

</div>
<!-- /.row -->
  </div>
</div>
@endsection
@section('scripts')
<script>
  Dropzone.options.featuredImageDropzone = {
  url: '{{ route('admin.tickets.storeMedia') }}',
  maxFilesize: 4, // MB
  acceptedFiles: '.jpeg,.jpg,.png,.gif',
  maxFiles: 1,
  addRemoveLinks: true,
  headers: {
    'X-CSRF-TOKEN': "{{ csrf_token() }}"
  },
  params: {
    size: 4,
    width: 4096,
    height: 4096
  },
  success: function (file, response) {
    $('form').find('input[name="featured_image"]').remove()
    $('form').append('<input type="hidden" name="featured_image" value="' + response.name + '">')
  },
  removedfile: function (file) {
    file.previewElement.remove()
    if (file.status !== 'error') {
      $('form').find('input[name="featured_image"]').remove()
      this.options.maxFiles = this.options.maxFiles + 1
    }
  },
  init: function () {
@if(isset($ticket) && $ticket->featured_image)
    var file = {!! json_encode($ticket->featured_image) !!}
        this.options.addedfile.call(this, file)
    this.options.thumbnail.call(this, file, file.preview)
    file.previewElement.classList.add('dz-complete')
    $('form').append('<input type="hidden" name="featured_image" value="' + file.file_name + '">')
    this.options.maxFiles = this.options.maxFiles - 1
@endif
  },
  error: function (file, response) {
      if ($.type(response) === 'string') {
          var message = response //dropzone sends it's own error messages in string
      } else {
          var message = response.errors.file
      }
      file.previewElement.classList.add('dz-error')
      _ref = file.previewElement.querySelectorAll('[data-dz-errormessage]')
      _results = []
      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
          node = _ref[_i]
          _results.push(node.textContent = message)
      }

      return _results
  }
}
</script>
<script>
  $(document).ready(function () {
function SimpleUploadAdapter(editor) {
  editor.plugins.get('FileRepository').createUploadAdapter = function(loader) {
    return {
      upload: function() {
        return loader.file
          .then(function (file) {
            return new Promise(function(resolve, reject) {
              // Init request
              var xhr = new XMLHttpRequest();
              xhr.open('POST', '{{ route('admin.tickets.storeCKEditorImages') }}', true);
              xhr.setRequestHeader('x-csrf-token', window._token);
              xhr.setRequestHeader('Accept', 'application/json');
              xhr.responseType = 'json';

              // Init listeners
              var genericErrorText = `Couldn't upload file: ${ file.name }.`;
              xhr.addEventListener('error', function() { reject(genericErrorText) });
              xhr.addEventListener('abort', function() { reject() });
              xhr.addEventListener('load', function() {
                var response = xhr.response;

                if (!response || xhr.status !== 201) {
                  return reject(response && response.message ? `${genericErrorText}\n${xhr.status} ${response.message}` : `${genericErrorText}\n ${xhr.status} ${xhr.statusText}`);
                }

                $('form').append('<input type="hidden" name="ck-media[]" value="' + response.id + '">');

                resolve({ default: response.url });
              });

              if (xhr.upload) {
                xhr.upload.addEventListener('progress', function(e) {
                  if (e.lengthComputable) {
                    loader.uploadTotal = e.total;
                    loader.uploaded = e.loaded;
                  }
                });
              }

              // Send request
              var data = new FormData();
              data.append('upload', file);
              data.append('crud_id', '{{ $ticket->id ?? 0 }}');
              xhr.send(data);
            });
          })
      }
    };
  }
}

var allEditors = document.querySelectorAll('.ckeditor');
for (var i = 0; i < allEditors.length; ++i) {
  ClassicEditor.create(
    allEditors[i], {
      extraPlugins: [SimpleUploadAdapter]
    }
  );
}
});
</script>

<script>
  var uploadedImageMap = {}
Dropzone.options.imageDropzone = {
  url: '{{ route('admin.tickets.storeMedia') }}',
  maxFilesize: 4, // MB
  acceptedFiles: '.jpeg,.jpg,.png,.gif',
  addRemoveLinks: true,
  headers: {
    'X-CSRF-TOKEN': "{{ csrf_token() }}"
  },
  params: {
    size: 4,
    width: 4096,
    height: 4096
  },
  success: function (file, response) {
    $('form').append('<input type="hidden" name="image[]" value="' + response.name + '">')
    uploadedImageMap[file.name] = response.name
  },
  removedfile: function (file) {
    console.log(file)
    file.previewElement.remove()
    var name = ''
    if (typeof file.file_name !== 'undefined') {
      name = file.file_name
    } else {
      name = uploadedImageMap[file.name]
    }
    $('form').find('input[name="image[]"][value="' + name + '"]').remove()
  },
  init: function () {
@if(isset($ticket) && $ticket->image)
    var files = {!! json_encode($ticket->image) !!}
        for (var i in files) {
        var file = files[i]
        this.options.addedfile.call(this, file)
        this.options.thumbnail.call(this, file, file.preview)
        file.previewElement.classList.add('dz-complete')
        $('form').append('<input type="hidden" name="image[]" value="' + file.file_name + '">')
      }
@endif
  },
   error: function (file, response) {
       if ($.type(response) === 'string') {
           var message = response //dropzone sends it's own error messages in string
       } else {
           var message = response.errors.file
       }
       file.previewElement.classList.add('dz-error')
       _ref = file.previewElement.querySelectorAll('[data-dz-errormessage]')
       _results = []
       for (_i = 0, _len = _ref.length; _i < _len; _i++) {
           node = _ref[_i]
           _results.push(node.textContent = message)
       }

       return _results
   }
}
</script>
@endsection