@php
    $auth = Auth::user();
@endphp

<!-- dashboard-header part -->
<div class="dashboard-header">
    <div class="d-flex gap-3 align-items-center">
        <img class="menu-icon" src="{{ asset('assets/img/dashboard/menu.png') }}" alt="">
        <h2>@yield('head_title')</h2>
    </div>
    <div class="d-flex gap-3 align-items-center">

        <div class="notification-div">
            @if (authAdminUser()->can('notification.list'))
            <button class="bg-transparent p-0 dropdown-toggle" type="button" id="notificationBal-btn" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                <div class="notification-img notification-bal position-relative">
                    <img src="{{ asset('assets/img/dashboard/notification.png') }}" alt="">
                    <div class="notification-img-icon d-none" id="received-notification"></div>
                </div>
            </button>
            @endif
            <div class="dropdown-menu" aria-labelledby="notificationBal-btn">
                <div class="px-2 pt-2 w-100">
                    <div class="p-2 mb-2">
                        <h3 class="m-0 main-title">Notification</h3>
                    </div>
                    <div class="notification-header d-flex align-items-center justify-content-between">
                        <div class="admin-tab-container">
                            <ul class="nav nav-pills d-flex align-items-center">
                                <li class="nav-item">
                                    <a class="nav-link text-14 header-notification hnd active" data-type="all"
                                        data-bs-toggle="pill" href="#all-noti-tab">All</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link  header-notification hnd text-14" data-type="unread"
                                        data-bs-toggle="pill" href="#unread-noti-tab">Unread</a>
                                </li>
                            </ul>
                        </div>
                        @if (authAdminUser()->can('notification.read'))
                            <a class="text-14 d-block mark-all-notification none-mark min-h-100-read" href="#" class="d-flex align-items-center" id="markAllNotificationHDR">
                                <img src="{{ asset('assets/img/mark-all-check.png') }}" alt="" class="mark-check-img">
                                <strong class="text-black">Read All</strong>
                            </a>
                        @endif
                    </div>
                </div>
                <div class="p-2">
                    <div class="tab-content">
                        <div class="tab-pane active position-relative" id="all-noti-tab">
                            <ul class="p-0 m-0 w-100 d-flex flex-column last-border-none scroll-ul"
                                id="headerNotificationList"></ul>
                        </div>
                        <div class="tab-pane fade" id="unread-noti-tab">
                            <ul class="p-0 m-0 w-100 d-flex flex-column last-border-none scroll-ul"
                                id="headerUnreadList"></ul>
                        </div>
                    </div>
                    @if (authAdminUser()->can('notification.list'))
                        <a href="{{ route('admin.notification.index') }}" class="noti-more-btn d-block text-center mt-2">
                            More&nbsp;Notification
                        </a>
                    @endif
                </div>
            </div>
        </div>

        <div class="dropdown tattoo-dropdown">
            <div class="profile-img" id="dropdownMenuButton1" data-bs-toggle="dropdown"
                aria-expanded="false">
                <img src="{{ (!empty($auth->profile)) ? asset($auth->profile) : '' }}" alt="user img" class="profile-img" onerror="this.src='{{ asset('assets') }}/img/dashboard/user-image.png'">
            </div>
            <div class="dropdown-menu">
                <div class="profile-image-flex">
                    <div class="profile-img">
                    <img src="{{ (!empty($auth->profile)) ? asset($auth->profile) : '' }}" alt="user img" class="profile-img" onerror="this.src='{{ asset('assets') }}/img/dashboard/user-image.png'">
                    </div>
                    <div class="profile-image-flex-text">
                        <h3>{{ $auth->name }}</h3>
                        <p>{{ $auth->email }}</p>
                    </div>
                </div>
                <a class="dropdown-item" href="{{ route('admin.setting.index') }}"> <img
                        src="{{ asset('assets/img/dashboard/user-drop.png') }}" alt="">Profile</a>
                <a class="dropdown-item logout" href="{{ route('admin.logout') }}"><img
                        src="{{ asset('assets/img/dashboard/logout.png') }}" alt=""> Logout</a>
            </div>
        </div>

    </div>
</div>