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

@section('content')
    @include('partials.how-it-works', ['key' => 'gamification.badges'])

    <div class="d-flex justify-content-between align-items-center mb-3">
        <p class="text-muted mb-0">{{ __('Define badges learners can earn through points, lessons or courses.') }}</p>
        <a href="{{ route('admin.badges.create') }}" class="btn btn-primary"><i class="bi bi-plus-lg"></i> {{ __('New Badge') }}</a>
    </div>

    <div class="card shadow-sm">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light">
                    <tr>
                        <th>{{ __('Badge') }}</th>
                        <th>{{ __('Condition') }}</th>
                        <th>{{ __('Reward') }}</th>
                        <th>{{ __('Earned By') }}</th>
                        <th>{{ __('Status') }}</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($badges as $badge)
                        <tr>
                            <td>
                                <div class="d-flex align-items-center">
                                    <i class="bi {{ $badge->icon ?: 'bi-award' }} fs-4 me-2 text-primary"></i>
                                    <div>
                                        <div class="fw-semibold">{{ $badge->name }}</div>
                                        <small class="text-muted">{{ \Illuminate\Support\Str::limit($badge->description, 50) }}</small>
                                    </div>
                                </div>
                            </td>
                            <td>{{ $badge->condition_value }} {{ status_label($badge->condition_type) }}</td>
                            <td>{{ __(':count pts', ['count' => $badge->points]) }}</td>
                            <td>{{ $badge->user_badges_count }}</td>
                            <td>
                                <span class="badge bg-{{ $badge->status ? 'success' : 'secondary' }}">{{ $badge->status ? __('Active') : __('Inactive') }}</span>
                            </td>
                            <td class="text-end">
                                <a href="{{ route('admin.badges.edit', $badge) }}" class="btn btn-sm btn-outline-secondary"><i class="bi bi-pencil"></i></a>
                                <form method="POST" action="{{ route('admin.badges.destroy', $badge) }}" class="d-inline" data-confirm="{{ __('Delete this badge?') }}">
                                    @csrf @method('DELETE')
                                    <button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="6" class="text-center text-muted py-4">{{ __('No badges yet.') }}</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <div class="mt-3">{{ $badges->links() }}</div>
@endsection