@if (Auth::check())
     <header id="page-topbar">
         <div class="layout-width">
             <div class="navbar-header">
                 <div class="d-flex">
                     <!-- LOGO -->
                     <div class="navbar-brand-box horizontal-logo">
                         {{-- <a href="javascript:void(0)" class="logo logo-dark">
                             <span class="logo-sm">
                                 <img src="{{ asset('backend/template/images/logo/logo.png') }}" alt=""
                                     class="admin-logo">
                             </span>
                             <span class="logo-lg">
                                 <img src="{{ asset('backend/template/images/logo/logo.png') }}" alt=""
                                     class="admin-logo">
                             </span>
                         </a> --}}

                         {{-- <a href="javascript:void(0)" class="logo logo-light">
                             <span class="logo-sm">
                                 <img src="{{ asset('backend/template/images/logo/white-logo.png') }}" alt=""
                                     class="admin-logo">
                             </span>
                             <span class="logo-lg">
                                 <img src="{{ asset('backend/template/images/logo/white-logo.png') }}" alt=""
                                     class="admin-logo">
                             </span>
                         </a> --}}
                     </div>

                     <button type="button" class="btn btn-sm px-3 fs-16 header-item vertical-menu-btn topnav-hamburger "
                         id="topnav-hamburger-icon">
                         <span class="hamburger-icon">
                             <span></span>
                             <span></span>
                             <span></span>
                         </span>
                     </button>

                     <!-- App Search-->
                     {{-- <form class="app-search d-none d-md-block">
                          <div class="position-relative">
                              <input type="text" class="form-control" placeholder="Search..." autocomplete="off"
                                  id="search-options" value="">
                              <span class="bx bx-search search-widget-icon"></span>
                              <span class="bx bxs-x-circle search-widget-icon search-widget-icon-close d-none"
                                  id="search-close-options"></span>
                          </div>
                          <div class="dropdown-menu dropdown-menu-lg" id="search-dropdown">
                              <div data-simplebar style="max-height: 320px;">
                                  <a href="javascript:void(0);" class="dropdown-item notify-item">
                                      <span>Dashboard</span>
                                  </a>
                              </div>
                          </div>
                      </form> --}}
                     <div class="d-flex align-items-center justify-content-lg-start">
                         <h4 class="text-white mb-0">Dashboard</h4>
                     </div>
                 </div>

                 <div class="d-flex align-items-center">

                     <div class="dropdown d-md-none topbar-head-dropdown header-item">
                         <button type="button" sc class="btn btn-icon btn-topbar  btn-ghost-secondary rounded-circle"
                             id="page-header-search-dropdown" data-bs-toggle="dropdown" aria-haspopup="true"
                             aria-expanded="false">
                             <i class="bx bx-search fs-22"></i>
                         </button>
                         <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end p-0"
                             aria-labelledby="page-header-search-dropdown">
                             <form class="p-3">
                                 <div class="form-group m-0">
                                     <div class="input-group">
                                         <input type="text" class="form-control" placeholder="Search ..."
                                             aria-label="Recipient's username">
                                         <button class="btn btn-primary" type="submit"><i
                                                 class="bx bx-search"></i></button>
                                     </div>
                                 </div>
                             </form>
                         </div>
                     </div>
                     {{-- <div class="ms-1 header-item d-none d-sm-flex">
                          <button type="button" class="btn btn-icon btn-topbar  btn-ghost-secondary rounded-circle"
                              data-toggle="fullscreen">
                              <i class='bx bx-fullscreen fs-22'></i>
                          </button>
                      </div>

                      <div class="ms-1 header-item d-none d-sm-flex">
                          <button type="button"
                              class="btn btn-icon btn-topbar  btn-ghost-secondary rounded-circle light-dark-mode">
                              <i class='bx bx-moon fs-22'></i>
                          </button>
                      </div> --}}
                     @php
                         $total_count = $noti_enquiry->count() + $noti_job_application->count();
                         $job_applications = Auth::user()->can('readapplication', \App\Models\JobApplication::class);
                         $enquiryMenu = Auth::user()->can('read', \App\Models\Contact::class);
                     @endphp
                     @if ($job_applications || $enquiryMenu)
                         <div class="dropdown topbar-head-dropdown ms-1 header-item" id="notificationDropdown">
                             <div class="dropdown notification-dropdown">

                                 <button type="button"
                                     class="btn btn-icon btn-topbar btn-ghost-secondary rounded-circle border rounded-5"
                                     id="page-header-notifications-dropdown" data-bs-toggle="dropdown"
                                     data-bs-auto-close="outside" aria-expanded="false">

                                     <img src="{{ asset('backend/template/images/sidebar/notification.svg') }}"
                                         alt="">

                                     <span
                                         class="position-absolute topbar-badge fs-10 translate-middle rounded-pill bg-danger header-notification-badge">
                                     </span>
                                 </button>

                                 <div class="dropdown-menu dropdown-menu-end p-0 notification-dropdown-menu">

                                     <div class="notification-modal">

                                         <div class="modal-header">
                                             <div>
                                                 <h3 class="mb-0">Notifications</h3>
                                                 <p class="mb-0">Manage all your notification</p>
                                             </div>

                                             <button type="button" class="btn-close opacity-100 shadow-none"
                                                 data-bs-toggle="dropdown">
                                             </button>
                                         </div>

                                         <div class="modal-body">

                                             <div
                                                 class="d-flex flex-row justify-content-between align-items-center mb-1">
                                                 <button type="button" class="button-green p-2 px-3 view-btn-all">
                                                     View All Notification
                                                     <img src="{{ asset('assets/images/icon/right-arrow .svg') }}"
                                                         alt="">
                                                 </button>

                                                 <button type="button" class="button-outline-green p-2 px-3 mark-btn">
                                                     <img src="{{ asset('backend/template/images/svg/marked.svg') }}"
                                                         alt="">
                                                     Mark all as read
                                                 </button>
                                             </div>
                                             <div class="modal-body" data-simplebar style="max-height:200px;">
                                                 <div class="notify mt-3 pb-3 border-bottom">

                                                     <img class="person"
                                                         src="{{ asset('backend/template/images/svg/person-img.svg') }}"
                                                         alt="">

                                                     <div class="d-flex flex-column gap-1">

                                                         <div
                                                             class="d-flex flex-row align-items-center justify-content-between gap-2">

                                                             <div class="d-flex flex-row gap-2 align-items-center">
                                                                 <img src="{{ asset('backend/template/images/svg/red-dot.svg') }}"
                                                                     alt="">
                                                                 <h6 class="mb-0">Low Stock Alert</h6>
                                                             </div>

                                                             <span class="text-title">12 min ago</span>
                                                         </div>

                                                         <p class="mb-0 secondary-text">
                                                             Lorem Ipsum dolor sit amet, consectetuer adipiscingelit.
                                                             Duis tellus.
                                                         </p>
                                                     </div>
                                                 </div>
                                                 <div class="notify mt-3 pb-3 border-bottom">

                                                     <img class="person"
                                                         src="{{ asset('backend/template/images/svg/person-img.svg') }}"
                                                         alt="">

                                                     <div class="d-flex flex-column gap-1">

                                                         <div
                                                             class="d-flex flex-row align-items-center justify-content-between gap-2">

                                                             <div class="d-flex flex-row gap-2 align-items-center">
                                                                 <img src="{{ asset('backend/template/images/svg/red-dot.svg') }}"
                                                                     alt="">
                                                                 <h6 class="mb-0">Low Stock Alert</h6>
                                                             </div>

                                                             <span class="text-title">12 min ago</span>
                                                         </div>

                                                         <p class="mb-0 secondary-text">
                                                             Lorem Ipsum dolor sit amet, consectetuer adipiscingelit.
                                                             Duis tellus.
                                                         </p>
                                                     </div>
                                                 </div>
                                                 <div class="notify mt-3 pb-3 border-bottom">

                                                     <img class="person"
                                                         src="{{ asset('backend/template/images/svg/person-img.svg') }}"
                                                         alt="">

                                                     <div class="d-flex flex-column gap-1">

                                                         <div
                                                             class="d-flex flex-row align-items-center justify-content-between gap-2">

                                                             <div class="d-flex flex-row gap-2 align-items-center">
                                                                 <img src="{{ asset('backend/template/images/svg/red-dot.svg') }}"
                                                                     alt="">
                                                                 <h6 class="mb-0">Low Stock Alert</h6>
                                                             </div>

                                                             <span class="text-title">12 min ago</span>
                                                         </div>

                                                         <p class="mb-0 secondary-text">
                                                             Lorem Ipsum dolor sit amet, consectetuer adipiscingelit.
                                                             Duis tellus.
                                                         </p>
                                                     </div>
                                                 </div>
                                                 <div class="notify mt-3 pb-3 border-bottom">

                                                     <img class="person"
                                                         src="{{ asset('backend/template/images/svg/person-img.svg') }}"
                                                         alt="">

                                                     <div class="d-flex flex-column gap-1">

                                                         <div
                                                             class="d-flex flex-row align-items-center justify-content-between gap-2">

                                                             <div class="d-flex flex-row gap-2 align-items-center">
                                                                 <img src="{{ asset('backend/template/images/svg/red-dot.svg') }}"
                                                                     alt="">
                                                                 <h6 class="mb-0">Low Stock Alert</h6>
                                                             </div>

                                                             <span class="text-title">12 min ago</span>
                                                         </div>

                                                         <p class="mb-0 secondary-text">
                                                             Lorem Ipsum dolor sit amet, consectetuer adipiscingelit.
                                                             Duis tellus.
                                                         </p>
                                                     </div>
                                                 </div>
                                             </div>
                                         </div>

                                     </div>

                                 </div>

                             </div>
                             @if (!($total_count <= 0))
                                 <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end p-0"
                                     aria-labelledby="page-header-notifications-dropdown">

                                     <div class="dropdown-head bg-primary bg-pattern rounded-top">
                                         <div class="p-3">
                                             <div class="row align-items-center">
                                                 <div class="col">
                                                     <h6 class="m-0 fs-16 fw-semibold text-white"> Notifications </h6>
                                                 </div>
                                                 <div class="col-auto dropdown-tabs">
                                                     <span class="badge bg-light text-body fs-13"> {{ $total_count }}
                                                         New</span>
                                                 </div>
                                             </div>
                                         </div>

                                         <div class="px-2 pt-2">
                                             <ul class="nav nav-tabs dropdown-tabs nav-tabs-custom"
                                                 data-dropdown-tabs="true" id="notificationItemsTab" role="tablist">
                                                 <li class="nav-item waves-effect waves-light">
                                                     <a class="nav-link active" data-bs-toggle="tab"
                                                         href="#all-noti-tab" role="tab" aria-selected="true">
                                                         Contact Enquiry
                                                     </a>
                                                 </li>
                                                 <li class="nav-item waves-effect waves-light">
                                                     <a class="nav-link " data-bs-toggle="tab" href="#job-noti-tab"
                                                         role="tab" aria-selected="true">
                                                         Job Application
                                                     </a>
                                                 </li>

                                             </ul>
                                         </div>

                                     </div>

                                     <div class="tab-content position-relative" id="notificationItemsTabContent">
                                         <div class="tab-pane fade show active py-2 ps-2" id="all-noti-tab"
                                             role="tabpanel">
                                             <div data-simplebar style="max-height: 300px;" class="pe-2">
                                                 @if (isset($noti_enquiry))
                                                     @foreach ($noti_enquiry as $enquiry)
                                                         <div
                                                             class="text-reset notification-item d-block dropdown-item position-relative">
                                                             <div class="d-flex">
                                                                 {{-- <img src="{{ asset('backend/template/images/users/avatar-1.jpg') }}"
                                                        class="me-3 rounded-circle avatar-xs flex-shrink-0"
                                                        alt="user-pic"> --}}
                                                                 <div class="flex-grow-1">
                                                                     <a class="common_model stretched-link"href="javascript:void(0);"
                                                                         data-title="Enquiry Information"
                                                                         data-url="{{ route('backend.template.enquiry.show', $enquiry->id) }}"
                                                                         data-size="modal-lg">

                                                                         <h6 class="mt-0 mb-1 fs-13 fw-semibold">
                                                                             {{ $enquiry->name }}</h6>
                                                                     </a>
                                                                     {{-- <div class="fs-13 text-muted">
                                                            <p class="mb-1">We talked about a project on linkedin.
                                                            </p>
                                                        </div> --}}
                                                                     <p
                                                                         class="mb-0 fs-11 fw-medium text-uppercase text-muted">
                                                                         <span><i class="bx bx-time-five"></i>
                                                                             {{ $enquiry->created_at }}</span>
                                                                     </p>
                                                                 </div>
                                                                 {{-- <div class="px-2 fs-15">
                                                        <div class="form-check notification-check">
                                                            <input class="form-check-input" type="checkbox"
                                                                value="" id="all-notification-check04">
                                                            <label class="form-check-label"
                                                                for="all-notification-check04"></label>
                                                        </div>
                                                    </div> --}}
                                                             </div>
                                                         </div>
                                                     @endforeach
                                                 @endif
                                                 {{-- <div class="my-3 text-center view-all">
                                        <button type="button"
                                            class="btn btn-soft-success waves-effect waves-light">View
                                            All Notifications <i
                                                class=" bx bx-right-arrow-alt align-middle"></i></button>
                                    </div> --}}
                                             </div>

                                         </div>
                                         <div class="tab-pane fade show  py-2 ps-2" id="job-noti-tab"
                                             role="tabpanel">
                                             <div data-simplebar style="max-height: 300px;" class="pe-2">

                                                 @if (isset($noti_job_application))
                                                     @foreach ($noti_job_application as $applications)
                                                         <div
                                                             class="text-reset notification-item d-block dropdown-item position-relative">
                                                             <div class="d-flex">
                                                                 {{-- <img src="{{ asset('backend/template/images/users/avatar-1.jpg') }}"
                                                class="me-3 rounded-circle avatar-xs flex-shrink-0" alt="user-pic"> --}}
                                                                 <div class="flex-grow-1">
                                                                     <a class="common_model stretched-link"
                                                                         href="javascript:void(0);"
                                                                         data-title="Job Application"
                                                                         data-url="  {{ route('backend.template.job-application.show', $applications->id) }}"
                                                                         data-size="modal-lg">
                                                                         <h6 class="mt-0 mb-1 fs-13 fw-semibold">
                                                                             {{ $applications->name }}</h6>
                                                                     </a>
                                                                     {{-- <div class="fs-13 text-muted">
                                                    <p class="mb-1">We talked about a project on linkedin.</p>
                                                </div> --}}
                                                                     <p
                                                                         class="mb-0 fs-11 fw-medium text-uppercase text-muted">
                                                                         <span><i
                                                                                 class="bx bx-time-five"></i>{{ $applications->created_at }}</span>
                                                                     </p>
                                                                 </div>
                                                                 {{-- <div class="px-2 fs-15">
                                                <div class="form-check notification-check">
                                                    <input class="form-check-input" type="checkbox" value=""
                                                        id="all-notification-check04">
                                                    <label class="form-check-label"
                                                        for="all-notification-check04"></label>
                                                </div>
                                            </div> --}}
                                                             </div>
                                                         </div>
                                                     @endforeach
                                                 @endif
                                                 {{-- <div class="my-3 text-center view-all">
                                        <button type="button"
                                            class="btn btn-soft-success waves-effect waves-light">View
                                            All Notifications <i
                                                class=" bx bx-right-arrow-alt align-middle"></i></button>
                                    </div> --}}
                                             </div>

                                         </div>
                                     </div>
                                 </div>
                             @endif
                         </div>
                     @endif
                     <div class="dropdown header-item topbar-user bg-transparent">
                         <button type="button" class="btn" id="page-header-user-dropdown"
                             data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                             <span class="d-flex align-items-center">
                                 <img class="rounded-circle header-profile-user"
                                     src="{{ Auth::user()->image ? asset(Auth::user()->image) : asset('backend/template/images/svg/person.svg') }}"
                                     alt="{{ Auth::user()->name }}">
                                 {{-- <span class="text-start ms-xl-2">
                                     <span
                                         class="d-none d-xl-inline-block ms-1 fw-medium user-name-text">{{ Auth::user()->name }}</span>
                                     <span
                                         class="d-none d-xl-block ms-1 fs-12 user-name-sub-text">{{ Auth::user()->email }}</span>
                                 </span> --}}
                             </span>
                         </button>
                         <div class="dropdown-menu dropdown-menu-end">
                             <a class="dropdown-item" href="{{ route('backend.template.profile') }}">
                                 <img src="{{ asset('backend/template/images/svg/profile.svg') }}" alt="">
                                 <span class="align-middle">Profile</span>
                             </a>

                             <div class="dropdown-divider"></div>
                             <a class="dropdown-item" href="javascript:void(0);" data-bs-toggle="modal"
                                 data-bs-target="#LogoutModal">
                                 <img src="{{ asset('backend/template/images/svg/logout.svg') }}" alt="">
                                 <span class="align-middle">Logout</span>
                             </a>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
     </header>
 @endif



 {{-- Logout modal --}}
 <div class="modal fade" id="LogoutModal" tabindex="-1">
     <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content rounded-16 overflow-hidden">

             <div class="modal-header bg-color-lightRed">
                 <h3 class="text-color-error modal-title mb-0">Confirm Logout</h3>
                 <button type="button" class="btn-close opacity-0" data-bs-dismiss="modal"></button>
             </div>

             <div class="modal-body">
                 <p class="mb-0 text-title fw-semibold">Are you sure you want to log out of the admin panel?</p>

                 <p class="mb-0 secondary-text mt-1">You can always Log back in at any time by using the same
                     credentials.</p>
             </div>

             <div class="modal-footer">
                 <button type="button" class="button-outline" data-bs-dismiss="modal">Cancel</button>
                 <button class="button-red">Confirm Logout</button>
             </div>

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

 {{-- Notification Modal --}}

 {{-- Notification button color changes --}}
 <script>
     function toggleNotificationBtn(state) {
         const btn = document.getElementById('page-header-notifications-dropdown');
         if (!btn) return;

         if (state) {
             btn.classList.add('active-btn');
         } else {
             btn.classList.remove('active-btn');
         }
     }

     // When modal fully hidden (fallback)
     document.addEventListener('click', function(e) {
         if (e.target.closest('[data-bs-dismiss="modal"]')) {
             toggleNotificationBtn(false);
         }
     });
 </script>

 <script>
     document.addEventListener("DOMContentLoaded", function() {

         const menuBtn = document.getElementById("topnav-hamburger-icon");
         const overlay = document.querySelector(".vertical-overlay");

         menuBtn.addEventListener("click", function() {

             document.body.classList.toggle("vertical-sidebar-enable");

         });

         overlay.addEventListener("click", function() {

             document.body.classList.remove("vertical-sidebar-enable");

         });

     });
 </script>