{{-- Header --}}
<header class="admin-header">
    <div class="header-left">
        {{-- Toggle Sidebar --}}
        <button class="header-toggle-btn" @click="sidebarOpen = !sidebarOpen" title="Toggle sidebar">
            <i data-lucide="menu" style="width:20px;height:20px;"></i>
        </button>

        {{-- Hotel Name --}}
        @if(hotel())
            <span style="font-size: var(--text-sm); color: var(--color-text-secondary);">
                <i data-lucide="building-2" style="width:16px;height:16px;display:inline;vertical-align:text-bottom;"></i>
                {{ hotel()->name }}
            </span>
        @endif
    </div>

    <div class="header-right">

        {{-- ═══ SINO DE NOTIFICAÇÕES ══════════════════════════════════════════ --}}
        <div x-data="notifBell()" x-init="init()" style="position:relative;">

            {{-- Botão sino --}}
            <button
                @click="toggle()"
                class="header-toggle-btn"
                title="Notificações"
                id="btn-notifications"
                style="position:relative;"
                :class="{'notif-bell-active': open}"
            >
                <i data-lucide="bell" style="width:20px;height:20px;"></i>

                {{-- Badge contador --}}
                <span
                    x-show="unread > 0"
                    x-text="unread > 9 ? '9+' : unread"
                    style="
                        position:absolute; top:1px; right:1px;
                        min-width:17px; height:17px; padding:0 4px;
                        background:#ef4444; color:#fff;
                        border-radius:99px; font-size:10px; font-weight:800;
                        line-height:17px; text-align:center;
                        display:flex; align-items:center; justify-content:center;
                        border:2px solid #fff;
                        animation: pulse-badge .6s ease infinite alternate;
                    "
                ></span>
            </button>

            {{-- Dropdown de notificações --}}
            <div
                x-show="open"
                @click.outside="open = false"
                x-transition:enter="transition ease-out duration-150"
                x-transition:enter-start="opacity-0 scale-95"
                x-transition:enter-end="opacity-100 scale-100"
                x-transition:leave="transition ease-in duration-100"
                x-transition:leave-start="opacity-100 scale-100"
                x-transition:leave-end="opacity-0 scale-95"
                style="
                    position:absolute; top:calc(100% + 10px); right:0; z-index:9999;
                    width:360px; background:#fff; border:1px solid #e5e7eb;
                    border-radius:14px; box-shadow:0 12px 40px rgba(0,0,0,.15);
                    overflow:hidden;
                "
            >
                {{-- Cabeçalho do dropdown --}}
                <div style="display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid #f1f5f9; background:#fafafa;">
                    <div style="display:flex; align-items:center; gap:7px;">
                        <i data-lucide="bell" style="width:14px;height:14px;color:#6366f1;"></i>
                        <span style="font-weight:800; font-size:.84rem; color:#111827;">Notificações</span>
                        <span x-show="unread > 0" x-text="unread + ' não lidas'"
                            style="padding:2px 7px; background:#ede9fe; color:#7c3aed; border-radius:99px; font-size:.66rem; font-weight:700;"></span>
                    </div>
                    <button @click="markAll()" x-show="unread > 0"
                        style="font-size:.72rem; color:#6366f1; font-weight:700; background:none; border:none; cursor:pointer;">
                        Marcar todas ✓
                    </button>
                </div>

                {{-- Lista de notificações --}}
                <div style="max-height:380px; overflow-y:auto;">
                    <template x-if="recent.length === 0">
                        <div style="padding:28px; text-align:center; color:#9ca3af; font-size:.82rem;">
                            <div style="font-size:1.6rem; margin-bottom:8px;">🔔</div>
                            Nenhuma notificação recente
                        </div>
                    </template>
                    <template x-for="n in recent" :key="n.id">
                        <a
                            :href="n.link || '#'"
                            @click="markOne(n)"
                            style="display:block; padding:12px 16px; border-bottom:1px solid #f8fafc; text-decoration:none; transition:.12s;"
                            :style="n.is_read ? '' : 'background:#fafbff;'"
                            @mouseover="$el.style.background='#f8fafc'"
                            @mouseout="$el.style.background=n.is_read ? '' : '#fafbff'"
                        >
                            <div style="display:flex; gap:10px; align-items:flex-start;">
                                {{-- Ícone colorido --}}
                                <div
                                    :style="`width:32px;height:32px;border-radius:8px;background:${n.color.bg};display:flex;align-items:center;justify-content:center;flex-shrink:0;`"
                                >
                                    <i :data-lucide="n.icon" :style="`width:14px;height:14px;color:${n.color.text};`"></i>
                                </div>
                                <div style="min-width:0; flex:1;">
                                    <div style="display:flex; justify-content:space-between; align-items:flex-start; gap:4px;">
                                        <span x-text="n.title"
                                            :style="`font-size:.78rem; font-weight:${n.is_read ? '600' : '800'}; color:#111827; white-space:normal; word-break:break-word;`"
                                        ></span>
                                        <span x-show="!n.is_read"
                                            style="width:7px;height:7px;background:#6366f1;border-radius:99px;flex-shrink:0;margin-top:4px;"></span>
                                    </div>
                                    <div x-text="n.message"
                                        style="font-size:.72rem; color:#6b7280; margin-top:2px; white-space:normal; word-break:break-word;"></div>
                                    <div x-text="n.time_ago"
                                        style="font-size:.67rem; color:#9ca3af; margin-top:4px;"></div>
                                </div>
                            </div>
                        </a>
                    </template>
                </div>

                {{-- Rodapé --}}
                <div style="padding:10px 16px; border-top:1px solid #f1f5f9; background:#fafafa; text-align:center;">
                    <a href="{{ route('admin.notifications.index') }}"
                        style="font-size:.76rem; font-weight:700; color:#6366f1; text-decoration:none;">
                        Ver todas as notificações →
                    </a>
                </div>
            </div>
        </div>
        {{-- ═══════════════════════════════════════════════════════════════════ --}}

        {{-- User Menu --}}
        <div class="dropdown" x-data="{ open: false }">
            <button class="flex gap-sm" style="align-items:center;cursor:pointer;background:none;border:none;" @click="open = !open">
                <div class="avatar">
                    {{ strtoupper(substr(auth()->user()->name ?? 'U', 0, 1)) }}
                </div>
                <div style="text-align:left;" x-show="true">
                    <div style="font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text);">
                        {{ auth()->user()->display_name ?? auth()->user()->name }}
                    </div>
                    <div style="font-size:var(--text-xs);color:var(--color-text-muted);">
                        {{ auth()->user()->roles->first()?->name ?? 'Usuário' }}
                    </div>
                </div>
                <i data-lucide="chevron-down" style="width:16px;height:16px;color:var(--color-text-muted);"></i>
            </button>

            <div class="dropdown-menu" x-show="open" @click.outside="open = false" x-transition>
                <a class="dropdown-item" href="{{ route('admin.settings.users.index') }}">
                    <i data-lucide="user" style="width:16px;height:16px;"></i>
                    Meu Perfil
                </a>
                <a class="dropdown-item" href="{{ route('admin.settings.index') }}">
                    <i data-lucide="settings" style="width:16px;height:16px;"></i>
                    Configurações
                </a>
                <div class="dropdown-divider"></div>
                <form method="POST" action="{{ route('logout') }}" id="form-logout">
                    @csrf
                    <button type="submit" class="dropdown-item" style="width:100%;border:none;background:none;font-family:var(--font-sans);cursor:pointer;">
                        <i data-lucide="log-out" style="width:16px;height:16px;"></i>
                        Sair
                    </button>
                </form>
            </div>
        </div>
    </div>
</header>

{{-- ═══ ESTILOS DO SINO ════════════════════════════════════════════════════════ --}}
<style>
@keyframes pulse-badge {
    from { transform: scale(1); }
    to   { transform: scale(1.2); }
}
.notif-bell-active { background: rgba(99,102,241,.1) !important; }
</style>

{{-- ═══ JAVASCRIPT DO SINO (Alpine) ══════════════════════════════════════════ --}}
<script>
function notifBell() {
    return {
        open:   false,
        unread: 0,
        recent: [],
        pollInterval: null,

        init() {
            this.poll();
            // Polling a cada 30 segundos
            this.pollInterval = setInterval(() => this.poll(), 30000);
        },

        async poll() {
            try {
                const r = await fetch('{{ route('admin.notifications.api.poll') }}', {
                    headers: { 'X-Requested-With': 'XMLHttpRequest' }
                });
                if (!r.ok) return;
                const data = await r.json();
                this.unread = data.unread;
                this.recent = data.recent;
                // Re-render ícones Lucide dinamicamente
                this.$nextTick(() => {
                    if (window.lucide) lucide.createIcons();
                });
            } catch (e) { /* silencia erros de rede */ }
        },

        toggle() {
            this.open = !this.open;
            if (this.open) this.poll();
        },

        async markOne(notif) {
            if (!notif.is_read) {
                notif.is_read = true;
                this.unread = Math.max(0, this.unread - 1);
                try {
                    await fetch(`/admin/notifications/${notif.id}/read`, {
                        method: 'PATCH',
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]')?.content,
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    });
                } catch (e) {}
            }
        },

        async markAll() {
            try {
                await fetch('{{ route('admin.notifications.read-all') }}', {
                    method: 'PATCH',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]')?.content,
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                });
                this.recent.forEach(n => n.is_read = true);
                this.unread = 0;
            } catch (e) {}
        }
    };
}
</script>