@php($routeOrder = route('manages.helpdesk-ticket-settings.ticket-categories.update-order'))
<table id="datatable-ticket-category" class="{{ \Config::get('view.table.table_class') }}" data-update-order-url="{{ $routeOrder }}">
     <thead class="{{ \Config::get('view.table.table_head_class') }}">
         <tr>
             <th class="w-5"></th>
             <th>Category</th>
             <th>Outcomes</th>
             <th>Total Ticket Types</th>
             <th>Active</th>
             @if($permission['edit'] || $permission['destroy'] || $permission['manageRole'])
             <th class="text-right">Actions</th>
             @endif
         </tr>

     </thead>

     <tbody>
         @if(isset($data) && count($data) > 0)
         @foreach($data as $row)
         <tr data-id="{{ $row->id }}">
             <td class="w-5"><img src="{{ asset('img/drag-dot.svg') }}" class="drag-handle"></td>
             <td>{{ $row->title ?? '' }}</td>
             <td>
                @if(count($row->getOutcome) > 0)
                    {{ $row->getOutcome->map(function($item) { return $item->outcome->title; })->join(', ') }}
                @else
                    -
                @endif
             <td>
                @if(isset($row->typesMappings) && count($row->typesMappings) > 0)
                    {{ count($row->typesMappings) }}
                @else
                    0
                @endif
             </td>
             <td>
                 <input type="checkbox" switch="dark" class="category_status_toggle" value="{{ $row->id }}" id="{{ 'category__'. $row->id }}"
                     {{  ($row->status == 1) ? 'checked' : '' }} switch="none" />
                 <label class="mb-0" for="{{   'category__'. $row->id }}" data-on-label="" data-off-label=""></label>

             </td>
             @if($permission['edit'] || $permission['destroy'] || $permission['manageRole'])
             <td>
                 <div class="d-flex gap-2 justify-content-end">

                     @if(isset($permission['edit']) && $permission['edit'])
                     <a href="{{ route($routePrefix.'.edit-category', $row->id) }}" data-toggle="tooltip" title="Edit" class="action-btn show-modal-lg" data-url="{{ route($routePrefix.'.edit-category', $row->id) }}"><i class="{{ \Config::get('settings.icon_edit') }}"></i></a>
                     @endif
                     @if(isset($permission['destroy']) && $permission['destroy'])
                     <a href="javascript:void(0);" class="action-btn category_row_delete" data-toggle="tooltip" title="Delete"
                         data-confirm="Are You Sure? | You want to delete?"
                         data-confirm-yes="event.preventDefault();
                                    document.getElementById('delete-form-{{ $row->id }}').submit();"><i class="{{ \Config::get('settings.icon_delete') }}"></i></a>
                     {!! html()->form('DELETE', route($routePrefix . '.destroy-category', $row->id))->attributes([
                     'style' => 'display:inline',
                     'id' => 'delete-form-' . $row->id,
                     ])->open() !!}
                     {!! html()->form()->close() !!}
                     @endif
                 </div>
             </td>
             @endif
         </tr>
         @endforeach
         @else
         <tr>
             <td colspan="5" class="text-center">No Ticket Category Found</td>
         </tr>
         @endif
     </tbody>

 </table>


 @push('page_script')
 <script src="{{ asset('assets/js/drag-drop-table.js') }}"></script>
    <script>
    $(function(){
        if(typeof initTableDragDrop === 'function'){
            initTableDragDrop({
                tableSelector: '#datatable-ticket-category',
                parentReorderUrl: '{{ $routeOrder }}',
                csrfToken: '{{ csrf_token() }}'
            });
        }
    });
    </script>
 @endpush