@extends('front.layouts.front')

@section('content')

{{-- <div class="container-fluid bg-gradient d-sm-block d-none">
    <div class="container">
        <div class="row position-relative align-items-center text-white justify-content-center">            
            <div class="justify-content-lg-center justify-content-end">                                   
                <a class="blog-nav-link" href="/hire-or-buy" target="_self">Hire or Buy</a> 
                <span class="blog-nav-divider mx-3"></span>                                                       
                <a class="blog-nav-link" href="/new-or-refurbished" target="_self">New or Refurbished</a>             
                <span class="blog-nav-divider mx-3"></span>                                                                          
                <a class="blog-nav-link" href="/home-or-business" target="_self">For Home or Business Use</a>                
            </div>            
        </div>
    </div>
</div> --}}

<div class="bg-light pb-5" id="app">
    <div class="container">            
        <div class="row">
            <div class="col-lg-8 col-12 blog">
                @foreach($stripped_posts as $stripped_post)
                    
                    @php
        
                    $article_categories = $stripped_post->post->taxonomies->where('hierarchical', 0)->map(function($item) {
                        return ['slug' => $item->slug, 'title' => $item->title];
                    });

                    if(($article_categories->count()) > 1){
                        $article_categories = $stripped_post->post->taxonomies->where('hierarchical', 1)->map(function($item) {
                            return ['slug' => $item->slug, 'title' => $item->title];
                        });
                    }
        
                    $categories_map = $article_categories->map(function($item) {
                        return $item['title'];
                    });
                    
                    @endphp

                    <section class="container-fluid blog-post">
                        <div class="container bg-gradient text-white pt-4 pb-3">
                            <div class="row">
                                <div class="col-12">
                                    <p style="text-align: center;">
                                        <span class="lead">
                                            {{ date('F d, Y', strtotime($stripped_post->post->created_at)) }}
                                        </span>
                                    </p>
                                    <h1 class="blog-title" style="text-align: center;"><a class="blog-title-link" href="/{{ $stripped_post->post->slug }}">{{ $stripped_post->post->title }}</a></h1>
                                    <p style="text-align: center;">
                                        <span class="lead">
                                            @foreach($article_categories as $category)                             
                                                <a href="/tag/{{ $category['slug'] }}" title="{{ $category['slug'] }}">{{ $category['title'] }}@if($loop->remaining),@endif</a>
                                            @endforeach
                                        </span>
                                    </p>
                                </div>
                            </div>
                        </div>
                

                        <div class="container bg-white">
                            <div class="row">
                                <div class="col-6 col-sm-12 px-0 embed-responsive embed-responsive-21by9">
                                    <!-- Insert Blog Post Image -->  
                                    <img class="featured-image embed-responsive-item" src="{{ $stripped_post->post->featured_image ?? ''}}" />
                                </div> 
                                {{-- <div class="col-12 col-sm-6 px-0">
                                    <!-- Insert Blog Post Image -->  
                                    <img class="featured-image" src="{{ $stripped_post->post->featured_image ?? ''}}" />
                                </div>   --}}
                                <div class="col-6 col-excerpt p-4">
                                    <p class="excerpt">{{ $stripped_post->post->excerpt }}</p>
                                    
                                    <!-- Get Blog Slug -->
                                    @php
                                        $blog_slug = $stripped_post->post->slug;
                                    @endphp

                                    <div class="row justify-content-between align-items-center">
                                        <div class="col-sm-auto col-12 py-sm-0 py-3 text-center">
                                            <a href="/{{ $stripped_post->post->slug }}">Continue Reading →</a> 
                                        </div>
                                        <div class="col-sm-auto col-12 py-sm-0 py-3 text-center">
                                            <component-social url="http://mail.dev.milbel.com.au/"></component-social>                           
                                        </div>
                                    </div>
                                </div>    
                            </div>
                        </div>
                    </section>

                @endforeach
                
                <div class="pt-5 d-flex justify-content-center">
                    {!! str_replace('/?', '?', $posts->links()) !!}
                </div>

            </div>
            <div class="col-lg-4 col-12 text-center">
                <div class="col-sidebar bg-white" id="search-bar">
                    <h3 class="search">Search</h3>
                    <div class="col-12 col-sm-auto mb-sm-0 mb-3">
                        <div class="block-top border py-0 px-3 w-100 w-sm-auto d-flex blog-search">
                            <form id="searchFormSidebar" class="form-inline search-form">
                                <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="35" viewBox="0 0 29.03 29.04"><defs><style>.cls-1{fill:none;}.cls-2{clip-path:url(#clip-path);}.cls-3{fill:#606060;}</style><clipPath id="clip-path" transform="translate(0)"><rect class="cls-1" x="-1411.58" y="-50.23" width="2000" height="3664"></rect></clipPath></defs><title>icon-search</title><g class="cls-2"><path class="cls-3" d="M10.55.85a9.71,9.71,0,1,0,6.87,2.84A9.66,9.66,0,0,0,10.55.85m0,20.26A10.56,10.56,0,1,1,18,18a10.5,10.5,0,0,1-7.47,3.09" transform="translate(0)"></path><path class="cls-3" d="M10.55,5.22a5.34,5.34,0,1,0,3.78,1.56,5.29,5.29,0,0,0-3.78-1.56m0,11.52a6.13,6.13,0,0,1-4.37-1.81,6.2,6.2,0,0,1,0-8.75,6.19,6.19,0,0,1,8.75,0,6.19,6.19,0,0,1-4.38,10.56" transform="translate(0)"></path><path class="cls-3" d="M25.82,29a3.07,3.07,0,0,1-2.18-.9l-7.23-7.23a.42.42,0,0,1,.6-.6l7.23,7.22a2.23,2.23,0,0,0,3.16,0l.14-.13a2.25,2.25,0,0,0,0-3.16L20.31,17a.42.42,0,0,1,0-.6.43.43,0,0,1,.6,0l7.23,7.23a3.09,3.09,0,0,1,0,4.36l-.14.14a3.07,3.07,0,0,1-2.18.9" transform="translate(0)"></path></g></svg>
                                <input id="searchBarSidebar" name="search" class="form-control input-sm py-0" type="search" aria-label="Search" value="">
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-sidebar bg-white">
                    <h3 class="text-center">Recent Posts</h3>
                    <ul>
                        @foreach($recent as $stripped_post) 
                            @if($loop->iteration <= 5)
                                <li><a href="/{{ $stripped_post->post->slug }}">{{ $stripped_post->post->title }}</a></li>
                            @else
                                @continue
                            @endif
                        @endforeach
                    </ul>
                </div>

                {{-- This is the Categories section that is being removed --}}
                <div class="col-sidebar bg-white">
                    <h3 class="text-center">Testimonials</h3>
                        <div class="scrolling-testimonials">
                            @foreach($testimonials as $testimonial)
                                <div class="testimonial">
                                    <p class="testimonial-title">{{$testimonial->title}}</p>
                                    <p class="testimonial-description">{{$testimonial->description}}</p>
                                </div>
                            @endforeach
                        </div>
                    {{-- <ul>
                        @foreach($categories as $category)
                            <li><a href="/{{ $category->taxonomy->slug }}" title="{{ $category->taxonomy->title }}">{{ $category->taxonomy->title }}</a></li>
                        @endforeach
                    </ul> --}}
                </div>

            </div>
        </div>
    </div>
</div>
@endsection