@extends('front.layouts.front')

@section('content')
    <!-- section -->
    <section class="section section--first section--bg">
        <div class="container">
            <!-- article -->
            <div class="article">
                <div class="row">
                    <div class="col-12 col-xl-8">
                        <!-- article content -->
                        <div class="article__content">
                            <a href="{{ $News->url }}" class="article__category">{{ $News->source_name }}</a>

                            <span class="article__date">
                                <svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'>
                                    <path d='M256,64C150,64,64,150,64,256s86,192,192,192,192-86,192-192S362,64,256,64Z' style='fill:none;stroke-miterlimit:10;stroke-width:32px' />
                                    <polyline points='256 128 256 272 352 272' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' />
                                </svg> {{ date('d-m-Y H:i', strtotime($News->published_at)) }}</span>
                            <h1>{{ $News->title }}</h1>
                            <img src="{{ $News->image }}" alt="">
                            <p>{{ $News->description }}
                                <a href="{{ $News->url }}" class="moreNewsDetail">Read more</a>
                                {{-- <a href="#popup-info" class="moreNewsDetail">Read more</a> --}}
                            </p>
                            {{-- <iframe src="{{ $News->url }}" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" width="100%" height="100%" title="{{ $News->title }}" ></iframe> --}}

                        </div>
                        <!-- end article content -->
                        <div id="popup-info" class="mfp-hide newsDetail-popup">
                            <div class="trailer-popup" id="newsiframe">
                                <iframe id="newsiframe1" data-iframely-url="{{ $News->url }}" href="{{ $News->url }}" width="100%" height="100%" title="{{ $News->title }}"></iframe>
                            </div>
                        </div>
                        <!-- share -->
                        <div class="share">
                            <a href="https://www.facebook.com/sharer/sharer.php?u={{ route('news-detail',[$News->id]) }}" target="_blank" class="share__link share__link--fb">
                                <svg width="9" height="17" viewBox="0 0 9 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M5.56341 16.8197V8.65888H7.81615L8.11468 5.84663H5.56341L5.56724 4.43907C5.56724 3.70559 5.63693 3.31257 6.69042 3.31257H8.09873V0.5H5.84568C3.1394 0.5 2.18686 1.86425 2.18686 4.15848V5.84695H0.499939V8.6592H2.18686V16.8197H5.56341Z" />
                                </svg> share
                            </a>
                            <a href="https://twitter.com/intent/tweet?text={{ route('news-detail',[$News->id]) }}"  target="_blank" class="share__link share__link--tw">
                                <svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M7.55075 3.19219L7.58223 3.71122L7.05762 3.64767C5.14804 3.40404 3.47978 2.57782 2.06334 1.1902L1.37085 0.501686L1.19248 1.01013C0.814766 2.14353 1.05609 3.34048 1.843 4.14552C2.26269 4.5904 2.16826 4.65396 1.4443 4.38914C1.19248 4.3044 0.972149 4.24085 0.951164 4.27263C0.877719 4.34677 1.12953 5.31069 1.32888 5.69202C1.60168 6.22165 2.15777 6.74068 2.76631 7.04787L3.28043 7.2915L2.67188 7.30209C2.08432 7.30209 2.06334 7.31268 2.12629 7.53512C2.33613 8.22364 3.16502 8.95452 4.08833 9.2723L4.73884 9.49474L4.17227 9.8337C3.33289 10.321 2.34663 10.5964 1.36036 10.6175C0.888211 10.6281 0.5 10.6705 0.5 10.7023C0.5 10.8082 1.78005 11.4014 2.52499 11.6344C4.75983 12.3229 7.41435 12.0264 9.40787 10.8506C10.8243 10.0138 12.2408 8.35075 12.9018 6.74068C13.2585 5.88269 13.6152 4.315 13.6152 3.56293C13.6152 3.07567 13.6467 3.01212 14.2343 2.42953C14.5805 2.09056 14.9058 1.71983 14.9687 1.6139C15.0737 1.41264 15.0632 1.41264 14.5281 1.59272C13.6362 1.91049 13.5103 1.86812 13.951 1.39146C14.2762 1.0525 14.6645 0.438131 14.6645 0.258058C14.6645 0.22628 14.5071 0.279243 14.3287 0.374576C14.1398 0.480501 13.7202 0.639389 13.4054 0.734722L12.8388 0.914795L12.3247 0.565241C12.0414 0.374576 11.6427 0.162725 11.4329 0.0991699C10.8978 -0.0491255 10.0794 -0.0279404 9.59673 0.14154C8.2852 0.618204 7.45632 1.84694 7.55075 3.19219Z" />
                                </svg> tweet
                            </a>
                            <a href="https://wa.me/?text={{ route('news-detail',[$News->id]) }}"  target="_blank" class="share__link share__link--vk">
                                <svg fill="none" height="16" width="16" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 308 308" xml:space="preserve">
                                    <g id="XMLID_468_">
                                        <path id="XMLID_469_" d="M227.904,176.981c-0.6-0.288-23.054-11.345-27.044-12.781c-1.629-0.585-3.374-1.156-5.23-1.156
                                            c-3.032,0-5.579,1.511-7.563,4.479c-2.243,3.334-9.033,11.271-11.131,13.642c-0.274,0.313-0.648,0.687-0.872,0.687
                                            c-0.201,0-3.676-1.431-4.728-1.888c-24.087-10.463-42.37-35.624-44.877-39.867c-0.358-0.61-0.373-0.887-0.376-0.887
                                            c0.088-0.323,0.898-1.135,1.316-1.554c1.223-1.21,2.548-2.805,3.83-4.348c0.607-0.731,1.215-1.463,1.812-2.153
                                            c1.86-2.164,2.688-3.844,3.648-5.79l0.503-1.011c2.344-4.657,0.342-8.587-0.305-9.856c-0.531-1.062-10.012-23.944-11.02-26.348
                                            c-2.424-5.801-5.627-8.502-10.078-8.502c-0.413,0,0,0-1.732,0.073c-2.109,0.089-13.594,1.601-18.672,4.802
                                            c-5.385,3.395-14.495,14.217-14.495,33.249c0,17.129,10.87,33.302,15.537,39.453c0.116,0.155,0.329,0.47,0.638,0.922
                                            c17.873,26.102,40.154,45.446,62.741,54.469c21.745,8.686,32.042,9.69,37.896,9.69c0.001,0,0.001,0,0.001,0
                                            c2.46,0,4.429-0.193,6.166-0.364l1.102-0.105c7.512-0.666,24.02-9.22,27.775-19.655c2.958-8.219,3.738-17.199,1.77-20.458
                                            C233.168,179.508,230.845,178.393,227.904,176.981z"/>
                                        <path id="XMLID_470_" d="M156.734,0C73.318,0,5.454,67.354,5.454,150.143c0,26.777,7.166,52.988,20.741,75.928L0.212,302.716
                                            c-0.484,1.429-0.124,3.009,0.933,4.085C1.908,307.58,2.943,308,4,308c0.405,0,0.813-0.061,1.211-0.188l79.92-25.396
                                            c21.87,11.685,46.588,17.853,71.604,17.853C240.143,300.27,308,232.923,308,150.143C308,67.354,240.143,0,156.734,0z
                                            M156.734,268.994c-23.539,0-46.338-6.797-65.936-19.657c-0.659-0.433-1.424-0.655-2.194-0.655c-0.407,0-0.815,0.062-1.212,0.188
                                            l-40.035,12.726l12.924-38.129c0.418-1.234,0.209-2.595-0.561-3.647c-14.924-20.392-22.813-44.485-22.813-69.677
                                            c0-65.543,53.754-118.867,119.826-118.867c66.064,0,119.812,53.324,119.812,118.867
                                            C276.546,215.678,222.799,268.994,156.734,268.994z"/>
                                    </g>
                                </svg> Whatsapp
                            </a>
                        </div>
                        <!-- end share -->

                        <div class="col-12 col-xl-12 order-xl-1">
                            <!-- comments -->
                            <div class="comments comments--details">
                                <div class="comments__title">
                                    <h4>Reviews</h4>
                                    {{-- <span>5</span> --}}
                                </div>

                                <ul class="comments__list">
                                    @foreach ($Review as $rating)
                                        <li class="comments__item">
                                            <div class="comments__autor d-flex">
                                                <div>
                                                    <img class="comments__avatar" @if ($rating->user->profile_photo_path == null) src="{{ url('assets/img/user.svg') }}" @else src="{{ $rating->user->profile_photo_path }}" @endif alt="">
                                                    <span class="comments__name">{{ $rating->user->first_name . ' ' . $rating->user->last_name }}</span>
                                                    <span class="comments__time">{{ date('d.m.Y, H:i', strtotime($rating->created_at)) }}</span>
                                                </div>
                                                <div class="view-rate text-white">
                                                    <i class="fa-solid fa-star @if ($rating->rating >= 1) text-yellow @endif"></i>
                                                    <i class="fa-solid fa-star @if ($rating->rating >= 2) text-yellow @endif"></i>
                                                    <i class="fa-solid fa-star @if ($rating->rating >= 3) text-yellow @endif"></i>
                                                    <i class="fa-solid fa-star @if ($rating->rating >= 4) text-yellow @endif"></i>
                                                    <i class="fa-solid fa-star @if ($rating->rating >= 5) text-yellow @endif"></i>
                                                </div>
                                            </div>

                                            <p class="comments__text">{{ $rating->comment }}</p>
                                            <div class="comments__actions d-flex justify-content-between">
                                                <div class="card_reviewset" data-rating="{{ $rating->id }}">
                                                    <i class="fas fa-heart mr-2 {{ array_search($rating->user_id, array_column($rating->ratinglike->toArray(), 'user_id')) == '' ? '' : 'movie-liked' }}"></i><span data-count="{{ $rating->ratinglike->count() }}">({{ $rating->ratinglike->count() }})</span>
                                                </div>
                                                <div class="comments__rate">
                                                    <ul class="details__platforms">
                                                        {{-- <li class="fb"><i class="fa-brands fa-facebook-f"></i></li>
                                                        <li class="tw"><i class="fa-brands fa-twitter"></i></li> --}}
                                                        <li class="fb"><a href="https://www.facebook.com/sharer/sharer.php?u={{ route('news-detail',[$News->id]) }}" class="text-white"><i class="fa-brands fa-facebook-f"></i></a></li>
                                                        <li class="tw"><a href="https://twitter.com/intent/tweet?text={{ route('news-detail',[$News->id]) }}" class="text-white"><i class="fa-brands fa-twitter"></i></a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </li>
                                    @endforeach
                                </ul>
                                <form action="{{ route('front.review.store') }}" method="POST" class="form"
                                    id="reviewForm">
                                    @csrf
                                    <div class="rate">
                                        <input type="radio" id="star5" name="rating" value="5" />
                                        <label for="star5" title="text">5 stars</label>
                                        <input type="radio" id="star4" name="rating" value="4" />
                                        <label for="star4" title="text">4 stars</label>
                                        <input type="radio" id="star3" name="rating" value="3" />
                                        <label for="star3" title="text">3 stars</label>
                                        <input type="radio" id="star2" name="rating" value="2" />
                                        <label for="star2" title="text">2 stars</label>
                                        <input type="radio" id="star1" name="rating" value="1"
                                            checked />
                                        <label for="star1" title="text">1 star</label>
                                    </div>
                                    <textarea id="review" name="review" class="form__textarea" placeholder="Add Review"></textarea>
                                    <span class="error" id="review_er"></span>
                                    <input type="hidden" name="title_id" value="">
                                    <input type="hidden" name="news_id" value="{{ $News->id }}">
                                    <input type="hidden" name="rating_type" value="2">
                                    <button type="submit" class="form__btn">Send</button>
                                </form>
                            </div>
                        </div>
                    </div>

                    <div class="col-12 col-xl-4">
                        <div class="sidebar">
                            <div class="row">
                                <div class="col-12 col-lg-6 col-xl-12">
                                    <!-- cards -->
                                    <ul class="list list--sidebar">
                                        <li class="list__item">
                                            <a href="#" class="list__cover">
                                                <img src={{ url('assets/img/cards/7.jpg') }} alt="">
                                            </a>

                                            <div class="list__wrap">
                                                <h3 class="list__title">
                                                    <a href="#">The Evil Within: The Assignment</a>
                                                </h3>
                                                <p class="small text-white text-muted">Many desktop publishing packages and
                                                    web
                                                    page editors now use Lorem Ipsum as their default model text, </p>

                                                <div class="d-flex justify-content-between w-100">
                                                    <button class="btn btn-theme" type="button">
                                                        Watch now
                                                    </button>
                                                    <button class="card__favorite" type="button">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="512"
                                                            height="512" viewBox="0 0 512 512">
                                                            <path
                                                                d="M352.92,80C288,80,256,144,256,144s-32-64-96.92-64C106.32,80,64.54,124.14,64,176.81c-1.1,109.33,86.73,187.08,183,252.42a16,16,0,0,0,18,0c96.26-65.34,184.09-143.09,183-252.42C447.46,124.14,405.68,80,352.92,80Z"
                                                                style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px">
                                                            </path>
                                                        </svg>
                                                    </button>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="list__item">
                                          <a href="#" class="list__cover">
                                              <img src={{ url('assets/img/cards/7.jpg') }} alt="">
                                          </a>

                                          <div class="list__wrap">
                                              <h3 class="list__title">
                                                  <a href="#">The Evil Within: The Assignment</a>
                                              </h3>
                                              <p class="small text-white text-muted">Many desktop publishing packages and
                                                  web
                                                  page editors now use Lorem Ipsum as their default model text, </p>

                                              <div class="d-flex justify-content-between w-100">
                                                  <button class="btn btn-theme" type="button">
                                                      Watch now
                                                  </button>
                                                  <button class="card__favorite" type="button">
                                                      <svg xmlns="http://www.w3.org/2000/svg" width="512"
                                                          height="512" viewBox="0 0 512 512">
                                                          <path
                                                              d="M352.92,80C288,80,256,144,256,144s-32-64-96.92-64C106.32,80,64.54,124.14,64,176.81c-1.1,109.33,86.73,187.08,183,252.42a16,16,0,0,0,18,0c96.26-65.34,184.09-143.09,183-252.42C447.46,124.14,405.68,80,352.92,80Z"
                                                              style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px">
                                                          </path>
                                                      </svg>
                                                  </button>
                                              </div>
                                          </div>
                                      </li>
                                      <li class="list__item">
                                          <a href="#" class="list__cover">
                                              <img src={{ url('assets/img/cards/7.jpg') }} alt="">
                                          </a>

                                          <div class="list__wrap">
                                              <h3 class="list__title">
                                                  <a href="#">The Evil Within: The Assignment</a>
                                              </h3>
                                              <p class="small text-white text-muted">Many desktop publishing packages and
                                                  web
                                                  page editors now use Lorem Ipsum as their default model text, </p>

                                              <div class="d-flex justify-content-between w-100">
                                                  <button class="btn btn-theme" type="button">
                                                      Watch now
                                                  </button>
                                                  <button class="card__favorite" type="button">
                                                      <svg xmlns="http://www.w3.org/2000/svg" width="512"
                                                          height="512" viewBox="0 0 512 512">
                                                          <path
                                                              d="M352.92,80C288,80,256,144,256,144s-32-64-96.92-64C106.32,80,64.54,124.14,64,176.81c-1.1,109.33,86.73,187.08,183,252.42a16,16,0,0,0,18,0c96.26-65.34,184.09-143.09,183-252.42C447.46,124.14,405.68,80,352.92,80Z"
                                                              style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px">
                                                          </path>
                                                      </svg>
                                                  </button>
                                              </div>
                                          </div>
                                      </li>
                                    </ul>
                                    <!-- end cards -->
                                </div>

                                <div class="col-12 col-lg-6 col-xl-12">
                                    <!-- subscribe -->
                                    <form action="#" class="subscribe" onsubmit="return false;" >
                                        <div class="subscribe__img">
                                            <svg xmlns='http://www.w3.org/2000/svg' width='512' height='512'
                                                viewBox='0 0 512 512'>
                                                <path
                                                    d='M441.6,171.61,266.87,85.37a24.57,24.57,0,0,0-21.74,0L70.4,171.61A40,40,0,0,0,48,207.39V392c0,22.09,18.14,40,40.52,40h335c22.38,0,40.52-17.91,40.52-40V207.39A40,40,0,0,0,441.6,171.61Z'
                                                    style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' />
                                                <path d='M397.33,368,268.07,267.46a24,24,0,0,0-29.47,0L109.33,368'
                                                    style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' />
                                                <line x1='309.33' y1='295' x2='445.33' y2='192'
                                                    style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' />
                                                <line x1='61.33' y1='192' x2='200.33' y2='297'
                                                    style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' />
                                            </svg>
                                        </div>
                                        <h4 class="subscribe__title">Subscribe to news</h4>
                                        <p class="subscribe__text">All the Lorem Ipsum generators on the Internet tend
                                            to
                                            repeat predefined chunks as necessary.</p>
                                        <input type="text" class="form__input" placeholder="Email" id="subemail">
                                        {{-- <div class="color-red">Email field required</div> --}}
                                        <div class="buttonWithLoder" style="width: 100%">
                                            <a type="button" class="form__btn subscribebtn">
                                                <span> Send</span>
                                                <div class="spinner-border loder" role="status">
                                                    <span class="sr-only">Loading...</span>
                                                </div>
                                            </a>
                                        </div>
                                    </form>
                                    <!-- end subscribe -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end article -->
            </div>
    </section>
    <!-- end section -->

    <!-- section -->
    <section class="section section--last">
        <div class="container">
            <div class="row">
                <!-- title -->
                <div class="col-12">
                    <div class="section__title-wrap section__title-wrap--single">
                        <h2 class="section__title">Related news</h2>

                        <div class="section__nav-wrap">
                            <a href="{{ route('news') }}?t={{ $News->id }}" class="section__view">View All</a>
                        </div>
                    </div>
                </div>
                <!-- end title -->

                <!-- video post -->
                @foreach ($Related as $relat)
                    <div class="col-12 col-md-6 col-xl-4">
                        <div class="post">
                            <a href="{{ route('front.news.detail',[$relat->id]) }}" class="post__cover">
                                <img src="{{ $relat->image }}" alt="">
                            </a>

                            {{-- <a href="http://www.youtube.com/watch?v=0O2aH4XLbto" class="post__video">
                                <svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'>
                                    <path d='M112,111V401c0,17.44,17,28.52,31,20.16l247.9-148.37c12.12-7.25,12.12-26.33,0-33.58L143,90.84C129,82.48,112,93.56,112,111Z'
                                        style='fill:none;stroke-miterlimit:10;stroke-width:32px' />
                                </svg>
                            </a> --}}

                            <div class="post__content">
                                <a href="{{ route('front.news.detail',[$relat->id]) }}" class="post__category">Overview</a>
                                <h3 class="post__title">
                                    <a href="{{ route('front.news.detail',[$relat->id]) }}">{{ substr($relat->title, 0,56) }}@if(strlen($relat->title) > 56)...@endif</a>
                                </h3>
                                <div class="post__meta">
                                    <span class="post__date">
                                        <svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'>
                                            <path d='M256,64C150,64,64,150,64,256s86,192,192,192,192-86,192-192S362,64,256,64Z' style='fill:none;stroke-miterlimit:10;stroke-width:32px' />
                                            <polyline points='256 128 256 272 352 272' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' />
                                        </svg> {{ $relat->published_at->diffForHumans() }}
                                    </span>
                                    <span class="post__comments">
                                        <svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'>
                                            <path d='M431,320.6c-1-3.6,1.2-8.6,3.3-12.2a33.68,33.68,0,0,1,2.1-3.1A162,162,0,0,0,464,215c.3-92.2-77.5-167-173.7-167C206.4,48,136.4,105.1,120,180.9a160.7,160.7,0,0,0-3.7,34.2c0,92.3,74.8,169.1,171,169.1,15.3,0,35.9-4.6,47.2-7.7s22.5-7.2,25.4-8.3a26.44,26.44,0,0,1,9.3-1.7,26,26,0,0,1,10.1,2L436,388.6a13.52,13.52,0,0,0,3.9,1,8,8,0,0,0,8-8,12.85,12.85,0,0,0-.5-2.7Z' style='fill:none;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px' />
                                            <path d='M66.46,232a146.23,146.23,0,0,0,6.39,152.67c2.31,3.49,3.61,6.19,3.21,8s-11.93,61.87-11.93,61.87a8,8,0,0,0,2.71,7.68A8.17,8.17,0,0,0,72,464a7.26,7.26,0,0,0,2.91-.6l56.21-22a15.7,15.7,0,0,1,12,.2c18.94,7.38,39.88,12,60.83,12A159.21,159.21,0,0,0,284,432.11' style='fill:none;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px' />
                                        </svg>
                                        {{ count($relat->review) }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
                <!-- end video post -->
            </div>
        </div>
    </section>
    <!-- end section -->
@endsection

@section('script')
<script>
    // var url1 = '{{ $News->url }}';
    // $("#newsiframe").load(url1);
    $(function() {
        $('.moreNewsDetail').magnificPopup({
            type:'iframe'
        });
    });
</script>
@endsection