@extends('site.layouts.master')
@section('title', 'اطلاعات ویدیو')
@section('content')




      <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>
                  {{-- <div class="text-14 text-purple-1 uppercase fw-500 mb-8">{{$video->category->name}}</div> --}}


                  <h1 class="page-header__title lh-14">{{$video->title}}</h1>



                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <div class="text-center mt-50">
        <div class="contaiber">
          <div class="video-single">
            {!! $video->link !!}
            {{-- <video width="80%" height="100%" controls>
                <source src="{{$video->link}}" type="video/mp4">
                Your browser does not support the video tag.
              </video> --}}
          </div>
        </div>
      </div>
      <section class="layout-pt-md layout-pb-lg">
           <div class="container">
             <p class="mt-30">{!! $video->long_desc !!}</p>

             <div class="row justify-center pt-30">
               <div class="col-xl-12">
                 <div class="row y-gap-20 justify-between items-center">
                   <div class="col-auto">
                     <div class="d-flex items-center">
                       <div class="lh-1 text-dark-1 fw-500 ml-30">اشتراک گذاری</div>

                       <div class="d-flex x-gap-15">
                         <a href="https://www.instagram.com/miladnasehzadeh.cafekonkoor"><i class="icon-instagram"></i></a>
                         <a href="https://www.instagram.com/miladnasehzadeh.cafekonkoor"><i class="icon-whatapp"></i></a>
                         <a href="https://www.instagram.com/miladnasehzadeh.cafekonkoor"><i class="icon-email"></i></a>
                       </div>
                     </div>
                   </div>

                   <div class="col-auto">
                     <div class="row x-gap-10 y-gap-10">

                       <div class="col-auto">
                         <a href="" class="badge -sm -light-3 text-11 text-dark-1">دوره آنلاین</a>
                       </div>

                       <div class="col-auto">
                         <a href="" class="badge -sm -light-3 text-11 text-dark-1">ریاضی</a>
                       </div>

                       <div class="col-auto">
                         <a href="" class="badge -sm -light-3 text-11 text-dark-1">عربی</a>
                       </div>

                       <div class="col-auto">
                         <a href="" class="badge -sm -light-3 text-11 text-dark-1">کنکور</a>
                       </div>

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

             <div class="row justify-center pt-30">
               <div class="col-xl-12 col-lg-12 col-md-12">
                 <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-12">
                 <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>

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

                  <ul class="comments__list mt-30">
                    <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">
                              علی صالحی
                              <span class="text-13 text-light-1 fw-400">3 روز قبل</span>
                            </h4>

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

                          <h5 class="text-15 fw-500 mt-15">بهترین دوره آموزشی</h5>
                          <div class="comments__text mt-10">
                            <p>این دوره بسیار کاربردی است. پروفسور سمیعی دقیقاً هر الگوریتم را توضیح می دهد و حتی سعی می کند مفاهیم ریاضی و آماری پشت هر الگوریتم را شهودی ارائه دهد. بسیار از شما متشکرم.</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>

                    <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">
                              علی صالحی
                              <span class="text-13 text-light-1 fw-400">3 روز قبل</span>
                            </h4>

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

                          <h5 class="text-15 fw-500 mt-15">بهترین دوره آموزشی</h5>
                          <div class="comments__text mt-10">
                            <p>این دوره بسیار کاربردی است. پروفسور سمیعی دقیقاً هر الگوریتم را توضیح می دهد و حتی سعی می کند مفاهیم ریاضی و آماری پشت هر الگوریتم را شهودی ارائه دهد. بسیار از شما متشکرم.</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>
                  </ul>
                </div>
              </div>

              <div class="respondForm pt-30">
                <h3 class="text-20 fw-500">
                  ثبت دیدگاه
                </h3>

                <div class="mt-30">
                  <h4 class="text-16 fw-500">آیا این وبلاگ را دوست داشتید؟</h4>
                  <div class="d-flex x-gap-10 pt-10">
                    <div class="icon-star text-14 text-yellow-1"></div>
                    <div class="icon-star text-14 text-yellow-1"></div>
                    <div class="icon-star text-14 text-yellow-1"></div>
                    <div class="icon-star text-14 text-yellow-1"></div>
                    <div class="icon-star text-14 text-yellow-1"></div>
                  </div>
                </div>

                <form class="contact-form respondForm__form row y-gap-30 pt-30" action="">
                  <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 text-left">
                    <button type="submit" name="submit" id="submit" class="button -md -purple-1 text-white text-left mb-10" style="margin: 0 auto">
                      ثبت
                    </button>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>

      @if(!$otherVideos->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 ($otherVideos as $item)
                <div class="col-lg-3 col-md-6 shadow-sm">
                    <div class="blogCard -type-1">
                    <div class="blogCard__image">
                        <img src="{{ asset($item->cover) }}" class="w-1/1 rounded-8" alt="image">
                    </div>
                    <div class="blogCard__content mt-20 mb-10">
                        <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>
        </div>
      </section>
      @endif
@endsection