@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="clearfix pt-30 pt-sm-40">
        <div class="section">
            <div class="section-title text-center mb-12 aos-init aos-animate" data-aos="fade-up">
                <h2 class="title">{{ $detail->title }}</h2>
            </div>
        </div>
    </div>






    <div class="section section-padding-t90-b100 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-2 row-cols-md-2 row-cols-sm-2 row-cols-1 mb-n6 list-wrapper">
                        @foreach($data['all'] as $item)
                        <div class="col list-item" data-type="blog-item" data-tag="{{ str_replace(' ',', ',$item['title']) }}">
                            <div class="blog">
                                <div class="thumbnail">
                                    <a href="{{ route('site.blog.view',['slug' => $item['slug'],'id' => $item['id']]) }}" class="image"><img src="{{ asset(sprintf('storage/blog/%s',$item['banner'])) }}" alt="{{ $item['title'] }}"></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>{{ sprintf('%d %s',$item['view'],__('general.view.title')) }}</li>
                                    </ul>
                                    <h3 class="title"><a href="{{ route('site.blog.view',['slug' => $item['slug'],'id' => $item['id']]) }}">{{ $item['title'] }}</a></h3>
                                    <a href="{{ route('site.blog.view',['slug' => $item['slug'],'id' => $item['id']]) }}" class="link "> <mark>{{ __('general.readmore') }}</mark> </a>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>

                <div class="col-lg-4 col-12 order-1 order-sm-2 mb-10">
                    <div class="sidebar-widget-wrapper">
                        @include('pages.widgets.right')
                    </div>
                </div>
            </div>

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

            <!-- Mobile Sidebar -->
            <div class="row d-block d-sm-none mt-5">
                <div class="col-12">
                    <div class="sidebar-widget-wrapper">
                        <div class="sidebar-widget">
                            <h3 class="sidebar-widget-title mb-2">{{ __('category.title') }}</h3>
                            <div class="sidebar-widget-content">
                                <ul class="sidebar-widget-cate-list">
                                    @foreach(\App\Models\Category::all()->where('type','blog')->where('language',\Illuminate\Support\Facades\Cookie::get('lang'))->toArray() as $item)
                                        <li><a href="{{ route('site.blog.category',['id' => $item['id']]) }}"><span class="text">{{ $item['title'] }}</span> <span class="count">{{ \App\Models\Blog::all()->where('category_id',$item['id'])->count() }}</span></a></li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                        <div class="sidebar-widget">
                            <h3 class="sidebar-widget-title mb-2">Popülar Yazılar</h3>
                            <div class="sidebar-widget-content">
                                <ul class="sidebar-widget-list-post">
                                    <li>
                                        <span class="cate">Marketing</span>
                                        <a href="#"> How your sales can work together in account-based marketing</a>
                                    </li>
                                    <li>
                                        <span class="cate">Busniess</span>
                                        <a href="#">The six things marketers need to understand about DTC marketing</a>
                                    </li>
                                    <li>
                                        <span class="cate">Marketing</span>
                                        <a href="#">Eleven top tips for developing agile marketing</a>
                                    </li>
                                    <li>
                                        <span class="cate">Agency</span>
                                        <a href="#"> How your sales can work together in account-based marketing</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 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 });
            let time = 0;

            $('#blogSearch').keyup(function(){
                clearTimeout(time);

                time = setTimeout(function() {
                    $('#state').val('');
                    var searchField = $('#blogSearch').val();
                    var expression = new RegExp(searchField, "i");
                    $.ajax({
                        url: '{{ route('api.blog.search') }}',
                        type: 'POST',
                        data: {q: searchField,language: '{{ \Illuminate\Support\Facades\Cookie::get('lang') }}', category_id: {{ $detail->id }} },
                        success: function(result)
                        {
                            $('#result').html('');
                            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();
                        }
                    })
                }, 350);

            });
        });
    </script>
@endsection