@extends('upgrade.layouts.home')
@section('content')
        <section class='main'>
            <main>
                <!-- start banner -->
                <div class="uk-cover-container uk-height-large">
                    <img src="{{ empty($Topic->photo_file) || is_null($Topic->photo_file) ? asset('assets/img/pic01.png'): asset('uploads/topics/'.$Topic->photo_file) }}" alt="" uk-cover>
                </div>
                <!-- end banner -->
                <section class='uk-margin-large-top uk-margin-large-bottom'>
                    <div class="full-container">
                        <div class="row">
                            <div class='about'>
                                <header>
                                    <h2 class='mark'>{!! $Topic->title  !!}</h2>
                                </header>
                                <div class='center bold text-gray'>
                            
                                    <!--<p>الفيديو:</p>-->
                                   {!! $Topic->details  !!}
                                </div>
                            </div>
                        </div>
                        <div class="row uk-margin-large-top">
                            @php
                            $video = null;
                            if ($Topic->video_type ==1 && $Youtube_id = Helper::Get_youtube_video_id($Topic->video_file)) {
                                $video ="https://www.youtube.com/embed/$Youtube_id";
                            }elseif ($Topic->video_type ==2 && $Vimeo_id = Helper::Get_vimeo_video_id($Topic->video_file) ){
                                $video ="https://player.vimeo.com/video/$Vimeo_id?title=0&amp;byline=0";
                            }
                        @endphp
                        @if (!is_null($video))
                            <iframe class='coverage-video' src="{{  $video }}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                        @elseif ($Topic->video_file)
                            <video width="100%" height="450" controls autoplay>
                                <source src="{{ url('uploads/topics/'.$Topic->video_file) }}"
                                        type="video/mp4">
                                Your browser does not support the video tag.
                            </video>
                        @endif
                        </div>
                    </div>
                </section>
           
                @if ($Topic->photos->count())
                <section class='uk-section uk-margin-medium-top'>
                    <div class="full-container">
                        <div class="row">
                            <!-- Swiper -->
                            <div class="swiper-container gallery-top">
                                <div class="swiper-wrapper">
                                     @foreach($Topic->photos as $photo)
                                    <div class="swiper-slide" style="background-image:url({{ url('uploads/topics/'.$photo->file) }})"></div>
                                     @endforeach

                                </div>
                                <!-- Add Arrows -->
                                <div class="swiper-button-next swiper-button-white"></div>
                                <div class="swiper-button-prev swiper-button-white"></div>
                            </div>
                            <div class="swiper-container gallery-thumbs">
                                <div class="swiper-wrapper">
                                   @foreach($Topic->photos as $photo)
                                    <div class="swiper-slide" style="background-image:url({{ url('uploads/topics/'.$photo->file) }})"></div>
                                     @endforeach

                                </div>
                            </div>
                        </div>
                        <!--<div class="row uk-margin-small">-->
                        <!--    <h3 class='mark'>تصوير:</h3>-->
                        <!--    <div class='bold text-gray'>-->
                        <!--        <p>فوتوغرافي: عبدالسلام الفايز</p>-->
                        <!--        <p>فوتوغرافي: محمد السعيد</p>-->
                        <!--        <p>فيديو: احمد الشقير</p>-->
                        <!--        <p>فيديو: احمد عوده</p>-->
                        <!--    </div>-->
                        <!--</div>-->
                        <div class="row">
                            <div class="center mark bold">
                                للمزيد من الصور <a class="red" href='#'>اضغط هنا</a>
                            </div>
                        </div>
                    </div>
                </section>
  @endif
            </main>
        </section>
        <section class="share">
            <div class="fill-container">
                <div class="row">
                    <div class="gray-bg xs-none-float uk-margin-small">
                        <div class="right">
                            <div class="share-box">
                                نشر
                                <ul class="share-links inline-box">
                                    <li><a href="{{ Helper::SocialShare("facebook", $PageTitle)}}"  data-placement="top" title="Facebook" target="_blank"  class='fab fa-facebook-f icon fb'></a></li>
                                    <li><a href="{{ Helper::SocialShare("twitter", $PageTitle)}}"  data-placement="top" title="Twitter" target="_blank"    class='fab fa-twitter icon tw'></a></li>
                                    <li><a href="{{ Helper::SocialShare("google", $PageTitle)}}"  data-placement="top" title="Google+" target="_blank"     class='fab fa-google-plus-g icon gp'></a></li>
                                    <li><a href="{{ Helper::SocialShare("linkedin", $PageTitle)}}"  data-placement="top" title="linkedin" target="_blank"  class='fab fa-linkedin-in icon li'></a></li>
                                    <li><a href="{{ Helper::SocialShare("tumblr", $PageTitle)}}"  data-placement="top" title="Pinterest" target="_blank"   class='fab fa-pinterest-p icon pt'></a></li>
                                </ul>
                                </ul>
                            </div>
                        </div>
                        <div class="left">
                            <div class="comment-info inline-box">
                                <div class="comment-info-item">
                                    التعليقات : {{ $Topic->approvedComments->count() }} <i class='fas fa-comments'></i>
                                </div>
                                <div class="comment-info-item">
                                    الزيارات : {{ $Topic->visits }} <i class='fas fa-eye'></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row uk-margin-small">
                    <div class="gray-bg">
                          @if($WebmasterSection->comments_status)
                        <h3 class='mark'><i class='fas fa-plus'></i> أضف تعليق جديد</h3>
                        <div class="gray-bg">
                            {{Form::open(['route'=>['commentSubmit'],'method'=>'POST','class'=>'form-a'])}}
                                <div class="f-g uk-margin-small">
                                    <input type="text" placeholder="اسمك" class='uk-input'>
                                    <div class="validation"></div>
                                </div>
                                <div class="f-g uk-margin-small">
                                    <input type="text" placeholder="بريدك الالكتروني" class='uk-input'>
                                    <div class="validation"></div>
                                </div>
                                <div class="f-g uk-margin-small">
                                    <input type="text" placeholder="التعليق" class='uk-textarea'>
                                    <div class="validation"></div>
                                </div>
                                 @if(env('NOCAPTCHA_STATUS', false))
                                    <div class="form-group">
                                        {!! NoCaptcha::renderJs(app()->getLocale()) !!}
                                        {!! NoCaptcha::display() !!}
                                    </div>
                                @endif
                                 <input type="hidden" name="topic_id" value="{{$Topic->id}}">
                                <div class="f-g uk-margin-small">
                                    <button class="btn">ارسل التعليق</button>
                                </div>
                                 {{Form::close()}}
                            @endif
                            
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- start slider modal -->
        <div id="modal-center" class="uk-flex-top coverages-slider" uk-modal>
            <div class="uk-modal-dialog uk-margin-auto-vertical">
                <button class="uk-modal-close-default" type="button" uk-close></button>
                <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow>
                    <ul class="uk-slideshow-items">
                        <li>
                            <img src="img/pic01.png" alt="" uk-cover>
                        </li>
                        <li>
                            <img src="img/pic01.png" alt="" uk-cover>
                        </li>
                        <li>
                            <img src="img/pic01.png" alt="" uk-cover>
                        </li>
                    </ul>
                    <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
                    <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
                </div>
            </div>
        </div>
        <!-- end slider modal -->
        <!-- start footer -->
    @endsection
  
        <!-- Initialize Swiper -->
          @push('js')
        <script>
            var galleryThumbs = new Swiper('.gallery-thumbs', {
                spaceBetween: 10,
                slidesPerView: 2,
                freeMode: true,
                watchSlidesVisibility: true,
                watchSlidesProgress: true,
                breakpoints: {
                640: {
                    slidesPerView: 2,
                },
                768: {
                    slidesPerView: 6,
                },
                1024: {
                    slidesPerView: 8,
                },
            }
            });
            var galleryTop = new Swiper('.gallery-top', {
                spaceBetween: 10,
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                thumbs: {
                    swiper: galleryThumbs
                },
            });
        </script>
@endpush