@extends('layouts.madar')

@section('title', 'المكافآت')
@section('page_title', 'المكافآت والنقاط')

@section('content')
<div class="grid gap-4 sm:grid-cols-3">
    <div class="glass-card p-5">
        <p class="text-xs text-zinc-500">النقاط</p>
        <p id="reward-points" class="mt-1 text-2xl font-extrabold">—</p>
    </div>
    <div class="glass-card p-5">
        <p class="text-xs text-zinc-500">Streak</p>
        <p id="reward-streak" class="mt-1 text-2xl font-extrabold">0</p>
    </div>
    <div class="glass-card p-5">
        <p class="text-xs text-zinc-500">المستوى</p>
        <p id="reward-level" class="mt-1 text-2xl font-extrabold">1</p>
    </div>
</div>

<div class="mt-8 grid gap-6 lg:grid-cols-2">
    <div class="glass-card p-6">
        <h2 class="font-bold">مكافأة يومية</h2>
        <p class="mt-2 text-sm text-zinc-400">احصل على نقاط إضافية كل يوم.</p>
        <button type="button" id="claim-daily" class="neon-btn mt-4">استلام اليوم</button>
    </div>
    <div class="glass-card p-6">
        <h2 class="font-bold">دعوة الأصدقاء</h2>
        <p class="mt-2 text-sm text-zinc-400">شارك رابطك واكسب نقاطاً.</p>
        <div class="mt-4 flex gap-2">
            <input id="referral-link" readonly class="madar-input flex-1 text-xs">
            <button type="button" id="copy-referral" class="neon-btn-outline">نسخ</button>
        </div>
    </div>
</div>
@endsection

@push('head')
    @vite('resources/js/madar-rewards.js')
@endpush