@php
<<<<<<< HEAD
    $setting = App\Models\SiteSetting::find(1);
@endphp

<header>
    <div class="topbar d-flex align-items-center">
        <nav class="navbar navbar-expand gap-3">
            <div class="mobile-toggle-menu"><i class='bx bx-menu'></i></div>
            @php
                $id = Auth::user()->id;
                $profileData = App\Models\User::find($id);
            @endphp

            <div class="top-menu ms-auto">
                <ul class="navbar-nav align-items-center gap-1">

                    <!-- Bible Verse Scroll -->
             <li class="nav-item  d-none d-md-flex align-items-center">
    <div class="scrolling-verse" id="bibleVerseContainer">
        <marquee id="bibleVerseMarquee">{{ $setting->bible_verse }}</marquee>
    </div>
    <a href="javascript:;" class="ms-2" onclick="toggleBibleVerse()">
        <i class='bx bx-hide fs-4' id="toggleBibleIcon"></i>
    </a>
</li>


                    @if (Auth::user()->can('moon.view'))
                    <li class="nav-item dark-mode d-none d-sm-flex">
                        <a class="nav-link dark-mode-icon" href="javascript:;"><i class='bx bx-moon'></i></a>
                    </li>
                    @endif

                    @php
                        $ncount = Auth::user()->unreadNotifications()->count();
                    @endphp
                    <li class="nav-item dropdown dropdown-large">
                        <a class="nav-link dropdown-toggle dropdown-toggle-nocaret position-relative" href="#" data-bs-toggle="dropdown">
                            <span class="alert-count" id="notification-count">{{ $ncount }}</span>
                            <i class='bx bx-bell'></i>
                        </a>
                        <div class="dropdown-menu dropdown-menu-end">
                            <a href="javascript:;">
                                <div class="msg-header">
                                    <p class="msg-header-title">Notifications</p>
                                </div>
                            </a>

                            @php
                                $user = Auth::user();
                            @endphp
<div class="header-notifications-list">
    @forelse ($user->notifications->whereNull('read_at') as $notification) <!-- Filter unread notifications -->
        @php
            // Retrieve the user who triggered the notification (if available)
            $triggeredBy = !empty($notification->data['triggered_by']) 
                ? \App\Models\User::find($notification->data['triggered_by']) 
                : null;
        @endphp

        <a class="dropdown-item" 
           href="{{ url($notification->data['url'] ?? '#') }}" 
           onclick="markNotificationRead('{{ $notification->id }}')">
            <div class="d-flex align-items-center">
                <div class="notify" style="background: transparent; border: none;">
                    @if($triggeredBy && !empty($triggeredBy->photo))
                        <img src="{{ url('upload/admin_images/' . $triggeredBy->photo) }}" 
                             alt="User Image" class="rounded-circle" style="width: 30px; height: 30px; object-fit: cover; border: none;">
                    @else
                        <img src="{{ url('upload/no_image.jpg') }}" alt="No Image" 
                             class="rounded-circle" style="width: 30px; height: 30px; object-fit: cover; border: none;">
                    @endif
                </div>
                <div class="flex-grow-1">
                    <h6 class="msg-name" style="font-weight: bold;"> <!-- Make the unread notifications bold -->
                        {{ $notification->data['message'] ?? 'No Message' }} 
                        <span class="msg-time float-end"> 
                            {{ Carbon\Carbon::parse($notification->created_at)->diffForHumans() }} 
                        </span>
                    </h6>
                </div>
            </div>
        </a>
    @empty
       <p style="text-align: center; padding: 20px; background-color: #f8f9fa; color: #6c757d; font-weight: bold; border-radius: 8px; margin: 0;">
    No unread notifications
</p>

    @endforelse
</div>







                            <a href="javascript:;">
                                <div class="text-center msg-footer">
                                    <button class="btn btn-primary w-100">View All Notifications</button>
                                </div>
                            </a>
                        </div>
                    </li>

                    <li class="nav-item dropdown dropdown-large">
                        <div class="dropdown-menu dropdown-menu-end">
                            <div class="header-message-list"></div>
                        </div>
                    </li>
                </ul>
            </div>

            <div class="user-box dropdown px-3">
                <a class="d-flex align-items-center nav-link dropdown-toggle gap-3 dropdown-toggle-nocaret" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                    <img src="{{ (!empty($profileData->photo)) ? url('upload/admin_images/'.$profileData->photo) : url('upload/no_image.jpg') }}" class="user-img" alt="user avatar">
                    <div class="user-info">
                        <p class="user-name mb-0">{{ $profileData->name }}</p>
                        <p class="designattion mb-0">{{ $profileData->email }}</p>
                    </div>
                </a>
                <ul class="dropdown-menu dropdown-menu-end">
                    @if (Auth::user()->can('user_profile.view'))
                        <li><a class="dropdown-item d-flex align-items-center" href="{{ route('admin.profile') }}"><i class="bx bx-user fs-5"></i><span>Profile</span></a></li>
                    @endif

                    @if (Auth::user()->can('change_password.view'))
                        <li><a class="dropdown-item d-flex align-items-center" href="{{ route('admin.change.password') }}"><i class="bx bx-key fs-5"></i><span>Change Password</span></a></li>
                    @endif

                    <li>
                        <div class="dropdown-divider mb-0"></div>
                    </li>
                    @if (Auth::user()->can('logout.view'))
                        <li><a class="dropdown-item d-flex align-items-center" href="{{ url('admin/logout') }}"><i class="bx bx-log-out-circle"></i><span>Logout</span></a></li>
                    @endif
                </ul>
            </div>
        </nav>
    </div>
</header>

<script>
   function markNotificationRead(notificationId){
        fetch('/chmerp/public/mark-notification-as-read/'+notificationId,{
            method: 'POST',
            headers: {
                'Content-Type' : 'application/josn',
                'X-CSRF-TOKEN' : '{{ csrf_token() }}'
            },
            body: JSON.stringify({})
        })
        .then(response => response.json())
        .then(data => {
            document.getElementById('notification-count').textContent = data.count;
        })
        .catch(error => {
            console.log('Error',error)
        });
    }
</script>

<style>
    .scrolling-verse marquee {
        font-size: 16px;
        color: #333;
        background-color: #f8f9fa;
        padding: 10px 20px;
        border-radius: 5px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        font-weight: bold;
        border-left: 5px solid #007bff;
    }
</style>

<script>
    function toggleBibleVerse() {
        let container = document.getElementById("bibleVerseContainer");
        let icon = document.getElementById("toggleBibleIcon");

        if (container.style.display === "none") {
            // Re-create the marquee to restart scrolling
            container.style.display = "block";
            let newMarquee = document.createElement("marquee");
            newMarquee.id = "bibleVerseMarquee";
            newMarquee.textContent = `{{ $setting->bible_verse }}`; // Use dynamic content
            container.innerHTML = ""; // Clear existing content
            container.appendChild(newMarquee); // Append new marquee

            icon.classList.replace("bx-show", "bx-hide"); // Change icon
        } else {
            container.style.display = "none";
            icon.classList.replace("bx-hide", "bx-show"); // Change icon
        }
    }
=======
    $hour = now()->hour;
    $greeting = $hour < 12 ? 'Good morning' : ($hour < 17 ? 'Good afternoon' : 'Good evening');
    $hasMessaging = Auth::user()->can('chatbox.view') || Auth::user()->can('sms.send');
@endphp

<header class="chm-topbar topbar">
    <nav class="chm-topbar-inner navbar navbar-expand w-100">
        {{-- Left --}}
        <div class="chm-topbar-start d-flex align-items-center gap-2">
            <button type="button" class="chm-topbar-icon-btn mobile-toggle-menu d-lg-none" aria-label="Open menu">
                <i class="bx bx-menu"></i>
            </button>
            <div class="chm-topbar-greeting d-none d-md-block">
                <span class="chm-topbar-greeting-text">{{ $greeting }},</span>
                <span class="chm-topbar-greeting-name">{{ $profileData->name ?? Auth::user()->name }}</span>
            </div>
        </div>

        {{-- Center — verse strip --}}
        <div class="chm-topbar-center d-none d-xl-flex align-items-center">
            <div class="chm-topbar-verse" id="bibleVerseContainer">
                <i class="bx bx-book-open"></i>
                <marquee id="bibleVerseMarquee">{{ $setting->bible_verse }}</marquee>
            </div>
            <button type="button" class="chm-topbar-icon-btn chm-topbar-verse-toggle" onclick="toggleBibleVerse()" aria-label="Toggle verse">
                <i class="bx bx-hide" id="toggleBibleIcon"></i>
            </button>
        </div>

        {{-- Right — actions + profile --}}
        <div class="chm-topbar-end ms-auto d-flex align-items-center gap-2">
            <div class="chm-topbar-actions">
                @if ($hasMessaging)
                    <div class="dropdown">
                        <button type="button"
                                class="chm-topbar-icon-btn dropdown-toggle-no-caret position-relative"
                                data-bs-toggle="dropdown"
                                aria-label="Messages"
                                title="Messages">
                            <i class="bx bx-message-dots"></i>
                            @if(($unreadMessageCount ?? 0) > 0)
                                <span id="chm-chat-unread-badge" class="chm-topbar-badge">{{ ($unreadMessageCount ?? 0) > 9 ? '9+' : $unreadMessageCount }}</span>
                            @else
                                <span id="chm-chat-unread-badge" class="chm-topbar-badge d-none">0</span>
                            @endif
                        </button>
                        <div class="dropdown-menu dropdown-menu-end chm-topbar-panel chm-messages-panel">
                            <div class="chm-topbar-panel-header">
                                <h6>Messages</h6>
                                <span class="text-muted small">Communication hub</span>
                            </div>
                            <div class="chm-topbar-panel-body">
                                @can('chatbox.view')
                                    <a href="{{ route('chat.index') }}" class="chm-topbar-panel-item">
                                        <span class="chm-topbar-panel-icon"><i class="bx bx-chat"></i></span>
                                        <span class="chm-topbar-panel-text">
                                            <strong>Chat Box</strong>
                                            <small>Team conversations</small>
                                        </span>
                                        <i class="bx bx-chevron-right chm-topbar-panel-arrow"></i>
                                    </a>
                                @endcan
                                @can('sms.send')
                                    <a href="{{ route('sms.form') }}" class="chm-topbar-panel-item">
                                        <span class="chm-topbar-panel-icon"><i class="bx bx-message-square-dots"></i></span>
                                        <span class="chm-topbar-panel-text">
                                            <strong>Send SMS</strong>
                                            <small>Bulk & individual SMS</small>
                                        </span>
                                        <i class="bx bx-chevron-right chm-topbar-panel-arrow"></i>
                                    </a>
                                @endcan
                            </div>
                        </div>
                    </div>
                @endif

                {{-- Notifications --}}
                <div class="dropdown">
                    <button type="button"
                            class="chm-topbar-icon-btn dropdown-toggle-no-caret position-relative"
                            data-bs-toggle="dropdown"
                            aria-label="Notifications"
                            title="Notifications">
                        <i class="bx bx-bell"></i>
                        @if($ncount > 0)
                            <span class="chm-topbar-badge" id="notification-count">{{ $ncount > 9 ? '9+' : $ncount }}</span>
                        @else
                            <span class="chm-topbar-badge d-none" id="notification-count">0</span>
                        @endif
                    </button>
                    <div class="dropdown-menu dropdown-menu-end chm-topbar-panel chm-notifications-panel">
                        <div class="chm-topbar-panel-header">
                            <div>
                                <h6>Notifications</h6>
                                @if($ncount > 0)
                                    <span class="chm-topbar-badge-inline">{{ $ncount }} unread</span>
                                @else
                                    <span class="text-muted small">All caught up</span>
                                @endif
                            </div>
                        </div>
                        <div class="chm-topbar-panel-body chm-notifications-list">
                            @forelse ($headerNotifications as $notification)
                                @php
                                    $triggeredBy = !empty($notification->data['triggered_by'])
                                        ? ($triggeredUsers[$notification->data['triggered_by']] ?? null)
                                        : null;
                                @endphp
                                <a class="chm-notification-item"
                                   href="{{ url($notification->data['url'] ?? '#') }}"
                                   onclick="markNotificationRead('{{ $notification->id }}')">
                                    @if($triggeredBy && !empty($triggeredBy->photo))
                                        <img src="{{ url('upload/admin_images/' . $triggeredBy->photo) }}" alt="">
                                    @else
                                        <img src="{{ url('upload/no_image.jpg') }}" alt="">
                                    @endif
                                    <div class="flex-grow-1 min-w-0">
                                        <div class="msg">{{ $notification->data['message'] ?? 'No Message' }}</div>
                                        <div class="time">{{ Carbon\Carbon::parse($notification->created_at)->diffForHumans() }}</div>
                                    </div>
                                </a>
                            @empty
                                <div class="chm-notifications-empty">
                                    <i class="fa-regular fa-bell-slash"></i>
                                    <div>No new notifications</div>
                                    <small class="text-muted">You're all caught up</small>
                                </div>
                            @endforelse
                        </div>
                        @if($ncount > 0)
                            <div class="chm-topbar-panel-footer">
                                <a href="{{ route('admin.dashboard') }}" class="btn btn-sm btn-outline-primary w-100">
                                    Go to dashboard
                                </a>
                            </div>
                        @endif
                    </div>
                </div>

                {{-- Pin page --}}
                <button type="button" class="chm-topbar-icon-btn" id="chmFavoriteToggle" aria-label="Pin page" title="Pin page">
                    <i class="fa-regular fa-star"></i>
                </button>

                {{-- Preferences --}}
                <button type="button"
                        class="chm-topbar-icon-btn"
                        data-bs-toggle="offcanvas"
                        data-bs-target="#chmPreferencesPanel"
                        aria-label="Preferences"
                        title="Preferences">
                    <i class="bx bx-cog"></i>
                </button>
            </div>

            <div class="chm-topbar-divider d-none d-md-block"></div>

            {{-- User profile --}}
            <div class="dropdown chm-topbar-user">
                <button type="button"
                        class="chm-topbar-user-btn dropdown-toggle-no-caret"
                        data-bs-toggle="dropdown"
                        aria-expanded="false">
                    <img src="{{ (!empty($profileData->photo)) ? url('upload/admin_images/'.$profileData->photo) : url('upload/no_image.jpg') }}"
                         class="chm-topbar-avatar" alt="">
                    <span class="chm-topbar-user-meta d-none d-lg-block">
                        <span class="chm-topbar-user-name">{{ $profileData->name }}</span>
                        <span class="chm-topbar-user-role">{{ ucfirst(str_replace('-', ' ', Auth::user()->role ?? 'user')) }}</span>
                    </span>
                    <i class="bx bx-chevron-down chm-topbar-user-chevron d-none d-lg-block"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end chm-topbar-user-menu">
                    <li class="chm-topbar-user-menu-header d-lg-none">
                        <strong>{{ $profileData->name }}</strong>
                        <small class="d-block text-muted">{{ $profileData->email }}</small>
                    </li>
                    @if (Auth::user()->can('user_profile.view'))
                        <li><a class="dropdown-item" href="{{ route('admin.profile') }}"><i class="bx bx-user"></i> My Profile</a></li>
                    @endif
                    @if (Auth::user()->can('change_password.view'))
                        <li><a class="dropdown-item" href="{{ route('admin.change.password') }}"><i class="bx bx-key"></i> Change Password</a></li>
                    @endif
                    <li><hr class="dropdown-divider"></li>
                    <li class="dropdown-header px-3 py-1 small text-muted">Quick theme</li>
                    <li>
                        <div class="chm-topbar-theme-row px-3 pb-2">
                            <button type="button" class="chm-theme-option" data-chm-theme-option="light" title="Light"><i class="bx bx-sun"></i></button>
                            <button type="button" class="chm-theme-option" data-chm-theme-option="dark" title="Dark"><i class="bx bx-moon"></i></button>
                            <button type="button" class="chm-theme-option" data-chm-theme-option="system" title="System"><i class="bx bx-laptop"></i></button>
                        </div>
                    </li>
                    <li><hr class="dropdown-divider"></li>
                    @if (Auth::user()->can('logout.view'))
                        <li><a class="dropdown-item text-danger" href="{{ url('admin/logout') }}"><i class="bx bx-log-out-circle"></i> Logout</a></li>
                    @endif
                </ul>
            </div>
        </div>
    </nav>
</header>

@include('partials.admin.preferences-panel')

<script>
function markNotificationRead(notificationId) {
    var url = @json(route('admin.notification.read', ['notification' => '__NOTIFICATION_ID__']));
    fetch(url.replace('__NOTIFICATION_ID__', notificationId), {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({})
    })
    .then(function (response) { return response.json(); })
    .then(function (data) {
        var badge = document.getElementById('notification-count');
        if (!badge) return;
        badge.textContent = data.count > 9 ? '9+' : data.count;
        badge.classList.toggle('d-none', data.count <= 0);
    })
    .catch(function (error) {
        console.log('Error', error);
    });
}

function toggleBibleVerse() {
    var container = document.getElementById('bibleVerseContainer');
    var icon = document.getElementById('toggleBibleIcon');
    if (!container || !icon) return;
    if (container.style.display === 'none') {
        container.style.display = 'flex';
        var newMarquee = document.createElement('marquee');
        newMarquee.id = 'bibleVerseMarquee';
        newMarquee.textContent = @json($setting->bible_verse);
        container.innerHTML = '<i class="bx bx-book-open"></i>';
        container.appendChild(newMarquee);
        icon.classList.replace('bx-show', 'bx-hide');
    } else {
        container.style.display = 'none';
        icon.classList.replace('bx-hide', 'bx-show');
    }
}
>>>>>>> origin/main
</script>