@php
    $now = \Morilog\Jalali\Jalalian::now();
    $weekday = $now->format('l');
    $dateFormatted = $now->format('d-m-Y');
    
    $user = Auth::user();
    $avatarIcon = '👤'; // default
    if ($user) {
        try {
            $user->load('roles');
            $roles = $user->roles->pluck('name')->toArray();
            if (in_array('سوپر ادمین', $roles) || in_array('مدیریت', $roles) || in_array('ادمین', $roles)) {
                $avatarIcon = '👔';
            } elseif (in_array('کارشناس فروش', $roles)) {
                $avatarIcon = '💼';
            } elseif (in_array('کارشناس خرید', $roles)) {
                $avatarIcon = '🛒';
            }
        } catch (\Exception $e) {
            $avatarIcon = '👤';
        }
    }
@endphp

<header class="sticky top-0 z-20 glass border-b border-slate-800/60 backdrop-blur px-4 py-3">
    <div class="flex items-center justify-between">
        <div class="flex items-center gap-3">
            <div class="flex items-center gap-2 text-sm">
                <span class="text-slate-300">امروز : {{ $weekday }} | {{ $dateFormatted }}</span>
                @php
                    $user = Auth::user();
                    $chatRoute = 'admin.chat.index';
                    if ($user) {
                        if ($user->hasRole(['سوپر ادمین', 'مدیریت'])) {
                            $chatRoute = 'admin.chat.index';
                        } elseif ($user->hasRole('کارشناس خرید')) {
                            $chatRoute = 'purchase.chat.index';
                        } elseif ($user->hasRole('کارشناس فروش')) {
                            $chatRoute = 'sales.chat.index';
                        }
                    }
                @endphp
                <a href="{{ route($chatRoute) }}" class="mr-2 px-4 py-2 rounded-xl bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-semibold shadow-lg hover:shadow-xl transition-all duration-200 text-sm flex items-center gap-2 border border-blue-400/30" title="چت آنلاین">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                    </svg>
                    <span>چت آنلاین</span>
                    <span id="chat-unread-badge" class="hidden px-2 py-0.5 rounded-full bg-red-500 text-white text-xs font-bold">0</span>
                </a>
            </div>
        </div>

        <div class="flex items-center gap-3">
            <!-- Notifications Bell -->
            <div class="relative">
                <button id="notificationButton" type="button" class="relative flex items-center justify-center w-10 h-10 text-slate-300 hover:text-white cursor-pointer rounded-lg hover:bg-white/5">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" 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>
                    <span id="notificationBadge" class="hidden absolute -top-0.5 -right-0.5 w-4 h-4 bg-red-500 rounded-full border-2 border-slate-900 shadow-lg"></span>
                    <span id="notificationBadgeCount" class="hidden absolute -top-1 -right-1 w-5 h-5 flex items-center justify-center text-[10px] font-bold text-white bg-red-500 rounded-full border-2 border-slate-900 shadow-lg" style="width: 20px; height: 20px;"></span>
                </button>
                
                <!-- Notifications Dropdown -->
                <div id="notificationDropdown" class="hidden absolute left-0 mt-3 w-[400px] origin-top-left rounded-2xl glass border border-slate-700/50 shadow-2xl ring-1 ring-black/20 z-50 max-h-[500px] overflow-hidden flex flex-col" style="width: 400px;">
                    <!-- Header -->
                    <div class="px-5 py-4 border-b border-slate-700/50 bg-slate-800/30 backdrop-blur-sm">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" 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>
                                <h3 class="text-base font-bold text-white">اعلان‌ها</h3>
                            </div>
                            <button id="markAllReadButton" class="text-xs text-blue-400 hover:text-blue-300 transition-colors duration-200 flex items-center gap-1 px-2 py-1 rounded-lg hover:bg-slate-700/50">
                                <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                                </svg>
                                <span>خواندن همه</span>
                            </button>
                        </div>
                    </div>
                    
                    <!-- Notifications List -->
                    <div id="notificationList" class="overflow-y-auto flex-1 bg-slate-800/20">
                        <div class="p-6 text-center text-slate-400 text-sm">
                            <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-slate-700/50 mb-3">
                                <svg class="w-6 h-6 animate-spin" fill="none" viewBox="0 0 24 24">
                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                </svg>
                            </div>
                            <div>در حال بارگذاری...</div>
                        </div>
                    </div>
                    
                    <!-- Empty State -->
                    <div id="notificationEmpty" class="hidden p-8 text-center">
                        <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-slate-700/30 mb-4">
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" 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>
                        </div>
                        <p class="text-slate-400 text-sm font-medium">هیچ اعلانی وجود ندارد</p>
                    </div>
                </div>
            </div>
            
            <!-- User Menu -->
            <div class="relative">
            <button id="userMenuButton" type="button" class="flex items-center gap-3 px-3 py-2 text-slate-300 hover:text-white transition-colors cursor-pointer rounded-lg hover:bg-white/5">
                <!-- Avatar -->
                <div class="w-8 h-8 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center text-white text-lg flex-shrink-0">
                    {{ $avatarIcon ?? '👤' }}
                </div>
                <!-- Name -->
                @if(isset($user) && $user)
                    <div class="flex items-center gap-1.5">
                        <span class="text-sm font-medium">{{ $user->first_name ?? '' }}</span>
                        <span class="text-sm text-slate-400">{{ $user->last_name ?? '' }}</span>
                    </div>
                @endif
                <!-- Arrow -->
                <svg class="w-4 h-4 transition-transform flex-shrink-0" id="userMenuArrow" 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"></path>
                </svg>
            </button>
            
            <!-- Dropdown Menu -->
            @if(isset($user) && $user)
            <div id="userMenuDropdown" class="hidden absolute left-0 mt-2 w-48 origin-top-left rounded-xl bg-slate-800 border border-slate-700 shadow-lg ring-1 ring-black ring-opacity-5 z-50">
                <div class="py-1">
                    <a href="{{ isset($user) && $user ? ($user->profile_url ?? '#') : '#' }}" class="block px-4 py-2 text-sm text-slate-300 hover:bg-slate-700 hover:text-white transition-colors">
                        <div class="flex items-center gap-2">
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" 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>
                            <span>پروفایل کاربری</span>
                        </div>
                    </a>
                    <form method="POST" action="{{ route('logout') }}" class="block">
                        @csrf
                        <button type="submit" class="w-full text-right px-4 py-2 text-sm text-red-400 hover:bg-slate-700 hover:text-red-300 transition-colors">
                            <div class="flex items-center gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" 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>
                                <span>خروج</span>
                            </div>
                        </button>
                    </form>
                </div>
            </div>
            @endif
            </div>
        </div>
    </div>
    @stack('header-extra')
</header>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // User Menu
    const userMenuButton = document.getElementById('userMenuButton');
    const userMenuDropdown = document.getElementById('userMenuDropdown');
    const userMenuArrow = document.getElementById('userMenuArrow');
    
    if (userMenuButton && userMenuDropdown) {
        userMenuButton.addEventListener('click', function(e) {
            e.stopPropagation();
            const isHidden = userMenuDropdown.classList.contains('hidden');
            
            if (isHidden) {
                userMenuDropdown.classList.remove('hidden');
                if (userMenuArrow) {
                    userMenuArrow.style.transform = 'rotate(180deg)';
                }
            } else {
                userMenuDropdown.classList.add('hidden');
                if (userMenuArrow) {
                    userMenuArrow.style.transform = 'rotate(0deg)';
                }
            }
        });
        
        document.addEventListener('click', function(e) {
            if (!userMenuButton.contains(e.target) && !userMenuDropdown.contains(e.target)) {
                userMenuDropdown.classList.add('hidden');
                if (userMenuArrow) {
                    userMenuArrow.style.transform = 'rotate(0deg)';
                }
            }
        });
    }
    
    // Notifications
    const notificationButton = document.getElementById('notificationButton');
    const notificationDropdown = document.getElementById('notificationDropdown');
    const notificationBadge = document.getElementById('notificationBadge');
    const notificationList = document.getElementById('notificationList');
    const notificationEmpty = document.getElementById('notificationEmpty');
    const markAllReadButton = document.getElementById('markAllReadButton');
    
    // Load notifications
    function loadNotifications() {
        fetch('{{ route("api.notifications.index") }}', {
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Accept': 'application/json',
            }
        })
        .then(response => response.json())
        .then(data => {
            updateBadge(data.unread_count);
            renderNotifications(data.notifications);
        })
        .catch(error => {
            console.error('Error loading notifications:', error);
        });
    }
    
    // Update badge
    function updateBadge(count) {
        const notificationBadgeCount = document.getElementById('notificationBadgeCount');
        if (count > 0) {
            // Show count badge
            if (notificationBadgeCount) {
                notificationBadgeCount.textContent = count > 99 ? '99+' : count;
                notificationBadgeCount.classList.remove('hidden');
            }
            // Hide dot badge when count is shown
            notificationBadge.classList.add('hidden');
        } else {
            // Hide both badges
            notificationBadge.classList.add('hidden');
            if (notificationBadgeCount) {
                notificationBadgeCount.classList.add('hidden');
            }
        }
    }
    
    // Render notifications
    function renderNotifications(notifications) {
        if (notifications.length === 0) {
            notificationList.classList.add('hidden');
            notificationEmpty.classList.remove('hidden');
            return;
        }
        
        notificationList.classList.remove('hidden');
        notificationEmpty.classList.add('hidden');
        
        notificationList.innerHTML = notifications.map(notif => {
            const date = new Date(notif.created_at);
            const timeAgo = getTimeAgo(date);
            const readClass = notif.read ? 'bg-slate-800/20' : 'bg-blue-500/10 border-r-2 border-blue-500';
            const iconBg = notif.read ? 'bg-slate-700/50' : 'bg-blue-500/20';
            const iconColor = notif.read ? 'text-slate-400' : 'text-blue-400';
            
            return `
                <div class="notification-item px-5 py-4 border-b border-slate-700/30 hover:bg-slate-700/40 cursor-pointer transition-all duration-200 ${readClass}" data-id="${notif.id}" data-read="${notif.read}">
                    <div class="flex items-start gap-4">
                        <div class="flex-shrink-0 w-10 h-10 rounded-full ${iconBg} flex items-center justify-center ${iconColor}">
                            ${!notif.read ? `
                                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                                </svg>
                            ` : `
                                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                            `}
                        </div>
                        <div class="flex-1 min-w-0">
                            <div class="flex items-start justify-between gap-2">
                                <div class="flex-1">
                                    <div class="text-sm font-semibold text-white mb-1">${escapeHtml(notif.title)}</div>
                                    <div class="text-xs text-slate-300 leading-relaxed mb-2">${escapeHtml(notif.message)}</div>
                                    <div class="flex items-center gap-3 text-xs text-slate-500">
                                        <span class="flex items-center gap-1">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                                            </svg>
                                            ${timeAgo}
                                        </span>
                                    </div>
                                </div>
                                ${!notif.read ? '<div class="flex-shrink-0 w-2 h-2 bg-blue-500 rounded-full mt-1.5 animate-pulse"></div>' : ''}
                            </div>
                        </div>
                    </div>
                </div>
            `;
        }).join('');
        
        // Add click handlers
        notificationList.querySelectorAll('.notification-item').forEach(item => {
            item.addEventListener('click', function() {
                const id = this.getAttribute('data-id');
                const isRead = this.getAttribute('data-read') === 'true';
                
                if (!isRead) {
                    markAsRead(id);
                }
            });
        });
    }
    
    // Mark as read
    function markAsRead(id) {
        fetch(`/api/notifications/${id}/read`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Accept': 'application/json',
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                loadNotifications();
            }
        })
        .catch(error => {
            console.error('Error marking as read:', error);
        });
    }
    
    // Mark all as read
    if (markAllReadButton) {
        markAllReadButton.addEventListener('click', function(e) {
            e.stopPropagation();
            fetch('{{ route("api.notifications.mark-all-read") }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Accept': 'application/json',
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    loadNotifications();
                }
            })
            .catch(error => {
                console.error('Error marking all as read:', error);
            });
        });
    }
    
    // Toggle notification dropdown
    if (notificationButton && notificationDropdown) {
        notificationButton.addEventListener('click', function(e) {
            e.stopPropagation();
            const isHidden = notificationDropdown.classList.contains('hidden');
            
            if (isHidden) {
                notificationDropdown.classList.remove('hidden');
                loadNotifications();
            } else {
                notificationDropdown.classList.add('hidden');
            }
        });
        
        document.addEventListener('click', function(e) {
            if (!notificationButton.contains(e.target) && !notificationDropdown.contains(e.target)) {
                notificationDropdown.classList.add('hidden');
            }
        });
    }
    
    // Load unread count on page load
    fetch('{{ route("api.notifications.unread-count") }}', {
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json',
        }
    })
    .then(response => response.json())
    .then(data => {
        updateBadge(data.count);
    })
    .catch(error => {
        console.error('Error loading unread count:', error);
    });
    
    // Refresh notifications every 30 seconds
    setInterval(loadNotifications, 30000);
    
    // Helper function
    function escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }
    
    // Get time ago in Persian
    function getTimeAgo(date) {
        const now = new Date();
        const diff = Math.floor((now - date) / 1000); // difference in seconds
        
        if (diff < 60) return 'همین الان';
        if (diff < 3600) return `${Math.floor(diff / 60)} دقیقه پیش`;
        if (diff < 86400) return `${Math.floor(diff / 3600)} ساعت پیش`;
        if (diff < 604800) return `${Math.floor(diff / 86400)} روز پیش`;
        
        return date.toLocaleDateString('fa-IR', { year: 'numeric', month: 'long', day: 'numeric' });
    }
});
</script>