@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">
                        @if(count($data['blogs']) > 0)
                            @foreach($data['blogs'] 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'] }} Görüntülenme</li>
                                                <li><i class="far fa-tag"></i>etiket</li>
                                            </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>Devamını Oku</mark> </a>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @else
                            <h3 class="text-center text-white">Arama Sonuçları</h3>
                            <p class="text-center text-white">Her hangi bir sonuç bulunamadı...</p>
                        @endif
                    </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>
@endsection

@section('script')
    <script>
        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,
            }
        });
    </script>
@endsection