@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">
    <script src='https://www.google.com/recaptcha/api.js'></script>
@endsection
@section('title','Home')
@section('content')

<div id="owl-demo" class="owl-carousel owl-theme">

    @if($ads->count()>0)
        @foreach($ads as $ad)
            <div class="item"><img src="{{asset($ad->ad_image)}}" alt=""></div>
        @endforeach
                {{--if no ads, then fall back to these--}}
    @else
        <div class="item">
            <img src="img/2.jpg" alt="image">
        </div>

        <div class="item"><img src="img/1.jpg" alt="">
        </div>

        <div class="item"><img src="img/3.jpg" alt="">
        </div>
    @endif

</div>

<!--ENDS IMAGE GALLERY-->


<!--LATEST ARTICLES-->
<div class="block">
    <div class="container">

        <div class="row">
            <div class="col-xs-12" align="center">



                <div class="row">
                    
                    <!--below code to vieww four most recent articles-->
                    @if($articles->count()>0)
                        @foreach($articles as $article)
                            <div class="col-xs-6 col-sm-6 col-mg-3 col-lg-3 filter {{$article->article_category}}">
                            <div class="thumbnail">
                               <a href="{{route('articles.show',$article->id)}}"><img src="{{$article->article_photo}}" alt="..." width="100%" height="10%">
                                    <div class="caption">
                                        <span class="badge red">{{$article->article_category}}</span>
                                        <h4 title="{{$article->article_title}}">{{str_limit($article->article_title,25)}}</h4>
                                    </div>
                                </a>
    
                            </div>
                            </div>
                        @endforeach
                    @else
                    <div class="col-xs-6 col-sm-6 col-mg-3 col-lg-3 filter news">
                        <div class="thumbnail">
                            <a href="#"> <img src="img/thumb4.JPG" alt="...">
                                <div class="caption">
                                    <span class="badge red">NEWS </span>
                                    <h4>Shop1 Opening</h4>
                                </div>
                            </a>

                        </div>
                    </div>
                    @endif
                </div>

            </div>
            
            
        </div>

        <!--experimental row button-->
       <!-- <div class="row">
         <div class="col-xs-12">
            <a href="{{route('articles')}}" class=" thumb_btn">READ MORE </a>
        </div>
        </div>-->
        <!--end experimental row-->

    </div>


</div>

<div class="container">
    <div class="row">
        <div class="col-xs-12" align="center" style="padding-bottom:50px">
           
            <a href="{{route('articles')}}" class=" thumb_btn">READ MORE </a>
        </div>
    </div>
    <br><br>
</div>
<!--LATEST ARTICLES-->

<!--OUR BRANDS-->
<div class="block bg" id="brands">
    <div class="container">
        <div class="row">
            <div class="col-xs-12" align="center">

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

                <div class="row">

                    @if($brands->count()>0)
                        @foreach($brands as $brand)
                            <div class="col-xs-4 col-lg-2 col-md-2 products">
                                <a href="{{route('brands.show',$brand->id)}}">
                                    <img src="{{asset($brand->brand_logo)}}" class="img-responsive">
                                </a>
                            </div>
                        @endforeach
                    @endif

                    <div class="col-xs-4 col-lg-2 col-md-2 products">
                        <a href="#">
                            <img src="img/product1.jpg" class="img-responsive">
                        </a>
                    </div>

                    <div class="col-xs-4 col-lg-2 col-md-2 products">
                        <a href="#">
                            <img src="img/product2.jpg" class="img-responsive">
                        </a>
                    </div>

                    <div class="col-xs-4 col-lg-2 col-md-2 products">
                        <a href="#">
                            <img src="img/product3.jpg" class="img-responsive">
                        </a>
                    </div>

                    <div class="col-xs-4 col-lg-2 col-md-2 products">
                        <a href="#">
                            <img src="img/product4.jpg" class="img-responsive">
                        </a>
                    </div>

                    <div class="col-xs-4 col-lg-2 col-md-2 products">
                        <a href="#">
                            <img src="img/product5.jpg" class="img-responsive">
                        </a>
                    </div>

                    <div class="col-xs-4 col-lg-2 col-md-2 products">
                        <a href="#">
                            <img src="img/product6.jpg" class="img-responsive">
                        </a>
                    </div>

                    <div class="col-xs-4 col-lg-2 col-md-2 products">
                        <a href="#">
                            <img src="img/product7.jpg" class="img-responsive">
                        </a>
                    </div>

                    <div class="col-xs-4 col-lg-2 col-md-2 products">
                        <a href="#">
                            <img src="img/product8.jpg" class="img-responsive">
                        </a>
                    </div>

                    <div class="col-xs-4 col-lg-2 col-md-2 products">
                        <a href="#">
                            <img src="img/product9.jpg" class="img-responsive">
                        </a>
                    </div>

                    <div class="col-xs-4 col-lg-2 col-md-2 products">
                        <a href="#">
                            <img src="img/product10.jpg" class="img-responsive">
                        </a>
                    </div>

                    <div class="col-xs-4 col-lg-2 col-md-2 products">
                        <a href="#">
                            <img src="img/product11.jpg" class="img-responsive">
                        </a>
                    </div>

                    <div class="col-xs-4 col-lg-2 col-md-2 products">
                        <a href="#">
                            <img src="img/product12.jpg" class="img-responsive">
                        </a>
                    </div>

                    <div class="col-xs-4 col-lg-2 col-md-2 products">
                        <a href="#">
                            <img src="img/product13.jpg" class="img-responsive">
                        </a>
                    </div>

                    <div class="col-xs-4 col-lg-2 col-md-2 products">
                        <a href="#">
                            <img src="img/product14.jpg" class="img-responsive">
                        </a>
                    </div>

                    <div class="col-xs-4 col-lg-2 col-md-2 products">
                        <a href="#">
                            <img src="img/product15.jpg" class="img-responsive">
                        </a>
                    </div>

                    <div class="col-xs-4 col-lg-2 col-md-2 products">
                        <a href="#">
                            <img src="img/product16.jpg" class="img-responsive">
                        </a>
                    </div>

                    <div class="col-xs-4 col-lg-2 col-md-2 products">
                        <a href="#">
                            <img src="img/product17.jpg" class="img-responsive">
                        </a>
                    </div>

                    <div class="col-xs-4 col-lg-2 col-md-2 products">
                        <a href="#">
                            <img src="img/product18.jpg" class="img-responsive">
                        </a>
                    </div>

                    <div class="col-xs-4 col-lg-2 col-md-2 products">
                        <a href="#">
                            <img src="img/product19.jpg" class="img-responsive">
                        </a>
                    </div>

                    <div class="col-xs-4 col-lg-2 col-md-2 products">
                        <a href="#">
                            <img src="img/product20.jpg" class="img-responsive">
                        </a>
                    </div>

                    <div class="col-xs-4 col-lg-2 col-md-2 products">
                        <a href="#">
                            <img src="img/product21.jpg" class="img-responsive">
                        </a>
                    </div>

                    <div class="col-xs-4 col-lg-2 col-md-2 products">
                        <a href="#">
                            <img src="img/product22.jpg" class="img-responsive">
                        </a>
                    </div>

                    <div class="col-xs-4 col-lg-2 col-md-2 products">
                        <a href="#">
                            <img src="img/product23.jpg" class="img-responsive">
                        </a>
                    </div>

                </div>

            </div>
        </div>
    </div>
</div>
<!--OUR BRANDS-->

<!--OUR OUTLETS-->
<div class="block ">
    <div class="container">
        <div class="row">
            <div class="col-xs-12" align="center">

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



                <div class="row">

                    <div class="col-xs-12 col-md-4 col-sm-4 col-lg-4">
                        <div class="thumbnail hover" >
                            <img src="img/location3.jpg" alt="" class="image">
                            <a href="{{route('outlets')}}#shop1">
                                <div class="overlay">
                                    <div class="text">
                                        <h4>ADK General Trading</h4>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>

                    <div class="col-xs-12 col-md-4 col-sm-4 col-lg-4">
                        <div class="thumbnail hover" >
                            <img src="img/location1.jpg" alt="" class="image">
                            <a href="{{route('outlets')}}#shop2">
                                <div class="overlay">
                                    <div class="text">
                                        <h4> ADK NDC</h4>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>

                    <div class="col-xs-12 col-md-4 col-sm-4 col-lg-4">
                        <div class="thumbnail hover" >
                            <img src="img/location2.jpg" alt="" class="image">
                            <a href="{{route('outlets')}}#shop3">
                                <div class="overlay">
                                    <div class="text">
                                        <h4>GT Snap</h4>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>



                    <br><br>


                </div>  <!--ROw-->

            </div>
        </div>
    </div>
</div>
<!--OUR OUTLETS-->

<!--- Subscribe-->
<div class="block4 bg" id="subscribe" >
    <div class="container">
        <div class="row">
            <div class="col-xs-12" align="center">

                <h3>SUBSCRIBE TO RECIEVE OUR NEWSLETTERS</h3>
                <div class="col-xs-12 col-md-12" align="center">
                @if (session()->has('message'))
                    <div class="alert alert-dismissable alert-success">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <strong>
                            {!! session()->get('message') !!}
                        </strong>
                    </div>
                @endif
                @if (session()->has('error'))
                    <div class="alert alert-dismissable alert-warning">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <strong>
                            {!! session()->get('error') !!}
                        </strong>
                    </div>
                @endif
                </div>
                <div class="row">

                    <div class="col-xs-12 col-md-12" align="center">
                        <form method="post" action="{{route('subscribe')}}">
                            @csrf
                            <div class="input-group">
                                <input class="btn btn-lg" name="email" id="email" type="email" placeholder="Your Email" required>
                                <button class="btn btn-info btn-lg subsribe-btn" type="submit">Submit</button>
                            </div>
                        </form>
                    </div>
                    <div class="col-xs-12 col-md-2">
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<!--- Subscribe-->

<!--- Footer-->
<div class="block bg3" id="contact">
    <div class="container">
        <div class="row">
            <div class="col-xs-12" align="center">

                <h1 ><strong>CONTACT</strong><span class="white"> US</span></h1>
                <img src="img/sep1.png" class="sep">

                <h3 class="blue">ADK GENERAL TRADING PVT LTD</h3>
                <br>
                <p class="white">M. Fathimath Hiya, Plot 57, Boduthakurufaanu Magu, Male', Rep of Maldives</p>
                <p class="white">+960 3335063</p>
                <p class="white">info@adk-general-trading.com</p>
                <br>
                <br>
                <form role="form" id="contact-form" class="contact-form" method="POST" action="{{route('contact')}}">
                    {{@csrf_field()}}
                    @if(count($errors)>0 )
                        <div class="alert alert-danger">
                            There were some problems<br />
                            <ul>
                                @foreach($errors->all() as $error)
                                    <li>{{$error}}</li>
                                @endforeach
                            </ul>

                        </div>
                    @endif
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <input type="text" class="form-control" name="name" autocomplete="off" id="Name" placeholder="Name" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <input type="email" class="form-control" name="email" autocomplete="off" id="email" placeholder="E-mail" required>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <textarea class="form-control textarea" rows="3" name="message" id="Message" placeholder="Please state your inquiry.." required></textarea>
                            </div>
                        </div>
                    </div>

                    <div class="row">

                            <div class="col-md-12">
                                <div class="form-group">
                                   @if(env('GOOGLE_RECAPTCHA_KEY'))
                                        <div class="g-recaptcha"
                                             data-sitekey="{{env('GOOGLE_RECAPTCHA_KEY')}}">
                                        </div>
                                    @endif
                                </div>
                            </div>

                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <button type="submit" class="btn main-btn pull-right">SUBMIT</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!--- END Footer-->
  <script>
        function setNavigation() {
           $('#home').addClass('active');
        }
       
    </script>
@endsection