@push('style_css')
<style>
    .max-w-5xl {
        max-width: 1600px !important;
    }

    .max-w-4xl {
        max-width: 1400px !important;
    }


    @media screen and (max-width: 1024px) {

        #contentblog h1,
        h2,
        h3,
        h4 {
            color: #16205b !important;
            word-spacing: -2px;
        }

        #contentblog h1 {
            font-size: 26px !important;
        }

        #contentblog h2 {
            font-size: 20px !important;
            word-spacing: -2px;
        }

        #contentblog h3 {
            font-size: 18px !important;
        }

        #contentblog h4 {
            font-size: 17px !important;
        }

        #contentblog p {
            color: #000000 !important;
            font-size: 16px !important;
            word-spacing: -2px;
        }


        .linehieght h1,
        h2,
        h3,
        h4 {
            line-height: 33px !important
        }

        .linehieght p {
            line-height: 40px !important
        }
    }

    #contentblog h1,
    h2,
    h3,
    h4 {
        color: #16205b;


    }

    input:focus {
        outline: none;
        box-shadow: 0 0 0 2px black;
    }

    #contentblog p a {
        text-decoration-line: underline;
        position: relative;
        text-underline-offset: 5px;
        color: #005eb9;
    }

    #contentblog h1 a {
        text-decoration-line: underline;
        text-underline-offset: 5px;
        position: relative;

        color: #005eb9;
    }

    #contentblog h2 a {
        text-decoration-line: underline;
        text-underline-offset: 5px;
        position: relative;

        color: #005eb9;
    }

    #contentblog h3 a {
        text-decoration-line: underline;
        text-underline-offset: 5px;
        position: relative;
        color: #005eb9;
    }

    #contentblog h4 a {
        text-decoration-line: underline;
        text-underline-offset: 5px;
        position: relative;
        color: #005eb9;
    }


    .linehieght h1,
    {
    line-height: 40px
    }

    .linehieght h2,
    h3 {
        line-height: 40px
    }

    .linehieght p {
        line-height: 40px
    }

    #contentblog h1 {
        font-size: 40px;
        line-height: 50px
    }

    #contentblog h2 {
        font-size: 24px;
        font-weight: bold;
    }

    #contentblog h3 {
        font-size: 22px;
        font-weight: bold;
    }

    #contentblog h4 {
        font-size: 20px;
        font-weight: bold;
    }

    #contentblog p {
        color: #121A49;
        font-size: 18px;
    }


    img {
        border-radius: 0.75rem;
    }
</style>

<style>
    .sticky-sidebar {
        position: -webkit-sticky;
        position: sticky;
    }

    .box-slider {
        transition: transform 0.3s ease-in-out;
    }

    .loading-overlay {

        background: rgba(255, 255, 255, 0);
        padding: 5px 10px;
        border: 1px solid #dddddd00;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        z-index: 10;
        font-weight: bold;
        color: #005cb92c;
    }

    .loaded-content-overlay {
        position: absolute;

        background: rgba(255, 255, 255, 0);
        padding: 10px;
        border: 1px solid #dddddd00;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(255, 255, 255, 0);
        z-index: 10;
        max-height: 500px;
        max-width: 400px;
    }
</style>
@endpush
@php
if (!is_null($blog->content_id)) {
$parent = App\Models\Blog::withoutGlobalScope('filtered')->find($blog->content_id);
} else {
$parent = $blog;
}
@endphp
@section('title')
{{ $blog->subject }} -مجله خبری سرمایه گذاری اهرم
@endsection
@section('metaSEO')
<link rel="canonical" href="{{ url()->current().'/' }}" />
<meta name="description" content="{{ Str::limit($blog->preview, 255, '') }}" />
<meta property="og:locale" content="fa_IR" />
<meta property="og:type" content="article" />
<meta property="og:title" content="{{ $blog->subject }} - مجله خبری سرمایه گذاری اهرم " />
<meta property="og:description" content="{{ Str::limit($blog->preview, 255, '') }}" />
<meta property="og:url" content="{{ url()->current() }}" />
<meta property="og:site_name" content="مجله خبری سرمایه گذاری اهرم " />
<meta property="article:published_time" content="{{ $blog->published_at->setTimezone('Asia/Tehran')->toAtomString() }}" />
<meta property="article:modified_time" content="{{ $blog->updated_at->setTimezone('Asia/Tehran')->toAtomString() }}" />
<meta property="og:image" content="{{ env('APP_URL_IMAGE').'images/'.$blog->image  }}" />
<meta property="og:image:type" content="image/jpeg" />
<meta name="author" content="{{ $blog->user->full_name }}" />
<meta property="og:site_name" content="مجله خبری سرمایه گذاری اهرم " />
<meta property="article:section" content="{{ $blog->category->title }}" />
<meta property="og:image:width" content="1280" />
<meta property="og:image:height" content="720" />
<meta property="og:image:alt" content="{{ $blog->subject }}" />
<script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@graph": [{
                "@type": "Article",
                "mainEntityOfPage": {
                    "@type": "WebPage",
                    "@id": "<?php echo url()->current(); ?>"
                },
                "headline": <?php echo json_encode($blog->subject, JSON_UNESCAPED_UNICODE); ?>,
                "description": <?php echo json_encode(Str::limit($blog->preview, 255, ''), JSON_UNESCAPED_UNICODE); ?>,
                "image": {
                    "@type": "ImageObject",
                    "url": "<?php echo  env('APP_URL_IMAGE') . 'images/' . $blog->image; ?>",
                    "width": "1280",
                    "height": "720"
                },
                "author": {
                    "@type": "Organization",
                    "name": "<?php echo $blog->user->full_name; ?>"
                },
                "publisher": {
                    "@type": "Organization",
                    "name": "سرمایه گذاری اهرم",
                    "logo": {
                        "@type": "ImageObject",
                        "url": "<?php echo env('APP_URL_IMAGE') . 'images/static/logo.png/'; ?>",
                        "width": "80",
                        "height": "80"
                    }
                },
                "datePublished": "<?php echo \Carbon\Carbon::parse($blog->published_at)->format('Y-m-d'); ?>",
                "dateModified": "<?php echo \Carbon\Carbon::parse($blog->updated_at)->format('Y-m-d'); ?>"
            }
            <?php if (!empty($questions) && count($questions) > 0): ?>, {
                    "@type": "FAQPage",
                    "mainEntity": [<?php foreach ($questions as $index => $faq): ?> {
                                "@type": "Question",
                                "name": <?php echo json_encode($faq->name, JSON_UNESCAPED_UNICODE); ?>,
                                "acceptedAnswer": {
                                    "@type": "Answer",
                                    "text": <?php echo json_encode($faq->answer, JSON_UNESCAPED_UNICODE); ?>
                                }
                            }
                            <?php if ($index != count($questions) - 1): ?>, <?php endif; ?> <?php endforeach; ?>
                    ]
                }
            <?php endif; ?>, {
                "@type": "BreadcrumbList",
                "itemListElement": [{
                    "@type": "ListItem",
                    "position": 1,
                    "name": "مجله خبری سرمایه گذاری اهرم",
                    "item": "<?php echo env('APP_URL'); ?>"
                }, {
                    "@type": "ListItem",
                    "position": 2,
                    "name": "<?php echo $blog->category->title; ?>",
                    "item": "<?php echo $blog->notBlog == 1 ? route('NewsCategory.show', ['slug' => $blog->category->slug]) : route('CategoryBlog.index', ['slug' => $blog->category->slug]); ?>"
                }, {
                    "@type": "ListItem",
                    "position": 3,
                    "name": <?php echo json_encode($blog->subject, JSON_UNESCAPED_UNICODE); ?>,
                    "item": "<?php echo route('detail', ['slug' => $blog->slug]); ?>"
                }]
            }
        ]
    }
</script>

@endsection



<div x-data="detail" class=" mt-10 lg:mt-0">

    <div id="targetElementId" class="max-w-5xl mx-auto">
        <div class="w-full   p-6 bg-white flex lg:flex-row flex-col gap-4 justify-evenly  border-b">
            <h1 style="font-variation-settings: 'wght' 700;"
                class=" text-[20px] lg:text-[24px] lg:hidden break-words font-bold text-[#16205B]  ">
                {{ $blog->subject }}
            </h1>
            <div class="w-[100%] lg:w-[45%]  lg:flex hidden    flex-col items-center ">
                <div class="flex h-full flex-col me-auto gap-3">
                    <div class="flex h-full me-auto w-full">

                        <div class="  flex me-auto flex-col justify-end h-full">
                            <div class="w-full flex me-auto flex-col gap-4">


                                <h1 style="font-variation-settings: 'wght' 700;"
                                    class=" text-[20px] lg:text-[40px] hidden lg:block break-words font-bold text-[#16205B]  ">
                                    {{ $blog->subject }}
                                </h1>
                                <div class="lg:block hidden"
                                    style="font-variation-settings: 'wght' 500; text-align:justify"
                                    class=" text-[#16205B]">
                                    {{ $blog->preview }}
                                </div>
                                <div class="hidden lg:flex gap-[3px]">
                                    <div class="flex flex-col ml-1 justify-center">
                                        <img class="rounded-full bg-cover bg-center  size-8"
                                            src="{{ env('APP_URL_IMAGE').'images/static/'. $blog->user->picture }}" alt="">
                                    </div>
                                    <div style="font-variation-settings: 'wght' 500;"
                                        class="text-xs text-gray-600 items-center flex flex-col justify-center">نوشته
                                        شده
                                        توسط {{ $blog->user->full_name }}
                                    </div>
                                    <span style="font-variation-settings: 'wght' 500;"
                                        class="text-xs text-[#A0A4BC] flex flex-col justify-center">|</span>
                                    <div style="font-variation-settings: 'wght' 500;"
                                        class="text-xs text-gray-600 flex flex-col justify-center">
                                        {{ jalaliDate($blog->published_at, '%d %B، %Y') }}
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-[100%] lg:w-[55%]">
                <img class="w-[100%] lg:w-[80%] mx-auto my-auto h-[95%] rounded-xl"
                    src="{{ env('APP_URL_IMAGE').'images/'.$blog->image  }}" alt="{{ $blog->subject }}">
            </div>
            <div class="flex lg:hidden gap-[3px]">
                <div class="flex flex-col ml-1 justify-center">
                    <img class="rounded-full bg-cover bg-center  size-8"
                        src="{{ env('APP_URL_IMAGE').'images/static/'. $blog->user->picture  }}" alt="">
                </div>
                <div style="font-variation-settings: 'wght' 500;"
                    class="text-xs text-gray-600 items-center flex flex-col justify-center">نوشته
                    شده
                    توسط {{ $blog->user->full_name }}
                </div>
                <span style="font-variation-settings: 'wght' 500;"
                    class="text-xs text-[#A0A4BC] flex flex-col justify-center">|</span>
                <div style="font-variation-settings: 'wght' 500;"
                    class="text-xs text-gray-600 flex flex-col justify-center">
                    {{ jalaliDate($blog->published_at, '%d %B، %Y') }}
                </div>

            </div>
        </div>
    </div>

    <div class="max-w-5xl mx-auto">
        <div class="mb-10  mt-0 lg:mt-10 w-full   flex flex-col gap-5 bg-white text-black p-6" x-data="{ like_status: '{{ session()->get('blog-' . $blog_id) }}' }">
            @if ($blog)

            <div class=" grid grid-cols-8 justify-between  items-start  gap-6">

                <div id="scroll" class="col-span-8 lg:col-span-5 ">
                    <div class="text-black   linehieght " id="contentblog">
                        {!! $blog->content !!}
                    </div>


                    <div id="blog-overlay" class="loaded-content-overlay" style="display: none;">
                        @if ($loadedContent)
                        @endif
                        @if ($isLoading)
                        <div class="loading-overlay">
                            در حال بارگذاری...
                        </div>
                        @endif
                    </div>


                    <br class="hidden lg:block"><br class="hidden lg:block">
                    <div class="  flex-wrap gap-2 items-center  hidden lg:flex">


                        @if ($blog->notBlog == null || $blog->notBlog == 0)

                        @foreach ($blog->categories() as $category)
                        <a href="{{ route('CategoryBlog.index', ['slug' => $category->slug])  }}"
                            wire:navigate
                            class="flex text-[12px] lg:text-[15px] px-4 py-1   bg-slate-200 gap-2 w-max text-black rounded-[15px]   items-center"
                            aria-current="page"> {{ $category->title }} </a>
                        @endforeach
                        @endif

                        @if ($blog->notBlog == 1)
                        @foreach ($blog->categories() as $category)
                        @if (!is_null($category->parent_id))
                        @php
                        $parent = App\Models\Category::where('id', $category->parent_id)->first();
                        @endphp


                        <a href="{{ route('NewsCategory.show', ['slug' => $category->slug])  }}"
                            wire:navigate
                            class="flex text-[12px] lg:text-[15px] px-4 py-1   bg-slate-200 gap-2 w-max text-black rounded-[15px]   items-center"
                            aria-current="page"> {{ $category->title }} </a>
                        @endif

                        @if (!is_null($category->parent))
                        @if (is_null($category->parent_id))
                        <a href="{{ route('NewsCategory.index', ['slug' => $category->slug]) }}"
                            wire:navigate
                            class="flex text-[12px] lg:text-[15px] px-4 py-1   bg-slate-200 gap-2 w-max text-black rounded-[15px]   items-center"
                            aria-current="page"> همه </a>
                        @endif
                        @endif
                        @endforeach
                        @endif
                    </div>
                    <div class="flex gap-2 mt-7 items-center content-center">
                        <div style="font-variation-settings: 'wght' 600;line-height: 32px;letter-spacing: -0.5px;"
                            class="-tracking-[.5px] text-base ml-2.5 text-[#16205B]">
                            اشتراک گذاری:
                        </div>
                        <div class="flex gap-2 items-center content-center">

                            <a href="https://t.me/share/url?url={{ url()->current() }}">
                                <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="18"
                                    height="18" viewBox="0 0 512.000000 512.000000"
                                    preserveAspectRatio="xMidYMid meet">
                                    <g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
                                        fill="#6A7196" stroke="none">
                                        <path d="M4860 4841 c-86 -27 -4742 -1887 -4772 -1907 -64 -41 -99 -136 -79
                                                    -211 13 -49 56 -106 96 -127 17 -9 306 -122 644 -251 338 -129 616 -236 618
                                                    -238 2 -2 82 -302 178 -666 96 -364 180 -671 186 -684 49 -96 175 -139 269
                                                    -92 14 7 182 126 373 264 l349 250 91 -63 c319 -220 1190 -807 1218 -822 22
                                                    -12 56 -18 96 -19 52 0 68 4 105 30 26 18 52 48 65 75 30 60 827 4236 820
                                                    4292 -16 120 -144 204 -257 169z m-900 -835 c-36 -35 -488 -469 -1005 -966
                                                    -1094 -1049 -1090 -1046 -1100 -1090 -4 -17 -10 -28 -14 -23 -4 4 -32 100 -61
                                                    212 -57 215 -80 265 -138 295 -16 8 -212 85 -437 171 -225 86 -415 160 -423
                                                    164 -10 6 277 124 879 364 492 196 1220 486 1619 646 399 159 729 290 735 290
                                                    5 1 -19 -28 -55 -63z m628 -3 c-5 -27 -143 -751 -307 -1611 -164 -859 -300
                                                    -1565 -303 -1567 -7 -8 -1608 1078 -1605 1087 3 10 2210 2137 2218 2137 3 1 2
                                                    -20 -3 -46z m-2444 -2433 c118 -80 215 -147 215 -150 0 -9 -320 -232 -325
                                                    -227 -3 3 -37 124 -75 269 -38 144 -72 272 -76 283 -5 18 -3 17 20 -5 14 -14
                                                    122 -90 241 -170z" />
                                    </g>
                                </svg>
                            </a>
                            <a href="https://twitter.com/share?text={{ url()->current() }}">
                                <svg width="18" height="18" fill="#6A7196"
                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">

                                    <path
                                        d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" />
                                </svg>
                            </a>

                            <a href="https://api.whatsapp.com/send?text={{ url()->current() }}">
                                <svg width="18" height="18" fill="#6A7196"
                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                                    <path
                                        d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7 .9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z" />
                                </svg>
                            </a>

                            <div x-data="{ copied: false }" class="relative pt-2">
                                <button
                                    @click="navigator.clipboard.writeText('{{ url()->current() }}'); copied = true; setTimeout(() => copied = false, 2000)">
                                    <svg class="p-[1px]" version="1.0" xmlns="http://www.w3.org/2000/svg"
                                        width="18" height="18" viewBox="0 0 26.000000 26.000000"
                                        preserveAspectRatio="xMidYMid meet">
                                        <g transform="translate(0.000000,26.000000) scale(0.100000,-0.100000)"
                                            fill="#6A7196" stroke="none">
                                            <path
                                                d="M142 225 c-35 -33 -36 -34 -13 -35 14 0 35 9 47 21 20 19 23 19 38 4
                                                15 -15 15 -19 -5 -46 -26 -37 -55 -52 -85 -45 -19 5 -24 2 -24 -13 0 -22 30
                                                -35 59 -26 28 9 101 91 101 115 0 26 -34 60 -60 60 -11 0 -37 -16 -58 -35z" />
                                            <path
                                                d="M49 131 c-53 -53 -60 -80 -29 -111 29 -29 55 -25 98 15 35 33 36 34
                                                13 35 -14 0 -35 -9 -47 -21 -20 -19 -23 -19 -38 -4 -15 15 -15 19 5 46 26 37
                                                55 52 85 45 19 -5 24 -2 24 13 0 19 -18 31 -47 31 -9 0 -38 -22 -64 -49z" />
                                        </g>
                                    </svg>
                                </button>

                                <div x-cloak x-show="copied"
                                    class="absolute top-0 left-full ml-2 text-center  w-[80px] bg-gray-800 text-white text-sm rounded px-2 py-1"
                                    x-transition>
                                    کپی شد
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="flex gap-5">

                    </div>
                </div>

                <sidebar id="sidebar"
                    class="hidden lg:grid col-span-8 lg:col-span-3 w-full gap-8 grid-cols-1 sticky-sidebar no-scrollbar">
                    <div class="box-slider no-scrollbar pr-6">
                        <div class="col-span-1 bg-gray-100 rounded-2xl p-3">
                            @if (count($lastNews) > 0)
                            <div class="z-50 ps-2 mb-4 w-fit flex items-center gap-2">
                                <div class="w-[8px] h-[23px] rounded-[2px] bg-[#084642]"></div>
                                <h2 class="text-[18px] font-bold">جدیدترین مقالات</h2>
                            </div>
                            @endif
                            <div class="grid grid-cols-1 relative pb-1 mr-2">
                                @foreach ($lastNews as $lastNew)
                                <div class="w-full flex items-center gap-4 p-2 h-[100px]">
                                    <a href="{{ route('detail', ['slug' => $lastNew->slug]) . '/' }}"
                                        wire:navigate class="relative col-span-2 w-[100px]   h-[80px]">
                                        <img class="w-full h-[80px] border rounded-xl"
                                            src="{{ env('APP_URL_IMAGE').'images/'.$lastNew->image   }}" alt="">
                                    </a>
                                    <div class="flex flex-col gap-2 py-4 justify-start w-[74%]">
                                        <a style="line-height:28px"
                                            href="{{ route('detail', ['slug' => $lastNew->slug]) . '/' }}"
                                            wire:navigate class="text-[#005eb9] font-bold text-[15px]">
                                            @php
                                            $preview = $lastNew->subject;
                                            @endphp
                                            {!! $preview !!}
                                        </a>

                                        <div class="flex gap-3 mb-2 text-white">
                                            <div
                                                class="text-xs text-gray-500 flex flex-col justify-center text-[12px]">
                                                {{ jdate($lastNew->published_at)->ago() }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                        <div class="col-span-1 mt-2 bg-gray-100 rounded-2xl p-3">
                            <div class="grid grid-cols-1 relative pb-1">
                                @if (count($specialNews) > 0)
                                <div class="z-50 ps-2 mb-4 w-fit flex items-center gap-2">
                                    <div class="w-[8px] h-[23px] rounded-[2px] bg-[#084642]"></div>
                                    <h2 class="text-[18px] font-bold">منتخب ترین مقالات</h2>
                                </div>
                                @endif
                                <div class="grid grid-cols-1 relative pb-1 mr-2">
                                    @foreach ($specialNews as $lastNew)
                                    <div class="w-full flex items-center gap-4 p-2 h-[100px]">
                                        <a href="{{ route('detail', ['slug' => $lastNew->slug]) . '/' }}"
                                            wire:navigate class="relative col-span-2 w-[100px] h-[80px]">
                                            <img class="w-full h-[80px] border rounded-xl"
                                                src="{{ env('APP_URL_IMAGE').'images/'.$lastNew->image   }}" alt="">
                                        </a>
                                        <div class="flex flex-col gap-2 py-4 justify-start w-[74%]">
                                            <a style="line-height:28px"
                                                href="{{ route('detail', ['slug' => $lastNew->slug]) . '/' }}"
                                                wire:navigate class="text-[#005eb9] font-bold text-[15px]">
                                                @php
                                                $preview = $lastNew->subject;
                                                @endphp
                                                {!! $preview !!}
                                            </a>

                                            <div class="flex gap-3 mb-2 text-white">
                                                <div class="text-xs text-gray-500 flex flex-col justify-center">
                                                    {{ jdate($lastNew->published_at)->ago() }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                        <div class=" col-span-1   mt-2  bg-gray-100 rounded-2xl p-3  ">
                            @if (count($lastNews2) > 0)
                            <div class="  z-50 ps-2 mb-4  w-fit    flex items-center gap-2  ">
                                <div class="w-[8px] h-[38px] bg-[#084642] rounded-[2px]">

                                </div>
                                <h2 class=" text-[20px] font-bold "> جدیدترین اخبار </h2>
                            </div>
                            @endif
                            <div class=" grid grid-cols-1 relative pb-1 mr-2 ">
                                @foreach ($lastNews2 as $lastNew)
                                <div class="w-full flex items-center gap-4 p-2 h-[100px] ">
                                    <a href="{{ route('detail', ['slug' => $lastNew->slug]) . '/' }}"
                                        wire:navigate class="relative   w-[100px]   h-[80px] ">
                                        <img class="w-full  h-[80px] border rounded-xl"
                                            src="{{ env('APP_URL_IMAGE').'images/'.$lastNew->image }}" alt="">
                                    </a>
                                    <div class="flex flex-col gap-2 py-4 w-[74%] justify-start ">
                                        <a style="line-height:28px"
                                            href="{{ route('detail', ['slug' => $lastNew->slug]) . '/' }}"
                                            wire:navigate class="text-blue-500 font-bold text-[15px]">
                                            @php
                                            $preview = $lastNew->subject;
                                            @endphp
                                            {!! $preview !!}
                                        </a>

                                        <div class="flex gap-3 mb-2 text-white ">
                                            <div
                                                class="text-xs text-gray-500 flex flex-col justify-center text-[12px]">
                                                {{ jdate($lastNew->published_at)->ago() }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endforeach

                            </div>
                        </div>

                    </div>
                </sidebar>

            </div>

            <br class="hidden lg:block">
            <hr>
            <br class="hidden lg:block">

            <aside class="  lg:w-[62%]">
                <div class="">
                    <div class="flex flex-col gap-5">

                        <div class="flex gap-2 h-min">
                            <div class="text-transparent bg-[#084642] w-[8px] h-[23px] rounded-[2px]  "> </div>
                            <span style="font-variation-settings: 'wght' 700;"
                                class="text-[18px] font-bold text-[#16205b] ">دیدگاه و نظرات خود را بنویسید.</span>
                        </div>

                        <form x-data="{
                                name: '',
                                message: '',
                                timeout: null,
                                errors: {},
                                selected: null,
                                imageName: '',
                                submit() {
                                    if (this.timeout) {
                                        return;
                                    }

                                    if (this.imageName == '') {
                                        this.errors.imageName = 'انتخاب تصویر الزامی است.';
                                    }
                                    if (this.message == '') {
                                        this.errors.message = 'متن نمی‌تواند خالی باشد.';
                                    }
                                    if (Object.keys(this.errors).length == 0) {
                                        $wire.set('image_url', this.imageName);
                                        $wire.comment();
                                    } else {
                                        this.timeout = setTimeout(() => {
                                            this.errors = {};
                                            this.timeout = null;
                                        }, 3000);
                                    }
                                }
                            }">
                            <div class=" border border-black flex flex-col   p-3 rounded-xl">
                                <input :class="errors.name ? 'border-red-500' : '  border-gray-400'"
                                    style="  box-shadow: none;" x-model="name" wire:model="comment_name"
                                    class="bg-transparent border     placeholder-gray-600   focus:border-1   focus:border-black focus:ring-1  my-3 p-3 resize-none  rounded-2xl text-black  "
                                    placeholder="نام شما">
                                <template x-if="errors.name_reply">
                                    <span class="text-red-500 text-sm" x-text="errors.name"></span>
                                </template>
                                <textarea :class="errors.message ? 'border-red-500' : ' border-gray-400'" x-model="message"
                                    wire:model="comment_message"
                                    class="bg-transparent   placeholder-gray-600 focus:border-1   focus:border-black focus:ring-1 pt-4   my-3 p-3  resize-none rounded-2xl text-black   "
                                    placeholder="نظر خود را بنویسید "></textarea>
                                <template x-if="errors.name_reply">
                                    <span class="text-red-500 text-sm" x-text="errors.comment_message"></span>
                                </template>
                                <div class="flex justify-between flex-col md:flex-row mt-3">
                                    <div id="selected_image" class="flex items-center gap-2    ">
                                        <template
                                            x-for="(src, index) in [' {{ env('APP_URL_IMAGE')}}images/static/profile/1.png', '{{ env('APP_URL_IMAGE')}}images/static/profile/2.png', '{{ env('APP_URL_IMAGE')}}images/static/profile/3.png', '{{ env('APP_URL_IMAGE')}}images/static/profile/4.png', '{{ env('APP_URL_IMAGE')}}images/static/profile/5.png', '{{ env('APP_URL_IMAGE')}}images/static/profile/6.png']"
                                            :key="index">
                                            <img :src="src"
                                                :class="selected === index ? 'border-green-500' : 'border-gray-200'"
                                                class="w-10 h-10 border-2 rounded-full"
                                                @click="selected = index; imageName = src.split('/').pop()">
                                        </template>
                                        <span :class="errors.imageName ? 'block' : ' hidden'"
                                            x-text="errors.imageName" class="text-red-500 text-sm"></span>
                                    </div>

                                    <button type="button"
                                        @click="show_notif(name.length > 0 &amp;&amp; message.length > 0) , submit()"
                                        class="bg-ahrom ms-auto  mt-3 md:mt-0  text-white text-[14px] p-2 sm:px-4 w-max rounded-xl"
                                        type="button">
                                        <div wire:loading wire:target="comment" class="  top-5 left-10">
                                            <div role="status">
                                                <svg aria-hidden="true"
                                                    class="w-5 h-5 text-gray-200 animate-spin fill-green-600"
                                                    viewBox="0 0 100 101" fill="none"
                                                    xmlns="http://www.w3.org/2000/svg">
                                                    <path
                                                        d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
                                                        fill="currentColor" />
                                                    <path
                                                        d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
                                                        fill="currentFill" />
                                                </svg>
                                                <span class="sr-only">Loading...</span>
                                            </div>
                                        </div>
                                        <span wire:loading.remove wire:target="comment">ارسال نظر</span>
                                    </button>
                                </div>

                            </div>
                        </form>

                        @php
                        $commentcount = $blog->comments()->where('status', 1)->get();
                        @endphp

                        @if (count($commentcount) > 0)
                        <span class="  mt-3 ps-3 text-[16px] text-[#16205b] ">تعداد نظرات (
                            {{ count($commentcount) }} مورد )</span>
                        @endif

                    </div>
                </div>

                <br class="hidden lg:block">

                <div class="my-10 flex flex-col gap-5 ">
                    @foreach ($comments as $comment)
                    @if ($comment['parent_id'] == null || $comment['parent_id'] == 0)
                    <div>
                        <div class=" @if (count($commentcount) > 1) border-b @endif"
                            x-data="{ comment_status: '{{ $comment['status'] }}', comment_seen: '{{ $comment['seen'] }}' }">
                            <div class=" flex flex-col gap-3 my-3 ">
                                <div x-data="{ reply_id: 0 }">
                                    <div class="relative  rounded-xl   flex gap-4 ">

                                        <div class="flex w-[64px] ">
                                            <img wire:ignore alt=""
                                                class="w-[50px] h-[50px] md:w-[60px] md:h-[60px] rounded-full"
                                                src="{{ env('APP_URL_IMAGE').'images/static/profile/'.$comment['image_url']  }}">
                                        </div>

                                        <div class="flex flex-col gap-5 w-full">
                                            <div class="flex items-center justify-between gap-1">
                                                <span
                                                    class="  text_class font-bold text-[14px]  text-[#6a7196]">
                                                    {{ Str::limit($comment['name'], 25, '...') }}</span>
                                                <span
                                                    class="  text_class font-bold  text-[14px] text-[#6a7196]   ">
                                                    {{ how_long($comment['created_at']) }}</span>
                                            </div>
                                            <p class="text-[#6a7196]   text-[14px]">
                                                {{ $comment['message'] }}
                                            </p>
                                            <div class="flex   gap-10">
                                                <div class="flex flex-col justify-end">
                                                    <button type="button"
                                                        @click="reply_id='{{ $comment['id'] }}'">
                                                        <div
                                                            class="flex gap-1 items-center content-center">
                                                            <svg version="1.0"
                                                                xmlns="http://www.w3.org/2000/svg"
                                                                width="16" height="16"
                                                                viewBox="0 0 16.000000 16.000000"
                                                                preserveAspectRatio="xMidYMid meet">
                                                                <g transform="translate(0.000000,16.000000) scale(0.100000,-0.100000)"
                                                                    fill="#4f5053" stroke="none">
                                                                    <path
                                                                        d="M131 123 c-2 -29 -27 -53 -56 -53 -18 0 -23 4 -18 16 8 21 -16 14
                                                                                                    -31 -8 -7 -12 -6 -21 3 -32 17 -20 32 -21 25 -1 -5 12 2 15 29 15 42 0 60 19
                                                                                                    54 57 -3 21 -4 22 -6 6z" />
                                                                </g>
                                                            </svg>
                                                            <span
                                                                class=" text-[14px] text-[#a0a4bc]">پاسخ</span>
                                                        </div>
                                                    </button>

                                                </div>

                                            </div>
                                        </div>

                                    </div>
                                    <div x-cloak @click.outside="reply_id=0"
                                        x-show="reply_id=='{{ $comment['id'] }}'" class="mt-5">
                                        <form x-data="{
                                                        name_reply: '',
                                                        message_reply: '',
                                                        timeout: null,
                                                        errors: {},
                                                        selected: null,
                                                        imageName: '',
                                                        submit() {

                                                            if (this.timeout) {
                                                                return;
                                                            }

                                                            if (this.imageName == '') {
                                                                this.errors.imageName = 'انتخاب تصویر الزامی است.';
                                                            }
                                                            if (this.message_reply == '') {
                                                                this.errors.message_reply = 'متن نمی‌تواند خالی باشد.';
                                                            }
                                                            if (Object.keys(this.errors).length == 0) {
                                                                $wire.set('image_url', this.imageName);

                                                                $wire.reply({{ $comment['id'] }}, { name: this.name_reply, message: this.message_reply });
                                                            } else {
                                                                this.timeout = setTimeout(() => {
                                                                    this.errors = {};
                                                                    this.timeout = null;
                                                                }, 3000);
                                                            }
                                                        }
                                                    }">
                                            <div
                                                class=" border border-black flex flex-col   p-3 rounded-xl">
                                                <input type="text"
                                                    :class="errors.name_reply ? 'border-red-500' : 'border-gray-400'"
                                                    style="  box-shadow: none;" x-model="name_reply"
                                                    wire:model="comment_name_reply"
                                                    class="bg-transparent    placeholder-gray-600 focus:border-1   focus:border-black focus:ring-1  my-3 p-3 resize-none   rounded-xl text-black "
                                                    placeholder="نام شما">

                                                <textarea :class="errors.message_reply ? 'border-red-500' : 'border-gray-400'" style="  box-shadow: none;"
                                                    x-model="message_reply" wire:model="comment_message_reply"
                                                    class="bg-transparent border placeholder-gray-600  focus:border-1 pt-4  focus:border-black focus:ring-1  h-[100px]   my-3 p-3 resize-none  rounded-2xl text-black"
                                                    placeholder="نظر خود را بنویسید "></textarea>


                                                <div
                                                    class="flex flex-col md:flex-row justify-between  mt-3 ">
                                                    <div id="selected_image"
                                                        class="flex items-center gap-2    ps-3">
                                                        <template
                                                            x-for="(src, index) in ['{{ env('APP_URL_IMAGE')}}images/static/profile/1.png', '{{ env('APP_URL_IMAGE')}}images/static/profile/2.png', '{{ env('APP_URL_IMAGE')}}images/static/profile/3.png', '{{ env('APP_URL_IMAGE')}}images/static/profile/4.png', '{{ env('APP_URL_IMAGE')}}images/static/profile/5.png', '{{ env('APP_URL_IMAGE')}}images/static/profile/6.png']"
                                                            :key="index">
                                                            <img :src="src"
                                                                :class="selected === index ? 'border-green-500' :
                                                                                'border-gray-200'"
                                                                class="w-10 h-10 border-2 rounded-full"
                                                                @click="selected = index; imageName = src.split('/').pop()">
                                                        </template>
                                                        <span
                                                            :class="errors.imageName ? 'block' : ' hidden'"
                                                            x-text="errors.imageName"
                                                            class="text-red-500 text-sm"></span>
                                                    </div>
                                                    <div
                                                        class="flex items-center gap-3  md:mt-0 mt-4 justify-end ">
                                                        <button @click="reply_id=0" type="button"
                                                            class="text-black text-sm p-2 px-4 w-max rounded-xl">
                                                            لغو
                                                            پاسخ
                                                        </button>
                                                        <button type="button" @click=" submit"
                                                            class="bg-ahrom p-2 sm:px-4 w-max rounded-xl md:mt-0  text-white text-sm">
                                                            <div wire:loading wire:target="reply"
                                                                class="  top-5 left-10">
                                                                <div role="status">
                                                                    <svg aria-hidden="true"
                                                                        class="w-5 h-5 text-gray-200 animate-spin fill-green-600"
                                                                        viewBox="0 0 100 101"
                                                                        fill="none"
                                                                        xmlns="http://www.w3.org/2000/svg">
                                                                        <path
                                                                            d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
                                                                            fill="currentColor" />
                                                                        <path
                                                                            d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
                                                                            fill="currentFill" />
                                                                    </svg>
                                                                    <span class="sr-only">Loading...</span>
                                                                </div>
                                                            </div>
                                                            <span wire:loading.remove
                                                                wire:target="reply">ارسال نظر</span>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>

                        @include('livewire.home._comment', [
                        'comments' => $comment,
                        'comment' => $comment,
                        'blog_id' => $blog_id,
                        ])
                    </div>
                    @endif
                    @endforeach
                </div>
            </aside>
            @endif
        </div>
    </div>

</div>

@script
<script>
    Alpine.data('detail', () => ({
        notification_class: ' -right-52 opacity-0 ',
        bottom: false,
        name: '',
        message: '',
        name_reply: '',
        message_reply: '',
        orders_exit_ip: true,
        adscount: @json($adscount ?? 0),
        ads: @json($ads ?? []),
        userIP: '',
        loadedData: {},

        init() {

            Livewire.on('reset', (value) => {
                this.name = '';
                this.message = '';
                this.name_reply = '';
                this.message_reply = '';


            });

            const links = document.querySelectorAll('#contentblog p a');
            const overlay = document.getElementById('blog-overlay');
            const loadedData = {};

            links.forEach(link => {
                link.addEventListener('mouseover', function(event) {
                    const slug = link.getAttribute('href').split('/').pop();

                    if (loadedData[slug]) {
                        updateOverlayPosition(link, loadedData[slug]);
                    } else {
                        Livewire.dispatch('loadBlogContent', {
                            slug: slug
                        });
                    }
                });

                link.addEventListener('mouseout', function(event) {
                    overlay.style.display = 'none';
                });
            });

            Livewire.on('blogContentLoaded', (data) => {
                setTimeout(() => {
                    const slug = data[0].slug;
                    loadedData[slug] = data[0];

                    const link = document.querySelector(
                        `#contentblog p a[href*="{{ env('APP_URL') . '/' }}${slug}"]`);
                    if (link) {
                        updateOverlayPosition(link, data[0]);
                    }
                }, 10);
            });

            function updateOverlayPosition(link, data) {
                const rect = link.getBoundingClientRect();
                const viewportHeight = window.innerHeight;
                const viewportWidth = window.innerWidth;

                if (rect.top < viewportHeight / 2) {
                    overlay.style.top = `${rect.top + window.scrollY - overlay.offsetHeight + 20}px`;
                } else {

                    overlay.style.top = `${rect.bottom + window.scrollY - 190 }px`;
                }

                if (rect.left < (viewportWidth / 2)) {
                    overlay.style.left = `${rect.left  + 260 }px`;

                } else {
                    overlay.style.left = `${rect.right + window.scrollX - overlay.offsetWidth - 380 }px`;
                }

                let imageLeft = 'md:flex-row';
                let roundednone = 'rounded-tl-none rounded-bl-none';
                let psps = 'md:ps-0';

                if (rect.left < (viewportWidth / 2)) {
                    imageLeft = 'md:flex-row-reverse';
                    psps = 'md:pe-0';
                    roundednone = 'rounded-tr-none rounded-br-none';
                } else {
                    imageLeft = 'md:flex-row';
                    psps = 'md:ps-0';
                    roundednone = 'rounded-tl-none rounded-bl-none';
                }

                overlay.style.display = 'block';
                overlay.innerHTML = `
                        <div style="align-items: stretch;" class="w-[650px] border-2 shadow border-gray-200 justify-between md:justify-normal flex px-2 py-2 md:py-0 md:px-0 flex-row-reverse  ${imageLeft} gap-2 border-b md:border md:rounded-xl md:bg-white md:shadow">
                            <a href=" " wire:navigate class="relative flex-grow w-[80px] md:w-[280px]  ${roundednone} ">
                                <img class="w-[80px] md:w-[280px] ${roundednone}   md:h-100 h-[80px] h-full rounded-xl" src="{{ env('APP_URL_IMAGE')}}images/${data.image}  " alt="">
                            </a>
                            <div class="flex md:w-full justify-start md:justify-start flex-col ${psps} gap-2 h-full md:p-4">
                                <div style="text-align:justify;" class="md:block text-[15px] w-[100%] hidden text-[#16205b]">
                                    ${data.preview}
                                </div>
                            </div>
                        </div>
                    `;
            }

            let lastScrollTop = 0;
            let stickyTop = 0;

            const sidebar = document.getElementById('sidebar');
            const sticky = document.querySelector(".sticky-sidebar");
            const sections = document.querySelectorAll('#sidebar .box-slider .col-span-1');


            if (sections.length === 0) {
                console.error("هیچ بخشی با کلاس .col-span-1 پیدا نشد!");
            } else {
                const lastSection = sections[sections.length - 1];
                const firstSection = sections[0];

                document.addEventListener("scroll", function() {
                    const currentScrollTop = window.pageYOffset || document.documentElement
                        .scrollTop;
                    const scrollDirection = currentScrollTop > lastScrollTop ? "down" : "up";
                    const scrollDistance = Math.abs(currentScrollTop - lastScrollTop);

                    const sidebarHeight = sidebar.offsetHeight;
                    const viewportHeight = window.innerHeight;

                    const lastSectionRect = lastSection.getBoundingClientRect();
                    const firsSectionRect = firstSection.getBoundingClientRect();


                    if (scrollDirection === "up") {


                        if (firsSectionRect.top >= 130) {
                            stickyTop = Math.max((-lastSectionRect.bottom - lastSectionRect.height +
                                130), Math.min(130, stickyTop));
                        } else {
                            stickyTop += scrollDistance / 2;
                        }
                        sticky.style.top = `${stickyTop}px`;
                    } else {
                        if (sidebarHeight > viewportHeight) {

                            if (lastSectionRect.top <= 130) {
                                // sticky.style.top = `-880px`;
                            } else {
                                stickyTop -= scrollDistance / 2;
                                sticky.style.top = `${stickyTop}px`;
                            }
                        } else {
                            if (lastSectionRect.top <= 350) {
                                // sticky.style.top = `130px`;

                            } else {
                                stickyTop -= scrollDistance / 2;
                                sticky.style.top = `${stickyTop}px`;
                            }
                        }
                    }




                    lastScrollTop = currentScrollTop <= 0 ? 0 : currentScrollTop;
                });

            }

            this.getUserIP();

            if (this.adscount > 0 && this.orders_exit_ip == false) {
                setTimeout(() => {
                    this.placeAdsDynamically();
                }, 1000);
            }
        },

        getUserIP() {
            if ('127.0.0.1' == this.$wire.ip) {
                this.orders_exit_ip = false;
            }
        },

        placeAdsDynamically() {
            if (this.ads.sidebar) {
                this.placeSidebarAd();
            }
            const length = Object.keys(this.ads.content).length;
            console.log(length);
            if (this.ads.content && length > 0) {
                const contentBlog = document.getElementById('contentblog');
                if (!contentBlog) return;

                const textLength = contentBlog.textContent.length;
                let maxAds = 1;

                if (textLength > 3000) maxAds = 5;
                else if (textLength > 2500) maxAds = 4;
                else if (textLength > 2000) maxAds = 3;
                else if (textLength > 1000) maxAds = 2;

                const availableAds = Math.min(maxAds, length);

                for (let i = 0; i < availableAds; i++) {
                    if (i === 0) {
                        this.placeFirstContentAd();
                    } else {
                        this.placeContentAd(i, contentBlog, availableAds);
                    }
                }
            }
        },

        placeSidebarAd() {
            const sidebar = document.getElementById('sidebar');
            if (!sidebar) return;

            const adContainer = document.createElement('div');
            adContainer.className = 'w-full mb-6';
            adContainer.innerHTML = `
                    <img class="w-full h-auto rounded-lg"
                        src="{{ env('APP_URL_IMAGE')}}images/${this.ads.sidebar.image_path}"
                        alt="${this.ads.sidebar.title}">
                `;

            sidebar.insertBefore(adContainer, sidebar.firstChild);
        },

        placeFirstContentAd() {
            const contentBlog = document.getElementById('contentblog');
            if (!contentBlog) return;

            const paragraphs = contentBlog.querySelectorAll('p');
            if (paragraphs.length === 0) return;


            let dynamicIndex = 0;
            let checkKey = false;
            Object.keys(this.ads.content).forEach(key => {
                if (checkKey == false) {
                    dynamicIndex = key;
                }
                checkKey = true;
            });

            const firstParagraph = paragraphs[0];
            const adContainer = document.createElement('div');
            adContainer.className = 'my-8 mx-auto w-full';
            adContainer.innerHTML = `
                    <img class="w-full h-auto rounded-lg"
                        src="{{  env('APP_URL_IMAGE')   }}images/${this.ads.content[dynamicIndex].image_path}"
                        alt="${this.ads.content[dynamicIndex].title}">
                `;

            firstParagraph.insertAdjacentElement('afterend', adContainer);
        },

        placeContentAd(index, contentBlog, totalAds) {
            const paragraphs = contentBlog.querySelectorAll('p');
            if (paragraphs.length === 0) return;

            let positionRatio;
            switch (index) {
                case 1:
                    positionRatio = 0.33;
                    break;
                case 2:
                    positionRatio = 0.66;
                    break;
                case 3:
                    positionRatio = 0.25;
                    break;
                case 4:
                    positionRatio = 0.75;
                    break;
                default:
                    positionRatio = index / (totalAds + 1);
            }

            const position = Math.floor(paragraphs.length * positionRatio);
            if (position >= paragraphs.length) return;

            const targetParagraph = paragraphs[position];
            const adContainer = document.createElement('div');
            adContainer.className = 'my-8 mx-auto w-full';
            adContainer.innerHTML = `
                    <img class="w-full h-auto rounded-lg"
                        src="{{ env('APP_URL_IMAGE')  }}images/${this.ads.content[index].image_path}"
                        alt="${this.ads.content[index].title}">
                `;

            targetParagraph.insertAdjacentElement('afterend', adContainer);
        },

        show_notif(f) {

            if (f) {

                this.notification_class = ' right-10 opacity-100';

            }

            setTimeout(() => {
                this.notification_class = '-right-52 opacity-0'
            }, 5000)
        },

        like_color_session(session) {
            return session == 'like' ? '#F24236' : '#E1EAF9'
        },

        comment_like_color(old_color) {
            return old_color == '#E1EAF9' ? '#F24236' : '#E1EAF9'

        }


    }))
</script>
@endscript