@extends('master')

@section('css')
<link href="{{ asset('assets/css/blog.css') }}" rel="stylesheet">
<link href="{{ asset('assets/css/home.css') }}" rel="stylesheet">
<link href="{{ asset('assets/css/page.css') }}" rel="stylesheet">
@endsection

@section('content')
<div class="container category">

    <ul class="breadcrumb">
        
        
        @if (isset($current_post))
            <li><a class="default" href="/">Home</a></li>
            <li><a class="default" href="/blog">Blog</a></li>
            <li class="active">{{ $current_post->title }}</li>
        @elseif (isset($title))
            <li><a class="default" href="/">Home</a></li>
            <li><a class="default" href="/blog">Blog</a></li>
            <li class="active">{{ $title }}</li>
        @else
            <li><a class="default" href="/">Home</a></li>
            <li class="active">Blog</li>
        @endif


    </ul>
</div>
<style>
	.col-xs-12.blogposts-detail img {width:100%;max-width:100%;}
</style>
<div class="orange-homepage-box orange-homepage-box2" id="section1">
    <h3>Welcome to the Rosewood Pet Blog!</h3>
</div>
<div class="container category margin-top-bottom">
    <div class="row">
        @if (!empty($current_post))
        <div class="col-xs-12 blogposts-detail">
            @if ($current_post->image)
            <img src="{{ Str::start($current_post->image, '/') }}" class="img-full" alt="{{ $current_post->title }}" style="width:1024px;max-width:100%;">
            <div class="clearfix"></div>
            @endif
            <div class="col-sm-8 col-xs-12">
                <h2 class="singleblog-title">{{ $current_post->title }}</h2>

                {!! $current_post->content !!}

                <div id="disqus_thread"></div>
                <script>
                    var disqus_config = function () {
                        this.page.url = '{{ $current_post->get_route() }}';
                        this.page.identifier = '{{ $current_post->url }}';
                    };
                    (function () { // DON'T EDIT BELOW THIS LINE
                        var d = document, s = d.createElement('script');

                        s.src = '//rosewoodblog.disqus.com/embed.js';

                        s.setAttribute('data-timestamp', +new Date());
                        (d.head || d.body).appendChild(s);
                    })();
                </script>
                <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
            </div>
            <style>
                .left-menu {max-height:1000px;overflow:hidden;}
                .left-menu .slider8 {max-height:740px;}
                .left-menu .bx-prev {transform: rotate(-90deg);}
                .left-menu .bx-next {transform: rotate(-90deg);}
                .bx-loading {display:none !important;}
                .slider8 a p {padding:15px;}
            </style>
            <div class="col-sm-4 col-xs-12 left-menu">
                <h3>Recent article</h3>
                <div class="slider8">
                    @if ($posts->isEmpty())
                    {{ $empty_message }}
                    @else
                   
                    @foreach ($posts->chunk(6) as $chunk)
                        
                        @foreach ($chunk as $post)
                        
                       
                        
                        <div class="slide" style="background-color:#e8501d;"><a href=" {{ $post->get_route() }} "><img src="{{ $post->image ? Str::start($post->image, '/') : '' }}" alt="{{ $post->title }}"><p style="color:white;">{{ $post->title }}</p></a></div>
                        
                        @endforeach
                    @endforeach
                    @endif
                </div>
            </div>
        </div>
    </div>
    @else
    <div class="col-sm-3 col-xs-12 left-menu">
        <h3>Quick search</h3>
        <!--h4>Category</h4>

                <div class="left-menu-box">
        @foreach ($most_popular_posts as $most_popular_post)
            <div><a href="{{ $most_popular_post->get_route() }}">{{ $most_popular_post->title }}</a></div>
        @endforeach
        </div>

        <hr-->
        <h4 class="category-left-title">Category <span class="visible-xs-inline-block">&#9660;</span></h4>

        <div class="left-menu-box category-left-menu">
            @foreach ($blogcategories as $blogcategory)
            <div><a href="{{ $blogcategory->get_route() }}">{{ $blogcategory->title }}</a></div>
            @endforeach
        </div>

        <h4 class="archive-left-title">Archive <span class="visible-xs-inline-block">&#9660;</span></h4>

        <div class="left-menu-box archive-left-menu">
            @foreach ($archive as $archive_year=>$archive_months)
            <div>
                <a href="{{ route('blogposts_by_year',$archive_year) }}">{{ $archive_year }}</a>
                @if ($archive_year == $current_year)
                <ul>
                    @foreach ($archive_months as $archive_month=>$archive_month_count)
                    <li><a href="{{ route('blogposts_by_date',array($archive_year, $archive_month)) }}">{{ date('F',strtotime("01-$archive_month-$archive_year")) }} <span>({{ $archive_month_count}})</span></a></li>
                    @endforeach
                </ul>
                @endif
            </div>
            @endforeach
        </div>
    </div>

    <div class="col-md-9 col-xs-12 blogposts">
        @if ($posts->isEmpty())
        {{ $empty_message }}
        @else
        @foreach ($posts as $post)

        <div class="col-md-6 matchheight">
            <div class="innerblog">

                @if ($post->image)
                <a href="{{ $post->get_route()}}" class="blog-link">

                    <img src="{{ $post->image }}" class="img-responsive" alt="{{ $post->title }}" style="width:600px;max-width:100%;">
                </a>
                @endif
                <div class="blog-date">{!! strtoupper(date('d F Y',strtotime($post->date))) !!}</div>
                <a class="h2" href="{{ $post->get_route()}} ">
                    <h2>{{ $post->title }}</h2>
                </a>
                <p>{{ $post->summary }}</p>
            </div>
        </div>

        @endforeach
        @endif

    </div>
    @endif
</div>
</div>

<div class="container homepage-hr">
    <hr>
</div>
<div class="container two-orange-button">
    <a href="/contact-us#section22">Order a catalogue</a>
    <a href="/contact-us#section33">Become a stockist</a>
</div>
<script>
    $(".nav.navbar-nav.navbar-right li:nth-child(2) a").addClass("active-link");
    $( ".archive-left-title" ).click(function() {
    $( ".archive-left-menu" ).toggleClass( "autoheight" );
  });
      $( ".category-left-title" ).click(function() {
    $( ".category-left-menu" ).toggleClass( "autoheight" );
  });
</script>
@endsection