@php
    $adminNotifications = auth()->user()->unreadNotifications()->take(10)->get();
    $unreadCount = auth()->user()->unreadNotifications()->count();
@endphp

<div class="admin-header">
    <h1 class="page-title">
        @yield('page-title', 'Admin Panel')
        <span class="page-title-jp">/ @yield('page-title-jp', '管理パネル')</span>
    </h1>
    
    <div class="header-actions" x-data="{ notifOpen: false, userOpen: false }">
        <!-- Notifications (Alpine controlled) -->
        <div class="relative">
            <button 
                @click="notifOpen = !notifOpen; userOpen = false; $event.stopPropagation()"
                class="header-btn notification-btn" 
                id="notificationBtn" 
                title="Notifications"
            >
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
                </svg>
                @if ($unreadCount > 0)
                    <span class="notification-badge">{{ $unreadCount }}</span>
                @endif
            </button>

            <div 
                x-show="notifOpen" 
                @click.away="notifOpen = false"
                class="dropdown-menu notification-dropdown" 
                id="notificationDropdown"
            >
                <div class="dropdown-header">
                    <strong>Notifications</strong>
                    <span class="badge-small">{{ $unreadCount }} new</span>
                </div>
                <div id="notificationItemsList">
                    @forelse ($adminNotifications as $notification)
                        <div 
                            class="notification-item unread" 
                            data-id="{{ $notification->id }}" 
                            data-url="{{ $notification->data['url'] ?? '' }}"
                            @click="notifOpen = false; window.markNotificationRead('{{ $notification->id }}', '{{ $notification->data['url'] ?? '' }}', '{{ csrf_token() }}')"
                        >
                            <div class="notification-icon">{{ $notification->data['icon'] ?? '📝' }}</div>
                            <div class="notification-content">
                                <div class="notification-title">{{ $notification->data['title'] ?? '' }}</div>
                                <div class="notification-desc" style="font-size:11px;color:#64748b;margin-bottom:2px;">{{ $notification->data['body'] ?? '' }}</div>
                                <div class="notification-time">{{ $notification->created_at->diffForHumans() }}</div>
                            </div>
                        </div>
                    @empty
                        <div class="notification-empty">No new notifications</div>
                    @endforelse
                </div>
                <div class="dropdown-footer" style="display:flex;justify-content:space-between;padding:12px 16px;">
                    <a 
                        href="#" 
                        @click.prevent="notifOpen = false; window.markAllNotificationsRead('{{ csrf_token() }}')" 
                        style="font-size:12px;color:#64748b;text-decoration:none;font-weight:600;"
                    >Mark all read</a>
                    <a href="{{ route('admin.notifications.index') }}" style="font-size:12px;color:#3b82f6;text-decoration:none;font-weight:600;">Broadcast tool</a>
                </div>
            </div>
        </div>

        <!-- User Menu (Alpine controlled) -->
        <div class="relative">
            <button 
                @click="userOpen = !userOpen; notifOpen = false; $event.stopPropagation()"
                class="header-btn user-btn" 
                id="userMenuBtn" 
                title="Profile"
            >
                <div class="user-avatar">{{ strtoupper(substr(auth()->user()->name, 0, 1)) }}</div>
                <span class="user-name">{{ auth()->user()->name }}</span>
                <svg class="dropdown-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                </svg>
            </button>

            <div 
                x-show="userOpen" 
                @click.away="userOpen = false"
                class="dropdown-menu" 
                id="userDropdown"
            >
                <a href="{{ route('admin.profile.show') }}" class="dropdown-item" @click="userOpen = false">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="18" height="18">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                    </svg>
                    Profile
                </a>
                <a href="{{ route('admin.profile.edit') }}" class="dropdown-item" @click="userOpen = false">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="18" height="18">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                    </svg>
                    Settings
                </a>
                <div class="dropdown-divider"></div>
                <form method="POST" action="{{ route('logout') }}" style="margin: 0;">
                    @csrf
                    <button type="submit" class="dropdown-item logout-item" @click="userOpen = false">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="18" height="18">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
                        </svg>
                        Logout
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>