@extends('layouts.cabinet')

@section('title', 'Приглашайте друзей — Placeo')

@section('cabinet')
<div>
    <h1 class="mb-2 text-2xl font-bold text-gray-900">Приглашайте друзей</h1>
    <p class="mb-6 max-w-2xl text-sm text-muted">
        Делитесь ссылкой с друзьями. За каждое объявление приглашённого друга, прошедшее модерацию,
        вы получаете <span class="font-medium text-gray-700">5 поднятий</span> (до 50 в день с одного друга).
        Поднятия не сгорают и тратятся сверх одного бесплатного в день.
    </p>

    {{-- Ссылка-приглашение --}}
    <div class="card p-5" x-data="{ link: @js($link), copied: false,
        copy() {
            navigator.clipboard.writeText(this.link).then(() => {
                this.copied = true;
                setTimeout(() => this.copied = false, 2000);
            });
        } }">
        <div class="mb-2 text-sm font-medium text-gray-700">Ваша реферальная ссылка</div>
        <div class="flex flex-col gap-2 sm:flex-row">
            <input type="text" readonly :value="link" @focus="$event.target.select()"
                   class="min-w-0 flex-1 rounded-xl border border-gray-200 bg-gray-50 px-4 py-2.5 text-sm text-gray-700">
            <button type="button" @click="copy()" class="btn-brand shrink-0 whitespace-nowrap">
                <span x-show="!copied">Скопировать</span>
                <span x-show="copied" x-cloak>Скопировано ✓</span>
            </button>
        </div>
    </div>

    {{-- Статистика --}}
    <div class="mt-4 grid gap-4 sm:grid-cols-3">
        @php
            $cards = [
                ['label' => 'Приглашено друзей', 'value' => $referralsCount],
                ['label' => 'Заработано поднятий', 'value' => $earned],
                ['label' => 'Доступно из пула', 'value' => $credits],
            ];
        @endphp
        @foreach ($cards as $c)
            <div class="card p-5">
                <div class="mb-2 text-sm text-gray-500">{{ $c['label'] }}</div>
                <div class="text-3xl font-extrabold text-gray-900">{{ $c['value'] }}</div>
            </div>
        @endforeach
    </div>
</div>
@endsection