@extends('layouts.dashboard')
@section('title', __('My Certificates'))
@section('page_title', __('My Certificates'))

@section('content')
<div class="mb-4">
    <h4 class="mb-0 fw-bold">{{ __('My Certificates') }}</h4>
    <p class="text-muted small mb-0">{{ __('Certificates earned by completing courses') }}</p>
</div>

<div class="row g-4">
    @forelse ($certificates as $certificate)
        <div class="col-md-6 col-xl-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-3">
                        <div class="rounded d-flex align-items-center justify-content-center me-3" style="width:48px;height:48px;background:#eef2ff;color:#4f46e5;">
                            <i class="bi bi-award-fill fs-4"></i>
                        </div>
                        <div>
                            <h6 class="fw-semibold mb-0">{{ $certificate->course->title ?? __('Course') }}</h6>
                            <small class="text-muted">{{ optional($certificate->issued_at)->format('M d, Y') }}</small>
                            @if($certificate->valid_until)
                                <small class="d-block {{ $certificate->isExpired() ? 'text-danger fw-semibold' : 'text-muted' }}">@if($certificate->isExpired()){{ __('Expired :date — retake the course to renew', ['date' => $certificate->valid_until->format('M d, Y')]) }}@else{{ __('Valid until :date', ['date' => $certificate->valid_until->format('M d, Y')]) }}@endif</small>
                            @endif
                        </div>
                    </div>
                    <div class="small text-muted mb-3">
                        {{ __('Certificate No:') }} <span class="fw-semibold text-dark">{{ $certificate->certificate_no }}</span>
                    </div>
                    @if($certificate->isExpired() && $certificate->course)
                        <a href="{{ route('student.learn', $certificate->course) }}" class="btn btn-warning w-100 mb-2">
                            <i class="bi bi-arrow-repeat me-1"></i> {{ __('Retake course') }}
                        </a>
                    @endif
                    <a href="{{ route('student.certificate.download', $certificate) }}" target="_blank" class="btn btn-outline-primary w-100">
                        <i class="bi bi-download me-1"></i> {{ __('View / Download') }}
                    </a>
                </div>
            </div>
        </div>
    @empty
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-body text-center text-muted py-5">
                    <i class="bi bi-award display-5 d-block mb-3"></i>
                    <p class="mb-0">{{ __('No certificates yet. Complete a course to earn one.') }}</p>
                </div>
            </div>
        </div>
    @endforelse
</div>
@endsection