@extends('website.layouts.master')
{{--@section('title') {{__('website.special_offers')}} @stop--}}
@section('css')
    <link rel="stylesheet" href="{{asset('website/css/subpages.css')}}">
@stop
@section('script.title') @stop
@section('content')
<style>
    /*.next-checkbox-wrapper{*/
    /*    */
    /*}*/
</style>

<nav class="breadcrumb-area">
    <div class="container">
        <ol class="breadcrumb-list">
            <li class="breadcrumb-item active"><a href="{{ url('/') }}">{{ trans('theme.nav.home') }}</a></li>
            <li class="breadcrumb-item active"><a href="{{ route('blog') }}">@lang('theme.nav.blogs')</a></li>
            @if (\Route::currentRouteName() == 'blog.author')
                <li class="breadcrumb-item active">{!! $author->name !!}</li>
            @endif

            @if (\Route::currentRouteName() == 'blog.search')
                <li class="breadcrumb-item active">{{__('theme.search_results')}}</li>
                <li class="breadcrumb-item active">{!! $key !!}</li>
            @endif

            @if (\Route::currentRouteName() == 'blog.tag')
                <li class="breadcrumb-item active">{{__('theme.tags')}}</li>
                <li class="breadcrumb-item active">{{ $tag }}</li>
            @endif
        </ol>

    </div>
</nav>


<section class="sub-page articls">
    <div class="container">
        <div class="row">
            <div class="col-md-9">
                <div class="row">
                    @forelse($blogs as $blog)
                        @php
                            $blog_translation = $blog->translations->where('language_id',getLocaleId())->first();
                        @endphp
                        <div class="col-md-4 col-lg-4 col-sm-4 col-xs-8">
                            <div class="card wow fadeInLeft animated">
                                <div class="card-body">
                                    <article>
                                        <div class="post-date mt-3">
                                            <span>{{ trans('theme.published_at') . ' ' . $blog->published_at->diffForHumans() }}</span>
                                        </div>
                                        <div class="meta-info mt-3">
                                            <h6>
                                                <a href="{{ route('blog.show', $blog->slug) }}">
                                                    {!! $blog_translation->title ?? $blog->title !!}
                                                </a>
                                            </h6>
                                        </div>
                                        @if ($blog->image)
                                            <div class="post-thumb img-hover mt-4">
                                                <a href="{{ route('blog.show', $blog->slug) }}">
                                                    <img style="width: 129px; height: 159px;" class="img-fluid" src="{{ get_storage_file_url(optional($blog->coverImage)->path, 'blog') }}" alt="{{ $blog_translation->title ?? $blog->title }}" title="{{ $blog_translation->title ?? $blog->title }}"/>
                                                </a>
                                            </div>
                                        @endif
                                        <p style="margin-top: revert;">{{ trans('theme.by') }} <a href="{{ route('blog.author', $blog->user_id) }}">{!! $blog->author->getName() !!}</a></p>
                                    </article>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="clearfix space50"></div>
                        <h3 class="text-center text-muted">{{ trans('theme.notify.nothing_found') }}</h3>
                    @endforelse
                </div>

            </div>
            <div class="col-md-3">
                <div class="card">

                    <div class="card-header">
                        <h3 class="widget-title-sm">{{ trans('theme.search') }}</h3>
                    </div>
                    <div class="card-body">
                        <div class="col-12">
                            {!! Form::open(['route' => ['blog.search'], 'method' => 'GET', 'id' => 'form', 'class' => 'form-inline', 'role' => 'form', 'data-toggle' => 'validator']) !!}
                            <div class="input-group full-width">
                                {!! Form::text('q', null, ['class' => 'form-control flat', 'placeholder' => trans('theme.placeholder.search'), 'required']) !!}
{{--                                <div class="input-group-btn">--}}
{{--                                    <button class="btn btn-primary flat" type="submit">--}}
{{--                                        <span class="fas fa-search"></span>--}}
{{--                                    </button>--}}
{{--                                </div>--}}
                            </div>
                            {!! Form::close() !!}
                        </div>
                    </div>

                    <hr>

                    <div class="card-header">
                        <h3 class="widget-title-sm">{{ trans('theme.recent_posts') }}</h3>
                    </div>
                    <div class="card-body">
                        @foreach (\App\Helpers\ListHelper::recentBlogs() as $blog)
                            @php
                                $blog_translation = $blog->translations->where('language_id',getLocaleId())->first();
                            @endphp
                            <div class="meta-info mt-3">
                                <h6 style="margin-bottom: 0" >
                                    <a href="{{ route('blog.show', $blog->slug) }}">
                                        {!! $blog_translation->title ?? $blog->title !!}
                                    </a>
                                </h6>
                                <small style="font-size: small; !important;">{{ $blog->published_at->diffForHumans() }}</small>
                            </div>
                        @endforeach
                    </div>

                    <hr>

                    <div class="card-header">
                        <h3 class="widget-title-sm">{{ trans('theme.most_popular') }}</h3>
                    </div>
                    <div class="card-body">
                        @foreach (\App\Helpers\ListHelper::popularBlogs() as $blog)
                            @php
                                $blog_translation = $blog->translations->where('language_id',getLocaleId())->first();
                            @endphp
                            <div class="meta-info mt-3">
                                <h6 style="margin-bottom: 0" >
                                    <a href="{{ route('blog.show', $blog->slug) }}">
                                        {!! $blog_translation->title ?? $blog->title !!}
                                    </a>
                                </h6>
                                <small style="font-size: small; !important;">{{ $blog->published_at->diffForHumans() }}</small>
                            </div>
                        @endforeach
                    </div>

                    @if (isset($tags) && $tags)
                    <hr>

                    <div class="card-header">
                        <h3 class="widget-title-sm">{{ trans('theme.tags') }}</h3>
                    </div>
                    <div class="card-body">
                        @foreach ($tags as $tag)
                            <div class="meta-info mt-3">
                                <h6 style="margin-bottom: 0" >
                                    <a style="text-decoration: none;
                                                    display: inline-block;
                                                    font-size: 12px;
                                                    padding: 3px 10px;
                                                    background: #fff;
                                                    color: #595959;
                                                    border: 1px solid #727272;
                                                    -webkit-border-radius: 15px;
                                                    border-radius: 15px;"
                                       href="{{ route('blog.tag', $tag['name']) }}">{{ $tag['name'] }}
                                    </a>
                                </h6>
                            </div>
                        @endforeach
                    </div>
                    @endif
                </div>
            </div>

        </div>

        <div class="posts-view__pagination mt-5">
            {{ $blogs->links('vendor.pagination.default') }}
        </div>

    </div>
</section>

@stop

@section('script')
    <script>

        $('.slider').each(function() {
            var $this = $(this);
            var $group = $this.find('.slide_group');
            var $slides = $this.find('.slide');
            var bulletArray = [];
            var currentIndex = 0;
            var timeout;

            function move(newIndex) {
                var animateLeft, slideLeft;

                advance();

                if ($group.is(':animated') || currentIndex === newIndex) {
                    return;
                }

                bulletArray[currentIndex].removeClass('active');
                bulletArray[newIndex].addClass('active');

                if (newIndex > currentIndex) {
                    slideLeft = '100%';
                    animateLeft = '-100%';
                } else {
                    slideLeft = '-100%';
                    animateLeft = '100%';
                }

                $slides.eq(newIndex).css({
                    display: 'block',
                    left: slideLeft
                });
                $group.animate({
                    left: animateLeft
                }, function() {
                    $slides.eq(currentIndex).css({
                        display: 'none'
                    });
                    $slides.eq(newIndex).css({
                        left: 0
                    });
                    $group.css({
                        left: 0
                    });
                    currentIndex = newIndex;
                });
            }

            function advance() {
                clearTimeout(timeout);
                timeout = setTimeout(function() {
                    if (currentIndex < ($slides.length - 1)) {
                        move(currentIndex + 1);
                    } else {
                        move(0);
                    }
                }, 4000);
            }

            $('.next_btn').on('click', function() {
                if (currentIndex < ($slides.length - 1)) {
                    move(currentIndex + 1);
                } else {
                    move(0);
                }
            });

            $('.previous_btn').on('click', function() {
                if (currentIndex !== 0) {
                    move(currentIndex - 1);
                } else {
                    move(3);
                }
            });

            $.each($slides, function(index) {
                var $button = $('<a class="slide_btn">&bull;</a>');

                if (index === currentIndex) {
                    $button.addClass('active');
                }
                $button.on('click', function() {
                    move(index);
                }).appendTo('.slide_buttons');
                bulletArray.push($button);
            });

            advance();
        });
    </script>
    <script>
        $(document).ready(function() {
            $('#list').click(function(event){event.preventDefault();$('#products .item').addClass('list-group-item');});
            $('#grid').click(function(event){event.preventDefault();$('#products .item').removeClass('list-group-item');$('#products .item').addClass('grid-group-item');});
        });
    </script>

@stop