@extends('frontend.layouts.mobile')
@section('title', 'Blog - ' . app_name())
@push('head-area')
    <link rel="canonical" href="{{ URL::current() }}" />
    <link rel="stylesheet" href="{{asset('/design/assets/css/style.css?v=0.37')}}">
    <style>
        .page-item {
                border: none;
                padding: 0px;
        }
        @media (min-width: 425px) and (max-width:485px){
            .search-blog-wrapper{
                padding-right: 1.5rem !important;
                padding-left: 1.5rem !important;
            }  
        } 
    </style>
@endpush
@section('content')
    <!-- Cart Page Start -->
    {{-- <div class="cart_area cart-area-padding pt--35" style="margin-bottom: 30%;">
        <div class="container content-height">
            <div class="page-section-title">
                <h1 class="h3">Blog</h1>
            </div>
            @if($data['posts'])
                <section class="mt--10">
                    <div class="container">
                        <div class="row2">
                            @foreach($data['posts'] as $post)
                                @php
                                    $link = '/blog/'.$post->slug;
                                    $image = '/up_data/blog/'.$post->image_thumbnail;
                                @endphp
                                <div class="col-xl-4 mb--30">
                                    <div class="blog-post">
                                        <a href="{{ $link }}" class="blog-image-gallery" aria-label="{{ $post->heading_content }}">
                                            <amp-img src="{{ $image }}" width="360" height="200" layout="responsive" alt="{{ $post->heading_content }}" noloading="" srcset="{{ $image }} 470w, {{ $image }} 820w, {{ $image }} 1440w" data-hero>
                                                <div placeholder="" class="commerce-loader"></div>
                                            </amp-img>
                                        </a>
                                        <div class="blog-content mt--15 text-center">
                                            <header>
                                                <div class="mt--5">
                                                    <h1 class="h3"><a href="{{ $link }}">{{ $post->name }}</a></h1>
                                                </div>
                                            </header>
                                            <article>
                                                <h3 class="d-none sr-only">blob-article</h3>
                                                <p>{{ $post->short_content }}</p>
                                            </article>
                                            <div class="blog-btn">
                                                <a href="{{ $link }}" class="btn-product-amp-details">Blog Detail</a>
                                            </div>
                                            <div class="blog-content mt--15 text-center"></div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <div class="mt--30">
                            <div class="pagination-widget">
                                <div class="site-pagination">
                                    {!! $data['posts']->appends( request()->except('page') )->links() !!}
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            @else
                <p><strong>Sorry!</strong>, no blog posts found.</p>
            @endif
        </div>
    </div> --}}


    <div class="container-fluid">
        <div class="row mx-0">
            <div class="col-md-12 mt-4 mb-3 d-flex">
                <div class="col-sm-6 col-md-4">
                    <h1 class="title">Blog</h1>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 mb-3 search-blog-wrapper">
                <input id="searchBlog" class="form-control rounded" type="text" onkeyup="blogSearch(this.value)" placeholder="Search Blog..">
            </div>
        </div>
        <div class="row">
            <div class="col-12 page-content mb-5">
                @if(count($data['posts']) > 0)
                    <section class="blog-pagsectione">
                        <div class="container-fluid">
                            <div id="blog-posts-container" class="row">
                                @foreach($data['posts'] as $post)
                                    @php
                                        $link = '/blog/'.$post->slug;
                                        $image ='/up_data/blog/'.$post->image_thumbnail;
                                    @endphp
                                    <div class="col-lg-4 col-md-6 mb-5" id="blog_page_content">
                                        <div class="blog-post d-flex flex-column align-items-center mb-10">
                                            <a href="{{ $link }}" class="blog-image">
                                                <img class="img-thumbnail img-fluid" width="360" height="203" src="{{ $image }}" alt="{{ $post->heading_content }}">
                                            </a>
                                            <div class="blog-content mt-3 text-center mx-3">
                                                <header>
                                                    <h2 class="blog-title" style="font-size: 1.6rem">
                                                        <a href="{{ $link }}">
                                                            @if (strlen($post->name) > 60)
                                                                {!! implode(' ', array_slice(explode(' ', $post->name), 0, 8)) !!} {{ '. . . . .' }}
                                                            @else
                                                                {!! $post->name !!}
                                                            @endif
                                                        </a>
                                                    </h2>
                                                </header>
                                                <article>
                                                    <h3 class="d-none sr-only">
                                                        {!! $post->name !!}
                                                    </h3>
                                                    <p style="overflow: hidden;
                                                    text-overflow: ellipsis;
                                                    display: -webkit-box;
                                                    -webkit-line-clamp: 3;
                                                    -webkit-box-orient: vertical;">
                                                        @if (strlen($post->short_content) > 300)
                                                            {!! implode(' ', array_slice(explode(' ', $post->short_content), 0, 248)) !!} {{ '. . . . .' }}
                                                        @else
                                                            {!! $post->short_content !!}
                                                        @endif
                                                    </p>
                                                </article>
                                                <div class="blog-btn pb-1 pt-1">
                                                    <a href="{{ $link }}" class="btn btn-rounded btn-primary">Blog Detail</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            <div id="pagination" class="mt--30" style="overflow: auto;">
                                <div class="pagination-widget">
                                    <div class="site-pagination">
                                        {!! $data['posts']->appends( request()->except('page') )->links() !!}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                @else
                    <p><strong>Sorry!</strong>, no blog posts found.</p>
                @endif
            </div>
        </div>
    </div>
    @push('before-scripts')
        <input type="hidden" value="blog" id="page_id">
    @endpush
@endsection