@extends('student.layouts.app')

@section('title', app()->getLocale() === 'ar' ? 'مقرراتي' : 'My Courses')

@section('content')
@php $isArabic = app()->getLocale() === 'ar'; @endphp

<div class="flex flex-col gap-6">

    {{-- Header --}}
    <div class="rounded-[1.75rem] border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-900 lg:p-7">
        <div class="flex flex-col gap-5 sm:flex-row sm:items-center sm:justify-between">
            <div class="space-y-1">
                <p class="text-[11px] font-black uppercase tracking-[0.2em] text-brand-600 dark:text-brand-400">
                    {{ $isArabic ? 'المقررات الدراسية' : 'Academic Courses' }}
                </p>
                <h1 class="text-2xl font-black tracking-tight text-zinc-900 dark:text-white">
                    {{ $isArabic ? 'مسارك الدراسي الحالي' : 'Your Learning Path' }}
                </h1>
                <p class="text-sm text-zinc-500 dark:text-zinc-400">
                    {{ $isArabic ? 'كل مقرراتك في مكان واحد مع وصول مباشر للمواد والاختبارات والمهام.' : 'All your courses in one place with direct access to materials, quizzes, and assignments.' }}
                </p>
            </div>
            <div class="flex shrink-0 flex-wrap gap-3">
                <div class="rounded-2xl border border-zinc-200 bg-zinc-50 px-5 py-3 text-center dark:border-zinc-700 dark:bg-zinc-950">
                    <p class="text-[11px] font-black uppercase tracking-widest text-zinc-400">{{ $isArabic ? 'المقررات' : 'Courses' }}</p>
                    <p class="mt-1 text-2xl font-black text-zinc-900 dark:text-white">{{ $courses->count() }}</p>
                </div>
                @php $completed = $courses->filter(fn($c) => (int)$c->student_progress >= 100)->count(); @endphp
                @if($completed > 0)
                <div class="rounded-2xl border border-emerald-200 bg-emerald-50 px-5 py-3 text-center dark:border-emerald-500/20 dark:bg-emerald-500/10">
                    <p class="text-[11px] font-black uppercase tracking-widest text-emerald-500">{{ $isArabic ? 'مكتملة' : 'Completed' }}</p>
                    <p class="mt-1 text-2xl font-black text-emerald-700 dark:text-emerald-400">{{ $completed }}</p>
                </div>
                @endif
            </div>
        </div>
    </div>

    {{-- Courses Grid --}}
    @if($courses->isEmpty())
        <div class="rounded-[2rem] border border-dashed border-zinc-300 bg-white p-16 text-center dark:border-zinc-700 dark:bg-zinc-900">
            <div class="text-5xl">📚</div>
            <h3 class="mt-4 text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'لا توجد مقررات حالياً' : 'No courses yet' }}</h3>
            <p class="mt-2 text-sm text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'لم يتم ربط أي مقررات بحسابك حتى الآن.' : 'No courses are currently linked to your account.' }}</p>
        </div>
    @else
        <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
            @foreach($courses as $course)
            @php
                $p = (int) $course->student_progress;
                $barColor = $p >= 100 ? 'bg-emerald-500' : ($p >= 50 ? 'bg-brand-600' : 'bg-sky-500');
                $textColor = $p >= 100 ? 'text-emerald-600 dark:text-emerald-400' : ($p >= 50 ? 'text-brand-600 dark:text-brand-400' : 'text-sky-600 dark:text-sky-400');
            @endphp
            <article class="flex flex-col rounded-[2rem] border border-zinc-200 bg-white shadow-sm transition hover:border-brand-400 hover:shadow-md dark:border-zinc-800 dark:bg-zinc-900">

                {{-- Top --}}
                <div class="flex items-start gap-4 p-5 pb-4">
                    @if($course->image)
                        <img src="{{ $course->image }}"
                             alt="{{ $course->name }}"
                             class="h-14 w-14 shrink-0 rounded-2xl object-cover ring-1 ring-zinc-200 dark:ring-zinc-700">
                    @else
                        <div class="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl bg-brand-50 text-brand-600 dark:bg-brand-500/10 dark:text-brand-400">
                            <i class="fa-solid fa-book text-xl"></i>
                        </div>
                    @endif
                    <div class="min-w-0 flex-1">
                        <div class="flex items-start justify-between gap-2">
                            <h3 class="font-black text-zinc-900 line-clamp-2 dark:text-white">{{ $course->name }}</h3>
                            @if($p >= 100)
                                <span class="shrink-0 rounded-full bg-emerald-100 px-2 py-0.5 text-[10px] font-black text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-400">✓</span>
                            @endif
                        </div>
                        @if($course->teacher)
                            <p class="mt-1 text-xs text-zinc-400 truncate">
                                <i class="fa-solid fa-chalkboard-user me-1"></i>{{ $course->teacher->name }}
                            </p>
                        @endif
                        <div class="mt-2 flex flex-wrap gap-1.5">
                            @if($course->subject?->name)
                                <span class="rounded-full bg-zinc-100 px-2.5 py-0.5 text-[11px] font-bold text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400">{{ $course->subject->name }}</span>
                            @endif
                            @if($course->schoolClass?->name)
                                <span class="rounded-full bg-zinc-100 px-2.5 py-0.5 text-[11px] font-bold text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400">{{ $course->schoolClass->name }}</span>
                            @endif
                        </div>
                    </div>
                </div>

                {{-- Progress --}}
                <div class="px-5 pb-4">
                    <div class="mb-1.5 flex items-center justify-between text-xs">
                        <span class="font-bold text-zinc-400">{{ $isArabic ? 'التقدم' : 'Progress' }}</span>
                        <span class="font-black {{ $textColor }}">{{ $p }}%</span>
                    </div>
                    <div class="h-2 overflow-hidden rounded-full bg-zinc-100 dark:bg-zinc-800"
                         role="progressbar" aria-valuenow="{{ $p }}" aria-valuemin="0" aria-valuemax="100">
                        <div class="h-full rounded-full {{ $barColor }} transition-all duration-500" style="width: {{ min(100, max(0, $p)) }}%"></div>
                    </div>
                </div>

                {{-- Stats --}}
                <div class="grid grid-cols-3 gap-px border-t border-zinc-100 dark:border-zinc-800">
                    @php
                        $stats = [
                            ['label' => $isArabic ? 'مواد' : 'Materials', 'icon' => 'fa-file-lines', 'count' => $course->materials_count],
                            ['label' => $isArabic ? 'اختبارات' : 'Quizzes',   'icon' => 'fa-clipboard-question', 'count' => $course->quizzes_count],
                            ['label' => $isArabic ? 'مهام' : 'Assignments', 'icon' => 'fa-list-check', 'count' => $course->assignments_count],
                        ];
                    @endphp
                    @foreach($stats as $stat)
                    <div class="flex flex-col items-center gap-1 py-3 text-center">
                        <i class="fa-solid {{ $stat['icon'] }} text-xs text-zinc-400"></i>
                        <span class="text-base font-black text-zinc-900 dark:text-white">{{ $stat['count'] }}</span>
                        <span class="text-[10px] font-bold text-zinc-400">{{ $stat['label'] }}</span>
                    </div>
                    @endforeach
                </div>

                {{-- Action --}}
                <div class="p-4 pt-0 mt-auto">
                    <a href="{{ route('student.courses.show', $course->id) }}"
                       class="flex w-full items-center justify-center gap-2 rounded-2xl bg-brand-600 px-4 py-2.5 text-sm font-bold text-white no-underline transition hover:bg-brand-700">
                        <i class="fa-solid fa-arrow-up-right-from-square text-xs"></i>
                        {{ $isArabic ? 'فتح المقرر' : 'Open Course' }}
                    </a>
                </div>
            </article>
            @endforeach
        </div>
    @endif

</div>
@endsection