@extends('website.layouts.app')
@section('page-title')
    {{__('website.blogs')}}
@endsection
@section('bootstrap')
    @if(app()->getLocale()=='ar')
        <link rel="stylesheet" id="brk-direction-bootstrap" href="{{asset('website/css/assets/bootstrap-rtl.css')}}">
    @else
        <link rel="stylesheet" id="brk-direction-bootstrap" href="{{asset('website/css/assets/bootstrap.css')}}">

    @endif
    <link rel="stylesheet" id="brk-direction-bootstrap"
          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">



    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
@endsection

@section('breadcrumb')
    <div class="breadcrumbs__section breadcrumbs__section-thin brk-bg-center-cover lazyload"
         data-bg="{{asset('website/img/contact-us/1920x260_1.jpg')}}" data-brk-library="component__breadcrumbs_css">
        <span class="brk-abs-bg-overlay brk-base-bg-gradient-right-100 opacity-90"></span>
        <div class="breadcrumbs__wrapper rtl">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-12 col-lg-12">
                        <div
                                class=" justify-content-lg-center  pr-40 pr-xs-0 breadcrumbs__title center">
                            <h1
                                    class="brk-white-font-color font__weight-semibold font__size-48 line__height-68 font__family-montserrat">
                                {{__('website.blogs')}}
                            </h1>

                            <ol
                                    class="breadcrumb font__family-montserrat font__size-15 mt-10 line__height-16 brk-white-font-color">
                                <li>
                                    <a href="{{route('website.home')}}">{{__('website.home')}}</a>

                                    @if(app()->getLocale() == 'ar')
                                        &nbsp;&nbsp;&nbsp;&nbsp;<i class="fal fa-chevron-left icon"></i>
                                    @else
                                        <i class="fal fa-chevron-right icon"></i>&nbsp;&nbsp;&nbsp;
                                    @endif
                                </li>
                                <li class="active"> {{__('website.blogs')}}</li>
                            </ol>


                        </div>

                    </div>

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

@endsection
@section('content')
    <div class="container mt-80 rtl">
        <div class="row">
            <div class="col-12 col-lg-8 col-xl-9 order-xs-2 order-lg-1">
                <div class="brs-posts-container brs-posts-container_right-divider">

                    @if(count($blogs))
                        @foreach($blogs as $blog)
                            <div class="mb-60">
                                <div class="brs-post brs-post_simple" data-brk-library="component__blog_css">
                                    <div class="brs-post__img-container">
                                        <a href="{{route('website.blogs.show',$blog->slug)}}">
                                            <img src="{{$blog->image()}}" alt="{{$blog->title}}" class="brs-post__img">
                                        </a>
                                    </div>
                                    <div class="brs-post__body">

                                      <a href="{{route('website.blogs.show',$blog->slug)}}"><h2 class="brs-post__title font__family-montserrat t-right font__size-24 font__weight-bold line__height-28 text-left">
                                            {{$blog->title}}</h2></a>
                                        <p class="brs-post__paragraph t-right text-left font__family-open-sans font__size-16 font__weight-normal line__height-26">
                                            {!! $blog->brief_description !!}
                                        </p>
                                        <a href="{{route('website.blogs.show',$blog->slug)}}"
                                           class="btn btn-inside-out btn-lg ml-0 btn-shadow border-radius-25 btn-min-width-200 brk-library-rendered rendered w-40 "
                                           data-brk-library="component__button">
                                            <span class="before">{{__('website.read-more')}}</span><span
                                                    class="text">{{__('website.show-details')}}</span><span
                                                    class="after">{{__('website.read-more')}}</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @endif
                        {{$blogs->withQueryString()->links('vendor.pagination.custom')}}
                    <br>
                        <br>

                </div>
            </div>
            <div class="col-12 col-lg-4 col-xl-3 order-xs-1 order-lg-2">
                <div class="brs-sidebar brs-sidebar_right" data-brk-library="component__widgets">
                    <div class="brs-sidebar__title">
                        <h3 class="font__family-montserrat font__size-21 font__weight-bold line__height-22">{{__('website.search')}}</h3>
                    </div>
                    <form class="brk-sidebar-search" role="search" method="get" action="{{route('website.blogs')}}">
                        <input type="search" id="" class="brk-sidebar-search__input" name="search" maxlength="50"
                               value=""
                               placeholder="{{__('website.search')}}">
                        <button type="submit" class="brk-sidebar-search__submit">
                            <i class="fas fa-search"></i>
                        </button>
                    </form>
                    @if(count($recentBlogs))
                        <div class="brs-sidebar__title">
                            <i class="fab fa-hotjar brs-sidebar__title-icon"></i>
                            <h3 class="font__family-montserrat font__size-21 font__weight-bold line__height-22">{{__('website.recent-blogs')}}</h3>
                        </div>
                    @endif
                    @if(count($recentBlogs))

                    @foreach($recentBlogs as $recentBlog)
                        @if($recentBlog->slug!=null)

                            <div class="brs-post brs-post_mini-horizontal" data-brk-library="component__widgets">
                            <div class="brs-post__img-container">

                                <a href="{{route('website.blogs.show',$recentBlog->slug)}}">
                                    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                                         data-src="{{$recentBlog->image()}}" alt="alt" class="brs-post__img lazyload">
                                </a>
                            </div>
                            <div class="brs-post__about">

                                <a href="{{route('website.blogs.show',$recentBlog->slug)}}">
                                    <h3 class="brs-post__title font__family-montserrat t-right font__size-17 font__weight-normal line__height-26">
                                        {{$recentBlog->title}}</h3>
                                </a>
                            </div>
                        </div>
                            @endif

                        @endforeach
                    @endif


                    {{--                    <div class="brs-sidebar__title">--}}
                    {{--                        <h3 class="font__family-montserrat font__size-21 font__weight-bold line__height-22">{{__('website.tags')}}</h3>--}}
                    {{--                    </div>--}}
                    {{--                    <ul class="brk-tags brk-tags_solid font__family-montserrat" data-brk-library="component__tags">--}}
                    {{--                        <li><a href="#" rel="tag">Network</a></li>--}}
                    {{--                        <li><a href="#" rel="tag">Development</a></li>--}}
                    {{--                        <li><a href="#" rel="tag">Bussines</a></li>--}}
                    {{--                        <li><a href="#" rel="tag">Beauty</a></li>--}}
                    {{--                        <li><a href="#" rel="tag">WordPress</a></li>--}}
                    {{--                    </ul>--}}
                </div>
            </div>
        </div>
    </div>

@endsection