Installed jquery, Added static comment user for single-blog page

package-lock.json

@@ -4562,6 +4562,11 @@
                 }
             }
         },
+        "jquery": {
+            "version": "3.6.0",
+            "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
+            "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw=="
+        },
         "js-base64": {
             "version": "2.6.4",
             "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",

package.json

@@ -20,6 +20,7 @@
     },
     "dependencies": {
         "bootstrap": "^5.0.2",
+        "jquery": "^3.6.0",
         "node-sass": "^6.0.1"
     }
 }

resources/js/app.js

@@ -1 +1,2 @@
 require('bootstrap/dist/js/bootstrap.bundle.js');
+window.$ = require('jquery/dist/jquery.js');

resources/sass/home/home.scss

@@ -162,4 +162,62 @@ a {
     }
 }
 
-
+.comment-customers {
+    .parent-reply-body {
+        .reply-post {
+            border-left: 1px solid;
+            color: lighten($gray, 20);
+            height: 22px;
+            padding-left: 0.625rem;
+            .reply-post-icon {
+                &:hover {
+                    cursor: pointer;
+                }
+            }
+        }
+        .reply-post-like-button {
+            padding-right: 0.625rem;
+            font-size: 15px;
+            display: inline-block;
+            color: #afb6bc;
+        }
+        .user-description {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 0.5rem;
+            @media screen and (max-width: 576px){
+                align-items: baseline;
+            }
+            .user-description-holder {
+                display: flex;
+                align-items: flex-end;
+                @media screen and (max-width: 576px){
+                    align-items: flex-start;
+                    flex-direction: column;
+                }
+            }
+            .user-name {
+                color: $primary;
+                font-weight: 600;
+                padding-left: 0.625rem;
+            }
+            .item-details {
+                display: flex;
+                align-items: baseline;
+                color: lighten($gray, 20);
+                font-size: 80%;
+                .item-details-clock {
+                    margin-left: 0.25rem;
+                }
+                .item-details-time {
+                    border-right: 1px solid;
+                    padding-right: 0.25rem;
+                }
+                .item-details-date {
+                    padding-left: 0.25rem;
+                }
+            }
+        }
+    }
+}

resources/views/home/single-blog.blade.php

@@ -15,7 +15,6 @@
                         <h1 class="title">
                             لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
                         </h1>
-
                         <div class="author-published-holder">
                             <div class="author-avatar-holder">
                                 <img class="author-avatar" src="https://beyondco.de/img/marcel.jpg" alt="avater">
@@ -29,7 +28,6 @@
                                 </div>
                             </div>
                         </div>
-
                         <div class="content-text">
                             <h1>
                                 عنوان مقاله متون بلکه روزنامه و مجله در ستون
@@ -81,7 +79,7 @@
                                 لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
                             </div>
                             <div>
-                                <img src="https://www.codeitbro.com/wp-content/uploads/2020/09/benefits-of-computer-programming.jpg" alt="img">
+                                <img width="600" height="300" src="https://www.codeitbro.com/wp-content/uploads/2020/09/benefits-of-computer-programming.jpg" alt="img">
                             </div>
                             <h2>
                                 عنوان مقاله متون بلکه روزنامه و مجله در ستون
@@ -149,12 +147,198 @@
                             قبلی
                         </button>
                     </div>
+                    <hr>
+                    <!-- comments user form -->
+                    <div class="pb-4 opinion">
+                        <h5>
+                            دیدگاه کاربران
+                        </h5>
+                        <p>
+                            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون
+                        </p>
+                        <div class="form-opinion">
+                            <form action="">
+                                <div class="row">
+                                    <div class="col-lg-4 col-md-6 mb-2">
+                                        <div class="form-group">
+                                            <input class="form-control" id="form_name" type="text" name="name" placeholder="نام">
+                                        </div>
+                                    </div>
+                                    <div class="col-lg-4 col-md-6 mb-2">
+                                        <div class="form-group">
+                                            <input class="form-control" id="form_email" type="email" name="email" placeholder="ایمیل">
+                                        </div>
+                                    </div>
+                                    <div class="col-lg-4 col-md-12 mb-2">
+                                        <div class="form-group">
+                                            <input class="form-control" id="form_subject" type="text" name="subject" placeholder="موضوع">
+                                        </div>
+                                    </div>
+                                    <div class="col-md-12 mb-2">
+                                        <div class="form-group">
+                                            <textarea class="form-control" id="form_message" name="message" placeholder="دیدگاه" rows="4"></textarea>
+                                        </div>
+                                    </div>
+                                    <div class="col-md-12">
+                                        <button type="submit" class="btn btn-primary"><span>ارسال دیدگاه</span></button>
+                                    </div>
+                                </div>
+                            </form>
+                        </div>
+                    </div>
+                    <!-- show comments user -->
+                    <div class="pb-5 comment-customers">
+                        <div class="media border p-3 mt-3">
+                            <div class="media-body">
+                                <div class="parent-reply-body">
+                                    <p class="user-description">
+                                        <span class="user-description-holder">
+                                            <span class="user-name">
+                                                آرش محبی
+                                            </span>
+                                            <span class="item-details">
+                                                <i class="fa fa-clock-o item-details-clock"></i>
+                                                <span>
+                                                    <span class="item-details-date">
+                                                        ۱۷ خرداد ۱۳۹۹
+                                                    </span>
+                                                    <span class="item-details-time">
+                                                        ۱۲:۱۸
+                                                    </span>
+                                                </span>
+                                            </span>
+                                        </span>
+                                        <span class="d-flex">
+                                            <span class="reply-post">
+                                                <i class="fa fa-reply reply-post-icon"></i>
+                                            </span>
+                                            <span class="reply-post-like-button">
+                                                <span class="reply-post-like-count">۱۲</span>
+                                                <i class="fa fa-heart-o"></i>
+                                            </span>
+                                        </span>
+                                    </p>
+                                    <p class="text-justify">
+                                        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت
+                                        چاپ، و با استفاده از طراحان گرافیک است، چاپگرها
+                                    </p>
+                                    <div class="form-reply-opinion" style="display: none;">
+                                        <form action="">
+                                            <div class="row">
+                                                <div class="col-lg-4 col-md-6 mb-2">
+                                                    <div class="form-group">
+                                                        <input class="form-control" id="form_name" type="text" name="name" placeholder="نام">
+                                                    </div>
+                                                </div>
+                                                <div class="col-lg-4 col-md-6 mb-2">
+                                                    <div class="form-group">
+                                                        <input class="form-control" id="form_email" type="email" name="email" placeholder="ایمیل">
+                                                    </div>
+                                                </div>
+                                                <div class="col-lg-4 col-md-12 mb-2">
+                                                    <div class="form-group">
+                                                        <input class="form-control" id="form_subject" type="text" name="subject" placeholder="موضوع">
+                                                    </div>
+                                                </div>
+                                                <div class="col-md-12 mb-2">
+                                                    <div class="form-group">
+                                                        <textarea class="form-control" id="form_message" name="message" placeholder="دیدگاه" rows="4"></textarea>
+                                                    </div>
+                                                </div>
+                                                <div class="col-md-12">
+                                                    <button type="submit" class="btn btn-primary"><span>ارسال دیدگاه</span></button>
+                                                    <button class="btn btn-danger btn-cancel-reply"><span>انصراف</span></button>
+                                                </div>
+                                            </div>
+                                        </form>
+                                    </div>
+                                </div>
+                                <div>
+                                    <div class="media px-3 pt-3">
+                                        <div class="media-body">
+                                            <div class="parent-reply-body">
+                                                <p class="mb-2 d-flex">
+                                                        <span>
+                                                            <strong>
+                                                                رضا ناصری
+                                                            </strong>
+                                                        </span>
+                                                    <span class="d-flex ml-2 item-details">
+                                                            <i class="fa fa-clock-o item-details-clock"></i>
+                                                            <span class="item-details-date pl-2">
+                                                                ۱۷ خرداد ۱۳۹۹
+                                                                <span class="pl-1 border-right">
+                                                                    ۱۲:۱۸
+                                                                </span>
+                                                            </span>
+                                                        </span>
+                                                    <span class="d-flex ml-auto">
+                                                            <span class="reply-post-like-button">
+                                                                <span class="reply-post-like-count">۱۲</span>
+                                                                <i class="fa fa-heart-o"></i>
+                                                            </span>
+                                                        </span>
+                                                </p>
+                                                <p class="text-justify">
+                                                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت
+                                                    با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه
+                                                </p>
+                                                <div class="form-reply-opinion" style="display: none;">
+                                                    <form action="">
+                                                        <div class="row">
+                                                            <div class="col-lg-4 col-md-6">
+                                                                <div class="form-group">
+                                                                    <input class="form-control" id="form_name" type="text" name="name" placeholder="نام">
+                                                                </div>
+                                                            </div>
+                                                            <div class="col-lg-4 col-md-6">
+                                                                <div class="form-group">
+                                                                    <input class="form-control" id="form_email" type="email" name="email" placeholder="ایمیل">
+                                                                </div>
+                                                            </div>
+                                                            <div class="col-lg-4 col-md-12">
+                                                                <div class="form-group">
+                                                                    <input class="form-control" id="form_subject" type="text" name="subject" placeholder="موضوع">
+                                                                </div>
+                                                            </div>
+                                                            <div class="col-md-12">
+                                                                <div class="form-group">
+                                                                    <textarea class="form-control" id="form_message" name="message" placeholder="دیدگاه" rows="4"></textarea>
+                                                                </div>
+                                                            </div>
+                                                            <div class="col-md-12">
+                                                                <button type="submit" class="btn btn-primary"><span>ارسال دیدگاه</span></button>
+                                                                <button class="btn btn-danger btn-cancel-reply"><span>انصراف</span></button>
+                                                            </div>
+                                                        </div>
+                                                    </form>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
                 </div>
             </div>
         </div>
     @endslot
 
     @slot('script')
+        <script>
+            $('.reply-post-icon').click(function () {
+                $('.form-opinion').slideUp();
+                $(this).parents('.parent-reply-body').find('.form-reply-opinion').slideDown();
+            });
+
+            $('.btn-cancel-reply').click(function (e) {
+                e.preventDefault();
+                $('.form-opinion').slideDown();
+                $(this).parents('.parent-reply-body').find('.form-reply-opinion').slideUp();
+            });
+        </script>
     @endslot
 
 @endcomponent