@php
    use function Modules\Core\Settings\Helpers\setting;
    use Illuminate\Support\Facades\Storage;
    use Modules\Shop\Categories\Models\Category;

    $mainCategories = Category::query()
        ->where('parent_id', -1)
        ->orderBy('order')
        ->get();
@endphp

<x-drawer position="left">

    <x-slot:toggle>
        <x-heroicon-o-bars-3 class="h-7" />
    </x-slot:toggle>

    <x-slot:header>
        <div class="flex justify-center items-center">
            <a href="{{ route('home') }}" wire:navigate>
                <img src="{{ Storage::url(setting('site.logo')) }}" alt="{{ setting('seo.title') }}"
                    class="max-h-14 xl:max-h-max mx-auto">
            </a>
        </div>
    </x-slot:header>

    <div
    x-data="{ openProducts: false }"
    class="[&>*]:pb-5 [&>*]:mt-5
        [&>*]:border [&>*]:border-b [&>*]:border-l-0
        [&>*]:border-r-0 [&>*]:border-t-0 [&>*]:border-[#f3f3f5]
        [&>*]:font-semibold text-center">

    <a href="{{ route('home') }}" wire:navigate class="block">
        Inicio
    </a>

    <div class="block">
        <button
            type="button"
            @click="openProducts = !openProducts"
            class="w-full flex justify-center items-center gap-2 font-semibold">

            <span>Productos</span>

            <svg
                class="w-4 h-4 transition-transform duration-300"
                :class="openProducts ? 'rotate-180' : ''"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24">

                <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M19 9l-7 7-7-7" />

            </svg>
        </button>

        <div
            x-show="openProducts"
            x-transition
            class="mt-5 pt-5 border-t border-[#f3f3f5]">

            <a
                href="{{ route('productos') }}"
                wire:navigate
                class="block text-sm uppercase tracking-wide text-[#E85D04] font-bold mb-4">
                Ver todos los productos
            </a>

            <ul class="space-y-4">
                @foreach ($mainCategories as $category)
                    <li>
                        <a
                            href="{{ route('productos', ['category' => $category->slug]) }}"
                            wire:navigate
                            class="block text-sm font-medium text-zinc-600 hover:text-[#E85D04]">
                            {{ $category->name }}
                        </a>
                    </li>
                @endforeach
            </ul>

        </div>
    </div>
    <a href="{{ route('brands') }}"  class="block"> Marcas  </a>
    <a href="{{ route('contacto') }}" wire:navigate class="block">
        Contacto
    </a>
    <a href="{{ route('nosotros') }}" class="block"> Nuestra empresa  </a>
    <a href="{{ route('faqs') }}" class="block">  Preguntas frecuentes  </a>
    <a href="{{ route('faqs') }}#proveedor" class="block"> Quiero ser proveedor </a>
    <a href="{{ route('faqs') }}#distribuidor" class="block"> Quiero ser distribuidor </a>
</div>
</x-drawer>