@extends('layouts.app')

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

@section('content')
<!-- Modern Hero Section -->
<section class="bg-edunetra-primary text-white py-5" style="background: linear-gradient(135deg, var(--edunetra-primary) 0%, var(--edunetra-secondary) 100%);">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-8">
                <h1 class="display-4 fw-bold mb-3">Explore Free Courses</h1>
                <p class="fs-5 text-light opacity-90 mb-4">Learn new skills with our comprehensive collection of free courses designed for everyone</p>
                <div class="d-flex flex-wrap gap-3 mb-4">
                    <span class="badge badge-free fs-6">100% Free</span>
                    <span class="badge bg-white text-dark fs-6">{{ $courses->count() }} Courses Available</span>
                    <span class="badge bg-edunetra-orange fs-6">Expert Instructors</span>
                </div>
            </div>
            <div class="col-lg-4 text-lg-end">
                <div class="bg-white bg-opacity-10 p-4 rounded-3">
                    <h5 class="text-white 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 text-white 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 text-white 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>

<!-- Filters and Search -->
<section class="py-4 bg-light">
    <div class="container">
        <form action="{{ route('courses.public') }}" method="GET">
            <div class="row g-3 align-items-center">
                <!-- Search -->
                <div class="col-lg-6">
                    <div class="input-group">
                        <input type="text" name="search" class="form-control" placeholder="Search courses..."
                               value="{{ request('search') }}">
                        <button class="btn btn-edunetra" type="submit">
                            <i class="bi bi-search"></i>
                        </button>
                    </div>
                </div>

                <!-- Filters -->
                <div class="col-lg-6">
                    <div class="row g-2">
                        <div class="col-md-4">
                            <select name="level" class="form-select">
                                <option value="">All Levels</option>
                                <option value="beginner" {{ request('level') == 'beginner' ? 'selected' : '' }}>Beginner</option>
                                <option value="intermediate" {{ request('level') == 'intermediate' ? 'selected' : '' }}>Intermediate</option>
                                <option value="advanced" {{ request('level') == 'advanced' ? 'selected' : '' }}>Advanced</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <select name="sort" class="form-select">
                                <option value="latest" {{ request('sort') == 'latest' ? 'selected' : '' }}>Latest</option>
                                <option value="title" {{ request('sort') == 'title' ? 'selected' : '' }}>Title A-Z</option>
                                <option value="price_low" {{ request('sort') == 'price_low' ? 'selected' : '' }}>Price: Low to High</option>
                                <option value="price_high" {{ request('sort') == 'price_high' ? 'selected' : '' }}>Price: High to Low</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <button type="submit" class="btn btn-outline-edunetra w-100">
                                <i class="bi bi-funnel me-1"></i>Filter
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </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">
                        <p class="text-muted mb-0">
                            Showing {{ $courses->firstItem() }}-{{ $courses->lastItem() }} of {{ $courses->total() }} courses
                        </p>
                        @if(request('search') || request('level'))
                            <a href="{{ route('courses.public') }}" class="btn btn-outline-secondary btn-sm">
                                <i class="bi bi-x-circle me-1"></i>Clear Filters
                            </a>
                        @endif
                    </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-primary), var(--edunetra-secondary));">
                                        <i class="bi bi-book text-white" style="font-size: 3rem;"></i>
                                    </div>
                                @endif

                                <!-- Free Badge -->
                                <div class="position-absolute top-0 start-0 m-3">
                                    <span class="badge badge-free">FREE</span>
                                </div>

                                <!-- Level Badge -->
                                <div class="position-absolute top-0 end-0 m-3">
                                    <span class="badge badge-level">{{ ucfirst($course->level) }}</span>
                                </div>
                            </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>
                                    <div class="d-flex gap-2">
                                        <span class="badge bg-edunetra-yellow text-dark">
                                            {{ ucfirst($course->level) }}
                                        </span>
                                        @auth
                                            @php
                                                $userEnrollment = $course->enrollments()->where('user_id', auth()->id())->where('status', 'enrolled')->first();
                                            @endphp
                                            @if($userEnrollment)
                                                <span class="badge bg-success text-white">
                                                    <i class="bi bi-check-circle me-1"></i>Enrolled
                                                </span>
                                            @endif
                                        @endauth
                                    </div>
                                    <small class="text-muted">
                                        <i class="bi bi-clock"></i> {{ $course->duration_weeks }} weeks
                                    </small>
                                </div>

                                <h6 class="card-title fw-bold mb-2">{{ $course->title }}</h6>
                                <p class="card-text text-muted small flex-grow-1">{{ Str::limit($course->description, 80) }}</p>

                                <div class="mb-3">
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <small class="text-muted">
                                            <i class="bi bi-person"></i> {{ $course->teacher->name }}
                                        </small>
                                        <small class="text-muted">
                                            <i class="bi bi-people"></i> {{ $course->getEnrolledStudentsCount() }} students
                                        </small>
                                    </div>
                                    @if($course->start_date)
                                        <small class="text-muted d-block">
                                            <i class="bi bi-calendar"></i> Start: {{ $course->start_date->format('M d, Y') }}
                                        </small>
                                    @endif
                                </div>

                                <div class="d-flex justify-content-between align-items-center">
                                    {{-- <span class="fw-bold">
                                        @if($course->price > 0)
                                            Rp {{ number_format($course->price, 0, ',', '.') }}
                                        @else
                                            <span class="text-success">Free</span>
                                        @endif
                                    </span> --}}
                                    @auth
                                        @if($userEnrollment)
                                            <a href="{{ route('courses.show', $course->slug) }}"
                                               class="btn btn-success btn-sm">
                                                <i class="bi bi-play-circle me-1"></i>Continue
                                            </a>
                                        @else
                                            <a href="{{ route('courses.show', $course->slug) }}"
                                               class="btn btn-edunetra btn-sm">
                                                <i class="bi bi-plus-circle me-1"></i>Enroll
                                            </a>
                                        @endif
                                    @else
                                        <a href="{{ route('courses.show', $course->slug) }}"
                                           class="btn btn-edunetra btn-sm">
                                            <i class="bi bi-eye me-1"></i>View Details
                                        </a>
                                    @endauth
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <!-- Pagination -->
            <div class="row mt-5">
                <div class="col-12 d-flex justify-content-center">
                    {{ $courses->links() }}
                </div>
            </div>
        @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-3">
                    @if(request('search'))
                        No courses match your search for "{{ request('search') }}".
                    @else
                        Try adjusting your search or filter criteria.
                    @endif
                </p>
                <a href="{{ route('courses.public') }}" class="btn btn-edunetra">
                    <i class="bi bi-arrow-left me-1"></i>View All Courses
                </a>
            </div>
        @endif
    </div>
</section>
@endsection