@extends('layouts.dashboard')
@section('title', __('messages.nav_dashboard'))

@section('dashboard_content')
<h1 class="mb-2 font-display text-2xl font-bold">{{ __('messages.dashboard_welcome') }}, {{ $user->first_name }}</h1>
<p class="mb-8 text-ink/60">{{ $user->email }} · {{ $user->phone }}</p>

<div class="grid gap-4 sm:grid-cols-2">
    <div class="card p-4">
        <h2 class="mb-2 font-display font-semibold">{{ __('messages.dashboard_verify_email') }}</h2>
        @if ($user->email_verified_at)
            <span class="status-pill bg-green-100 text-green-800">✓ {{ __('messages.status_approved') }}</span>
        @else
            <form action="{{ route('dashboard.email.send', ['locale' => app()->getLocale()]) }}" method="POST">
                @csrf
                <button type="submit" class="btn-outline !border-ink/20 !text-ink text-sm">{{ __('messages.action_submit') }}</button>
            </form>
        @endif
    </div>

    <div class="card p-4">
        <h2 class="mb-2 font-display font-semibold">{{ __('messages.dashboard_verify_phone') }}</h2>
        @if ($user->phone_verified_at)
            <span class="status-pill bg-green-100 text-green-800">✓ {{ __('messages.status_approved') }}</span>
        @else
            <form action="{{ route('dashboard.phone.send', ['locale' => app()->getLocale()]) }}" method="POST" class="mb-2">
                @csrf
                <button type="submit" class="btn-outline !border-ink/20 !text-ink text-sm">SMS კოდის გაგზავნა</button>
            </form>
            <form action="{{ route('dashboard.phone.confirm', ['locale' => app()->getLocale()]) }}" method="POST" class="flex gap-2">
                @csrf
                <input type="text" name="code" maxlength="6" placeholder="000000" class="w-28 rounded-md border border-ink/15 px-3 py-2 font-mono text-sm">
                <button type="submit" class="btn-primary !px-3 !py-2 text-sm">{{ __('messages.action_confirm') }}</button>
            </form>
        @endif
    </div>
</div>

<h2 class="mb-3 mt-8 font-display text-lg font-semibold">{{ __('messages.dashboard_my_roles') }}</h2>
<div class="flex flex-wrap gap-2">
    @forelse ($user->roles as $role)
        <span class="status-pill
            @if ($role->pivot->status === 'approved') bg-green-100 text-green-800
            @elseif ($role->pivot->status === 'rejected') bg-red-100 text-red-800
            @else bg-gold/20 text-gold-dark @endif">
            {{ $role->name_ka }} — {{ __('messages.status_'.$role->pivot->status) }}
        </span>
    @empty
        <p class="text-ink/40">—</p>
    @endforelse
    <a href="{{ route('dashboard.roles', ['locale' => app()->getLocale()]) }}" class="status-pill border border-dashed border-ink/30 text-ink/60 hover:border-forest">+ {{ __('messages.action_add') }}</a>
</div>

@if ($isVip)
    <div class="mt-8 rounded-lg border border-gold bg-gold/10 p-4">
        <p class="font-display font-semibold text-gold-dark">⭐ VIP {{ __('messages.status_approved') }}</p>
    </div>
@endif

@if ($unreadNotifications->isNotEmpty())
    <h2 class="mb-3 mt-8 font-display text-lg font-semibold">{{ __('messages.dashboard_notifications') }}</h2>
    <div class="space-y-2">
        @foreach ($unreadNotifications as $n)
            <div class="card p-3 text-sm">{{ $n->data['title_ka'] ?? '' }} — {{ $n->data['body_ka'] ?? '' }}</div>
        @endforeach
    </div>
@endif
@endsection