@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">
            <div class="mb-6 hidden md:block">
                <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="#"
                                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>
                            <p class="text-sm text-zinc-600 hover:text-zinc-700 dark:text-zinc-300 hover:dark:text-white">
                                {{ $post->name }} 
                            </p>
                        </li>
                    </ol>
                </nav>
            </div>
            <div class="mb-4 flex flex-wrap items-center gap-2 md:hidden">
                <div
                    class="flex items-center gap-x-1 text-sm font-light text-emerald-500 dark:text-emerald-400 sm:text-base md:text-base">
                    <a href="./index.html"> مجد </a>
                    <svg class="h-5 w-5">
                        <use xlink:href="#chevron-left"></use>
                    </svg>
                </div>
                <div
                    class="flex items-center gap-x-1 text-sm font-light text-emerald-500 dark:text-emerald-400 sm:text-base md:text-base">
                    <a href="./index.html"> وبلاگ </a>
                    <svg class="h-5 w-5">
                        <use xlink:href="#chevron-left"></use>
                    </svg>
                </div>
                <div
                    class="line-clamp-1 text-sm font-light text-emerald-500 dark:text-emerald-400 sm:text-base md:text-base">
                    {{ $post->name }}
                </div>
            </div>
            <div class="grid grid-cols-12 grid-rows-[60px_min(500px,_1fr)] gap-4">
                <div class="col-span-12 space-y-4 md:col-span-8 lg:col-span-9">
                    <div class="rounded-lg bg-white p-3 shadow-base dark:bg-zinc-900 md:p-5">
                        <h1 class="mb-8 font-medium text-zinc-700 dark:text-white md:text-xl">
                            {{ $post->name }}
                        </h1>

                        <div class="mb-8 flex flex-col items-center justify-between gap-4 xs:flex-row">
                            <div class="flex items-center gap-x-2 text-sm text-zinc-600 dark:text-zinc-300">
                                <div class="flex items-center gap-x-2">
                                    <svg class="h-5 w-5">
                                        <use xlink:href="#user" />
                                    </svg>
                                    <p class="font-medium">{{ $post->user->nf }}</p>
                                </div>
                                <div class="h-3 w-px rounded-full bg-gray-200 dark:bg-white/5"></div>
                                <div>{{ jdate($post->created_at)->format('Y-m-d') }}</div>
                            </div>
                            <div>
                                <button id="dropdownMenuCopySocialShareLink" data-dropdown-toggle="copy-social-share-link"
                                    data-tooltip-target="share-on-social" type="button" class="btn-primary-nobg">
                                    <svg class="h-5 w-5">
                                        <use xlink:href="#social-share" />
                                    </svg>
                                    اشتراک گذاری
                                </button>
                                <!-- Dropdown menu -->
                                <div class="z-10 !ml-5 hidden w-50 overflow-hidden rounded-lg border border-gray-100 bg-white shadow-base dark:border-white/5 dark:bg-zinc-900"
                                    id="copy-social-share-link">
                                    <ul class="space-y-2 p-2">
                                        <li>
                                            <button type="button" data-link="https://www.google.com"
                                                onclick="copyToClipboardSocialShareDesktop(this)"
                                                class="flex w-full items-center justify-between rounded-lg px-4 py-3 text-sky-500 hover:bg-sky-500/10 dark:text-sky-400 dark:hover:bg-sky-400/10">
                                                <div class="flex items-center gap-x-2">
                                                    <svg class="h-6 w-6">
                                                        <use xlink:href="#copy"></use>
                                                    </svg>
                                                    <span id="copyToClipboardSocialShareText">
                                                        کپی کردن لینک
                                                    </span>
                                                </div>
                                            </button>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="mb-8">
                            <img src="{{$post->pic}}" alt="blog" class="w-full rounded-xl" />
                        </div>
                        <div class="leading-loose text-zinc-600 dark:text-zinc-300">
                            <p class="mb-6">
                                {!! $post->content !!}
                            </p>
                            <p class="mb-6">
                                {!! $post->fullcontent !!}
                            </p>
                        </div>
                    </div>
                </div>
                <!-- 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">
                        <!-- related Blogs -->
                        <div class="mb-8 rounded-lg bg-white px-2 py-3 shadow-base dark:bg-zinc-900 xl:px-4">
                            <p class="mb-4 text-center text-sm font-medium text-zinc-700 dark:text-white xl:text-base">
                                مطالب مرتبط
                            </p>
                            <ul class="space-y-8">
                                @foreach ($posts as $item)
                                <li>
                                    <a href="#">
                                        <div class="flex gap-x-2 xl:gap-x-4">
                                            <div class="min-w-fit">
                                                <img src="{{ $item->pic }}" alt="blog"
                                                    class="w-25 rounded-xl xl:w-32" />
                                            </div>
                                            <div class="flex flex-col gap-y-2">
                                                <p
                                                    class="line-clamp-2 text-sm text-zinc-600 dark:text-zinc-300 xl:text-base">
                                                    {{ $item->name }}
                                                </p>
                                                <p class="text-xs text-zinc-500 dark:text-zinc-400 xl:text-sm">
                                                    {{ jdate($post->updated_at)->format('Y/m/d') }}
                                                </p>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                @endforeach
                                <li>
                                    <a href="/blog" class="btn-primary py-2">
                                        مشاهده همه ( 20 )
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <!-- hot Blogs -->
                        <div class="mb-8 rounded-lg bg-white px-2 py-3 shadow-base dark:bg-zinc-900 xl:px-4">
                            <p class="mb-4 text-center text-sm font-medium text-zinc-700 dark:text-white xl:text-base">
                                مطالب محبوب
                            </p>
                            <ul class="space-y-8">
                                @foreach ($posts as $item)
                                    <li>
                                        <a href="{{ route('blog', $item->slug) }}">
                                            <div class="flex gap-x-2 xl:gap-x-4">
                                                <div class="min-w-fit">
                                                    <img src="{{ $item->pic }}" alt="blog"
                                                        class="w-25 rounded-xl xl:w-32" />
                                                </div>
                                                <div class="flex flex-col gap-y-2">
                                                    <p
                                                        class="line-clamp-2 text-sm text-zinc-600 dark:text-zinc-300 xl:text-base">
                                                        {{ $item->name }}
                                                    </p>
                                                    <p class="text-xs text-zinc-500 dark:text-zinc-400 xl:text-sm">
                                                        {{ jdate($item->updated_at)->format('Y/m/d') }}
                                                    </p>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                        <!-- Categories Blogs -->
                        <div class="mb-8 rounded-lg bg-white px-2 py-3 shadow-base dark:bg-zinc-900 xl:px-4">
                            <p class="mb-4 text-center text-sm font-medium text-zinc-700 dark:text-white xl:text-base">
                                دسته‌بندی ها
                            </p>
                            <ul class="space-y-4">
                                @foreach ($catblog as $item)
                                    <li>
                                        <a href="{{ route('catblogs', $item) }}" class="group py-2">
                                            <div class="flex items-center justify-between">
                                                <p
                                                    class="flex items-center gap-x-2 text-sm text-zinc-600 transition-all duration-200 group-hover:text-zinc-700 dark:text-zinc-300 group-hover:dark:text-white xl:text-base">
                                                    <svg class="h-4 w-4">
                                                        <use xlink:href="#chevron-left" />
                                                    </svg>
                                                    {{ $item->name }}
                                                </p>
                                                <div
                                                    class="w-6 rounded-lg bg-emerald-500 py-px text-center text-sm font-medium text-white dark:bg-emerald-600">
                                                    20
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection

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