@extends('layouts.app')

@section('title', 'All Courses - Edunetra')

@section('content')
<!-- Modern Hero Section -->
<section class="text-white py-5" style="background: linear-gradient(135deg, var(--edunetra-gradient-start) 0%, var(--edunetra-gradient-end) 100%);">
    <div class="container">
        <div class="row align-items-center text-dark">
            <div class="col-lg-8">
                <h1 class="display-4 fw-bold mb-3">Discover Amazing Courses</h1>
                <p class="fs-5 opacity-90 mb-4">Learn new skills with our comprehensive collection of courses designed for everyone</p>
                <div class="d-flex flex-wrap gap-3 mb-4">
                    <span class="badge bg-edunetra-dark fs-6">{{ $courses->count() }} Courses Available</span>
                    <span class="badge bg-edunetra-blue fs-6 text-dark">Expert Instructors</span>
                    <span class="badge bg-edunetra-green fs-6 text-dark">Interactive Learning</span>
                </div>
            </div>
            <div class="col-lg-4 text-lg-end">
                <div class="bg-white bg-opacity-10 p-4 rounded-3">
                    <h5 class="mb-3"><i class="bi bi-funnel me-2"></i>Quick Filters</h5>
                    <div class="d-flex flex-column gap-3">
                        <div class="text-start">
                            <label class="form-label small">Level</label>
                            <select class="form-select" id="levelFilter" onchange="filterCourses()">
                                <option value="">All Levels</option>
                                <option value="beginner">Beginner</option>
                                <option value="intermediate">Intermediate</option>
                                <option value="advanced">Advanced</option>
                            </select>
                        </div>
                        <div class="text-start">
                            <label class="form-label small">Sort By</label>
                            <select class="form-select" id="sortBy" onchange="filterCourses()">
                                <option value="newest">Newest First</option>
                                <option value="popular">Most Popular</option>
                                <option value="alphabetical">A-Z</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Search Section -->
<section class="py-4 bg-edunetra-light">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="input-group input-group-lg">
                    <span class="input-group-text bg-white border-end-0">
                        <i class="bi bi-search text-edunetra-gray"></i>
                    </span>
                    <input type="text" class="form-control border-start-0" placeholder="Search for courses..." id="searchInput">
                    <button class="btn btn-edunetra" type="button" onclick="searchCourses()">Search</button>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Courses Grid -->
<section class="py-5">
    <div class="container">
        @if($courses->count() > 0)
            <!-- Results Info -->
            <div class="row mb-4">
                <div class="col-12">
                    <div class="d-flex justify-content-between align-items-center">
                        <h3 class="fw-bold text-edunetra-text">Available Courses</h3>
                        <p class="text-edunetra-gray mb-0">
                            {{ $courses->count() }} courses found
                        </p>
                    </div>
                </div>
            </div>

            <div class="row g-4" id="coursesGrid">
                @foreach($courses as $course)
                    <div class="col-xl-3 col-lg-4 col-md-6 course-item" data-level="{{ $course->level }}">
                        <div class="card course-card h-100 border-0 shadow-sm">
                            <!-- Course Image -->
                            <div class="position-relative">
                                @if($course->image)
                                    <img src="{{ $course->image }}" alt="{{ $course->title }}" class="course-image">
                                @else
                                    <div class="course-image bg-gradient d-flex align-items-center justify-content-center"
                                         style="background: linear-gradient(135deg, var(--edunetra-gradient-start), var(--edunetra-gradient-end));">
                                        <i class="bi bi-book text-white" style="font-size: 3rem;"></i>
                                    </div>
                                @endif

                                <!-- Level Badge -->
                                <div class="position-absolute top-0 end-0 m-3">
                                    <span class="badge badge-level">{{ ucfirst($course->level) }}</span>
                                </div>

                                <!-- Enrolled Badge (if user is enrolled) -->
                                @auth
                                    @php
                                        $userEnrollment = $course->enrollments()->where('user_id', auth()->id())->where('status', 'enrolled')->first();
                                    @endphp
                                    @if($userEnrollment)
                                        <div class="position-absolute top-0 start-0 m-3">
                                            <span class="badge badge-enrolled">
                                                <i class="bi bi-check-circle me-1"></i>Enrolled
                                            </span>
                                        </div>
                                    @endif
                                @endauth
                            </div>

                            <div class="card-body d-flex flex-column p-4">
                                <!-- Course Title -->
                                <h5 class="card-title fw-bold mb-2 text-edunetra-text">{{ $course->title }}</h5>
                                
                                <!-- Course Description -->
                                <p class="card-text text-edunetra-gray small mb-3 flex-grow-1">{{ Str::limit($course->description, 100) }}</p>
                                
                                <!-- Instructor -->
                                <div class="d-flex align-items-center mb-3">
                                    <div class="bg-edunetra-primary rounded-circle d-flex align-items-center justify-content-center me-2" 
                                         style="width: 32px; height: 32px;">
                                        <i class="bi bi-person text-white"></i>
                                    </div>
                                    <small class="text-edunetra-gray">{{ $course->teacher->name }}</small>
                                </div>
                                
                                <!-- Course Stats -->
                                <div class="row text-center mb-3 py-2 bg-edunetra-light rounded">
                                    <div class="col-4">
                                        <div class="small text-edunetra-gray">Sessions</div>
                                        <div class="fw-bold text-edunetra-text">{{ $course->sessions->count() }}</div>
                                    </div>
                                    <div class="col-4">
                                        <div class="small text-edunetra-gray">Duration</div>
                                        <div class="fw-bold text-edunetra-text">{{ $course->duration_weeks }}w</div>
                                    </div>
                                    <div class="col-4">
                                        <div class="small text-edunetra-gray">Students</div>
                                        <div class="fw-bold text-edunetra-text">{{ $course->enrollments->where('status', 'enrolled')->count() }}</div>
                                    </div>
                                </div>
                                
                                <!-- Action Buttons -->
                                <div class="mt-auto">
                                    @auth
                                        @php
                                            $userEnrollment = $course->enrollments()->where('user_id', auth()->id())->where('status', 'enrolled')->first();
                                        @endphp
                                        @if($userEnrollment)
                                            <div class="d-grid gap-2">
                                                <a href="{{ route('courses.show', $course->slug) }}" class="btn btn-edunetra">
                                                    <i class="bi bi-play-circle me-2"></i>Continue Learning
                                                </a>
                                                <div class="progress progress-modern">
                                                    <div class="progress-bar" role="progressbar" style="width: {{ $userEnrollment->progress ?? 0 }}%"></div>
                                                </div>
                                                <small class="text-center text-edunetra-gray">{{ $userEnrollment->progress ?? 0 }}% Complete</small>
                                            </div>
                                        @else
                                            <div class="d-grid gap-2">
                                                <form action="{{ route('enrollments.store') }}" method="POST" class="d-inline">
                                                    @csrf
                                                    <input type="hidden" name="course_id" value="{{ $course->id }}">
                                                    <button type="submit" class="btn btn-edunetra w-100">
                                                        <i class="bi bi-plus-circle me-2"></i>Enroll Now
                                                    </button>
                                                </form>
                                                <a href="{{ route('courses.show', $course->slug) }}" class="btn btn-outline-secondary">
                                                    <i class="bi bi-eye me-2"></i>View Details
                                                </a>
                                            </div>
                                        @endif
                                    @else
                                        <div class="d-grid gap-2">
                                            <a href="{{ route('courses.show', $course->slug) }}" class="btn btn-outline-edunetra">
                                                <i class="bi bi-eye me-2"></i>View Course
                                            </a>
                                            <small class="text-center text-edunetra-gray">
                                                <i class="bi bi-info-circle me-1"></i>Login required to enroll
                                            </small>
                                        </div>
                                    @endauth
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <!-- Pagination -->
            @if($courses->hasPages())
                <div class="row mt-5">
                    <div class="col-12 d-flex justify-content-center">
                        {{ $courses->links() }}
                    </div>
                </div>
            @endif
        @else
            <div class="text-center py-5">
                <i class="bi bi-search display-1 text-muted mb-3"></i>
                <h3 class="fw-bold mb-2">No Courses Found</h3>
                <p class="text-muted mb-4">Try adjusting your search criteria or browse all available courses.</p>
                <a href="{{ route('courses.public') }}" class="btn btn-edunetra">
                    <i class="bi bi-arrow-left me-2"></i>View All Courses
                </a>
            </div>
        @endif
    </div>
</section>

<script>
function filterCourses() {
    const level = document.getElementById('levelFilter').value;
    const sortBy = document.getElementById('sortBy').value;
    const courseItems = document.querySelectorAll('.course-item');
    
    // Filter by level
    courseItems.forEach(item => {
        if (level === '' || item.dataset.level === level) {
            item.style.display = 'block';
        } else {
            item.style.display = 'none';
        }
    });
    
    // Sort courses (basic implementation)
    const grid = document.getElementById('coursesGrid');
    const items = Array.from(grid.children).filter(item => item.style.display !== 'none');
    
    if (sortBy === 'alphabetical') {
        items.sort((a, b) => {
            const titleA = a.querySelector('.card-title').textContent;
            const titleB = b.querySelector('.card-title').textContent;
            return titleA.localeCompare(titleB);
        });
        
        items.forEach(item => grid.appendChild(item));
    }
}

function searchCourses() {
    const searchTerm = document.getElementById('searchInput').value.toLowerCase();
    const courseItems = document.querySelectorAll('.course-item');
    
    courseItems.forEach(item => {
        const title = item.querySelector('.card-title').textContent.toLowerCase();
        const description = item.querySelector('.card-text').textContent.toLowerCase();
        
        if (title.includes(searchTerm) || description.includes(searchTerm)) {
            item.style.display = 'block';
        } else {
            item.style.display = 'none';
        }
    });
}

// Search on Enter key
document.getElementById('searchInput').addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
        searchCourses();
    }
});
</script>
@endsection