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

<div id="table-student-container" 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">
                        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">
                        Zeus 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">
                        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">
                        Đ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">
                            {{ $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->zeus_id ?? '-' }}</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->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>
                                <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>
                            </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>