@php($routeOrder = route('manages.helpdesk-ticket-settings.ticket-outcomes.update-order'))
<table id="datatable-ticket-outcomes" 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>Outcome</th>
            <th>Categories</th>
            <th>Count</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->getCategory) > 0)
                {{ $row->getCategory->map(function($item) { return $item->category->title; })->join(', ') }}
                @else
                -
                @endif
            </td>
            <td>{{ 0 }}</td>
            <td>
                <input type="checkbox" switch="dark" class="outcome_status_toggle" value="{{ $row->id }}" id="{{ 'outcome__'. $row->id }}"
                    {{  ($row->status == 1) ? 'checked' : '' }} switch="none" />
                <label class="mb-0" for="{{   'outcome__'. $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-outcomes', $row->id) }}" data-toggle="tooltip" title="Edit" class="action-btn show-modal-lg" data-url="{{ route($routePrefix.'.edit-outcomes', $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 outcome_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-outcome', $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 Outcomes 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-outcomes',
                parentReorderUrl: '{{ $routeOrder }}',
                csrfToken: '{{ csrf_token() }}'
            });
        }
    });
    </script>
 @endpush