@extends('layouts-v2.app')

@section('content')
<div class="flex-1 space-y-4">
    <!-- Header -->
    <div class="flex items-center gap-2 text-slate-500 text-sm mb-2">
        <a href="{{ route('dashboard') }}" class="hover:text-blue-600 cursor-pointer">Trang chủ</a>
        <i data-lucide="chevron-right" class="w-4 h-4"></i>
        <span>Danh sách lớp học</span>
    </div>
    <h1 class="text-3xl font-bold text-slate-900 mb-6">
        @if(isset($filterInfo) && $filterInfo['isProductList'])
            Danh sách lớp học - {{ $filterInfo['productName'] }}
        @else
            Danh sách lớp học
        @endif
    </h1>

    <!-- Message Notification V2 -->
    <div class="message-class hidden fixed top-4 right-4 z-50 max-w-md w-full">
        <div class="notification-v2 bg-white rounded-lg shadow-xl border-l-4 p-4 flex items-start gap-3 animate-slide-in">
            <div class="notification-icon flex-shrink-0 mt-0.5">
                <i data-lucide="check-circle" class="w-6 h-6 text-green-500 notification-icon-success hidden"></i>
                <i data-lucide="x-circle" class="w-6 h-6 text-red-500 notification-icon-error hidden"></i>
            </div>
            <div class="flex-1 min-w-0">
                <div id="content_message" class="text-sm font-medium text-slate-800"></div>
            </div>
            <button type="button" class="notification-close flex-shrink-0 text-slate-400 hover:text-slate-600 transition-colors" aria-label="Close">
                <i data-lucide="x" class="w-5 h-5"></i>
            </button>
        </div>
    </div>

    @if(session('success-v2'))
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                showNotificationV2('success', '{{ session('success-v2') }}');
            });
        </script>
    @endif

    @if(session('error-v2'))
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                showNotificationV2('error', '{{ session('error-v2') }}');
            });
        </script>
    @endif

    <!-- Search Form -->
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-4 md:p-6">
        <form action="{{ route('class.search') }}" class="grid grid-cols-1 md:grid-cols-4 gap-4 items-end" method="get">
            <!-- Giữ lại các tham số từ product_list -->
            @if(isset($filterInfo) && $filterInfo['isProductList'])
                <input type="hidden" name="f" value="product_list">
                @if($filterInfo['categoryId'])
                    <input type="hidden" name="only_product" value="1">
                    <input type="hidden" name="course_category_id" value="{{ $filterInfo['categoryId'] }}">
                @endif
                @if($filterInfo['courseId'])
                    <input type="hidden" name="courseIds" value="{{ $filterInfo['courseId'] }}">
                @endif
            @endif
            
            <!-- Select for Class Filter -->
            <div>
                <label for="filter-class" class="block text-xs font-semibold text-slate-500 mb-2">Tên lớp</label>
                <select id="filter-class" name="class" class="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-lg text-sm text-slate-700 focus:bg-white focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none transition-colors">
                    <option value="">Chọn tên lớp</option>
                    @foreach($classesAll as $class)
                        <option value="{{ $class->id }}" 
                            @if(request('class') == $class->id) selected @endif>
                            {{ $class->name }}
                        </option>
                    @endforeach
                </select>
            </div>

            <!-- Select for Status -->
            <div>
                <label for="status" class="block text-xs font-semibold text-slate-500 mb-2">Trạng thái</label>
                <select id="status" name="status" class="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-lg text-sm text-slate-700 focus:bg-white focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none transition-colors">
                    <option value="" @if(request('status') === null) selected @endif>Chọn trạng thái lớp học</option>
                    <option value="0" @if(request('status') == '0') selected @endif>Đang vận hành</option>
                    <option value="1" @if(request('status') == '1') selected @endif>Đã kết thúc khóa học</option>
                </select>
            </div>

            <!-- Select for Course Filter -->
            <div>
                <label for="filter-course" class="block text-xs font-semibold text-slate-500 mb-2">Khóa học</label>
                <select id="filter-course" name="course" class="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-lg text-sm text-slate-700 focus:bg-white focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none transition-colors">
                    <option value="">Chọn khóa học</option>
                    @foreach($courses as $course)
                        <option value="{{ $course->id }}" 
                            @if(request('course') == $course->id) selected @endif>
                            {{ $course->moodle_name }}
                        </option>
                    @endforeach
                </select>
            </div>

            <!-- Buttons -->
            <div class="flex gap-2">
                <button type="submit" class="flex-1 h-[38px] px-4 bg-blue-600 text-white !rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors shadow-sm !flex items-center justify-center gap-2">
                    <i data-lucide="search" class="w-4 h-4 flex-shrink-0"></i>
                    <span>Tìm kiếm</span>
                </button>
                <a href="{{ isset($filterInfo) && $filterInfo['isProductList'] ? 
                    (isset($filterInfo['categoryId']) ? 
                        '?f=product_list&only_product=1&course_category_id=' . $filterInfo['categoryId'] : 
                        (isset($filterInfo['courseId']) ? 
                            '?f=product_list&courseIds=' . $filterInfo['courseId'] : 
                            route('class.index'))) : 
                    route('class.index') }}" 
                   class="h-[38px] px-4 bg-slate-200 text-slate-700 rounded-lg text-sm font-medium hover:bg-slate-300 transition-colors flex items-center justify-center gap-2">
                    <i data-lucide="x" class="w-4 h-4 flex-shrink-0"></i>
                    <span>Xóa</span>
                </a>
            </div>
        </form>
    </div>

    <!-- Summary and Actions -->
    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3">
        <div class="box-total-item bg-white rounded-lg px-4 py-2 shadow-sm border border-slate-200">
            @if(isset($filterInfo) && $filterInfo['isProductList'])
                Tổng số lớp: <span class="font-semibold text-blue-600">{{ $filterInfo['classCount'] }}</span>
            @else
                Tổng số lớp: <span class="font-semibold text-blue-600">{{ count($classesAll) }}</span>
            @endif
        </div>
        <div class="flex flex-wrap gap-2 w-full sm:w-auto">
            <a href="javascript:void(0);" data-toggle="modal" data-target="#importDataClassModal" class="flex-1 sm:flex-initial px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 hover:text-white transition-colors shadow-sm text-center">
                <i data-lucide="upload" class="w-4 h-4 inline-block mr-1"></i>
                Import
            </a>
            <a href="{{ route('class.add') }}" class="flex-1 sm:flex-initial px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 hover:text-white transition-colors shadow-sm text-center">
                <i data-lucide="plus" class="w-4 h-4 inline-block mr-1"></i>
                Lớp
            </a>
        </div>
    </div>

    <!-- Table: fit width, no horizontal scroll -->
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
        <div class="overflow-x-hidden">
            <table class="class-list-table w-full table-fixed divide-y divide-slate-200 border-collapse">
                <colgroup>
                    <col style="width: 4%">
                    <col style="width: 16%">
                    <col style="width: 6%">
                    <col style="width: 14%">
                    <col style="width: 24%">
                    <col style="width: 12%">
                    <col style="width: 12%">
                    <col style="width: 12%">
                </colgroup>
                <thead class="bg-slate-50">
                    <tr>
                        <th class="px-3 py-2.5 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">STT</th>
                        <th class="px-3 py-2.5 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">Tên lớp</th>
                        <th class="px-3 py-2.5 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">Sĩ số</th>
                        <th class="px-3 py-2.5 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">Trạng thái</th>
                        <th class="px-3 py-2.5 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">Khóa học</th>
                        <th class="px-3 py-2.5 text-center text-xs font-semibold text-slate-600 uppercase tracking-wider">DS học sinh</th>
                        <th class="px-3 py-2.5 text-center text-xs font-semibold text-slate-600 uppercase tracking-wider">DS giáo viên</th>
                        <th class="px-3 py-2.5 text-center text-xs font-semibold text-slate-600 uppercase tracking-wider">Hành động</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-slate-200">
                    @forelse($classes as $index => $class)
                        <tr id="class-{{ $class->id }}" class="hover:bg-slate-50 transition-colors">
                            <td class="px-3 py-2.5 text-sm text-slate-700">{{ ($classes->currentPage() - 1) * $classes->perPage() + $index + 1 }}</td>
                            <td class="px-3 py-2.5 text-sm font-medium text-slate-900 max-w-0">
                                <span class="block truncate" title="{{ $class->name }}">{{ $class->name }}</span>
                            </td>
                            <td class="px-3 py-2.5 text-sm text-slate-700">{{ $class->studentCount() }}</td>
                            <td class="px-3 py-2.5">
                                @if($class->status == 0)
                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 whitespace-nowrap">Đang vận hành</span>
                                @else
                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 whitespace-nowrap">Đã kết thúc</span>
                                @endif
                            </td>
                            <td class="px-3 py-2.5 text-sm text-slate-700 max-w-0">
                                @if(isset($class->courses) && $class->courses->isNotEmpty())
                                    @php
                                        $courseNames = $class->courses->pluck('moodle_name')->unique()->values();
                                        $displayedCourses = $courseNames->take(1)->implode(', ');
                                    @endphp
                                    <div class="flex items-center gap-1 min-w-0">
                                        <span class="truncate" title="{{ $courseNames->implode(', ') }}">{{ $displayedCourses }}</span>
                                        @if($courseNames->count() > 1)
                                            <button type="button" class="more_info_classes flex-shrink-0 text-blue-600 hover:text-blue-800 underline"
                                                title="{{ $courseNames->implode(', ') }}"
                                                data-fullname="{{ $class->name }}"
                                                data-title-modal="Khóa học"
                                                data-classes-name="{{ $courseNames->implode(', ') }}">...</button>
                                        @endif
                                    </div>
                                @else
                                    <span class="text-slate-400">-</span>
                                @endif
                            </td>
                            <td class="px-3 py-2.5 text-center">
                                <a href="{{ route('class.edit', ['id' => $class->id]) }}#tab_student" 
                                    title="Danh sách học sinh" 
                                    class="inline-flex items-center justify-center w-8 h-8 text-blue-600 hover:text-blue-800 hover:bg-blue-50 rounded-lg transition-colors">
                                    <i data-lucide="users" class="w-5 h-5"></i>
                                </a>
                            </td>
                            <td class="px-3 py-2.5 text-center">
                                <a href="{{ route('class.edit', ['id' => $class->id]) }}#tab_teacher" 
                                    title="Danh sách giáo viên"
                                    class="inline-flex items-center justify-center w-8 h-8 text-blue-600 hover:text-blue-800 hover:bg-blue-50 rounded-lg transition-colors">
                                    <i data-lucide="user-check" class="w-5 h-5"></i>
                                </a>
                            </td>
                            <td class="px-3 py-2.5 text-center">
                                <div class="flex items-center justify-center gap-1">
                                    <a href="{{ route('class.edit', ['id' => $class->id]) }}" title="Chỉnh sửa lớp học"
                                        class="inline-flex items-center justify-center w-8 h-8 text-green-600 hover:text-green-800 hover:bg-green-50 rounded-lg transition-colors">
                                        <i data-lucide="edit" class="w-5 h-5"></i>
                                    </a>
                                    <a href="javascript:void(0)" 
                                        class="item-delete btnDeleteClass inline-flex items-center justify-center w-8 h-8 text-red-600 hover:text-red-800 hover:bg-red-50 rounded-lg transition-colors" 
                                        data-class-id="{{ $class->id }}" data-class-name="{{ $class->name }}" 
                                        onclick="showModalDeleteClass(this)" title="Xóa lớp học">
                                        <i data-lucide="trash-2" class="w-5 h-5"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="px-3 py-8 text-center">
                                <div class="flex flex-col items-center justify-center">
                                    <i data-lucide="inbox" class="w-12 h-12 text-slate-400 mb-3"></i>
                                    <p class="text-sm text-slate-500">Không có dữ liệu</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        @if($classes->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ị {{ $classes->firstItem() ?? 0 }} - {{ $classes->lastItem() ?? 0 }} trong tổng số {{ $classes->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($classes->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="{{ $classes->appends(request()->all())->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 = $classes->currentPage();
                            $lastPage = $classes->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="{{ $classes->appends(request()->all())->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="{{ $classes->appends(request()->all())->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="{{ $classes->appends(request()->all())->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($classes->hasMorePages())
                            <a href="{{ $classes->appends(request()->all())->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>
</div>

<!-- Delete Modal V2 -->
<div id="deleteClassModalV2" class="hidden fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <!-- Backdrop -->
    <div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity" id="delete-modal-backdrop"></div>
    
    <!-- Modal Container -->
    <div class="flex min-h-full items-center justify-center p-4">
        <div class="relative transform overflow-hidden rounded-lg bg-white shadow-xl transition-all w-full max-w-md">
            <!-- Header -->
            <div class="flex items-center justify-between px-6 py-4 border-b border-slate-200">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center">
                        <i data-lucide="alert-triangle" class="w-5 h-5 text-red-600"></i>
                    </div>
                    <h3 class="text-lg font-semibold text-slate-900">Xóa lớp học</h3>
                </div>
                <button type="button" class="text-slate-400 hover:text-slate-600 transition-colors" id="delete-modal-close">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>
            
            <!-- Body -->
            <div class="px-6 py-6">
                <form action="{{ route('class.delete') }}" id="deleteClassForm" method="post">
                    @csrf
                    <input type="hidden" name="is_v2" value="1">
                    <input type="hidden" name="class_id" id="class_id">
                    <p class="text-sm text-slate-600 text-center">
                        Bạn có chắc chắn xoá "<b class="this_item_name font-semibold text-slate-900">test</b>" khỏi hệ thống?
                    </p>
                    <p class="text-xs text-slate-500 text-center mt-2">
                        <i>Lưu ý: Lớp học đã xóa không thể khôi phục</i>
                    </p>
                </form>
            </div>
            
            <!-- Footer -->
            <div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-slate-200 bg-slate-50">
                <button type="button" class="px-4 py-2 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors" id="delete-modal-cancel">
                    Hủy bỏ
                </button>
                <button type="button" class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700 transition-colors btn-action-delete-class">
                    <i data-lucide="trash-2" class="w-4 h-4 inline-block mr-1"></i>
                    Xoá
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Import Modal V2 -->
<div id="importDataClassModal" class="hidden fixed inset-0 z-50 overflow-y-auto" aria-labelledby="importDataClassModalLabel" aria-modal="true" role="dialog">
    <!-- Backdrop -->
    <div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity" id="import-modal-backdrop"></div>
    
    <!-- Modal Container -->
    <div class="flex min-h-full items-center justify-center p-4">
        <div class="relative transform overflow-hidden rounded-lg bg-white shadow-xl transition-all w-full max-w-2xl">
            <!-- Header -->
            <div class="flex items-center justify-between px-6 py-4 border-b border-slate-200">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
                        <i data-lucide="upload" class="w-5 h-5 text-blue-600"></i>
                    </div>
                    <h3 class="text-lg font-semibold text-slate-900" id="importDataClassModalLabel">Import File</h3>
                </div>
                <button type="button" class="text-slate-400 hover:text-slate-600 transition-colors" id="import-modal-close" data-dismiss="modal" aria-label="Close">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>
            
            <!-- Body -->
            <div class="px-6 py-6">
                <form action="{{ route('class.import') }}" id="formUploadFileData" method="post" enctype="multipart/form-data">
                    @csrf
                    <div class="space-y-4">
                        <div>
                            <label for="fileUpload" class="block text-sm font-medium text-slate-700 mb-2">Chọn file CSV để import</label>
                            <div class="mt-1 flex items-center gap-3">
                                <label for="fileUpload" class="cursor-pointer px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors shadow-sm inline-flex items-center gap-2">
                                    <i data-lucide="file-up" class="w-4 h-4"></i>
                                    Chọn file
                                </label>
                                <input type="file" class="hidden" name="file" id="fileUpload" accept=".csv">
                                <span id="fileName" class="text-sm text-slate-600">Chưa chọn file</span>
                            </div>
                            <p class="mt-2 text-xs text-slate-500">Chỉ chấp nhận file .csv (tối đa 5MB)</p>
                        </div>
                        
                        <!-- Preview Section -->
                        <div id="preview" class="hidden mt-4">
                            <h6 class="text-sm font-semibold text-slate-900 mb-3">Preview dữ liệu:</h6>
                            <div class="overflow-x-auto border border-slate-200 rounded-lg">
                                <table class="w-full text-sm">
                                    <thead class="bg-slate-50 border-b border-slate-200">
                                        <tr>
                                            <th class="px-4 py-2 text-left text-xs font-semibold text-slate-600 uppercase">Course Code</th>
                                            <th class="px-4 py-2 text-left text-xs font-semibold text-slate-600 uppercase">Course Name</th>
                                            <th class="px-4 py-2 text-left text-xs font-semibold text-slate-600 uppercase">Class Code</th>
                                            <th class="px-4 py-2 text-left text-xs font-semibold text-slate-600 uppercase">Class Name</th>
                                            <th class="px-4 py-2 text-left text-xs font-semibold text-slate-600 uppercase">Class Year</th>
                                            <th class="px-4 py-2 text-left text-xs font-semibold text-slate-600 uppercase">Teacher Email</th>
                                        </tr>
                                    </thead>
                                    <tbody id="previewData" class="bg-white divide-y divide-slate-200">
                                    </tbody>
                                </table>
                            </div>
                            <div class="mt-3 px-4 py-2 bg-blue-50 border border-blue-200 rounded-lg">
                                <p class="text-sm text-blue-800">
                                    <i data-lucide="info" class="w-4 h-4 inline-block mr-1"></i>
                                    <span id="totalRows" class="font-semibold">0</span> dòng dữ liệu được tìm thấy
                                </p>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            
            <!-- Footer -->
            <div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-slate-200 bg-slate-50">
                <button type="button" class="px-4 py-2 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors" id="import-modal-cancel" data-dismiss="modal">
                    Hủy bỏ
                </button>
                <button type="button" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors shadow-sm btn-upload-file-class" data-teacher-id="">
                    <i data-lucide="check" class="w-4 h-4 inline-block mr-1"></i>
                    Xác nhận
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal More Info Courses V2 -->
<div id="modal_more_info_classes" class="hidden fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal_more_info_classes_label" role="dialog" aria-modal="true">
    <div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity" id="more-info-backdrop"></div>
    <div class="flex min-h-full items-center justify-center p-4">
        <div class="relative transform overflow-hidden rounded-lg bg-white shadow-xl transition-all w-full max-w-md">
            <div class="flex items-center justify-between px-6 py-4 border-b border-slate-200">
                <h3 class="text-lg font-semibold text-slate-900"><span class="title-modal"></span> của <b><span class="user-name"></span></b></h3>
                <button type="button" class="text-slate-400 hover:text-slate-600 transition-colors" id="more-info-close">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>
            <div class="px-6 py-4">
                <span class="class-names text-sm text-slate-600"></span>
            </div>
            <div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-slate-200 bg-slate-50">
                <button type="button" class="px-4 py-2 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors" id="more-info-close-btn">Đóng</button>
            </div>
        </div>
    </div>
</div>

<!-- Hidden Inputs -->
<input type="hidden" id="currentUserEmail" value="{{ $currentEmail }}">

@endsection

@section('scripts')
<script src="{{ URL::asset('js/classes/classes-v2.js') }}"></script>
<script>
    // Notification V2 Functions (like product_detail-v2.js)
    function showNotificationV2(type, message) {
        const $notification = $('.message-class');
        const $content = $('#content_message');
        const $iconSuccess = $('.notification-icon-success');
        const $iconError = $('.notification-icon-error');
        const $notificationBox = $notification.find('.notification-v2');

        // Set message
        $content.text(message);

        // Set icon and border color based on type
        if (type === 'success') {
            $iconSuccess.removeClass('hidden');
            $iconError.addClass('hidden');
            $notificationBox.removeClass('border-red-500').addClass('border-green-500');
        } else {
            $iconError.removeClass('hidden');
            $iconSuccess.addClass('hidden');
            $notificationBox.removeClass('border-green-500').addClass('border-red-500');
        }

        // Show notification
        $notification.removeClass('hidden');

        // Re-init Lucide icons
        if (typeof lucide !== 'undefined') {
            lucide.createIcons();
        }

        // Auto hide after 5 seconds
        setTimeout(function() {
            hideNotificationV2();
        }, 5000);
    }

    function hideNotificationV2() {
        $('.message-class').addClass('hidden');
    }

    // Close notification on button click
    $(document).on('click', '.notification-close', function() {
        hideNotificationV2();
    });

    function showModalDeleteClass(button) {
        const classId = $(button).attr('data-class-id');
        const className = $(button).attr('data-class-name');
        
        $('#deleteClassModalV2 .this_item_name').text(className);
        $('#deleteClassModalV2 #class_id').val(classId);
        $('#deleteClassModalV2').removeClass('hidden');
    }

    // Close modal handlers
    $('#delete-modal-close, #delete-modal-cancel').on('click', function() {
        $('#deleteClassModalV2').addClass('hidden');
    });

    // Delete form submit
    $('.btn-action-delete-class').on('click', function() {
        $('#deleteClassForm').submit();
    });

    // Import Modal handlers
    $('#import-modal-close, #import-modal-cancel').on('click', function() {
        $('#importDataClassModal').addClass('hidden');
    });

    // Handle click on the "more_info_classes" link
    $(document).on('click', '.more_info_classes', function() {
        var userName = $(this).data('fullname');
        var classesName = $(this).data('classes-name');
        var titleModal = $(this).data('title-modal');

        $('#modal_more_info_classes .user-name').text(userName);
        $('#modal_more_info_classes .title-modal').text(titleModal);
        $('#modal_more_info_classes .class-names').text(classesName);
        $('#modal_more_info_classes').removeClass('hidden');
    });

    // More Info Modal handlers
    $(document).on('click', '#more-info-close, #more-info-close-btn', function(e) {
        e.preventDefault();
        e.stopPropagation();
        $('#modal_more_info_classes').addClass('hidden');
    });
    $(document).on('click', '#more-info-backdrop', function(e) {
        if (e.target === this) {
            $('#modal_more_info_classes').addClass('hidden');
        }
    });

    // Show modal when button clicked
    $('[data-target="#importDataClassModal"]').on('click', function() {
        $('#importDataClassModal').removeClass('hidden');
    });

    // Close modal when clicking backdrop
    $('#import-modal-backdrop').on('click', function() {
        $('#importDataClassModal').addClass('hidden');
    });

    $(document).ready(function() {
        // Initialize Select2 for filter dropdowns
        $('#filter-class').select2({
            placeholder: 'Chọn tên lớp',
            allowClear: true,
            width: '100%',
            dropdownParent: $('#filter-class').parent()
        });
        
        $('#filter-course').select2({
            placeholder: 'Chọn khóa học',
            allowClear: true,
            width: '100%',
            dropdownParent: $('#filter-course').parent()
        });
        
        let csvData = [];

        // File upload handler
        $('#fileUpload').change(function(e) {
            const file = e.target.files[0];
            
            if (!file) {
                $('#fileName').text('Chưa chọn file');
                return;
            }
            
            $('#fileName').text(file.name);
            
            if (file.type !== 'text/csv' && !file.name.endsWith('.csv')) {
                showNotificationV2('error', 'Vui lòng chọn file CSV');
                this.value = '';
                $('#fileName').text('Chưa chọn file');
                return;
            }

            if (file.size > 5 * 1024 * 1024) {
                showNotificationV2('error', 'File không được vượt quá 5MB');
                this.value = '';
                $('#fileName').text('Chưa chọn file');
                return;
            }

            const reader = new FileReader();
            reader.onload = function(event) {
                const csv = event.target.result;
                const lines = csv.split('\n');
                
                csvData = [];
                $('#previewData').empty();
                
                for(let i = 1; i < lines.length; i++) {
                    if(lines[i].trim() === '') continue;
                    
                    const columns = lines[i].split(',');
                    if(columns.length >= 3) {
                        const row = {
                            course_code: columns[0].trim(),
                            course_name: columns[1].trim(),
                            class_code: columns[2].trim(),
                            class_name: columns[3].trim(),
                            class_year: columns[4].trim(),
                            teachers: columns[5] || ''
                        };
                        
                        csvData.push(row);
                        
                        if(i <= 5) {
                            $('#previewData').append(`
                                <tr class="hover:bg-slate-50">
                                    <td class="px-4 py-2 text-sm text-slate-700">${row.course_code}</td>
                                    <td class="px-4 py-2 text-sm text-slate-700">${row.course_name}</td>
                                    <td class="px-4 py-2 text-sm text-slate-700">${row.class_code}</td>
                                    <td class="px-4 py-2 text-sm text-slate-700">${row.class_name}</td>
                                    <td class="px-4 py-2 text-sm text-slate-700">${row.class_year}</td>
                                    <td class="px-4 py-2 text-sm text-slate-700">${row.teachers}</td>
                                </tr>
                            `);
                        }
                    }
                }
                
                $('#totalRows').text(csvData.length);
                $('#preview').removeClass('hidden');
                
                // Reinitialize Lucide icons
                if (typeof lucide !== 'undefined') {
                    lucide.createIcons();
                }
            };
            
            reader.readAsText(file);
        });

        // Upload confirm handler
        $('.btn-upload-file-class').click(function() {
            if(csvData.length === 0) {
                showNotificationV2('error', 'Vui lòng chọn file CSV trước khi xác nhận');
                return;
            }

            $('#formUploadFileData').submit();
        });

        // Reset form when modal closes
        $('#importDataClassModal').on('click', function(e) {
            if ($(e.target).is('#importDataClassModal') || $(e.target).is('#import-modal-backdrop')) {
                $('#importDataClassModal').addClass('hidden');
                $('#fileUpload').val('');
                $('#fileName').text('Chưa chọn file');
                $('#preview').addClass('hidden');
                $('#previewData').empty();
                csvData = [];
            }
        });
    });
</script>
@endsection