@extends('admin.layout')
@section('title', 'Achievements')
@section('subtitle', $achievements->count() . ' total')

@section('content')
<div class="flex justify-end mb-4">
    <a href="{{ route('admin.achievements.create') }}" class="bg-slate-900 text-white px-4 py-2 rounded-md text-sm">+ New Achievement</a>
</div>

<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
    @foreach ($achievements as $a)
        <div class="bg-white rounded-lg shadow-sm border border-slate-200 p-5">
            <div class="flex justify-between items-start">
                <div class="text-3xl">🏆</div>
                <span class="text-xs text-slate-500">{{ $a->users_count }} users</span>
            </div>
            <h3 class="font-semibold mt-2">{{ $a->title }}</h3>
            <p class="text-sm text-slate-600 mt-1">{{ $a->description }}</p>
            <div class="mt-3 text-xs text-slate-500 space-y-1">
                <div>Slug: <code class="font-mono">{{ $a->slug }}</code></div>
                <div>Icon: <code>{{ $a->icon }}</code> · Color: <code>{{ $a->color }}</code></div>
                <div>Requirement: <strong>{{ $a->requirement_type }}</strong> ≥ {{ $a->requirement_value }}</div>
            </div>
            <div class="mt-4 flex gap-2 justify-end">
                <a href="{{ route('admin.achievements.edit', $a) }}" class="text-blue-600 text-sm hover:underline">Edit</a>
                <form method="POST" action="{{ route('admin.achievements.destroy', $a) }}" onsubmit="return confirm('Delete?')">
                    @csrf @method('DELETE')
                    <button class="text-red-600 text-sm hover:underline">Delete</button>
                </form>
            </div>
        </div>
    @endforeach
</div>
@endsection