@extends('front.layouts.master')
@section('content')
    <main class="flex-grow bg-gray-100 pb-14 pt-36 dark:bg-black xs:pt-36">
        <div class="container relative">
            <!--Mobile breadcrumb-->
            <div class="mb-6 md:hidden">
                <nav aria-label="Breadcrumb" class="w-fit rounded-lg bg-white px-4 py-4 shadow-base dark:bg-zinc-900">
                    <ol class="flex flex-wrap items-center justify-center gap-x-2 gap-y-4">
                        <li class="flex items-center gap-x-2">
                            <a href="./index.html"
                                class="text-sm text-zinc-600 hover:text-zinc-700 dark:text-zinc-300 hover:dark:text-white">
                                مجد
                            </a>
                            <span class="text-zinc-600 dark:text-zinc-300">
                                <svg class="h-5 w-5">
                                    <use xlink:href="#chevron-left"></use>
                                </svg>
                            </span>
                        </li>
                        <li class="flex items-center gap-x-2">
                            <a href="/blog"
                                class="text-sm text-zinc-600 hover:text-zinc-700 dark:text-zinc-300 hover:dark:text-white">
                                مقالات
                            </a>
                            <span class="text-zinc-600 dark:text-zinc-300">
                                <svg class="h-5 w-5">
                                    <use xlink:href="#chevron-left"></use>
                                </svg>
                            </span>
                        </li>
                    </ol>
                </nav>
            </div>
            <!-- Mobile Options Section -->
            <div class="mb-6 flex items-center justify-center gap-x-4 md:hidden">
                <!-- Filter -->
                <button aria-controls="shop-filter-drawer-navigation"
                    class="flex w-full items-center gap-x-4 rounded-lg bg-white px-4 py-3 text-sm text-zinc-700 dark:bg-zinc-900 dark:text-white xs:text-base"
                    data-drawer-show="shop-filter-drawer-navigation" data-drawer-placement="bottom"
                    data-drawer-target="shop-filter-drawer-navigation" type="button">
                    <svg class="h-6 w-6">
                        <use xlink:href="#filter" />
                    </svg>
                    <div>فیلتر</div>
                </button>
                <!-- Sort -->
                {{-- <button aria-controls="shop-sort-drawer-navigation"
                    class="flex w-full items-center gap-x-4 rounded-lg bg-white px-4 py-3 text-sm text-zinc-700 dark:bg-zinc-900 dark:text-white xs:text-base"
                    data-drawer-show="shop-sort-drawer-navigation" data-drawer-placement="bottom"
                    data-drawer-target="shop-sort-drawer-navigation" type="button">
                    <svg class="h-6 w-6">
                        <use xlink:href="#sort" />
                    </svg>
                    <div>مرتب سازی</div>
                </button> --}}
            </div>

            <div class="grid grid-cols-12 grid-rows-[60px_min(500px,_1fr)] gap-4">
                <!-- Desktop Filter Section -->
                <div class="col-span-4 row-span-2 hidden md:block lg:col-span-3">
                    <div class="sticky top-32 mb-4 overflow-hidden rounded-lg bg-white shadow-base dark:bg-zinc-900">
                        <div dir="ltr"
                            class="flex max-h-[calc(95vh_-_100px)] flex-col overflow-y-auto overflow-x-hidden px-4 py-3">
                            <div dir="rtl">
                                <!-- Title -->
                                {{-- <div class="mb-6 flex items-center justify-between">
                                    <h3 class="text-zinc-700 dark:text-white xl:text-lg">
                                        فیلتر ها
                                    </h3>
                                    <button class="btn-primary-nobg py-2 text-sm">
                                        حذف همه
                                    </button>
                                </div> --}}
                                <ul class="space-y-6">
                                    <!-- Search -->
                                    {{-- <li>
                                        <label class="sr-only">Blog search</label>
                                        <input
                                            class="w-full rounded-lg border-none bg-gray-100 px-2 py-3 text-zinc-600 outline-none placeholder:text-sm placeholder:text-zinc-500 focus:ring-0 dark:bg-black dark:text-zinc-300 placeholder:dark:text-zinc-400"
                                            placeholder="جستجو در بین نتایج ..." type="text" />
                                    </li> --}}

                                    <!-- Categories -->
                                    <li>
                                        <details class="[&amp;_summary::-webkit-details-marker]:hidden group">
                                            <summary
                                                class="flex cursor-pointer items-center justify-between rounded-lg py-3 text-zinc-700 dark:text-white">
                                                <span> دسته بندی ها </span>
                                                <span class="shrink-0 transition duration-200 group-open:-rotate-90">
                                                    <svg class="h-5 w-5">
                                                        <use xlink:href="#chevron-left" />
                                                    </svg>
                                                </span>
                                            </summary>
                                            <ul
                                                class="mt-2 max-h-60 space-y-2 overflow-y-auto rounded-lg bg-gray-100 dark:bg-zinc-800">
                                                {{-- @foreach ($catblog as $item)
                                                <li>
                                                    <a class="flex items-center gap-x-2 rounded-lg px-4 py-2 text-zinc-700 dark:text-white"
                                                        href="{{ route('catblogs', $item) }}">
                                                        <span>{{ $item->name }}</span>
                                                        <svg class="h-5 w-5">
                                                            <use xlink:href="#chevron-left" />
                                                        </svg>
                                                    </a>
                                                </li>
                                                @endforeach --}}
                                                <li>
                                                    <a class="flex items-center gap-x-2 rounded-lg px-4 py-2 text-zinc-700 dark:text-white"
                                                        href="#">
                                                        <span> دسته بندی 1 </span>
                                                        <svg class="h-5 w-5">
                                                            <use xlink:href="#chevron-left" />
                                                        </svg>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="flex items-center gap-x-2 rounded-lg px-4 py-2 text-zinc-700 dark:text-white"
                                                        href="#">
                                                        <span> دسته بندی 2 </span>
                                                        <svg class="h-5 w-5">
                                                            <use xlink:href="#chevron-left" />
                                                        </svg>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="flex items-center gap-x-2 rounded-lg px-4 py-2 text-zinc-700 dark:text-white"
                                                        href="#">
                                                        <span> دسته بندی 3 </span>
                                                        <svg class="h-5 w-5">
                                                            <use xlink:href="#chevron-left" />
                                                        </svg>
                                                    </a>
                                                </li>
                                            </ul>
                                        </details>
                                    </li>
                                    <!-- Hot -->
                                    {{-- <li>
                                        <label class="flex cursor-pointer items-center justify-between py-3"
                                            for="onlyHotDesktop">
                                            <div class="text-zinc-700 dark:text-white">
                                                داغ‌ ترین ها
                                            </div>
                                            <div class="relative inline-flex cursor-pointer items-center">
                                                <input class="peer sr-only" id="onlyHotDesktop" type="checkbox" />

                                                <div
                                                    class="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:top-0.5 after:h-5 after:w-5 after:rounded-full after:bg-white after:transition-all after:content-[''] peer-checked:bg-emerald-500 peer-checked:after:translate-x-full peer-focus:ring-emerald-500 dark:bg-zinc-800 after:dark:bg-zinc-900 peer-checked:dark:bg-emerald-400 peer-focus:dark:ring-emerald-400">
                                                </div>
                                            </div>
                                        </label>
                                    </li> --}}
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-span-12 space-y-4 md:col-span-8 lg:col-span-9">
                    <!-- Desktop Sort Section -->
                    <div class="hidden md:block">
                        {{-- <div
                            class="flex h-14 items-center gap-x-2 rounded-lg bg-white px-2 text-zinc-600 shadow-base dark:bg-zinc-900 dark:text-zinc-300 lg:px-4">
                            <!-- Title -->
                            <div class="flex items-center gap-x-2 text-sm lg:text-base">
                                <svg class="h-6 w-6">
                                    <use xlink:href="#sort" />
                                </svg>
                                <p>مرتب سازی بر اساس</p>
                            </div>
                            <!-- Sort Buttons -->
                            <button
                                class="sort-button-active rounded-lg px-1 py-2 text-sm hover:bg-gray-100 hover:dark:bg-black lg:px-4">
                                جدید ترین
                            </button>
                            <button class="rounded-lg px-1 py-2 text-sm hover:bg-gray-100 hover:dark:bg-black lg:px-4">
                                پربازدید ترین
                            </button>
                        </div> --}}
                        <div class="mb-6">
                            <nav aria-label="Breadcrumb"
                                class="w-fit rounded-lg bg-white px-4 py-4 shadow-base dark:bg-zinc-900">
                                <ol class="flex flex-wrap items-center justify-center gap-x-2 gap-y-4">
                                    <li class="flex items-center gap-x-2">
                                        <a href="./index.html"
                                            class="text-sm text-zinc-600 hover:text-zinc-700 dark:text-zinc-300 hover:dark:text-white">
                                            مجد
                                        </a>
                                        <span class="text-zinc-600 dark:text-zinc-300">
                                            <svg class="h-5 w-5">
                                                <use xlink:href="#chevron-left"></use>
                                            </svg>
                                        </span>
                                    </li>
                                    <li class="flex items-center gap-x-2">
                                        <a href="/blog"
                                            class="text-sm text-zinc-600 hover:text-zinc-700 dark:text-zinc-300 hover:dark:text-white">
                                            مقالات
                                        </a>
                                        <span class="text-zinc-600 dark:text-zinc-300">
                                            <svg class="h-5 w-5">
                                                <use xlink:href="#chevron-left"></use>
                                            </svg>
                                        </span>
                                    </li>
                                </ol>
                            </nav>
                        </div>
                    </div>

                    <!-- Blogs Grid -->
                    <div class="grid grid-cols-2 gap-px gap-y-2 xs:gap-4 md:grid-cols-2 lg:grid-cols-3">
                        @foreach ($posts as $post)
                            <!-- Blog Card -->
                            <div
                                class="border-gradient group relative rounded-base p-px before:absolute before:-inset-px before:h-[calc(100%+2px)] before:w-[calc(100%+2px)] before:rounded-base">
                                <div>
                                    <a href="{{ route('blog', $post->slug) }}">
                                        <div class="relative rounded-xl bg-white p-2 shadow-base dark:bg-zinc-900">
                                            <!-- image -->
                                            <div class="mb-2 md:mb-5" draggable="false">
                                                <img alt="{{ $post->name }}"
                                                    class="mx-auto w-auto rounded-lg rounded-bl-3xl"
                                                    src="{{ $post->pic }}" />
                                            </div>
                                            <!-- title -->
                                            <div class="mb-2">
                                                <p
                                                    class="line-clamp-2 h-12 text-sm text-zinc-700 dark:text-white md:text-base">
                                                    {{ $post->name }}
                                                </p>
                                            </div>
                                            <div class="flex justify-end">
                                                <p class="text-xs text-emerald-500 dark:text-emerald-400 xs:text-sm">
                                                    {{ jdate($post->updated_at)->format('Y/m/d') }}
                                                </p>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                            <!-- Blog Card -->
                        @endforeach
                    </div>
                    <!-- Pagination -->
                    <div class="flex items-center justify-center gap-x-4 md:justify-end">
                        <!-- Previous page-->
                        <a class="pagination-button flex items-center justify-center" href="#">
                            <svg class="h-6 w-6">
                                <use xlink:href="#chevron-right"></use>
                            </svg>
                        </a>

                        <!-- Pages -->
                        <div class="flex items-center gap-x-2">
                            <a class="pagination-button pagination-button-active" href="#">
                                1
                            </a>
                            <p class="text-sm text-zinc-500 dark:text-zinc-400">...</p>

                            <a class="pagination-button" href="#"> 3 </a>
                            <a class="pagination-button" href="#"> 4 </a>

                            <p class="text-sm text-zinc-500 dark:text-zinc-400">...</p>

                            <a class="pagination-button" href="#"> 10 </a>
                        </div>
                        <!-- Next page-->
                        <a class="flex h-8 w-8 items-center justify-center rounded-full bg-white text-zinc-700 transition-all duration-200 hover:bg-emerald-500 hover:text-white dark:bg-zinc-900 dark:text-white hover:dark:bg-emerald-600"
                            href="#">
                            <svg class="h-6 w-6">
                                <use xlink:href="#chevron-left"></use>
                            </svg>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <!-- Mobile Filter Drawer -->
    <div aria-labelledby="shop-filter-drawer-navigation-label"
        class="fixed bottom-0 left-0 right-0 z-40 h-full w-full translate-y-full bg-white transition-transform duration-300 dark:bg-zinc-900"
        id="shop-filter-drawer-navigation" tabindex="-1">
        <div class="flex items-center justify-between gap-x-4 border-b border-gray-100 p-4 pb-5 dark:border-white/5">
            <h5 class="text-lg text-zinc-600 dark:text-zinc-300">فیلتر بلاگ</h5>
            <button aria-controls="user-account-drawer-navigation"
                class="inline-flex items-center rounded-lg bg-transparent p-1.5 text-sm text-zinc-600 hover:bg-zinc-100 hover:text-gray-900 dark:text-zinc-300 dark:hover:bg-black dark:hover:text-white"
                data-drawer-hide="shop-filter-drawer-navigation" type="button">
                <svg class="h-5 w-5">
                    <use xlink:href="#close" />
                </svg>

                <span class="sr-only">Close menu</span>
            </button>
        </div>

        <div class="h-full pb-[150px]">
            <ul class="h-full space-y-6 overflow-y-auto p-4">
                <!-- Search -->
                {{-- <li>
                    <label class="sr-only">Blog search</label>
                    <input
                        class="w-full rounded-lg border-none bg-gray-100 px-2 py-3 text-zinc-600 outline-none placeholder:text-sm placeholder:text-zinc-500 focus:ring-0 dark:bg-black dark:text-zinc-300 placeholder:dark:text-zinc-400"
                        placeholder="جستجو در بین نتایج ..." type="text" />
                </li> --}}

                <!-- Categories -->
                <li>
                    <details class="[&amp;_summary::-webkit-details-marker]:hidden group">
                        <summary
                            class="flex cursor-pointer items-center justify-between rounded-lg py-3 text-zinc-700 dark:text-white">
                            <span> دسته بندی ها </span>
                            <span class="shrink-0 transition duration-200 group-open:-rotate-90">
                                <svg class="h-5 w-5">
                                    <use xlink:href="#chevron-left" />
                                </svg>
                            </span>
                        </summary>
                        <ul class="mt-2 max-h-60 overflow-y-auto rounded-lg bg-gray-100 dark:bg-zinc-800">
                            <li>
                                <a class="flex items-center gap-x-2 rounded-lg px-4 py-3 text-zinc-700 dark:text-white"
                                    href="#">
                                    <span> دسته بندی 1 </span>
                                    <svg class="h-5 w-5">
                                        <use xlink:href="#chevron-left" />
                                    </svg>
                                </a>
                            </li>
                            <li>
                                <a class="flex items-center gap-x-2 rounded-lg px-4 py-3 text-zinc-700 dark:text-white"
                                    href="#">
                                    <span> دسته بندی 2 </span>
                                    <svg class="h-5 w-5">
                                        <use xlink:href="#chevron-left" />
                                    </svg>
                                </a>
                            </li>
                            <li>
                                <a class="flex items-center gap-x-2 rounded-lg px-4 py-3 text-zinc-700 dark:text-white"
                                    href="#">
                                    <span> دسته بندی 3 </span>
                                    <svg class="h-5 w-5">
                                        <use xlink:href="#chevron-left" />
                                    </svg>
                                </a>
                            </li>
                        </ul>
                    </details>
                </li>

                {{-- <li>
                    <label class="flex cursor-pointer items-center justify-between py-3" for="onlyHotMobile">
                        <div class="text-zinc-700 dark:text-white">داغ ترین ها</div>
                        <div class="relative inline-flex cursor-pointer items-center">
                            <input class="peer sr-only" id="onlyHotMobile" type="checkbox" />

                            <div
                                class="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:top-0.5 after:h-5 after:w-5 after:rounded-full after:bg-white after:transition-all after:content-[''] peer-checked:bg-emerald-500 peer-checked:after:translate-x-full peer-focus:ring-emerald-500 dark:bg-zinc-800 after:dark:bg-zinc-900 peer-checked:dark:bg-emerald-400 peer-focus:dark:ring-emerald-400">
                            </div>
                        </div>
                    </label>
                </li> --}}
            </ul>
        </div>

        <!-- Footer -->

        <div
            class="sticky bottom-0 left-0 right-0 flex items-center justify-between border-t border-gray-100 bg-white p-4 px-6 py-4 dark:border-white/5 dark:bg-zinc-900">
            <button class="btn-primary w-full py-3 text-sm" type="button">
                مشاهده 200 محصول
            </button>
        </div>
    </div>
@endsection

@section('js-page')
    <script defer src="/front/scripts/custom.js"></script>
@endsection