<header class="header-section">
    @push('style')
        <style>
            .notification-link {
                display: flex;
                align-items: center;
                gap: 2px;
                font-size: 16px;
                font-weight: bold;
                color: #333;
            }

            .pulse {
                position: relative;
                width: 15px;
                height: 15px;
                background: #e5383b;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                overflow: hidden;
                animation: pulse 2s ease-in-out infinite;
            }

            .pulse span {
                position: absolute;
                width: 100%;
                height: 100%;
                background: inherit;
                border-radius: inherit;
                opacity: 0.8;
                animation: pulse 2s ease-in-out infinite;
            }

            .pulse i {
                font-size: 10px;
                color: #fff;
                z-index: 1;
                animation: shake 2s linear infinite;
            }

            /* Pulse animation */
            @keyframes pulse {
                0% {
                    transform: scale(1);
                    opacity: 0.8;
                }

                100% {
                    transform: scale(3);
                    opacity: 0;
                }
            }

            /* Shake animation for the icon */
            @keyframes shake {

                0%,
                100% {
                    transform: rotate(15deg);
                }

                50% {
                    transform: rotate(-15deg);
                }
            }
        </style>
    @endpush
    <div class="container">
        <div class="header-wrapper">
            <div class="logo">
                <a href="{{ route('home') }}">
                    <img src="{{ getImage(getFilePath('logoIcon') . '/logo.png') }}" alt="logo">
                </a>
            </div>
            <ul class="menu">
                <li>
                    <a href="{{ route('user.home') }}">@lang('Dashboard')</a>
                </li>

                {{-- <li class="menu-item-has-children">
                    <a href="javascript:void(0)">@lang('Deposit')</a>
                    <ul class="submenu">
                        <li>
                            <a href="{{ route('user.deposit.index') }}">@lang('Deposit Money')</a>
                        </li>
                        <li>
                            <a href="{{ route('user.deposit.history') }}">@lang('Deposit History')</a>
                        </li>
                    </ul>
                </li> --}}

                {{-- <li class="menu-item-has-children">
                    <a href="javascript:void(0)">@lang('Withdraw')</a>
                    <ul class="submenu">
                        <li>
                            <a href="{{ route('user.withdraw') }}">@lang('Withdraw Money')</a>
                        </li>
                        <li>
                            <a href="{{ route('user.withdraw.history') }}">@lang('Withdraw History')</a>
                        </li>
                    </ul>
                </li> --}}

                <li>
                    <a href="{{ route('plan') }}">@lang('Plan')</a>
                </li>

                <li class="menu-item-has-children">
                    <a href="javascript:void(0)">@lang('Donations')</a>
                    <ul class="submenu">
                        <li>
                            <a href="{{ route('user.donations.received') }}">@lang('Received Donations')</a>
                        </li>

                        <li>
                            <a href="{{ route('user.donations.paid') }}">@lang('Given Donations')</a>
                        </li>
                    </ul>
                </li>

                <li>
                    <a href="{{ route('user.transactions') }}">@lang('Transactions')</a>
                </li>
                <li class="menu-item-has-children">
                    <a href="javascript:void(0)">@lang('My Networks')</a>
                    <ul class="submenu">
                        <li>
                            <a href="{{ route('user.referral.log') }}">@lang('My Networks')</a>
                        </li>
                        <li>
                            <a href="{{ route('user.network.tree') }}">@lang('My Network Tree')</a>
                        </li>

                        <li>
                            <a href="{{ route('user.network.report') }}">@lang('My Network Report')</a>
                        </li>
                        <li>
                            <a href="{{ route('user.reward.report') }}">@lang('My Reward Report')</a>
                        </li>

                        <li>
                            <a href="{{ route('user.active.member') }}">@lang('Active Members')</a>
                        </li>
                        <li>
                            <a href="{{ route('user.partial-active.member') }}">@lang('Partially Active Members')</a>
                        </li>
                        <li>
                            <a href="{{ route('user.inactive.member') }}">@lang('Inactive Members')</a>
                        </li>
                        <li>
                            <a href="{{ route('user.reward.member') }}">@lang('Reward Members')</a>
                        </li>
                        </ul>
                </li>

                {{-- <li class="menu-item-has-children">
                    <a href="javascript:void(0)">@lang('My Network')</a>
                    <ul class="submenu">
                        <li>
                            <a href="{{ route('user.referral.log') }}">@lang('My Networks')</a>
                        </li>

                        <li>
                            <a href="{{ route('user.referral.commissions') }}">@lang('Referrals Commissions')</a>
                        </li>

                        <li>
                            <a href="{{ route('user.level.commissions') }}">@lang('Level Commissions')</a>
                        </li>
                    </ul>
                </li> --}}

                <li>
                    <a href="{{ route('user.download.pdf') }}">@lang('Download File')</a>
                </li>
                <li>
                    <a href="{{ route('user.notification') }}" class="notification-link">
                        @lang('Notification')
                        @if ($unreadNotifications)
                            <div class="pulse">
                                <i class="shake">
                                </i>
                            </div>
                        @endif
                    </a>
                </li>
                <li class="menu-item-has-children">
                    <a href="javascript:void(0)">Account</a>
                    {{-- <div class="navbar-user">
                        <div class="d-flex jstify-content-between">
                            <span class="navbar-user__thumb" style="margin-top: -5px">
                                <img src="{{ getImage(getFilePath('adminProfile') . '/' . auth()->user()->image, getFileSize('adminProfile')) }}"
                                    alt="image"
                                    style="border-radius: 50%; height: 55px; width: 55px;">
                            </span>
                            <div style="margin-top: 8px">
                                <span class="">
                                    <span class="" style="color: #fff; margin:10px 0px 10px 10px">{{ auth()->user()->username }}</span>
                                </span>
                                <span class="icon " style="color: #fff"><i class="las la-chevron-circle-down"></i></span>
                            </div>
                        </div>


                    </div> --}}


                    <ul class="submenu">
                        <li>
                            <a href="{{ route('user.profile.setting') }}">@lang('Profile Setting')</a>
                        </li>
                        <li>
                            <a href="{{ route('user.kyc.data') }}">@lang('KYC Data')</a>
                        </li>
                        <li><a href="{{ route('user.download-app') }}">App Link</a></li>
                        {{-- @if ($general->balance_transfer == 1)
                            <li>
                                <a href="{{ route('user.balance.transfer') }}">@lang('Balance Transfer')</a>
                            </li>
                        @endif --}}

                        @if ($general->epin_status == 1)
                            <li>
                                <a href="{{ route('user.epin.recharge') }}">@lang('E-Pin Recharge')</a>
                            </li>
                            <li>
                                <a href="{{ route('user.recharge.log') }}">@lang('Recharge Log')</a>
                            </li>
                        @endif

                        <li>
                            <a href="{{ route('user.coupon') }}">@lang('Subscription Code')</a>
                        </li>

                        <li>
                            <a href="{{ route('user.change.password') }}">@lang('Change Password')</a>
                        </li>

                        <li>
                            <a href="{{ route('ticket.index') }}">@lang('Support Ticket')</a>
                        </li>
                        {{--
                        <li>
                            <a href="{{ route('user.twofactor') }}">@lang('2FA Security')</a>
                        </li> --}}

                        {{-- <li>
                            <a href="{{ route('user.logout') }}">@lang('Logout')</a>
                        </li> --}}
                    </ul>
                </li>
                <li>
                    {{-- <a href="{{ route('user.home') }}"
                        >@lang('Dashboard')</a> --}}
                    <a class="custom-button theme hover-cl-light d-md-flex ms-2"
                        href="{{ route('user.logout') }}">@lang('Logout')</a>
                </li>
            </ul>


            <div class="d-flex">
                @if ($unreadNotifications)
                    <div class="pulse d-inline-block d-md-none">
                        <i class="shake">
                        </i>
                    </div>
                @endif
                <div class="header-bar ml-2 ml-md-4">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>

        </div>
    </div>
    </div>
</header>
@push('script')
    {{-- <script type="module" src="https://cdn.jsdelivr.net/npm/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://cdn.jsdelivr.net/npm/ionicons@5.5.2/dist/ionicons/ionicons.js"></script> --}}
@endpush
