@php
  $languages = App\Models\Language::all();
  $categories = App\Models\Category::where('status', 1)->latest('id')->take(13)->get();
  $pages = App\Models\Page::where('tempname', $activeTemplate)->get();
  $currentLang = $languages->firstWhere('code', session('lang', 'en'));
@endphp

<div class="header-main-area">
  <div class="header" id="header">
    <div class="container position-relative">
      <div class="header-wrapper">
        <!-- ham menu -->
        <i class="fa-sharp fa-solid fa-bars-staggered ham__menu" data-bs-toggle="offcanvas"
          data-bs-target="#offcanvasExample" aria-controls="offcanvasExample"></i>
        <!-- logo -->
        <div class="header-menu-wrapper align-items-end d-flex gap--32">
          <div class="logo-wrapper">
            <a href="{{ route('home') }}" class="normal-logo" id="normal-logo">
              <img src="{{ getImage(getFilePath('logoIcon') . '/logo.png', '?' . time()) }}"
                alt="{{ config('app.name') }}">
            </a>
          </div>
          <div class="search--bar__wrap">
            <form action="{{ route('search') }}" method="get" id="filterForm">
              <div class="position-relative">
                <input class="form--control" name="search" value="{{request()->search}}" placeholder="@lang('Search products')...">
                <button><i class="fa-solid fa-magnifying-glass"></i></button>
              </div>
            </form>
          </div>
        </div>
        <!-- / logo -->
        <div class="d-flex ">
          <div class="menu--wrap d-flex align-items-center gap--72">
            <div class="menu-list-wrapper">
              <ul class="main-menu">
                @foreach ($pages as $page)
          <li>
            <a class="{{ Request::url() == url($page->slug) ? 'active' : '' }}"
            href="{{ route('pages', [$page->slug]) }}">{{ __($page->name) }}</a>
          </li>
        @endforeach
                @auth
          <li>
            <a href="{{route('user.home')}}"
            class="{{ Route::is('user.home') ? 'active' : '' }}">@lang('Dasboard')</a>
          </li>
        @else
          <li>
            <a href="{{route('user.login')}}"
            class="{{ Route::is('user.login') ? 'active' : '' }}">@lang('Sign In')</a>
          </li>
        @endauth
              </ul>
            </div>
          </div>
          <ul class="login-lng d-flex align-items-center gap-4">
            <li class="language">
              <div class="language-box">
                <button class="dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                  <img class="flag--img"
                    src="{{ getImage(getFilePath('language') . '/' . $currentLang->icon ?? '', getFileSize('language')) }}"
                    alt="@lang('Icon')">
                  {{ __($currentLang->name ?? '') }}
                </button>
                <ul class="dropdown-menu lng--dropdown">
                  @foreach ($languages as $language)
              <li>
              <a class="dropdown-item lang-change @if (Session::get('lang') === $language->code) selected @endif"
                href="javascript:void(0)" data-lang="{{ $language->code }}">
                <img class="flag--img"
                src="{{ getImage(getFilePath('language') . '/' . $language->icon ?? '', getFileSize('language')) }}"
                alt="@lang('Icon')">
                {{ __($language->name ?? '') }}
                @if (Session::get('lang') === $language->code)
            <i class="fas fa-check text-success ms-2"></i>
          @endif
              </a>
              </li>
          @endforeach
                </ul>
              </div>
            </li>
          </ul>

        </div>
      </div>
    </div>
    <div class="header--bottom">
      <div class="container position-relative">
        <div class="d-flex justify-content-between">
          <ul class="d-flex justify-content-start">
            @foreach ($categories as $category)
        <li><a
          href="{{ route('category.product', ['slug' => slug($category->name), 'id' => $category->id]) }}">{{$category->name}}</a>
        </li>
      @endforeach
          </ul>
          <a href="{{route('discount')}}" class="header--badge">@lang('% Discounted Items')</a>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Header section End -->

<!-- Sidebar mobile menu wrap Start-->
<div class="offcanvas offcanvas-start text-bg-light" tabindex="-1" id="offcanvasExample">
  <div class="offcanvas-header">
    <div class="logo">
      <div class="align-items-center d-flex">
        <div class="logo-wrapper">
          <a href="{{route('home')}}" class="normal-logo" id="offcanvas-logo-normal">
            <img src="{{ getImage(getFilePath('logoIcon') . '/logo.png', '?' . time()) }}" alt="@lang('Image')">
          </a>
        </div>
      </div>
    </div>
    <button type="button" class="btn-close btn-close-black" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <ul class="side-Nav">
      @foreach ($pages as $page)
      <li>
      <a class='{{ Request::url() == url($page->slug) ? 'active' : '' }}' href="{{ route('pages', [$page->slug]) }}"
        aria-current="page">{{ __($page->name ?? '') }}</a>
      </li>
    @endforeach
      <li>
        @auth
      <a href="{{route('user.home')}}" class="login-btn">@lang('Dashboard')</a>
    @else
      <a href="{{route('user.login')}}" class="login-btn">@lang('Sign In')</a>
    @endauth
      </li>
    </ul>
  </div>
</div>