@php
     $settings = \App\Models\Setting::pluck('value', 'key');
 @endphp

 <style>
     /*==========================
    Header Top
===========================*/

     .header-top {
         background: #0F172A;
         color: #fff;
         font-size: 14px;
     }

     .header-top-inner {
         display: flex;
         justify-content: space-between;
         align-items: center;
         height: 46px;
     }

     .header-top a {
         color: #fff;
         text-decoration: none;
         transition: .3s;
     }

     .header-top a:hover {
         color: #FFD54F;
     }

     .top-left,
     .top-center,
     .top-right {
         display: flex;
         align-items: center;
         gap: 10px;
     }

     .top-center {
         color: #d1d5db;
         font-weight: 500;
     }

     .top-center i {
         color: #FFD54F;
     }

     .phone i,
     .top-left i {
         color: #FFD54F;
         margin-right: 6px;
     }

     .social-icons {
         display: flex;
         gap: 8px;
         margin-left: 20px;
     }

     .social-icons a {
         width: 34px;
         height: 34px;
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         background: rgba(255, 255, 255, .08);
         transition: .3s;
     }

     .social-icons a:hover {
         background: #FFD54F;
         color: #0F172A;
         transform: translateY(-2px);
     }

     /* Tablet */
     @media(max-width:1199px) {

         .header-top-inner {
             justify-content: space-between;
         }

         .top-center {
             display: none;
         }

     }

     /* Mobile */
     @media(max-width:991px) {

         .header-top {
             display: none;
         }

     }

     .offcanvas-header {
         display: flex;
         justify-content: space-between;
         align-items: center;
         padding-bottom: 20px;
         border-bottom: 1px solid #eee;
     }

     .offcanvas-logo img {
         height: 50px;
     }

     .mobile-user {
         display: flex;
         align-items: center;
         gap: 15px;
         margin: 25px 0;
     }

     .mobile-user .avatar {
         width: 55px;
         height: 55px;
         border-radius: 50%;
         background: #2563eb;
         color: #fff;
         display: flex;
         justify-content: center;
         align-items: center;
         font-size: 22px;
         font-weight: bold;
     }

     .mobile-nav {
         list-style: none;
         padding: 0;
         margin: 0;
     }

     .mobile-nav li {
         margin-bottom: 8px;
     }

     .mobile-nav a {
         display: flex;
         align-items: center;
         gap: 15px;
         padding: 13px 16px;
         border-radius: 10px;
         color: #222;
         text-decoration: none;
         transition: .3s;
     }

     .mobile-nav a:hover {
         background: #2563eb;
         color: #fff;
     }

     .mobile-bottom {
         margin-top: 30px;
     }

     .login-btn,
     .register-btn,
     .logout-btn {
         display: block;
         width: 100%;
         text-align: center;
         padding: 13px;
         border-radius: 10px;
         text-decoration: none;
         margin-bottom: 12px;
         font-weight: 600;
     }

     .login-btn {
         border: 1px solid #2563eb;
         color: #2563eb;
     }

     .register-btn {
         background: #2563eb;
         color: #fff;
     }

     .logout-btn {
         border: none;
         background: #ef4444;
         color: #fff;
     }
 </style>
 <!-- START PRELOADER -->
 <div class="preloader">
     <span class="loader"></span>
 </div>
 <!--  END PRELOADER -->

 <!-- Offcanvas Area Start -->
 <div class="fix-area">
     <div class="offcanvas__info">
         <div class="offcanvas__wrapper">

             <div class="offcanvas__content">

                 <!-- Header -->
                 <div class="offcanvas-header">

                     <a href="{{ url('/') }}" class="offcanvas-logo">
                         <img src="{{ $settings->get('logo') ? asset('storage/' . $settings->get('logo')) : asset('public/frontend/assets/img/logo.svg') }}"
                             alt="Logo">
                     </a>

                     <button class="offcanvas__close">
                         <i class="fa-solid fa-xmark"></i>
                     </button>

                 </div>

                 @auth

                     <div class="mobile-user">

                         <div class="avatar">
                             {{ strtoupper(substr(auth()->user()->name, 0, 1)) }}
                         </div>

                         <div>

                             <h6>{{ auth()->user()->name }}</h6>

                             <small>{{ auth()->user()->email }}</small>

                         </div>

                     </div>

                 @endauth


                 <ul class="mobile-nav">

                     <li>
                         <a href="{{ route('home') }}">
                             <i class="fa-solid fa-house"></i>
                             Home
                         </a>
                     </li>

                     <li>
                         <a href="{{ route('about') }}">
                             <i class="fa-solid fa-circle-info"></i>
                             About
                         </a>
                     </li>

                     <li>
                         <a href="{{ route('faq') }}">
                             <i class="fa-solid fa-circle-question"></i>
                             FAQ
                         </a>
                     </li>

                     <li>
                         <a href="{{ route('contact') }}">
                             <i class="fa-solid fa-phone"></i>
                             Contact
                         </a>
                     </li>
                     <li>
                         <a href="{{ route('games') }}">
                             <i class="fa-solid fa-phone"></i>
                             Games
                         </a>
                     </li>
                     <li class="download-app-menu">
                         <a href="https://play.google.com/store/apps/details?id=raysapps.brainthink.com" target="_blank"
                             class="play-store-btn">
                             <i class="fab fa-google-play me-1"></i>
                             Download App
                         </a>
                     </li>
                     {{-- <li>
                         <a href="">
                             <i class="fa-solid fa-phone"></i>
                             Categories
                         </a>
                     </li> --}}

                     @auth

                         <li>
                             <a
                                 href="{{ auth()->user()->role === 'admin' ? route('admin.dashboard') : route('dashboard') }}">
                                 <i class="fa-solid fa-table-columns"></i>
                                 Dashboard
                             </a>
                         </li>

                     @endauth

                 </ul>

                 @guest

                     <div class="mobile-bottom">

                         <a href="{{ route('login') }}" class="login-btn">
                             Login
                         </a>

                         <a href="{{ route('register.show') }}" class="register-btn">
                             Register
                         </a>

                     </div>

                 @endguest


                 @auth

                     <form method="POST" action="{{ route('logout') }}" class="mobile-bottom">
                         @csrf

                         <button class="logout-btn">
                             <i class="fa-solid fa-right-from-bracket"></i>

                             Logout
                         </button>

                     </form>

                 @endauth

             </div>

         </div>
     </div>
 </div>
 <div class="offcanvas__overlay"></div>

 <!-- Start Header -->
 <header id="navigation" class="header1">
     <div class="header-top d-none d-lg-block">
         <div class="container">
             <div class="header-top-inner">

                 <div class="top-left">
                     <a href="mailto:{{ $settings->get('support_email') }}">
                         <i class="fa-regular fa-envelope"></i>
                         {{ $settings->get('support_email') }}
                     </a>
                 </div>

                 <div class="top-center">
                     <i class="fa-solid fa-graduation-cap"></i>
                     <span>Play Daily • Earn Daily</span>
                 </div>

                 <div class="top-right">

                     <a href="tel:{{ $settings->get('support_mobile') }}" class="phone">
                         <i class="fa-solid fa-phone"></i>
                         {{ $settings->get('support_mobile') }}
                     </a>

                     <div class="social-icons">
                         <a href="{{ $settings->get('facebook') }}"><i class="fab fa-facebook-f"></i></a>
                         <a href="{{ $settings->get('twitter') }}"><i class="fab fa-x-twitter"></i></a>
                         <a href="{{ $settings->get('linkedin') }}"><i class="fab fa-linkedin-in"></i></a>
                         <a href="{{ $settings->get('youtube') }}"><i class="fab fa-youtube"></i></a>
                     </div>

                 </div>

             </div>
         </div>
     </div><!-- End Header Top -->

     <div class="container-fluid py-3 px-0">
         <div class="main-header">
             <div class="header-left d-flex justify-content-start">
                 <div class="site-logo">
                     <a href="{{ url('/') }}">
                         <img src="{{ $settings->get('logo') ? asset('storage/' . $settings->get('logo')) : asset('public/frontend/assets/img/logo.svg') }}"
                             alt="{{ $settings->get('app_name') ?? config('app.name') }}" height="55">
                     </a>
                 </div>
             </div>
             <!-- End site-logo -->

             <div class="header-middle d-flex justify-content-center">
                 <nav id="main-menu">
                     <ul>
                         <li>
                             <a href="{{ route('home') }}">Home</a>
                         </li>



                         {{-- <li class="menu-item-has-children">
                             <a href="#">Pages</a>
                             <ul class="sub-menu">
                                 <li><a href="{{route('about')}}">About</a></li>
                                 <li><a href="{{route('faq')}}">FAQ</a></li> --}}
                         {{-- <li><a href="instructors.html">Instructors</a></li> --}}
                         {{-- <li><a href="grid-blog.html">Grid Blog</a></li>
                                 <li><a href="standard-blog.html">Standard Blog</a></li>
                                 <li><a href="blog-details.html">Blog Details</a></li>
                                 <li><a href="cart.html">Cart</a></li>
                                 <li><a href="checkout.html">Checkout</a></li>
                                 <li><a href="login.html">Login</a></li>
                                 <li><a href="register.html">Register</a></li>
                                 <li><a href="404.html">404</a></li> --}}
                         {{-- </ul>
                         </li> --}}

                         <li>
                             <a href="{{ route('about') }}">About</a>
                         </li>
                         <li>
                             <a href="{{ route('faq') }}">FAQ</a>
                         </li>
                         <li>
                             <a href="{{ route('contact') }}">Contact</a>
                         </li>
                         <li>
                             <a href="{{ route('games') }}">Games</a>
                         </li>
                         <li class="download-app-menu">
                             <a href="https://play.google.com/store/apps/details?id=raysapps.brainthink.com"
                                 target="_blank" class="play-store-btn">
                                 <i class="fab fa-google-play me-1"></i>
                                 Download App
                             </a>
                         </li>
                         {{-- <li>
                             <a href="">Categories</a>
                         </li> --}}
                     </ul>
                 </nav><!-- End Main Menu -->
             </div>
             <!-- End Header Middle -->

             <div class="header-right d-flex justify-content-end">
                 {{-- <div class="ac-cart">
                     <a href="#" class="mcart_icon" data-menu="#mini_cart">
                         <i class='bx bx-shopping-bag'></i>
                         <span>3</span>
                     </a>
                 </div> --}}
                 @guest
                     <div class="d-flex align-items-center gap-2">
                         <a href="{{ route('login') }}" class="bg-btn">
                             Login
                         </a>

                         <a href="{{ route('register.show') }}" class="bg-btn">
                             Register
                         </a>
                     </div>
                 @endguest
                 @auth
                     <div class="dropdown d-none d-xl-block">

                         <a href="#" class="header-profile" data-bs-toggle="dropdown">

                             @if (auth()->user()->avatar)
                                 <img src="{{ asset('storage/' . auth()->user()->avatar) }}" class="header-profile-img"
                                     alt="{{ auth()->user()->name }}">
                             @else
                                 <img src="{{ asset('public/frontend/assets/img/default-user.png') }}"
                                     class="header-profile-img" alt="{{ auth()->user()->name }}">
                             @endif

                             <div class="header-profile-info">

                                 <span>Hello,</span>

                                 <strong>{{ auth()->user()->name }}</strong>

                             </div>

                             <i class="fa-solid fa-angle-down"></i>

                         </a>

                         <ul class="dropdown-menu dropdown-menu-end shadow border-0 rounded-3">

                             <li>
                                 <a class="dropdown-item"
                                     href="{{ auth()->user()->role === 'admin' ? route('admin.dashboard') : route('dashboard') }}">
                                     <i class="fa-solid fa-table-columns me-2"></i>
                                     Dashboard
                                 </a>
                             </li>

                             <li>
                                 <hr class="dropdown-divider">
                             </li>

                             <li>

                                 <form action="{{ route('logout') }}" method="POST">

                                     @csrf

                                     <button class="dropdown-item text-danger">

                                         <i class="fa-solid fa-right-from-bracket me-2"></i>

                                         Logout

                                     </button>

                                 </form>

                             </li>

                         </ul>

                     </div>
                 @endauth
                 <div class="header__hamburger d-xl-none my-auto">
                     <div class="sidebar__toggle">
                         <i class="fa-solid fa-bars"></i>
                     </div>
                 </div>
             </div><!-- End ac-cart -->
         </div>
     </div>


 </header>
 <!-- End Header -->