@include('components.preview.header')
<div class="px-[3%] md:mt-16 mt-3 pb-10">
    <div class="flex max-w-7xl mx-auto">
        <!-- Sidebar -->
        <div class="w-full max-w-[300px] border-r-2 border-grey-600 hidden md:block">
            @foreach ($restaurant->menus as $menu)
                <div class="relative">
                    <input type="checkbox" class="absolute top-0 left-0 cursor-pointer w-full h-12 peer opacity-0"
                        {{ $loop->first ? 'checked=""' : ', ' }}>
                    <svg xmlns="http://www.w3.org/2000/svg"
                        class="h-5 w-5 absolute right-3 top-3 peer-checked:rotate-180 peer-checked:text-primary z-[-1]"
                        fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path>
                    </svg>
                    <div class="justify-between items-center flex h-12 peer-checked:text-primary">
                        <span class="text-lg font-medium">{{ $menu->name }}</span>
                    </div>
                    <!-- Dropdown Lists -->
                    <div class="h-0 overflow-hidden peer-checked:h-auto">
                        <ul class="font-base text-medium text-grey-400 mb-10">
                            @foreach ($menu->cats as $category)
                                <li
                                    class=" {{ $loop->first ? 'bg-gradient-to-r from-transparent to-primary/50 text-primary' : '' }}  py-2 border-r-2 border-primary cursor-pointer">
                                    <a
                                        href="{{ route('dashboard.preview.category', ['restaurant' => $restaurant->id, 'category' => $category->id]) }}">
                                        {{ $category->name }}
                                    </a>

                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            @endforeach

        </div>

        <!-- Main -->

        <div class="w-full py-2 md:pl-[3%]">
            <div class="flex justify-between border-b border-grey-600 pb-4 gap-4">
                <div>
                    <h5 class="text-2xl font-bold text-primary">{{ $mycat->name }}</h5>
                    <span class="text-base font-medium text-grey-400">22 ITEMS</span>
                </div>
                <div class="customshadow h-fit px-6 py-3 items-center gap-2 hidden md:flex">
                    <input type="text" placeholder="Search the dish.."
                        class="focus:outline-none text-base font-medium text-grey-500 placeholder:text-grey-400 w-full">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 stroke-grey-400 shrink-0" fill="none"
                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                    </svg>
                </div>
            </div>

            <!-- Lists -->
            <div class="mt-6 space-y-8">
                @foreach ($mycat->meals as $meal)
                    <div class="flex gap-4">
                        <div class="space-y-2">
                            <span class="font-semibold text-lg text-grey-500"> {{ $meal->name }} </span>
                            <p class="font-medium text-base text-grey-400">
                                {{ $meal->description }}
                            </p>
                            <div class="flex items-center bg-primary/10 w-fit px-3 py-1 rounded-md gap-3">
                                <span class="font-semibold text-base text-grey-500">Allergen</span>
                                <div class="flex gap-2 items-center">
                                    @foreach ($meal->allergens as $allergen)
                                        <svg xmlns="http://www.w3.org/2000/svg"
                                            xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px">
                                            <image x="0px" y="0px" width="20px" height="20px"
                                                xlink:href="/img/svgs/{{ $allergen->name }}.svg">
                                            </image>
                                        </svg>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                        <span class="font-medium text-xl text-grey-500">£{{ $meal->price }}</span>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</div>

@include('components.preview.footer')