 <div class="ticket-details-content">
     <div class="ticket-details-explore">
         <h5 class="ticket-details-explore-title">
             <span class="animated-circle priorityName" data-hsl_color="{{ json_encode($ticket->priority->converted_color) }}">
             </span>
             # {{ __($ticket->subject) }}
         </h5>
         <div class="ticket-details-explore-content">
             <div class="ticket-details-explore-content-item">
                 <span class="icon">
                     @if ($ticket->created_via == Status::CREATED_VIA_ADMIN)
                         @include('admin.partials.svg.admin_ticket')
                     @elseif($ticket->created_via == Status::CREATED_VIA_WEB)
                         @include('admin.partials.svg.user_ticket')
                     @else
                         @include('admin.partials.svg.mail')
                     @endif
                 </span>
                 <p class="content">
                     <span class="label">@lang('Ticket Number') :</span>
                     <span class="value">{{ $ticket->ticket_number }}</span>
                 </p>
             </div>
             <div class="ticket-details-explore-content-item">
                 <span class="icon">
                     @include('admin.partials.svg.calendar')
                 </span>
                 <p class="content">
                     <span class="label">@lang('Opened'):</span>
                     <span class="value ms-1">{{ showDateTime($ticket->created_at) }}</span>
                 </p>
             </div>
             @if (count($ticket->replies))
                 <div class="ticket-details-explore-content-item">
                     <span class="icon">
                         @include('admin.partials.svg.clock')
                     </span>
                     <p class="content">
                         <span class="label">@lang('Last Replied'):</span>
                         <span class="value ms-1">{{ showDateTime($ticket->replies->first()->created_at) }}</span>
                     </p>
                 </div>
             @endif
         </div>
         <div class="ticket-details-explore-list">
             <div class="ticket-details-explore-list-item">
                 <span class="icon">
                     @include('admin.partials.svg.department')
                 </span>
                 <p class="content">
                     <span class="value">{{ __($ticket->department->name) }}</span>
                 </p>
             </div>

             @if (count($ticket->tags))
                 <div class="ticket-details-explore-list-item">
                     <div class="ticket-board-tags ticketTags">
                         @foreach ($ticket->tags as $tag)
                             <span class="tag-style tagStyle" data-converted_color="{{ json_encode($tag->converted_color) }}">{{ __($tag->name) }}</span>
                         @endforeach
                     </div>
                 </div>
             @endif
         </div>
     </div>

     <div class="ticket-details-action">
         <div class="ticket-details-action-top">
             @if ($ticket->ticketStatus->slug == 'closed' && $ticket->assign_staff_id == auth('admin')->id())
                 <button class="ticket-pin-btn feedbackBtn" data-ticket_number="{{ $ticket->ticket_number }}" data-rating="{{ $ticket->admin_happiness }}" data-feedback="{{ $ticket->admin_feedback }}" data-bs-toggle="tooltip" data-bs-placement="bottom" title="@lang('Feedback')">
                     @include('admin.partials.svg.satisfaction')
                 </button>
             @endif

             <button class="ticket-pin-btn pinTicket {{ in_array($ticket->id, auth('admin')->user()->pin_ticket ?? []) ? 'pinned' : '' }}" data-ticket_number="{{ $ticket->ticket_number }}" data-bs-toggle="tooltip" data-bs-placement="bottom" title="@lang('Pin Ticket')">
                 @include('admin.partials.svg.pin')
             </button>
         </div>

         <div class="ticket-details-action-bottom">
             <span class="ticket-status badge ticketStatus" data-hsl="{{ json_encode($ticket->ticketStatus->converted_color) }}">{{ __($ticket->ticketStatus->name) }}</span>
         </div>
     </div>
 </div>

 <ul class="ticket-details-tab">
     <li class="ticket-details-tab-item">
         <a href="{{ route('admin.ticket.details', $ticket->ticket_number) }}" class="ticket-details-tab-link {{ menuActive('admin.ticket.details') }}">
             <span class="title">@lang('Conversations') ({{ count($ticket->replies) }})</span>
         </a>
     <li class="ticket-details-tab-item">
         <a href="{{ route('admin.ticket.attachment', $ticket->ticket_number) }}" class="ticket-details-tab-link {{ menuActive('admin.ticket.attachment') }}">
             <span class="title">@lang('Attachments')</span>
         </a>
     </li>
     <li class="ticket-details-tab-item">
         <a href="{{ route('admin.ticket.other', $ticket->ticket_number) }}" class="ticket-details-tab-link {{ menuActive('admin.ticket.other') }}">
             <span class="title">@lang('Other Tickets')</span>
         </a>
     </li>
     <li class="ticket-details-tab-item">
         <a href="{{ route('admin.ticket.history', $ticket->ticket_number) }}" class="ticket-details-tab-link {{ menuActive('admin.ticket.history') }}">
             <span class="title">@lang('History')</span>
         </a>
     </li>
 </ul>

 <div id="feedbackModal" 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('Your feedback for this ticket?')</h5>
                 <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                     <i class="las la-times"></i>
                 </button>
             </div>
             <form method="POST">
                 @csrf
                 <div class="modal-body">
                     <div class="form-group">
                         <label class="form--label style-two">@lang('Rating')</label>
                         <div class="d-flex gap-3 flex-wrap">
                             <div class="form-check">
                                 <input class="form-check-input" name="rating" type="radio" value="great" id="great">
                                 <label class="form-check-label" for="great">@lang('Great')</label>
                             </div>
                             <div class="form-check">
                                 <input class="form-check-input" name="rating" type="radio" value="okay" id="okay">
                                 <label class="form-check-label" for="okay">@lang('Okay')</label>
                             </div>
                             <div class="form-check">
                                 <input class="form-check-input" name="rating" type="radio" value="bad" id="bad">
                                 <label class="form-check-label" for="bad">@lang('Bad')</label>
                             </div>
                         </div>
                     </div>
                     <div class="form-group">
                         <label class="form--label style-two">@lang('Feedback')</label>
                         <textarea name="feedback" class="form--control md-style"></textarea>
                     </div>
                 </div>
                 <div class="modal-footer">
                     <button type="submit" class="btn btn--md btn--base w-100">@lang('Submit')</button>
                 </div>
             </form>
         </div>
     </div>
 </div>

 @push('script')
     <script>
         (function($) {
             "use strict";
             $('.pinTicket').on('click', function() {
                 let $this = $(this);
                 let ticketNumber = $(this).data('ticket_number');
                 let action = `{{ route('admin.pin.ticket', '') }}/${ticketNumber}`;

                 $.get(action, function(response) {
                     if (response.status != 'error') {
                         notify('success', response.message);
                         if (response.data.is_pinned) {
                             $this.addClass('pinned');
                         } else {
                             $this.removeClass('pinned');
                         }
                     } else {
                         notify('error', response.message);
                     }
                 });
             });


             let modal = $('#feedbackModal');
             let action = `{{ route('admin.ticket.feedback', '') }}`;
             $('.feedbackBtn').on('click', function() {
                 let ticketNumber = $(this).data('ticket_number');
                 let rating = $(this).data('rating');
                 let feedback = $(this).data('feedback');
                 modal.find('form')[0].reset();
                 modal.find(`input[name="rating"][value="${rating}"]`).prop('checked', true);
                 modal.find('textarea[name="feedback"]').val(feedback);
                 modal.find('form').attr('action', action + '/' + ticketNumber);
                 modal.modal('show');
             });

             window.applyBadgeColors = function() {
                 $('.ticketStatus').each(function() {
                     const $badge = $(this);
                     const hslData = $badge.attr('data-hsl');

                     if (hslData) {
                         let hslColor = hslData;
                         if (typeof hslColor === 'string') {
                             try {
                                 hslColor = JSON.parse(hslColor);
                             } catch (e) {
                                 hslColor = null;
                             }
                         }

                         if (hslColor && typeof hslColor === 'object') {
                             const hslString = `${hslColor.h} ${hslColor.s}% ${hslColor.l}%`;
                             $badge.css('--badge-color', hslString);
                         }
                     }
                 });

                 $('.tagStyle').each(function() {
                     const jsonString = $(this).attr('data-converted_color');
                     try {
                         const hsl = JSON.parse(jsonString);
                         const hslString = `${hsl.h} ${hsl.s}% ${hsl.l}%`;
                         $(this).css('--tag-color', hslString);
                     } catch (e) {
                         console.error('Invalid HSL data:', jsonString);
                     }
                 });

                 $('.priorityName').each(function() {
                     const jsonString = $(this).attr('data-hsl_color');
                     try {
                         const hsl = JSON.parse(jsonString);
                         const hslString = `${hsl.h} ${hsl.s}% ${hsl.l}%`;
                         $(this).closest('td').find('.animated-circle').css('--circle-color', hslString);
                         $(this).css('--circle-color', hslString);
                     } catch (e) {
                         console.error('Invalid HSL data:', jsonString);
                     }
                 });

             }

             applyBadgeColors();

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