@php
    // Chỉ hiển thị nút Guest mode cho tenant ICC
    $tenantConnection = \App\Helpers\HelperTenant::getCurrentTenantConnection();
@endphp

<div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
    <div class="overflow-x-auto -mx-4 md:mx-0">
        <table class="w-full divide-y divide-slate-200">
            <thead class="bg-slate-50">
                <tr>
                    <th class="px-6 md:px-8 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider whitespace-nowrap w-[80px]">#ID</th>
                    <th class="px-6 md:px-8 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider whitespace-nowrap">Tên học sinh</th>
                    <th class="px-6 md:px-8 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider whitespace-nowrap">Lớp</th>
                    <th class="px-6 md:px-8 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider whitespace-nowrap">Khóa học</th>
                    <th class="px-6 md:px-8 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider whitespace-nowrap">Tài khoản</th>
                    <th class="px-6 md:px-8 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider whitespace-nowrap">Email</th>
                    <th class="px-6 md:px-8 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider whitespace-nowrap">Điện thoại</th>
                    <th class="px-6 md:px-8 py-3 text-center text-xs font-semibold text-slate-600 uppercase tracking-wider whitespace-nowrap w-[100px]">Hành động</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-slate-200">
                @foreach ($students as $student)
                <tr class="hover:bg-slate-50 transition-colors">
                    <td class="px-6 md:px-8 py-4 whitespace-nowrap text-sm text-slate-700">{{ $student->id }}</td>
                    <td class="px-6 md:px-8 py-4 whitespace-nowrap">
                        <a data-fullname="{{ $student->name }}" 
                            title="{{ $student->name }}" 
                            href="{{ route('user_learning.courses', [$student->id]) }}" 
                            class="text-blue-600 hover:text-blue-800 font-medium text-sm">
                            {{ $student->name }}
                        </a>
                    </td>
                    <td class="px-6 md:px-8 py-4 whitespace-nowrap text-sm text-slate-700">
                        @if($student->classesStudent->isNotEmpty())
                            @php
                                $classNames = $student->classesStudent->pluck('name');
                                $displayedClasses = $classNames->take(1)->implode(', ');
                                $remainingClasses = $classNames->slice(1)->implode(', ');
                            @endphp
                            {{ $displayedClasses }}
                            @if($classNames->count() > 1)
                                , 
                                <button type="button" class="more_info_classes text-blue-600 hover:text-blue-800 underline" 
                                    title="{{ $remainingClasses }}" 
                                    data-fullname="{{ $student->name }}" 
                                    data-title-modal="Lớp" 
                                    data-classes-name="{{ $classNames->implode(', ') }}">
                                    ...
                                </button>
                            @endif
                        @else
                            <span class="text-slate-400">-</span>
                        @endif
                    </td>
                    <td class="px-6 md:px-8 py-4 whitespace-nowrap text-sm text-slate-700">
                        @if(isset($student->courses) && $student->courses->isNotEmpty())
                            @php
                                $courseNames = $student->courses->unique('moodle_id')->pluck('moodle_name');
                                $displayedCourses = $courseNames->take(1)->implode(', ');
                                $remainingCourses = $courseNames->slice(1)->implode(', ');
                            @endphp
                            {{ $displayedCourses }}
                            @if($courseNames->count() > 1)
                                , 
                                <button type="button" class="more_info_classes text-blue-600 hover:text-blue-800 underline" 
                                    title="{{ $remainingCourses }}" 
                                    data-fullname="{{ $student->name }}" 
                                    data-title-modal="Khóa học" 
                                    data-classes-name="{{ $courseNames->implode(', ') }}">
                                    ...
                                </button>
                            @endif
                        @else
                            <span class="text-slate-400">-</span>
                        @endif
                    </td>
                    <td class="px-6 md:px-8 py-4 whitespace-nowrap text-sm text-slate-700">{{ $student->username ?? '-' }}</td>
                    <td class="px-6 md:px-8 py-4 whitespace-nowrap text-sm text-slate-700">{{ $student->email }}</td>
                    <td class="px-6 md:px-8 py-4 whitespace-nowrap text-sm text-slate-700">{{ $student->phone ?? '-' }}</td>
                    <td class="px-6 md:px-8 py-4 whitespace-nowrap text-center">
                        <div class="flex items-center justify-center gap-2">
                            <button onclick="showModalEditUser(event, this)" data-student-id="{{ $student->user_id }}" title="Chỉnh sửa" class="text-slate-600 hover:text-blue-600 transition-colors">
                                <i data-lucide="edit" class="w-5 h-5"></i>
                            </button>
                            @if($tenantConnection === 'lms_tenant_icc' && in_array($currentEmail ?? '', ['test@hocmai.vn','thangnt@hocmai.vn','kienpn@ctv.hocmai.vn', 'tungtt@ctv.hocmai.vn']))
                                <button 
                                    onclick="showGuestModeModal(event, this)" 
                                    data-student-id="{{ $student->id }}" 
                                    data-student-name="{{ $student->name }}" 
                                    data-student-zeus-id="{{ $student->zeus_id ?? '' }}"
                                    title="Guest mode" 
                                    class="text-slate-600 hover:text-emerald-600 transition-colors"
                                >
                                    <i data-lucide="external-link" class="w-5 h-5"></i>
                                </button>
                            @endif
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    
    <!-- Pagination -->
    @if($students->hasPages())
        <div class="px-4 md:px-6 py-4 border-t border-slate-200 bg-slate-50">
            <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
                <div class="text-xs sm:text-sm text-slate-600 whitespace-nowrap">
                    Hiển thị {{ $students->firstItem() }} đến {{ $students->lastItem() }} trong tổng số {{ $students->total() }} kết quả
                </div>
                <div class="flex items-center gap-1.5 sm:gap-2 overflow-x-auto w-full sm:w-auto -mx-4 sm:mx-0 px-4 sm:px-0">
                    @if($students->onFirstPage())
                        <span class="px-2.5 sm:px-3 py-1.5 text-xs sm:text-sm text-slate-400 bg-slate-100 rounded-lg cursor-not-allowed flex-shrink-0">
                            <i data-lucide="chevron-left" class="w-4 h-4 inline-block"></i>
                        </span>
                    @else
                        <a href="{{ $students->appends(request()->except('page'))->previousPageUrl() }}" class="px-2.5 sm:px-3 py-1.5 text-xs sm:text-sm text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors flex-shrink-0">
                            <i data-lucide="chevron-left" class="w-4 h-4 inline-block"></i>
                        </a>
                    @endif
                    
                    @php
                        $currentPage = $students->currentPage();
                        $lastPage = $students->lastPage();
                        $onEachSide = 2; // Số trang hiển thị mỗi bên của trang hiện tại
                        
                        // Tính toán phạm vi trang cần hiển thị
                        $windowStart = max(1, $currentPage - $onEachSide);
                        $windowEnd = min($lastPage, $currentPage + $onEachSide);
                    @endphp
                    
                    {{-- Hiển thị trang đầu tiên nếu không nằm trong window --}}
                    @if($windowStart > 1)
                        <a href="{{ $students->appends(request()->except('page'))->url(1) }}" class="px-2.5 sm:px-3 py-1.5 text-xs sm:text-sm text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors flex-shrink-0 min-w-[2rem] text-center">1</a>
                        @if($windowStart > 2)
                            <span class="px-1 sm:px-2 text-xs sm:text-sm text-slate-400 flex-shrink-0">...</span>
                        @endif
                    @endif
                    
                    {{-- Hiển thị các trang trong window --}}
                    @for($page = $windowStart; $page <= $windowEnd; $page++)
                        @if($page == $currentPage)
                            <span class="px-2.5 sm:px-3 py-1.5 text-xs sm:text-sm font-medium text-white bg-blue-600 rounded-lg flex-shrink-0 min-w-[2rem] text-center">{{ $page }}</span>
                        @else
                            <a href="{{ $students->appends(request()->except('page'))->url($page) }}" class="px-2.5 sm:px-3 py-1.5 text-xs sm:text-sm text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors flex-shrink-0 min-w-[2rem] text-center">{{ $page }}</a>
                        @endif
                    @endfor
                    
                    {{-- Hiển thị trang cuối cùng nếu không nằm trong window --}}
                    @if($windowEnd < $lastPage)
                        @if($windowEnd < $lastPage - 1)
                            <span class="px-1 sm:px-2 text-xs sm:text-sm text-slate-400 flex-shrink-0">...</span>
                        @endif
                        <a href="{{ $students->appends(request()->except('page'))->url($lastPage) }}" class="px-2.5 sm:px-3 py-1.5 text-xs sm:text-sm text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors flex-shrink-0 min-w-[2rem] text-center">{{ $lastPage }}</a>
                    @endif
                    
                    @if($students->hasMorePages())
                        <a href="{{ $students->appends(request()->except('page'))->nextPageUrl() }}" class="px-2.5 sm:px-3 py-1.5 text-xs sm:text-sm text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors flex-shrink-0">
                            <i data-lucide="chevron-right" class="w-4 h-4 inline-block"></i>
                        </a>
                    @else
                        <span class="px-2.5 sm:px-3 py-1.5 text-xs sm:text-sm text-slate-400 bg-slate-100 rounded-lg cursor-not-allowed flex-shrink-0">
                            <i data-lucide="chevron-right" class="w-4 h-4 inline-block"></i>
                        </span>
                    @endif
                </div>
            </div>
        </div>
    @endif
</div>