@php
    $user = auth()->user();
    $user_notifications = $user->notifications;
    $unread_notification_count = $user_notifications->where('status', 0)->count()
@endphp

<nav class="navbar navbar-light navbar-expand pt-3">
    <div class="container-fluid"><a class="navbar-brand" href="#">
            <h3 class="page-heading">@yield('page-title')</h3>
            @yield('welcome_message')
        </a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span
                class="visually-hidden">Toggle navigation</span><span
                class="navbar-toggler-icon"></span></button>
        <div class="collapse navbar-collapse" id="navcol-1" x-data="main()">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item me-3 my-auto"><a class="nav-link" href="{{ route('user_help') }}"><svg
                            xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
                            fill="currentColor" viewBox="0 0 16 16"
                            class="bi bi-question-circle fs-5">
                            <path
                                d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z">
                            </path>
                            <path
                                d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z">
                            </path>
                        </svg></a></li>
                <li class="nav-item me-3 my-auto mobile-hidden">
                    <div class="nav-item dropdown">
                        <a aria-expanded="false" data-bs-toggle="dropdown" href="#">
                            <span class="badge rounded-pill bg-primary notification-badge">{{ $unread_notification_count }}</span>
                                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-bell nav-icon fs-5">
                                <path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zM8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z"></path>
                            </svg>
                        </a>
                        <div class="dropdown-menu" style="transform: translateX(-75%);width: 20rem;padding: 0.8rem;">
                            @if ($user_notifications->count() > 0)
                                @foreach ($user_notifications->slice(0, 5) as $user_notification)
                                    <!-- Start: Media -->
                                    <div class="media-div mb-3">
                                        <img class="rounded-circle img-fluid" src="{{ asset('assets/img/favvy.png') }}" width="35px" />
                                        <div class="media-div-body">
                                            <h6 class="text-truncate mb-0"><a href="{{ route('user_show_notification', $user_notification->id) }}">{{ $user_notification->subject }}</a></h6>
                                            <p class="text-truncate mb-0 msg w-100">View Detail...</p>
                                        </div>
                                    </div>
                                @endforeach
                                <hr>
                                <a class="text-decoration-none" href="{{ route('user_notifications') }}">More Notifications
                                    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-arrow-right ms-1">
                                        <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z">
                                        </path>
                                    </svg>
                                </a>
                            @else
                                <div>
                                    <p>No notifications yet.</p>
                                </div>
                            @endif
                        </div>
                    </div>
                </li>
                <li class="nav-item my-auto me-3" x-init="checkDarkMode()"><svg
                        xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
                        fill="currentColor" viewBox="0 0 16 16" class="bi bi-sun fs-5"
                        x-on:click="switcher()" :class="show ? 'd-none' : 'd-block'">
                        <path
                            d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z">
                        </path>
                    </svg><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
                        fill="currentColor" viewBox="0 0 16 16" class="bi bi-moon fs-5"
                        x-on:click="switcher()" :class="show ? 'd-block' : 'd-none'">
                        <path
                            d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278zM4.858 1.311A7.269 7.269 0 0 0 1.025 7.71c0 4.02 3.279 7.276 7.319 7.276a7.316 7.316 0 0 0 5.205-2.162c-.337.042-.68.063-1.029.063-4.61 0-8.343-3.714-8.343-8.29 0-1.167.242-2.278.681-3.286z">
                        </path>
                    </svg></li>
                <li class="nav-item mobile-hidden">
                    <div class="nav-item dropdown"><a aria-expanded="false" data-bs-toggle="dropdown"
                            data-bs-auto-close="outside" href="#" data-display="static"
                            aria-haspopup="true"><img class="rounded-circle img-fluid" width="40px"
                                alt="profile-image" src="{{ $user->profile_picture_path(true) }}"></a>
                        <div class="dropdown-menu dropdown-menu-start"
                            style="transform: translateX(-75%);">
                            <h6 class="dropdown-header">Profile &amp; Settings</h6><a
                                class="dropdown-item" href="{{ route('user_profile') }}">Profile</a><a
                                class="dropdown-item" href="{{ route('user_settings') }}">Settings</a>
                            <div class="dropdown-divider"></div>
                            <form action="{{ route('logout') }}" method="post">
                                @csrf
                                <button type="submit" class="dropdown-item">Sign Out</button>
                            </form>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</nav>