@php
$socialData = [
[
'name' => 'Facebook',
'icon' => config('icons.facebook'),
'url' => $siteInfo->facebook,
'title' => 'Facebook',
],
[
'name' => 'Google',
'icon' => config('icons.google'),
'url' => $siteInfo->google_plus,
'title' => 'Google',
],
[
'name' => 'Linkedin',
'icon' => config('icons.linkedin'),
'url' => $siteInfo->linkedin,
'title' => 'LinkedIn',
],
[
'name' => 'Twitter',
'icon' => config('icons.twitter'),
'url' => $siteInfo->twitter,
'title' => 'Twitter',
],
[
'name' => 'Youtube',
'icon' => config('icons.youtube'),
'url' => $siteInfo->youtube,
'title' => 'Youtube',
],
];
@endphp

@php($menu = !empty($menu) ? $menu : '')
<header id="header"
    class="fixed top-4 z-[999] w-full  duration-500 [&.headerSticky_.container]:shadow-md [&.headerSticky]:top-1">
    <div class="container bg-white py-2 rounded-md px-2">
        <nav>
            <div class="flex flex-wrap items-center justify-between">
                <div class="logo whitespace-nowrap text-3xl font-bold">
                    <a href="{{ route('home') }}" class="logo-text text-black">
                        @if (!empty($siteInfo->logo))
                        <img class="h-7 md:h-8 logo-img" src="{{ asset($siteInfo->logo) }}" alt="site logo">
                        @else
                        {{ $siteInfo->site_name }}
                        @endif
                    </a>
                </div>

                <div class="hidden lg:flex items-center justify-between w-auto">
                    <ul class="flex items-center font-medium space-x-4">
                        <li>
                            <a class="nav-link {{ $menu == 'home' ? 'active' : '' }}" href="{{ route('home') }}">
                                Home
                            </a>
                        </li>

                        

                        <li class="relative group py-1">
                            <span class="nav-link inline-flex items-center gap-1.5 group-hover:bg-gray-200">
                                Services
                                <span class="group-hover:rotate-180 duration-300">
                                    {!! config('icons.chevronDown') !!}
                                </span>
                            </span>
                            <div
                                class="absolute w-52 bg-white z-10 top-[calc(100%_+_2px)] invisible opacity-0 [transition:0.4s] [transform-origin:top] [transition-duration:0.1s] backdrop-blur-md [transform:perspective(300px)_rotateX(-18deg)] group-hover:[transition-duration:0.2s] group-hover:[transform:perspective(300px)_rotateX(0deg)] group-hover:visible group-hover:opacity-100">
                                <ul class="py-2 text-gray-700 divide-y divide-dashed">
                                    @if(!empty($headerServiceList))
                                    @foreach ($headerServiceList as $service)
                                    <li>
                                        <a href="{{ url('service', $service->page_url) }}"
                                            class="block px-4 py-2 hover:bg-gray-100 hover:text-primary {{ $menu == $service->page_url ? 'active' : '' }}">
                                            {{ $service->serviceCategory->name }}
                                        </a>
                                    </li>
                                    @endforeach
                                    @endif
                                </ul>
                            </div>
                        </li>

                        <li>
                            <a href="{{ url('blog') }}" class="nav-link {{ $menu == 'blog' ? 'active' : '' }}">
                                Blog
                            </a>
                        </li>

                        <li>
                            <a class="nav-link {{ $menu == 'siteList' ? 'active' : '' }}" href="{{ url('websites') }}">
                                Websites
                            </a>
                        </li>
                            <li>
                            <a class="nav-link {{ $menu == 'about-us' ? 'active' : '' }}" href="{{ url('about-us') }}">
                                About Us
                            </a>
                        </li>
                        <li>
                            <a class="nav-link {{ $menu == 'contact' ? 'active' : '' }}" href="{{ url('contact') }}">
                                Contact Us
                            </a>
                        </li>
                    </ul>
                </div>

                <div class="flex md:order-2 space-x-3 md:space-x-0 ">
                    @if (Auth::guard('web')->check())
                    @php($userData = Auth::guard('web')->user())
                    <div>
                        <div class="cursor-pointer" id="profileDropdown" data-dropdown-toggle="dropdown"
                            data-dropdown-placement="bottom-end" data-dropdown-trigger="hover">
                            @if (!empty($userData->avatar))
                            <img src="{{ asset($userData->avatar) }}" id="headerProfileImg" alt="User image"
                                class="rounded-full border border-primary size-10" />
                            @else
                            <div
                                class="size-10 rounded-full bg-primary flex items-center uppercase justify-center text-white text-xl">
                                {{substr($userData->name, 0, 2)}}
                            </div>
                            @endif
                        </div>

                        <div id="dropdown"
                            class="z-10 hidden bg-white border rounded shadow-[0_0_14px_0px_rgba(0,0,0,0.05)] w-60">
                            <ul class="py-2 text-lg text-gray-700 divide-y divide-gray-100"
                                aria-labelledby="profileDropdown">
                                <li class="px-4 pb-2">
                                    <h5 class="font-medium text-primary">{{$userData->name}}</h5>
                                    <p class="text-sm">{{$userData->email}}</p>
                                </li>
                                <li>
                                    <a href="{{ route('user.dashboard') }}"
                                        class="px-4 py-2 flex items-center gap-2 hover:bg-gray-100">
                                        {!! config('icons.dashboard') !!}
                                        Dashboard
                                    </a>
                                </li>

                                <li>
                                    <a href="{{ route('user.profile') }}"
                                        class="px-4 py-2 flex items-center gap-2 hover:bg-gray-100">
                                        {!! config('icons.user') !!}
                                        Profile
                                    </a>
                                </li>
                                <li>
                                    <a href="{{ route('logout') }}"
                                        onclick="event.preventDefault(); document.getElementById('logout-form').submit();"
                                        class="px-4 py-2 flex items-center gap-2 hover:bg-gray-100">
                                        {!! config('icons.logout') !!}
                                        Sign out
                                    </a>

                                    <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                                        @csrf
                                    </form>
                                </li>
                            </ul>
                        </div>
                    </div>
                    @else
                    <a href="{{ url('login') }}" data-text="Contact Us" class="outline-btn py-2" id="signInBtn">
                        Sign In
                    </a>
                    @endif

                    <button id="toggleButton"
                        class="size-10 flex text-2xl items-center justify-center border rounded lg:hidden" type="button"
                        data-drawer-target="header-drawer" data-drawer-show="header-drawer"
                        aria-controls="header-drawer">
                        <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24"
                            stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em"
                            xmlns="http://www.w3.org/2000/svg">
                            <line x1="21" x2="3" y1="6" y2="6"></line>
                            <line x1="15" x2="3" y1="12" y2="12"></line>
                            <line x1="17" x2="3" y1="18" y2="18"></line>
                        </svg>
                    </button>
                </div>
            </div>
        </nav>
    </div>
</header>

<div id="header-drawer"
    class="fixed top-0 left-0 z-[9999999] h-screen p-4 overflow-y-auto transition-transform -translate-x-full bg-white w-80 lg:hidden"
    tabindex="-1" aria-labelledby="drawer-label">

    <div class="flex items-center justify-between mb-4">
        <a href="{{ route('home') }}" class="text-black">
            @if (!empty($siteInfo->logo))
            <img class="h-10" src="{{ asset($siteInfo->logo) }}" alt="site logo">
            @else
            {{ $siteInfo->site_name }}
            @endif
        </a>
        <button type="button" data-drawer-hide="header-drawer" aria-controls="header-drawer"
            class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 flex items-center justify-center">
            <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
            </svg>
            <span class="sr-only">Close menu</span>
        </button>
    </div>

    <ul class="flex flex-col font-medium">
        <li>
            <a class="py-2 border-b border-dashed block {{ $menu == 'home' ? 'active' : '' }}"
                href="{{ route('home') }}">
                Home
            </a>
        </li>
        <li>
            <a class="py-2 border-b border-dashed block {{ $menu == 'about-us' ? 'active' : '' }}"
                href="{{ url('about-us') }}">
                About Us
            </a>
        </li>

        <li>
            <button type="button"
                class="flex items-center justify-between w-full py-2 border-b border-dashed transition duration-75 group"
                aria-controls="dropdown-example" data-collapse-toggle="dropdown-example">
                Services
                <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                    viewBox="0 0 10 6">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="m1 1 4 4 4-4" />
                </svg>
            </button>
            <ul id="dropdown-example" class="hidden py-2 space-y-2">
                @if(!empty($headerServiceList))
                @foreach ($headerServiceList as $service)
                <li>
                    <a href="{{ url('service', $service->page_url) }}"
                        class="block px-4 py-2 hover:bg-gray-100 {{ $menu == $service->page_url ? 'active' : '' }}">
                        {{ $service->serviceCategory->name }}
                    </a>
                </li>
                @endforeach
                @endif
            </ul>
        </li>
        <li>
            <a class="py-2 border-b border-dashed block {{ $menu == 'blog' ? 'active' : '' }}" href="{{ url('blog') }}">
                Blog
            </a>
        </li>

        <li>
            <a class="py-2 border-b border-dashed block {{ $menu == 'siteList' ? 'active' : '' }}"
                href="{{ url('websites') }}">
                Websites
            </a>
        </li>

        <li>
            <a class="py-2 border-b border-dashed block {{ $menu == 'contact' ? 'active' : '' }}"
                href="{{ url('contact') }}">
                Contact Us
            </a>
        </li>
    </ul>


    <div class="mt-6">
        <div class="grid gap-6 items-start">
            <h4 class="footerNavTitle before:bg-black text-black">
                Contact Info
            </h4>
            <ul class="space-y-2">
                <li class="flex items-center gap-2.5">
                    <span class="shrink-0">
                        {!! config('icons.phone') !!}
                    </span>
                    <a href="tel:{{ $siteInfo->mobile }}">
                        {{ $siteInfo->mobile }}
                    </a>
                </li>
                <li class="flex items-center gap-2.5">
                    <span class="shrink-0">
                        {!! config('icons.email') !!}
                    </span>
                    <a href="mailto:{{ $siteInfo->email }}">{{ $siteInfo->email }}</a>
                </li>
                <li class="flex items-center gap-2.5">
                    <span class="shrink-0">
                        {!! config('icons.location') !!}
                    </span>
                    {{ $siteInfo->location }}
                </li>
            </ul>
        </div>
        <div class="my-5">
            <a href="{{ url('contact') }}" data-text="Contact Us" class="primary-btn text-sm px-5 py-2.5 gap-2">
                Contact Us
                {!! config('icons.upRight') !!}
            </a>
        </div>
        <div class="flex items-center gap-2 mt-4">

            @foreach ($socialData as $row)
            @if (!empty($row['url']))
            <a href="{{ $row['url'] }}" target="_blank" title="{{ $row['title'] }}"
                class="border duration-300 hover:bg-primary rounded-full hover:border-primary hover:text-white size-9 flex items-center justify-center">
                {!! $row['icon'] !!}
            </a>
            @endif
            @endforeach
        </div>
    </div>
</div>