@php
    $services = config('constants.services');
    $current_path = request()->path();
@endphp


<nav class="px-4 py-4 flex items-center justify-between sticky top-0 z-[9999] transition-all duration-500 xl:px-[120px] h-20" id="navbar">
    <a class="mr-10" href="{{ url('/') }}">
        <img src="{{ asset('images/logo.png') }}" class="hidden w-[136px] lg:block" alt="Logo" id="logo-desktop">
        <img src="{{ asset('images/logo-blue.png') }}" class="block w-[136px] lg:hidden" alt="Logo">
    </a>

    {{-- Menu Desktop --}}
    <ul class="items-center hidden lg:flex bg-white rounded-full p-1" id="navbar-menu">
        <li class="font-medium flex items-center gap-2 text-sm h-10 px-4 rounded-full {{ $current_path == '/' ? 'bg-imperial-blue-900 text-white' : 'text-slate-800' }}">
            <a href="{{ url('/') }}">Home</a>
        </li>

        <li class="font-medium flex items-center gap-2 text-sm text-black group relative z-50 cursor-pointer h-10 px-4 rounded-full {{ str_contains($current_path, 'service/') ? 'bg-imperial-blue-900 text-white' : 'text-slate-800' }}">
            <span class="group-hover:text-primary">Services</span>
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 color-slate-400">
                <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
            </svg>

            <div class="absolute -left-10 top-[50%] p-4 w-[700px] hidden group-hover:block">
                <div class="bg-white border border-slate-200 rounded-2xl p-4 z-50 mt-4">
                    <div class="flex justify-between items-center gap-2 px-2 mb-4">
                        <span class="text-black text-lg font-medium">Services</span>

                        {{-- <a href="/service" class="flex items-center gap-2 rounded-lg bg-primary hover:opacity-80 px-3 py-2 lg:px-4 lg:py-3">
                            <span class="text-sm text-white">View All Services</span>
                        </a> --}}
                    </div>

                    <div class="grid grid-flow-col grid-rows-3 gap-x-6 ">
                        @foreach($services as $service)
                        <a class="rounded-2xl hover:bg-primary-selected hover:cursor-pointer p-2" href="{{ url('service/' . $service['slug']) }}">
                            <p class="text-black font-medium text-sm">{{ $service['title'] }}</p>
                            <p class="text-gray-500 font-medium text-xs">{{ $service['subtitle'] }}</p>
                        </a>
                        @endforeach
                    </div>
                </div>
            </div>
        </li>

        <li class="font-medium flex items-center gap-2 text-sm h-10 px-4 rounded-full {{ $current_path == 'about-us' ? 'bg-imperial-blue-900 text-white' : 'text-slate-800' }}">
            <a href="{{ url('/about-us') }}">About Us</a>
        </li>
    </ul>

    <div class="items-center gap-4 hidden lg:flex">
        <a href="https://api.whatsapp.com/send/?phone=628111996693" target="_blank" class="flex items-center gap-2 rounded-full bg-white text-imperial-blue-900 hover:opacity-80 px-6 py-2" id="navbar-button-contact-us">
            <img src="{{ asset('icons/whatsapp-blue.svg') }}" alt="whatsapp" class="size-4" id="navbar-icon-contact-us">
            <span class="text-sm">Talk with us</span>
        </a>
    </div>

    {{-- Menu Mobile --}}

    <div class="ml-auto mr-0 items-center gap-4 flex lg:hidden">
        <a href="https://api.whatsapp.com/send/?phone=628111996693" target="_blank" class="flex items-center gap-2 rounded-full bg-imperial-blue-900 text-white hover:opacity-80 px-6 py-2" id="navbar-button-contact-us">
            <img src="{{ asset('icons/whatsapp-white.svg') }}" alt="whatsapp" class="size-4" id="navbar-icon-contact-us">
            <p class="text-xs">Talk with us</p>
        </a>

        <div class="w-8 h-8 cursor-pointer" id="menu-m">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-8 h-8" id="icon-menu-open">
                <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
            </svg>

            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className="w-8 h-8" id="icon-menu-close" style="display: none">
                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
            </svg>
        </div>
    </div>

    <div class="bg-white absolute top-[73px] w-full h-[calc(100vh-73px)] px-5 py-10 flex flex-col transition-all duration-500 lg:hidden" id="content-menu-m" style="right: -100%">
        <ul class="items-start gap-6 flex flex-col flex-1">
            <li class="font-normal flex items-center justify-between gap-2 text-[20px] text-black w-full">
                <a href="{{ url('/') }}">Home</a>
            </li>

            <li class="group w-full">
                <div class="font-normal  flex items-center justify-between gap-2 text-[20px] text-black w-full">
                    <span>Services</span>
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 color-slate-400">
                        <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                    </svg>
                </div>

                <div class="py-4 w-full hidden group-hover:block">
                    {{-- <div class="flex justify-between items-center gap-2 mb-4">
                        <a href="/service" class="flex items-center gap-2 rounded-lg bg-primary hover:opacity-80 px-3 py-2 lg:px-4 lg:py-3">
                            <span class="text-sm text-white">View All Services</span>
                        </a>
                    </div> --}}

                    <div class="bg-white grid grid-cols-2 rounded-2xl z-50 gap-x-6">
                        @foreach($services as $service)
                        <a class="rounded-2xl hover:bg-primary-selected hover:cursor-pointer p-2 -mx-2" href="{{ url('/service/' . $service['slug']) }}">
                            <p class="text-black font-medium text-sm">{{ $service['title'] }}</p>
                            <p class="text-gray-500 font-medium text-xs">{{ $service['subtitle'] }}</p>
                        </a>
                        @endforeach
                    </div>
                </div>
            </li>

            <li class="font-normal flex items-center justify-between gap-2 text-[20px] text-black w-full">
                <a href="{{ url('/about-us') }}">About Us</a>
            </li>
        </ul>

        <div class="items-start gap-4 flex flex-col">
            <a href="https://api.whatsapp.com/send/?phone=628111996693" target="_blank" class="flex items-center gap-2 rounded-full bg-imperial-blue-900 text-white hover:opacity-80 px-6 py-2" id="navbar-button-contact-us">
                <img src="{{ asset('icons/whatsapp-white.svg') }}" alt="whatsapp" class="size-4" id="navbar-icon-contact-us">
                <p class="text-xs">Talk with us</p>
            </a>
        </div>
    </div>
</nav>