@extends('frontend.layouts.app')
@section('title', $data['posts']->title)
@section('meta_description', $data['posts']->meta_description)

@section('meta_url', URL::Current())
@section('page_title', $data['posts']->title)
@section('product_description',$data['posts']->meta_description)
@php
    if(app()->environment() == 'dev')
        $site = 'dev';
    else
        $site = 'www';
@endphp
@section('image','https://'.$site.'.germedusa.com/static/assets/images/og_imag_logo.png')
@section('image:width', "1200")
@section('image:height', "630")
{{-- @section('meta_keywords', $data['posts']->meta_keywords) --}}
@push('head-area')
    <link rel="canonical" href="{{ URL::current() }}" />
    <style>
        h1{
            font-weight: bold;
        }

        h3 { 22px; }
        h4 { 20px; }
        h5 { 18px; }
    </style>
@endpush
@section('content')
<div class="row">
    <div class="col-md-12 mb-2">
        <div id="main-banner-after-header"  class="bg-buttery-white align-items-center d-flex banner-3 justify-content-center">
        <h1 class="title category_detail_heading h1-tag ">
            BLOGS
        </h1>
        </div>
    </div>
</div>

@include('includes.partials.bread-crumbs')

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12 mt-4 mb-3 d-flex">
                <div class="col-12 col-sm-6 col-md-4">
                    <h2 class=" title">Blogs</h2>
                </div>
                <div class="col-12 col-sm-6 col-md-4 mb-2">
                    <input id="searchBlog" class="form-control rounded" type="text" onkeyup="blogSearch(this.value)"  placeholder="Search Blog..">
                </div>
            </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">
                                            <a href="{{ $link }}" class="blog-image">
                                                <img class="img-thumbnail img-fluid" style="height: 204px;" width="360" height="203" data-src="{{ $image }}" alt="{{ $post->heading_content }}">
                                            </a>
                                            <div class="blog-content mt-3 text-center">
                                                <header style="min-height: 56px; height: 56px;" class="overflow-hidden">
                                                    <h2 class="blog-title" style="font-size: 1.6rem">
                                                        <a href="{{ $link }}">
                                                            @if (strlen($post->name) > 25)
                                                                {!! 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">
                                <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