@if(isset($data) && count($data) > 0)
<table class="table table-hover" id="agent-type-table">
    <thead>
        <tr>
            <th>Type</th>
            <th>Title</th>
            <th>Options</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        @foreach($data as $key => $type)
        <tr>
            <td>
                <div class="d-flex align-items-center gap-2">
                    <div class="d-flex align-items-center justify-content-center bg-secondary text-white rounded-circle" style="width:36px; height:36px; font-size:1rem;">
                        {{ strtoupper(mb_substr($type->userType ? $type->userType->name : 'NA', 0, 1)) }}
                    </div>
                    <strong>{{ $type->userType ? $type->userType->name : 'N/A' }}</strong>
                </div>
            </td>
            <td>{{ $type->title }}</td>
            <td>
                @php
                    $settings = is_string($type->settings) ? json_decode($type->settings, true) : $type->settings;
                    $optionCount = is_array($settings) ? count($settings) : 0;
                @endphp
                <span class="badge bg-info">{{ $optionCount }} options</span>
            </td>
            <td>
                <div class="d-flex gap-2">
                    @if($permission['edit'])
                    <a href="{{ route($routePrefix . '.edit', $type->id) }}" class="btn btn_edit" title="Edit">
                        <img src="{{ asset('images/edit.svg') }}" />
                    </a>
                    @endif
                    @if($permission['destroy'])
                    <a class="me-4" data-toggle="tooltip" title="Delete" 
                       data-confirm="Are You Sure?|This action can not be undone. Do you want to continue?" 
                       data-confirm-yes="event.preventDefault(); document.getElementById('delete-form-{{$type->id}}').submit();">
                        <img src="{{ asset('images/delete_black.svg') }}" />
                    </a>
                    <form id="delete-form-{{ $type->id }}" action="{{ route($routePrefix . '.destroy', $type->id) }}" method="POST" style="display: none;">
                        @csrf
                        @method('DELETE')
                    </form>
                    @endif
                </div>
            </td>
        </tr>
        @endforeach
    </tbody>
</table>
<div class="pagination-container">
    {!! $data->appends(request()->query())->links() !!}
</div>
@else
<div class="alert alert-info">
    <div class="text-center py-4">
        <div class="text-muted">No records found.</div>
    </div>
</div>
@endif