@extends('layouts.app')

@section('content')
<div class="container-fluid px-3 px-lg-4 py-3 py-lg-4">
    <!-- Header Greeting (Mobile App Style) -->
    <div class="mb-4">
        <h4 class="fw-bold mb-1">Welcome back, {{ Auth::user()->name }}</h4>
        <p class="text-secondary small mb-0">Continue your learning journey</p>
    </div>

    <!-- Navigation Pill Buttons -->
    <div class="lms-nav-btns">
        <a href="#" class="lms-nav-btn active">
            <i class="bi bi-grid"></i> Dashboard
        </a>
    </div>

    <!-- Main Grid (2 columns on mobile) -->
    <div class="row g-3 g-lg-4">
        @foreach($subjects as $index => $subject)
            <div class="col-6 col-md-4 col-lg-3 col-xl-2">
                <a href="{{ route('student.courses.index', $subject) }}" class="text-decoration-none">
                    <div class="lms-card text-center border-0 shadow-sm" style="border-radius: 24px;">
                        <div class="card-body p-4">
                            <div class="mb-3 d-inline-flex align-items-center justify-content-center rounded-circle" style="width: 50px; height: 50px; background: #f8fafc; color: var(--zoho-navy);">
                                <i class="bi bi-journal-bookmark-fill fs-4"></i>
                            </div>
                            <h6 class="fw-bold text-dark mb-2" style="font-size: 0.85rem;">{{ $subject->name }}</h6>
                            <span class="badge rounded-pill px-3 py-2" style="background: rgba(249, 115, 22, 0.1); color: var(--zoho-orange); font-size: 0.6rem; font-weight: 700;">
                                {{ $subject->courses_count ?? 0 }} TOPICS
                            </span>
                        </div>
                    </div>
                </a>
            </div>
        @endforeach
    </div>
</div>
@endsection