@extends('public.layout.app')
@section('title', __('front.my_courses'))

@section('body')
<section class="pt-5" style="background-color: #f5f7fc;">
    <div class="container">

        @include('public.portals.teacher.partials.nav')

        {{-- Header with Search & Create Button --}}
        <div class="d-flex flex-wrap justify-content-between align-items-center mb-4">
            <h4 class="fw-bold mb-0">{{ __('front.my_courses') }}</h4>
            <div class="d-flex gap-2">
                <form method="GET" action="{{ route('teacher.courses.index') }}" class="d-flex">
                    <input type="text" name="q" class="form-control form-control-sm rounded-pill"
                           placeholder="{{ __('front.search_courses') }}" value="{{ request('q') }}" style="min-width: 200px;">
                    <button class="btn btn-primary btn-sm rounded-pill ms-2" type="submit">
                        <i class="fas fa-search"></i>
                    </button>
                </form>
                <a href="" class="btn btn-primary btn-sm rounded-pill">
                    <i class="fas fa-plus me-1"></i> {{ __('front.new_course') }}
                </a>
            </div>
        </div>

        {{-- Quick Stats --}}
        <div class="row g-3 mb-4">
            <div class="col-md-4">
                <div class="card-soft p-3 shadow-soft d-flex align-items-center">
                    <div class="bg-primary bg-opacity-10 rounded-circle p-2 me-3">
                        <i class="fas fa-book-open text-primary"></i>
                    </div>
                    <div>
                        <span class="text-muted2 small">{{ __('front.total_courses') }}</span>
                        <h5 class="fw-bold mb-0">{{ $courses->total() ?? $courses->count() }}</h5>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card-soft p-3 shadow-soft d-flex align-items-center">
                    <div class="bg-success bg-opacity-10 rounded-circle p-2 me-3">
                        <i class="fas fa-users text-success"></i>
                    </div>
                    <div>
                        <span class="text-muted2 small">{{ __('front.total_students') }}</span>
                        <h5 class="fw-bold mb-0">{{ $totalStudents ?? 0 }}</h5>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card-soft p-3 shadow-soft d-flex align-items-center">
                    <div class="bg-info bg-opacity-10 rounded-circle p-2 me-3">
                        <i class="fas fa-clipboard-list text-info"></i>
                    </div>
                    <div>
                        <span class="text-muted2 small">{{ __('front.active_quizzes') }}</span>
                        <h5 class="fw-bold mb-0">{{ $activeQuizzes ?? 0 }}</h5>
                    </div>
                </div>
            </div>
        </div>

        {{-- Course Grid --}}
        <div class="card-soft p-4 shadow-soft">
            <h5 class="fw-bold mb-3">{{ __('front.all_courses') }}</h5>

            @if(($courses ?? collect())->count() == 0)
                <div class="text-center py-5">
                    <i class="fas fa-books fa-3x text-muted mb-3 opacity-50"></i>
                    <p class="text-muted2 mb-2">{{ __('front.no_courses_found') }}</p>
                    <a href="" class="btn btn-primary btn-sm rounded-pill">
                        <i class="fas fa-plus me-1"></i> {{ __('front.create_your_first_course') }}
                    </a>
                </div>
            @else
                <div class="row g-4">
                    @foreach($courses as $c)
                        <div class="col-md-6 col-lg-4">
                            <a href="{{ route('teacher.courses.show', $c->id) }}" class="text-decoration-none">
                                <div class="card-soft p-3 shadow-soft h-100 hover-lift">
                                    <div class="d-flex justify-content-between align-items-start mb-2">
                                        <span class="badge bg-primary rounded-pill">#{{ $c->id }}</span>
                                        <span class="text-muted2 small">
                                            <i class="far fa-calendar-alt me-1"></i>
                                            {{ $c->created_at }}
                                        </span>
                                    </div>
                                    <h6 class="fw-bold text-dark mb-1">{{ $c->title }}</h6>
                                    <div class="text-muted2 small mb-2">
                                        <i class="fas fa-code me-1"></i> {{ $c->code ?? '—' }} •
                                        <i class="fas fa-clock me-1"></i> {{ $c->credit_hours ?? '—' }} Credits
                                    </div>
                                    <div class="d-flex justify-content-between align-items-center mt-2">
                                        <span class="text-muted2 small">
                                            <i class="fas fa-users me-1"></i> {{ $c->students_count ?? 0 }} Students
                                        </span>
                                        <span class="text-primary small fw-semibold">
                                            {{ __('front.view_details_2') }} <i class="fas fa-arrow-right ms-1"></i>
                                        </span>
                                    </div>
                                </div>
                            </a>
                        </div>
                    @endforeach
                </div>

                @if($courses->hasPages())
                    <div class="mt-4 d-flex justify-content-center">
                        {{ $courses->links('pagination::bootstrap-4') }}
                    </div>
                @endif
            @endif
        </div>
    </div>
</section>

<style>
    .hover-lift:hover {
        transform: translateY(-3px);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important;
    }
</style>
@endsection