@extends('layouts.app')
@section('title','Notificações - GIGAX ARENA')
@section('page_title','Notificações')

@section('content')
<div class="gx-notifications-page">
    <section class="gx-notifications-head">
        <div>
            <span>CENTRAL GIGAX</span>
            <h2>Suas notificações</h2>
            <p>Partidas, XP, medalhas, anúncios e convites em um só lugar.</p>
        </div>
        <form method="POST" action="{{ route('notifications.read-all') }}">
            @csrf
            <button type="submit">✓ Marcar todas como lidas</button>
        </form>
    </section>

    <section class="gx-notification-list">
        @forelse($notifications as $notification)
            @php
                $isRead = !empty($notification->read_at);
                $icon = $notification->icon ?: '🔔';
                $target = $notification->link_url ?: route('notifications.index');
            @endphp
            <article class="gx-notification {{ $isRead ? 'is-read' : 'is-unread' }}">
                <a href="{{ $target }}">
                    <span class="gx-icon">{{ $icon }}</span>
                    <div>
                        <small>{{ strtoupper($notification->type) }} • {{ \Illuminate\Support\Carbon::parse($notification->created_at)->diffForHumans() }}</small>
                        <h3>{{ $notification->title }}</h3>
                        @if($notification->message)<p>{{ $notification->message }}</p>@endif
                    </div>
                </a>
                @if(!$isRead)
                    <form method="POST" action="{{ route('notifications.read', $notification->id) }}">
                        @csrf
                        <button title="Marcar como lida">✓</button>
                    </form>
                @endif
            </article>
        @empty
            <div class="gx-empty"><strong>🔔 Nenhuma notificação</strong><p>As novidades aparecerão aqui.</p></div>
        @endforelse
    </section>

    @if(method_exists($notifications,'links'))<div>{{ $notifications->links() }}</div>@endif
</div>
@endsection

@push('styles')
<style>
.gx-notifications-page{display:grid;gap:18px}.gx-notifications-head{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(135deg,#102234,#07111b)}.gx-notifications-head span{font-size:10px;color:var(--green);font-weight:1000;letter-spacing:.16em}.gx-notifications-head h2{margin:5px 0}.gx-notifications-head p{margin:0;color:var(--mut)}.gx-notifications-head button{padding:11px 14px;border-radius:9px;border:1px solid rgba(36,245,111,.3);background:rgba(36,245,111,.08);color:var(--green);font-weight:900;cursor:pointer}.gx-notification-list{display:grid;gap:10px}.gx-notification{display:flex;align-items:center;border:1px solid var(--line);border-radius:11px;background:linear-gradient(180deg,#0e1c2a,#08121d);overflow:hidden}.gx-notification.is-unread{border-color:rgba(36,245,111,.3);box-shadow:inset 4px 0 0 var(--green)}.gx-notification.is-read{opacity:.7}.gx-notification>a{display:grid;grid-template-columns:48px 1fr;gap:14px;align-items:center;flex:1;padding:16px}.gx-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:10px;background:rgba(36,245,111,.08);font-size:22px}.gx-notification small{color:var(--green);font-size:9px;font-weight:900}.gx-notification h3{margin:5px 0}.gx-notification p{margin:0;color:var(--mut);font-size:13px}.gx-notification>form{padding-right:14px}.gx-notification>form button{width:34px;height:34px;border-radius:8px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:#fff;cursor:pointer}.gx-empty{padding:55px;text-align:center;border:1px dashed var(--line);border-radius:12px;color:var(--mut)}.gx-empty strong{display:block;color:#fff;font-size:20px;margin-bottom:8px}@media(max-width:720px){.gx-notifications-head{align-items:flex-start;flex-direction:column}}
</style>
@endpush