@extends('layouts.adkgeneraltrading')
@section('meta')
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
@endsection
@section('title','Articles')
@section('content')
    <!-- ARTICLES-->
    <div class="block3" >
        <div class="container">
            <div class="row">
                <div class="col-xs-12" align="center">

                    @if($articles->count()>0)
                      <!--<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 ">-->
                    {{--get first item in articles array and display big--}}
                        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 {{$firstarticle->article_category}}">
                            <div class="thumbnail shadowed2">
                                <a href="{{route('articles.show',$firstarticle->id)}}"><img src="{{asset($firstarticle->article_photo)}}" alt="...">
                                    <div class="caption">
                                        <span class="badge bluee">{{$firstarticle->article_category}} </span>
                                        <h4 title="{{$firstarticle->article_title}}">{{str_limit($firstarticle->article_title,50)}} </h4>

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

                            @foreach($articles as $article)
                            <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 {{$article->article_category}}">
                            <div class="thumbnail shadowed2">
                                <a href="{{route('articles.show',$article->id)}}"><img src="{{asset($article->article_photo)}}" alt="...">
                                    <div class="caption">
                                        <span class="badge bluee">{{$article->article_category}} </span>
                                        <h4 title="{{$article->article_title}}">{{str_limit($article->article_title,30)}} </h4>

                                    </div>
                                </a>
                            </div>
                                </div>
                            @endforeach
                        {{--</div>--}}

                    @else

                    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                        <div class="thumbnail shadowed2">
                            <a href="#"><img src="img/thumb2.jpg" alt="...">
                                <div class="caption">
                                    <span class="badge bluee">ANNOUNCEMENT </span>
                                    <h4>Today we are launching the qqqq </h4>
                                </div>
                            </a>
                        </div>
                    </div>
                    @endif
                </div><!--col12-->


            </div>

        </div><!--col12-->


    </div>


    <!--LATEST ARTICLES-->
    <div class="block pullup">
        <div class="container">
            <div class="row">
                <div class="col-xs-12" align="center">

                    <h1 >OUR <span class="gray">ARTICLES</span></h1>
                    <img src="img/sep1.png" class="sep">


                    <div  align="center">
                        <button class="btn btn-default filter-button " data-filter="all">All</button>
                        <button class="btn btn-light filter-button  " data-filter="news">NEWS </button>
                        <button class="btn btn-light filter-button  " data-filter="promotion">PROMOTIONS </button>
                        <button class="btn btn-light filter-button  " data-filter="announcements"> ANNOUNCEMENTS </button>
                        <br><br><br>
                    </div>
                    <br>
                </div>

   {{-- <div class="row">--}}
                @if($allarticles->count()>0)
                    @foreach($allarticles as $article)
                        <div class="col-xs-6 col-sm-4  col-lg-3 filter {{$article->article_category}}">
                            <div class="thumbnail">
                                <a href="{{route('articles.show',$article->id)}}"><img src="{{$article->article_photo}}"  width="100%" height="10%">
                                    <div class="caption">
                                        <span class="badge bluee">{{$article->article_category}} </span>
                                        <h4 title="{{$article->article_title}}">{{str_limit($article->article_title,20)}}</h4>
                                    </div>
                                </a>
                            </div>
                        </div>
                    @endforeach
                    
                @else
                
                <div class="col-xs-6 col-sm-4 col-lg-3 filter promotions">
                    <div class="thumbnail">
                        <a href="#"><img src="img/thumb3.jpg" alt="...">
                            <div class="caption">
                                <span class="badge grayy">PROMOTIONS </span>
                                <h4>Juice Promotion at ADK</h4>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-xs-6 col-sm-4  col-lg-3 filter news">
                    <div class="thumbnail">
                        <a href="#"><img src="img/thumb1.jpg" alt="...">
                            <div class="caption">
                                <span class="badge red">NEWS </span>
                                <h4>Shop1 Opening At Maldives</h4>
                            </div>
                        </a>
                    </div>
                </div>

                <div class="col-xs-6 col-sm-4  col-lg-3 filter announcements">
                    <div class="thumbnail">
                        <a href="#"><img src="img/thumb2.jpg" alt="...">
                            <div class="caption">
                                <span class="badge bluee">ANNOUNCEMENT </span>
                                <h4>Today we are launching the</h4>
                            </div>
                        </a>
                    </div>
                </div>
               
                
                @endif
        {{--    </div>--}}
            </div>

        </div>


    </div>
    
    <script>
        function setNavigation() {
           $('#news').addClass('active');
        }
       
    </script>

    <!--LATEST ARTICLES-->
@endsection