@extends('student.layouts.app')

@section('title', app()->getLocale() === 'ar' ? 'التكريم' : 'Recognition')

@section('content')
@php $isAr = 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">
                    {{ $isAr ? 'شهادات التكريم' : 'Recognition Certificates' }}
                </p>
                <h1 class="text-2xl font-black tracking-tight text-zinc-900 dark:text-white">
                    {{ $isAr ? 'التكريم' : 'Recognition' }}
                </h1>
                <p class="text-sm text-zinc-500 dark:text-zinc-400">
                    {{ $isAr ? 'كل شهادات التكريم التي حصلت عليها.' : 'All recognition certificates you have received.' }}
                </p>
            </div>
            @if($certificates->total() > 0)
            <div class="rounded-2xl border border-amber-200 bg-amber-50 px-6 py-3 text-center dark:border-amber-500/20 dark:bg-amber-500/10">
                <p class="text-[11px] font-black uppercase tracking-widest text-amber-500">{{ $isAr ? 'الشهادات' : 'Certificates' }}</p>
                <p class="mt-1 text-3xl font-black text-amber-700 dark:text-amber-400">{{ $certificates->total() }}</p>
            </div>
            @endif
        </div>
    </div>

    {{-- Empty --}}
    @if($certificates->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="mx-auto flex h-16 w-16 items-center justify-center rounded-3xl bg-amber-50 text-amber-400 dark:bg-amber-500/10">
                <i class="fa-solid fa-award text-2xl"></i>
            </div>
            <h3 class="mt-4 text-lg font-black text-zinc-900 dark:text-white">{{ $isAr ? 'لا توجد شهادات بعد' : 'No certificates yet' }}</h3>
            <p class="mt-2 text-sm text-zinc-500 dark:text-zinc-400">{{ $isAr ? 'ستظهر شهاداتك هنا فور إصدارها.' : 'Your certificates will appear here once issued.' }}</p>
        </div>
    @else
        <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
            @foreach($certificates as $cert)
            <article class="flex flex-col rounded-[2rem] border border-zinc-200 bg-white shadow-sm transition hover:border-amber-300 hover:shadow-md dark:border-zinc-800 dark:bg-zinc-900">
                {{-- Top accent --}}
                <div class="flex items-center gap-4 border-b border-zinc-100 p-5 dark:border-zinc-800">
                    <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-amber-50 text-amber-500 dark:bg-amber-500/10">
                        <i class="fa-solid fa-certificate text-xl"></i>
                    </div>
                    <div class="min-w-0">
                        <h2 class="font-black text-zinc-900 line-clamp-1 dark:text-white">
                            {{ $cert->album?->title ?: ($isAr ? 'شهادة تكريم' : 'Recognition Certificate') }}
                        </h2>
                        @if($cert->album?->description)
                            <p class="mt-0.5 text-xs text-zinc-400 line-clamp-1">{{ $cert->album->description }}</p>
                        @endif
                    </div>
                </div>

                {{-- Details --}}
                <div class="flex flex-col gap-2 p-5 text-sm">
                    <div class="flex items-center justify-between">
                        <span class="text-zinc-400">{{ $isAr ? 'تاريخ الإصدار' : 'Issued on' }}</span>
                        <span class="font-bold text-zinc-800 dark:text-zinc-200">{{ $cert->created_at?->format('Y-m-d') ?: '—' }}</span>
                    </div>
                    @if($cert->album?->date)
                    <div class="flex items-center justify-between">
                        <span class="text-zinc-400">{{ $isAr ? 'تاريخ المناسبة' : 'Event date' }}</span>
                        <span class="font-bold text-zinc-800 dark:text-zinc-200">{{ $cert->album->date->format('Y-m-d') }}</span>
                    </div>
                    @endif
                </div>

                {{-- Action --}}
                <div class="mt-auto p-5 pt-0">
                    <a href="{{ $cert->file_url }}" target="_blank"
                       class="flex w-full items-center justify-center gap-2 rounded-2xl bg-amber-500 px-4 py-2.5 text-sm font-bold text-white no-underline transition hover:bg-amber-600">
                        <i class="fa-solid fa-up-right-from-square text-xs"></i>
                        {{ $isAr ? 'فتح الشهادة' : 'Open Certificate' }}
                    </a>
                </div>
            </article>
            @endforeach
        </div>

        <div class="flex justify-center">
            {{ $certificates->links('pagination::simple-tailwind') }}
        </div>
    @endif

</div>
@endsection