@extends('layouts.app')

@section('form-title') {{ __('Edit - message') }} @endsection

@section('breadcrumb') 
<li class="breadcrumb-item"><a href="{{ route('tasks.index') }}">{{ __('Tasks') }}</a> </li> 
<li class="breadcrumb-item">
  <a href="{{ route('tasks.show', $message->task->uuid) }}">{{ $message->task->title }}</a> / 
</li> 
@endsection

{{-- <style>
  .div-atachment {
  position: relative;
  overflow: hidden;
}
.atachment {
  position: absolute;
  font-size: 32px;
  opacity: 0;
  right: 0;
  top: 0;
  cursor: pointer;
}
</style> --}}

@section('content')

<div class="pcoded-inner-content">
    <div class="main-body">
      <div class="page-wrapper">
        <!-- Page body start -->
        <div class="page-body">
          <div class="row">
            <div class="col-sm-12">
              <div class="card">
                <div class="card-header">
                  <h5>{{ __('Message') }}</h5>
                </div>
                <div class="card-block">
                  <form id="main" method="post" action="{{ route('message.update', $message->uuid) }}" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')

                    <div class="mb-3 row">
                      <div class="col-sm-12">
                        <textarea name="message" class="editor" id="editor">
                          <p>{{ $message->message }}</p>
                      </textarea>
                      </div>
                    </div>

                    <div class="row">
                      <label class="form-label col-sm-4 col-form-label">{{ __('Attachments') }} </label>
                      <div class="col-sm-8">
                        <input type="file" 
                          class="atachment" 
                          name="attachments[]" 
                          multiple data-max-file-size="3MB"
                          data-max-files="5"/>
                      </div>
                    </div>

                    @foreach ($message->attachments as $attachment)
                        <div class="row">
                            <label class="form-label col-sm-4 col-form-label">&nbsp;</label>
                            <div class="col-sm-8">
                                <span class="messages"><i class="fa fa-times-circle text-danger" data-attachment="{{ $attachment->id }}" style="cursor: pointer; padding-right:2px;"></i><a href="{{ asset($attachment->url) }}" target="__blank">{{ $attachment->name }}</a></span>
                            </div>
                        </div>
                    @endforeach

                    <div class="mb-3 mt-3 row">
                      <label class="form-label col-sm-4"></label>
                      <div class="col-sm-8">
                        <button type="submit" class="btn btn-primary m-b-0">{{ __('Update') }}</button>
                      </div>
                    </div>
                  </form>
                </div>
              </div>
            </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Page body end -->
    </div>
  </div>
</div>
@endsection

@push('child-scripts')
<script>
  FilePond.registerPlugin(FilePondPluginFileValidateType);

  const inputElement = document.querySelector('input[type="file"]');

  const pond = FilePond.create(inputElement,{
    //acceptedFileTypes: ['image/*', 'pdf', 'doc', 'docx', 'excel', 'txt'],
    credits: false,
    allowMultiple: true,
    labelIdle: `{{ __('Drag & Drop your files or') }} <span class="filepond--label-action">{{ __('click here to add attachments') }}</span>`,
    // imagePreviewHeight: 170,
    // imageCropAspectRatio: '1:1',
    // imageResizeTargetWidth: 200,
    // imageResizeTargetHeight: 200,
    //stylePanelLayout: 'compact circle',
    // styleLoadIndicatorPosition: 'center bottom',
    // styleProgressIndicatorPosition: 'right bottom',
    // styleButtonRemoveItemPosition: 'left bottom',
    // styleButtonProcessItemPosition: 'right bottom',
  });

  FilePond.setOptions({
    server: {
      url: '/upload',
      headers: {
        'X-CSRF-TOKEN': '{{ csrf_token() }}'
      }
    }
  })

  $(document).ready(function(){
    //let project = $('#project').val();
    //prepareDynamicDDs(project);

    document.addEventListener('focusin', function (e) { 
        if (e.target.closest('.tox-tinymce-aux, .moxman-window, .tam-assetmanager-root') !== null) { 
            e.stopImmediatePropagation(); 
        } 
    });

    // tinymce.init({
    //     selector: ".editor",
    //     height: 530,
    //     plugins: [
    //         "advlist autolink lists link image charmap print preview anchor",
    //         "searchreplace visualblocks code fullscreen",
    //         "insertdatetime media table paste"
    //     ],
    //     toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
    // });
    functionInitilizeCkEditor('editor', 500);
  })
</script>
@endpush