@extends('layouts.app')

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

@section('breadcrumb') 
<li class="breadcrumb-item"><a href="{{ route('tasks.index') }}">{{ __('Tasks') }}</a> </li> 
<li class="breadcrumb-item">
  @if(!empty($task->client))
  <a href="{{ route('organisations.show', $task->client->uuid) }}">{{ $task->client->name }}</a> / 
  @endif
  @if(!empty($task->project))
  <a href="{{ route('projects.show', $task->project->uuid) }}">{{ $task->project->title }}</a> / 
  @endif
  {{ $task->title }} 
</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-6">
              <div class="card">
                <div class="card-header">
                  <h5>{{ __('Edit task') }}</h5>
                </div>
                <div class="card-block">
                  <form id="main" method="post" action="{{ route('tasks.update', $task->uuid) }}" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    <div class="mb-3 row">
                      <label class="form-label col-sm-3 col-form-label">{{ __('Client') }} *</label>
                      <div class="col-sm-6 col-xl-9">
                          @if(allowedToAddUpdateProjOrg())
                            <div id="div_client">
                              {!! clients('client', old('client', $task->client_id ?? (getAuthUser()->organisation ? getAuthUser()->organisation->id : 0))) !!}
                            </div>
                            <span class="messages">
                              @if($errors->has('client'))
                              <p class="text-danger error">{{ $errors->first('client') }}</p>
                              @endif
                            </span>
                          @else
                            {{ getAuthUser()->organisation->name }}
                            <input type="hidden" name="client" value="{{ getAuthUser()->organisation->id }}">
                          @endif
                      </div>
                    </div>

                    <div class="mb-3 row">
                      <label class="form-label col-sm-3 col-form-label">{{ __('Project') }} *</label>
                      <div class="col-sm-6 col-xl-9">
                        <div id="div_projects">
                          {!! projects('project', $task->client_id ?? (getAuthUser()->organisation ? getAuthUser()->organisation->id : 0), old('project', $task->project ? $task->project->id : 0)) !!}
                        </div>
                        <span class="messages">
                          @if($errors->has('project'))
                          <p class="text-danger error">{{ $errors->first('project') }}</p>
                          @endif
                        </span>
                      </div>
                    </div>

                    <div class="mb-3 row">
                      <label class="form-label col-sm-3 col-form-label">{{ __('Project status') }}</label>
                      <div class="col-sm-9">
                        <div id="div_project_status">{{ $task->project ? $task->project->projectStatus->translated_title : '' }}</div>
                      </div>
                    </div>

                    <div class="mb-3 row">
                      <label class="form-label col-sm-3 col-form-label">{{ __('Project owner') }}</label>
                      <div class="col-sm-9">
                        <div id="div_project_owner">{{ $task->project && $task->project->projectOwner ? $task->project->projectOwner->name : '' }}</div>
                      </div>
                    </div>

                    <div class="mb-3 row">
                      <label class="form-label col-sm-3 col-form-label">{{ __('Project deadline') }}</label>
                      <div class="col-sm-9">
                        <span class="messages" id="project_deadline">{{ optional($task->project)->deadline }}</span>
                      </div>
                    </div>

                    <div class="mb-3 row">
                      <label class="form-label col-sm-3 col-form-label">{{ __('Task title') }} *</label>
                      <div class="col-sm-9">
                        <input type="text" class="form-control" name="task_title" id="task_title" placeholder="{{ __('Type a task title') }}" value="{{ old('task_title', $task->title) }}">
                        <span class="messages">
                            @if($errors->has('task_title'))
                            <p class="text-danger error">{{ $errors->first('task_title') }}</p>
                            @endif
                        </span>
                      </div>
                    </div>

                    <div class="mb-3 row">
                      <label class="form-label col-sm-3 col-form-label">{{ __('Task owner') }} *</label>
                      <div class="col-sm-6 col-xl-9">
                        <div id="div_task_owners">
                          {!! taskOwner('task_owner', $task->client_id ?? (getAuthUser()->organisation ? getAuthUser()->organisation->id : 0), old('task_owner', $task->taskOwner ? $task->taskOwner->id : 0)) !!}
                        </div>
                        <span class="messages">
                          @if($errors->has('task_owner'))
                          <p class="text-danger error">{{ $errors->first('task_owner') }} </p>
                          @endif
                        </span>
                      </div>
                    </div>

                    <div class="mb-3 row">
                      <label class="form-label col-sm-3 col-form-label">{{ __('Task status') }} *</label>
                      <div class="col-sm-6 col-xl-9">
                          {!! taskStatus('task_status', old('task_status', $task->status)) !!}
                          <span class="messages">
                            @if($errors->has('task_status'))
                            <p class="text-danger error">{{ $errors->first('task_status') }}</p>
                            @endif
                          </span>
                      </div>
                    </div>

                    <div class="mb-3 row">
                      <label class="form-label col-sm-3 col-form-label">{{ __('Task deadline') }} </label>
                      <div class="col-sm-9">
                        <input type="date" class="form-control" name="task_deadline" id="task_deadline" value="{{ old('task_deadline', $task->deadline ?? deadline()) }}">
                        <span class="messages">
                            @if($errors->has('task_deadline'))
                            <p class="text-danger error">{{ $errors->first('task_deadline') }}</p>
                            @endif
                        </span>
                      </div>
                    </div>

                    <div class="mb-3 row">
                      <div class="col-sm-12">
                        <textarea name="task_desc" class="editor" id="editor">
                          <p>{{ trimExtraLines($task->description) }}</p>
                        </textarea>
                      </div>
                    </div>

                    @if(hasPermissionAndModuleEnabled('view book time fields', 'time_mgt'))
                      <div class="mb-3 row">
                        <label class="form-label col-sm-3 col-form-label">{{ __('Time spent') }}</label>
                        <div class="col-sm-9">
                          <div class="d-flex align-items-center gap-2">
                            <input name="booking_time_hours" class="form-control time-box text-center copy" value="{{ old('booking_time_hours', 0) }}">
                            <span class="fw-bold">:</span>
                            <input name="booking_time_minutes" class="form-control time-box text-center copy" value="{{ old('booking_time_minutes', 0) }}">
                          </div>
                          <span class="messages">
                            @if($errors->has('booking_time_hours'))
                            <p class="text-danger error">{{ $errors->first('booking_time_hours') }}</p>
                            @endif
                          </span>
                        </div>
                      </div>

                      <div class="mb-3 row">
                        <label class="form-label col-sm-3 col-form-label">{{ __('Book date') }}</label>
                        <div class="col-sm-9">
                          <input type="date" class="form-control fill copy" name="booking_date"  value="{{ old('booking_date', $booking ? $booking->booking_date : deadline()) }}">
                          <span class="messages">
                            @if($errors->has('booking_date'))
                            <p class="text-danger error">{{ $errors->first('booking_date') }}</p>
                            @endif
                          </span>
                        </div>
                      </div>
                    @endif

                    <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 ($task->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

                    @if(hasPermissionAndModuleEnabled('view book time fields', 'time_mgt'))
                      <div class="mb-3 row">
                        <label class="form-label col-sm-12 col-form-label">{{ __('Description of work booked time') }}</label>
                        <div class="col-sm-12">
                          <textarea class="form-control" rows="5" name="description" id="description">{{ old('description', null) }}</textarea>
                        </div>
                      </div>
                      <template id="description-template">[#{{__('TaskNumber')}}/TICKET_ARTICLE_ID] {#TaskTitle}
{#TaskDescription}</template>

                      @push('child-scripts')
                        <script>
                        $(document).on('input change', '.copy', function () {
                            let booking_time_hours = $('input[name="booking_time_hours"]').val();
                            let booking_time_minutes = $('input[name="booking_time_minutes"]').val();
                            let booking_date = $('input[name="booking_date"]').val();

                            if (booking_time_hours && booking_time_minutes && booking_date) {
                                let task_title = $('#task_title').val() || '';
                                let html = CKEDITOR.instances.editor?.getData() || '';

                                // Preserve line breaks
                                html = html.replace(/<br\s*\/?>/gi, '\n');
                                html = html.replace(/<\/p>/gi, '\n');

                                // Convert HTML to plain text
                                let div = document.createElement('div');
                                div.innerHTML = html;
                                let task_desc = div.textContent || div.innerText || '';

                                let template = $('#description-template').html() || '';
                                template = template.replace('{#TaskTitle}', task_title);
                                template = template.replace('{#TaskDescription}', task_desc);

                                $('#description').val(template);
                            }else{
                                $('#description').val('');
                            }
                        });
                        </script>
                      @endpush
                    @endif

                    <div class="mb-3 mt-3 row">
                      <div class="col-sm-12">
                        <button type="submit" class="btn btn-primary m-b-0">{{ __('Save') }}</button>
                      </div>
                    </div>
                  </form>
                </div>
              </div>
            </div>
            <div class="col-sm-6">
              <div class="row">
                
                @include('tasks.booked-time', ['booked_task_id' => $task->id, 'project' => $task->project])

                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-block">
                          @include('tasks.message_buttons', ['reply' => $reply, 'parent_message_id' => $parent_message_id])
                        </div>
                    </div>
                </div>

                @include('tasks.messages', ['task' => $task])
                
              </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);
  })

  $(document).on('change', '#project', function(){
    let project = $(this).val();
    prepareDynamicDDs(project);
  });

  function prepareDynamicDDs(project){
    $.ajax({
      method: 'post',
      url: "{{ route('project.dd') }}",
      data: {project: project},
      headers: {
        'X-CSRF-TOKEN': '{{ csrf_token() }}'
      },
      success: function(resp){
        resp = JSON.parse(resp);
        
        $('#div_project_status').html(resp.project_status);
        $('#div_project_owner').html(resp.project_owner);
        $('#div_client').html(resp.client);
        $('#project_deadline').html(resp.project_deadline);
      }
    });
  }

  $(document).on('change','#client',function(){
    let client = $(this).val();
    prepareProjecstHtml(client);
    prepareTaskOwnerHtml(client);
  });

  function prepareProjecstHtml(client){
    $.ajax({
      method: 'post',
      url: "{{ route('projects.dd') }}",
      data: {client: client},
      headers: {
        'X-CSRF-TOKEN': '{{ csrf_token() }}'
      },
      success: function(resp){
        $('#div_projects').html(resp);
        //$('#project_status option[value=""]').attr("selected", "selected");
        $('#div_project_status').html('');
        //$('#project_owner option[value=""]').attr("selected", "selected");
        $('#div_project_owner').html('');
        //$('#project_deadline').val("");
        $('#project_deadline').html("");
      }
    });
  }

  function prepareTaskOwnerHtml(client){
    $.ajax({
      method: 'post',
      url: "{{ route('task.owners.dd') }}",
      data: {client: client},
      headers: {
        'X-CSRF-TOKEN': '{{ csrf_token() }}'
      },
      success: function(resp){
        $('#div_task_owners').html(resp);
      }
    });
  }
  
</script>
@endpush