@aware(['page'])

@props(['test', 'buttons', 'nav_bg', 'nav_text', 'category'])






<div class="navbar bg-base-100 shadow-sm">
    <div class="navbar-start">
        <div class="drawer z-30 flex sm:hidden">
            <input id="my-drawer" type="checkbox" class="drawer-toggle" />
            <div class="drawer-content">
                <label for="my-drawer" class="drawer-button">
                    <div tabindex="0" role="button" class="btn btn-ghost btn-circle">
                        <x-mary-icon name="heroicon.m.bars.3" />
                    </div>
                </label>

            </div>
            <div class="drawer-side">
                <label for="my-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
                <ul class="menu bg-base-200 text-base-content min-h-full w-80 p-4">
                    {{-- <li><a href="/"><x-mary-icon name="heroicon.s.fire" /> CORN</a></li> --}}
                    <li><a href="/home"><x-mary-icon name="heroicon.s.home" /> Home</a></li>
                    {{-- <li><a href="#"><x-mary-icon name="heroicon.s.cog-6-tooth" /> Setting</a></li> --}}
                   
                    
                    @if($category)
                    @foreach ($category as $c)

                        <li class="flex sm:hidden"><a href="{{ route('category.show', [optional(\App\Models\Category::find($c['categories']))->slug]) }}"
                            class="mr-5 hover:text-gray-200"><x-mary-icon
                                name="heroicon.s.qr.code" />{{ optional(\App\Models\Category::find($c['categories']))->name ?? 'Unknown' }}</a>
                        </li>

                    @endforeach
                    @endif
                    @if (!empty($buttons))
                        @foreach ($buttons as $button)
                            <li class="flex sm:hidden"><a href="{{ $button['link'] }}" class="mr-5 hover:text-gray-900"
                                    style="color: {{ $nav_text }};"><x-mary-icon
                                        name="heroicon.s.device.phone.mobile" />{{ $button['name'] }}</a>
                            </li>
                        @endforeach

                    @endif


                </ul>
            </div>
        </div>
        <a href="/home" wire:navigate class="btn hidden sm:flex  btn-ghost text-xl"><img
            class="object-cover object-center rounded h-10" alt=""
            src="{{ asset('/storage/front_end/corn_logo_bgr.png') }}">HOME</a>

    </div>
    <div class="navbar-center ">
        @foreach ($buttons as $button)
        <a href="{{ $button['link'] }}" class="mr-5 btn  btn-ghost  hidden sm:flex"
        style="color: {{ $nav_text }};">{{ $button['name'] }}</a>
        @endforeach
        
        <a href="/home" wire:navigate class="btn flex sm:hidden  btn-ghost text-xl"><img
                class="object-cover object-center rounded h-10" alt=""
                src="{{ asset('/storage/front_end/corn_logo_bgr.png') }}">HOME</a>
        @foreach ($category as $c)
            <a href="{{ route('category.show', [optional(\App\Models\Category::find($c['categories']))->slug]) }}"
                class=" btn btn-ghost text-md hidden sm:flex">{{ optional(\App\Models\Category::find($c['categories']))->name ?? 'Unknown' }}</a>
        @endforeach
    </div>
    <div class="navbar-end">



        @guest
            <div class="dropdown dropdown-end">
                <div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar">
                    <div class="w-10 rounded-full">
                        <x-mary-icon name="heroicon.m.user.circle" class="h-full" />
                    </div>
                </div>
                <ul tabindex="0" class="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow">

                    <li><a href="{{ route('login') }}">Login</a></li>
                    {{-- <li><a href="{{ route('register') }}">Register</a></li>  only i can create the user for now   --}}
                </ul>
            </div>
        @endguest

        @auth

            <div class="dropdown dropdown-end">
                <div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar">
                    <div class="w-10 rounded-full">
                        <img alt="{{ auth()->user()->media?->alt }}"
                            src="{{ asset('storage/' . auth()->user()->media?->path) }}" />
                    </div>
                </div>
                <ul tabindex="0" class="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow">
                    <li>
                        <a href="{{ route('profile.show') }}">
                            Profile

                        </a>
                    </li>
                    <li><a>Settings</a></li>
                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <button class="block px-4 py-1  hover:bg-slate-700 w-full text-left rounded-lg"
                            type="submit">Logout</button>
                    </form>
                </ul>
            </div>
        @endauth

    </div>

</div>