@extends('admin.layout')

@section('content')
<div class="page-title">Badges</div>

<div style="display:grid;grid-template-columns:1fr 1fr;gap:24px">
    <div class="card">
        <h3 style="margin-bottom:16px;font-size:14px;text-transform:uppercase;letter-spacing:1px;color:#888">All Badges</h3>
        <table>
            <thead>
                <tr>
                    <th>Badge</th>
                    <th>Users</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($badges as $badge)
                <tr>
                    <td>
                        <span style="font-size:20px">{{ $badge->icon }}</span>
                        <strong style="margin-left:8px">{{ $badge->name }}</strong><br>
                        <small style="color:#888">{{ $badge->description }}</small>
                    </td>
                    <td>{{ $badge->users_count }}</td>
                    <td>
                        <form method="POST" action="{{ route('admin.badges.destroy', $badge->id) }}" style="display:inline">
                            @csrf @method('DELETE')
                            <button class="btn btn-red btn-sm" onclick="return confirm('Delete this badge?')">Delete</button>
                        </form>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <div class="card">
        <h3 style="margin-bottom:16px;font-size:14px;text-transform:uppercase;letter-spacing:1px;color:#888">Create Badge</h3>
        <form method="POST" action="{{ route('admin.badges.store') }}">
            @csrf
            <div class="form-group">
                <label>Name</label>
                <input type="text" name="name" required placeholder="e.g. Top Lender">
            </div>
            <div class="form-group">
                <label>Description</label>
                <input type="text" name="description" placeholder="Brief description">
            </div>
            <div class="form-group">
                <label>Icon (emoji)</label>
                <input type="text" name="icon" placeholder="⭐" maxlength="4">
            </div>
            <div class="form-group">
                <label>Colour (hex)</label>
                <input type="text" name="colour" placeholder="#4A5C3A">
            </div>
            <button class="btn btn-black" style="width:100%">Create Badge</button>
        </form>
    </div>
</div>
@endsection