<div>
    <div id="kt_header" class="header header-fixed">

        <div class="container-fluid d-flex align-items-stretch justify-content-between">

            <div class="header-menu-wrapper header-menu-wrapper-left" id="kt_header_menu_wrapper">
            </div>


            <div class="topbar">

                <div class="dropdown" id="kt_quick_search_toggle">

                    <div class="topbar-item" data-toggle="dropdown" data-offset="10px,0px">
                        <div class="btn btn-icon btn-clean btn-lg btn-dropdown mr-1">
                            <span class="svg-icon svg-icon-xl svg-icon-primary">

                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <rect x="0" y="0" width="24" height="24" />
                                        <path d="M14.2928932,16.7071068 C13.9023689,16.3165825 13.9023689,15.6834175 14.2928932,15.2928932 C14.6834175,14.9023689 15.3165825,14.9023689 15.7071068,15.2928932 L19.7071068,19.2928932 C20.0976311,19.6834175 20.0976311,20.3165825 19.7071068,20.7071068 C19.3165825,21.0976311 18.6834175,21.0976311 18.2928932,20.7071068 L14.2928932,16.7071068 Z" fill="#000000" fill-rule="nonzero" opacity="0.3" />
                                        <path d="M11,16 C13.7614237,16 16,13.7614237 16,11 C16,8.23857625 13.7614237,6 11,6 C8.23857625,6 6,8.23857625 6,11 C6,13.7614237 8.23857625,16 11,16 Z M11,18 C7.13400675,18 4,14.8659932 4,11 C4,7.13400675 7.13400675,4 11,4 C14.8659932,4 18,7.13400675 18,11 C18,14.8659932 14.8659932,18 11,18 Z" fill="#000000" fill-rule="nonzero" />
                                    </g>
                                </svg>

                            </span>
                        </div>
                    </div>


                    <div class="dropdown-menu p-0 m-0 dropdown-menu-right dropdown-menu-anim-up dropdown-menu-lg" wire:ignore.self>
                        <div class="quick-search quick-search-dropdown" id="kt_quick_search_dropdown">

                            <form method="get" class="quick-search-form">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            <span class="svg-icon svg-icon-lg">

                                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                        <rect x="0" y="0" width="24" height="24" />
                                                        <path d="M14.2928932,16.7071068 C13.9023689,16.3165825 13.9023689,15.6834175 14.2928932,15.2928932 C14.6834175,14.9023689 15.3165825,14.9023689 15.7071068,15.2928932 L19.7071068,19.2928932 C20.0976311,19.6834175 20.0976311,20.3165825 19.7071068,20.7071068 C19.3165825,21.0976311 18.6834175,21.0976311 18.2928932,20.7071068 L14.2928932,16.7071068 Z" fill="#000000" fill-rule="nonzero" opacity="0.3" />
                                                        <path d="M11,16 C13.7614237,16 16,13.7614237 16,11 C16,8.23857625 13.7614237,6 11,6 C8.23857625,6 6,8.23857625 6,11 C6,13.7614237 8.23857625,16 11,16 Z M11,18 C7.13400675,18 4,14.8659932 4,11 C4,7.13400675 7.13400675,4 11,4 C14.8659932,4 18,7.13400675 18,11 C18,14.8659932 14.8659932,18 11,18 Z" fill="#000000" fill-rule="nonzero" />
                                                    </g>
                                                </svg>

                                            </span>
                                        </span>
                                    </div>
                                    <input type="text" wire:model="search" class="form-control" placeholder="Search..." />
                                    <div class="input-group-append">
                                        <span class="input-group-text">
                                            <i class="quick-search-close ki ki-close icon-sm text-muted"></i>
                                        </span>
                                    </div>
                                </div>
                            </form>










                            <div class="quick-search-wrappe scroll" data-scroll="true" data-height="325" data-mobile-height="200" style="height: 200px; overflow: auto;">
                                <div class="quick-search-result">
                                    <!--begin::Message-->
                                    @if(count($users)&& count($donors) && count($drives))
                                    <div class="text-muted ">
                                        No record found
                                    </div>
                                    @endif
                                    <!--end::Message-->

                                    <!--begin::Section-->
                                    @if(count($drives))
                                    <div class="font-size-sm text-primary font-weight-bolder text-uppercase mb-2">
                                        Drives
                                    </div>
                                    <div class="mb-10">

                                        @foreach ($drives as $drive)
                                        <div class="d-flex align-items-center flex-grow-1 mb-2">

                                            <div class="d-flex flex-column ml-3 mt-2 mb-2">
                                                <a @if(auth()->user()->currentTeam->id==1) href="{{url('/engineers/drives/'.$drive->id)}}" @else href="{{url('/frontdesk/drives/'.$drive->id)}}"@endif class="font-weight-bold text-dark text-hover-primary">
                                                    {{$drive->iaea_no}}
                                                </a>
                                                <span class="font-size-sm font-weight-bold text-muted">
                                                    by {{$drive->user->first_name}} {{$drive->user->last_name}}
                                                </span>
                                            </div>
                                        </div>
                                        @endforeach


                                    </div>
                                    @endif

                                    @if(count($donors))
                                    <div class="font-size-sm text-primary font-weight-bolder text-uppercase mb-2">
                                        Donors
                                    </div>
                                    <div class="mb-10">

                                        @foreach ($donors as $donor)
                                        <div class="d-flex align-items-center flex-grow-1 mb-2">
                                            
                                            <div class="d-flex flex-column ml-3 mt-2 mb-2">
                                                <a @if(auth()->user()->currentTeam->id==1) href="{{url('/engineers/donors/'.$donor->id)}}" @else href="{{url('/frontdesk/donors/'.$donor->id)}}"@endif class="font-weight-bold text-dark text-hover-primary">
                                                    {{$donor->name}}
                                                </a>
                                                <span class="font-size-sm font-weight-bold text-muted">
                                                    Model No: {{$donor->model_no}} | Serial No: {{$donor->serial_no}}
                                                </span>
                                            </div>
                                        </div>
                                        @endforeach


                                    </div>
                                    @endif



                                    <!--end::Section-->

                                    <!--begin::Section-->
                                    @if(count($users))

                                    <div class="font-size-sm text-primary font-weight-bolder text-uppercase mb-2">
                                        Users
                                    </div>
                                    <div class="mb-10">

                                        @foreach ($users as $user)
                                        <div class="d-flex align-items-center flex-grow-1 mb-2">
                                            <div class="symbol symbol-30  flex-shrink-0">
                                                <div class="symbol-label" style="background-image:url('{{$user->profile_photo_url}}')"></div>
                                            </div>
                                            <div class="d-flex flex-column ml-3 mt-2 mb-2">
                                                <a href="#" class="font-weight-bold text-dark text-hover-primary">
                                                    {{$user->first_name}} {{$user->last_name}}
                                                </a>
                                                <span class="font-size-sm font-weight-bold text-muted">
                                                    {{$user->currentTeam->name}}
                                                </span>
                                            </div>
                                        </div>
                                        @endforeach

                                    </div>

                                    @endif

                                </div>
                            </div>





                        </div>
                    </div>

                </div>


                <div class="dropdown">

                    <div class="topbar-item" data-toggle="dropdown" data-offset="10px,0px">
                        <div class="btn btn-icon btn-clean btn-dropdown btn-lg mr-1 @if(count($notifications)!=0)pulse pulse-primary @endif">
                            <span class="svg-icon svg-icon-xl svg-icon-primary">

                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <rect x="0" y="0" width="24" height="24" />
                                        <path d="M2.56066017,10.6819805 L4.68198052,8.56066017 C5.26776695,7.97487373 6.21751442,7.97487373 6.80330086,8.56066017 L8.9246212,10.6819805 C9.51040764,11.267767 9.51040764,12.2175144 8.9246212,12.8033009 L6.80330086,14.9246212 C6.21751442,15.5104076 5.26776695,15.5104076 4.68198052,14.9246212 L2.56066017,12.8033009 C1.97487373,12.2175144 1.97487373,11.267767 2.56066017,10.6819805 Z M14.5606602,10.6819805 L16.6819805,8.56066017 C17.267767,7.97487373 18.2175144,7.97487373 18.8033009,8.56066017 L20.9246212,10.6819805 C21.5104076,11.267767 21.5104076,12.2175144 20.9246212,12.8033009 L18.8033009,14.9246212 C18.2175144,15.5104076 17.267767,15.5104076 16.6819805,14.9246212 L14.5606602,12.8033009 C13.9748737,12.2175144 13.9748737,11.267767 14.5606602,10.6819805 Z" fill="#000000" opacity="0.3" />
                                        <path d="M8.56066017,16.6819805 L10.6819805,14.5606602 C11.267767,13.9748737 12.2175144,13.9748737 12.8033009,14.5606602 L14.9246212,16.6819805 C15.5104076,17.267767 15.5104076,18.2175144 14.9246212,18.8033009 L12.8033009,20.9246212 C12.2175144,21.5104076 11.267767,21.5104076 10.6819805,20.9246212 L8.56066017,18.8033009 C7.97487373,18.2175144 7.97487373,17.267767 8.56066017,16.6819805 Z M8.56066017,4.68198052 L10.6819805,2.56066017 C11.267767,1.97487373 12.2175144,1.97487373 12.8033009,2.56066017 L14.9246212,4.68198052 C15.5104076,5.26776695 15.5104076,6.21751442 14.9246212,6.80330086 L12.8033009,8.9246212 C12.2175144,9.51040764 11.267767,9.51040764 10.6819805,8.9246212 L8.56066017,6.80330086 C7.97487373,6.21751442 7.97487373,5.26776695 8.56066017,4.68198052 Z" fill="#000000" />
                                    </g>
                                </svg>

                            </span>
                            <span class="pulse-ring"></span>
                        </div>
                    </div>


                    <div class="dropdown-menu p-0 m-0 dropdown-menu-right dropdown-menu-anim-up dropdown-menu-lg">
                        <form>

                            <div class="d-flex flex-column pt-12 bgi-size-cover bgi-no-repeat rounded-top" style="background-image: url({{asset("public/theme/html/demo1/dist/assets/media/misc/bg-1.jpg")}})">

                                <h4 class="d-flex flex-center rounded-top">
                                    <span class="text-white">User Notifications</span>
                                    @if(count($notifications)!=0)
                                    <span class="btn btn-text btn-success btn-sm font-weight-bold btn-font-md ml-2">{{count($notifications)}} new</span>
                                    @endif
                                </h4>

                            </div>
                            <div class="list list-hover">

                                @forelse ($notifications as $notification)
                                @if($notification->user_id==0)
                                <div class="d-flex align-items-center list-item card-spacer-x py-2 px-5" wire:click="open({{$notification->id}})">

                                    <div class="d-flex flex-column">
                                        <span class="font-weight-bold text-danger">Alert!</span>
                                        <span class="text-danger">{{$notification->message}}</span>
                                    </div>
                                </div>
                                @else
                                <div class="d-flex align-items-center list-item card-spacer-x py-2 px-5" wire:click="open({{$notification->id}})">
                                    <div>
                                        <img class="rounded-circle px-2" src="{{ Auth::user()->profile_photo_url }}" alt="{{ Auth::user()->first_name }}">
                                    </div>
                                    <div class="d-flex flex-column">
                                        <span class="font-weight-bold">{{$notification->from_user->first_name.' ' .$notification->from_user->last_name}}</span>
                                        <span>{{$notification->message}}</span>
                                    </div>
                                </div>
                                @endif

                                @empty
                                <div class="d-flex align-items-center list-item card-spacer-x py-2 px-5">
                                    No New Notifications
                                </div>
                                @endforelse

                            </div>
                            @if(count($notifications)!=0)
                            <div class="d-flex flex-center pt-7">
                                <a href="#" class="btn btn-light-primary font-weight-bold text-center">See All</a>
                            </div>
                            @endif

                        </form>
                    </div>

                </div>



                <div class="topbar-item">
                    <div class="btn btn-icon btn-icon-mobile w-auto btn-clean d-flex align-items-center btn-lg px-2" id="kt_quick_user_toggle">
                        <span class="text-muted font-weight-bold font-size-base d-none d-md-inline mr-1">Hi,</span>
                        <span class="text-dark-50 font-weight-bolder font-size-base d-none d-md-inline mr-3">{{auth()->user()->first_name}}</span>
                        <span class="symbol symbol-lg-35 symbol-25 symbol-light-success  rounded-full ">

                            <img src="{{ Auth::user()->profile_photo_url }}" alt="{{ Auth::user()->first_name }}">

                        </span>
                    </div>
                </div>

            </div>

        </div>

    </div>
</div>
