@extends('layouts.app')
@section('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">
                      <div>
                        <h4 class="fw-bold">
                            {{ $tickets->subject }}
                        </h4>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-md-auto">
                  <div class="hstack flex-wrap gap-1">
                    <span class="badge bg-
                    {{ $tickets->status_name['color'] }}
                     fs-12">
                     {!! $tickets->status_name['status'] !!}
                     </span>
                  </div>
                </div>
              </div>

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

              </div>

              <div class="border-top border-top-dashed mt-4 pt-3">
                <div class="row gy-2">
                  <div class="col-lg-2 col-sm-4">
                    <div>
                      <p class="text-uppercase fw-medium mb-2">Department :</p>
                      <h5 class="fs-15 mb-0">
                        {{ $tickets->department?->name }}
                    </h5>
                    </div>
                  </div>
                  {{-- <div class="col-lg-2 col-sm-4">
                    <div>
                      <p class="text-uppercase fw-medium mb-2">Employee :</p>
                      <h5 class="fs-15 mb-0">
                        {{ $tickets->employee?->first_name }}
                    </h5>
                    </div>
                  </div> --}}
                  <div class="col-lg-2 col-sm-4">
                    <div>
                      <p class="text-uppercase fw-medium mb-2">Priority :</p>
                      {!! $tickets->priority_status !!}
                    </div>
                  </div>
                  <div class="col-lg-2 col-sm-4">
                    <div>
                      <p class="text-uppercase fw-medium mb-2">Ticket Type :</p>
                      {!! $tickets->ticket_type !!}
                    </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
                      ({{ $tickets->comments->count() }})
                    </a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" href="#messages-1" role="tab">
                      File
                      ({{ $tickets->documents->count() }})
                    </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 data-simplebar style="height: 200px;" class="mx-n3 mb-2 px-3">
                    @forelse ($tickets->comments as $comment)
                      <div class="d-flex mb-4">
                        <div class="flex-shrink-0">
                          <img src="
                          {{ asset('assets/images/user.png') }}
                           " alt=""
                            class="avatar-xs rounded-circle material-shadow" />
                        </div>
                        <div class="flex-grow-1 ms-3">
                          <h5 class="fs-13"><a href="#">
                            {{ $comment->user?->name }}
                        </a> <small
                              class="text-muted">
                              {{ $comment->created_at_formatted }}
                            </small></h5>
                          <p class="text-muted">
                            {!! $comment->content !!}
                        </p>
                          <a href="javascript: void(0);" class="badge text-muted bg-light"><i class="mdi mdi-reply"></i>
                            Reply</a>

                        </div>
                      </div>
                    @empty
                    @endforelse


                  </div>
                  {{ html()->form('POST')
                  ->route('ticket.storeComment')
                  ->class(['needs-validation'])->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('tickets_id', $tickets->id) }}
                    </div>
                    <!--end col-->
                    <div class="col-12 text-end">

                      <input type="submit" class="btn btn-success" 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 ($tickets->documents as $document)
                      <div class="col-3">
                        <img src="
                        {{ asset('storage/' . $document->document_path) }}
                         " alt=""
                          class="img-fluid material-shadow-none1 rounded">
                      </div>
                    @endforeach
                  </div>
                </div>
                <!--end tab-pane-->

              </div>
              <!--end tab-content-->
            </div>
          </div>
          <!--end card-->
        </div>
        <!---end col-->
      </div>
      <!--end row-->

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

@push('js')
  <script src="{{ asset('assets/js/pages/form-validation.init.js') }}"></script>
  <script src="{{ asset('assets/libs/dropzone/dropzone-min.js') }}"></script>
  <script>
    var previewTemplate, dropzone, dropzonePreviewNode = document
      .querySelector("#dropzone-preview-list");
    var tickets_id = "{{ $tickets->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("tickets_id", '{{ $tickets->id }}');
      });
    }

    $('body').on('change', '#status', function() {
      status = $(this).val();
      $.ajax({
        type: "GET",
        url: '{{ route('ticket.changeStatus') }}',
        data: {
          id: tickets_id,
          changeStatus: status
        },
        success: function(data) {
          location.reload()
        },
      });
    })
  </script>
@endpush