@php
    if(isset($hparams)){

        $heading_page_title = $hparams['heading_page_title']??'Dashboard';
        $notice_show = $hparams['notice_show']??true;

    } else {
        $heading_page_title = 'Dashboard';
        $notice_show = true;
    }
    $user = auth()->user();
    $notifications = $user->notifications()->where('read', 0)->orderBy('created_at', 'DESC')->get();
@endphp
<header class="header sidebar-gutters">

    <div class="header-item overflow-hidden">
        <button type="button" class="btn btn--lg btn--square btn-side-toggler btn-side">
            <span class="ico">
                @php include(public_path('dash/img/ico-burger.svg')) @endphp
            </span>
        </button>

        @if(isset($hparams) && isset($hparams['btn_back_url']))

            <a href="{{ $hparams['btn_back_url']  }}" class="btn btn--sm btn--light-2">
                <span class="ico"><img src="{{ asset('dash/img/ico-return.svg') }}"></span>
                <span class="hidden-576">Go Back</span>
            </a>

        @endif
        <h4 class="heading page-title">{{ $heading_page_title }}</h4>
    </div>
    <div class="header-item">
        @if($notice_show && $notifications->count())
        <div class="dropdown" data-dropdown="dropdown">
            <a href="#" class="btn btn--lg btn-drp-notif btn--square" data-role="button">
            <span class="ico">
                @php include(public_path('dash/img/ico-notification.svg')) @endphp
            </span>
            </a>
            <div class="dropdown__body dropdown-notifications" data-role="dropdown">
                <div class="modal-dropdown">
                    <div class="modal-dropdown--header">
                        <p class="modal-dropdown--title text--sm font-500">
                            Notifications
                        </p>
                    </div>
                    <div class="modal-dropdown--body">
                        <ul class="list-notifications">
                            @foreach($notifications as $notification)

                                <li class="item-notification">
                                    <div href="#" class="btn-notification">
                                        <div class="notification-header">


                                            <span class="noti-ico ico">
                                                @switch($notification->type)
                                                    @case('positive')
                                                        <img src="{{ asset('dash/img/ico-positive-notification.svg') }}">
                                                    @break
                                                    @case('negative')
                                                        <img src="{{ asset('dash/img/ico-negative-notification.svg') }}">
                                                    @break
                                                    @case('informative')
                                                        <img src="{{ asset('dash/img/ico-info.svg') }}">
                                                    @break
                                                    @default
                                                        <img src="{{ asset('dash/img/ico-info.svg') }}">
                                                @endswitch
                                            </span>

                                            <p class="noti-title">{{ $notification->title }}</p>
                                            <span class="noti-time">{{ $notification->getTimeElapsedAttribute() }}</span>
                                        </div>
                                        <div class="notification-body">
                                            <p class="noti-description">{{ $notification->message }}</p>
                                        </div>
                                    </div>
                                </li>

                            @endforeach

                        </ul>
                    </div>
                    <form action="{{ route('dashboard.notice-mark-read') }}" class="general-ajax-submit modal-dropdown--footer" method="POST">
                        @csrf
                        <button type="submit" href="#" class="btn btn--sm btn--light radius-1">
                            <p>Mark all as read</p>
                        </button>
                        {{--
                        <a href="#" class="btn btn--sm btn--light radius-1">
                            <p>Mark all as read</p>
                        </a>--}}
                    </form>
                </div>
            </div>
        </div>
        <hr class="small-separator">
        @endif
        <a href="#" class="btn user-dropdown" data-role="button">
          <div>
            <div class=" tw-w-16 tw-h-16 tw-rounded-full tw-overflow-hidden">
                <img src="https://ui-avatars.com/api/?name={{Auth()->user()->name }}" class=" tw-w-full tw-h-full" />
               </div>
          </div>
            <div class="user-dropdown--info">
                <p class="user-title--name text--md">{{ Auth()->user()->name }}</p>
                <p class="user-desk--mail text--sm font-400">{{ Auth()->user()->email }}</p>
            </div>
        </a>
    </div>
</header>