@extends('upgrade.layouts.home')
@section('content')
    @php
        $title_var = "title_" . app()->getLocale();
        $title_var2 = "title_" . config('app.fallback_locale','en');
        $details_var = "details_" . app()->getLocale();
        $details_var2 = "details_" . config('app.fallback_locale','en');
        if ($Topic->$title_var != "") {
            $title = $Topic->$title_var;
        } else {
            $title = $Topic->$title_var2;
        }
        if ($details_var = $Topic->$details_var != "") {
            $details = $details_var;
        } else {
            $details = optional($Topic)->$details_var2;
        }
        $section = "";
        try {
            if ($Topic->section->$title_var != "") {
                $section = $Topic->section->$title_var;
            } else {
                $section = $Topic->section->$title_var2;
            }
        } catch (Exception $e) {
            $section = "";
        }
    @endphp
<!-- start banner -->
<section class='banner'>
    <div class="uk-cover-container uk-height-xlarge">
        <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 class="container">
            <div class="uk-position-bottom uk-text-white main-bg uk-padding">
                <div class='uk-text-large'>{{ $Topic->created_at->format('M Y d') }}</div>
                <h1 class='uk-margin-small uk-text-white'>{{ $Topic->title }}</h1>
            </div>
        </div>
    </div>
</section>
<!-- end banner -->
<!-- start about -->
<section class="uk-section uk-margin-medium-top uk-margin-large-bottom">
    <div class="container">
        <div class='uk-margin-large-bottom'>
            <p class='big-line'>
                {!! $Topic->details !!}
            </p>
        </div>
        @if ($Topic->photos->count())
            <div class='uk-margin-medium-bottom'>
                <div class="row">
                    <!-- Swiper -->
                    <div class="swiper-container news-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 news-thumbs uk-margin">
                        <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>
        @endif
    </div>
</section>

<section class='share-banner x-padding-small uk-margin-large-top'>
    <div class="container">
        <div class="row">
            <div class="right uk-text-lead bold">
                شارك الخبر
            </div>
            <div class="left">
                <ul class='social-list'>
{{--                    <li><a href="#" class='fab fa-facebook-f'></a></li>--}}
{{--                    <li><a href="#" class='fab fa-twitter'></a></li>--}}
                    <li><a href="{{ Helper::SocialShare("facebook", $PageTitle)}}" class="facebook" data-placement="top" title="Facebook" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
                    <li><a href="{{ Helper::SocialShare("twitter", $PageTitle)}}" class="twitter" data-placement="top" title="Twitter" target="_blank"><i class="fab fa-twitter"></i></a></li>
                    <li><a href="{{ Helper::SocialShare("google", $PageTitle)}}" class="google" data-placement="top" title="Google+" target="_blank"><i  class="fab fa-google-plus"></i></a></li>
                    <li><a href="{{ Helper::SocialShare("linkedin", $PageTitle)}}" class="linkedin" data-placement="top" title="linkedin" target="_blank"><i  class="fab fa-linkedin"></i></a></li>
                    <li><a href="{{ Helper::SocialShare("tumblr", $PageTitle)}}" class="pintrest" data-placement="top" title="Pinterest" target="_blank"><i class="fab fa-pinterest"></i></a></li>
                </ul>
            </div>
        </div>
    </div>
</section>
@if($Topic->approvedComments->count())
<section class='uk-section uk-margin-large-top'>
    <div class="container">
        @foreach($Topic->approvedComments as $comment)
            @php( $dtformated = date('d M Y h:i A', strtotime($comment->date)) )
            <div class="comment uk-margin-large-bottom">
                <div class="user-comment">
                    <div class="user-img">
                        <img src="{{ url('uploads/contacts/profile.jpg') }}" alt="{$comment->name}}">
                    </div>
                    <div class="user-info">
                        <h3>{{ $comment->name }}</h3>
                        <div>{{ $dtformated }}</div>
                    </div>
                </div>
                <p>{!! nl2br(strip_tags($comment->comment)) !!}</p>
                <hr class='uk-margin-large-top'>
            </div>
        @endforeach


    </div>
</section>
@endif
@if($WebmasterSection->comments_status)
<section class='uk-section uk-margin-large-top'>
    <div class="container">
        <header>
            <h2 class='mark'>قم باضافة تعليق</h2>
        </header>
        {{Form::open(['route'=>['commentSubmit'],'method'=>'POST','class'=>'form-c'])}}
            <div class="uk-grid uk-grid-large uk-child-width-1-2@m uk-child-width-1-1">
                <div class='uk-margin-medium-bottom'>
                    <input class="uk-input" required minlength="3" type="text" name="comment_name" placeholder="الأسم"/>
                    <div class="validation"></div>
                </div>
                <div class='uk-margin-medium-bottom'>
                    <input class="uk-input" required minlength="8" type="text" name="comment_email" placeholder="الأيميل"/>
                    <div class="validation"></div>
                </div>
            </div>
            <div>
                <textarea class="uk-textarea" required minlength="3" rows="5" name="comment_message" placeholder="اترك رسالتك هنا ..."></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="uk-margin">
                <button class="btn">ارسال تعليق</button>
            </div>
        {{Form::close()}}
    </div>
</section>
@endif

<!-- end about -->
<!-- start -->
@endsection
@push('js')
<script>
    var galleryThumbs = new Swiper('.news-thumbs', {
    spaceBetween: 10,
    slidesPerView: 2,
    freeMode: true,
    watchSlidesVisibility: true,
    watchSlidesProgress: true,
    breakpoints: {
    640: {
        slidesPerView: 2,
    },
    768: {
        slidesPerView: 6,
    },
    1024: {
        slidesPerView: 6,
    },
}
});
var galleryTop = new Swiper('.news-top', {
    spaceBetween: 10,
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    thumbs: {
        swiper: galleryThumbs
    },
});
</script>
@endpush