@php
    $headerSidebarBlogs = getBlogsByMetaData(['is_featured' => 1], 3, true, ['media'])['blogs'];
@endphp

@if (isset($general_setting->preloader_status) && $general_setting->preloader_status == 1)
    <div class="site-preloader">
        <div class="spinner"></div>
    </div>
    <!-- Site Preloader -->
@endif

@if (isset($general_setting->show_search_bar_status) && $general_setting->show_search_bar_status == 1)
    <div id="popup-search-box">
        <div class="box-inner-wrap d-flex align-items-center">
            <form id="form" action="{{ route('blogs') }}" method="get" role="search">
                <input id="popup-search" type="text" value="{{ request('search') }}" name="search"
                    placeholder="{{ __('translate.Search . . .') }}">
                <button id="popup-search-button" type="submit">
                    <i class="las la-search"></i>
                </button>
            </form>
            <div class="search-close"><i class="las la-times"></i></div>
        </div>
    </div>
    <!-- /#popup-search-box -->
@endif


<header class="main-header">
    <div class="top-bar">
        <div class="container">
            <div class="top-bar-wrap">
                <div class="top-bar-left">
                    <h4 class="link-title"><span>Quick Links:</span></h4>
                    {!! wp_nav_menu([
                        'theme_location' => 'header_top_menu',
                        'menu_class' => '',
                        'container' => false,
                    ]) !!}
                </div>
                <div class="top-bar-right d-flex gap-3">
                    <span class="date"><i
                            class="las la-calendar"></i>{{ Carbon\Carbon::now()->format('D, F j, Y') }}</span>
                    @if (isset($general_setting->language_switch_status) && $general_setting->language_switch_status == 1)
                        <div class="header-language ms-3">
                            <x-frontend::language-switcher style="dropdown" :show-flag="true" :show-name="true"
                                position="right" :is_home="true" />
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
    <div class="bottom-header">
        <div class="container">
            <div class="navigation-wrapper">
                <div class="navigation-inner">
                    <div class="site-logo">
                        <a href="{{ route('home') }}"><img src="{{ whiteLogo() }}" alt="{{ siteName() }}"></a>
                    </div>
                    <nav class="navigation-menu">
                        {!! wp_nav_menu([
                            'theme_location' => 'primary_menu' ?? '',
                            'menu_class' => 'main-menu',
                            'container' => false,
                            'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
                        ]) !!}
                    </nav>
                    <div class="header-right">

                        @if (isset($general_setting->dark_light_mode_status) && $general_setting->dark_light_mode_status == 1)
                            <div class="toggle-switch">
                                <label>
                                    <input type="checkbox" data-theme-toggle>
                                    <span class="slider"></span>
                                </label>
                            </div>
                        @endif

                        @if (isset($general_setting->show_search_bar_status) && $general_setting->show_search_bar_status == 1)
                            <div class="search-icon dl-search-icon">
                                <i class="las la-search"></i>
                            </div>
                        @endif

                        <div class="mobile-menu-icon">
                            <div class="burger-menu">
                                <div class="line-menu line-half first-line"></div>
                                <div class="line-menu"></div>
                                <div class="line-menu line-half last-line"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>
<!--/.main-header-->

<div id="sidebar-area" class="sidebar-area">
    <button class="sidebar-trigger close">
        <svg class="sidebar-close" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
            y="0px" width="16px" height="12.7px" viewBox="0 0 16 12.7" style="enable-background: new 0 0 16 12.7"
            xml:space="preserve">
            <g>
                <rect x="0" y="5.4" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -2.1569 7.5208)" width="16"
                    height="2"></rect>
                <rect x="0" y="5.4" transform="matrix(0.7071 0.7071 -0.7071 0.7071 6.8431 -3.7929)" width="16"
                    height="2"></rect>
            </g>
        </svg>
    </button>
    <div class="sidebar-content">
        <div class="site-logo">
            <a href="{{ route('home') }}">
                <img class="logo-dark" src="{{ whiteLogo() }}" alt="{{ siteName() }}">
                <img class="logo-light" src="{{ siteLogo() }}" alt="{{ siteName() }}">
            </a>
        </div>

        @if (isset($general_setting->location) && $general_setting->location)
            <p>{{ $general_setting->location }}</p>
        @endif

        <ul class="sidebar-info">
            @if (isset($general_setting->phone) && $general_setting->phone)
                <li><span>Call:</span> {{ $general_setting->phone }}</li>
            @endif
            @if (isset($general_setting->admin_email) && $general_setting->admin_email)
                <li><span>Email:</span> {{ $general_setting->admin_email }}</li>
            @endif
        </ul>

        <div class="list-post-area list-2">
            @foreach ($headerSidebarBlogs as $key => $blog)
                <div class="list-post-card">
                    <div class="post-img">
                        <img class="w-100 h-100" src="{{ getContentMediaWithFallback($blog, 'featured') ?: asset('backend/assets/img/blog/default.png') }}"
                            alt="{{ $blog->title }}">
                    </div>
                    <div class="post-content">
                        <h3 class="title">
                            <a href="{{ route('blog.detail', $blog->slug ?? '') }}">
                                {{ getCountedWord($blog->title, 70) }}
                            </a>
                        </h3>
                        <span>{{ $blog->created_at->format('M d, Y') }}</span>
                    </div>
                </div>
            @endforeach
        </div>


        @if (isset($general_setting->show_social_links) && $general_setting->show_social_links == 1)
            <ul class="sidebar-social">
                @include('frontend::components.header-social-link')
            </ul>
        @endif
    </div>
</div>
<!--/.sidebar-area-->

<div id="sidebar-overlay"></div>
<!--/.sidebar-overlay-->