@extends('layouts-v2.app')

@section('content')
    <div class="flex-1 space-y-6">
        <!-- Breadcrumb -->
        <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>Tất cả khóa học</span>
        </div>

        <!-- Header -->
        <div>
            <h1 class="text-3xl font-bold text-slate-900 mb-2">Tất cả khóa học</h1>
            <p class="text-slate-500">
                Tổng cộng <span class="font-semibold text-slate-700">{{ $pagination['total'] }}</span> khóa học
            </p>
        </div>

        <!-- Hidden Inputs -->
        <input type="hidden" id="currentUserEmail" value="{{ $currentEmail ?? '' }}">
        <input type="hidden" name="tenant_connection" value="{{ $tenantConnection ?? '' }}">

        <!-- Filter Tabs -->
        <div class="bg-white rounded-lg shadow-sm border border-slate-200 p-1 flex items-center gap-1 overflow-x-auto">
            <a href="{{ route('courses.index', array_merge(request()->query(), ['filter' => 'all', 'page' => 1])) }}"
                class="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap transition-colors {{ $filter === 'all' ? 'bg-blue-600 text-white' : 'text-slate-600 hover:bg-slate-100' }}">
                <i data-lucide="grid" class="w-4 h-4"></i>
                <span>Tất cả</span>
                <span
                    class="ml-1 px-2 py-0.5 rounded-full text-xs font-bold {{ $filter === 'all' ? 'bg-white/20 text-white' : 'bg-slate-200 text-slate-600' }}">{{ $pagination['total'] }}</span>
            </a>
            @foreach($groupedCourses as $group)
                @php
                    $icon = 'folder';
                @endphp
                <a href="{{ route('courses.index', array_merge(request()->query(), ['filter' => $group['name'], 'page' => 1])) }}"
                    class="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap transition-colors {{ $filter === $group['name'] ? 'bg-blue-600 text-white' : 'text-slate-600 hover:bg-slate-100' }}">
                    <i data-lucide="{{ $icon }}" class="w-4 h-4"></i>
                    <span>{{ $group['name'] }}</span>
                    <span
                        class="ml-1 px-2 py-0.5 rounded-full text-xs font-bold {{ $filter === $group['name'] ? 'bg-white/20 text-white' : 'bg-slate-200 text-slate-600' }}">{{ $group['count'] }}</span>
                </a>
            @endforeach
        </div>

        <!-- Results Info and View Toggle -->
        @if($paginatedCourses->count() > 0)
            <div class="flex items-center justify-between bg-white rounded-lg shadow-sm border border-slate-200 px-6 py-4">
                <div class="flex items-center gap-3">
                    <span class="text-sm font-medium text-slate-700">
                        Hiển thị <span class="font-bold text-slate-900">{{ $paginatedCourses->count() }}</span> khóa học
                    </span>
                    @if($search)
                        <span class="text-sm text-slate-500">
                            cho "<span class="font-medium text-slate-700">{{ $search }}</span>"
                        </span>
                    @endif
                </div>
                <div class="flex items-center gap-2 bg-slate-100 rounded-lg p-1">
                    <button
                        class="view-toggle-btn px-3 py-1.5 rounded-md text-sm font-medium transition-colors bg-white text-slate-700 shadow-sm"
                        data-view="grid" id="btn-view-grid">
                        <i data-lucide="grid-3x3" class="w-4 h-4"></i>
                    </button>
                    <button
                        class="view-toggle-btn px-3 py-1.5 rounded-md text-sm font-medium transition-colors text-slate-500 hover:text-slate-700"
                        data-view="list" id="btn-view-list">
                        <i data-lucide="list" class="w-4 h-4"></i>
                    </button>
                </div>
            </div>

            <!-- Courses Grid View -->
            <div id="courses-grid-view" class="courses-view active">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    @foreach($paginatedCourses as $course)
                        @php
                            $shortName = $course->short_name;
                            $description = $course->description;
                            $level = $course->level;
                            $type = $course->type;

                            // Course URL (use v2 route if available, fallback to v1)
                            if (Route::has('v2.course.detail')) {
                                $courseUrl = route('v2.course.detail', ['course_id' => $course->id]);
                            } else {
                                $courseUrl = '/product/detail/' . $course->id;
                            }
                        @endphp
                        <a href="{{ $courseUrl }}"
                            class="course-card block bg-white rounded-lg border border-slate-200 overflow-hidden hover:shadow-md hover:border-blue-300 transition-all duration-200 group">
                            <div class="bg-gradient-to-br from-blue-500 to-indigo-600 h-40 flex items-center justify-center">
                                <div class="w-16 h-16 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center">
                                    <i data-lucide="graduation-cap" class="w-8 h-8 text-white"></i>
                                </div>
                            </div>

                            <div class="p-4">
                                <div class="flex items-start justify-between mb-2">
                                    <h3
                                        class="text-base font-semibold text-slate-900 line-clamp-2 group-hover:text-blue-600 transition-colors flex-1">
                                        {{ $shortName }}</h3>
                                    <!-- <span
                                        class="ml-2 px-2 py-0.5 bg-blue-100 text-blue-600 text-xs font-medium rounded whitespace-nowrap">{{ $type }}</span> -->
                                </div>

                                <!-- <div class="flex items-center gap-2 text-xs text-slate-500 mb-2">
                                    <i data-lucide="signal" class="w-3 h-3"></i>
                                    <span>{{ $level }}</span>
                                </div> -->

                                <!-- <p class="text-sm text-slate-600 line-clamp-2 mb-3">{{ $description }}</p> -->
                            </div>
                        </a>
                    @endforeach
                </div>
            </div>

            <!-- Courses List View -->
            <div id="courses-list-view" class="courses-view hidden">
                <div class="space-y-3">
                    @foreach($paginatedCourses as $course)
                        @php
                            $shortName = $course->short_name;
                            $description = $course->description;
                            $level = $course->level;
                            $type = $course->type;

                            // Course URL (use v2 route if available, fallback to v1)
                            if (Route::has('v2.course.detail')) {
                                $courseUrl = route('v2.course.detail', ['course_id' => $course->id]);
                            } else {
                                $courseUrl = '/product/detail/' . $course->id;
                            }
                        @endphp
                        <a href="{{ $courseUrl }}"
                            class="course-list-item block bg-white rounded-lg border border-slate-200 p-4 hover:shadow-md hover:border-blue-300 transition-all duration-200 group">
                            <div class="flex items-start gap-4">
                                <div
                                    class="flex-shrink-0 w-24 h-24 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-lg flex items-center justify-center">
                                    <i data-lucide="graduation-cap" class="w-10 h-10 text-white"></i>
                                </div>

                                <div class="flex-1 min-w-0">
                                    <div class="flex items-start justify-between gap-4 mb-2">
                                        <div class="flex-1 min-w-0">
                                            <h3
                                                class="text-base font-semibold text-slate-900 mb-1 group-hover:text-blue-600 transition-colors">
                                                {{ $shortName }}</h3>
                                            <!-- <p class="text-sm text-slate-600 line-clamp-2">{{ $description }}</p> -->
                                        </div>
                                        <!-- <span
                                            class="flex-shrink-0 px-3 py-1 bg-blue-100 text-blue-600 text-xs font-medium rounded">{{ $type }}</span> -->
                                    </div>

                                    <!-- <div class="flex items-center gap-4 text-xs text-slate-500">
                                        <div class="flex items-center gap-1.5">
                                            <i data-lucide="signal" class="w-3.5 h-3.5"></i>
                                            <span>{{ $level }}</span>
                                        </div>
                                    </div> -->
                                </div>

                                <div class="flex-shrink-0">
                                    <div
                                        class="w-10 h-10 rounded-lg bg-slate-100 group-hover:bg-blue-100 flex items-center justify-center transition-colors">
                                        <i data-lucide="chevron-right"
                                            class="w-5 h-5 text-slate-400 group-hover:text-blue-600 transition-colors"></i>
                                    </div>
                                </div>
                            </div>
                        </a>
                    @endforeach
                </div>
            </div>

            <!-- Pagination -->
            @if($pagination['total_pages'] > 1)
                @php
                    $currentPage = (int) $pagination['current_page'];
                    $lastPage    = (int) $pagination['total_pages'];
                    $onEachSide  = 2;
                    $windowStart = max(1, $currentPage - $onEachSide);
                    $windowEnd   = min($lastPage, $currentPage + $onEachSide);
                @endphp
                <div class="bg-white rounded-lg shadow-sm border border-slate-200 px-6 py-4">
                    <nav class="flex items-center justify-between flex-wrap gap-3">
                        {{-- Prev button --}}
                        <div class="flex items-center gap-2">
                            @if($pagination['has_prev'])
                                <a href="{{ route('courses.index', array_merge(request()->query(), ['page' => $pagination['prev_page']])) }}"
                                    class="flex items-center gap-2 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">
                                    <i data-lucide="chevron-left" class="w-4 h-4"></i>
                                    <span>Trước</span>
                                </a>
                            @else
                                <span class="flex items-center gap-2 px-4 py-2 text-sm font-medium text-slate-400 bg-slate-100 border border-slate-200 rounded-lg cursor-not-allowed">
                                    <i data-lucide="chevron-left" class="w-4 h-4"></i>
                                    <span>Trước</span>
                                </span>
                            @endif
                        </div>

                        {{-- Page numbers --}}
                        <div class="flex items-center gap-1.5">
                            {{-- First page + ellipsis --}}
                            @if($windowStart > 1)
                                <a href="{{ route('courses.index', array_merge(request()->query(), ['page' => 1])) }}"
                                    class="px-3 py-1.5 text-sm text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors min-w-[2rem] text-center">1</a>
                                @if($windowStart > 2)
                                    <span class="px-2 text-sm text-slate-400">...</span>
                                @endif
                            @endif

                            {{-- Window pages --}}
                            @for($i = $windowStart; $i <= $windowEnd; $i++)
                                @if($i === $currentPage)
                                    <span class="px-3 py-1.5 text-sm font-semibold text-white bg-blue-600 rounded-lg min-w-[2rem] text-center">{{ $i }}</span>
                                @else
                                    <a href="{{ route('courses.index', array_merge(request()->query(), ['page' => $i])) }}"
                                        class="px-3 py-1.5 text-sm text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors min-w-[2rem] text-center">{{ $i }}</a>
                                @endif
                            @endfor

                            {{-- Ellipsis + last page --}}
                            @if($windowEnd < $lastPage)
                                @if($windowEnd < $lastPage - 1)
                                    <span class="px-2 text-sm text-slate-400">...</span>
                                @endif
                                <a href="{{ route('courses.index', array_merge(request()->query(), ['page' => $lastPage])) }}"
                                    class="px-3 py-1.5 text-sm text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors min-w-[2rem] text-center">{{ $lastPage }}</a>
                            @endif
                        </div>

                        {{-- Next button --}}
                        <div class="flex items-center gap-2">
                            @if($pagination['has_next'])
                                <a href="{{ route('courses.index', array_merge(request()->query(), ['page' => $pagination['next_page']])) }}"
                                    class="flex items-center gap-2 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">
                                    <span>Sau</span>
                                    <i data-lucide="chevron-right" class="w-4 h-4"></i>
                                </a>
                            @else
                                <span class="flex items-center gap-2 px-4 py-2 text-sm font-medium text-slate-400 bg-slate-100 border border-slate-200 rounded-lg cursor-not-allowed">
                                    <span>Sau</span>
                                    <i data-lucide="chevron-right" class="w-4 h-4"></i>
                                </span>
                            @endif
                        </div>
                    </nav>
                </div>
            @endif

        @else
            <!-- No Results -->
            <div class="bg-white rounded-lg shadow-sm border border-slate-200 p-12 text-center">
                <div class="w-20 h-20 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i data-lucide="search" class="w-10 h-10 text-slate-400"></i>
                </div>
                <h3 class="text-xl font-bold text-slate-900 mb-2">Không tìm thấy khóa học nào</h3>
                <p class="text-slate-600 mb-6">
                    @if($search)
                        Không có kết quả nào cho "<span class="font-medium">{{ $search }}</span>". 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="inline-flex items-center gap-2 px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors">
                    <i data-lucide="refresh-cw" class="w-4 h-4"></i>
                    <span>Xem tất cả khóa học</span>
                </a>
            </div>
        @endif
    </div>

    <style>
        .line-clamp-2 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .courses-view {
            display: none;
        }

        .courses-view.active {
            display: block;
        }
    </style>

    <script>
        // Initialize Lucide icons
        if (typeof lucide !== 'undefined') {
            lucide.createIcons();
        }

        // View toggle functionality
        document.addEventListener('DOMContentLoaded', function () {
            const viewToggleBtns = document.querySelectorAll('.view-toggle-btn');
            const gridView = document.getElementById('courses-grid-view');
            const listView = document.getElementById('courses-list-view');

            // Get saved view preference from localStorage
            const savedView = localStorage.getItem('courses-view') || 'grid';

            // Set initial view
            function setView(view) {
                // Update buttons
                viewToggleBtns.forEach(btn => {
                    const btnView = btn.getAttribute('data-view');
                    if (btnView === view) {
                        btn.classList.add('bg-white', 'text-slate-700', 'shadow-sm');
                        btn.classList.remove('text-slate-500');
                    } else {
                        btn.classList.remove('bg-white', 'text-slate-700', 'shadow-sm');
                        btn.classList.add('text-slate-500');
                    }
                });

                // Update views
                if (view === 'grid') {
                    gridView.classList.add('active');
                    gridView.classList.remove('hidden');
                    listView.classList.remove('active');
                    listView.classList.add('hidden');
                } else {
                    listView.classList.add('active');
                    listView.classList.remove('hidden');
                    gridView.classList.remove('active');
                    gridView.classList.add('hidden');
                }

                // Save preference
                localStorage.setItem('courses-view', view);

                // Refresh icons after view change
                if (typeof lucide !== 'undefined') {
                    setTimeout(() => lucide.createIcons(), 100);
                }
            }

            // Set initial view based on saved preference
            setView(savedView);

            // Add click handlers
            viewToggleBtns.forEach(btn => {
                btn.addEventListener('click', function (e) {
                    e.preventDefault();
                    const view = this.getAttribute('data-view');
                    setView(view);
                });
            });
        });
    </script>
@endsection