@php($routeOrder = route('manages.helpdesk-ticket-settings.ticket-types.update-order'))

{{-- Items-per-page + record count (HTS-TT-005, HTS-TT-008) --}}
<div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
    <div class="d-flex align-items-center gap-2">
        <label class="mb-0">Items per page:</label>
        <select id="ticket-types-per-page" class="form-control form-control-sm" style="width:80px;">
            @foreach($allowedPerPage as $size)
                <option value="{{ $size }}" {{ $perPage == $size ? 'selected' : '' }}>{{ $size }}</option>
            @endforeach
        </select>
    </div>
    @if($data->total() > 0)
        <span class="text-muted small">
            Showing {{ $data->firstItem() }}–{{ $data->lastItem() }} of {{ $data->total() }} ticket types
        </span>
    @endif
</div>

<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>

            @if(isset($permission['edit']) && $permission['edit'])
                <th class="text-center">Active</th>
            @endif
            @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>
                    @if(isset($permission['edit']) && $permission['edit'])
                        <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>
                    @endif
                    @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>

{{-- Pagination links (HTS-TT-006, HTS-TT-007) --}}
<div class="d-flex justify-content-end mt-3" id="ticket-types-pagination">
    {{ $data->appends(['per_page' => $perPage, 'tab' => 'types', 'search_text' => request('search_text')])->links() }}
</div>

 @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(); }
            }
        });
    });

    // Per-page change reloads the types listing (HTS-TT-008)
    (function () {
        var sel = document.getElementById('ticket-types-per-page');
        if (sel) {
            sel.addEventListener('change', function () {
                var url = new URL(window.location.href);
                url.searchParams.set('per_page', this.value);
                url.searchParams.set('tab', 'types');
                window.location.href = url.toString();
            });
        }
    }());
    </script>
 @endpush