  <div class="customer-layout-body p-0">
      <div class="table-scroller">
          <table class="table">
              <tbody>
                  @forelse ($supportTickets as $ticket)
                      <tr>
                          <td class="ticket-col">
                              <div class="ticket-board">
                                  <span class="ticket-board-icon">
                                      <i class="fa-regular fa-envelope"></i>
                                  </span>
                                  <div class="ticket-board-content">
                                      <a href="{{ route('admin.ticket.details', $ticket->ticket_number) }}" class="ticket-board-title">
                                          {{ __($ticket->subject) }}
                                      </a>
                                      <div class="ticket-board-list">
                                          <p class="ticket-board-type">
                                              {{ __($ticket->department?->name) }}
                                          </p>
                                          <a href="{{ route('admin.ticket.details', $ticket->ticket_number) }}" class="ticket-board-id fw-bold">
                                              #{{ $ticket->ticket_number }}
                                          </a>

                                          @if (count($ticket->tags))
                                              <div class='ticket-board-tags'>
                                                  @foreach ($ticket->tags as $tag)
                                                      <span class='tag-style'>{{ __($tag->name) }}</span>
                                                  @endforeach
                                              </div>
                                          @endif
                                      </div>
                                  </div>
                              </div>
                          </td>
                          <td>
                              <div class="ticket-board">
                                  @php
                                      if (request()->routeIs('admin.agent.happiness.rating')) {
                                          $imagePath = getImage(getFilePath('userProfile') . '/' . $ticket->user?->image, getFileSize('userProfile'), true);
                                          $name = $ticket->user->fullname;
                                          $route = route('admin.customer.overview', $ticket->user_id);
                                      } else {
                                          $imagePath = getImage(getFilePath('adminProfile') . '/' . $ticket->admin?->image, getFileSize('adminProfile'), true);
                                          $name = $ticket->admin?->name;
                                          $route = route('admin.customer.overview', $ticket->assign_staff_id);
                                      }
                                  @endphp
                                  <span class="ticket-board-thumb">
                                      <div class="mini-profile">
                                          <div class="mini-profile-img">
                                              <img src="{{ $imagePath }}" alt="ticket-board" />
                                          </div>
                                      </div>
                                  </span>
                                  <div class="ticket-board-content">
                                      <a href="{{ $route }}" class="ticket-board-title">
                                          {{ $name }}
                                      </a>
                                      <div class="ticket-board-list">
                                          <p class="ticket-board-type text--warning">
                                              {{ showDateTime($ticket->rated_at, 'd M Y') }}
                                          </p>
                                          <span>.</span>
                                          <p class="ticket-board-id">
                                              {{ showDateTime($ticket->rated_at, 'h:i A') }}
                                          </p>
                                      </div>
                                  </div>
                              </div>
                          </td>

                          <td>
                            <div class="feedback" data-rating="{{ __(ucFirst($ticket->customer_happiness)) }}" data-feedback="{{ __($ticket->feedback) }}" data-agent_rating="{{ __(ucFirst($ticket->admin_happiness)) }}" data-admin_feedback="{{ __($ticket->admin_feedback) }}">
                                <p class="fs-14 text--dark">{{ __(ucFirst($ticket->customer_happiness)) }}
                                    <span class="icon">
                                        @include("admin.partials.svg.$ticket->customer_happiness")
                                    </span>
                                </p>
                                <p class="fs-12 line-clamp-1 happiness-text">{{ __($ticket->feedback) }}</p>
                            </div>
                          </td>
                      </tr>
                  @empty
                      <tr>
                          <td colspan="100%">
                              <x-empty-message message="No feedback found" />
                          </td>
                      </tr>
                  @endforelse
              </tbody>
          </table>
      </div>
  </div>


  <div id="happinessModal" class="modal custom--modal fade" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
          <div class="modal-content">
              <div class="modal-header">
                  <h5 class="modal-title">@lang('Happiness Rating')</h5>
                  <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                      <i class="las la-times"></i>
                  </button>
              </div>

              <div class="modal-body">
                  <h6>@lang('Customer'): <strong class="customerRating"></strong></h6>
                  <hr class="my-1">
                  <p class="customerFeedback"></p>

                  <h6 class="mt-3">@lang('Agent'): <strong class="agentRating"></strong></h6>
                  <hr class="my-1">
                  <p class="agentFeedback"></p>
              </div>
              <div class="modal-footer">
                  <button type="button" class="btn btn--dark btn--sm" data-bs-dismiss="modal">@lang('Close')</button>
              </div>
          </div>
      </div>
  </div>

  @push('style')
      <style>
          .feedback {
              cursor: pointer;
          }
      </style>
  @endpush


  @push('script')
      <script>
          (function($) {
              "use strict";
              let modal = $('#happinessModal');
              
              $('.feedback').on('click', function() {
                  modal.find('.customerRating').text($(this).data('rating'));
                  modal.find('.customerFeedback').text($(this).data('feedback'));
                  modal.find('.agentRating').text($(this).data('agent_rating'));
                  modal.find('.agentFeedback').text($(this).data('admin_feedback'));
                  modal.modal('show');
              });

          })(jQuery);
      </script>
  @endpush
