@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 style="padding-top: 150px;" class="section">
        <div class="container">
            <div class="row">
                <div class="bdt-timeline-container">
                    <div class="upk-xnac-slide-wrapper">
                        <!-- upk-xnac-timeline-single -->
                        <div class="swiper-container upk-xnac-single-slide-wrap mySwiper2">
                            <div class="swiper-wrapper">
                                @foreach($data['slider']['top'] as $item)
                                    <div class="upk-xnac-slide-item swiper-slide">
                                        <div class="upk-xnac-content-wrap">
                                            <h3 class="upk-xnac-title" data-swiper-parallax-y ="-240" data-swiper-parallax-duration="700">
                                                <a href="{{ route('site.blog.view',['slug' => $item->slug,'id' => $item->id]) }}">{{ $item->title }}</a>
                                            </h3>
                                            <div class="upk-xnac-meta-box-wrap">
                                                <div class="upk-xnac-author"  data-swiper-parallax-y ="-150" data-swiper-parallax-duration="900">
                                                    <div class="upk-author-text">
                                                        <a class="upk-name" href="{{ route('site.blog.view',['slug' => $item->slug,'id' => $item->id]) }}"><i class="far fa-calendar me-2"></i> {{ \Carbon\Carbon::parse($item->created_at)->format('d m Y') }}</a>
                                                        <span class="upk-comments"><i class="far fa-eye me-2"></i> {{ $item->view }} {{ \App\Metha\MethaTranslate::translate($translateModel,'blog.list.view') }}</span>
                                                    </div>
                                                </div>
                                                <div class="upk-xnac-button-wrap" data-swiper-parallax-y ="-100" data-swiper-parallax-duration="1000">
                                                    <a href="{{ route('site.blog.view',['slug' => $item->slug,'id' => $item->id]) }}">
                                                        <span>{{ \App\Metha\MethaTranslate::translate($translateModel,'blog.list.readmore') }}</span>
                                                        <i class="fas fa-arrow-right"></i>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="upk-xnac-image-wrap">
                                            <img class="upk-xnac-img" src="{{ asset('storage/blog/'.$item->banner) }}" />
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            <div class="upk-xnac-pagination-wrap">
                                <div class="swiper-pagination"></div>
                            </div>
                        </div>
                        <!-- upk-xnac-timeline-thumb -->
                        <div class="upk-xnac-thumb-slide-navi-wrap">
                            <div thumbsSlider="" class="swiper-container upk-xnac-thumbs-slide-wrap mySwiper">
                                <div class="swiper-wrapper">
                                    @foreach($data['slider']['bottom'] as $item)
                                        @php
                                            $dt = new DateTime;
                                            $dt->setDate(\Carbon\Carbon::parse($item->created_at)->format('Y'),\Carbon\Carbon::parse($item->created_at)->format('m'),\Carbon\Carbon::parse($item->created_at)->format('d'));
                                            $dt->setTime(\Carbon\Carbon::parse($item->created_at)->format('H'),\Carbon\Carbon::parse($item->created_at)->format('i'));
                                            $formatter = new IntlDateFormatter(\Illuminate\Support\Facades\Cookie::get('lang'), IntlDateFormatter::SHORT, IntlDateFormatter::SHORT);
                                            $formatter->setPattern('MMM d, y');
                                        @endphp
                                        <div class="upk-xnac-slide-item swiper-slide">
                                            <div class="upk-xnac-image-wrap">
                                                <img class="upk-img" src="{{ asset('storage/blog/'.$item->banner) }}" alt="">
                                            </div>
                                            <div class="upk-xnac-content">
                                                <div class="upk-xnac-category-date">
                                                    <a class="upk-xnac-category" href="{{ route('site.blog.category',['id' => $item->category_id]) }}">{{ $data['categoryList'][$item->category_id]['title'] }}</a>
                                                    <div class="upk-xnac-date">{{ $formatter->format($dt) }}</div>
                                                </div>
                                                <h3 class="upk-xnac-title">
                                                    <a href="{{ route('site.blog.view',['slug' => $item->slug,'id' => $item->id]) }}">{{ $item->title }}</a>
                                                </h3>
                                            </div>
                                        </div>
                                    @endforeach

                                </div>
                            </div>

                            <div class="upk-xnac-thumb-navi-wrap">
                                <div class="upk-button-next upk-next-prev"><span>{{ \App\Metha\MethaTranslate::translate($translateModel,'blog.list.next') }}</span><i class="fas fa-arrow-right"></i></div>
                                <div class="upk-button-prev upk-next-prev"><i class="fas fa-arrow-left"></i><span>{{ \App\Metha\MethaTranslate::translate($translateModel,'blog.list.previous') }}</span></div>
                            </div>
                        </div>
                    </div>
                    <!--    demo perpose html end-->
                </div>
            </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->blog_title) }}">
                            <div class="blog">
                                <div class="thumbnail">
                                    <a href="{{ route('site.blog.view',['slug' => $item->blog_slug,'id' => $item->blog_id]) }}" class="image"><img src="{{ asset(sprintf('storage/blog/%s',$item->blog_banner)) }}" alt="{{ $item->blog_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',$item->view,\App\Metha\MethaTranslate::translate($translateModel,'blog.list.readmore')) }}</li>
                                        <li><i class="far fa-comment"></i>{{ sprintf('%d',isset($data['blog_comments'][$item->blog_code]) ? count($data['blog_comments'][$item->blog_code]) : 0,\App\Metha\MethaTranslate::translate($translateModel,'blog.list.view')) }}</li>
                                    </ul>
                                    <h3 class="title"><a href="{{ route('site.blog.view',['slug' => $item->blog_slug,'id' => $item->blog_id]) }}">{{ $item->blog_title }}</a></h3>
                                    <a href="{{ route('site.blog.view',['slug' => $item->blog_slug,'id' => $item->blog_id]) }}" class="link "> <mark>{{ \App\Metha\MethaTranslate::translate($translateModel,'blog.list.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 -->

        @include('widgets.subscription')

            <!-- 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">{{ \App\Metha\MethaTranslate::translate($translateModel,'blog.list.categories') }}</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">{{ \App\Metha\MethaTranslate::translate($translateModel,'blog.list.popular-blogs') }}</h3>
                            <div class="sidebar-widget-content">
                                <ul class="sidebar-widget-list-post">

                                </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') }}'},
                        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