@extends('layouts.admin')
@section('title', 'Notificações')
@section('breadcrumb')<span class="breadcrumb-current">Notificações</span>@endsection

@push('styles')
<style>
.notif-page-header { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:22px; }
.notif-page-header h2 { font-size:1.2rem; font-weight:800; color:#111827; }
.notif-page-header p  { font-size:.78rem; color:#6b7280; }

/* Abas */
.notif-tabs { display:flex; gap:0; margin-bottom:20px; }
.notif-tab  { padding:8px 18px; border:1px solid #e5e7eb; background:#f8fafc; font-size:.79rem; font-weight:700; color:#6b7280; text-decoration:none; transition:.12s; }
.notif-tab:first-child { border-radius:8px 0 0 8px; }
.notif-tab:last-child  { border-radius:0 8px 8px 0; border-left:none; }
.notif-tab.active { background:#6366f1; color:#fff; border-color:#6366f1; }

/* Feed */
.notif-feed { background:#fff; border:1px solid #e5e7eb; border-radius:14px; overflow:hidden; }
.notif-feed-hdr { display:flex; justify-content:space-between; align-items:center; padding:12px 20px; border-bottom:1px solid #f1f5f9; background:#fafafa; font-size:.84rem; font-weight:700; }

.notif-item { display:flex; gap:14px; align-items:flex-start; padding:14px 20px; border-bottom:1px solid #f8fafc; cursor:default; transition:.12s; }
.notif-item:last-child { border-bottom:none; }
.notif-item:hover { background:#fafafa; }
.notif-item.unread { background:#fafbff; }
.notif-item.unread .notif-title { font-weight:800; }

.notif-icon { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.notif-content { flex:1; min-width:0; }
.notif-title { font-size:.82rem; color:#111827; }
.notif-msg   { font-size:.76rem; color:#6b7280; margin-top:3px; }
.notif-time  { font-size:.68rem; color:#9ca3af; margin-top:5px; display:flex; align-items:center; gap:6px; }

.notif-dot { width:8px; height:8px; background:#6366f1; border-radius:50%; flex-shrink:0; margin-top:5px; }

.notif-actions { display:flex; align-items:center; gap:6px; }
.notif-read-btn { padding:3px 9px; background:#ede9fe; color:#7c3aed; border:none; border-radius:6px; font-size:.69rem; font-weight:700; cursor:pointer; text-decoration:none; white-space:nowrap; }

/* tipo badge colors */
.type-success .notif-icon { background:#dcfce7; }
.type-info    .notif-icon { background:#dbeafe; }
.type-warning .notif-icon { background:#fef3c7; }
.type-danger  .notif-icon { background:#fee2e2; }
</style>
@endpush

@section('content')

@php
    $filter = request('filter', 'all');
@endphp

<div class="notif-page-header">
    <div>
        <h2>🔔 Central de Notificações</h2>
        <p>Histórico de alertas do sistema · {{ $unreadCount }} não {{ $unreadCount === 1 ? 'lida' : 'lidas' }}</p>
    </div>
    @if($unreadCount > 0)
    <form action="{{ route('admin.notifications.read-all') }}" method="POST">
        @csrf @method('PATCH')
        <button type="submit" class="btn btn-primary">
            <i data-lucide="check-check" style="width:14px;height:14px;"></i>
            Marcar todas como lidas
        </button>
    </form>
    @endif
</div>

{{-- Tabs --}}
<div class="notif-tabs">
    <a href="?filter=all"    class="notif-tab {{ $filter === 'all'    ? 'active' : '' }}">Todas</a>
    <a href="?filter=unread" class="notif-tab {{ $filter === 'unread' ? 'active' : '' }}">Não lidas ({{ $unreadCount }})</a>
</div>

<div class="notif-feed">
    <div class="notif-feed-hdr">
        <span style="display:flex;align-items:center;gap:7px;">
            <i data-lucide="inbox" style="width:14px;height:14px;color:#6366f1;"></i>
            Notificações
        </span>
        <span style="font-size:.71rem;color:#6b7280;font-weight:400;">{{ $notifications->total() }} total · página {{ $notifications->currentPage() }}</span>
    </div>

    @forelse($notifications as $n)
    @php
        $colors = $n->color;
        $iconColors = [
            'success' => '#16a34a',
            'warning' => '#d97706',
            'danger'  => '#dc2626',
            'info'    => '#2563eb',
        ];
        $iconColor = $iconColors[$n->type] ?? '#2563eb';
    @endphp
    <div class="notif-item type-{{ $n->type }} {{ !$n->is_read ? 'unread' : '' }}">
        {{-- Ícone --}}
        <div class="notif-icon" style="background:{{ $colors['bg'] }};">
            <i data-lucide="{{ $n->icon }}" style="width:16px;height:16px;color:{{ $iconColor }};"></i>
        </div>

        {{-- Conteúdo --}}
        <div class="notif-content">
            <div class="notif-title">{{ $n->title }}</div>
            @if($n->message)
            <div class="notif-msg">{{ $n->message }}</div>
            @endif
            <div class="notif-time">
                {{ $n->created_at->format('d/m/Y H:i') }}
                <span>·</span>
                {{ $n->created_at->diffForHumans() }}
                @if($n->user)
                <span>·</span>
                <span style="color:#6b7280;">{{ $n->user->display_name ?? $n->user->name }}</span>
                @else
                <span>·</span>
                <span style="color:#9ca3af;">Sistema</span>
                @endif
            </div>
        </div>

        {{-- Ações --}}
        <div class="notif-actions">
            @if(!$n->is_read)
            <div style="display:flex;align-items:center;gap:8px;">
                <span class="notif-dot" title="Não lida"></span>
                <form action="{{ route('admin.notifications.read', $n) }}" method="POST" style="display:inline;">
                    @csrf @method('PATCH')
                    <button type="submit" class="notif-read-btn">Marcar lida</button>
                </form>
            </div>
            @else
            <span style="font-size:.68rem;color:#d1d5db;">✓ Lida</span>
            @endif
            @if($n->link)
            <a href="{{ $n->link }}" style="padding:3px 9px;background:#f1f5f9;color:#374151;border-radius:6px;font-size:.69rem;font-weight:700;text-decoration:none;">
                Abrir →
            </a>
            @endif
        </div>
    </div>
    @empty
    <div style="padding:48px;text-align:center;color:#9ca3af;">
        <div style="font-size:2.5rem;margin-bottom:12px;">🔔</div>
        <div style="font-weight:700;color:#374151;margin-bottom:6px;">
            {{ $filter === 'unread' ? 'Nenhuma notificação não lida' : 'Nenhuma notificação encontrada' }}
        </div>
        <div style="font-size:.8rem;">As notificações aparecerão aqui conforme as atividades do hotel.</div>
    </div>
    @endforelse
</div>

{{-- Paginação --}}
@if($notifications->hasPages())
<div style="display:flex;gap:4px;flex-wrap:wrap;margin-top:16px;">
    @if($notifications->onFirstPage())
        <span style="padding:6px 11px;border:1px solid #e5e7eb;border-radius:7px;font-size:.78rem;opacity:.4;background:#fff;">‹</span>
    @else
        <a href="{{ $notifications->previousPageUrl() }}" style="padding:6px 11px;border:1px solid #e5e7eb;border-radius:7px;font-size:.78rem;color:#374151;text-decoration:none;background:#fff;">‹</a>
    @endif
    @foreach($notifications->getUrlRange(max(1,$notifications->currentPage()-2), min($notifications->lastPage(),$notifications->currentPage()+2)) as $page => $url)
        <a href="{{ $url }}" style="padding:6px 11px;border:1px solid {{ $page === $notifications->currentPage() ? '#6366f1' : '#e5e7eb' }};border-radius:7px;font-size:.78rem;background:{{ $page === $notifications->currentPage() ? '#6366f1' : '#fff' }};color:{{ $page === $notifications->currentPage() ? '#fff' : '#374151' }};text-decoration:none;font-weight:{{ $page === $notifications->currentPage() ? '700' : '400' }};">{{ $page }}</a>
    @endforeach
    @if($notifications->hasMorePages())
        <a href="{{ $notifications->nextPageUrl() }}" style="padding:6px 11px;border:1px solid #e5e7eb;border-radius:7px;font-size:.78rem;color:#374151;text-decoration:none;background:#fff;">›</a>
    @endif
</div>
@endif

@endsection