@extends('layouts.app')

@section('title', 'Tất cả khóa học')

@section('content')
<!-- Modern Courses Page Styles -->
<link rel="stylesheet" href="{{ asset('css/courses-page.css') }}">

<div class="courses-page">
    <input type="hidden" id="currentUserEmail" value="{{ $currentEmail ?? '' }}">
    <input type="hidden" name="tenant_connection" value="{{ $tenantConnection ?? '' }}">
    <!-- Header Section -->
    <div class="courses-header">
        <div class="container">
            <div class="header-content">
                <div class="header-text">
                    <h1 class="page-title">
                        <i class="fas fa-graduation-cap"></i>
                        Tất cả khóa học
                    </h1>
                    <p class="page-subtitle">
                        Khám phá {{ $pagination['total'] }} khóa học chất lượng cao được thiết kế dành riêng cho bạn
                    </p>
                </div>
                <div class="header-stats">
                    <div class="stat-item">
                        <span class="stat-number">{{ $pagination['total'] }}</span>
                        <span class="stat-label">Khóa học</span>
                    </div>
                    <!-- <div class="stat-item">
                        <span class="stat-number">{{ count($groupedCourses) }}</span>
                        <span class="stat-label">Chuyên mục</span>
                    </div> -->
                </div>
            </div>
        </div>
    </div>

    <!-- Search and Filter Section -->
    <div class="search-filter-section">
        <div class="container">
            <div class="search-filter-container">
                <!-- Search Box -->
                <!-- <div class="search-box-container">
                    <form method="GET" action="{{ route('courses.index') }}" class="search-form">
                        <div class="search-box">
                            <input type="text" 
                                   name="search" 
                                   value="{{ $search }}" 
                                   placeholder="Tìm kiếm khóa học..." 
                                   class="search-input">
                            <button type="submit" class="search-btn">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                    </form>
                </div> -->

                <!-- Filter Tabs -->
                <div class="filter-tabs">
                    <a href="{{ route('courses.index', array_merge(request()->query(), ['filter' => 'all'])) }}" 
                       class="filter-tab {{ $filter === 'all' ? 'active' : '' }}">
                        <i class="fas fa-th"></i>
                        Tất cả
                        <span class="tab-count">{{ $pagination['total'] }}</span>
                    </a>
                    @foreach($groupedCourses as $group)
                        <a href="{{ route('courses.index', array_merge(request()->query(), ['filter' => $group['name']])) }}" 
                           class="filter-tab {{ $filter === $group['name'] ? 'active' : '' }}">
                            <i class="fas fa-{{ $group['name'] === 'IELTS Classroom (2B)' ? 'trophy' : ($group['name'] === 'Prepare Classroom' ? 'chalkboard-teacher' : ($group['name'] === 'Prepare Tutoring' ? 'user-graduate' : 'book')) }}"></i>
                            {{ $group['name'] }}
                            <span class="tab-count">{{ $group['count'] }}</span>
                        </a>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    <!-- Courses Grid Section -->
    <div class="courses-grid-section">
        <div class="container">
            @if($paginatedCourses->count() > 0)
                <!-- Results Info -->
                <div class="results-info">
                    <div class="results-text">
                        <span class="results-count">{{ $paginatedCourses->count() }}</span>
                        <span class="results-label">khóa học</span>
                        @if($search)
                            <span class="search-term">cho "{{ $search }}"</span>
                        @endif
                    </div>
                    <div class="view-options">
                        <button class="view-btn active" data-view="grid">
                            <i class="fas fa-th"></i>
                        </button>
                        <button class="view-btn" data-view="list">
                            <i class="fas fa-list"></i>
                        </button>
                    </div>
                </div>

                <!-- Courses Grid -->
                <div class="courses-grid" id="courses-grid">
                    @foreach($paginatedCourses as $course)
                        @php
                            // Detect series
                            $series = 'Khác';
                            if (strpos($course->moodle_name, 'IELTS Classroom (2B)') !== false) {
                                $series = 'IELTS Classroom (2B)';
                            } elseif (strpos($course->moodle_name, 'Prepare Classroom') !== false) {
                                $series = 'Prepare Classroom';
                            } elseif (strpos($course->moodle_name, 'Prepare Tutoring') !== false) {
                                $series = 'Prepare Tutoring';
                            }
                            
                            // Get short name
                            $shortName = $course->moodle_name;
                            if ($series === 'IELTS Classroom (2B)') {
                                $shortName = str_replace('IELTS Classroom (2B) - ', '', $course->moodle_name);
                            } elseif ($series === 'Prepare Classroom') {
                                $shortName = str_replace('Prepare Classroom - ', '', $course->moodle_name);
                            } elseif ($series === 'Prepare Tutoring') {
                                $shortName = str_replace('Prepare Tutoring - ', '', $course->moodle_name);
                            }
                            
                            // Get description
                            $descriptions = [
                                'IELTS Classroom (2B)' => 'Khóa học IELTS chuyên sâu với phương pháp giảng dạy hiện đại',
                                'Prepare Classroom' => 'Khóa học tiếng Anh tổng quát từ cơ bản đến nâng cao',
                                'Prepare Tutoring' => 'Khóa học kèm riêng 1-1 với giáo viên chuyên nghiệp',
                                'Khác' => 'Khóa học chuyên biệt phù hợp với nhu cầu học tập'
                            ];
                            $description = $descriptions[$series] ?? 'Khóa học chất lượng cao';
                            
                            // Get level
                            $levels = [
                                'Introduction' => 'Cơ bản',
                                'Foundation' => 'Nền tảng',
                                'Preparation' => 'Chuẩn bị',
                                'Intensive' => 'Chuyên sâu',
                                'Master' => 'Thành thạo',
                                'Beginners' => 'Người mới bắt đầu',
                                'Elementary' => 'Sơ cấp',
                                'Pre-Intermediate' => 'Tiền trung cấp',
                                'Intermediate' => 'Trung cấp'
                            ];
                            $level = 'Tất cả cấp độ';
                            foreach ($levels as $key => $levelName) {
                                if (stripos($course->moodle_name, $key) !== false) {
                                    $level = $levelName;
                                    break;
                                }
                            }
                            
                            // Get type
                            $type = 'Khóa học';
                            if (strpos($course->moodle_name, 'Classroom') !== false) {
                                $type = 'Lớp học';
                            } elseif (strpos($course->moodle_name, 'Tutoring') !== false) {
                                $type = 'Kèm riêng';
                            }
                        @endphp
                        <div class="course-card" data-course="{{ strtolower($course->moodle_name) }}">
                            <div class="course-image">
                                <div class="course-icon">
                                    <i class="fas fa-graduation-cap"></i>
                                </div>
                                <div class="course-badge">
                                    <span class="badge-text">{{ $type }}</span>
                                </div>
                            </div>
                            
                            <div class="course-content">
                                <div class="course-header">
                                    <h3 class="course-title">{{ $shortName }}</h3>
                                    <div class="course-level">
                                        <i class="fas fa-signal"></i>
                                        {{ $level }}
                                    </div>
                                </div>
                                
                                <p class="course-description">{{ $description }}</p>
                                
                                <div class="course-footer">
                                    <a href="/product/detail/{{ $course->id }}" class="course-btn">
                                        <span>Xem chi tiết</span>
                                        <i class="fas fa-arrow-right"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                <!-- Pagination -->
                @if($pagination['total_pages'] > 1)
                    <div class="pagination-container">
                        <nav class="pagination">
                            @if($pagination['has_prev'])
                                <a href="{{ route('courses.index', array_merge(request()->query(), ['page' => $pagination['prev_page']])) }}" 
                                   class="pagination-btn prev">
                                    <i class="fas fa-chevron-left"></i>
                                    Trước
                                </a>
                            @endif
                            
                            <div class="pagination-numbers">
                                @for($i = max(1, $pagination['current_page'] - 2); $i <= min($pagination['total_pages'], $pagination['current_page'] + 2); $i++)
                                    <a href="{{ route('courses.index', array_merge(request()->query(), ['page' => $i])) }}" 
                                       class="pagination-number {{ $i === $pagination['current_page'] ? 'active' : '' }}">
                                        {{ $i }}
                                    </a>
                                @endfor
                            </div>
                            
                            @if($pagination['has_next'])
                                <a href="{{ route('courses.index', array_merge(request()->query(), ['page' => $pagination['next_page']])) }}" 
                                   class="pagination-btn next">
                                    Sau
                                    <i class="fas fa-chevron-right"></i>
                                </a>
                            @endif
                        </nav>
                    </div>
                @endif
            @else
                <!-- No Results -->
                <div class="no-results">
                    <div class="no-results-icon">
                        <i class="fas fa-search"></i>
                    </div>
                    <h3>Không tìm thấy khóa học nào</h3>
                    <p>
                        @if($search)
                            Không có kết quả nào cho "{{ $search }}". Hãy thử từ khóa khác.
                        @else
                            Hiện tại chưa có khóa học nào phù hợp với bộ lọc của bạn.
                        @endif
                    </p>
                    <a href="{{ route('courses.index') }}" class="btn-primary">
                        <i class="fas fa-refresh"></i>
                        Xem tất cả khóa học
                    </a>
                </div>
            @endif
        </div>
    </div>
</div>

<!-- Modern Courses Page JavaScript -->
<script src="{{ asset('js/courses-page.js') }}"></script>
@endsection