@extends('layouts.app')
@section('css')
  {{-- <link rel="stylesheet" type="text/css" href="{{ asset('assets/libs/glightbox/css/glightbox.min.css') }}" /> --}}
  {{-- <link rel="stylesheet" type="text/css" href="{{ asset('assets/libs/fancybox/jquery.fancybox.css') }}" /> --}}
@endsection

@section('content')
  <div class="page-content">
    <div class="container-fluid">

      <div class="row">
        <div class="col-xxl-9">
          <div class="card">
            <div class="card-body">
              <div class="row mb-3">
                <div class="col-md">
                  <div class="row align-items-center g-3">
                    <div class="col-md d-flex justify-content-between">
                      <h4 class="fw-bold">{{ $task->title }}</h4>
                      <h4 class="fw-bold text-end">{{ $clientName }}</h4>
                    </div>
                  </div>
                </div>
                <div class="col-md-auto">
                  <div class="hstack flex-wrap gap-1">
                    <span class="badge bg-{{ $task->status_name['color'] }} fs-12"> {!! $task->status_name['status'] !!} </span>
                  </div>
                </div>
              </div>

              <div class="text-muted">
                <h6 class="fw-semibold text-uppercase mb-3">Description</h6>
                <p>{!! $task->desc !!}</p>
              </div>

              @if ($task->subTask->count() > 0)
                <div class="text-muted">
                  <h6 class="fw-semibold text-uppercase mb-2">Sub Task</h6>
                  <div class="acitivity-timeline">
                    @foreach ($task->subTask as $subTask)
                      <div class="acitivity-item d-flex">
                        <div class="flex-shrink-0">
                          <i class="mdi mdi-checkbox-blank-circle text-info me-2"></i>
                        </div>
                        <div class="flex-grow-1 ms-3">
                          <h6 class="mb-1">{{ $subTask->title }}
                            <span class="text-danger ms-1 align-middle"><em>
                                {{ $subTask->start_date }}</em></span>
                          </h6>
                          <p class="text-muted mb-2">{!! $subTask->desc !!}</p>
                        </div>
                      </div>
                    @endforeach

                  </div>
                </div>
              @endif


              <div class="border-top border-top-dashed mt-4 pt-3">
                <div class="row gy-2">
                  <div class="col-lg-3 col-sm-4">
                    <div>
                      <p class="text-uppercase fw-medium mb-2">Product :</p>
                      <h5 class="fs-15 mb-0">{{ $task->product?->name }}</h5>
                    </div>
                  </div>
                  <div class="col-lg-3 col-sm-4">
                    <div>
                      <p class="text-uppercase fw-medium mb-2">Category :</p>
                      <h5 class="fs-15 mb-0">{{ $task->taskCategory?->title }}</h5>
                    </div>
                  </div>
                  <div class="col-lg-2 col-sm-4">
                    <div>
                      <p class="text-uppercase fw-medium mb-2">Create Date :</p>
                      <h5 class="fs-15 mb-0">{{ $task->start_date }}</h5>
                    </div>
                  </div>
                  <div class="col-lg-2 col-sm-4">
                    <div>
                      <p class="text-uppercase fw-medium mb-2">Due Date :</p>
                      <h5 class="fs-15 mb-0">{{ $task->due_date }}</h5>
                    </div>
                  </div>
                  <div class="col-lg-2 col-sm-4">
                    <div>
                      <p class="text-uppercase fw-medium mb-2">Priority :</p>
                      {!! $task->priority_status !!}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!--end card-->
          <div class="card">
            <div class="card-header">
              <div>
                <ul class="nav nav-tabs-custom card-header-tabs border-bottom-0 rounded" role="tablist">
                  <li class="nav-item">
                    <a class="nav-link active" data-bs-toggle="tab" href="#home-1" role="tab">
                      Comments ({{ $task->comments->count() }})
                    </a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" href="#messages-1" role="tab">
                      File ({{ $task->documents->count() }})
                    </a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" href="#sub-task-1" role="tab">
                      Sub Task
                    </a>
                  </li>
                </ul>
                <!--end nav-->
              </div>
            </div>
            <div class="card-body">
              <div class="tab-content">
                <div class="tab-pane active" id="home-1" role="tabpanel">
                  <h5 class="card-title mb-4">Comments</h5>
                  <div class="comment-box">

                  </div>
                  {{ html()->form('POST')->route('task.storeComment')->class(['needs-validation commentForm'])->attributes(['novalidate', 'enctype' => 'multipart/form-data'])->open() }}
                  <div class="row g-3">
                    <div class="col-lg-12">
                      <label for="exampleFormControlTextarea1" class="form-label">Leave a Comments</label>
                      <textarea class="form-control bg-light border-light" id="exampleFormControlTextarea1" name="content" rows="3"
                        placeholder="Enter comments"></textarea>
                      {{ html()->hidden('task_id', $task->id) }}
                    </div>
                    <!--end col-->
                    <div class="col-12 text-end">

                      <input type="submit" class="btn btn-success submit-btn" value="Add Comment" />
                    </div>
                  </div>
                  <!--end row-->
                  {{ html()->form()->close() }}
                </div>
                <!--end tab-pane-->
                <div class="tab-pane" id="messages-1" role="tabpanel">
                  <div class="drop-content">

                    <div class="dropzone">
                      <div class="fallback">
                        <input name="file" type="file" multiple="multiple">
                      </div>
                      <div class="dz-message needsclick">
                        <div class="mb-3">
                          <i class="display-4 text-muted ri-upload-cloud-2-fill"></i>
                        </div>
                        <h4>Drop files here or click to upload.</h4>
                      </div>
                    </div>
                    <ul class="list-unstyled mb-0" id="dropzone-preview">
                      <li class="mt-2" id="dropzone-preview-list">
                        <div class="rounded border">
                          <div class="d-flex p-2">
                            <div class="me-3 flex-shrink-0">
                              <div class="avatar-sm bg-light rounded">
                                <img data-dz-thumbnail class="img-fluid d-block rounded"
                                  src="assets/images/new-document.png" alt="Dropzone-Image" />
                              </div>
                            </div>
                            <div class="flex-grow-1">
                              <div class="pt-1">
                                <h5 class="fs-14 mb-1" data-dz-name>&nbsp;</h5>
                                <p class="fs-13 text-muted mb-0" data-dz-size></p>
                                <strong class="error text-danger" data-dz-errormessage></strong>
                              </div>
                            </div>
                            <div class="ms-3 flex-shrink-0">
                              <button data-dz-remove class="btn btn-sm btn-danger">Delete</button>
                            </div>
                          </div>
                        </div>
                      </li>
                    </ul>
                  </div>

                  <div class="row gx-2 gy-2 rounded border border-dashed p-2">
                    @foreach ($task->documents as $document)
                      <div class="col-3">
                        <a href="{{ asset('storage/' . $document->document_path) }}" data-fancybox="images"
                          target="_blank">
                          <img src="{{ asset('storage/' . $document->document_path) }}" alt=""
                            class="img-fluid material-shadow-none1 rounded" style="width: 100%;height: 150px;object-fit: cover;">
                        </a>
                      </div>
                    @endforeach
                  </div>
                </div>
                <!--end tab-pane-->
                <div class="tab-pane" id="sub-task-1" role="tabpanel">
                  {{-- <h5 class="card-title mb-4">Sub Task</h5> --}}
                  {{ html()->form('POST')->route('task.storeSubTask')->class(['needs-validation'])->attributes(['novalidate', 'enctype' => 'multipart/form-data'])->open() }}
                  @include('pms::task.subTask.create')
                  {{ html()->form()->close() }}
                </div>
                <!--end tab-pane-->
              </div>
              <!--end tab-content-->
            </div>
          </div>
          <!--end card-->
        </div>
        <!--end col-->
        <div class="col-xxl-3">
          <div class="mb-2 text-end">
            <a href="javascript:void(0)" class="btn btn-sm btn-warning" data-bs-toggle="modal"
              data-bs-target="#emailModal">
              <i class="ri-mail-fill me-2 align-middle"></i>Send Reminder
            </a>
          </div>

          <div class="card">
            <div class="card-body text-center">
              <h6 class="card-title flex-grow-1 mb-3 text-start">Time Tracking</h6>
              <div class="mb-0">
                <lord-icon id="time-icon" src="https://cdn.lordicon.com/kbtmbyzy.json"
                  colors="primary:#405189,secondary:#02a8b5" style="width:90px;height:90px"></lord-icon>
              </div>
              <div class="stopwatch fs-20"></div>
              <ul class="results"></ul>
              <div class="hstack justify-content-center control gap-2">
                <button class="btn btn-success btn-sm start">
                  <i class="ri-play-circle-line me-1 align-bottom"></i> Start
                </button>
                <button class="btn btn-info btn-sm stop">
                  <i class="ri-stop-circle-line me-1 align-bottom"></i> Stop
                </button>
              </div>
            </div>
          </div>
          <!--end card-->
          <div class="card mb-3">
            <div class="card-body">
              <div class="mb-4">
                {{ html()->label('Status')->class('form-label') }}
                {{ html()->select('status', $status, $task->status)->class('form-control')->required() }}
              </div>
            </div>
          </div>
          <!--end card-->
          <div class="card mb-3">
            <div class="card-body">
              <div class="d-flex mb-3">
                <h6 class="card-title flex-grow-1 mb-0">Assigned To</h6>
              </div>
              <ul class="list-unstyled vstack mb-0 gap-3">
                @foreach ($task->assignedUser as $assignedUser)
                  <li>
                    <div class="d-flex align-items-center">
                      <div class="flex-shrink-0">
                        <img src="{{ $assignedUser->profile_pic }}" alt=""
                          class="avatar-xs rounded-circle material-shadow">
                      </div>
                      <div class="flex-grow-1 ms-2">
                        <h6 class="mb-1"><a href="#">{{ $assignedUser->full_name }}</a></h6>
                        <p class="text-muted mb-0">{{ $assignedUser->email }}</p>
                      </div>
                      {{-- <div class="flex-shrink-0">
                          <div class="dropdown">
                            <button class="btn btn-icon btn-sm fs-16 text-muted dropdown material-shadow-none"
                              type="button" data-bs-toggle="dropdown" aria-expanded="false">
                              <i class="ri-more-fill"></i>
                            </button>
                            <ul class="dropdown-menu">
                              <li><a class="dropdown-item" href="javascript:void(0);"><i
                                    class="ri-eye-fill text-muted me-2 align-bottom"></i>View</a></li>
                            </ul>
                          </div>
                        </div> --}}
                    </div>
                  </li>
                @endforeach

              </ul>
            </div>
          </div>
          <!--end card-->
          <div class="card">
            <div class="card-body">
              <h5 class="card-title mb-3">Attachments</h5>
              <div class="vstack gap-2">
                @foreach ($task->documents as $document)
                  <div class="rounded border border-dashed p-2">
                    <div class="d-flex align-items-center">
                      <div class="me-3 flex-shrink-0">
                        <div class="avatar-xs">

                          <img src="{{ asset('storage/' . $document->document_path) }}" alt=""
                            class="avatar-xs material-shadow rounded">
                        </div>
                      </div>
                      <div class="flex-grow-1 overflow-hidden">
                        <h5 class="fs-13 mb-1"><a href="javascript:void(0);"
                            class="text-body text-truncate d-block">{{ $document->document_name }}</a></h5>
                      </div>
                      {{-- <div class="ms-2 flex-shrink-0">
                          <div class="d-flex gap-1">
                            <button type="button" class="btn btn-icon text-muted btn-sm fs-18 material-shadow-none"><i
                                class="ri-download-2-line"></i></button>
                            <div class="dropdown">
                              <button class="btn btn-icon text-muted btn-sm fs-18 dropdown material-shadow-none"
                                type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                <i class="ri-more-fill"></i>
                              </button>
                              <ul class="dropdown-menu">
                                <li><a class="dropdown-item remove-item-btn" href="javascript:void(0);"
                                    data-link="{{ route('document.destroy', $document->id) }}"
                                    data-id="{{ $document->id }}"><i
                                      class="ri-delete-bin-fill text-muted me-2 align-bottom"></i> Delete</a></li>
                              </ul>
                            </div>
                          </div>
                        </div> --}}
                    </div>
                  </div>
                @endforeach
              </div>
            </div>
          </div>
          <!--end card-->
        </div>
        <!---end col-->
      </div>
      <!--end row-->

    </div>
    <!-- container-fluid -->
  </div>

  <div class="modal fade" id="emailModal" tabindex="-1" aria-labelledby="emailModalLabel" aria-hidden="true"
    style="display: none;">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header border-0">
          <h5 class="modal-title" id="emailModalLabel">Send Email</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          {{ html()->form('POST', route('task.sendMail'))->class(['needs-validation sendMailForm'])->attributes(['novalidate'])->open() }}
          {{ html()->hidden('task_id', $task->id) }}

          <ul class="list-inline d-flex flex-column flex-wrap gap-2">
            <li class="list-inline-item">
              <span class="fw-bold">To:</span>
              <span class="selected-names">
                @foreach ($task->assignedUser as $assignedUser)
                  {{ $assignedUser->email }},
                  {{-- {{ html()->hidden('email[]')->value($assignedUser->email) }} --}}
                @endforeach
              </span>
            </li>
            <li class="list-inline-item">
              <span class="fw-bold">From:</span> {{ setting('email') }}
            </li>
          </ul>

          <div class="card card-body bg-white">
            <div class="row g-3">
              <div class="col-lg-12">
                {{ html()->label('Select Template')->class('form-label') }}
                {{ html()->select('template', @$template['email'])->class('form-control change-template')->placeholder('Select Template')->attributes(['data-type' => 'email']) }}
              </div>

              <div class="col-lg-12">
                {{ html()->label('Subject')->class('form-label') }}
                {{ html()->span('*')->class('text-danger') }}
                {{ html()->text('subject')->class('form-control subject')->required() }}
                {{ html()->div('Subject is required!')->class('invalid-feedback') }}
              </div>

              <div class="col-lg-12">
                {{ html()->label('Message')->class('form-label') }}
                {{ html()->textarea('message')->class('form-control message ckeditor-classic')->id('email-editor') }}
              </div>
            </div>
          </div>

          <div class="hstack justify-content-end mt-2 gap-2">
            <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cancel</button>
            <button type="submit" class="btn btn-success">Send</button>
          </div>
          {{ html()->form()->close() }}

        </div>
      </div>
    </div>
  </div>

@endsection


@push('js')
  <script src="{{ asset('assets/js/pages/form-validation.init.js') }}"></script>
  <script src="{{ asset('assets/js/pages/plugins/lord-icon-2.1.0.js') }}"></script>
  <script src="{{ asset('assets/js/pages/timer.js') }}"></script>
  <script src="{{ asset('assets/libs/dropzone/dropzone-min.js') }}"></script>
  {{-- <script src="{{ asset('assets/libs/fancybox/jquery.fancybox.js') }}"></script> --}}
  {{-- <script src="{{ asset('assets/libs/glightbox/js/glightbox.min.js') }}"></script>
  <script src="{{ asset('assets/libs/isotope-layout/isotope.pkgd.min.js') }}"></script>
  <script src="{{ asset('assets/js/pages/gallery.init.js') }}"></script> --}}

  <script>
    var previewTemplate, dropzone, dropzonePreviewNode = document
      .querySelector("#dropzone-preview-list");
    var task_id = "{{ $task->id }}";
    dropzonePreviewNode.id = "";

    if (dropzonePreviewNode) {
      previewTemplate = dropzonePreviewNode.parentNode.innerHTML;
      dropzonePreviewNode.parentNode.removeChild(dropzonePreviewNode);

      dropzone = new Dropzone(".dropzone", {
        url: "uploadFile",
        method: "post",
        previewTemplate: previewTemplate,
        previewsContainer: "#dropzone-preview",
        headers: {
          "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr('content')
        }
      });

      dropzone.on("sending", function(file, xhr, formData) {
        formData.append("task_id", '{{ $task->id }}');
      });
    }


    $(document).ready(function() {
      fetchComment();

      let time = '{{ $task->latest_task_time?->end_time }}';
      let timeArray = [0, 0, 0];
      if (time) {
        timeArray = time.split(':').map(numStr => parseInt(numStr, 10));
      }

      let stopwatch = new Stopwatch(
        $('.stopwatch'),
        $('.results'),
        timeArray
      );

      $('.start').click(function() {
        console.log('time start vayo');
        stopwatch.start();
      });

      $('.lap').click(function() {
        stopwatch.lap();
      });

      $('.stop').click(function() {
        stopwatch.stop();
        let formData = {
          task_id: task_id,
          time: $('.stopwatch').text()
        };
        storeTime(formData)
      });

      $('.restart').click(function() {
        stopwatch.restart();
      });

      $('.clear').click(function() {
        stopwatch.clear();
      });
    });

    $('body').on('change', '#status', function() {
      status = $(this).val();
      $.ajax({
        type: "GET",
        url: '{{ route('task.changeStatus') }}',
        data: {
          id: task_id,
          changeStatus: status
        },
        success: function(data) {
          flasher.success('Status Changed');
          location.reload()
        },
      });
    })

    $('body').on('submit', '.commentForm', function(event) {

      event.preventDefault();
      const url = $(this).attr('action');
      const method = $(this).attr('method');

      let formData = new FormData($(this)[0]);

      let button = $(this).find('.submit-btn');

      // button.prop('disabled', true);
      // $('.loader').removeClass('d-none');
      // $('.icon').addClass('d-none');

      $.ajax({
        url: url,
        type: method,
        data: formData,
        dataType: 'json',
        processData: false,
        contentType: false,
        headers: {
          'X-CSRF-TOKEN': $("meta[name='csrf-token']").attr('content'),
        },
      }).done(function(response) {
        if (response.status == true) {
          flasher.success(response.msg);
          $('.commentForm')[0].reset();
          fetchComment();
        }

      }).fail(function(jqXHR, textStatus, errorThrown) {
        flasher.error("Failed to send message!");
      })
    });

    const fetchComment = () => {
      fetch(base_url + `/admin/task/fetchComment/${task_id}`)
        .then(response => response.text())
        .then(html => {
          document.querySelector('.comment-box').innerHTML = html;
        })
    }

    const storeTime = (formData) => {
      $.ajax({
        url: '{{ route('taskTime.store') }}',
        type: 'POST',
        data: formData,
        dataType: 'json',
        headers: {
          'X-CSRF-TOKEN': $("meta[name='csrf-token']").attr('content'),
        },
      }).done(function(response) {
        if (response.status == true) {
          flasher.success(response.msg);
        }

      }).fail(function(jqXHR, textStatus, errorThrown) {
        flasher.error("Failed to send message!");
      })
    }
  </script>
  <script>
    $(document).ready(function() {
      const icon = $('#time-icon');

      $('.start').on('click', function() {
        icon.attr('trigger', 'loop');
      });

      $('.stop').on('click', function() {
        icon.attr('trigger', '');
      });

      $('body').on('change', '.change-template', function() {
        id = $(this).val();
        that = $(this)

        if (id == '') {
          toastr.error('Choose Template First');
          return false;
        }

        $.ajax({
          type: "GET",
          url: '{{ route('template.findByAjax') }}',
          data: {
            id: id,
          },
          success: function(res) {
            result = res.data;
            if (result.status) {
              that.parents('.card').find('.subject').val(result.subject);

              let messageFieldId = that.parents('.card').find('.message').attr('id');
              let editor = CKEDITOR.instances[messageFieldId];
              if (editor) {
                let currentContent = editor.getData();
                editor.setData(result.message);
              }

            }
          },
        });
      })

      $(document).on('submit', '.sendMailForm', function(event) {
        event.preventDefault();
        const url = $(this).attr('action');
        const method = $(this).attr('method');
        let form = $(this);
        let formData = new FormData(form[0]);

        let myModalEl = $(this).closest('.modal').attr('id');
        var emailModal = bootstrap.Modal.getOrCreateInstance($('#' + myModalEl))
        const button = $(this).find('button[type="submit"]');

        $.ajax({
          url: url,
          type: method,
          data: formData,
          dataType: 'json',
          processData: false,
          contentType: false,
          headers: {
            'X-CSRF-TOKEN': $("meta[name='csrf-token']").attr('content'),
          },
          beforeSend: () => {
            button.text('Sending...');
            button.prop('disabled', true);
          },
          success: function(response) {
            if (response.status == true) {
              emailModal.hide()

              button.text('Send');
              button.prop('disabled', false);

              let messageFieldId = form.find('.message').attr('id');
              let editor = CKEDITOR.instances[messageFieldId];

              if (editor) {
                editor.setData('');
              }

              form[0].reset();
              toastr.success(response.msg);

            }

            $('#student-table').DataTable().ajax.reload();
            var statusModal = bootstrap.Modal.getInstance($('#bulkStatusModal'));
            statusModal.hide();


          },

          error: function(xhr) {
            if (xhr.status == 422) {
              let errors = xhr.responseJSON.errors;
              $('.error-message').remove();
              $.each(errors, function(key, value) {
                let errorMessage = $(
                    '<span class="error-message text-danger mt-2"></span>'
                  )
                  .text(
                    value[0]);
                $('#' + key).after(errorMessage);
              });
            } else {
              console.log(xhr);
            }
          },
          complete: () => {
            button.text('Save');
            button.prop('disabled', false);
          }
        })

      })


    });
  </script>
@endpush