@php($routeOrder = route('manages.helpdesk-ticket-settings.ticket-types.update-order'))
<table id="datatable-ticket-types" class="{{ \Config::get('view.table.table_class') }}">
     <thead class="{{ \Config::get('view.table.table_head_class') }}">
         <tr>
             <th class="w-5"></th>
             <th>Ticket Type</th>
             <th>Ticket Category</th>
             <th>Total Tickets</th>
             <th>Days to Resolve</th>
             <th class="text-center">Business Days Only</th>
             <th class="text-center">Active</th>
             @if($permission['edit'] || $permission['destroy'] || $permission['manageRole'])
             <th class="w-25 text-right">Actions</th>
             @endif
         </tr>

     </thead>

     <tbody>
         @if(isset($data) && count($data) > 0)
             @foreach($data as $type)
                 <tr data-id="{{ $type->id }}">
                     <td class="w-5"><img src="{{ asset('img/drag-dot.svg') }}" class="drag-handle"></td>
                     <td>{{ $type->title }}</td>
                     <td>{{ $type->category->title ?? '—' }}</td>
                     <td>{{ $type->tickets_count }}</td>
                     <td>{{ $type->days_to_resolve ?? '0' }}</td>
                    <td class="text-center align-middle">
                        @php($isBiz = (bool)$type->business_days_only)
                        @if($isBiz)
                            <i class="fa fa-check text-success" aria-label="Business days only"></i>
                        @else
                            <i class="fa fa-times text-danger" aria-label="All days"></i>
                        @endif
                    </td>
                    <td class="text-center align-middle">
                        <input type="checkbox" switch="dark" class="ticket-type-status-switch" data-id="{{ $type->id }}" data-toggle-url="{{ route('manages.helpdesk-ticket-settings.ticket-types.toggle-status',$type->id) }}" id="ticket-type-status-{{ $type->id }}" {{ $type->status ? 'checked' : '' }} switch="none" />
                        <label class="mb-0" for="ticket-type-status-{{ $type->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('manages.helpdesk-ticket-settings.edit-type', $type->id) }}" data-toggle="tooltip" title="Edit" class="action-btn show-modal-xl" data-url="{{ route('manages.helpdesk-ticket-settings.edit-type', $type->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 single-delete" data-toggle="tooltip" title="Delete"
                                       data-confirm="Delete Ticket Type?|This action can not be undone. Do you want to continue?"
                                       data-confirm-yes="event.preventDefault(); document.getElementById('delete-ticket-type-form-{{ $type->id }}').submit();">
                                        <i class="{{ \Config::get('settings.icon_delete') }}"></i>
                                    </a>
                                    {!! html()->form('DELETE', route('manages.helpdesk-ticket-settings.destroy-type',$type->id))->attributes(['style'=>'display:inline','id'=>'delete-ticket-type-form-'.$type->id])->open() !!}
                                    {!! html()->form()->close() !!}
                                @endif
                             </div>
                         </td>
                     @endif
                 </tr>
             @endforeach
         @else
             <tr>
                 <td colspan="8" class="text-center">No Ticket Types 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-types',
                parentReorderUrl: '{{ $routeOrder }}',
                csrfToken: '{{ csrf_token() }}'
            });
        }
        // Status toggle via AJAX + SweetAlert (no form submission)
        $(document).on('change','.ticket-type-status-switch',function(){
            var $sw=$(this), id=$sw.data('id'), url=$sw.data('toggle-url');
            var newState=$sw.is(':checked');
            function revert(){ $sw.prop('checked', !newState); }
            function applyToggle(){
                $.ajax({
                    method:'POST',
                    url:url,
                    data:{ _token:'{{ csrf_token() }}' },
                    error:function(){ revert(); if(typeof Swal!=='undefined'){ Swal.fire({ title:'Error', text:'Failed to update status', icon:'error', confirmButtonColor:'#16C4C0', customClass:{confirmButton:'swal-confirm-button'}, showClass:{popup:'animate__animated animate__fadeInDown'}, hideClass:{popup:'animate__animated animate__fadeOutUp'}, didOpen:function(){ if(!document.getElementById('swal-hover-styles')){ var s=document.createElement('style'); s.id='swal-hover-styles'; s.textContent='.swal-confirm-button:hover{background-color:#9D9DFC!important;}'; document.head.appendChild(s);} } }); } else { alert('Failed to update status'); } },
                    success:function(){ showSuccessToast('Ticket type status updated successfully!'); }
                });
            }
            if(typeof Swal!=='undefined'){
                Swal.fire({
                    title: newState ? 'Activate ticket type?' : 'Deactivate ticket type?',
                    text: '',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#16C4C0',
                    cancelButtonColor: '#5D5D5D',
                    confirmButtonText: newState ? 'Activate' : 'Deactivate',
                    cancelButtonText: 'Cancel',
                    customClass: { confirmButton: 'swal-confirm-button', cancelButton: 'swal-cancel-button' },
                    showClass: { popup: 'animate__animated animate__fadeInDown' },
                    hideClass: { popup: 'animate__animated animate__fadeOutUp' },
                    didOpen: function(){ if(!document.getElementById('swal-hover-styles')){ var st=document.createElement('style'); st.id='swal-hover-styles'; st.textContent='.swal-confirm-button:hover,.swal-cancel-button:hover{background-color:#9D9DFC!important;}'; document.head.appendChild(st);} }
                }).then(function(res){ if(res.isConfirmed){ applyToggle(); } else { revert(); } });
            } else {
                if(confirm('Change status?')){ applyToggle(); } else { revert(); }
            }
        });
    });
    </script>
 @endpush