@extends('layouts.site.master')
@section('seo_title', $blog->seo_title ?? $blog->title)
@section('seo_desc', $blog->seo_description ?? strip_tags($blog->short_description ?? ''))
@section('content')
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body p-2">
                    <div class="p-2 pb-0 d-flex justify-content-between mb-2">
                        <p class="bold side-title position-relative max-w mb-2">
                            پاسخ به <span class="mint-green" id="reply-to-name">...</span>
                        </p>
                    </div>
                    <form action="{{route('site.comment.post')}}" method="post">
                        @csrf
                        <input type="hidden" name="commentable_id" value="{{$blog->id}}">
                        <input type="hidden" name="commentable_type" value="App\Models\Blog">

                        <input type="hidden" name="parent_id" id="reply-parent-id" value="">

                        <div class="row m-0 w-100">
                            <div class="col-6 p-2">
                                <label class="text-start w-100 font-14 mb-1 dark-gray light">
                                    نام و نام خانوادگی
                                </label>
                                <div class="position-relative">
                                    <input name="name" class="w-100 main-radius border login-input font-13"
                                           placeholder="مثلا: رضا علیمرادی" type="text">
                                </div>
                            </div>
                            <div class="col-6 p-2">
                                <label class="text-start w-100 font-14 mb-1 dark-gray light">
                                    شماره تماس
                                </label>
                                <div class="position-relative">
                                    <input name="mobile" dir="ltr" class="w-100 main-radius border login-input font-13"
                                           placeholder="۰۹۱۲۰۰۰۰۰۰۰" type="text">
                                </div>
                            </div>
                            <div class="col-12 p-2">
                                <label class="text-start w-100 font-14 mb-1 dark-gray light">
                                    توضیحات پاسخ
                                </label>
                                <textarea placeholder="نوشتن پاسخ..." name="message" rows="3"
                                          class="w-100 main-radius border login-input font-13" id=""></textarea>
                            </div>
                            <div class="col-12 p-2 pt-0 ms-auto">
                                <button
                                    class="first-page-btn-component w-100 d-flex justify-content-center py-2 font-14 text-white main-radius btn-dark-gray"
                                    type="submit">
                                    ثبت پاسخ
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <header class="p-2 mt-lg-4 mt-0">
        <div class="main-radius position-relative">
            <div class="container">
                <div class="row m-0 w-100 py-lg-5 py-0">
                    <div class="col-lg-8 col-12 p-0">
                        <h1 class="extra-bold mb-2 dark-gray font-30">
                            {{@$blog->metaData->H1 ?? @$blog->title}}
                        </h1>
                        <nav class="overflow-auto" aria-label="breadcrumb">
                            <ol class="breadcrumb mb-0 max-w">
                                <li class="breadcrumb-item">
                                    <a class="choral-filter font-14" href="{{route('site.home')}}">
                                        <img width="12" src="{{asset('assets/site/img/bread-home.svg')}}" alt="">
                                        خانه
                                    </a>
                                </li>
                                <li class="breadcrumb-item">
                                    <a class="choral-filter font-14" href="{{ route('site.blog.list') }}">
                                        مقالات
                                    </a>
                                </li>
                                @if($blog->category)
                                    <li class="breadcrumb-item">
                                        <a class="choral-filter font-14"
                                           href="{{ route('site.blog.category', $blog->category->url) }}">
                                            {{ $blog->category->title }}
                                        </a>
                                    </li>
                                @endif
                                <li class="breadcrumb-item active mint-green font-14" aria-current="page">
                                    {{$blog->title}}
                                </li>
                            </ol>
                        </nav>
                        <div class="d-lg-flex d-none align-items-center gap-3 mt-3">
                            @if($blog->author)
                                <span
                                    class="d-flex font-14 e-color gap-1 max rounded-pill border bg-white px-3 py-2 align-items-center">
                                    <img width="16" height="16"
                                         src="http://bertonix:8888/assets/new-site/img/ar-profile.svg"
                                         class="mb-1" alt="">
                                    {{$blog->author}}
                                </span>
                            @endif
                            @if($blog->getJalaliCreatedAtAttribute())
                                <span
                                    class="d-flex font-14 e-color gap-1 max rounded-pill border bg-white px-3 py-2 align-items-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
                                         xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" x="0" y="0"
                                         viewBox="0 0 512 512" style="enable-background:new 0 0 512 512"
                                         xml:space="preserve"
                                         class="">
                                        <g>
                                            <path
                                                d="M165.05 243.54c-3.88-.65-9.16-1.25-16.38-1.26-7.21 0-12.5.61-16.38 1.26-6.4 1.13-12.2 6.94-13.33 13.33-.65 3.88-1.25 9.16-1.26 16.38 0 7.21.61 12.5 1.26 16.38 1.13 6.4 6.94 12.2 13.33 13.33 3.88.65 9.16 1.25 16.38 1.26 7.21 0 12.5-.61 16.38-1.26 6.4-1.13 12.2-6.94 13.33-13.33.65-3.88 1.25-9.16 1.26-16.38 0-7.21-.61-12.5-1.26-16.38-1.13-6.4-6.94-12.2-13.33-13.33zM165.05 344.84c-3.88-.65-9.16-1.25-16.38-1.26-7.21 0-12.5.61-16.38 1.26-6.4 1.13-12.2 6.94-13.33 13.33-.65 3.88-1.25 9.16-1.26 16.38 0 7.21.61 12.5 1.26 16.38 1.13 6.4 6.94 12.2 13.33 13.33 3.88.65 9.16 1.25 16.38 1.26 7.21 0 12.5-.61 16.38-1.26 6.4-1.13 12.2-6.94 13.33-13.33.65-3.88 1.25-9.16 1.26-16.38 0-7.21-.61-12.5-1.26-16.38-1.13-6.4-6.94-12.2-13.33-13.33zM379.71 243.54c-3.88-.65-9.16-1.25-16.38-1.26-7.21 0-12.5.61-16.38 1.26-6.4 1.13-12.2 6.94-13.33 13.33-.65 3.88-1.25 9.16-1.26 16.38 0 7.21.61 12.5 1.26 16.38 1.13 6.4 6.94 12.2 13.33 13.33 3.88.65 9.16 1.25 16.38 1.26 7.21 0 12.5-.61 16.38-1.26 6.4-1.13 12.2-6.94 13.33-13.33.65-3.88 1.25-9.16 1.26-16.38 0-7.21-.61-12.5-1.26-16.38-1.13-6.4-6.94-12.2-13.33-13.33zM272.38 243.54c-3.88-.65-9.16-1.25-16.38-1.26-7.21 0-12.5.61-16.38 1.26-6.4 1.13-12.2 6.94-13.33 13.33-.65 3.88-1.25 9.16-1.26 16.38 0 7.21.61 12.5 1.26 16.38 1.13 6.4 6.94 12.2 13.33 13.33 3.88.65 9.16 1.25 16.38 1.26 7.21 0 12.5-.61 16.38-1.26 6.4-1.13 12.2-6.94 13.33-13.33.65-3.88 1.25-9.16 1.26-16.38 0-7.21-.61-12.5-1.26-16.38-1.13-6.4-6.94-12.2-13.33-13.33zM272.38 344.84c-3.88-.65-9.16-1.25-16.38-1.26-7.21 0-12.5.61-16.38 1.26-6.4 1.13-12.2 6.94-13.33 13.33-.65 3.88-1.25 9.16-1.26 16.38 0 7.21.61 12.5 1.26 16.38 1.13 6.4 6.94 12.2 13.33 13.33 3.88.65 9.16 1.25 16.38 1.26 7.21 0 12.5-.61 16.38-1.26 6.4-1.13 12.2-6.94 13.33-13.33.65-3.88 1.25-9.16 1.26-16.38 0-7.21-.61-12.5-1.26-16.38-1.13-6.4-6.94-12.2-13.33-13.33z"
                                                fill="#333333" opacity="1" data-original="#000000" class=""></path>
                                            <path
                                                d="M484.66 147.63c-8.53-48.3-51.75-92.24-99.88-102.07V25.24C384.78 11.3 373.48 0 359.54 0S334.3 11.3 334.3 25.24v12.92c-15.71-1.47-33.3-2.6-53.04-3.15v-9.77C281.26 11.3 269.96 0 256.02 0c-13.94 0-25.24 11.3-25.24 25.24v9.77c-19.74.54-37.33 1.68-53.04 3.15V25.24C177.74 11.3 166.44 0 152.5 0s-25.24 11.3-25.24 25.24v20.32C79.13 55.4 35.91 99.33 27.38 147.63c-4.97 29.87-9.62 70.52-9.68 126.03.06 55.51 4.71 96.16 9.68 126.03 8.69 49.22 53.4 93.92 102.62 102.62 29.87 4.97 70.52 9.62 126.03 9.68 55.51-.06 96.16-4.72 126.03-9.68 49.22-8.7 93.92-53.4 102.62-102.62 4.97-29.87 9.62-70.52 9.68-126.03-.06-55.51-4.72-96.16-9.68-126.03zM90.34 108c13.58-13.57 29.93-22.64 46.08-25.53 36.72-6.1 75.84-9.08 119.59-9.13 43.73.05 82.86 3.04 119.59 9.13 16.14 2.9 32.5 11.96 46.07 25.53s22.64 29.93 25.53 46.08c.06.34.11.68.16 1.02-154.3-8.44-301.62-3.71-382.79.4.08-.47.15-.95.23-1.42 2.9-16.14 11.96-32.5 25.53-46.07zM447.2 393.25c-2.89 16.15-11.96 32.5-25.53 46.08-13.58 13.58-29.94 22.64-46.08 25.53-36.73 6.09-75.85 9.08-119.59 9.13-43.74-.05-82.86-3.04-119.59-9.13-16.14-2.9-32.5-11.96-46.08-25.53S67.69 409.4 64.8 393.25c-6.09-36.7-9.08-75.82-9.13-119.59.03-28.37 1.31-54.78 3.86-79.86 79.86-4.2 233.19-9.52 392.91-.36 2.57 25.2 3.86 51.73 3.9 80.23-.05 43.75-3.04 82.87-9.13 119.59z"
                                                fill="#333333" opacity="1" data-original="#000000" class=""></path>
                                        </g>
                                    </svg> {{$blog->getJalaliCreatedAtAttribute()}}
                                </span>
                            @endif
                        </div>
                    </div>
                    <div class="col-lg-4 col-12 p-0">
                        <img class="w-100 main-radius d-lg-none d-block mt-3"
                             src="{{$blog->getImageFile()}}" alt="">
                        <div class="d-lg-none d-flex align-items-center gap-2 mt-3">
                            @if($blog->author)
                                <span
                                    class="d-flex font-14 e-color gap-1 max rounded-pill border bg-white px-2 py-1 align-items-center">
                            <img width="16" height="16" src="http://bertonix:8888/assets/new-site/img/ar-profile.svg"
                                 class="mb-1" alt="">
                           {{$blog->author}}
                        </span>
                            @endif
                            <span
                                class="d-flex font-14 e-color gap-1 max rounded-pill bg-white border px-2 py-1 align-items-center">
                            <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
                                 xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" x="0" y="0"
                                 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512" xml:space="preserve"
                                 class="">
                                <g>
                                    <path
                                        d="M165.05 243.54c-3.88-.65-9.16-1.25-16.38-1.26-7.21 0-12.5.61-16.38 1.26-6.4 1.13-12.2 6.94-13.33 13.33-.65 3.88-1.25 9.16-1.26 16.38 0 7.21.61 12.5 1.26 16.38 1.13 6.4 6.94 12.2 13.33 13.33 3.88.65 9.16 1.25 16.38 1.26 7.21 0 12.5-.61 16.38-1.26 6.4-1.13 12.2-6.94 13.33-13.33.65-3.88 1.25-9.16 1.26-16.38 0-7.21-.61-12.5-1.26-16.38-1.13-6.4-6.94-12.2-13.33-13.33zM165.05 344.84c-3.88-.65-9.16-1.25-16.38-1.26-7.21 0-12.5.61-16.38 1.26-6.4 1.13-12.2 6.94-13.33 13.33-.65 3.88-1.25 9.16-1.26 16.38 0 7.21.61 12.5 1.26 16.38 1.13 6.4 6.94 12.2 13.33 13.33 3.88.65 9.16 1.25 16.38 1.26 7.21 0 12.5-.61 16.38-1.26 6.4-1.13 12.2-6.94 13.33-13.33.65-3.88 1.25-9.16 1.26-16.38 0-7.21-.61-12.5-1.26-16.38-1.13-6.4-6.94-12.2-13.33-13.33zM379.71 243.54c-3.88-.65-9.16-1.25-16.38-1.26-7.21 0-12.5.61-16.38 1.26-6.4 1.13-12.2 6.94-13.33 13.33-.65 3.88-1.25 9.16-1.26 16.38 0 7.21.61 12.5 1.26 16.38 1.13 6.4 6.94 12.2 13.33 13.33 3.88.65 9.16 1.25 16.38 1.26 7.21 0 12.5-.61 16.38-1.26 6.4-1.13 12.2-6.94 13.33-13.33.65-3.88 1.25-9.16 1.26-16.38 0-7.21-.61-12.5-1.26-16.38-1.13-6.4-6.94-12.2-13.33-13.33zM272.38 243.54c-3.88-.65-9.16-1.25-16.38-1.26-7.21 0-12.5.61-16.38 1.26-6.4 1.13-12.2 6.94-13.33 13.33-.65 3.88-1.25 9.16-1.26 16.38 0 7.21.61 12.5 1.26 16.38 1.13 6.4 6.94 12.2 13.33 13.33 3.88.65 9.16 1.25 16.38 1.26 7.21 0 12.5-.61 16.38-1.26 6.4-1.13 12.2-6.94 13.33-13.33.65-3.88 1.25-9.16 1.26-16.38 0-7.21-.61-12.5-1.26-16.38-1.13-6.4-6.94-12.2-13.33-13.33zM272.38 344.84c-3.88-.65-9.16-1.25-16.38-1.26-7.21 0-12.5.61-16.38 1.26-6.4 1.13-12.2 6.94-13.33 13.33-.65 3.88-1.25 9.16-1.26 16.38 0 7.21.61 12.5 1.26 16.38 1.13 6.4 6.94 12.2 13.33 13.33 3.88.65 9.16 1.25 16.38 1.26 7.21 0 12.5-.61 16.38-1.26 6.4-1.13 12.2-6.94 13.33-13.33.65-3.88 1.25-9.16 1.26-16.38 0-7.21-.61-12.5-1.26-16.38-1.13-6.4-6.94-12.2-13.33-13.33z"
                                        fill="#333333" opacity="1" data-original="#000000" class=""></path>
                                    <path
                                        d="M484.66 147.63c-8.53-48.3-51.75-92.24-99.88-102.07V25.24C384.78 11.3 373.48 0 359.54 0S334.3 11.3 334.3 25.24v12.92c-15.71-1.47-33.3-2.6-53.04-3.15v-9.77C281.26 11.3 269.96 0 256.02 0c-13.94 0-25.24 11.3-25.24 25.24v9.77c-19.74.54-37.33 1.68-53.04 3.15V25.24C177.74 11.3 166.44 0 152.5 0s-25.24 11.3-25.24 25.24v20.32C79.13 55.4 35.91 99.33 27.38 147.63c-4.97 29.87-9.62 70.52-9.68 126.03.06 55.51 4.71 96.16 9.68 126.03 8.69 49.22 53.4 93.92 102.62 102.62 29.87 4.97 70.52 9.62 126.03 9.68 55.51-.06 96.16-4.72 126.03-9.68 49.22-8.7 93.92-53.4 102.62-102.62 4.97-29.87 9.62-70.52 9.68-126.03-.06-55.51-4.72-96.16-9.68-126.03zM90.34 108c13.58-13.57 29.93-22.64 46.08-25.53 36.72-6.1 75.84-9.08 119.59-9.13 43.73.05 82.86 3.04 119.59 9.13 16.14 2.9 32.5 11.96 46.07 25.53s22.64 29.93 25.53 46.08c.06.34.11.68.16 1.02-154.3-8.44-301.62-3.71-382.79.4.08-.47.15-.95.23-1.42 2.9-16.14 11.96-32.5 25.53-46.07zM447.2 393.25c-2.89 16.15-11.96 32.5-25.53 46.08-13.58 13.58-29.94 22.64-46.08 25.53-36.73 6.09-75.85 9.08-119.59 9.13-43.74-.05-82.86-3.04-119.59-9.13-16.14-2.9-32.5-11.96-46.08-25.53S67.69 409.4 64.8 393.25c-6.09-36.7-9.08-75.82-9.13-119.59.03-28.37 1.31-54.78 3.86-79.86 79.86-4.2 233.19-9.52 392.91-.36 2.57 25.2 3.86 51.73 3.9 80.23-.05 43.75-3.04 82.87-9.13 119.59z"
                                        fill="#333333" opacity="1" data-original="#000000" class=""></path>
                                </g>
                            </svg> {{$blog->getJalaliCreatedAtAttribute()}}
                        </span>
                        </div>
                    </div>
                </div>
            </div>
            <img height="233" style="z-index: -1; heigt:-webkit-fill-available;"
                 class="w-100 position-absolute top-0 end-0 start-0 bottom-0 object-fit-fill"
                 src="{{asset('assets/site/img/number-back.png')}}" alt="">
        </div>
    </header>
    <div class="container">
        <section>
            <div class="row mx-0 mt-3 w-100">
                <div class="col-lg-8 col-12 lh-lg Charcoal-gray p-2 font-14 discription">
                    {!! $blog->description !!}
                </div>
                <div class="col-lg-4 col-12 p-2" style="margin-top:-170px;">
                    <img class="w-100 main-radius d-lg-block d-none" src="{{asset($blog->getImageFile())}}"
                         alt="{{$blog->title}}">
                    @if($blog->related->count()>0)
                        <div>
                            <p class="bold my-4 font-20 side-title position-relative max-w">
                                مقالات مرتبط
                            </p>
                            @foreach($blog->related as $relatedBlog)
                                <a class="row m-0 d-lg-flex d-none flex-row w-100 p-2 bg-white border main-radius article-box mt-2"
                                   href="{{route('site.blog.detail',$relatedBlog->url)}}">
                                    <div class="overflow-hidden main-radius p-0 col-4">
                                        <img class="w-100 main-radius img transition h-100 object-fit-cover"
                                             src="{{$relatedBlog->getImageFile()}}" alt="{{$relatedBlog->title}}">
                                    </div>
                                    <div class="p-0 col-8 ps-2">
                            <span class="d-flex align-items-center light-gray gap-2 mt-2 font-12 light">
                                <img width="14" height="14" class="mb-1" src="{{asset('assets/site/img/date.svg')}}"
                                     alt="{{$relatedBlog->getJalaliCreatedAtAttribute()}}">
                                {{$relatedBlog->getJalaliCreatedAtAttribute()}}
                            </span>
                                        <p class="m-0 dark-gray mt-2 font-14 limit-2">
                                            {{$relatedBlog->title}}
                                        </p>
                                        <p class="m-0 light-gray mt-1 font-12 limit-2">
                                            {{ strip_tags($relatedBlog->short_description) }}
                                        </p>
                                        <span
                                            class="d-flex mint-green justify-content-end mt-2 align-items-center gap-2 font-10">
                                مشاهده بیشتر
                                <img width="6" height="9.75" src="{{asset('assets/site/img/article-more.svg')}}" alt="">
                            </span>
                                    </div>
                                </a>
                            @endforeach
                            <div class="swiper mySwiper-article-related d-lg-none d-block mt-4 pt-2">
                                <div class="swiper-wrapper">
                                    @foreach($blog->related as $relatedBlog)
                                        <div class="swiper-slide">
                                            <a class="row m-0 flex-column w-100 p-2 bg-white border main-radius article-box mt-2"
                                               href="{{route('site.blog.detail',$relatedBlog->url)}}">
                                                <div class="overflow-hidden main-radius p-0 col-12">
                                                    <img class="w-100 main-radius img transition h-100 object-fit-cover"
                                                         src="{{$relatedBlog->getImageFile()}}"
                                                         alt="{{$relatedBlog->title}}">
                                                </div>
                                                <div class="p-0 col-12">
                                        <span class="d-flex align-items-center light-gray gap-2 mt-2 font-12 light">
                                            <img width="14" height="14" class="mb-1"
                                                 src="{{asset('assets/site/img/date.svg')}}"
                                                 alt="{{$relatedBlog->getJalaliCreatedAtAttribute()}}">
                                             {{$relatedBlog->getJalaliCreatedAtAttribute()}}
                                        </span>
                                                    <p class="m-0 dark-gray mt-2 font-14 limit-2">
                                                        {{$relatedBlog->title}}
                                                    </p>
                                                    <p class="m-0 light-gray mt-1 font-12 limit-2">
                                                        {{ strip_tags($relatedBlog->short_description) }}
                                                    </p>
                                                    <span
                                                        class="d-flex mint-green justify-content-start mt-2 align-items-center gap-2 font-10">
                                            مشاهده بیشتر
                                            <img width="6" height="9.75"
                                                 src="{{asset('assets/site/img/article-more.svg')}}" alt="">
                                        </span>
                                                </div>
                                            </a>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>

            @if($blog->faqs->where('is_active', 1)->count() > 0)
                <div class="mt-4 p-2">
                    <p class="bold mb-3 font-20 side-title position-relative max-w">
                        سوالات متداول
                    </p>
                    <div class="accordion accordion-faq" id="blogFaqAccordion">
                        @foreach($blog->faqs->where('is_active', 1) as $faq)
                            <div class="accordion-item mb-2">
                                <h3 class="accordion-header" id="headingBlogFaq{{ $faq->id }}">
                                    <button class="accordion-button p-3 font-14 dark-gray @if(!$loop->first) collapsed @endif"
                                            type="button"
                                            data-bs-toggle="collapse"
                                            data-bs-target="#collapseBlogFaq{{ $faq->id }}"
                                            aria-expanded="{{ $loop->first ? 'true' : 'false' }}"
                                            aria-controls="collapseBlogFaq{{ $faq->id }}">
                                        <div class="in">{{ $faq->question }}</div>
                                    </button>
                                </h3>
                                <div id="collapseBlogFaq{{ $faq->id }}"
                                     class="accordion-collapse collapse @if($loop->first) show @endif"
                                     aria-labelledby="headingBlogFaq{{ $faq->id }}"
                                     data-bs-parent="#blogFaqAccordion">
                                    <div class="accordion-body p-3 font-14 light-gray">
                                        {{ $faq->answer }}
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif

            <div class="p-2 mt-4">
                <p class="bold mb-0 mt-lg-0 mt-4 font-20 side-title position-relative max-w">
                    ثبت نظر
                </p>
            </div>
            <div class="row mx-0 mt-3 w-100">
                <div class="col-md-4 col-12 mt-md-0 mt-3 ps-md-2 ps-0 p-2">
                    <div class="p-2 bg-white shadow-sm main-radius">
                        <p class="semi dark-gray text-center mt-2">
                            فرم ثبت نظر
                        </p>
                        <form action="{{route('site.comment.post')}}" method="post">
                            @csrf
                            <input type="hidden" name="commentable_id" value="{{$blog->id}}">
                            <input type="hidden" name="commentable_type" value="App\Models\Blog">
                            <div class="row m-0 w-100">
                                <div class="col-sm-6 col-12 p-2">
                                    <label class="text-start w-100 font-14 mb-1 dark-gray light">
                                        نام و نام خانوادگی
                                    </label>
                                    <div class="position-relative">
                                        <input name="name" class="w-100 main-radius border login-input font-13"
                                               placeholder="مثلا: رضا علیمرادی" type="text">
                                    </div>
                                </div>
                                <div class="col-sm-6 col-12 p-2">
                                    <label class="text-start w-100 font-14 mb-1 dark-gray light">
                                        شماره تماس
                                    </label>
                                    <div class="position-relative">
                                        <input oninput="numberFormat()" name="mobile" dir="ltr"
                                               class="w-100 main-radius border login-input font-13"
                                               placeholder="۰۹۱۲۰۰۰۰۰۰۰" type="text">
                                    </div>
                                </div>
                                <div class="col-12 p-2">
                                    <label class="text-start w-100 font-14 mb-1 dark-gray light">
                                        توضیحات نظر
                                    </label>
                                    <textarea placeholder="نوشتن توضیحات..." name="message" rows="3"
                                              class="w-100 main-radius border login-input font-13" id=""></textarea>
                                </div>
                                <div class="col-12 p-2 pt-0 ms-auto">
                                    <button type="submit"
                                            class="first-page-btn-component w-100 d-flex justify-content-center py-2 font-14 text-white main-radius btn-dark-gray">
                                        افزودن نظر
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="col-md-8 col-12 p-2 ps-md-3 ps-0">
                    <div class="bg-white p-3 pb-1 shadow-sm main-radius">
                        @forelse($blog->comments->where('parent_id', null) as $comment)

                            @include('site._partials.comment.index', ['comment' => $comment, 'is_reply' => false])

                        @empty
                            <div class="border main-radius p-4 text-center bg-body">
                                <i class="bi bi-chat-dots light-gray d-block mb-2" style="font-size: 28px;"></i>
                                <p class="mb-1 dark-gray semi">هنوز نظری ثبت نشده است</p>
                                <p class="mb-0 light-gray font-13">اولین نفری باشید که برای این مقاله نظر می‌نویسد.</p>
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var exampleModal = document.getElementById('exampleModal');
            exampleModal.addEventListener('show.bs.modal', function (event) {
                var button = event.relatedTarget;
                var parentId = button.getAttribute('data-id');
                var recipientName = button.getAttribute('data-name');
                var modalParentInput = exampleModal.querySelector('#reply-parent-id');
                var modalNameSpan = exampleModal.querySelector('#reply-to-name');

                modalParentInput.value = parentId;
                modalNameSpan.textContent = recipientName;
            });
        });
    </script>
@endpush