@extends('site.layouts.master')
@section('title', $blog->title)
@section('content')
    <style>
        .border-blog p span {
            font-family: IRANSans !important;
            line-height: 1.6 !important;
        }
    </style>
      <section class="page-header -type-1 mt-50">
        <div class="container">
          <div class="page-header__content">
            <div class="row justify-center text-center">
              <div class="col-auto">
                <div>
                  <h1 class="page-header__title lh-14">{{$blog->title}}</h1>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>


      <section class="layout-pt-md">
        <div class="container">
          <div class="ratio rounded-8 bg-image js-lazy shadow bg-blog" data-bg="{{ asset($blog->image) }}"></div>
          <div class="row shadow rounded p-3 my-3">
            <div class="col-lg-4 col-md-4 col-sm-12">
                <p class="page-header__text"><i class="fas fa-bars me-1"></i><span>دسته بندی : </span><span>{{ $blog->category->name }}</span></p>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-12">
                <p class="page-header__text"><i class="fas fa-chalkboard-teacher me-1"></i><span>انتشارات میلاد ناصح زاده</span></p>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-12">
                <p class="page-header__text"><i class="far fa-clock me-1"></i><span>آخرین بروزرسانی : </span><span>{{ verta($blog->updated_at)->format('%d %B، %Y') }}</span></p>
            </div>
          </div>
        </div>
      </section>

      <section class="layout-pt-md layout-pb-lg">
        <div class="container">
          <div class="blogSection">
            <div class="blogCard">
              <div class="row justify-center">
                <div class="col-12">
                  <div class="blogCard__content">
                    <h4 class="text-18 fw-500">{{$blog->title}}</h4>
                    <hr>
                    <p class="mt-30 border-blog">{!! $blog->desc !!}</p>
                    <hr>
{{--                    <p class="mt-30">--}}
{{--                      <br><br>--}}
{{--                    </p>--}}
{{--                  </div>--}}

{{--                  <div class="blogCard__content pt-30">--}}
{{--                    <p>--}}
{{--                      <br><br>--}}
{{--                    </p>--}}
{{--                  </div>--}}
                </div>
              </div>
            </div>

            {{-- <div class="row justify-center pt-30">
              <div class="col-xl-8 col-lg-9 col-md-11">
                <div class="d-flex border-bottom-light border-top-light py-30">
                  <div class="">
                    <div class="bg-image size-70 rounded-full js-lazy" data-bg="img/blog/blog-single/author.png"></div>
                  </div>

                  <div class="mr-30 md:mr-20">
                    <h4 class="text-15 lh-15 fw-500">فاطمه عسگری</h4>
                    <div class="mt-5">نویسنده</div>
                    <p class="mt-25">چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.</p>
                  </div>
                </div>
              </div>
            </div> --}}

            {{-- <div class="row justify-center">
              <div class="col-xl-8 col-lg-9 col-md-11">
                <div class="border-bottom-light py-30">
                  <div class="row x-gap-50 justify-between items-center">
                    <div class="col-md-4 col-6">
                      <a href="" class="related-nav__item -prev decoration-none">
                        <div class="related-nav__arrow">
                          <i class="icon size-20 pt-5" data-feather="arrow-right"></i>
                        </div>
                        <div class="related-nav__content">
                          <div class="text-17 text-dark-1 fw-500">پست قبلی</div>
                          <p class="text-dark-1 mt-8">مراحل تبدیل شدن به متخصص شبکه</p>
                        </div>
                      </a>
                    </div>

                    <div class="col-auto lg:d-none">
                      <div class="related-nav__icon row">

                        <div class="col-4">
                          <span></span>
                        </div>

                        <div class="col-4">
                          <span></span>
                        </div>

                        <div class="col-4">
                          <span></span>
                        </div>

                        <div class="col-4">
                          <span></span>
                        </div>

                        <div class="col-4">
                          <span></span>
                        </div>

                        <div class="col-4">
                          <span></span>
                        </div>

                        <div class="col-4">
                          <span></span>
                        </div>

                        <div class="col-4">
                          <span></span>
                        </div>

                        <div class="col-4">
                          <span></span>
                        </div>

                      </div>
                    </div>

                    <div class="col-md-4 col-6 d-flex justify-end">
                      <a href="" class="related-nav__item -next text-right decoration-none">
                        <div class="related-nav__content">
                          <div class="text-17 text-dark-1 fw-500">پست بعدی</div>
                          <p class="text-dark-1 mt-8">چطور مستندات (داکیومنت) خوبی بنویسیم؟</p>
                        </div>
                        <div class="related-nav__arrow">
                          <i class="icon size-20 pt-5" data-feather="arrow-left"></i>
                        </div>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div> --}}

            <div class="row justify-center pt-30">
                <div class="col-xl-8 col-lg-9 col-md-11">
                  <div class="blogPost -comments">
                    <div class="blogPost__content">
                      <h2 class="text-20 fw-500">
                        دیدگاه کاربران
                      </h2>

                      <ul class="comments__list mt-30">
                    @foreach ($blog->comments as $item )

                        <li class="comments__item">
                          <div class="comments__item-inner md:direction-column">
                            <div class="comments__img ml-20">
                              <div class="bg-image rounded-full js-lazy" data-bg="img/avatars/1.png"></div>
                            </div>

                            <div class="comments__body md:mt-15">
                              <div class="comments__header">
                                <h4 class="text-17 fw-500 lh-15">
                                    {{$item->user->name}}
                                    <br>
                                    <span class="text-13 text-light-1 fw-400">{{verta($item->created_at)->format('%d %B، %Y')}}</span>
                                </h4>

                                <div class="stars"></div>
                              </div>

                              <div class="comments__text mt-10">
                                <p>{{$item->comment}}</p>
                              </div>

                              <div class="comments__helpful mt-20">
                                <span class="text-13 text-purple-1">آیا این دیدگاه مفید بود؟</span>
                                <button class="button text-13 -sm -purple-1 text-white">بله</button>
                                <button class="button text-13 -sm -light-7 text-purple-1">خیر</button>
                              </div>
                            </div>
                          </div>
                        </li>
                    @endforeach

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

                  <form class="contact-form respondForm__form row y-gap-30 pt-30" action="{{route('blogComment',$blog->id)}}" method="POST">
                    @csrf
                    <div class="col-12">
                      <label class="text-16 lh-1 fw-500 text-dark-1 mb-10">عنوان</label>
                      <input type="text" name="title" placeholder="وبلاگ عالی">
                    </div>
                    <div class="col-12">
                      <label class="text-16 lh-1 fw-500 text-dark-1 mb-10">متن دیدگاه</label>
                      <textarea name="comment" placeholder="نظر خود را بنویسید..." rows="8"></textarea>
                    </div>
                    <div class="col-12">
                      <button type="submit" name="submit" id="submit" class="button -md -purple-1 text-white">
                        ثبت
                      </button>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
        {{-- <div class="row y-gap-30 pt-60">
            @foreach ($data as $item)
                <div class="col-lg-3 col-md-6 shadow-sm">
                    <div data-anim-child="slide-up delay-2" class="blogCard -type-1">
                    <div class="blogCard__image">
                        <img src="{{ asset($item->image) }}" class="w-1/1 rounded-8" alt="image">
                    </div>
                    <div class="blogCard__content mt-20">
                        <a href="{{route('video-single',$item->id)}}" class="blogCard__category">{{ $item->title }}</a>
                    </div>
                    <div class="eventCard__button">
                        <a href="{{route('video-single',$item->id)}}" class="button -sm -rounded -outline-purple-1 text-purple-1 px-25">مشاهده</a>
                    </div>
                    </div>
                </div>
            @endforeach
          </div> --}}
      </section>


      @if(!$otherBlogs->isEmpty())
      <section class="layout-pt-lg layout-pb-lg bg-light-4">
        <div data-anim-wrap class="container">
          <div class="row justify-center text-center">
            <div class="col-auto">

              <div class="sectionTitle ">

                <h2 class="sectionTitle__title ">مقالات اخیر</h2>

              </div>

            </div>
          </div>

          <div class="row y-gap-30 pt-60">
            @foreach ($otherBlogs as $item)
                <div class="col-lg-3 col-md-6">
                    <div class="blogCard -type-1 shadow-sm">
                        <div class="blogCard__image">
                            <img src="{{ asset($item->image) }}" class="w-1/1 rounded-8" alt="image">
                        </div>
                        <div class="p-3">
                            <div class="blogCard__content mt-20">
                                <a href="{{route('blog',$item->slug)}}" class="blogCard__category">{{ $item->title }}</a>
                            </div>
                            <div class="eventCard__button mt-4">
                                <a href="{{route('blog',$item->slug)}}" class="button -sm -rounded -outline-purple-1 text-purple-1 px-25">مطالعه بیشتر</a>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
          </div>
        </div>
      </section>
      @endif
@endsection
<script>
    (function () {
        const second = 1000,
            minute = second * 60,
            hour = minute * 60,
            day = hour * 24;

        let today = new Date(),
            dd = String(today.getDate()).padStart(2, "0"),
            mm = String(today.getMonth() + 1).padStart(2, "0"),
            yyyy = today.getFullYear(),
            nextYear = yyyy + 1,
            dayMonth = "07/06/",
            birthday = dayMonth + yyyy;

        today = mm + "/" + dd + "/" + yyyy;
        if (today > birthday) {
            birthday = dayMonth + nextYear;
        }
        //end

        const countDown = new Date(birthday).getTime(),
            x = setInterval(function() {

                const now = new Date().getTime(),
                    distance = countDown - now;

                document.getElementById("days-time").innerText = Math.floor(distance / (day)),
                    document.getElementById("hours-time").innerText = Math.floor((distance % (day)) / (hour)),
                    document.getElementById("minutes-time").innerText = Math.floor((distance % (hour)) / (minute)),
                    document.getElementById("seconds-time").innerText = Math.floor((distance % (minute)) / second);
            }, 0)
    }());
</script>