@extends('layouts.base')

@section('css')
    <link rel="stylesheet" href="{{ asset('assets/css/style.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/responsive.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/vendor/vendor.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/plugins/plugins.min.css') }}">
@endsection

@section('content')
    <div class="section pt-25 pt-sm-40 pb-20 pt-1 fix">
        <div class="container">

            <div class="row">
                <div class="col-lg-8 col-12 order-2 order-sm-1 mb-10">
                    <div id="result" class="row row-cols-lg-1 row-cols-md-2 row-cols-sm-2 row-cols-1 mb-n6 list-wrapper tagList">
                        @foreach($data['blog'] as $item)
                            <div class="col list-item">
                                <div class="blog">
                                    <div class="thumbnail">
                                        <a href="{{ route('site.blog.view',['code' => $item['code'],'slug' => $item['slug'],'id' => $item['id']]) }}" class="image"><img src="{{ asset('storage/blog/'.$item['banner']) }}" alt="Blog Image"></a>
                                    </div>
                                    <div class="info">
                                        <ul class="meta">
                                            <li><i class="far fa-calendar"></i>{{ \Carbon\Carbon::parse($item['created_at'])->format('d-m-Y') }}</li>
                                            <li><i class="far fa-eye"></i>{{ $item['view'] }} {{ \App\Metha\MethaTranslate::translate($translateModel,'blog.list.view') }}</li>
                                            @if(isset($item['tags']))
                                                @foreach($item['tags'] as $key)
                                                    <li><i class="far fa-tag"></i>{{ $key }}</li>
                                                @endforeach
                                            @endif
                                        </ul>
                                        <h3 class="title"><a href="{{ route('site.blog.view',['code' => $item['code'],'slug' => $item['slug'],'id' => $item['id']]) }}">{{ $item['title'] }}</a></h3>
                                        <a href="{{ route('site.blog.view',['code' => $item['code'],'slug' => $item['slug'],'id' => $item['id']]) }}" class="link "> <mark>{{ \App\Metha\MethaTranslate::translate($translateModel,'blog.list.readmore') }}</mark> </a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                        @foreach($data['static_page'] as $item)
                            @if(isset($item['title']))
                                    <div class="col list-item">
                                        <div class="blog">
                                            <div class="thumbnail">
                                                <a href="{{ route('site.page.view',['slug' => $item['slug']]) }}" class="image"><img src="{{ asset('storage/static-page/'.$item['image']) }}" alt="Blog Image"></a>
                                            </div>
                                            <div class="info">
                                                <ul class="meta">
                                                    <li><i class="far fa-calendar"></i>{{ \Carbon\Carbon::parse($item['created_at'])->format('d-m-Y') }}</li>
                                                    @if(isset($item['tags']))
                                                        @foreach(json_decode($item['tags'],true) as $key)
                                                            <li><i class="far fa-tag"></i>{{ $key }}</li>
                                                        @endforeach
                                                    @endif
                                                </ul>
                                                <h3 class="title"><a href="{{ route('site.page.view',['code' => $item['code'],'slug' => $item['slug']]) }}">{{ $item['title'] }}</a></h3>
                                                <a href="{{ route('site.page.view',['slug' => $item['slug']]) }}" class="link "> <mark>{{ $translateModel['blog.list.readmore'] }}</mark> </a>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                        @endforeach
                    </div>
                </div>

                @include('pages.widgets.blog.right')
            </div>

            <!-- Pagination Start -->
            <div class="row mt-10">
                <div class="col">
                    <div id="pagination-container"></div>
                </div>
            </div>
            <!-- Pagination End -->

            <!-- Mobile Sidebar -->
        @include('pages.widgets.blog.right-mobile')
            <!-- Mobile Sidebar End -->

        </div>
    </div>
@endsection


@section('js')
    <script src="{{ asset('assets/js/vendor/vendor.min.js') }}"></script>
    <script src="{{ asset('assets/js/plugins/plugins.min.js') }}"></script>

    <script src="{{ asset('assets/js/main.js') }}"></script>
    <script src="{{ asset('assets/js/chat.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/simplePagination.js/1.6/jquery.simplePagination.js"></script>
@endsection

@section('script')
    <script>
        $(document).ready(function(){
            var swiperkonfor = new Swiper('.blog-slider', {
                spaceBetween: 30,
                effect: 'fade',
                loop: true,
                speed: 750,
                observer: true,
                observeParents: true,
                mousewheel: {
                    invert: false,
                },
                autoplay: {
                    delay: 10000,
                    disableOnInteraction: false,
                },
                // autoHeight: true,
                pagination: {
                    el: '.blog-slider__pagination',
                    clickable: true,
                }
            });

            function pagination_blog() {
                var items = $(".list-wrapper .list-item");
                var numItems = items.length;
                var perPage = 6;

                items.slice(perPage).hide();

                $('#pagination-container').pagination({
                    items: numItems,
                    itemsOnPage: perPage,
                    prevText: '<i class="fal fa-angle-left"></i>',
                    nextText: '<i class="fal fa-angle-right"></i>',
                    onPageClick: function (pageNumber) {
                        var showFrom = perPage * (pageNumber - 1);
                        var showTo = showFrom + perPage;
                        items.hide().slice(showFrom, showTo).show();
                    }
                });
            }

            pagination_blog();
            $.ajaxSetup({ cache: false });
            $('#blogSearch').keyup(function(){
                $('#result').html('');
                $('#state').val('');
                var searchField = $('#blogSearch').val();
                var expression = new RegExp(searchField, "i");
                $.ajax({
                    url: '{{ route('api.blog.search') }}',
                    type: 'POST',
                    data: {q: searchField},
                    success: function(result)
                    {
                        if(result.count > 0)
                        {
                            $.each(result.data, function(key, value){
                                $('#result').append('<div class="col list-item"><div class="blog"><div class="thumbnail"><a href="'+value.link+'" class="image"><img src="/storage/blog/'+value.banner+'" alt="Blog Image"></a></div><div class="info"><ul class="meta"><li><i class="far fa-calendar"></i>'+value.created_at+'</li><li><i class="far fa-eye"></i>'+value.view+'</li></ul><h3 class="title"><a href="'+value.link+'">'+value.title+'</a></h3><a href="'+value.link+'" class="link "> <mark>Devamını Oku</mark> </a></div></div></div>');
                            });
                        }
                        pagination_blog();
                    }
                })
            });
        });
    </script>
@endsection