@extends('layouts.app_layout')
@section('page_title')
Welcome to my blog
@endsection

@section('content')
<style>
    .home-search .container-fluid {
        background: url(../images/bg-4.jpg) no-repeat center center;
        background-size: cover;
        /* filter: brightness(30%) */
        /* margin: auto; */
        position: relative;
        margin-top: -30px;
        padding-top: 23vh;
        padding-bottom: 23vh;

    }


    .home-search .col-xl-8 {
        margin: auto;
    }

    .home-search h1 {
        color: white;
        text-align: center;
        font-size: 60px;
        font-weight: 700;
        font-family: raleway;
        text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
    }


    .banner-search input {
        height: 70px;
        border-radius: 20px;
        border: none;
        z-index: 0;
        padding-right: 30%;
    }

    .search-post {
        background: #EC2E2E;
        color: white;
        float: right;
        height: 50px;
        margin-top: -60px;
        margin-right: 10px;
        border-radius: 20px;
        z-index: 1;
    }

    @media only screen and (max-width: 1200px) {
        .home-search .container-fluid {
            position: relative;
            padding-top: 15vh;
            padding-bottom: 15vh;
        }

        .home-search h1 {
            font-size: 50px;
        }
    }

    @media only screen and (max-width: 1200px) {
        .home-search .container-fluid {

            margin-top: -50px;
            padding-top: 17vh;
            padding-bottom: 17vh;
        }

        .home-search h1 {
            font-size: 45px;
        }
    }

    @media only screen and (max-width: 768px) {

        .home-search h1 {
            font-size: 34px;
            line-height: 36px;
        }

        .home-search .container-fluid {
            padding-left: 0px;
            padding-right: 0px;
        }
    }

</style>
<section class="home-search">
    <div class="container-fluid" style="">
        <div class="col-xl-8 col-lg-9 col-md-10 col-sm-12 col-xs-12">
            <h1>There is a tuturial for you</h1>
            <div class="banner-search">
                <form method="get" action="{{url('search_post')}}">
                    <input type="text" type="text" name="query" value="{{ Request('query')}}" autocomplete="off" class="form-control" placeholder="Search for an article.." required />
                    <button class="search-post btn"><i class="fas fa-search"></i> Search</button>
                </form>
            </div>
        </div>
    </div>
</section>
<section class="sect1">
    <div class="container-fluid post-with-bar-container">
        <div class="row">
            <div class="col-xl-10 col-lg-10 col-md-12 col-sm-12 main-post">
                <div class="row">
                    @foreach ($posts as $post)
                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 main-post-body">
                        <a href="{{ url (Str::replace([' ','?'], '-', Str::limit($post->post_title, 50))) }} {{$post->id}} ">
                            <div class="class">
                                <div class="image-container">
                                    <img src="../images/{{$post->featured_picture}}" alt="{{ Str::limit($post->post_title, 40) }}" />
                                </div>
                                <div class="">
                                    <h5><strong>{{ Str::limit($post->post_title, 100) }}</strong></h5>
                                </div>
                            </div>
                        </a>
                    </div>
                    @endforeach
                </div>
                {{-- {{ $posts->links() }} --}}

            </div>

            <div class="col-xl-2 col-lg-2 col-md-12 col-sm-12 side-bar">
                <div class="row">
                    @foreach ($sidebar_post1 as $sidebar_post_top)
                    <div class="col-xl-12 col-lg-12 col-md-4 col-6 side-bar-body">
                        <a href="{{ url (Str::replace([' ','?'], '-', Str::limit($sidebar_post_top->post_title, 50))) }} {{$sidebar_post_top->id}} ">
                            <div style="">
                                <img src="../images/{{$sidebar_post_top->featured_picture}}">
                                <h5>{!! Str::limit($sidebar_post_top->post_title, 50) !!}</h5>
                            </div>
                        </a>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>

<section class="sect2">
    <div class="container-fluid home-post-with-slider-container">
        <div class="home-header">
            <hr>
            <h3 class="text-white">JavaScript </h3>
        </div>
        <div class="my-slider">
            @foreach ($business as $business)
            <div class="slide">
                <a href="{{ url (Str::replace([' ','?'], '-', Str::limit($business->post_title, 50))) }} {{$business->id}}">
                    <div class="col">
                        <div class="col-md-12 shortlet-listing-image-container">
                            <img src="images/{{$business->featured_picture}}">
                            <div class="col-12  ">
                                <h4>{{Str::limit($business->post_title, 100)}}</h4>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            @endforeach
        </div>
        <div id="controls">
            <button class="previous"><i class="fas fa-angle-left"></i></button>
            <button class="next"><i class="fas fa-angle-right"></i></button>
        </div>
        <div class="see-more">
            <a href="">See more</a>
        </div>
    </div>
</section>

<section class="sect3">
    <div class="container-fluid  four-column-post">
        <div class="home-header">
            <hr>
            <h3>Bootstrap</h3>
        </div>
        <div class="row">
            @foreach ($sport as $sport)
            <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 four-column-post-body">
                <a href="{{ url (Str::replace([' ','?'], '-', Str::limit($sport->post_title, 50))) }} {{$sport->id}}">
                    <div class="four-column-post-size">
                        <div class="four-column-post-image-container">
                            <img src="../images/{{$sport->featured_picture}}" alt="{{ Str::limit($sport->post_title, 80) }}" />
                        </div>
                        <div class="four-column-post-author ">
                            <span><em>
                                    By {{$sport->first_name}} {{$sport->last_name}}
                                </em></span>
                        </div>
                        <div class="four-column-post-content">
                            <h5><strong>{!! Str::limit($sport->post_title, 70) !!}</strong></h5>
                            <h4>{!! Str::limit($sport->body, 50) !!}</h4>
                        </div>
                    </div>
                </a>
            </div>
            @endforeach
        </div>

        <div class="home-header">
            <hr>
            <h3>Laravel</h3>
        </div>
        <div class="row">
            @foreach ($news as $news)
            <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 four-column-post-body">
                <a href="{{ url (Str::replace(' ', '-', Str::limit($news->post_title, 50))) }} {{$news->id}}">
                    <div class="four-column-post-size">
                        <div class="four-column-post-image-container">
                            <img src="../images/{{$news->featured_picture}}" alt="{{ Str::limit($news->post_title, 80) }}" />
                        </div>
                        <div class="four-column-post-author ">
                            <span><em>
                                    By {{$news->first_name}} {{$news->last_name}}
                                </em></span>
                        </div>
                        <div class="four-column-post-content">
                            <h5><strong>{!! Str::limit($news->post_title, 70) !!}</strong></h5>
                            <h4>{!! Str::limit($news->body, 50) !!}</h4>
                        </div>
                    </div>
                </a>
            </div>
            @endforeach
        </div>
    </div>
</section>




<section class="sect5">
    <div class="container-fluid three-column-post-with-sidebar">
        <div class="home-header">
            <hr>
            <h3 class="">More From Us</h3>
        </div>
        <div class="row">
            <div class="col-xl-10 col-lg-10 col-md-9 col-sm-12">
                <div class="row">
                    @foreach ($last_sect as $last_sect)
                    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-6 four-column-post-body">
                        <a href="{{ url (Str::replace([' ','?'], '-', Str::limit($last_sect->post_title, 50))) }} {{$last_sect->id}}">
                            <div class="category">
                                <h4>{!! Str::limit($last_sect->category, 70) !!}</h4>
                            </div>
                            <div class="four-column-post-size" style="margin-top: -11px;">
                                <div class="four-column-post-image-container">
                                    <img src="../images/{{$last_sect->featured_picture}}" alt="{{ Str::limit($last_sect->post_title, 80) }}" />
                                </div>
                                <div class="four-column-post-content">
                                    <h5><strong>{!! Str::limit($last_sect->post_title, 70) !!}</strong></h5>
                                    <h4>{!! Str::limit($last_sect->body, 70) !!}</h4>
                                </div>

                            </div>
                        </a>
                    </div>
                    @endforeach
                </div>
            </div>

            <div class="col-xl-2 col-lg-2 col-md-3 col-sm-12 " style=" overflow-x: hidden; left:0; padding-right: 0; padding-bottom: 30px; padding-left: 10px;  z-index: 5;">
                <div>
                    <h5 class="text-center pb-2">Advertisement</h5>
                </div>
                <div class="row">
                    <div class="col-xl-12 col-lg-12" style=" padding: 0px 5px 0px 5px; ">
                        <a href="#"> <img src="../images/advert2.jpg" width="100%" height="43%" style="margin-bottom: 20px;" /></a>
                        <a href="#"> <img src="../images/advert1.jpg" width="100%" height="43%" /></a>
                    </div>

                </div>
            </div>
        </div>
    </div>
</section>


<section class="sect3">
    <div class="container-fluid  four-column-post">
        <div class="">
            <h3>Advertisement</h3>
        </div>
        <div class="row">
            <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-6 four-column-post-body" style="min-height: 300px; max-height: 350px;">
                <a href="#">
                    <img src="../images/advert2.jpg" width="100%" height="100%" style="margin-bottom: 20px;"" />                
                </a>
            </div>
            <div class=" col-xl-3 col-lg-3 col-md-6 col-sm-6 col-6 four-column-post-body" style="min-height: 300px; max-height: 350px;">
                    <a href="#">
                        <img src="../images/advert1.jpg" width="100%" height="100%" style="margin-bottom: 20px;"" />                
                </a>
            </div>
            <div class=" col-xl-3 col-lg-3 col-md-6 col-sm-6 col-6 four-column-post-body" style="min-height: 300px; max-height: 350px;">
                        <a href="#">
                            <img src="../images/advert2.jpg" width="100%" height="100%" style="margin-bottom: 20px;"" />                
                </a>
            </div>
            <div class=" col-xl-3 col-lg-3 col-md-6 col-sm-6 col-6 four-column-post-body" style="min-height: 300px; max-height: 350px;">
                            <a href="#">
                                <img src="../images/advert1.jpg" width="100%" height="100%" style="margin-bottom: 20px;"" />                
                </a>
            </div>
        </div>
    </div>   
</section>
<script>
$(document).ready(function () {
   
});
</script>
@endsection