@extends("layout.app")

@section('styles')
    @include('partial.infinite_pagination.style')
@endsection

@section("content")
    <style type="text/css">
        @media (min-width: 768px) {
            .btn + .btn {
                margin-left: 0;
            }
        }

        .btn--icon i {
            right: 0;
            left: auto;
            border-radius: 0px 6px 6px 0px;
        }

        .btn--icon {
            padding-right: 4.571429em;
            padding-left: 1.571429em;
        }
    </style>
    <section class="text-center mt-20">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-lg-6">
                    <h1>المقالات</h1>
                </div>
            </div>
        </div>
    </section>
    <section>
        <div class="container">
            <div class="row justify-content-between text-right">
                <div class="col-md-12">
                    <div>
                        <div class="row">
                            <div class="col-md-6"><label><strong>الاقسام:</strong></label></div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 text-right">
                                <a class="btn @if(!request()->get("category")) btn--primary @endif"
                                   href="{{route("blog.index")}}"> <span class="btn__text">الجميع</span>
                                </a>
                                @foreach($categories as $category)
                                    <a class="btn btn--icon @if($category->slug == request()->get("category")) btn--primary @endif"
                                       href="{{route("blog.index",["category"=>$category->slug])}}">
                                            <span class="btn__text">
                                                <i class="{{$category->icon}}"></i>
                                                {{$category->title}}
                                            </span>
                                    </a>
                                @endforeach
                            </div>
                        </div>
                        <hr>
                        <div>
                            <form id="blog-search">
                                <div class="row justify-content-center">
                                    <div class="col-lg-6 col-lg-8">
                                        <div class="input-icon">
                                            <i class="material-icons c-pointer" onclick="$('#blog-search').submit()">search</i>
                                            <input type="search" name="search" value="{{ request('search') }}"
                                                   placeholder="ابحث عن المقال الذي تريده">
                                            <input type="hidden" name="category" value="{{ request('category') }}"/>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>

                        <hr>
                        <div class="scrolling-pagination">
                            <div class="masonry__container masonry masonry-blog-magazine accessories-items">
                                @foreach($blogs->chunk(2) as $chunk)
                                    <div class="row">
                                        @foreach($chunk as $blog)
                                            @include("components.blog")
                                        @endforeach
                                    </div>
                                @endforeach


                            </div>
                            <!--end of masonry container-->
                            <div class="pagination">
                                {!! $blogs->appends($appends)->links("vendor.pagination.default"); !!}
                            </div>
                        </div>
                        @include('partial.infinite_pagination.spinner')

                    </div>
                    <!--end masonry-->
                </div>
            </div>
            <!--end of row-->
        </div>
        <!--end of container-->
    </section>
@endsection

@section('scripts')
    @include('partial.infinite_pagination.script')
@endsection