@extends('layouts_frontend.master')
@section('title','Blog Detail')

@section('extra-css')
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
@endsection
<style>
    #header {
        background: rgba(40, 58, 90, 0.9);
    }
    .blogShort{ border-bottom:1px solid #ddd;}
    .add{background: #333; padding: 10%; height: 300px;}
    
    .nav-sidebar { 
        width: 100%;
        padding: 8px 0; 
        border-right: 1px solid #ddd;
    }
    .nav-sidebar a {
        color: #333;
        -webkit-transition: all 0.08s linear;
        -moz-transition: all 0.08s linear;
        -o-transition: all 0.08s linear;
        transition: all 0.08s linear;
    }
    .nav-sidebar .active a { 
        cursor: default;
        background-color: #34ca78; 
        color: #fff; 
    }
    .nav-sidebar .active a:hover {
        background-color: #37D980;   
    }
    .nav-sidebar .text-overflow a,
    .nav-sidebar .text-overflow .media-body {
        white-space: nowrap;
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis; 
    }
    
    .btn-blog {
        color: #ffffff;
        background-color: #37d980;
        border-color: #37d980;
        border-radius:0;
        margin-bottom:10px
    }
    .btn-blog:hover,
    .btn-blog:focus,
    .btn-blog:active,
    .btn-blog.active,
    .open .dropdown-toggle.btn-blog {
        color: white;
        background-color:#34ca78;
        border-color: #34ca78;
    }
    article h2{color:#333333;}
    h2{color:#34ca78;}
    .margin10{margin-bottom:10px; margin-right:10px;}
    
    .sidebar .widget {
    margin-bottom: 36px;
}
.widget-search form input {
    height: 40px;
    border: none;
    background: #f5f5f5;
    border-radius: 25px;
    padding: 0 20px;
    width: 100%;
    font-size: 13px;
}
.sidebar .widget .widget-title h3 {
    font-size: 20px;
    font-weight: 500;
    color: #2d2d2d;
    padding-bottom: 15px;
    margin-bottom: 22px;
    border-bottom: 1px solid #e5e5e5;
    position: relative;
}
.widget-categories > ul.cat-list {
	list-style: none;
	padding-left: 0;
}
.widget-categories > ul.cat-list > li {
    margin-bottom: 15px;
    font-weight: 400;
}
.widget-categories > ul.cat-list > li > a {
    color: #484848;
    position: relative;
    font-size: 12px;
    text-decoration: none;
}
.widget-categories > ul.cat-list > li > a .fas {
	font-size: 10px;
    margin-right: 9px;
    color: #989898;
}
.widget-tags ul.tag-list {
	padding: 0;
	margin: 0;
	list-style: none; 
}
.widget-tags ul.tag-list li {
	margin: 0 0 10px;
	display: inline-block;
}
.widget-tags ul.tag-list li a {
    display: inline-block;
    padding: 5px 15px;
    color: #8c8c8c;
    font-size: 12px;
    background-color: #f5f5f5;
    border-radius: 30px;
    text-decoration: none;
}

</style>
@section('content')
<!-- ======= Service Section ======= -->

<section id="why-us" class="why-us section-bg" style="padding-top: 200px!important;">
    <div class="container">
        <div class="row">
            <div class="col-md-8 blogShort">
                <h3>{{$blog->title}}</h3>
                <img src="{{url('storage/blog_images').'/'.$blog->image}}" alt="post img" class="pull-left img-responsive postImg img-thumbnail" style="max-width: 50%!important;">
                <h4>{{$blog->sub_title}}</h4>
                <article><p>{!! $blog->description !!}</p></article>
            
        </div>
        <div class="col-md-3 sidebar">
            <div class="widget widget-categories">
                <div class="widget-title">
                    <h3>Recent Post</h3>
                </div>
                <ul class="cat-list">
                    @foreach ($blogs as $item)
                    <li>
                        <a href="#"><i class="fas fa-chevron-right"></i> {{$blog->title}}</a>
                    </li>
                    @endforeach
                    {{-- <li>
                        <a href="#"><i class="fas fa-chevron-right"></i> Accessories<span>(03)</span></a>
                    </li>
                    <li>
                        <a href="#"><i class="fas fa-chevron-right"></i> Cameras<span>(19)</span></a>
                    </li>
                    <li>
                        <a href="#"><i class="fas fa-chevron-right"></i> Computers<span>(56)</span></a>
                    </li>
                    <li>
                        <a href="#"><i class="fas fa-chevron-right"></i> Laptops<span>(03)</span></a>
                    </li>
                    <li>
                        <a href="#"><i class="fas fa-chevron-right"></i> Networking<span>(03)</span></a>
                    </li>
                    <li>
                        <a href="#"><i class="fas fa-chevron-right"></i> Old Products<span>(89)</span></a>
                    </li>
                    <li>
                        <a href="#"><i class="fas fa-chevron-right"></i> Smartphones<span>(90)</span></a>
                    </li>
                    <li>
                        <a href="#"><i class="fas fa-chevron-right"></i> Software<span>(23)</span></a>
                    </li> --}}
                </ul>
            </div>
        </div>
    </div>
</div>
</section>

@endsection
@section('extra-script')

@endsection