@extends('english.layout.main')

@section('content')
<!-- ============================================================= Content Start ============================================================= -->
<!-- END: Navbar Mobile -->
<div class="xg-main">
    <div class="container">
        <!-- START: Categories -->
        <div class="xg-gap-2"></div>
        <div class="xg-news-box">
            <div class="xg-news-box-list">
                <div class="nano">
                    <div class="nano-content">
                        @foreach($FeaturedPosts as $FeaturedPost)
                        
                        <div class="xg-news-box-item xg-news-box-item-active">
                            <div class="xg-news-box-item-img">
                                <img src="{{ asset($FeaturedPost->image) }}" alt="{{ substr($FeaturedPost->Title_en, 0, 20) }}" >
                            </div>
                            <img src="{{ asset($FeaturedPost->image) }}" alt="{{ substr($FeaturedPost->Title_en, 0, 20) }}" class="xg-news-box-item-full-img">
                            <h3 class="xg-news-box-item-title">{{ substr($FeaturedPost->Title_en, 0, 50) }}</h3>

                            <span class="xg-news-box-item-categories">
                                <span class="{{ $FeaturedPost->Category->color }}">{{ $FeaturedPost->Category->title }}</span>
                            </span>

                            <div class="xg-news-box-item-text">
                                <p>{!! substr($FeaturedPost->body_en, 0, 260) !!}</p>
                            </div>
                            <a href="{{ url('Games') }}/{{ $FeaturedPost->slug }}" class="xg-news-box-item-url">See More</a>
                <div class="xg-news-box-item-date"><span class="icon-line-awesome-calendar"></span> {{ date('M Y', strtotime($FeaturedPost->created_at)) }}</div>
                            <div class="xg-news-box-item-date"><span class="icon-feather-archive"></span> {{ $FeaturedPost->excerpt }} GB</div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
            <div class="xg-news-box-each-info">
                <div class="nano">
                    <div class="nano-content">
                        <!-- There will be inserted info about selected news-->
                        <div class="xg-news-box-item-image">
                            <img src="" alt="" width="700" height="350">
                            <span class="xg-news-box-item-categories">
                                <span class="bg-main-4"></span>
                            </span>
                        </div>
                        <h3 class="xg-news-box-item-title"></h3>
                        <div class="xg-news-box-item-text">
                            <p></p>
                        </div>
                        <a href="" class="xg-news-box-item-more">See More</a>
                        <div class="xg-news-box-item-date">
                            <span class="fa fa-calendar"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="xg-gap-2"></div>
        @foreach(Advertisers() as $Advertiser)
        @if($Advertiser->type == 'Image')
        <a href="{{ $Advertiser->url }}" class="xg-post-img">
            <img src="{{ asset($Advertiser->image) }}" alt="{{ $Advertiser->displayname }}">
            <span class="xg-post-categories">
                <span class="bg-main-1">Ads</span>
            </span>
        </a>
        @elseif($Advertiser->type == 'code') 
        {{ $Advertiser->code }}
        @endif
        @endforeach
        <div class="xg-gap-2"></div>
        <div class="xg-blog-grid">
            <div class="row vertical-gap">
            @foreach($Games as $Game)
                <div class="col-md-4">
                    <div class="xg-product-cat">
                        <a class="xg-product-image" href="{{ url('Games') }}/{{ $Game->slug }}">
                            <img src="{{ asset($Game->image) }}" alt="{{ substr($Game->Title_en, 0, 20) }}">
                        </a>
                        <div class="xg-product-cont">
                            <h3 class="xg-product-title h5">
                                <a href="{{ url('Games') }}/{{ $Game->slug }}">{{ substr($Game->Title_en, 0, 50) }}</a>
                            </h3>
                            
                            <div class="xg-gap-1"></div>
                            <div class="xg-product-price">{{ $Game->excerpt }} GB</div>
                        </div>
                    </div>
                </div>
            @endforeach
            </div>
        </div>
        <!-- END: Latest News -->

        <div class="xg-gap-2"></div>

        <div class="row">
            <div class="col-md-4 order-md-2 text-right">
             <!-- START: Search Form -->
             <form action="Search" method="GET" class="xg-form xg-form-style-1">
                {{ csrf_field() }}
                <div class="input-group">
                    <input type="text" class="form-control" name="Search" placeholder="Search and hit enter...">
                    <button type="submit" class="xg-btn xg-btn-color-main-1" style="transform: none;border-left:0">
                        <span class="fa fa-search"></span>
                    </button>
                </div>
            </form>
            <!-- END: Search Form -->
        </div>
        <div class="col-md-8">
            <div class="row">
            <div class="xg-pagination xg-pagination-left">
                <nav>
                    {{ $Games->links() }}
                </nav>
            </div>
            </div>
        </div>
    </div>
</div>
</div>
</aside>
<!-- END: Sidebar -->
</div>
</div>
</div>

<div class="xg-gap-4"></div>
<!-- ============================================================= Content end   ============================================================= -->
@endsection