@extends('layouts.admin', ['title' => 'Gamificação'])

@section('content')
<div class="grid gap-6 lg:grid-cols-3">
    <form method="POST" action="{{ route('admin.gamification.store') }}" class="card space-y-4">
        @csrf
        <h2 class="text-lg font-bold">Nova regra</h2>
        <div><label class="input-label">Nome</label><input class="input-field" name="name" placeholder="Ouro" required></div>
        <div><label class="input-label">Métrica</label><select class="input-field" name="metric">@foreach($metrics as $metric)<option value="{{ $metric->value }}">{{ $metric->label() }}</option>@endforeach</select></div>
        <div><label class="input-label">Meta</label><input class="input-field" type="number" step="0.01" name="threshold_value" required></div>
        <div><label class="input-label">Bônus (%)</label><input class="input-field" type="number" step="0.01" name="bonus_percentage" required></div>
        <div><label class="input-label">Badge</label><select class="input-field" name="badge_id"><option value="">Sem badge</option>@foreach($badges as $badge)<option value="{{ $badge->id }}">{{ $badge->icon }} {{ $badge->name }}</option>@endforeach</select></div>
        <button class="btn-primary w-full">Criar regra</button>
    </form>

    <div class="card lg:col-span-2 overflow-x-auto">
        <table class="min-w-full divide-y divide-slate-200">
            <thead><tr><th class="table-th">Regra</th><th class="table-th">Métrica</th><th class="table-th">Meta</th><th class="table-th">Bônus</th><th class="table-th">Badge</th></tr></thead>
            <tbody class="divide-y divide-slate-100">
            @foreach($rules as $rule)
                <tr><td class="table-td font-semibold">{{ $rule->name }}</td><td class="table-td">{{ $rule->metric->label() }}</td><td class="table-td">{{ number_format((float)$rule->threshold_value,2,',','.') }}</td><td class="table-td">+{{ number_format((float)$rule->bonus_percentage,2,',','.') }}%</td><td class="table-td">{{ $rule->badge?->icon }} {{ $rule->badge?->name }}</td></tr>
            @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection